feat(accompagnement): liste des partenaires

src/client/components/features/Accompagnement/Rechercher/RechercherAccompagnement.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @jest-environment jsdom
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import React from 'react';
 
 import {
@@ -134,5 +134,30 @@ describe('RechercherAccompagnement', () => {
         expect(rechercheÉtablissementAccompagnementNombreRésultats).toBeInTheDocument();
       });
     });
+
+    it('affiche les informations des cards', () => {
+      // Given
+      mockUseRouter({});
+      const établissementAccompagnementService = anÉtablissementAccompagnementService();
+      const localisationService = aLocalisationService();
+      render(
+        <DependenciesProvider
+          établissementAccompagnementService={établissementAccompagnementService}
+          localisationService={localisationService}
+        >
+          <RechercherAccompagnement />
+        </DependenciesProvider>,
+      );
+
+      // When
+      const listeDesPartenaires = screen.getByRole('list', { name : 'Liste des partenaires' });
+      const partnerListItemList = within(listeDesPartenaires).getAllByRole('listitem');
+      // Then
+      expect(listeDesPartenaires).toBeInTheDocument();
+      expect(partnerListItemList).toHaveLength(3);
+      partnerListItemList.forEach((partnerListItem) => {
+        expect(within(partnerListItem).getByRole('link')).toBeInTheDocument();
+      });
+    });
   });
 });

src/client/components/features/Accompagnement/Rechercher/RechercherAccompagnement.tsx

