DNUM-SocialGouv · juliebrunetto83 · Feb 19, 2024 · Feb 14, 2024 · Feb 14, 2024 · Feb 15, 2024
diff --git a/...s/Accompagnement/DemandeDeContact/Formulaire/FormulaireDemandeDeContactAccompagnement.tsx b/...s/Accompagnement/DemandeDeContact/Formulaire/FormulaireDemandeDeContactAccompagnement.tsx
@@ -7,7 +7,7 @@ import { LoadingButton } from '~/client/components/ui/Button/LoadingButton';
 import { ComboboxCommune } from '~/client/components/ui/Form/Combobox/ComboboxCommune/ComboboxCommune';
 import { InputText } from '~/client/components/ui/Form/InputText/InputText';
 import { TextArea } from '~/client/components/ui/Form/InputText/TextArea';
-import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated';
+import { Link } from '~/client/components/ui/Link/Link';
 import { Select } from '~/client/components/ui/Select/Select';
 import { useDependency } from '~/client/context/dependenciesContainer.context';
 import { ageOptions } from '~/client/domain/selectAgeData';
@@ -110,8 +110,8 @@ export function FormulaireDemandeDeContactAccompagnement({
 			<div className={styles.formulaireDécharge}>
 				<p>
 					Vous êtes informé que vos données à caractère personnel sont collectées et traitées par la DGEFP pour répondre
-					à votre demande. Pour en savoir plus vous pouvez consulter la <LinkDeprecated href="/confidentialite">politique de
-					confidentialité</LinkDeprecated> et les <LinkDeprecated href="/cgu">CGU</LinkDeprecated> de la DGEFP. En cliquant sur “Envoyer mes
+					à votre demande. Pour en savoir plus vous pouvez consulter la <Link href="/confidentialite">politique de
+					confidentialité</Link> et les <Link href="/cgu">CGU</Link> de la DGEFP. En cliquant sur “Envoyer mes
 					informations“ vos données seront transmises à la mission locale de la zone géographique dans laquelle vous
 					résidez pour que celle-ci prenne contact avec vous.
 				</p>

diff --git a/.../features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnement.module.scss b/.../features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnement.module.scss
@@ -89,14 +89,13 @@ $color-summary-hover: utilities.$color-cta-background-primary-hover;
 }
 
 .contactFormulaireÉtablissement {
+  justify-content: center;
   margin-top: 1.25rem;
-  align-self: start;
   font-size: 1rem;
   width: 100%;
 
   @include utilities.media(large) {
-    align-self: flex-start;
-    width: auto;
+    width: fit-content;
   }
 }
 

diff --git a/...s/features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnementDesktop.tsx b/...s/features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnementDesktop.tsx
@@ -13,8 +13,7 @@ import {
 } from '~/client/components/features/Accompagnement/Rechercher/Résultat/useAccompagnementLogo';
 import { ButtonComponent } from '~/client/components/ui/Button/ButtonComponent';
 import { Card } from '~/client/components/ui/Card/Card';
-import { Icon } from '~/client/components/ui/Icon/Icon';
-import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton';
+import { Link } from '~/client/components/ui/Link/Link';
 import {
 	ÉtablissementAccompagnement,
 	TypeÉtablissement,
@@ -50,15 +49,14 @@ export function RésultatRechercherAccompagnementDesktop(props: RésultatRecherc
 						</div>
 						{
 							établissement.email && !isMissionLocale &&
-							<LinkStyledAsButtonWithIcon
+							<Link
 								appearance={'asQuaternaryButton'}
-								icon={<Icon name={'mail'}/>}
-								iconPosition={'right'}
 								href={`mailto:${établissement.email}`}
 								className={styles.contactMailÉtablissement}
 								title="Contacter l‘agence - adresse mail">
 								Contacter l‘agence
-							</LinkStyledAsButtonWithIcon>
+								<Link.Icon name="mail"/>
+							</Link>
 						}
 						{
 							établissement.email && isMissionLocale &&

diff --git a/...ts/features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnementMobile.tsx b/...ts/features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnementMobile.tsx
@@ -13,8 +13,7 @@ import {
 } from '~/client/components/features/Accompagnement/Rechercher/Résultat/useAccompagnementLogo';
 import { ButtonComponent } from '~/client/components/ui/Button/ButtonComponent';
 import { Card } from '~/client/components/ui/Card/Card';
-import { Icon } from '~/client/components/ui/Icon/Icon';
-import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton';
+import { Link } from '~/client/components/ui/Link/Link';
 import {
 	ÉtablissementAccompagnement,
 	TypeÉtablissement,
@@ -49,15 +48,14 @@ export function RésultatRechercherAccompagnementMobile(props: RésultatRecherch
 			<RésultatRechercherAccompagnementTagsList etablissement={établissement} />
 			{
 				établissement.email && !isMissionLocale &&
-				<LinkStyledAsButtonWithIcon
+				<Link
 					className={styles.contactFormulaireÉtablissement}
-					icon={<Icon name={'mail'}/>}
-					iconPosition={'right'}
 					href={`mailto:${établissement.email}`}
 					appearance={'asPrimaryButton'}
 					title="Contacter l‘agence - adresse mail">
 					Contacter l‘agence
-				</LinkStyledAsButtonWithIcon>
+					<Link.Icon name="mail"/>
+				</Link>
 			}
 			{
 				établissement.horaires && établissement.horaires.length > 0 &&

diff --git a/src/client/components/features/Alternance/Detail/Detail.module.scss b/src/client/components/features/Alternance/Detail/Detail.module.scss
@@ -23,8 +23,7 @@
 }
 
 .entete .postuler {
-  margin-top: 3rem;
-  justify-content: center;
+  margin: 3rem auto 0 auto;
 }
 
 .iframe {

diff --git a/src/client/components/features/Alternance/Detail/Detail.tsx b/src/client/components/features/Alternance/Detail/Detail.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { ConsulterOffreLayout } from '~/client/components/layouts/ConsulterOffre/ConsulterOffreLayout';
 import { ButtonComponent } from '~/client/components/ui/Button/ButtonComponent';
 import { Icon } from '~/client/components/ui/Icon/Icon';
-import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton';
+import { Link } from '~/client/components/ui/Link/Link';
 import { ModalComponent } from '~/client/components/ui/Modal/ModalComponent';
 import { TagList } from '~/client/components/ui/Tag/TagList';
 import { useLocale } from '~/client/context/locale.context';
@@ -28,7 +28,7 @@ export function Detail({ annonce }: { annonce: Alternance }) {
 				{annonce.entreprise.nom && <p className={styles.sousTitre}>{annonce.entreprise.nom}</p>}
 				<TagList className={styles.tags} list={annonce.tags}/>
 				{isPoleEmploi(annonce.source) && annonce.lienPostuler &&
-            <LinkStyledAsButtonWithIcon appearance={'asPrimaryButton'} type={'external'} href={annonce.lienPostuler} className={styles.postuler}>Postuler sur Pôle emploi</LinkStyledAsButtonWithIcon>
+            <Link appearance={'asPrimaryButton'} href={annonce.lienPostuler} className={styles.postuler}>Postuler sur Pôle emploi<Link.Icon/></Link>
 				}
 				{isMatcha(annonce.source) && annonce.id &&
             <ButtonComponent

diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissage.module.scss b/src/client/components/features/CampagneApprentissage/CampagneApprentissage.module.scss
@@ -16,6 +16,7 @@
     & .cta {
       width: 100%;
       margin-top: 1rem;
+      justify-content: center;
       @include utilities-deprecated.media(small) {
         width: fit-content;
       }

diff --git a/...mpagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.tsx b/...mpagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.tsx
@@ -13,7 +13,7 @@ import {
 import VideosCampagneApprentissage
 	from '~/client/components/features/CampagneApprentissage/VideosCampagneApprentissage/VideosCampagneApprentissage';
 import { HeroWithIllustration } from '~/client/components/ui/Hero/Hero';
-import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton';
+import { Link } from '~/client/components/ui/Link/Link';
 import useBreakpoint from '~/client/hooks/useBreakpoint';
 import { TYPE_SIMULATEUR } from '~/pages/apprentissage/simulation/index.page';
 import { VideoCampagneApprentissage } from '~/server/campagne-apprentissage/domain/videoCampagneApprentissage';
@@ -52,9 +52,10 @@ export function CampagneApprentissageEntreprises({ videos }: CampagneApprentissa
 			<header className={styles.titrePage}>
 				<HeroWithIllustration image={'/images/campagne-apprentissage-entreprise-avec-texte.webp'} className={styles.hero}>
 					<h1>L’apprentissage, pour mon entreprise <span className={styles.avoidLineBreakInside}>c’est le bon choix&nbsp;!</span></h1>
-					<LinkStyledAsButtonWithIcon href={`/apprentissage/simulation?simulateur=${TYPE_SIMULATEUR.EMPLOYEUR}`} appearance={'asPrimaryButton'} className={styles.cta}>
+					<Link href={`/apprentissage/simulation?simulateur=${TYPE_SIMULATEUR.EMPLOYEUR}`} appearance={'asPrimaryButton'} className={styles.cta}>
 						{ isSmallScreen ? 'Simuler le coût d’embauche' : 'Simuler le coût de l’embauche d’un apprenti'}
-					</LinkStyledAsButtonWithIcon>
+						<Link.Icon/>
+					</Link>
 				</HeroWithIllustration>
 			</header>
 			<RaisonsDeChoisirApprentissage titre="5 bonnes raisons de choisir l’apprentissage :" raisons={raisons}

diff --git a/...ses/EnSavoirPlusApprentissageEntreprises/EnSavoirPlusApprentissageEntreprises.module.scss b/...ses/EnSavoirPlusApprentissageEntreprises/EnSavoirPlusApprentissageEntreprises.module.scss
@@ -43,6 +43,7 @@
   .link {
     max-width: 60ch;
     width: 100%;
+    justify-content: center;
     align-self: center;
 
     @include utilities-deprecated.media(large) {

diff --git a/...Entreprises/EnSavoirPlusApprentissageEntreprises/EnSavoirPlusApprentissageEntreprises.tsx b/...Entreprises/EnSavoirPlusApprentissageEntreprises/EnSavoirPlusApprentissageEntreprises.tsx
@@ -1,25 +1,27 @@
 import React from 'react';
 import { Container } from 'src/client/components/layouts/Container/Container';
 
-import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton';
+import { Link } from '~/client/components/ui/Link/Link';
 
 import styles from './EnSavoirPlusApprentissageEntreprises.module.scss';
 
 export default function EnSavoirPlusApprentissageEntreprises() {
 	return <Container className={styles.enSavoirPlus}>
 		<div className={styles.enSavoirPlusFaq}>
 			<h2 className={styles.heading}>On répond à toutes vos questions <span>sur l’apprentissage</span></h2>
-			<LinkStyledAsButtonWithIcon className={styles.link} href="/faq/apprentissage-employeurs-apprentis" appearance="asPrimaryButton">
+			<Link className={styles.link} href="/faq/apprentissage-employeurs-apprentis" appearance="asPrimaryButton">
 				Consulter la FAQ
-			</LinkStyledAsButtonWithIcon>
+				<Link.Icon/>
+			</Link>
 		</div>
 		<div className={styles.enSavoirPlusDepotOffre}>
 			<h2 className={styles.heading}>
 				Vous êtes à la recherche d’un apprenti ?
 			</h2>
-			<LinkStyledAsButtonWithIcon className={styles.link} href="/apprentissage/deposer-offre" appearance="asPrimaryButton">
+			<Link className={styles.link} href="/apprentissage/deposer-offre" appearance="asPrimaryButton">
 				Déposer une offre
-			</LinkStyledAsButtonWithIcon>
+				<Link.Icon/>
+			</Link>
 		</div>
 	</Container>;
 }
diff --git a/...sageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.module.scss b/...sageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.module.scss
@@ -54,10 +54,11 @@
   & .link {
     max-width: 60ch;
     width: 100%;
+    justify-content: center;
     align-self: center;
 
     @include utilities-deprecated.media(large) {
       max-width: fit-content;
     }
   }
-}
+}
diff --git a/...pprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.tsx b/...pprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 
-import styles from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.module.scss';
+import styles
+	from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.module.scss';
 import { Container } from '~/client/components/layouts/Container/Container';
-import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton';
-
-
+import { Link } from '~/client/components/ui/Link/Link';
 
 export function InformationSurEmbaucheApprenti() {
 	const embaucherUnApprentiLink = 'https://travail-emploi.gouv.fr/formation-professionnelle/formation-en-alternance-10751/apprentissage/embaucher-un-apprenti/';
@@ -16,9 +15,10 @@ export function InformationSurEmbaucheApprenti() {
 				<h2 id={'titre-section-renseignement'}>
 					Comme eux, vous souhaitez faire <span>le choix de l’apprentissage&nbsp;?</span>
 				</h2>
-				<LinkStyledAsButtonWithIcon href={embaucherUnApprentiLink} appearance={'asSecondaryButton'} className={styles.link}>
+				<Link href={embaucherUnApprentiLink} appearance={'asSecondaryButton'} className={styles.link}>
 					Se renseigner sur l’embauche
-				</LinkStyledAsButtonWithIcon>
+					<Link.Icon/>
+				</Link>
 			</section>
 			<section aria-labelledby={'titre-section-aide'} className={styles.aideFinanciere}>
 				<h2 id={'titre-section-aide'}>
@@ -27,9 +27,10 @@ export function InformationSurEmbaucheApprenti() {
 				<p className={styles.description}>
 						Cette aide de 6000 euros maximum est versée pour la première année de contrat, jusqu’au niveau master
 				</p>
-				<LinkStyledAsButtonWithIcon href={enSavoirPlusSurAideLink} appearance={'asSecondaryButton'} className={styles.link}>
+				<Link href={enSavoirPlusSurAideLink} appearance={'asSecondaryButton'} className={styles.link}>
 						En savoir plus
-				</LinkStyledAsButtonWithIcon>
+					<Link.Icon/>
+				</Link>
 			</section>
 		</Container>
 	);

diff --git a/...eatures/CampagneApprentissage/CampagneApprentissageJeunes/CampagneApprentissageJeunes.tsx b/...eatures/CampagneApprentissage/CampagneApprentissageJeunes/CampagneApprentissageJeunes.tsx
@@ -11,7 +11,7 @@ import {
 import VideosCampagneApprentissage
 	from '~/client/components/features/CampagneApprentissage/VideosCampagneApprentissage/VideosCampagneApprentissage';
 import { HeroWithIllustration } from '~/client/components/ui/Hero/Hero';
-import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton';
+import { Link } from '~/client/components/ui/Link/Link';
 import useBreakpoint from '~/client/hooks/useBreakpoint';
 import { TYPE_SIMULATEUR } from '~/pages/apprentissage/simulation/index.page';
 import { VideoCampagneApprentissage } from '~/server/campagne-apprentissage/domain/videoCampagneApprentissage';
@@ -53,9 +53,10 @@ export function CampagneApprentissageJeunes({ videos }: CampagneApprentissageJeu
 			<header className={styles.titrePage}>
 				<HeroWithIllustration image={'/images/campagne-apprentissage-jeune-avec-texte.webp'} className={styles.hero}>
 					<h1>Avec l’apprentissage, vous apprenez directement <span className={styles.avoidLineBreakInside}>sur le terrain</span> <span className={styles.avoidLineBreakInside}>et vous êtes payés !</span></h1>
-					<LinkStyledAsButtonWithIcon href={`/apprentissage/simulation?simulateur=${TYPE_SIMULATEUR.ALTERNANT}`} appearance={'asPrimaryButton'} className={styles.cta}>
+					<Link href={`/apprentissage/simulation?simulateur=${TYPE_SIMULATEUR.ALTERNANT}`} appearance={'asPrimaryButton'} className={styles.cta}>
 						Simuler votre rémunération { !isSmallScreen && 'en tant qu’apprenti' }
-					</LinkStyledAsButtonWithIcon>
+						<Link.Icon/>
+					</Link>
 				</HeroWithIllustration>
 			</header>
 			<RaisonsDeChoisirApprentissage titre="5 bonnes raisons de choisir l’apprentissage" raisons={raisons}/>

diff --git a/...tissageJeunes/EnSavoirPlusApprentissageJeunes/EnSavoirPlusApprentissageJeunes.module.scss b/...tissageJeunes/EnSavoirPlusApprentissageJeunes/EnSavoirPlusApprentissageJeunes.module.scss
@@ -41,6 +41,7 @@
 
   .link {
     max-width: 60ch;
+    justify-content: center;
     width: 100%;
     align-self: center;
 

diff --git a/...neApprentissageJeunes/EnSavoirPlusApprentissageJeunes/EnSavoirPlusApprentissageJeunes.tsx b/...neApprentissageJeunes/EnSavoirPlusApprentissageJeunes/EnSavoirPlusApprentissageJeunes.tsx
@@ -1,24 +1,26 @@
 import React from 'react';
 import { Container } from 'src/client/components/layouts/Container/Container';
 
-import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton';
+import { Link } from '~/client/components/ui/Link/Link';
 
 import styles from './EnSavoirPlusApprentissageJeunes.module.scss';
 
 export default function EnSavoirPlusApprentissageJeunes() {
 	return <Container className={styles.enSavoirPlus}>
 		<div className={styles.enSavoirPlusParents}>
 			<h2 className={styles.heading}>L’apprentissage vous intéresse&nbsp;? <span className={styles.headingSecondary}>On répond à toutes vos questions</span></h2>
-			<LinkStyledAsButtonWithIcon className={styles.link} href="/faq/apprentissage-parents-enfants" appearance="asPrimaryButton">
+			<Link className={styles.link} href="/faq/apprentissage-parents-enfants" appearance="asPrimaryButton">
 				Consulter la FAQ
-			</LinkStyledAsButtonWithIcon>
+				<Link.Icon/>
+			</Link>
 		</div>
 		<div className={styles.enSavoirPlusEmployeurs}>
 			<h2 className={styles.heading}>Employeurs : tout ce qu’il y a à savoir <span className={styles.headingSecondary}>sur l’apprentissage pour votre entreprise</span>
 			</h2>
-			<LinkStyledAsButtonWithIcon className={styles.link} href="/apprentissage-entreprises" appearance="asPrimaryButton">
+			<Link className={styles.link} href="/apprentissage-entreprises" appearance="asPrimaryButton">
 				Découvrir l’apprentissage
-			</LinkStyledAsButtonWithIcon>
+				<Link.Icon/>
+			</Link>
 		</div>
 	</Container>;
 }
diff --git a/...CampagneApprentissageJeunes/PreparationApprentissage/PreparationApprentissage.module.scss b/...CampagneApprentissageJeunes/PreparationApprentissage/PreparationApprentissage.module.scss
@@ -31,6 +31,7 @@
       }
 
     & .link {
+      justify-content: center;
       max-width: 60ch;
       width: 100%;
       margin: 1.25rem auto 0 auto;

diff --git a/...tissage/CampagneApprentissageJeunes/PreparationApprentissage/PreparationApprentissage.tsx b/...tissage/CampagneApprentissageJeunes/PreparationApprentissage/PreparationApprentissage.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 
 import { Container } from '~/client/components/layouts/Container/Container';
-import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton';
+import { Link } from '~/client/components/ui/Link/Link';
 
 import styles from './PreparationApprentissage.module.scss';
 
@@ -16,24 +16,27 @@ export default function PreparationApprentissage() {
 						Vous souhaitez faire le choix de l’apprentissage&nbsp;?
 					</h2>
 					<div className={styles.linkContainerChoixApprentissage}>
-						<LinkStyledAsButtonWithIcon className={styles.link} href={'/formations/apprentissage'} appearance={'asPrimaryButton'}>
+						<Link className={styles.link} href={'/formations/apprentissage'} appearance={'asPrimaryButton'}>
 							Trouver votre formation en apprentissage
-						</LinkStyledAsButtonWithIcon>
-						<LinkStyledAsButtonWithIcon className={styles.link} href={'/apprentissage'} appearance={'asSecondaryButton'}>
+							<Link.Icon/>
+						</Link>
+						<Link className={styles.link} href={'/apprentissage'} appearance={'asSecondaryButton'}>
 							Trouver votre entreprise
-						</LinkStyledAsButtonWithIcon>
+							<Link.Icon/>
+						</Link>
 					</div>
 				</section>
 				<section className={styles.prepaApprentissage} aria-labelledby={'titre-section-prepa-apprentissage'}>
 					<h2 className={styles.titlePrepaApprentissage} id={'titre-section-prepa-apprentissage'}>
 						La prépa-apprentissage c’est quoi ?
 					</h2>
-					<LinkStyledAsButtonWithIcon
+					<Link
 						className={classNames(styles.linkPrepaApprentissage, styles.link)}
 						href={'/articles/la-prepa-apprentissage-c-est-quoi'}
 						appearance={'asPrimaryButton'}>
 						Lire l‘article
-					</LinkStyledAsButtonWithIcon>
+						<Link.Icon/>
+					</Link>
 				</section>
 			</Container>
 		</div>);

diff --git a/...CampagneApprentissage/VideosCampagneApprentissage/VideosCampagneApprentissage.module.scss b/...CampagneApprentissage/VideosCampagneApprentissage/VideosCampagneApprentissage.module.scss
@@ -23,13 +23,13 @@
 
 .titreSection {
   @extend %text-large;
-  @extend %bold;    
+  @extend %bold;
   margin-bottom: 1.5rem;
-  
+
   & span {
     display: inline-block;
   }
-  
+
   @include utilities-deprecated.media(large) {
     grid-area: titre;
   }