chore: article card pas de heading par defaut (#1215)

* chore: utilisation explicite d'h3 sur les ArticleCard * chore: utilisation explicite d'h3 sur les PartnerCard + suppresion du h3 par defaut du Card.Title * feat: ajout d'un titre sur la carte partenaire de l'onisep fiche métier * refact: utiliser ’ au lieu de '
DNUM-SocialGouv · May 2, 2023 · 0ef8c7a · 0ef8c7a
1 parent d5a0a1d
commit 0ef8c7a
Show file tree

Hide file tree

Showing 21 changed files with 38 additions and 15 deletions.
diff --git a/src/client/components/features/Alternance/Rechercher/RechercherAlternance.tsx b/src/client/components/features/Alternance/Rechercher/RechercherAlternance.tsx
@@ -108,7 +108,7 @@ export default function RechercherAlternance() {
 				listeSolutionElementTab={[{
 					label: 'Contrats d‘alternance',
 					listeSolutionElement: <ListeSolutionAlternance alternanceList={alternanceList.offreList}/>,
-				}, 
+				},
 				{
 					label: 'Entreprises',
 					listeSolutionElement: <ListeSolutionAlternanceEntreprise entrepriseList={alternanceList.entrepriseList}></ListeSolutionAlternanceEntreprise>,
@@ -122,6 +122,7 @@ export default function RechercherAlternance() {
 					imageFit="cover"
 					link="/articles/l-aide-a-l-apprentissage-l-atout-qu-il-faut-pour-vos-candidatures"
 					titleLabel="Une aide exceptionnelle pour l’apprentissage : l’atout qu’il vous faut pour vos candidatures !"
+					titleHeadingTag={'h3'}
 				>
 					<p>
 						Découvrez un argument supplémentaire à avancer pour vous faire

diff --git a/src/client/components/features/Formation/Consulter/Statistiques/StatistiquesFormation.tsx b/src/client/components/features/Formation/Consulter/Statistiques/StatistiquesFormation.tsx
@@ -44,6 +44,7 @@ export function StatistiquesFormation({ statistiques }: { statistiques?: Statist
 						link="/articles/inserjeunes"
 						logo="/images/logos/inserjeunes.svg"
 						title="Découvrez le dispositif InserJeunes"
+						titleAs={'h3'}
 					>
 						Inserjeunes est un service d’aide à l’orientation des jeunes qui présente différents indicateurs pour toutes les formations professionnelles.
 					</PartnerCard>

diff --git a/src/client/components/features/Partner/Card/PartnerCard.tsx b/src/client/components/features/Partner/Card/PartnerCard.tsx
@@ -33,12 +33,12 @@ interface PartnerCardProps {
 	logo: string
 	link: string
 	linkLabel: string
-	title?: string
-	titleAs?: HtmlHeadingTag
+	title: string
+	titleAs: HtmlHeadingTag
 }
 
 export function PartnerCard(props: PartnerCardProps & React.HTMLAttributes<HTMLLinkElement>) {
-	const { className, logo, link, linkLabel, title, titleAs, children } = props;
+	const { className, logo, link, linkLabel, title, titleAs , children } = props;
 	const isInternalLink = useIsInternalLink(link);
 	const { isLargeScreen } = useBreakpoint();
 	useReferrer();

diff --git a/src/client/components/features/Partner/InfoJeunesPartner.tsx b/src/client/components/features/Partner/InfoJeunesPartner.tsx
@@ -9,6 +9,7 @@ export function InfoJeunesPartner() {
 			link="/articles/info-jeunes"
 			logo="/images/logos/info-jeunes.svg"
 			title="Info Jeunes, le réseau d’accueil et d’information des jeunes en France au service d’une ambition : explorer les possibles !"
+			titleAs={'h3'}
 		>
 			La structure Info Jeunes (SIJ) accueille tous les jeunes (de 12 à 30 ans)
 			anonymement et gratuitement. On vous aide à trouver des informations et on

diff --git a/src/client/components/features/Partner/LaBonneAlternancePartner.tsx b/src/client/components/features/Partner/LaBonneAlternancePartner.tsx
@@ -9,6 +9,7 @@ export function LaBonneAlternancePartner() {
 			link="https://labonnealternance.apprentissage.beta.gouv.fr/"
 			logo="/images/logos/la-bonne-alternance.svg"
 			title="Étendez votre recherche à LaBonneAlternance"
+			titleAs={'h3'}
 		>
 			Vous ne trouvez pas de contrat ou d’offres d’alternance ? Essayez La bonne alternance !
 		</PartnerCard>

diff --git a/src/client/components/features/Partner/LaBonneBoitePartner.tsx b/src/client/components/features/Partner/LaBonneBoitePartner.tsx
@@ -9,6 +9,7 @@ export function LaBonneBoitePartner() {
 			logo="/images/logos/la-bonne-boite.svg"
 			link="https://labonneboite.pole-emploi.fr/"
 			title="Et si vous contactiez directement les entreprises ?"
+			titleAs={'h3'}
 		>
 			N’envoyez plus vos CV au hasard ! Identifiez et contactez les entreprises qui peuvent être susceptibles de
 			recruter même si elles n’ont pas déposé d’offres. Nos outils détectent

diff --git a/src/client/components/features/Partner/MissionsLocalesPartner.tsx b/src/client/components/features/Partner/MissionsLocalesPartner.tsx
@@ -9,6 +9,7 @@ export function MissionsLocalesPartner() {
 			logo="/images/logos/union-mission-locale.svg"
 			link="/articles/mission-locale"
 			linkLabel="En savoir plus"
+			titleAs={'h3'}
 		>
 			Les missions locales sont présentes sur l’ensemble du territoire national
 			et permettent à tous les jeunes de 16 à 25 ans de surmonter les

diff --git a/src/client/components/features/Partner/MonCompteFormationPartner.tsx b/src/client/components/features/Partner/MonCompteFormationPartner.tsx
@@ -9,6 +9,7 @@ export function MonCompteFormationPartner() {
 			logo="/images/logos/mon-compte-formation.svg"
 			link="https://www.moncompteformation.gouv.fr/espace-prive/html/#/"
 			title="Découvrez le dispositif Mon compte formation"
+			titleAs={'h3'}
 		>
 			Le compte personnel de formation (CPF) permet d’acquérir des droits à la
 			formation mobilisables tout au long de sa vie professionnelle. Il a une

diff --git a/src/client/components/features/Partner/MétiersDuSoinPartner.tsx b/src/client/components/features/Partner/MétiersDuSoinPartner.tsx
@@ -9,6 +9,7 @@ export function MétierDuSoinPartner() {
 			logo="/images/logos/métiers-du-soin.svg"
 			link="https://solidarites-sante.gouv.fr/metiers-et-concours/metiers-soin-et-accompagnement/metiersdusoin"
 			title="Renseignez-vous sur les métiers du soin"
+			titleAs={'h3'}
 		>
 			Vous aussi devenez aide-soignant, infirmier, éducateur spécialisé,
 			accompagnant éducatif et social…. Renseignez-vous sur les métiers du soin

diff --git a/src/client/components/features/Partner/OnisepPartner.tsx b/src/client/components/features/Partner/OnisepPartner.tsx
@@ -9,6 +9,7 @@ export function OnisepPartner() {
 			link="/decouvrir-les-metiers"
 			logo="/images/logos/onisep.svg"
 			title="Besoin d‘informations sur les métiers ?"
+			titleAs={'h3'}
 		>
 			Renseignez-vous sur les différents métiers avec l’ONISEP. Trouvez un métier qui vous correspond parmi plus de 700
 			fiches.

diff --git a/src/client/components/features/Partner/ParcourSupPartner.tsx b/src/client/components/features/Partner/ParcourSupPartner.tsx
@@ -9,6 +9,7 @@ export function ParcourSupPartner() {
 			logo="/images/logos/parcoursup.svg"
 			link="https://www.parcoursup.fr/"
 			title="La plateforme de pré-inscription en première année de l’enseignement supérieur"
+			titleAs={'h3'}
 		>
 			Si vous êtes lycéen(ne) en réorientation, rendez-vous sur Parcoursup, la
 			plateforme nationale de préinscription en première année de l’enseignement

diff --git a/src/client/components/features/Partner/PassPartner.tsx b/src/client/components/features/Partner/PassPartner.tsx
@@ -9,6 +9,7 @@ export function PassPartner() {
 			link="https://www.pass.fonction-publique.gouv.fr/"
 			logo="/images/logos/pass.png"
 			title="Recherche une offre d'alternance dans la fonction publique"
+			titleAs={'h3'}
 		>
 			La fonction publique accueille des apprentis dans tous les domaines et
 			de tous niveaux. Découvrez les offres sur la place de l’apprentissage et des stages.

diff --git a/src/client/components/features/Partner/PoleEmploiPartner.tsx b/src/client/components/features/Partner/PoleEmploiPartner.tsx
@@ -9,6 +9,7 @@ export function PoleEmploiPartner() {
 			logo="/images/logos/pole-emploi.svg"
 			link="/articles/pole-emploi"
 			linkLabel="En savoir plus"
+			titleAs={'h3'}
 		>
 			Avec son dispositif d’accompagnement individualisé des jeunes (AIJ), Pôle
 			emploi propose à tous les jeunes demandeurs d’emploi de 16 à 30 ans, un

diff --git a/src/client/components/features/Partner/ServiceCiviquePartner.tsx b/src/client/components/features/Partner/ServiceCiviquePartner.tsx
@@ -8,7 +8,9 @@ export function ServiceCiviquePartner() {
 			linkLabel="Trouver sa mission"
 			logo="/images/logos/service-civique.svg"
 			link="/service-civique"
-			title="Le Service Civique, pour acquérir de l’expérience et préparer son avenir">
+			title="Le Service Civique, pour acquérir de l’expérience et préparer son avenir"
+			titleAs={'h3'}
+		>
 			Avec ou sans diplôme, engagez-vous dans des missions d’intérêt général
 			en France ou à l’étranger. Indemnisé 601€/mois, il vous permettra d’acquérir ou de développer vos
 			compétences dans de nombreux domaines. Ouvert aux 16-25 ans (30 ans pour

diff --git a/src/client/components/features/Partner/SimulationAlternancePartner.tsx b/src/client/components/features/Partner/SimulationAlternancePartner.tsx
@@ -10,6 +10,7 @@ export function SimulationAlternancePartner() {
 			logo="/images/logos/portail-alternance.png"
 			link="https://www.alternance.emploi.gouv.fr/simulateur-alternant/etape-1"
 			title="Vous êtes alternant ?"
+			titleAs={'h3'}
 		>
 			<>
 				<strong className={styles.cardHeadline}>

diff --git a/src/client/components/ui/Card/Article/ArticleCard.tsx b/src/client/components/ui/Card/Article/ArticleCard.tsx
@@ -23,25 +23,25 @@ export function ArticleCardList({ children }: React.PropsWithChildren) {
 interface ArticleCardProps {
 	icon?: React.ReactNode
 	imageSrc: string
-	imageFit?: 'cover' | 'contain'
-	titleLabel: string
 	link: string
+	titleLabel: string
+	titleHeadingTag: HtmlHeadingTag
+	imageFit?: 'cover' | 'contain'
 	linkLabel?: string
 	vertical?: boolean
-	titleHeadingTag?: HtmlHeadingTag
 }
 
 export function ArticleCard({
 	className,
 	children,
 	icon,
 	imageSrc,
-	imageFit = 'cover',
 	link,
-	linkLabel = 'Lire l‘article',
 	titleLabel,
+	titleHeadingTag,
+	imageFit = 'cover',
+	linkLabel = 'Lire l‘article',
 	vertical = true,
-	titleHeadingTag = 'h3',
 }: ArticleCardProps & React.HTMLAttributes<HTMLLinkElement>) {
 	const iconComponent = useRef(icon ? icon : <Icon name={'arrow-right'}/>);
 	const imageClassName = classNames(styles.illustration, imageFit === 'contain' && styles.illustrationContain);

diff --git a/src/client/components/ui/Card/Card.tsx b/src/client/components/ui/Card/Card.tsx
@@ -97,9 +97,9 @@ function CardImage(props: CardImageProps & React.ComponentPropsWithoutRef<'div'>
 	);
 }
 
-function CardTitle(props: { titleAs?: HtmlHeadingTag } & React.ComponentPropsWithoutRef<HtmlHeadingTag>) {
+function CardTitle(props: { titleAs: HtmlHeadingTag } & React.ComponentPropsWithoutRef<HtmlHeadingTag>) {
 	const { children, className, titleAs, ...rest } = props;
-	return React.createElement(titleAs || 'h3', { className: classNames(styles.cardTitle, className), ...rest }, children);
+	return React.createElement(titleAs, { className: classNames(styles.cardTitle, className), ...rest }, children);
 }
 
 Card.Button = CardButton;

diff --git a/src/pages/decouvrir-les-metiers/[nomMetier].page.tsx b/src/pages/decouvrir-les-metiers/[nomMetier].page.tsx
@@ -46,6 +46,8 @@ export default function ConsulterFicheMetierPage({ ficheMetier }: ConsulterFiche
 							logo="/images/logos/onisep.svg"
 							link="https://www.onisep.fr/"
 							linkLabel="Aller sur le site de l’ONISEP"
+							title={'Onisep : l’information pour l’orientation'}
+							titleAs={'h3'}
 						>
 							L’Onisep est un établissement public, sous tutelle du ministère de
 							l’Education nationale, de la Jeunesse et des Sports, et du

diff --git a/src/pages/entreprendre/index.page.tsx b/src/pages/entreprendre/index.page.tsx
@@ -120,6 +120,7 @@ export default function Entreprendre() {
 							linkLabel="Prendre rendez-vous pour exposer son projet"
 							logo="/images/entreprendre/région-sud.png"
 							title="Vous avez moins de 30 ans, habitez Marseille et souhaitez créer votre entreprise ?"
+							titleAs={'h3'}
 						>
 							Dans le cadre de l’initiative “Marseille en grand” lancée par le
 							Président de la République le 2 septembre 2021, l’Etat et la

diff --git a/src/pages/espace-jeune/index.page.tsx b/src/pages/espace-jeune/index.page.tsx
@@ -37,13 +37,16 @@ export default function EspaceJeunePage({ cartesActualites, serviceJeuneList }:
 
 	const articleCardList: React.ReactNode[] = useMemo(() => {
 		return cartesActualites.map((carte, index) =>
-			<ArticleCard className={styles.carteActualite}
+			<ArticleCard
+				className={styles.carteActualite}
 				key={index}
 				imageSrc={carte.bannière?.src || ''}
 				titleLabel={carte.titre}
 				link={carte.link}
 				linkLabel={getCarteActualiteLinkLabel(carte)}
-				icon={getCarteActualiteLinkIcon(carte)}>
+				icon={getCarteActualiteLinkIcon(carte)}
+				titleHeadingTag={'h3'}
+			>
 				<p className={styles.carteActualiteDescription}>{carte.extraitContenu}</p>
 			</ArticleCard>,
 		);

diff --git a/src/pages/logements/aides-logement/index.page.tsx b/src/pages/logements/aides-logement/index.page.tsx
@@ -43,6 +43,7 @@ export default function AidesLogement() {
 										link="https://wwwd.caf.fr/wps/portal/caffr/aidesetdemarches/mesdemarches/faireunesimulation/lelogement#/preparation"
 										linkLabel="Tester mon éligibilité pour les aides au logement de la CAF"
 										title="Vous dépendez du régime général ? Demandez vos aides à la CAF !"
+										titleAs={'h3'}
 									>
 										La CAF signifie Caisse d’Allocation Familiales. Il y en a
 										dans chaque département. Son rôle est de verser les aides
@@ -57,6 +58,7 @@ export default function AidesLogement() {
 										link="https://www.msa.fr/lfp/web/msa/logement/offre-msa"
 										linkLabel="Découvrir les aides au logement de la MSA"
 										title="Vous dépendez du régime agricole ? Demandez vos aides à la MSA !"
+										titleAs={'h3'}
 									>
 										La MSA signifie Mutualité Sociale Agricole, c’est le régime
 										de protection sociale obligatoire pour toute personne du