diff --git a/src/client/components/features/Accompagnement/DemandeDeContact/Formulaire/FormulaireDemandeDeContactAccompagnement.tsx b/src/client/components/features/Accompagnement/DemandeDeContact/Formulaire/FormulaireDemandeDeContactAccompagnement.tsx index 4bd5d8ef49..c23b52e111 100644 --- a/src/client/components/features/Accompagnement/DemandeDeContact/Formulaire/FormulaireDemandeDeContactAccompagnement.tsx +++ b/src/client/components/features/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({

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 politique de - confidentialité et les CGU de la DGEFP. En cliquant sur “Envoyer mes + à votre demande. Pour en savoir plus vous pouvez consulter la politique de + confidentialité et les CGU 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.

diff --git "a/src/client/components/features/Accompagnement/Rechercher/R\303\251sultat/R\303\251sultatRechercherAccompagnement.module.scss" "b/src/client/components/features/Accompagnement/Rechercher/R\303\251sultat/R\303\251sultatRechercherAccompagnement.module.scss" index ad6e01efc3..3f0d8b47be 100644 --- "a/src/client/components/features/Accompagnement/Rechercher/R\303\251sultat/R\303\251sultatRechercherAccompagnement.module.scss" +++ "b/src/client/components/features/Accompagnement/Rechercher/R\303\251sultat/R\303\251sultatRechercherAccompagnement.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/src/client/components/features/Accompagnement/Rechercher/R\303\251sultat/R\303\251sultatRechercherAccompagnementDesktop.tsx" "b/src/client/components/features/Accompagnement/Rechercher/R\303\251sultat/R\303\251sultatRechercherAccompagnementDesktop.tsx" index 19da2eeb0d..696ee9e858 100644 --- "a/src/client/components/features/Accompagnement/Rechercher/R\303\251sultat/R\303\251sultatRechercherAccompagnementDesktop.tsx" +++ "b/src/client/components/features/Accompagnement/Rechercher/R\303\251sultat/R\303\251sultatRechercherAccompagnementDesktop.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
{ établissement.email && !isMissionLocale && - } - iconPosition={'right'} href={`mailto:${établissement.email}`} className={styles.contactMailÉtablissement} title="Contacter l‘agence - adresse mail"> Contacter l‘agence - + + } { établissement.email && isMissionLocale && diff --git "a/src/client/components/features/Accompagnement/Rechercher/R\303\251sultat/R\303\251sultatRechercherAccompagnementMobile.tsx" "b/src/client/components/features/Accompagnement/Rechercher/R\303\251sultat/R\303\251sultatRechercherAccompagnementMobile.tsx" index 795358d809..1414f89b61 100644 --- "a/src/client/components/features/Accompagnement/Rechercher/R\303\251sultat/R\303\251sultatRechercherAccompagnementMobile.tsx" +++ "b/src/client/components/features/Accompagnement/Rechercher/R\303\251sultat/R\303\251sultatRechercherAccompagnementMobile.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 { établissement.email && !isMissionLocale && - } - iconPosition={'right'} href={`mailto:${établissement.email}`} appearance={'asPrimaryButton'} title="Contacter l‘agence - adresse mail"> Contacter l‘agence - + + } { é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 index 57281b758e..862af1dd31 100644 --- 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 index a90a1c662c..77765901c3 100644 --- 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 &&

{annonce.entreprise.nom}

} {isPoleEmploi(annonce.source) && annonce.lienPostuler && - Postuler sur Pôle emploi + Postuler sur Pôle emploi } {isMatcha(annonce.source) && annonce.id &&

L’apprentissage, pour mon entreprise c’est le bon choix !

- + { isSmallScreen ? 'Simuler le coût d’embauche' : 'Simuler le coût de l’embauche d’un apprenti'} - + +

On répond à toutes vos questions sur l’apprentissage

- + Consulter la FAQ - + +

Vous êtes à la recherche d’un apprenti ?

- + Déposer une offre - + +
; } diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.module.scss b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.module.scss index fe33a6bc4f..ffdf812136 100644 --- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.module.scss +++ b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/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; } } -} \ No newline at end of file +} diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.tsx b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.tsx index 9d61ae845a..4961f5081c 100644 --- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.tsx +++ b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/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() {

Comme eux, vous souhaitez faire le choix de l’apprentissage ?

- + Se renseigner sur l’embauche - + +

@@ -27,9 +27,10 @@ export function InformationSurEmbaucheApprenti() {

Cette aide de 6000 euros maximum est versée pour la première année de contrat, jusqu’au niveau master

- + En savoir plus - + +

); diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/CampagneApprentissageJeunes.tsx b/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/CampagneApprentissageJeunes.tsx index f681a1a777..537cdac0d9 100644 --- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/CampagneApprentissageJeunes.tsx +++ b/src/client/components/features/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

Avec l’apprentissage, vous apprenez directement sur le terrain et vous êtes payés !

- + Simuler votre rémunération { !isSmallScreen && 'en tant qu’apprenti' } - + +
diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/EnSavoirPlusApprentissageJeunes/EnSavoirPlusApprentissageJeunes.module.scss b/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/EnSavoirPlusApprentissageJeunes/EnSavoirPlusApprentissageJeunes.module.scss index 8773c1e898..6a46327729 100644 --- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/EnSavoirPlusApprentissageJeunes/EnSavoirPlusApprentissageJeunes.module.scss +++ b/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/EnSavoirPlusApprentissageJeunes/EnSavoirPlusApprentissageJeunes.module.scss @@ -41,6 +41,7 @@ .link { max-width: 60ch; + justify-content: center; width: 100%; align-self: center; diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/EnSavoirPlusApprentissageJeunes/EnSavoirPlusApprentissageJeunes.tsx b/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/EnSavoirPlusApprentissageJeunes/EnSavoirPlusApprentissageJeunes.tsx index 431af07ae2..3b257f6718 100644 --- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/EnSavoirPlusApprentissageJeunes/EnSavoirPlusApprentissageJeunes.tsx +++ b/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/EnSavoirPlusApprentissageJeunes/EnSavoirPlusApprentissageJeunes.tsx @@ -1,7 +1,7 @@ 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'; @@ -9,16 +9,18 @@ export default function EnSavoirPlusApprentissageJeunes() { return

L’apprentissage vous intéresse ? On répond à toutes vos questions

- + Consulter la FAQ - + +

Employeurs : tout ce qu’il y a à savoir sur l’apprentissage pour votre entreprise

- + Découvrir l’apprentissage - + +
; } diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/PreparationApprentissage/PreparationApprentissage.module.scss b/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/PreparationApprentissage/PreparationApprentissage.module.scss index 1b955aa539..07a8fef174 100644 --- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/PreparationApprentissage/PreparationApprentissage.module.scss +++ b/src/client/components/features/CampagneApprentissage/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/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/PreparationApprentissage/PreparationApprentissage.tsx b/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/PreparationApprentissage/PreparationApprentissage.tsx index c7ce30c9a4..8581d218d5 100644 --- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/PreparationApprentissage/PreparationApprentissage.tsx +++ b/src/client/components/features/CampagneApprentissage/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 ?
- + Trouver votre formation en apprentissage - - + + + Trouver votre entreprise - + +

La prépa-apprentissage c’est quoi ?

- Lire l‘article - + +
); diff --git a/src/client/components/features/CampagneApprentissage/VideosCampagneApprentissage/VideosCampagneApprentissage.module.scss b/src/client/components/features/CampagneApprentissage/VideosCampagneApprentissage/VideosCampagneApprentissage.module.scss index 4ff87e7040..f495d73fbb 100644 --- a/src/client/components/features/CampagneApprentissage/VideosCampagneApprentissage/VideosCampagneApprentissage.module.scss +++ b/src/client/components/features/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; } diff --git a/src/client/components/features/CampagneApprentissage/VideosCampagneApprentissage/VideosCampagneApprentissage.tsx b/src/client/components/features/CampagneApprentissage/VideosCampagneApprentissage/VideosCampagneApprentissage.tsx index a9e0868165..d3a2998647 100644 --- a/src/client/components/features/CampagneApprentissage/VideosCampagneApprentissage/VideosCampagneApprentissage.tsx +++ b/src/client/components/features/CampagneApprentissage/VideosCampagneApprentissage/VideosCampagneApprentissage.tsx @@ -5,7 +5,7 @@ import { VideoFrame } from '~/client/components/features/CampagneApprentissage/V import { Container } from '~/client/components/layouts/Container/Container'; 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 { VideoCampagneApprentissage } from '~/server/campagne-apprentissage/domain/videoCampagneApprentissage'; import styles from './VideosCampagneApprentissage.module.scss'; @@ -68,14 +68,13 @@ export default function VideosCampagneApprentissage({ }
- } + Découvrir tous les témoignages - + +
diff --git a/src/client/components/features/ConsulterOffre.module.scss b/src/client/components/features/ConsulterOffre.module.scss index af618ad8cf..c31cae5b32 100644 --- a/src/client/components/features/ConsulterOffre.module.scss +++ b/src/client/components/features/ConsulterOffre.module.scss @@ -25,9 +25,7 @@ } .postuler { - margin-top: 3rem; - justify-content: center; - align-self: center; + margin: 3rem auto 0 auto; } .contenu { diff --git a/src/client/components/features/ContratEngagementJeune/Accompagnement/Accompagnement.module.scss b/src/client/components/features/ContratEngagementJeune/Accompagnement/Accompagnement.module.scss index ff3f19b1b2..238d89a6cf 100644 --- a/src/client/components/features/ContratEngagementJeune/Accompagnement/Accompagnement.module.scss +++ b/src/client/components/features/ContratEngagementJeune/Accompagnement/Accompagnement.module.scss @@ -1,4 +1,5 @@ @use "@styles/utilities-deprecated"; +@use "@styles/utilities"; .accompagnement { @extend %background-primary; @@ -64,20 +65,28 @@ margin: 15rem 1rem 8rem 1rem; border-radius: 20px; } + &Content { text-align: center; color: utilities-deprecated.$color-primary; padding: 3rem 2rem 2rem 2rem; + h1 { @extend %text-large; @extend %bold; margin: 1rem 2rem; } + p { @extend %text-small, %background-surface; margin: 2rem; font-weight: 400; } + + a { + margin-left: auto; + margin-right: auto; + } } } @@ -89,7 +98,7 @@ } &ModalSubTitle { - display:block; + display: block; font-size: 1rem; margin-top: 1rem; color: utilities-deprecated.$color-primary; @@ -108,6 +117,7 @@ &__Content { display: flex; + > div { margin: auto; } @@ -125,10 +135,7 @@ display: grid; place-items: center; margin-top: 10px; - - p { - font-size: smaller; - } + @include utilities.text-small; &Offre { color: utilities-deprecated.$color-blue-navy; @@ -181,6 +188,7 @@ background-color: utilities-deprecated.$color-primary; color: utilities-deprecated.$color-on-primary; } + &Desactive { display: grid; gap: 1rem; @@ -248,12 +256,15 @@ margin: auto; border-radius: 20px; } + &__Title { margin: 2.5rem; } + &__Content { padding: 1rem; } + &Position { display: flex; flex-wrap: wrap; diff --git a/src/client/components/features/ContratEngagementJeune/Accompagnement/Modales/ModaleDispositifsReferences.tsx b/src/client/components/features/ContratEngagementJeune/Accompagnement/Modales/ModaleDispositifsReferences.tsx index 99bde18dc8..4e5d25bf14 100644 --- a/src/client/components/features/ContratEngagementJeune/Accompagnement/Modales/ModaleDispositifsReferences.tsx +++ b/src/client/components/features/ContratEngagementJeune/Accompagnement/Modales/ModaleDispositifsReferences.tsx @@ -1,6 +1,6 @@ import styles from '~/client/components/features/ContratEngagementJeune/Accompagnement/Accompagnement.module.scss'; import { Icon } from '~/client/components/ui/Icon/Icon'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; import { ModalComponent } from '~/client/components/ui/Modal/ModalComponent'; export function ModaleDispositifsReferences(props: { open: boolean, close: () => void }) { @@ -14,30 +14,30 @@ export function ModaleDispositifsReferences(props: { open: boolean, close: () => 1jeune1solution
  • - +

    Découvrez nos offres

    -     +
  • - +

    Formation et orientation

    -     +
  • -

    Aides et accompagnement

    -     +
  • - +

    Engagement

    -     +
diff --git a/src/client/components/features/ContratEngagementJeune/Accompagnement/Modales/ModaleInscriptionPoleEmploi.tsx b/src/client/components/features/ContratEngagementJeune/Accompagnement/Modales/ModaleInscriptionPoleEmploi.tsx index c8989ef478..7bb68c228b 100644 --- a/src/client/components/features/ContratEngagementJeune/Accompagnement/Modales/ModaleInscriptionPoleEmploi.tsx +++ b/src/client/components/features/ContratEngagementJeune/Accompagnement/Modales/ModaleInscriptionPoleEmploi.tsx @@ -1,5 +1,5 @@ import styles from '~/client/components/features/ContratEngagementJeune/Accompagnement/Accompagnement.module.scss'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import { ModalComponent } from '~/client/components/ui/Modal/ModalComponent'; export function ModaleInscriptionPoleEmploi(props: { open: boolean, close: () => void, href: string }) { @@ -11,9 +11,10 @@ export function ModaleInscriptionPoleEmploi(props: { open: boolean, close: () =>

Vous pouvez bénéficier des services de Pôle emploi

Inscrivez-vous à Pôle emploi pour bénéficier d‘un accompagnement répondant à vos besoins

- + S‘inscrire à Pôle emploi - + +
; diff --git a/src/client/components/features/ContratEngagementJeune/Accompagnement/Modales/ModalePoleEmploi.tsx b/src/client/components/features/ContratEngagementJeune/Accompagnement/Modales/ModalePoleEmploi.tsx index 5f551b4e5f..3eb2999f34 100644 --- a/src/client/components/features/ContratEngagementJeune/Accompagnement/Modales/ModalePoleEmploi.tsx +++ b/src/client/components/features/ContratEngagementJeune/Accompagnement/Modales/ModalePoleEmploi.tsx @@ -1,5 +1,5 @@ import styles from '~/client/components/features/ContratEngagementJeune/Accompagnement/Accompagnement.module.scss'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import { ModalComponent } from '~/client/components/ui/Modal/ModalComponent'; export function ModalePoleEmploi(props: { open: boolean, close: () => void, href: string }) { @@ -11,9 +11,10 @@ export function ModalePoleEmploi(props: { open: boolean, close: () => void, href

Vous pouvez bénéficier d’informations sur le Contrat d’Engagement Jeune auprès de votre conseiller Pôle emploi

- + Contacter mon conseiller - + +
; diff --git a/src/client/components/features/ContratEngagementJeune/Application/Application.tsx b/src/client/components/features/ContratEngagementJeune/Application/Application.tsx index c2b8abcac7..bd678adb6a 100644 --- a/src/client/components/features/ContratEngagementJeune/Application/Application.tsx +++ b/src/client/components/features/ContratEngagementJeune/Application/Application.tsx @@ -5,7 +5,7 @@ import logoGoogle from 'public/images/logos/google-play.svg'; import React from 'react'; import styles from '~/client/components/features/ContratEngagementJeune/Application/Application.module.scss'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; export default function Application() { return ( @@ -20,7 +20,7 @@ export default function Application() {
- @@ -31,8 +31,8 @@ export default function Application() { Télécharger sur
Google Play
- - + @@ -43,7 +43,7 @@ export default function Application() { Télécharger sur
APP Store - + diff --git a/src/client/components/features/ContratEngagementJeune/Banniere/Banniere.tsx b/src/client/components/features/ContratEngagementJeune/Banniere/Banniere.tsx index 6ef2c510cb..a27777dab4 100644 --- a/src/client/components/features/ContratEngagementJeune/Banniere/Banniere.tsx +++ b/src/client/components/features/ContratEngagementJeune/Banniere/Banniere.tsx @@ -2,8 +2,7 @@ import Image from 'next/image'; import banniereImage from 'public/images/cej.webp'; import React from 'react'; -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 useBreakpoint from '~/client/hooks/useBreakpoint'; import styles from './Banniere.module.scss'; @@ -19,15 +18,14 @@ export default function Banniere() {

{titre}

{accroche}

- } - iconPosition={'right'} > - {'Découvrir le CEJ'} - + Découvrir le CEJ + +
{isLargeScreen && ( diff --git a/src/client/components/features/EmploisEurope/ConsulterOffre/ConsulterOffreEmploiEurope.tsx b/src/client/components/features/EmploisEurope/ConsulterOffre/ConsulterOffreEmploiEurope.tsx index 79ae83ad59..543892a811 100644 --- a/src/client/components/features/EmploisEurope/ConsulterOffre/ConsulterOffreEmploiEurope.tsx +++ b/src/client/components/features/EmploisEurope/ConsulterOffre/ConsulterOffreEmploiEurope.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { getTagsFromAnnonce } from '~/client/components/features/EmploisEurope/tags.utils'; import { ConsulterOffreLayout } from '~/client/components/layouts/ConsulterOffre/ConsulterOffreLayout'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import { TagList } from '~/client/components/ui/Tag/TagList'; import useSanitize from '~/client/hooks/useSanitize'; import { @@ -91,9 +91,10 @@ export function DetailEmploiEurope({ annonceEmploiEurope }: ConsulterOffreEmploi aria-label="Caractéristiques de l‘offre d‘emploi"/> {annonceEmploiEurope.urlCandidature && - + Je postule sur Eures - } + + }
{annonceEmploiEurope.description &&
diff --git a/src/client/components/features/Engagement/Consulter/ConsulterMissionEngagement.tsx b/src/client/components/features/Engagement/Consulter/ConsulterMissionEngagement.tsx index 068ee28297..58b316a16f 100644 --- a/src/client/components/features/Engagement/Consulter/ConsulterMissionEngagement.tsx +++ b/src/client/components/features/Engagement/Consulter/ConsulterMissionEngagement.tsx @@ -2,7 +2,7 @@ import React from 'react'; import commonStyles from '~/client/components/features/ConsulterOffre.module.scss'; import { ConsulterOffreLayout } from '~/client/components/layouts/ConsulterOffre/ConsulterOffreLayout'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import { TagList } from '~/client/components/ui/Tag/TagList'; import useSanitize from '~/client/hooks/useSanitize'; import { formatCarriageReturnToHtml } from '~/client/utils/formatCarriageReturnToHtml'; @@ -36,12 +36,13 @@ export function ConsulterMissionEngagement({
{missionEngagement.url && ( - S’engager - + + )}
diff --git a/src/client/components/features/Entreprendre/OutilADisposition/EntreprendreOutilADisposition.module.scss b/src/client/components/features/Entreprendre/OutilADisposition/EntreprendreOutilADisposition.module.scss index 4822ef9ad3..7a8d252e8f 100644 --- a/src/client/components/features/Entreprendre/OutilADisposition/EntreprendreOutilADisposition.module.scss +++ b/src/client/components/features/Entreprendre/OutilADisposition/EntreprendreOutilADisposition.module.scss @@ -4,6 +4,7 @@ p { min-height: 5rem; } + display: flex; flex-direction: column; gap: 1.5rem; @@ -11,4 +12,9 @@ text-align: center; border: 1px utilities-deprecated.$color-primary solid; border-radius: 20px; + + a { + width: 100%; + justify-content: center; + } } diff --git a/src/client/components/features/Entreprendre/OutilADisposition/EntreprendreOutilADisposition.tsx b/src/client/components/features/Entreprendre/OutilADisposition/EntreprendreOutilADisposition.tsx index 4c17fb43be..78b7fe84bc 100644 --- a/src/client/components/features/Entreprendre/OutilADisposition/EntreprendreOutilADisposition.tsx +++ b/src/client/components/features/Entreprendre/OutilADisposition/EntreprendreOutilADisposition.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import styles from '~/client/components/features/Entreprendre/OutilADisposition/EntreprendreOutilADisposition.module.scss'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import styles + from '~/client/components/features/Entreprendre/OutilADisposition/EntreprendreOutilADisposition.module.scss'; +import { Link } from '~/client/components/ui/Link/Link'; interface EntreprendreOutilADispositionProps { link: string @@ -13,9 +14,10 @@ export function EntreprendreOutilADisposition({ link, linkLabel, description }: return (

{description}

- + {linkLabel} - + +
); } diff --git "a/src/client/components/features/Entreprendre/R\303\251seau/EntreprendreReseau.tsx" "b/src/client/components/features/Entreprendre/R\303\251seau/EntreprendreReseau.tsx" index 39a5179678..fb74595527 100644 --- "a/src/client/components/features/Entreprendre/R\303\251seau/EntreprendreReseau.tsx" +++ "b/src/client/components/features/Entreprendre/R\303\251seau/EntreprendreReseau.tsx" @@ -5,7 +5,7 @@ import React from 'react'; import styles from '~/client/components/features/Entreprendre/Réseau/EntreprendreReseau.module.scss'; import { EntreprendreRéseauPhasesProjet } from '~/client/components/features/Entreprendre/Réseau/PhasesProjet/EntreprendreRéseauPhasesProjet'; import { Icon } from '~/client/components/ui/Icon/Icon'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; import useBreakpoint from '~/client/hooks/useBreakpoint'; interface Entreprise { @@ -33,7 +33,7 @@ function EntreprendreReseau(props: EntreprendreRéseauProps) { const { isSmallScreen } = useBreakpoint(); return ( - + { isSmallScreen && <>
@@ -67,7 +67,7 @@ function EntreprendreReseau(props: EntreprendreRéseauProps) {
} - + ); } diff --git a/src/client/components/features/Europe/EmploiEnEuropeContent.module.scss b/src/client/components/features/Europe/EmploiEnEuropeContent.module.scss index 4ecf3349d4..b58dcbfafd 100644 --- a/src/client/components/features/Europe/EmploiEnEuropeContent.module.scss +++ b/src/client/components/features/Europe/EmploiEnEuropeContent.module.scss @@ -49,7 +49,8 @@ } > a { - display: flex; + width: 100%; + justify-content: center; @include utilities.media(large) { width: fit-content; } diff --git a/src/client/components/features/Europe/Sections/Dispositifs.tsx b/src/client/components/features/Europe/Sections/Dispositifs.tsx index bb272e7afd..db2705402e 100644 --- a/src/client/components/features/Europe/Sections/Dispositifs.tsx +++ b/src/client/components/features/Europe/Sections/Dispositifs.tsx @@ -1,4 +1,4 @@ -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import styles from '../EmploiEnEuropeContent.module.scss'; @@ -22,7 +22,8 @@ function EuresCardContent() {
Comment cela fonctionne ?
Il vous aide à trouver un emploi, une formation ou un apprentissage dans un autre État membre de l’Union - européenne.
+ européenne. +
Pour qui ?
Tout demandeur d’emploi de plus de 18 ans ; indépendamment de ses qualifications.
Pour quelle durée ?
@@ -31,16 +32,17 @@ function EuresCardContent() {
Quelles aides ?
Aide dans la recherche d’emploi.
Soutien financier pour passer un entretien à l’étranger, pour la prise en charge de frais tels que des cours - de langue, la reconnaissance de leurs qualifications ou leur déménagement. + de langue, la reconnaissance de leurs qualifications ou leur déménagement.
- - En savoir plus - + En savoir plus + + ); } @@ -52,7 +54,9 @@ function ErasmusCardContent() {

Entre 200 et 600 euros par mois selon le pays où vous effectuez votre mobilité d’études.

Comment cela fonctionne ?
-
Il vous donne la possibilité de séjourner à l’étranger pour renforcer vos compétences et accroître votre employabilité.
+
Il vous donne la possibilité de séjourner à l’étranger pour renforcer vos compétences et accroître votre + employabilité. +
Pour qui ?
Tout public
Pour quelle durée ?
@@ -61,21 +65,25 @@ function ErasmusCardContent() {
Formation professionnelle : de 1 à 360 jours.
Quelles aides ?
- Aides financières cumulables avec les bourses d’études, l’aide à la mobilité internationale (AMI) et les aides régionales/départementales et qui varient selon le type de mobilité et la destination : + Aides financières cumulables avec les bourses d’études, l’aide à la mobilité internationale (AMI) et les aides + régionales/départementales et qui varient selon le type de mobilité et la destination :
  • Étudiants : entre 200 et 600 €/mois.
  • Stage : entre 300 et 450 €/mois.
    • -
  • Formation professionnelle : 32 à 43 €/jour selon le pays de mobilité pendant 2 semaines puis 22 à 30 €/jour selon le pays de mobilité pour le reste de la mobilité.
    • +
  • Formation professionnelle : 32 à 43 €/jour selon le pays de mobilité pendant 2 semaines puis 22 à 30 + €/jour selon le pays de mobilité pour le reste de la mobilité. +
- En savoir plus - + + ); } @@ -85,9 +93,10 @@ function AidesFinancieresCardContent() { <>

Vous cherchez une aide financière pour vivre une expérience en Europe ?

Découvrez le simulateur d’aides financières sur 1jeune1solution

- + Faire une simulation d’aides - + + ); } diff --git a/src/client/components/features/Europe/Sections/ExperiencesEnEurope.tsx b/src/client/components/features/Europe/Sections/ExperiencesEnEurope.tsx index aea5472085..70dddf72f4 100644 --- a/src/client/components/features/Europe/Sections/ExperiencesEnEurope.tsx +++ b/src/client/components/features/Europe/Sections/ExperiencesEnEurope.tsx @@ -1,6 +1,6 @@ import { LightHero, LightHeroPrimaryText, LightHeroSecondaryText } from '~/client/components/ui/Hero/LightHero'; 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 styles from '../EmploiEnEuropeContent.module.scss'; @@ -23,9 +23,10 @@ export function ExperiencesEnEurope() { Si vous êtes accompagné·e en mission locale, rapprochez-vous de votre conseiller pour en savoir plus sur les mobilités courtes

- + Trouver une offre d’emploi en Europe - + + ); } diff --git a/src/client/components/features/Europe/Sections/LiensUtiles.tsx b/src/client/components/features/Europe/Sections/LiensUtiles.tsx index 3348d1f5f2..783e255cd1 100644 --- a/src/client/components/features/Europe/Sections/LiensUtiles.tsx +++ b/src/client/components/features/Europe/Sections/LiensUtiles.tsx @@ -1,4 +1,4 @@ -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import styles from '../EmploiEnEuropeContent.module.scss'; @@ -8,19 +8,24 @@ export function LiensUtiles() {

Découvrez d’autres services destinés à vous aider à trouver l’expérience en Europe faite pour vous :

  • - + Vous souhaitez faire une partie de votre apprentissage en Europe - + +
  • - - Vous cherchez un Volontariat International (V.I.E / V.I.A) - + + Vous cherchez un Volontariat International (V.I.E / V.I.A) + +
  • - + Vous souhaitez vous engager dans une mission de solidarité en Europe - + +
diff --git "a/src/client/components/features/Evenement/R\303\251sultatRechercherEvenement.tsx" "b/src/client/components/features/Evenement/R\303\251sultatRechercherEvenement.tsx" index d29a153c8a..7d94588ec6 100644 --- "a/src/client/components/features/Evenement/R\303\251sultatRechercherEvenement.tsx" +++ "b/src/client/components/features/Evenement/R\303\251sultatRechercherEvenement.tsx" @@ -5,7 +5,7 @@ import styles from '~/client/components/features/Evenement/RésultatRechercherEv import { HitProps } from '~/client/components/layouts/InstantSearch/InstantSearchLayout'; import { Card } from '~/client/components/ui/Card/Card'; import { Icon } from '~/client/components/ui/Icon/Icon'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; import { TagList } from '~/client/components/ui/Tag/TagList'; import { formatEventDateTime } from '~/client/utils/formatEventDateTime.util'; @@ -13,7 +13,7 @@ export function RésultatRechercherEvenement(props: HitProps) { const { titreEvenement, organismeOrganisateur, dateDebut, dateFin, lieuEvenement, slug } = props.hit; return ( - +
@@ -32,6 +32,6 @@ export function RésultatRechercherEvenement(props: HitProps) { />
- + ); } diff --git a/src/client/components/features/Formation/Consulter/ConsulterFormation.tsx b/src/client/components/features/Formation/Consulter/ConsulterFormation.tsx index 9631b3f4b9..d53254386c 100644 --- a/src/client/components/features/Formation/Consulter/ConsulterFormation.tsx +++ b/src/client/components/features/Formation/Consulter/ConsulterFormation.tsx @@ -3,7 +3,7 @@ import { StatistiquesFormation, } from '~/client/components/features/Formation/Consulter/Statistiques/StatistiquesFormation'; import { ConsulterOffreLayout } from '~/client/components/layouts/ConsulterOffre/ConsulterOffreLayout'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import { TagList } from '~/client/components/ui/Tag/TagList'; import { Formation } from '~/server/formations/domain/formation'; import { Statistique } from '~/server/formations/domain/statistique'; @@ -16,19 +16,21 @@ export function ConsulterFormation({ formation, statistiques }: { formation: For
{formation.titre &&

{formation.titre}

} {formation.nomEntreprise &&

{formation.nomEntreprise}

} - + {formation.lienDemandeRendezVous && - - Contacter l’établissement - + + Contacter l’établissement + + }
{formation.description && - <> -

Description de la formation :

-

{formation.description}

- + <> +

Description de la formation :

+

{formation.description}

+ } {formation.objectif && <> diff --git a/src/client/components/features/FormationInitiale/ConsulterDetail/ConsulterDetailFormationInitiale.tsx b/src/client/components/features/FormationInitiale/ConsulterDetail/ConsulterDetailFormationInitiale.tsx index e5a06309e6..905c3aacee 100644 --- a/src/client/components/features/FormationInitiale/ConsulterDetail/ConsulterDetailFormationInitiale.tsx +++ b/src/client/components/features/FormationInitiale/ConsulterDetail/ConsulterDetailFormationInitiale.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { ConsulterOffreLayout } from '~/client/components/layouts/ConsulterOffre/ConsulterOffreLayout'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import { TagList } from '~/client/components/ui/Tag/TagList'; import useSanitize from '~/client/hooks/useSanitize'; import { @@ -33,9 +33,10 @@ export function ConsulterDetailFormationInitiale({ formationInitialeDetail }: { - + Consulter les établissements - + + {isFormationInitialeWithCMSDetails &&
diff --git "a/src/client/components/features/Immersions/ReferencesEntreprises/R\303\251f\303\251rencerEntreprises.tsx" "b/src/client/components/features/Immersions/ReferencesEntreprises/R\303\251f\303\251rencerEntreprises.tsx" index 2371e2ec44..a552c634fb 100644 --- "a/src/client/components/features/Immersions/ReferencesEntreprises/R\303\251f\303\251rencerEntreprises.tsx" +++ "b/src/client/components/features/Immersions/ReferencesEntreprises/R\303\251f\303\251rencerEntreprises.tsx" @@ -2,9 +2,9 @@ import React from 'react'; import styles from '~/client/components/features/Immersions/ReferencesEntreprises/RéférencerEntreprises.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 RéférencerEntreprises () { +export function RéférencerEntreprises() { return (
@@ -13,12 +13,17 @@ export function RéférencerEntreprises () {
  • De découvrir un métier
  • De les aider à confirmer un projet professionnel en situation réelle de travail
    • -
  • D’initier un parcours d’embauche pour leur permettre d’accéder à un emploi ou dans le cadre d’une reconversion
    • +
  • D’initier un parcours d’embauche pour leur permettre d’accéder à un emploi ou dans le cadre d’une + reconversion +
- Référencer mon entreprise + appearance="asPrimaryButton"> + Référencer mon entreprise + +
diff --git a/src/client/components/features/JeDeviensMentor/PourQui/PourQui.module.scss b/src/client/components/features/JeDeviensMentor/PourQui/PourQui.module.scss index 0232ab2da6..71df28ac7a 100644 --- a/src/client/components/features/JeDeviensMentor/PourQui/PourQui.module.scss +++ b/src/client/components/features/JeDeviensMentor/PourQui/PourQui.module.scss @@ -33,6 +33,11 @@ display: flex; flex-direction: column; gap: 1rem; + + & a { + width: 100%; + justify-content: center; + } } .title { diff --git a/src/client/components/features/JeDeviensMentor/PourQui/PourQui.tsx b/src/client/components/features/JeDeviensMentor/PourQui/PourQui.tsx index eac82a00d2..9f50d10e6d 100644 --- a/src/client/components/features/JeDeviensMentor/PourQui/PourQui.tsx +++ b/src/client/components/features/JeDeviensMentor/PourQui/PourQui.tsx @@ -3,7 +3,7 @@ import React from 'react'; import styles from '~/client/components/features/JeDeviensMentor/PourQui/PourQui.module.scss'; import { Container } from '~/client/components/layouts/Container/Container'; import { LightHero, LightHeroPrimaryText, LightHeroSecondaryText } from '~/client/components/ui/Hero/LightHero'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; export function PourQui() { return ( @@ -36,8 +36,8 @@ export function PourQui() {
- Devenir mentor - Engager mon entreprise + Devenir mentor + Engager mon entreprise
); diff --git a/src/client/components/features/JeDonneMonAvis/JeDonneMonAvis.tsx b/src/client/components/features/JeDonneMonAvis/JeDonneMonAvis.tsx index 7fdb74a9bf..99463c0f21 100644 --- a/src/client/components/features/JeDonneMonAvis/JeDonneMonAvis.tsx +++ b/src/client/components/features/JeDonneMonAvis/JeDonneMonAvis.tsx @@ -2,13 +2,13 @@ import Image from 'next/image'; import styles from '~/client/components/features/JeDonneMonAvis/JeDonneMonAvis.module.scss'; import { Container } from '~/client/components/layouts/Container/Container'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; export default function JeDonneMonAvis() { return

Aidez-nous à améliorer la recherche de stage ! Donnez-nous votre avis sur cette démarche, cela ne prend que 2 minutes

- + Je donne mon avis - + ; } diff --git a/src/client/components/features/JeRecrute/DecouvrirDispositifs/DecouvrirDispositifs.module.scss b/src/client/components/features/JeRecrute/DecouvrirDispositifs/DecouvrirDispositifs.module.scss index af76e56062..88cd4e4e95 100644 --- a/src/client/components/features/JeRecrute/DecouvrirDispositifs/DecouvrirDispositifs.module.scss +++ b/src/client/components/features/JeRecrute/DecouvrirDispositifs/DecouvrirDispositifs.module.scss @@ -34,7 +34,8 @@ &Lien { - display: flex; + width: 100%; + justify-content: center; min-width: 34ch; } } diff --git a/src/client/components/features/JeRecrute/DecouvrirDispositifs/DecouvrirDispositifs.tsx b/src/client/components/features/JeRecrute/DecouvrirDispositifs/DecouvrirDispositifs.tsx index e1c369c9bb..6143e68cd5 100644 --- a/src/client/components/features/JeRecrute/DecouvrirDispositifs/DecouvrirDispositifs.tsx +++ b/src/client/components/features/JeRecrute/DecouvrirDispositifs/DecouvrirDispositifs.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styles from '~/client/components/features/JeRecrute/DecouvrirDispositifs/DecouvrirDispositifs.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 DécouvrirDispositifs () { const bulletList = '%E2%80%A2'; @@ -23,13 +23,13 @@ export function DécouvrirDispositifs () {

Dans le cadre du plan 1 jeune, 1 solution, nous vous accompagnons dans la recherche de vos futurs collaborateurs.

  • - Déposer une offre d‘emploi + Déposer une offre d‘emploi
  • - Déposer une offre d’alternance + Déposer une offre d’alternance
  • - Déposer une offre de stage + Déposer une offre de stage
diff --git a/src/client/components/features/JeRecrute/DecouvrirMesuresEmployeursEtApprentissage/DecouvrirMesuresEmployeursEtApprentissage.module.scss b/src/client/components/features/JeRecrute/DecouvrirMesuresEmployeursEtApprentissage/DecouvrirMesuresEmployeursEtApprentissage.module.scss index b1eacb36d7..b22366a870 100644 --- a/src/client/components/features/JeRecrute/DecouvrirMesuresEmployeursEtApprentissage/DecouvrirMesuresEmployeursEtApprentissage.module.scss +++ b/src/client/components/features/JeRecrute/DecouvrirMesuresEmployeursEtApprentissage/DecouvrirMesuresEmployeursEtApprentissage.module.scss @@ -41,6 +41,7 @@ > a { margin-top: auto; width: 100%; + justify-content: center; @include utilities-deprecated.media(medium) { width: auto; } diff --git a/src/client/components/features/JeRecrute/DecouvrirMesuresEmployeursEtApprentissage/DecouvrirMesuresEmployeursEtApprentissage.tsx b/src/client/components/features/JeRecrute/DecouvrirMesuresEmployeursEtApprentissage/DecouvrirMesuresEmployeursEtApprentissage.tsx index 3d88b4a702..b6a5523dba 100644 --- a/src/client/components/features/JeRecrute/DecouvrirMesuresEmployeursEtApprentissage/DecouvrirMesuresEmployeursEtApprentissage.tsx +++ b/src/client/components/features/JeRecrute/DecouvrirMesuresEmployeursEtApprentissage/DecouvrirMesuresEmployeursEtApprentissage.tsx @@ -1,9 +1,10 @@ import React from 'react'; -import styles from '~/client/components/features/JeRecrute/DecouvrirMesuresEmployeursEtApprentissage/DecouvrirMesuresEmployeursEtApprentissage.module.scss'; +import styles + from '~/client/components/features/JeRecrute/DecouvrirMesuresEmployeursEtApprentissage/DecouvrirMesuresEmployeursEtApprentissage.module.scss'; import { Container } from '~/client/components/layouts/Container/Container'; import { Icon } from '~/client/components/ui/Icon/Icon'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; export default function DecouvrirMesuresEmployeursEtApprentissage() { return ( @@ -15,7 +16,7 @@ export default function DecouvrirMesuresEmployeursEtApprentissage() {

Découvrez les mesures du plan 1jeune1solution pour vous aider à recruter plus facilement

- Découvrir les mesures employeurs + Découvrir les mesures employeurs
@@ -25,7 +26,7 @@ export default function DecouvrirMesuresEmployeursEtApprentissage() { le bon choix pour votre entreprise

Les avantages, les coûts, des témoignages de jeunes ayant fait l’expérience de l’apprentissage, des conseils pratiques...

- Découvrir l’apprentissage + Découvrir l’apprentissage
diff --git a/src/client/components/features/JeRecruteAfprPoei/RecrutementCandidatPoleEmploi/RecrutementCandidatPoleEmploi.module.scss b/src/client/components/features/JeRecruteAfprPoei/RecrutementCandidatPoleEmploi/RecrutementCandidatPoleEmploi.module.scss index b5aeeb3337..dc2446e738 100644 --- a/src/client/components/features/JeRecruteAfprPoei/RecrutementCandidatPoleEmploi/RecrutementCandidatPoleEmploi.module.scss +++ b/src/client/components/features/JeRecruteAfprPoei/RecrutementCandidatPoleEmploi/RecrutementCandidatPoleEmploi.module.scss @@ -18,11 +18,16 @@ $color-title: utilities.$color-title-primary; text-align: left; } - & .links{ + & .links { display: grid; grid-template-columns: max-content; margin: auto; row-gap: 0.5rem; + + & a { + width: 100%; + justify-content: center; + } } } diff --git a/src/client/components/features/JeRecruteAfprPoei/RecrutementCandidatPoleEmploi/RecrutementCandidatPoleEmploi.tsx b/src/client/components/features/JeRecruteAfprPoei/RecrutementCandidatPoleEmploi/RecrutementCandidatPoleEmploi.tsx index 8f5973c527..54242a1290 100644 --- a/src/client/components/features/JeRecruteAfprPoei/RecrutementCandidatPoleEmploi/RecrutementCandidatPoleEmploi.tsx +++ b/src/client/components/features/JeRecruteAfprPoei/RecrutementCandidatPoleEmploi/RecrutementCandidatPoleEmploi.tsx @@ -4,7 +4,7 @@ import styles from '~/client/components/features/JeRecruteAfprPoei/RecrutementCandidatPoleEmploi/RecrutementCandidatPoleEmploi.module.scss'; import { Container } from '~/client/components/layouts/Container/Container'; import { Footnote } from '~/client/components/ui/Footnote/Footnote'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; export default function RecrutementCandidatPoleEmploi() { return ( @@ -23,16 +23,18 @@ export default function RecrutementCandidatPoleEmploi() { Opérationnelle à l’Emploi ; AFPR : Action de Formation Préalable au Recrutement
- M‘engager à recruter - - + + Compléter une demande - + +
diff --git "a/src/client/components/features/LesEntreprisesSEngagent/D\303\251chargeRGPD/D\303\251chargeRGPD.tsx" "b/src/client/components/features/LesEntreprisesSEngagent/D\303\251chargeRGPD/D\303\251chargeRGPD.tsx" index ac08547a3c..ae61076f1c 100644 --- "a/src/client/components/features/LesEntreprisesSEngagent/D\303\251chargeRGPD/D\303\251chargeRGPD.tsx" +++ "b/src/client/components/features/LesEntreprisesSEngagent/D\303\251chargeRGPD/D\303\251chargeRGPD.tsx" @@ -1,14 +1,14 @@ import React from 'react'; import styles from '~/client/components/features/LesEntreprisesSEngagent/DéchargeRGPD/DéchargeRGPD.module.scss'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; export function DéchargeRGPD() { return (

Vous êtes informé que vos données à caractère personnel sont collectées et traitées par la DGEFP afin de les - transférer à Pôle Emploi. Pour en savoir plus vous pouvez consulter la politique de - confidentialité et les CGU de la DGEFP. + transférer à Pôle Emploi. Pour en savoir plus vous pouvez consulter la politique de + confidentialité et les CGU de la DGEFP.

); } diff --git a/src/client/components/features/LesEntreprisesSEngagent/MonEspace/MonEspaceEntreprise.module.scss b/src/client/components/features/LesEntreprisesSEngagent/MonEspace/MonEspaceEntreprise.module.scss index 37906bb10a..eddeca08fa 100644 --- a/src/client/components/features/LesEntreprisesSEngagent/MonEspace/MonEspaceEntreprise.module.scss +++ b/src/client/components/features/LesEntreprisesSEngagent/MonEspace/MonEspaceEntreprise.module.scss @@ -28,6 +28,8 @@ &Connexion { margin-bottom: 1.5rem; + width: 100%; + justify-content: center; } } diff --git a/src/client/components/features/LesEntreprisesSEngagent/MonEspace/MonEspaceEntreprise.tsx b/src/client/components/features/LesEntreprisesSEngagent/MonEspace/MonEspaceEntreprise.tsx index b2cabc6252..f7f4cb359a 100644 --- a/src/client/components/features/LesEntreprisesSEngagent/MonEspace/MonEspaceEntreprise.tsx +++ b/src/client/components/features/LesEntreprisesSEngagent/MonEspace/MonEspaceEntreprise.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { Container } from '~/client/components/layouts/Container/Container'; import { Link } from '~/client/components/ui/Link/Link'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; import styles from './MonEspaceEntreprise.module.scss'; @@ -22,12 +21,13 @@ export default function MonEspaceEntreprise() {
- Se connecter - + + @@ -25,11 +25,12 @@ export default function RejoignezMobilisation() { de services inédits : un accompagnement personnalisé si vous le souhaitez, des aides pour communiquer, etc.

- Rejoindre la - mobilisation - + Rejoindre la + mobilisation + Découvrir les entreprises engagées - + +
; diff --git a/src/client/components/features/Logement/Annonce.module.scss b/src/client/components/features/Logement/Annonce.module.scss index 7759944d5a..75d22a602f 100644 --- a/src/client/components/features/Logement/Annonce.module.scss +++ b/src/client/components/features/Logement/Annonce.module.scss @@ -38,6 +38,7 @@ max-width: 22.5rem; height: 180px; overflow: hidden; + img { object-fit: cover; object-position: center; @@ -79,9 +80,11 @@ font-size: 0.75rem; } } + dt { align-self: end; } + dt::after { content: "\00a0: "; } @@ -98,22 +101,14 @@ $lineHeight: 1.5; line-height: $lineHeight; white-space: unset; + span { @include utilities.line-clamp(1, $lineHeight); } } &CallToAction { - color: utilities.$color-primary; - > span { - white-space: nowrap; - } - - &:hover { - > span { - text-decoration: underline; - } - } + white-space: nowrap; } } } diff --git a/src/client/components/features/Logement/Annonce.tsx b/src/client/components/features/Logement/Annonce.tsx index 7662d67cbb..a73c9e7041 100644 --- a/src/client/components/features/Logement/Annonce.tsx +++ b/src/client/components/features/Logement/Annonce.tsx @@ -7,7 +7,7 @@ import { AnnonceDeLogementIndexee } from '~/client/components/features/Logement/ import { HitProps } from '~/client/components/layouts/InstantSearch/InstantSearchLayout'; import { Card } from '~/client/components/ui/Card/Card'; import { Carousel } from '~/client/components/ui/Carousel/Carousel'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; import { TextIcon } from '~/client/components/ui/TextIcon/TextIcon'; const TYPE_DE_LOGEMENT_INTERGENERATIONNEL = 'habitation intergénérationnelle'; @@ -45,14 +45,16 @@ export function AnnonceDeLogement(props: HitProps) { > {annonce.localisationAAfficher} - - Lire l‘annonce - + Lire l‘annonce + + ); diff --git a/src/client/components/features/Logement/Consulter/ConsulterAnnonce.module.scss b/src/client/components/features/Logement/Consulter/ConsulterAnnonce.module.scss index e31f3d8e19..9143bdba01 100644 --- a/src/client/components/features/Logement/Consulter/ConsulterAnnonce.module.scss +++ b/src/client/components/features/Logement/Consulter/ConsulterAnnonce.module.scss @@ -54,9 +54,11 @@ padding: 0.5rem; a { + justify-content: center; width: 100%; } } + .entête { width: 100%; padding: 1rem; @@ -73,6 +75,7 @@ "type date" "titre titre"; } + & .type { grid-area: type; font-size: .875rem; @@ -109,76 +112,84 @@ } } - .card { - padding: 1rem; +.card { + padding: 1rem; - & h2 { - margin-bottom: 1.25rem; - &:not(:first-child) { - margin-top: 2.5rem; - } - color: utilities-deprecated.$color-primary; - font-size: 1.25rem; - line-height: 2rem; - @include utilities-deprecated.media(medium) { - font-size: 1.5rem; - } - } + & h2 { + margin-bottom: 1.25rem; - & button.readMore { - width: 100%; - margin-top: 1.25rem; + &:not(:first-child) { + margin-top: 2.5rem; } - &:nth-child(2n + 1) { - border-width: 1px 0; - border-style: solid; - border-color: utilities-deprecated.$color-primary; - background-color: utilities-deprecated.$color-background-white-lilac; - @include utilities-deprecated.media(medium) { - border: 1px solid utilities-deprecated.$neutral-grey; - border-radius: 1.25rem; - background-color: utilities-deprecated.$color-background; - } + color: utilities-deprecated.$color-primary; + font-size: 1.25rem; + line-height: 2rem; + @include utilities-deprecated.media(medium) { + font-size: 1.5rem; } + } + + & button.readMore { + width: 100%; + margin-top: 1.25rem; + } + &:nth-child(2n + 1) { + border-width: 1px 0; + border-style: solid; + border-color: utilities-deprecated.$color-primary; + background-color: utilities-deprecated.$color-background-white-lilac; @include utilities-deprecated.media(medium) { border: 1px solid utilities-deprecated.$neutral-grey; border-radius: 1.25rem; - padding: 2.5rem; - margin: 2.5rem; - & h2 { - margin-bottom: 2.5rem; - } - & button.readMore { - width: fit-content; - } + background-color: utilities-deprecated.$color-background; } - &Candidater { - position: sticky; - top: 2rem; - grid-area: candidater; - height: fit-content; - border: 1px solid utilities-deprecated.$neutral-grey; - border-radius: 1.25rem; - padding: 2.5rem; - margin: 2.5rem; - display: flex; - flex-direction: column; - row-gap: 0.5rem; + } + + @include utilities-deprecated.media(medium) { + border: 1px solid utilities-deprecated.$neutral-grey; + border-radius: 1.25rem; + padding: 2.5rem; + margin: 2.5rem; + & h2 { + margin-bottom: 2.5rem; + } + & button.readMore { + width: fit-content; } } - .annonceBody { - grid-area: annonceBody; - @include utilities-deprecated.media(medium) { - display: grid; - grid-template-columns: 1fr auto; - grid-template-areas: + &Candidater { + position: sticky; + top: 2rem; + grid-area: candidater; + height: fit-content; + border: 1px solid utilities-deprecated.$neutral-grey; + border-radius: 1.25rem; + padding: 2.5rem; + margin: 2.5rem; + display: flex; + flex-direction: column; + row-gap: 0.5rem; + + a { + width: 100%; + justify-content: center; + } + } +} + +.annonceBody { + grid-area: annonceBody; + @include utilities-deprecated.media(medium) { + display: grid; + grid-template-columns: 1fr auto; + grid-template-areas: "informationsGenerales candidater" "descriptionDuLogement candidater"; - } } +} .descriptionDuLogement { grid-area: descriptionDuLogement; @@ -186,10 +197,12 @@ .informationsGenerales { grid-area: informationsGenerales; + & table.localisation tbody, & table.disponibilite tbody { column-count: 1; } + & table { display: grid; grid-template-columns: auto 1fr; @@ -240,10 +253,12 @@ .carouselWrapper { grid-area: carousel; + > img { display: flex; margin: auto; } + @include utilities-deprecated.media(medium) { background-color: utilities-deprecated.$white-lilac; border-bottom: 1px solid utilities-deprecated.$color-primary; @@ -275,6 +290,7 @@ width: 2.5rem; height: 2.5rem; border: 1px solid utilities-deprecated.$color-primary; + > svg { width: 2.5rem; height: 2.5rem; @@ -303,12 +319,14 @@ } } } + ul { column-count: 2; gap: 1.25rem; @include utilities-deprecated.media(medium) { gap: 1.875rem; } + &:empty { display: none; } diff --git a/src/client/components/features/Logement/Consulter/ConsulterAnnonce.tsx b/src/client/components/features/Logement/Consulter/ConsulterAnnonce.tsx index 89e95fd461..9a268443b1 100644 --- a/src/client/components/features/Logement/Consulter/ConsulterAnnonce.tsx +++ b/src/client/components/features/Logement/Consulter/ConsulterAnnonce.tsx @@ -1,8 +1,6 @@ import classNames from 'classnames'; import Image from 'next/image'; -import React, { - useMemo, -} from 'react'; +import React, { useMemo } from 'react'; import { BackButton } from '~/client/components/features/ButtonRetour/BackButton'; import { BilanEnergetiqueLogement } from '~/client/components/features/Logement/Consulter/BilanEnergetiqueLogement'; @@ -12,7 +10,7 @@ import { Services } from '~/client/components/features/Logement/Consulter/Servic import { Container } from '~/client/components/layouts/Container/Container'; import { Image as ImageProps } from '~/client/components/props'; import { Carousel } from '~/client/components/ui/Carousel/Carousel'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import useBreakpoint from '~/client/hooks/useBreakpoint'; import { AnnonceDeLogement } from '~/server/logements/domain/annonceDeLogement'; @@ -75,12 +73,13 @@ export function ConsulterAnnonce({ annonceDeLogement }: ConsulterAnnonceDeLogeme {isSmallScreen && (
- Voir l‘annonce - + +
)} @@ -130,12 +129,13 @@ function CandidaterDesktop({ return (
- Voir l‘annonce - + +
); } diff --git a/src/client/components/features/MaintenancePoleEmploi/MaintenancePoleEmploi.tsx b/src/client/components/features/MaintenancePoleEmploi/MaintenancePoleEmploi.tsx index 2df4f855c3..4bf2605965 100644 --- a/src/client/components/features/MaintenancePoleEmploi/MaintenancePoleEmploi.tsx +++ b/src/client/components/features/MaintenancePoleEmploi/MaintenancePoleEmploi.tsx @@ -1,20 +1,21 @@ import Image from 'next/image'; -import React from 'react'; +import React from 'react'; import styles from '~/client/components/features/MaintenancePoleEmploi/MaintenancePoleEmploi.module.scss'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import useBreakpoint from '~/client/hooks/useBreakpoint'; export default function MaintenancePoleEmploi() { const { isSmallScreen } = useBreakpoint(); return ( -
- { !isSmallScreen && } -
-

Le formulaire pour déposer une offre d’emploi est actuellement en maintenance. Merci de réessayer plus tard.

+
+ {!isSmallScreen && } +
+

Le formulaire pour déposer une offre d’emploi est actuellement en + maintenance. Merci de réessayer plus tard.

Pour patienter, découvrez l‘ensemble des dispositifs du plan jeune pour les employeurs.

- Je découvre les dispositifs + Je découvre les dispositifs
); diff --git a/src/client/components/features/OffreDeStage/Consulter/ConsulterOffreDeStage.tsx b/src/client/components/features/OffreDeStage/Consulter/ConsulterOffreDeStage.tsx index 8be23c1eff..8cb0ca756e 100644 --- a/src/client/components/features/OffreDeStage/Consulter/ConsulterOffreDeStage.tsx +++ b/src/client/components/features/OffreDeStage/Consulter/ConsulterOffreDeStage.tsx @@ -3,7 +3,7 @@ import React, { useCallback, useMemo } from 'react'; import commonStyles from '~/client/components/features/ConsulterOffre.module.scss'; import { dureeCategorisee } from '~/client/components/features/OffreDeStage/Consulter/getDureeCategorisee'; import { ConsulterOffreLayout } from '~/client/components/layouts/ConsulterOffre/ConsulterOffreLayout'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import { getHtmlFromMd } from '~/client/components/ui/MarkdownToHtml/getHtmlFromMd'; import { TagList } from '~/client/components/ui/Tag/TagList'; import useSanitize from '~/client/hooks/useSanitize'; @@ -55,11 +55,12 @@ export function ConsulterOffreDeStage({ offreDeStage }: ConsulterOffreDeStagePro
{offreDeStage.urlDeCandidature && - Postuler - + + }
diff --git "a/src/client/components/features/OffreDeStage/D\303\251poser/Confirmation/StageDeposerOffreFormulaireEnvoye.module.scss" "b/src/client/components/features/OffreDeStage/D\303\251poser/Confirmation/StageDeposerOffreFormulaireEnvoye.module.scss" index af8c01d633..e07583e749 100644 --- "a/src/client/components/features/OffreDeStage/D\303\251poser/Confirmation/StageDeposerOffreFormulaireEnvoye.module.scss" +++ "b/src/client/components/features/OffreDeStage/D\303\251poser/Confirmation/StageDeposerOffreFormulaireEnvoye.module.scss" @@ -18,6 +18,7 @@ > a { margin-top: 1rem; width: 100%; + justify-content: center; } } diff --git "a/src/client/components/features/OffreDeStage/D\303\251poser/Confirmation/StageDeposerOffreFormulaireEnvoye.tsx" "b/src/client/components/features/OffreDeStage/D\303\251poser/Confirmation/StageDeposerOffreFormulaireEnvoye.tsx" index 796968b413..edc3c4b0a8 100644 --- "a/src/client/components/features/OffreDeStage/D\303\251poser/Confirmation/StageDeposerOffreFormulaireEnvoye.tsx" +++ "b/src/client/components/features/OffreDeStage/D\303\251poser/Confirmation/StageDeposerOffreFormulaireEnvoye.tsx" @@ -1,9 +1,7 @@ import React from 'react'; import { Container } from '~/client/components/layouts/Container/Container'; -import { - LinkStyledAsButton, -} from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import { URL_DEPOSER_OFFRE } from '~/pages/stages/deposer-offre/index.page'; import styles from './StageDeposerOffreFormulaireEnvoye.module.scss'; @@ -14,18 +12,18 @@ export default function StageDeposerOffreFormulaireEnvoye() {
Cette offre est soumise à une validation avant sa mise en ligne.
- - Déposer une offre de stage - - + - Retourner à l’accueil - + Retourner à l’accueil +
); diff --git "a/src/client/components/features/OffreDeStage/D\303\251poser/FormulaireLayout/StageDeposerOffreFormulaireLayout.module.scss" "b/src/client/components/features/OffreDeStage/D\303\251poser/FormulaireLayout/StageDeposerOffreFormulaireLayout.module.scss" index ea1e202471..4c095120f7 100644 --- "a/src/client/components/features/OffreDeStage/D\303\251poser/FormulaireLayout/StageDeposerOffreFormulaireLayout.module.scss" +++ "b/src/client/components/features/OffreDeStage/D\303\251poser/FormulaireLayout/StageDeposerOffreFormulaireLayout.module.scss" @@ -8,7 +8,7 @@ @extend %label-champ; @include utilities.media(large) { - margin-top: 3.5rem; + margin-top: 2.5rem; } } diff --git a/src/client/components/features/OffreEmploi/Consulter/ConsulterOffreEmploi.tsx b/src/client/components/features/OffreEmploi/Consulter/ConsulterOffreEmploi.tsx index 98dad4c549..e15d93ec06 100644 --- a/src/client/components/features/OffreEmploi/Consulter/ConsulterOffreEmploi.tsx +++ b/src/client/components/features/OffreEmploi/Consulter/ConsulterOffreEmploi.tsx @@ -2,7 +2,7 @@ import React from 'react'; import commonStyles from '~/client/components/features/ConsulterOffre.module.scss'; import { ConsulterOffreLayout } from '~/client/components/layouts/ConsulterOffre/ConsulterOffreLayout'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import { TagList } from '~/client/components/ui/Tag/TagList'; import useSanitize from '~/client/hooks/useSanitize'; import { Offre } from '~/server/offres/domain/offre'; @@ -22,7 +22,7 @@ export function ConsulterOffreEmploi({ offreEmploi }: ConsulterOffreEmploiProps)
- Je postule sur Pôle Emploi + Je postule sur Pôle Emploi
diff --git a/src/client/components/features/ServiceCard/Card/ServiceCard.tsx b/src/client/components/features/ServiceCard/Card/ServiceCard.tsx index e4168501e9..506eda163b 100644 --- a/src/client/components/features/ServiceCard/Card/ServiceCard.tsx +++ b/src/client/components/features/ServiceCard/Card/ServiceCard.tsx @@ -4,7 +4,7 @@ import React, { useMemo } from 'react'; import { HtmlHeadingTag } from '~/client/components/props'; import { Card } from '~/client/components/ui/Card/Card'; import { Icon } from '~/client/components/ui/Icon/Icon'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; import useBreakpoint from '~/client/hooks/useBreakpoint'; import { useIsInternalLink } from '~/client/hooks/useIsInternalLink'; @@ -49,7 +49,7 @@ export function ServiceCard(props: ServiceCardProps & React.HTMLAttributes + - + ); } diff --git a/src/client/components/features/Stages3eEt2de/Candidater/ResultatEnvoyerCandidature/SuccesEnvoyerCandidatureStage3eEt2de.tsx b/src/client/components/features/Stages3eEt2de/Candidater/ResultatEnvoyerCandidature/SuccesEnvoyerCandidatureStage3eEt2de.tsx index 95848047f9..dba4d6614f 100644 --- a/src/client/components/features/Stages3eEt2de/Candidater/ResultatEnvoyerCandidature/SuccesEnvoyerCandidatureStage3eEt2de.tsx +++ b/src/client/components/features/Stages3eEt2de/Candidater/ResultatEnvoyerCandidature/SuccesEnvoyerCandidatureStage3eEt2de.tsx @@ -2,7 +2,7 @@ import { useRouter } from 'next/router'; import { BackButton } from '~/client/components/features/ButtonRetour/BackButton'; import { Container } from '~/client/components/layouts/Container/Container'; -import { LinkStyledAsButton } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import { getSingleQueryParam } from '~/client/utils/queryParams.utils'; import { ModeDeContact } from '~/server/stage-3e-et-2de/domain/candidatureStage3eEt2de'; @@ -31,13 +31,13 @@ export function SuccesEnvoyerCandidatureStage3eEt2de() { className={styles.boutonContinuerRecherche} appearance="primary" /> - Retour à l’accueil - +
; } diff --git a/src/client/components/layouts/Error/ErrorLayout.tsx b/src/client/components/layouts/Error/ErrorLayout.tsx index 61ee592738..b2c2d68ef3 100644 --- a/src/client/components/layouts/Error/ErrorLayout.tsx +++ b/src/client/components/layouts/Error/ErrorLayout.tsx @@ -6,9 +6,7 @@ import { BackButton } from '~/client/components/features/ButtonRetour/BackButton import { Container } from '~/client/components/layouts/Container/Container'; import styles from '~/client/components/layouts/Error/ErrorLayout.module.scss'; import { HtmlHeadingTag } from '~/client/components/props'; -import { - LinkStyledAsButton, -} from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import useBreakpoint from '~/client/hooks/useBreakpoint'; @@ -26,7 +24,7 @@ export function ErrorLayout(props: React.PropsWithChildren) { {children}
- Aller à l‘accueil + Aller à l‘accueil
diff --git a/src/client/components/layouts/Footer/Footer.module.scss b/src/client/components/layouts/Footer/Footer.module.scss index 69fc6fc4e4..60a7c155a8 100644 --- a/src/client/components/layouts/Footer/Footer.module.scss +++ b/src/client/components/layouts/Footer/Footer.module.scss @@ -100,6 +100,14 @@ padding-top: 0.7rem; color: utilities-deprecated.$color-mention-grey; font-size: .75rem; + display: flex; + + & > a { + text-decoration: none; + &:hover, &:focus { + text-decoration: underline; + } + } & > a > svg { width: 12px; @@ -110,13 +118,7 @@ &Faq { display: block; margin-bottom: 1rem; - color: utilities-deprecated.$color-primary; @extend %bold; - font-size: 1rem; - text-decoration: none; - &:hover { - text-decoration: underline; - } } } @@ -151,9 +153,3 @@ } } } - -.linkEtalab:hover, -.linkEtalab:focus, -{ - font-weight: 700; -} diff --git a/src/client/components/layouts/Footer/Footer.tsx b/src/client/components/layouts/Footer/Footer.tsx index 285760664e..3e20a3be39 100644 --- a/src/client/components/layouts/Footer/Footer.tsx +++ b/src/client/components/layouts/Footer/Footer.tsx @@ -3,8 +3,7 @@ import React from 'react'; import { Container } from '~/client/components/layouts/Container/Container'; import styles from '~/client/components/layouts/Footer/Footer.module.scss'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; -import { TextIcon } from '~/client/components/ui/TextIcon/TextIcon'; +import { Link } from '~/client/components/ui/Link/Link'; interface FooterLink { title: string @@ -59,36 +58,38 @@ export default function Footer() { Logo France relance - +
Besoin d’aide ?
Accéder à la FAQ de 1jeune1solution
- +
    {linkList.map((link) => (
  • - - {link.title} - + + {link.title} + +
    • ))}
    -
  • Plan du site
    • -
  • Conditions générales d‘utilisations
    • -
  • Accessibilité : Partiellement conforme
    • -
  • Mentions légales
    • -
  • Politique de confidentialité
    • +
  • Plan du site
    • +
  • Conditions générales d‘utilisations
    • +
  • Accessibilité : Partiellement conforme
    • +
  • Mentions légales
    • +
  • Politique de confidentialité

Sauf mention contraire, tous les contenus de ce site sont sous licence  - - etalab-2.0 - + etalab-2.0 + +

diff --git a/src/client/components/layouts/FormulaireEtape/FormulaireEtapeLayout.tsx b/src/client/components/layouts/FormulaireEtape/FormulaireEtapeLayout.tsx index 5a73d05dd6..91f41a9bf9 100644 --- a/src/client/components/layouts/FormulaireEtape/FormulaireEtapeLayout.tsx +++ b/src/client/components/layouts/FormulaireEtape/FormulaireEtapeLayout.tsx @@ -1,8 +1,7 @@ import React from 'react'; import { Container } from '~/client/components/layouts/Container/Container'; -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 styles from './FormulaireEtapeLayout.module.scss'; @@ -16,15 +15,14 @@ export function FormulaireÉtapeLayout(props: FormulaireEtapeLayoutProps) { return ( <ÉtapeFormulaire étape={étape} /> - { urlÉtapePrécédente && } className={styles.boutonRetour} > + Retour à l’étape précédente - } + } { children } ); diff --git a/src/client/components/layouts/Header/Banner/EnqueteSatisfactionBanner.module.scss b/src/client/components/layouts/Header/Banner/EnqueteSatisfactionBanner.module.scss index 1de3cb3892..df30d5e3aa 100644 --- a/src/client/components/layouts/Header/Banner/EnqueteSatisfactionBanner.module.scss +++ b/src/client/components/layouts/Header/Banner/EnqueteSatisfactionBanner.module.scss @@ -3,17 +3,10 @@ .enqueteBanner { @include utilities.text-small; - text-align: center; background: utilities-deprecated.$white-lilac; - color: utilities-deprecated.$color-primary; padding: utilities.pixel-to-rem(20) utilities.pixel-to-rem(8); - & .enqueteLink:hover { - text-decoration: underline; - text-underline-offset: 3px; - } - - & .enqueteUrlDeuxiemePhrase { - display: unset; + & .enqueteLink { + margin: auto; } } diff --git a/src/client/components/layouts/Header/Banner/EnqueteSatisfactionBanner.tsx b/src/client/components/layouts/Header/Banner/EnqueteSatisfactionBanner.tsx index d0aaffef7b..b8a9626a34 100644 --- a/src/client/components/layouts/Header/Banner/EnqueteSatisfactionBanner.tsx +++ b/src/client/components/layouts/Header/Banner/EnqueteSatisfactionBanner.tsx @@ -1,18 +1,17 @@ import React from 'react'; import styles from '~/client/components/layouts/Header/Banner/EnqueteSatisfactionBanner.module.scss'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; -import { TextIcon } from '~/client/components/ui/TextIcon/TextIcon'; +import { Link } from '~/client/components/ui/Link/Link'; interface EnqueteSatisfactionBannerProps { - enqueteUrl: string; + enqueteUrl: string; } export function EnqueteSatisfactionBanner({ enqueteUrl }: EnqueteSatisfactionBannerProps) { return
- - Vous souhaitez aider 1jeune1solution à s’améliorer ?{' '} - Donnez votre avis en moins de 2 minutes - + + Vous souhaitez aider 1jeune1solution à s’améliorer ? Donnez votre avis en moins de 2 minutes + +
; } diff --git a/src/client/components/layouts/Header/Header.module.scss b/src/client/components/layouts/Header/Header.module.scss index 52e720aced..bdf961a181 100644 --- a/src/client/components/layouts/Header/Header.module.scss +++ b/src/client/components/layouts/Header/Header.module.scss @@ -17,23 +17,18 @@ } & .headerBannerMobile { + width: 100%; + justify-content: center; background-color: utilities.$color-cta-background-primary; color: utilities.$color-cta-texte-primary; - display: flex; - justify-content: center; - align-items: center; padding-block: 0.5rem; padding-inline: 0.5rem; + text-decoration: underline; + text-underline-offset: 3px; + text-align: center; + @extend %bold; @extend %text-small; - - & .headerBannerMobileTitle { - text-decoration: underline; - text-underline-offset: 3px; - margin-right: 0.5rem; - line-height: 2; - text-align: center; - @extend %bold; - } + line-height: 2; } & .headerBodyContainer { @@ -119,7 +114,7 @@ 5px 5px 0 utilities-deprecated.$color-header-on-hover, 6px 6px 0 utilities-deprecated.$color-header-on-hover; - & .headerBodyBannerTitle, .headerBodyBannerIcon { + & .headerBodyBannerTitle { color: utilities-deprecated.$color-header-on-hover; } } diff --git a/src/client/components/layouts/Header/Header.tsx b/src/client/components/layouts/Header/Header.tsx index 188533ce2a..3674995bff 100644 --- a/src/client/components/layouts/Header/Header.tsx +++ b/src/client/components/layouts/Header/Header.tsx @@ -4,8 +4,7 @@ import { EnqueteSatisfactionBanner } from '~/client/components/layouts/Header/Ba import styles from '~/client/components/layouts/Header/Header.module.scss'; import { HeaderBody } from '~/client/components/layouts/Header/HeaderBody'; import { HeaderNavDesktop } from '~/client/components/layouts/Header/HeaderNavDesktop'; -import { Icon } from '~/client/components/ui/Icon/Icon'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; import useBreakpoint from '~/client/hooks/useBreakpoint'; const bulletList = '%E2%80%A2'; @@ -38,15 +37,15 @@ export function Header() { className={styles.header} role="banner"> {!isLargeScreen && displayCampagneEnCoursBanner && - -
Vous voulez accueillir des stagiaires de 3e et 2de ?
- - + + Vous voulez accueillir des stagiaires de 3e et 2de ? + + } {isLargeScreen && } {displayEnqueteSatisfactionBanner && - + } ); diff --git a/src/client/components/layouts/Header/HeaderBody.tsx b/src/client/components/layouts/Header/HeaderBody.tsx index d4621670fd..df5014fabc 100644 --- a/src/client/components/layouts/Header/HeaderBody.tsx +++ b/src/client/components/layouts/Header/HeaderBody.tsx @@ -7,7 +7,7 @@ import styles from '~/client/components/layouts/Header/Header.module.scss'; import { HeaderNavMobile } from '~/client/components/layouts/Header/HeaderNavMobile'; import { ButtonComponent } from '~/client/components/ui/Button/ButtonComponent'; import { Icon } from '~/client/components/ui/Icon/Icon'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; import { ModalComponent } from '~/client/components/ui/Modal/ModalComponent'; import useBreakpoint from '~/client/hooks/useBreakpoint'; @@ -42,24 +42,24 @@ export function HeaderBody() { } - 1jeune1solution - + {isLargeScreen && displayBanner && - +
Vous voulez accueillir des stagiaires de 3e et 2de ?
Envoyez nous un e-mail !
- + } {!isLargeScreen && diff --git a/src/client/components/layouts/Header/NavEmployeurs.tsx b/src/client/components/layouts/Header/NavEmployeurs.tsx index 4da98e441c..f3fb4a0c4a 100644 --- a/src/client/components/layouts/Header/NavEmployeurs.tsx +++ b/src/client/components/layouts/Header/NavEmployeurs.tsx @@ -4,7 +4,7 @@ import { useLayoutEffect, useMemo, useRef, useState } from 'react'; import styles from '~/client/components/layouts/Header/NavEmployeurs.module.scss'; import { Icon } from '~/client/components/ui/Icon/Icon'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; import { useExitModal } from '~/client/hooks/useExitModal'; import { isNavigationItem, NavigationItem, NavigationItemWithChildren } from './NavigationStructure'; @@ -70,9 +70,9 @@ function listsFromChildren(path: string, item: NavigationItemWithChildren | Navi return (
  • - + {item.label} - +
    • ); diff --git "a/src/client/components/layouts/RechercherSolution/R\303\251sultat/R\303\251sultatRechercherSolution.module.scss" "b/src/client/components/layouts/RechercherSolution/R\303\251sultat/R\303\251sultatRechercherSolution.module.scss" index 4ba3f7b3af..e277b4096e 100644 --- "a/src/client/components/layouts/RechercherSolution/R\303\251sultat/R\303\251sultatRechercherSolution.module.scss" +++ "b/src/client/components/layouts/RechercherSolution/R\303\251sultat/R\303\251sultatRechercherSolution.module.scss" @@ -97,6 +97,8 @@ $border-card-lead: 4px solid $color-card-lead-border; } .cardLink { + margin-left: auto; + &::before { content: ''; position: absolute; diff --git "a/src/client/components/layouts/RechercherSolution/R\303\251sultat/R\303\251sultatRechercherSolution.tsx" "b/src/client/components/layouts/RechercherSolution/R\303\251sultat/R\303\251sultatRechercherSolution.tsx" index 0adad64f2b..614a234ba3 100644 --- "a/src/client/components/layouts/RechercherSolution/R\303\251sultat/R\303\251sultatRechercherSolution.tsx" +++ "b/src/client/components/layouts/RechercherSolution/R\303\251sultat/R\303\251sultatRechercherSolution.tsx" @@ -3,8 +3,7 @@ import Image from 'next/image'; import React, { PropsWithChildren, ReactNode, useId } from 'react'; import styles from '~/client/components/layouts/RechercherSolution/Résultat/RésultatRechercherSolution.module.scss'; -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 { TagList } from '~/client/components/ui/Tag/TagList'; import useBreakpoint from '~/client/hooks/useBreakpoint'; @@ -32,17 +31,16 @@ export function RésultatRechercherSolution(props: PropsWithChildren - } - iconPosition={'right'} appearance={'asQuaternaryButton'} aria-labelledby={intituléLienOffre ? undefined : `${idIntitulé} ${idLink}`} > {intituléLienOffre || 'En savoir plus'} - + + }
    diff --git a/src/client/components/ui/Baniere/BanniereRejoindreLaMobilisation/BanniereRejoindreLaMobilisation.tsx b/src/client/components/ui/Baniere/BanniereRejoindreLaMobilisation/BanniereRejoindreLaMobilisation.tsx index 259b27550c..9c128093ce 100644 --- a/src/client/components/ui/Baniere/BanniereRejoindreLaMobilisation/BanniereRejoindreLaMobilisation.tsx +++ b/src/client/components/ui/Baniere/BanniereRejoindreLaMobilisation/BanniereRejoindreLaMobilisation.tsx @@ -1,5 +1,6 @@ -import styles from '~/client/components/ui/Baniere/BanniereRejoindreLaMobilisation/BanniereRejoindreLaMobilisation.module.scss'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import styles + from '~/client/components/ui/Baniere/BanniereRejoindreLaMobilisation/BanniereRejoindreLaMobilisation.module.scss'; +import { Link } from '~/client/components/ui/Link/Link'; export default function BanniereRejoindreLaMobilisation() { @@ -9,7 +10,7 @@ export default function BanniereRejoindreLaMobilisation() {

    Les entreprises s’engagent, une mobilisation des entreprises pour l’emploi des jeunes

    - Rejoindre la mobilisation + Rejoindre la mobilisation ); diff --git a/src/client/components/ui/Card/Card.module.scss b/src/client/components/ui/Card/Card.module.scss index 509437e3dc..801a43cf43 100644 --- a/src/client/components/ui/Card/Card.module.scss +++ b/src/client/components/ui/Card/Card.module.scss @@ -71,6 +71,7 @@ } .cardButtonQuaternary { + align-items: center; color: utilities-deprecated.$color-primary; border-radius: 0; padding: 0; diff --git a/src/client/components/ui/Card/Card.tsx b/src/client/components/ui/Card/Card.tsx index ed2d5be12a..1753c10fd5 100644 --- a/src/client/components/ui/Card/Card.tsx +++ b/src/client/components/ui/Card/Card.tsx @@ -4,7 +4,7 @@ import React, { useMemo } from 'react'; import { HtmlHeadingTag } from '~/client/components/props'; import { ButtonComponent, ButtonComponentProps } from '~/client/components/ui/Button/ButtonComponent'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; import styles from './Card.module.scss'; @@ -73,9 +73,9 @@ interface CardLinkProps { label?: string } -function CardLink(props: CardLinkProps & React.ComponentPropsWithoutRef) { +function CardLink(props: CardLinkProps & React.ComponentPropsWithoutRef) { const { className, href, label, ...rest } = props; - return {label}; + return {label}; } interface CardImageProps { diff --git a/src/client/components/ui/Card/Flipping/FlippingCard.module.scss b/src/client/components/ui/Card/Flipping/FlippingCard.module.scss index 18ced643bf..5588166009 100644 --- a/src/client/components/ui/Card/Flipping/FlippingCard.module.scss +++ b/src/client/components/ui/Card/Flipping/FlippingCard.module.scss @@ -62,16 +62,6 @@ color: utilities-deprecated.$color-on-primary; padding: 1rem; - &Action { - background-color: utilities-deprecated.$color-on-primary; - border-radius: 50%; - padding: 0.25rem; - line-height: 1.4; - font-size: 1rem; - color: utilities-deprecated.$color-primary; - width: 2rem; - height: 2rem; - } &Title { $lineHeight: 1.2; @@ -90,6 +80,17 @@ overflow: auto; padding-inline: 1rem; } + + + &Action { + background-color: utilities-deprecated.$color-on-primary; + border-radius: 50%; + padding: 0.25rem; + font-size: 1rem; + color: utilities-deprecated.$color-primary; + width: 2rem; + height: 2rem; + } } &Body { @@ -121,18 +122,6 @@ font-size: 0.875rem; } } - - &Action { - @extend %background-primary; - border-radius: 20px; - height: 2.5rem; - display: inline-flex; - align-items: center; - align-self: flex-end; - font-size: 0.875rem; - padding: 0 1.5rem; - text-decoration: none; - } } @include utilities-deprecated.media(medium) { diff --git a/src/client/components/ui/Card/Flipping/FlippingCard.tsx b/src/client/components/ui/Card/Flipping/FlippingCard.tsx index 5f01c2fc47..c300591c15 100644 --- a/src/client/components/ui/Card/Flipping/FlippingCard.tsx +++ b/src/client/components/ui/Card/Flipping/FlippingCard.tsx @@ -1,18 +1,12 @@ import classNames from 'classnames'; import Image from 'next/image'; -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { HtmlHeadingTag } from '~/client/components/props'; import { ButtonComponent } from '~/client/components/ui/Button/ButtonComponent'; import styles from '~/client/components/ui/Card/Flipping/FlippingCard.module.scss'; 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 MarkdownToHtml from '~/client/components/ui/MarkdownToHtml/MarkdownToHtml'; import { useIsInternalLink } from '~/client/hooks/useIsInternalLink'; @@ -57,14 +51,15 @@ export function FlippingCard(props: FlippingCardProps) { const linkAsButton = useMemo(function () { - return - {isInternalLink ? 'Lire l‘article' : 'En savoir plus'} - ; + {isInternalLink ? 'Lire l‘article' : 'En savoir plus'} + + ; }, [isInternalLink, link]); const flipCard = useCallback((reverse = false) => { diff --git a/src/client/components/ui/Card/Link/LinkCard.tsx b/src/client/components/ui/Card/Link/LinkCard.tsx index 39a6fc68c2..188d5e7f24 100644 --- a/src/client/components/ui/Card/Link/LinkCard.tsx +++ b/src/client/components/ui/Card/Link/LinkCard.tsx @@ -5,7 +5,7 @@ import React from 'react'; import { HtmlHeadingTag } from '~/client/components/props'; import styles from '~/client/components/ui/Card/Link/LinkCard.module.scss'; import { Icon } from '~/client/components/ui/Icon/Icon'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; interface LinkCardProps extends Pick, 'className'> { imageUrl: string @@ -22,7 +22,7 @@ export function LinkCard({ children, className, imageUrl, link, linkLabel, title } return ( - +
    @@ -40,7 +40,7 @@ export function LinkCard({ children, className, imageUrl, link, linkLabel, title
    {children}
    -     + ); }; diff --git a/src/client/components/ui/Footnote/Footnote.module.scss b/src/client/components/ui/Footnote/Footnote.module.scss index 6f1a653d5d..c0f2c5893b 100644 --- a/src/client/components/ui/Footnote/Footnote.module.scss +++ b/src/client/components/ui/Footnote/Footnote.module.scss @@ -7,7 +7,7 @@ text-align: end; } - & .backlink > svg { + & .icon { color: utilities-deprecated.$color-primary; height: 1em; width: 1em; @@ -17,4 +17,4 @@ .reference { color: utilities-deprecated.$color-primary; text-decoration: none; -} \ No newline at end of file +} diff --git a/src/client/components/ui/Footnote/Footnote.tsx b/src/client/components/ui/Footnote/Footnote.tsx index b07f1e823a..eae47154b1 100644 --- a/src/client/components/ui/Footnote/Footnote.tsx +++ b/src/client/components/ui/Footnote/Footnote.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import { ComponentPropsWithoutRef, forwardRef } from 'react'; import { Icon } from '~/client/components/ui/Icon/Icon'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; import styles from './Footnote.module.scss'; @@ -19,7 +19,7 @@ const FootnoteComponent = forwardRef(functi }, ref) { return (

    - * {children} + * {children}

    ); }); diff --git a/src/client/components/ui/Form/ModaleErrorSubmission/ModalErrorSubmission.tsx b/src/client/components/ui/Form/ModaleErrorSubmission/ModalErrorSubmission.tsx index dca96dd4e2..976a7f0d8e 100644 --- a/src/client/components/ui/Form/ModaleErrorSubmission/ModalErrorSubmission.tsx +++ b/src/client/components/ui/Form/ModaleErrorSubmission/ModalErrorSubmission.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { ButtonComponent } from '~/client/components/ui/Button/ButtonComponent'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; +import { Link } from '~/client/components/ui/Link/Link'; import { ModalComponent } from '../../Modal/ModalComponent'; import styles from './ModalErrorSubmission.module.scss'; @@ -26,9 +26,10 @@ export function ModalErrorSubmission({ isOpen, onClose, description, onBackToFor } - + Aller à l‘accueil - + + ; diff --git a/src/client/components/ui/Hero/Hero.module.scss b/src/client/components/ui/Hero/Hero.module.scss index 6e8bbb77b0..69a9fa0f66 100644 --- a/src/client/components/ui/Hero/Hero.module.scss +++ b/src/client/components/ui/Hero/Hero.module.scss @@ -99,9 +99,8 @@ } .linkAsButton { - display: flex; + width: 100%; justify-content: center; - align-items: center; } .linkAsButtonSecondary { diff --git a/src/client/components/ui/Hero/HeroWithButtonLink.tsx b/src/client/components/ui/Hero/HeroWithButtonLink.tsx index 3f5ffc9ed2..0dcb782317 100644 --- a/src/client/components/ui/Hero/HeroWithButtonLink.tsx +++ b/src/client/components/ui/Hero/HeroWithButtonLink.tsx @@ -3,9 +3,10 @@ import Image from 'next/image'; import React from 'react'; import styles from '~/client/components/ui/Hero/Hero.module.scss'; -import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; import useBreakpoint from '~/client/hooks/useBreakpoint'; +import { Link } from '../Link/Link'; + interface HeroWithButtonLinkProps { titlePrimaryText: React.ReactNode titleSecondaryText?: React.ReactNode @@ -35,8 +36,8 @@ export function HeroWithButtonLink(props: HeroWithButtonLinkProps) { {content}

    - {buttonLabel} - {(buttonLabelSecondary && buttonHrefSecondary) && {buttonLabelSecondary}} + {buttonLabel} + {(buttonLabelSecondary && buttonHrefSecondary) && {buttonLabelSecondary}}
    {additionalInformation} diff --git a/src/client/components/ui/LinkDeprecated/LinkDeprecated.module.scss b/src/client/components/ui/LinkDeprecated/LinkDeprecated.module.scss deleted file mode 100644 index f9bb12b1b0..0000000000 --- a/src/client/components/ui/LinkDeprecated/LinkDeprecated.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -.link { - & > svg { - vertical-align: middle; - } -} diff --git a/src/client/components/ui/LinkDeprecated/LinkDeprecated.stories.tsx b/src/client/components/ui/LinkDeprecated/LinkDeprecated.stories.tsx deleted file mode 100644 index e0589d6ec7..0000000000 --- a/src/client/components/ui/LinkDeprecated/LinkDeprecated.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { LinkDeprecated } from './LinkDeprecated'; - -const meta: Meta = { - component: LinkDeprecated, - title: 'Components/Link', -}; -export default meta; - -type Story = StoryObj; -export const Example: Story = { - args: { - children: 'Cliquez ici ', - href: 'https//www.1jeune1solution.gouv.fr/', - prefetch:false, - }, - -}; - - diff --git a/src/client/components/ui/LinkDeprecated/LinkDeprecated.test.tsx b/src/client/components/ui/LinkDeprecated/LinkDeprecated.test.tsx deleted file mode 100644 index d78ff2fd59..0000000000 --- a/src/client/components/ui/LinkDeprecated/LinkDeprecated.test.tsx +++ /dev/null @@ -1,79 +0,0 @@ -/** - * @jest-environment jsdom - */ -import '@testing-library/jest-dom'; - -import { render, screen } from '@testing-library/react'; - -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; - -describe('Link', () => { - afterEach(() => { - jest.clearAllMocks(); - }); - - describe('quand le lien est un lien externe', () => { - it('retourne le composant Link avec un *tag a* directement et les propriétés target et rel', () => { - const lienExterne = 'https://mon-lien-externe'; - - render( - , - ); - - const linkComponent = screen.getByRole('link'); - - expect(linkComponent.getAttribute('href')).toEqual('https://mon-lien-externe'); - expect(linkComponent).toHaveAttribute('target'); - expect(linkComponent).toHaveAttribute('rel'); - }); - }); - - describe('quand le lien est un lien interne avec href relatif', () => { - it('retourne le composant Link sans les propriétés de la redirection externe', () => { - const lienInterne = '/emplois'; - - render( - , - ); - - const linkComponent = screen.getByRole('link'); - - expect(linkComponent.getAttribute('href')).toEqual('/emplois'); - expect(linkComponent).not.toHaveAttribute('target'); - expect(linkComponent).not.toHaveAttribute('rel'); - }); - }); - describe('quand le lien est un lien interne avec href absolut', () => { - it('retourne le composant Link sans les propriétés de la redirection externe', () => { - Object.defineProperty(window, 'location', { - value: { origin: 'localhost' }, - }); - const lienInterne = 'localhost/emplois'; - - render( - , - ); - - const linkComponent = screen.getByRole('link'); - - expect(linkComponent.getAttribute('href')).toEqual('localhost/emplois'); - expect(linkComponent).not.toHaveAttribute('target'); - expect(linkComponent).not.toHaveAttribute('rel'); - }); - }); - describe('quand le lien est un lien interne vers une ancre', () => { - it('retourne le composant Link sans les propriétés de la redirection externe', () => { - const lienInterne = '#emplois'; - - render( - , - ); - - const linkComponent = screen.getByRole('link'); - - expect(linkComponent.getAttribute('href')).toEqual('#emplois'); - expect(linkComponent).not.toHaveAttribute('target'); - expect(linkComponent).not.toHaveAttribute('rel'); - }); - }); -}); diff --git a/src/client/components/ui/LinkDeprecated/LinkDeprecated.tsx b/src/client/components/ui/LinkDeprecated/LinkDeprecated.tsx deleted file mode 100644 index 156e13c5e8..0000000000 --- a/src/client/components/ui/LinkDeprecated/LinkDeprecated.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import classNames from 'classnames'; -import LinkNext from 'next/link'; -import React from 'react'; - -import { useIsInternalLink } from '~/client/hooks/useIsInternalLink'; -import { getTextFromChildren } from '~/client/utils/getTextFromChildren.util'; - - -type LinkProps = React.ComponentPropsWithoutRef<'a'>&{ - href: string - prefetch?: boolean -} - -export function LinkDeprecated(props: LinkProps) { - const { - className, - children, - href, - prefetch = false, - title, - ...rest - } = props; - const isInternalLink = useIsInternalLink(href); - - function getTitle() { - if (isInternalLink) { - return title; - } - return title ?? `${getTextFromChildren(children)} - nouvelle fenêtre`; - } - - return isInternalLink ? ( - - {children} - - ) : ( - - {children} - - ); -} diff --git a/src/client/components/ui/LinkStyledAsButton/LinkStyledAsButton.module.scss b/src/client/components/ui/LinkStyledAsButton/LinkStyledAsButton.module.scss deleted file mode 100644 index b2d96c4fba..0000000000 --- a/src/client/components/ui/LinkStyledAsButton/LinkStyledAsButton.module.scss +++ /dev/null @@ -1,92 +0,0 @@ -@use "@styles/utilities-deprecated"; - -.primaryButton, .secondaryButton, .tertiaryButton{ - display: inline-flex; - align-items: center; - justify-content: center; - gap: .5rem; - border-radius: 50px; - text-decoration: none; - outline-offset: 4px; - - & > svg { - vertical-align: middle; - } -} - -.primaryButton, .secondaryButton, .tertiaryButton { - white-space: nowrap; - text-overflow: ellipsis; - overflow-x: hidden; -} - -.primaryButton { - @extend %button; - border: 1px solid utilities-deprecated.$color-primary; - background-color: utilities-deprecated.$color-primary; - color: utilities-deprecated.$color-on-primary; - - &:hover { - background-color: utilities-deprecated.$color-primary-on-hover; - border-color: utilities-deprecated.$color-primary-on-hover; - } -} - -.secondaryButton { - @extend %button; - border: 1px solid utilities-deprecated.$color-primary; - color: utilities-deprecated.$color-primary; - background-color: utilities-deprecated.$white; - - &:hover { - background-color: utilities-deprecated.$color-background-white-titan; - border-color: utilities-deprecated.$color-primary; - color: utilities-deprecated.$color-primary; - } -} - -.tertiaryButton { - @extend %button; - border: 1px solid utilities-deprecated.$color-primary; - color: utilities-deprecated.$color-primary; - background-color: utilities-deprecated.$color-background-white-titan; - - &:hover { - background-color: utilities-deprecated.$color-tertiary-on-hover; - border-color: utilities-deprecated.$color-tertiary-on-hover; - color: utilities-deprecated.$white; - } -} - -.quaternaryButton { - display: flex; - color: utilities-deprecated.$color-primary; - text-decoration: none; - border-radius: 0; - padding: 0; - gap: .5rem; - - &:hover { - text-decoration: underline; - text-underline-offset: 3px; - } -} - -.linkWithRightIcon, .linkWithLeftIcon, .linkWithTopIcon { - display: inline-flex; - align-items: center; - justify-content: center; -} - -.linkWithLeftIcon { - & .linkLabel { - margin-left: 0.5rem; - } -} - -.linkWithTopIcon { - & .linkLabel { - margin-top: 0.5rem; - display: block; - } -} diff --git a/src/client/components/ui/LinkStyledAsButton/LinkStyledAsButton.test.tsx b/src/client/components/ui/LinkStyledAsButton/LinkStyledAsButton.test.tsx deleted file mode 100644 index 3345587fe0..0000000000 --- a/src/client/components/ui/LinkStyledAsButton/LinkStyledAsButton.test.tsx +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @jest-environment jsdom - */ -import '@testing-library/jest-dom'; - -import { render, screen } from '@testing-library/react'; -import React from 'react'; - -import { - LinkStyledAsButton, - LinkStyledAsButtonWithIcon, -} from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton'; - -describe('LinkStyledAsButton', () => { - afterEach(() => { - jest.clearAllMocks(); - }); - - describe('quand le lien est un lien externe', () => { - it('retourne le composant Link avec les propriétés de redirection externe', () => { - const lienExterne = 'https://mon-lien-externe'; - - render( - , - ); - - const linkComponent = screen.getByRole('link'); - - expect(linkComponent).toHaveAttribute('href', 'https://mon-lien-externe'); - expect(linkComponent).toHaveAttribute('target'); - expect(linkComponent).toHaveAttribute('rel'); - }); - }); - - describe('quand le lien est un lien interne avec href relatif', () => { - it('retourne le composant Link sans les propriétés de la redirection externe', () => { - const lienInterne = '/emplois'; - - render( - , - ); - - const linkComponent = screen.getByRole('link'); - - expect(linkComponent).toHaveAttribute('href', '/emplois'); - expect(linkComponent).not.toHaveAttribute('target'); - expect(linkComponent).not.toHaveAttribute('rel'); - }); - }); - - describe('quand le lien est un lien interne avec href absolut', () => { - it('retourne le composant Link sans les propriétés de la redirection externe', () => { - Object.defineProperty(window, 'location', { - value: { origin: 'localhost' }, - }); - const lienInterne = 'localhost/emplois'; - - render( - , - ); - - const linkComponent = screen.getByRole('link'); - - expect(linkComponent).toHaveAttribute('href', 'localhost/emplois'); - expect(linkComponent).not.toHaveAttribute('target'); - expect(linkComponent).not.toHaveAttribute('rel'); - }); - }); - - describe('quand le lien est un lien interne vers une ancre', () => { - it('retourne le composant Link sans les propriétés de la redirection externe', () => { - const lienInterne = '#emplois'; - - render( - - ceci est un label - , - ); - - expect(screen.getByText('ceci est un label')).toBeVisible(); - }); - }); -}); diff --git a/src/client/components/ui/LinkStyledAsButton/LinkStyledAsButton.tsx b/src/client/components/ui/LinkStyledAsButton/LinkStyledAsButton.tsx deleted file mode 100644 index 4e1a22c29f..0000000000 --- a/src/client/components/ui/LinkStyledAsButton/LinkStyledAsButton.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import classNames from 'classnames'; -import React, { PropsWithChildren, useMemo } from 'react'; - -import { Icon } from '~/client/components/ui/Icon/Icon'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; -import { useIsInternalLink } from '~/client/hooks/useIsInternalLink'; - -import styles from './LinkStyledAsButton.module.scss'; - -type ButtonAppearance = 'asPrimaryButton' | 'asSecondaryButton' | 'asTertiaryButton' | 'asQuaternaryButton'; - -type IconPosition = 'top' | 'left' | 'right'; - -type IconProps = { - icon: React.ReactNode; - iconPosition: IconPosition; -} | { - icon?: never; - iconPosition?: never; -} - -interface LinkStyledAsButtonProps extends React.ComponentPropsWithoutRef<'a'> { - href: string - appearance: ButtonAppearance - prefetch?: boolean -} - - -type LinkStyledAsButtonWithIconProps = LinkStyledAsButtonProps & IconProps - -export function LinkStyledAsButton(props: PropsWithChildren){ - const { - appearance, - children, - className, - href, - prefetch = false, - ...rest - } = props; - - const appearanceClass = useMemo(() => { - switch (appearance) { - case 'asPrimaryButton': - return styles.primaryButton; - case 'asSecondaryButton': - return styles.secondaryButton; - case 'asTertiaryButton': - return styles.tertiaryButton; - case 'asQuaternaryButton': - return styles.quaternaryButton; - } - }, [appearance]); - - - return ( - - {children} - - ); -} - - -export function LinkStyledAsButtonWithIcon(props: PropsWithChildren ) { - const { - children, - className, - iconPosition, - icon, - href, - ...rest - } = props; - const isInternalLink = useIsInternalLink(href); - - const iconClass = useMemo(() => { - switch (iconPosition) { - case 'top': - return styles.linkWithTopIcon; - case 'left': - return styles.linkWithLeftIcon; - case 'right': - return styles.linkWithRightIcon; - } - }, [iconPosition]); - - const linkStyledAsButtonWithIconBody = useMemo(() => { - switch (iconPosition) { - case 'top': - case 'left': - return <>{icon}{children}; - case 'right': - return <>{children}{icon}; - default: - return <> - {children} - { isInternalLink ? : } - ; - } - }, [icon, iconPosition, children, isInternalLink]); - - return ( - - {linkStyledAsButtonWithIconBody} - - ); -} diff --git a/src/client/components/ui/LinkStyledAsButton/LinkStyledAsButtonWithIcon.stories.tsx b/src/client/components/ui/LinkStyledAsButton/LinkStyledAsButtonWithIcon.stories.tsx deleted file mode 100644 index c344afeb13..0000000000 --- a/src/client/components/ui/LinkStyledAsButton/LinkStyledAsButtonWithIcon.stories.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { Icon } from '../Icon/Icon'; -import { LinkStyledAsButtonWithIcon } from './LinkStyledAsButton'; - -const meta: Meta = { - argTypes: { - icon: { - // Gestion "manuelle" d'une prop qui accepte un composant React - mapping: { - 'angle-left': , - 'angle-right': , - 'magnifying-glass': , - }, - options: ['magnifying-glass', 'angle-left', 'angle-right'], - }, - }, - args:{ - children:'Cliquez ici', - href:'https://www.1jeune1solution.gouv.fr/', - prefetch:true, - }, - component: LinkStyledAsButtonWithIcon, - title: 'Components/LinkStyledAsButton/LinkStyledAsButtonWithIcon', -}; -export default meta; -type Story = StoryObj; - -export const asPrimaryButton: Story = { - args: { - appearance: 'asPrimaryButton', - }, -}; - -export const asSecondaryButton: Story = { - args: { - appearance: 'asSecondaryButton', - }, -}; -export const asTertiaryButton: Story = { - args: { - appearance: 'asTertiaryButton', - }, -}; -export const asQuaternaryButton: Story = { - args: { - appearance: 'asQuaternaryButton', - }, -}; diff --git a/src/client/components/ui/LinkStyledAsButton/LinkStylesAsButton.stories.tsx b/src/client/components/ui/LinkStyledAsButton/LinkStylesAsButton.stories.tsx deleted file mode 100644 index d33532a79f..0000000000 --- a/src/client/components/ui/LinkStyledAsButton/LinkStylesAsButton.stories.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { LinkStyledAsButton } from './LinkStyledAsButton'; - - -const meta: Meta = { - args:{ - children:'Cliquez ici', - href:'https://www.1jeune1solution.gouv.fr/', - prefetch:true, - }, - component: LinkStyledAsButton, - title: 'Components/LinkStyledAsButton/LinkStyledAsButton', -}; -export default meta; -type Story = StoryObj; - -export const asPrimaryButton: Story = { - args: { - appearance: 'asPrimaryButton', - }, -}; - -export const asSecondaryButton: Story = { - args: { - appearance: 'asSecondaryButton', - }, -}; -export const asTertiaryButton: Story = { - args: { - appearance: 'asTertiaryButton', - }, -}; -export const asQuaternaryButton: Story = { - args: { - appearance: 'asQuaternaryButton', - }, -}; - diff --git a/src/pages/apprentissage/deposer-offre/index.page.tsx b/src/pages/apprentissage/deposer-offre/index.page.tsx index 24791002d6..11bcbd79d1 100644 --- a/src/pages/apprentissage/deposer-offre/index.page.tsx +++ b/src/pages/apprentissage/deposer-offre/index.page.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { Head } from '~/client/components/head/Head'; import { Container } from '~/client/components/layouts/Container/Container'; import { Hero, HeroPrimaryText, HeroSecondaryText } from '~/client/components/ui/Hero/Hero'; -import { LinkDeprecated } from '~/client/components/ui/LinkDeprecated/LinkDeprecated'; +import { Link } from '~/client/components/ui/Link/Link'; import useAnalytics from '~/client/hooks/useAnalytics'; import analytics from '~/pages/apprentissage/deposer-offre/index.analytics'; import styles from '~/pages/apprentissage/deposer-offre/index.module.scss'; @@ -35,8 +35,8 @@ export default function DeposerOffrePage() {

    - Si le formulaire de dépôt d’offre n’est pas visible ci-dessous, cliquez ici pour y accéder. - A noter : si le message suivant apparaît L’adresse email est déjà associée à un compte, nous vous invitons à saisir directement votre email sur la page d’authentification. Vous recevrez alors un message avec le lien de connexion pour déposer votre offre. + Si le formulaire de dépôt d’offre n’est pas visible ci-dessous, cliquez ici pour y accéder. + A noter : si le message suivant apparaît L’adresse email est déjà associée à un compte, nous vous invitons à saisir directement votre email sur la page d’authentification. Vous recevrez alors un message avec le lien de connexion pour déposer votre offre.