Ajout de la section disponibilité

src/views/candidature-conseiller/BoutonRadio.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function BoutonRadio({ children, id, nomGroupe }) {
+  return (
+    <div className="fr-fieldset__element">
+      <div className="fr-radio-group">
+        <input type="radio" id={id} name={nomGroupe} required />
+        <label className="fr-label" htmlFor={id}>
+          {children}
+        </label>
+      </div>
+    </div>
+  );
+}
+
+BoutonRadio.propTypes = {
+  children: PropTypes.node,
+  id: PropTypes.string,
+  nomGroupe: PropTypes.string,
+};

src/views/candidature-conseiller/CandidatureConseiller.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Sommaire from './Sommaire';
 import InformationsDeContact from './InformationsDeContact';
 import SituationEtExperience from './SituationEtExperience';
+import Disponibilite from './Disponibilite';
 import './CandidatureConseiller.css';
 
 export default function CandidatureConseiller() {
@@ -16,6 +17,7 @@ export default function CandidatureConseiller() {
           <form aria-label="Candidature conseiller">
             <InformationsDeContact />
             <SituationEtExperience />
+            <Disponibilite />
             <button className="fr-btn" type="submit">
               Envoyer votre candidature
             </button>

src/views/candidature-conseiller/CandidatureConseiller.test.jsx

@@ -30,7 +30,7 @@ describe('candidature conseiller', () => {
       expect(votreDisponibilite).toHaveAttribute('href', '#votreDisponibilite');
 
       const votreMotivation = within(menuItems[3]).getByRole('link', { name: 'Votre motivation' });
-      expect(votreMotivation).toHaveAttribute('href', '#votreDisponibilite');
+      expect(votreMotivation).toHaveAttribute('href', '#votreMotivation');
     });
   });
 
@@ -112,4 +112,29 @@ describe('candidature conseiller', () => {
     expect(non).toBeRequired();
     expect(non).toHaveAttribute('name', 'experienceProfessionnelle');
   });
+
+  it('quand j’affiche le formulaire alors l’étape "Votre disponibilité" est affiché', () => {
+    // WHEN
+    render(<CandidatureConseiller />);
+
+    // THEN
+    const formulaire = screen.getByRole('form', { name: 'Candidature conseiller' });
+    const votreDisponibilite = within(formulaire).getByRole('group', { name: 'Votre disponibilité' });
+    expect(votreDisponibilite).toHaveAttribute('id', 'votreDisponibilite');
+
+    const champsObligatoires = within(votreDisponibilite).getByText(textMatcher('Les champs avec * sont obligatoires.'), { selector: 'p' });
+    expect(champsObligatoires).toBeInTheDocument();
+
+    const questionDisponibilite = within(votreDisponibilite).getByText(
+      textMatcher('À quel moment êtes-vous prêt(e) à démarrer votre mission et la formation de conseiller numérique ? *'),
+      { selector: 'p' }
+    );
+    expect(questionDisponibilite).toBeInTheDocument();
+
+    const accompagnement = within(votreDisponibilite).getByText(
+      textMatcher('Accompagnement de personnes vers l’autonomie dans leurs usages de technologies, services et médias numériques.'),
+      { selector: 'p' }
+    );
+    expect(accompagnement).toBeInTheDocument();
+  });
 });

src/views/candidature-conseiller/Disponibilite.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default function Disponibilite() {
+  return (
+    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="votreDisponibilite">
+      <legend className="fr-h5">Votre disponibilité</legend>
+      <p className="fr-text--sm fr-hint-text">Les champs avec <span className="cc-obligatoire">*</span> sont obligatoires.</p>
+      <hr />
+      <p className="fr-mb-3w cc-bold">
+        À quel moment êtes-vous prêt(e) à démarrer votre mission et la formation de conseiller numérique ? <span className="cc-obligatoire">*</span>
+      </p>
+      <p className="fr-text--sm fr-hint-text">
+        Accompagnement de personnes vers l’autonomie dans leurs usages de technologies, services et médias numériques.
+      </p>
+    </fieldset>
+  );
+}

src/views/candidature-conseiller/SituationEtExperience.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Checkbox from './Checkbox';
+import BoutonRadio from './BoutonRadio';
 
 export default function SituationEtExperience() {
   return (
@@ -24,25 +25,15 @@ export default function SituationEtExperience() {
       </Checkbox>
       <hr />
       <p className="fr-mb-3w cc-bold">
-      Avez-vous une expérience professionnelle de médiation numérique ? <span className="cc-obligatoire">*</span>
+        Avez-vous une expérience professionnelle de médiation numérique ? <span className="cc-obligatoire">*</span>
       </p>
       <p className="fr-text--sm fr-hint-text">Accompagnement de personnes vers l’autonomie dans leurs usages de technologies, services et médias numériques.</p>
-      <div className="fr-fieldset__element">
-        <div className="fr-radio-group">
-          <input type="radio" id="oui" name="experienceProfessionnelle" required />
-          <label className="fr-label" htmlFor="oui">
-            Oui
-          </label>
-        </div>
-      </div>
-      <div className="fr-fieldset__element">
-        <div className="fr-radio-group">
-          <input type="radio" id="non" name="experienceProfessionnelle" required />
-          <label className="fr-label" htmlFor="non">
-            Non
-          </label>
-        </div>
-      </div>
+      <BoutonRadio id="oui" nomGroupe="experienceProfessionnelle">
+        Oui
+      </BoutonRadio>
+      <BoutonRadio id="non" nomGroupe="experienceProfessionnelle">
+        Non
+      </BoutonRadio>
     </fieldset>
   );
 }

src/views/candidature-conseiller/Sommaire.jsx

@@ -1,30 +1,36 @@
 import React from 'react';
 
 export default function Sommaire() {
+  const partiesSommaire = [
+    {
+      ancre: '#informationsDeContact',
+      libelle: 'Vos informations de contact'
+    },
+    {
+      ancre: '#situtationEtExperience',
+      libelle: 'Votre situation et expérience'
+    },
+    {
+      ancre: '#votreDisponibilite',
+      libelle: 'Votre disponibilité'
+    },
+    {
+      ancre: '#votreMotivation',
+      libelle: 'Votre motivation'
+    },
+  ];
+
   return (
     <nav aria-label="Sommaire" className="fr-sidemenu fr-mt-15w">
       <ol className="fr-sidemenu__list">
-        <li className="fr-sidemenu__item fr-sidemenu__item--active">
-          <a href="#informationsDeContact" className="fr-sidemenu__link">
-            Vos informations de contact
-          </a>
-        </li>
-        <li className="fr-sidemenu__item fr-sidemenu__item--active">
-          <a href="#situtationEtExperience" className="fr-sidemenu__link">
-            Votre situation et expérience
-          </a>
-        </li>
-        <li className="fr-sidemenu__item fr-sidemenu__item--active">
-          <a href="#votreDisponibilite" className="fr-sidemenu__link">
-            Votre disponibilité
-          </a>
-        </li>
-        <li className="fr-sidemenu__item fr-sidemenu__item--active">
-          <a href="#votreDisponibilite" className="fr-sidemenu__link">
-            Votre motivation
-          </a>
-        </li>
+        {partiesSommaire.map(({ ancre, libelle }, index) => (
+          <li className="fr-sidemenu__item fr-sidemenu__item--active" key={index}>
+            <a href={ancre} className="fr-sidemenu__link">
+              {libelle}
+            </a>
+          </li>
+        ))}
       </ol>
-    </nav>
+    </nav >
   );
 }