Skip to content

Commit

Permalink
feat(UI): utilisation du nouveau composant link (#2705)
Browse files Browse the repository at this point in the history
  • Loading branch information
juliebrunetto83 authored Feb 19, 2024
1 parent 9c2356a commit b76d0ff
Show file tree
Hide file tree
Showing 103 changed files with 530 additions and 988 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 &&
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 &&
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@
}

.entete .postuler {
margin-top: 3rem;
justify-content: center;
margin: 3rem auto 0 auto;
}

.iframe {
Expand Down
4 changes: 2 additions & 2 deletions src/client/components/features/Alternance/Detail/Detail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
& .cta {
width: 100%;
margin-top: 1rem;
justify-content: center;
@include utilities-deprecated.media(small) {
width: fit-content;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
.link {
max-width: 60ch;
width: 100%;
justify-content: center;
align-self: center;

@include utilities-deprecated.media(large) {
Expand Down
Original file line number Diff line number Diff line change
@@ -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>;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
Original file line number Diff line number Diff line change
@@ -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/';
Expand All @@ -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'}>
Expand All @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@

.link {
max-width: 60ch;
justify-content: center;
width: 100%;
align-self: center;

Expand Down
Original file line number Diff line number Diff line change
@@ -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>;
}
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
}

& .link {
justify-content: center;
max-width: 60ch;
width: 100%;
margin: 1.25rem auto 0 auto;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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>);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Loading

0 comments on commit b76d0ff

Please sign in to comment.