feat: Bannière campagne handicap (#3443)

* feat: Ajoute la bannière de campagne pour le handicap * refactor: Extrait les variables pour les couleurs
DNUM-SocialGouv · Nov 15, 2024 · b6f1bb4 · b6f1bb4
1 parent 7b40d50
commit b6f1bb4
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 0 deletions.
diff --git a/.env.scalingo b/.env.scalingo
@@ -36,6 +36,7 @@ NEXT_PUBLIC_API_ADRESSE_MINIMUM_QUERY_LENGTH=${NEXT_PUBLIC_API_ADRESSE_MINIMUM_Q
 NEXT_PUBLIC_CAMPAGNE_ADFORM_FEATURE=${NEXT_PUBLIC_CAMPAGNE_ADFORM_FEATURE}
 NEXT_PUBLIC_CAMPAGNE_COM_EN_COURS_FEATURE=${NEXT_PUBLIC_CAMPAGNE_COM_EN_COURS_FEATURE}
 NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE=${NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE}
+NEXT_PUBLIC_CAMPAGNE_HANDICAP=${NEXT_PUBLIC_CAMPAGNE_HANDICAP}
 NEXT_PUBLIC_ENQUETE_SATISFACTION_FEATURE=${NEXT_PUBLIC_ENQUETE_SATISFACTION_FEATURE}
 NEXT_PUBLIC_ENQUETE_SATISFACTION_URL='${NEXT_PUBLIC_ENQUETE_SATISFACTION_URL}'
 NEXT_PUBLIC_FORMATION_LBA_FEATURE=${NEXT_PUBLIC_FORMATION_LBA_FEATURE}

diff --git a/public/images/campagne-handicap.webp b/public/images/campagne-handicap.webp
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
@@ -62,6 +62,19 @@ $color-background-world-skills: #2E1651;
       padding-bottom: 1.25rem;
     }
   }
+
+  &.handicap {
+    // FIXME (GAFI 15-11-2024):
+    background-color: utilities.$color-primary-campagne-handicap;
+    color: utilities.$color-text-on-primary-campagne-handicap;
+
+    & a {
+      color: utilities.$color-text-on-secondary-campagne-handicap;
+      background-color: utilities.$color-secondary-campagne-handicap;
+      border: none;
+      outline-color: utilities.$color-secondary-campagne-handicap;
+    }
+  }
 }
 
 .card {

diff --git a/src/pages/index.page.test.tsx b/src/pages/index.page.test.tsx
@@ -244,6 +244,58 @@ describe('Page d’accueil', () => {
 				expect(voirPlusButton).toHaveAttribute('href', '/faq/apprentissage-employeurs-apprentis');
 			});
 		});
+
+		describe('Semaine du handicap', () => {
+			describe('feature flip', () => {
+				it('affiche la bannière si le feature flip est activé', () => {
+					// Given
+					process.env.NEXT_PUBLIC_CAMPAGNE_HANDICAP = '1';
+
+					// When
+					render(
+						<DependenciesProvider analyticsService={analyticsService}>
+							<Accueil actualites={anActualiteList()} />
+						</DependenciesProvider>,
+					);
+
+					// Then
+					expect(screen.getByText('Semaine européenne pour l’emploi des personnes handicapées')).toBeVisible();
+				});
+				it('n’affiche pas la bannière si le feature flip est désactivé', () => {
+					// Given
+					process.env.NEXT_PUBLIC_CAMPAGNE_HANDICAP = '0';
+
+					// When
+					render(
+						<DependenciesProvider analyticsService={analyticsService}>
+							<Accueil actualites={anActualiteList()} />
+						</DependenciesProvider>,
+					);
+
+					// Then
+					expect(screen.queryByText('Semaine européenne pour l’emploi des personnes handicapées')).not.toBeInTheDocument();
+				});
+			});
+
+			it('la bannière contient les wording de la campagne apprentissage', () => {
+				// Given
+				process.env.NEXT_PUBLIC_CAMPAGNE_HANDICAP = '1';
+
+				// When
+				render(
+					<DependenciesProvider analyticsService={analyticsService}>
+						<Accueil actualites={anActualiteList()} />
+					</DependenciesProvider>,
+				);
+
+				// Then
+				const heading = screen.getByRole('heading', { level: 2, name: 'Semaine européenne pour l’emploi des personnes handicapées' });
+				expect(heading).toBeVisible();
+				const voirPlusButton = screen.getByRole('link', { name: 'Lire l’article' });
+				expect(voirPlusButton).toBeVisible();
+				expect(voirPlusButton).toHaveAttribute('href', '/articles/semaine-emploi-handicap');
+			});
+		});
 	});
 
 	describe('Sections', () => {

diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx
@@ -48,6 +48,8 @@ export default function Accueil(accueilProps: AccueilPageProps) {
 
 	const isCampagneApprentissageVisible = process.env.NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE === '1';
 
+	const isCampagneHandicapVisible = process.env.NEXT_PUBLIC_CAMPAGNE_HANDICAP === '1';
+
 	const actualitesCardListContent: CardContent[] = accueilProps.actualites.map((carte: Actualite): CardContent => {
 		return {
 			children: <p>{carte.extraitContenu}</p>,
@@ -349,6 +351,22 @@ export default function Accueil(accueilProps: AccueilPageProps) {
 					)
 				}
 
+				{isCampagneHandicapVisible && (
+					<HeroWithIllustration image="/images/campagne-handicap.webp" className={classNames(styles.hero, styles.handicap)}>
+						<h2>
+							<HeroPrimaryText className={styles.heroTitle}>
+								Semaine européenne pour l’emploi des personnes handicapées
+							</HeroPrimaryText>
+						</h2>
+						<HeroSecondaryText>
+							Du 18 au 24 novembre, <b>1jeune1solution</b> se mobilise, et vous propose un article par jour pour sensibiliser au handicap et promouvoir l’inclusion professionnelle.						</HeroSecondaryText>
+						<Link href="/articles/semaine-emploi-handicap" appearance={'asSecondaryButton'} className={styles.heroButton}>
+							Lire l’article
+							<Link.Icon />
+						</Link>
+					</HeroWithIllustration>
+				)}
+
 				{!isOldEspaceJeuneActif && actualitesCardListContent.length > 0
 					&& (
 						<section className={styles.section}>

diff --git a/src/styles/theme/_variables.scss b/src/styles/theme/_variables.scss
@@ -95,6 +95,14 @@ $color-groupe-3-blue: #407BFF;
  * ***************/
 $color-title-apprentissage-2024: #E8CF31;
 
+/* ***************
+ * Complementary colors - Campagne Semaine du handicap
+ * ***************/
+$color-primary-campagne-handicap: #FCC84F;
+$color-secondary-campagne-handicap: #244352;
+$color-text-on-primary-campagne-handicap: $color-secondary-campagne-handicap;
+$color-text-on-secondary-campagne-handicap: #FFFFFF;
+
 /* ***************
  * Shadows
  * ***************/