@@ -3,6 +3,10 @@ import { stringify } from 'querystring';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { FormulaireRechercheAccompagnement } from '~/client/components/features/Accompagnement/FormulaireRecherche/FormulaireRechercheAccompagnement';
+import { PartnerCardList } from '~/client/components/features/Partner/Card/PartnerCard';
+import { InfoJeunesCard } from '~/client/components/features/Partner/InfoJeunesCard';
+import { MissionsLocalesCard } from '~/client/components/features/Partner/MissionsLocalesCard';
+import { PoleEmploiCard } from '~/client/components/features/Partner/PoleEmploiCard';
 import {
   LienSolution,
   RechercherSolutionLayout,
@@ -79,6 +83,11 @@ export function RechercherAccompagnement() {
           mapToLienSolution={mapAccompagnementToLienSolution}
           ariaLabelListeSolution={'Établissements d‘accompagnement'}
         />
+        {PartnerCardList([
+          MissionsLocalesCard().props,
+          InfoJeunesCard().props,
+          PoleEmploiCard().props,
+        ])}
       </main>
     </>
   );

src/client/components/features/Partner/Card/PartnerCard.module.scss

@@ -29,28 +29,17 @@
 
 .card {
   display: block;
-  background: $color-surface;
-  border-radius: 20px;
-  box-shadow: 10px 10px 20px rgba(22, 22, 22, 0.05);
 
   &Logo {
     padding: 1.5rem;
-    border-bottom: 1px solid $color-separator;
-  }
-
-  &LogoWrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &LogoWrapperPaysage {
-    height: 72px;
-  }
 
-  &LogoWrapperPortrait {
-    height: 72px;
+    &Partner {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 4.5rem;
+    }
   }
 
   &Action {
@@ -81,7 +70,6 @@
   @include media(large) {
     display: flex;
     align-items: center;
-    border: 1px solid $color-separator;
 
     &Logo {
       flex-shrink: 0;

src/client/components/features/Partner/Card/PartnerCard.tsx

@@ -25,7 +25,7 @@ export function PartnerCardList(list: PartnerCardProps[], title?: string){
   return(
     <div className={styles.partnerListWrapper}>
       {title && <h2 className={styles.partnerListTitle}>{title}</h2>}
-      <ul className={styles.partnerList}>
+      <ul className={styles.partnerList} aria-label="Liste des partenaires">
         {list.map((partnerCardProps, index) => {
           return(
             <li key={index}>
@@ -51,39 +51,21 @@ export function PartnerCard({ description, className, headline, headlineColor, l
 
   return (
     <Link href={link} className={classNames(styles.card, className, 'underline-none')}>
-      {isLargeScreen ?
-        <CardComponent layout={'horizontal'} className={styles.card}>
-          <div className={styles.cardLogo}>
-            <CardComponent.Image className={classNames(styles.cardLogoWrapper, styles.cardLogoWrapperPaysage)} src={logo}/>
-          </div>
-          <CardComponent.Content className={styles.cardBody}>
-            <CardComponent.Title className={styles.cardBody__Title} titleAs={'h2'}>{title}</CardComponent.Title>
-            <p>
-              {headline && <strong style={hasHeadlineColor} className={styles.cardHeadline}>{headline}</strong>}
-              {description}
-            </p>
-            <span className={styles.cardAction}>
-              <CardComponent.FakeLink appearance={'tertiary'} label={linkLabel} icon={icon}/>
-            </span>
-          </CardComponent.Content>
-        </CardComponent>
-        :
-        <CardComponent layout={'vertical'} className={styles.card}>
-          <div className={styles.cardLogo}>
-            <CardComponent.Image className={classNames(styles.cardLogoWrapper, styles.cardLogoWrapperPortrait)} src={logo} />
-          </div>
-          <CardComponent.Content className={styles.cardBody}>
-            <CardComponent.Title className={styles.cardBody__Title} titleAs={'h2'}>{title}</CardComponent.Title>
-            <p>
-              {headline && <strong style={hasHeadlineColor} className={styles.cardHeadline}>{headline}</strong>}
-              {description}
-            </p>
-            <span className={styles.cardAction}>
-              <CardComponent.FakeLink appearance={'tertiary'} label={linkLabel} icon={icon}/>
-            </span>
-          </CardComponent.Content>
-        </CardComponent>
-      }
+      <CardComponent layout={ isLargeScreen ? 'horizontal' : 'vertical' }>
+        <div className={styles.cardLogo}>
+          <CardComponent.Image className={styles.cardLogoPartner} src={logo}/>
+        </div>
+        <CardComponent.Content className={styles.cardBody}>
+          <div className={styles.cardBody__Title}>{title}</div>
+          <p>
+            {headline && <strong style={hasHeadlineColor} className={styles.cardHeadline}>{headline}</strong>}
+            {description}
+          </p>
+          <span className={styles.cardAction}>
+            <CardComponent.FakeLink appearance={'tertiary'} label={linkLabel} icon={icon}/>
+          </span>
+        </CardComponent.Content>
+      </CardComponent>
     </Link>
   );
 }

src/client/components/features/Partner/InfoJeunesCard.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { PartnerCard } from './Card/PartnerCard';
+
+export function InfoJeunesCard() {
+  return (
+    <PartnerCard
+      title="Info Jeunes, le réseau d’accueil et d’information des jeunes en France au service d’une ambition : explorer les possibles !"
+      description="La structure Info Jeunes (SIJ) accueille tous les jeunes (de 12 à 30 ans) anonymement et gratuitement.
On vous aide à trouver des informations et on vous accompagne sur des sujets comme : scolarité, formation, emploi, logement, loisirs, départ vers l'étranger, aides pour un projet..."
+      logo="/images/logos/info-jeunes.svg"
+      link="/articles/info-jeunes"
+      linkLabel="En savoir plus"
+    />
+  );
+}

src/client/components/features/Partner/MissionsLocalesCard.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { PartnerCard } from './Card/PartnerCard';
+
+export function MissionsLocalesCard() {
+  return (
+    <PartnerCard
+      title="Les missions locales proposent un suivi personnalisé pour tous les jeunes jusqu’à 25 ans"
+      description="Les missions locales sont présentes sur l’ensemble du territoire national et permettent à tous les jeunes de 16 à 25 ans de surmonter les difficultés qui font obstacle à leur insertion professionnelle et sociale. Avec un accompagnement global pour les jeunes, elles traitent l’ensemble des difficultés d’insertion: emploi, formation, orientation, mobilité, logement, santé, accès à la culture et aux loisirs"
+      logo="/images/logos/union-mission-locale.svg"
+      link="/articles/mission-locale"
+      linkLabel="En savoir plus"
+    />
+  );
+}

src/client/components/features/Partner/OnisepPartnerCard.tsx

@@ -11,7 +11,6 @@ export function OnisepPartnerCard() {
       linkLabel="Je découvre les métiers"
       link="/decouvrir-les-metiers"
       logo="/images/logos/onisep.svg"
-      logoRatio='paysage'
       title="Besoin d'informations sur les métiers ?"
     />
   );

src/client/components/features/Partner/PoleEmploiCard.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { PartnerCard } from './Card/PartnerCard';
+
+export function PoleEmploiCard() {
+  return (
+    <PartnerCard
+      title="Pôle Emploi propose un accompagnement intensif pour les jeunes de 16 à 30 ans"
+      description="Avec son dispositif d’accompagnement intensif des jeunes (AIJ), Pôle emploi propose à tous les jeunes demandeurs d’emploi de 16 à 30 ans, un accompagnement personnalisé intensif d’une durée de 3 à 6 mois pour les aider à trouver ou retrouver plus rapidement un emploi. "
+      logo="/images/logos/pole-emploi.svg"
+      link="/articles/pole-emploi"
+      linkLabel="En savoir plus"
+    />
+  );
+}

src/pages/accompagnement/Accompagnement.module.scss

@@ -1,9 +1,5 @@
 @import "@styles/utilities";
 
-.accompagnementContainer {
-  padding: 2rem;
-}
-
 .accompagnementHero {
   > div:first-child {
     @extend %text-xLarge;
@@ -14,125 +10,3 @@
     @extend %text-medium;
   }
 }
-
-.unionNationaleDesMissionsLocales {
-  display: flex;
-  flex-direction: column;
-}
-
-.infosJeunes {
-  &Wrapper {
-    border-top: 1px solid #929292;
-    border-bottom: 1px solid #929292;
-  }
-  display: flex;
-  flex-direction: column;
-  background-color: $color-background-white-lilac;
-}
-
-.poleEmploi {
-  display: flex;
-  flex-direction: column;
-}
-
-.petiteDescriptionStructure {
-  margin-top: 1.5rem;
-  @extend %text-large;
-
-  span:first-child {
-    color: $color-primary;
-    @extend %bold;
-  }
-
-  span:last-child {
-    color: $color-secondary;
-  }
-}
-
-.imageContainer {
-  margin: auto;
-}
-
-.missionLocaleImageContainer {
-  width: 224px;
-  height: 88px;
-  position: relative;
-}
-
-.infoJeunesImageContainer {
-  width: 224px;
-  height: 104px;
-  position: relative;
-}
-
-.poleEmploiImageContainer {
-  width: 180px;
-  height: 150px;
-  position: relative;
-}
-
-.customSeeMoreClosed {
-  width: 100%;
-  text-align: left;
-  padding-left: 0;
-}
-
-.buttonEnSavoirPlus {
-  background-color: $color-background-white-lilac;
-  color: $color-primary;
-  border: 1px solid $color-primary;
-  padding: 1rem 0.8rem;
-}
-
-.missionLocaleButtonContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-top: 3rem;
-}
-
-@include media(large) {
-  .accompagnementContainer {
-    padding: 4rem 1rem;
-  }
-
-  .unionNationaleDesMissionsLocales {
-    flex-direction: row;
-  }
-
-  .infosJeunes {
-    flex-direction: row;
-  }
-
-  .poleEmploi {
-    flex-direction: row;
-  }
-
-  .imageContainer {
-    margin: inherit;
-  }
-
-  .logoContainer {
-    width: 30%;
-    margin-right: 3.5rem;
-  }
-
-  .longueDescriptionContainer {
-    width: 65%;
-
-    p {
-      line-height: 1.5rem;
-      margin-bottom: 3rem;
-    }
-  }
-
-  .missionLocaleButtonContainer {
-    flex-direction: row;
-    align-items: flex-end;
-  }
-}
-
-.button {
-  display: inline-block;
-  margin-top: 2rem;
-}