(PC-33502)[PRO] style: Adjust collective offer creation form styles

pass-culture · Dec 31, 2024 · fde68bc · fde68bc
1 parent 4021a2e
commit fde68bc
Show file tree

Hide file tree

Showing 26 changed files with 274 additions and 178 deletions.
diff --git a/pro/cypress/e2e/createCollectiveOffer.cy.ts b/pro/cypress/e2e/createCollectiveOffer.cy.ts
@@ -55,17 +55,19 @@ describe('Create collective offers', () => {
 
     cy.findByLabelText('Lieu *').select(venueName)
 
-    cy.findByLabelText('Domaine artistique et culturel *').click()
+    cy.findByLabelText('Ajoutez un ou plusieurs domaines artistiques *').click()
 
     cy.get('#list-domains').find('#option-display-2').click()
-    cy.findByText('Type d’offre').click()
+    cy.findByText('Quel est le type de votre offre ?').click()
 
-    cy.findByLabelText('Format *').click()
+    cy.findByLabelText('Ajoutez un ou plusieurs formats *').click()
     cy.get('#list-formats').find('#option-display-Concert').click()
-    cy.findByText('Type d’offre').click()
+    cy.findByText('Quel est le type de votre offre ?').click()
 
     cy.findByLabelText('Titre de l’offre *').type(newOfferName)
-    cy.findByLabelText('Description *').type('Bookable draft offer')
+    cy.findByLabelText(
+      'Décrivez ici votre projet et son interêt pédagogique *'
+    ).type('Bookable draft offer')
     cy.findByText('Collège - 6e').click()
     cy.findByLabelText('Email *').type('[email protected]')
     cy.findByLabelText('Email auquel envoyer les notifications *').type(
@@ -89,9 +91,9 @@ describe('Create collective offers', () => {
     cy.get('#list-institution')
       .findByText(/COLLEGE 123/)
       .click()
-    cy.findByText('Établissement scolaire et enseignant').click()
+    cy.findByText("Renseignez l'établissement scolaire et l’enseignant").click()
 
-    cy.findByText('Établissement scolaire et enseignant').click()
+    cy.findByText("Renseignez l'établissement scolaire et l’enseignant").click()
 
     cy.findByText('Enregistrer et continuer').click()
     cy.findByText('Enregistrer et continuer').click()
@@ -111,9 +113,36 @@ describe('Create collective offers', () => {
     cy.wait('@collectiveOffers')
 
     const expectedResults = [
-      ['', '', '', 'Titre', 'Date de l’évènement', 'Lieu', 'Établissement', 'Statut'],
-      ['', '', '', newOfferName, '10/05/202518h30', venueName, 'COLLEGE 123', 'brouillon'],
-      ['', '', '', offerDraft.name, 'Toute l’année scolaire', offerDraft.venueName, 'DE LA TOUR', 'brouillon'],
+      [
+        '',
+        '',
+        '',
+        'Titre',
+        'Date de l’évènement',
+        'Lieu',
+        'Établissement',
+        'Statut',
+      ],
+      [
+        '',
+        '',
+        '',
+        newOfferName,
+        '10/05/202518h30',
+        venueName,
+        'COLLEGE 123',
+        'brouillon',
+      ],
+      [
+        '',
+        '',
+        '',
+        offerDraft.name,
+        'Toute l’année scolaire',
+        offerDraft.venueName,
+        'DE LA TOUR',
+        'brouillon',
+      ],
     ]
 
     expectOffersOrBookingsAreFound(expectedResults)
@@ -138,8 +167,26 @@ describe('Create collective offers', () => {
     cy.findByText('Rechercher').click()
 
     const expectedNewResults = [
-      ['', '', '', 'Titre', 'Date de l’évènement', 'Lieu', 'Établissement', 'Statut'],
-      ['', '', '', newOfferName, '10/05/202518h30', venueName, 'COLLEGE 123', 'publiée'],
+      [
+        '',
+        '',
+        '',
+        'Titre',
+        'Date de l’évènement',
+        'Lieu',
+        'Établissement',
+        'Statut',
+      ],
+      [
+        '',
+        '',
+        '',
+        newOfferName,
+        '10/05/202518h30',
+        venueName,
+        'COLLEGE 123',
+        'publiée',
+      ],
     ]
 
     expectOffersOrBookingsAreFound(expectedNewResults)

diff --git a/...eOffer/CollectiveOffer/CollectiveOfferCreation/__specs__/CollectiveOfferCreation.spec.tsx b/...eOffer/CollectiveOffer/CollectiveOfferCreation/__specs__/CollectiveOfferCreation.spec.tsx
@@ -66,7 +66,7 @@ describe('CollectiveOfferCreation', () => {
     ).toBeInTheDocument()
     expect(
       screen.getByRole('heading', {
-        name: 'Qui propose l’offre ? *',
+        name: 'Qui propose l’offre ?',
       })
     ).toBeInTheDocument()
   })

diff --git a/.../components/OfferEducational/OfferEducationalForm/FormAccessibility/FormAccessibility.tsx b/.../components/OfferEducational/OfferEducationalForm/FormAccessibility/FormAccessibility.tsx
@@ -16,7 +16,7 @@ export const FormAccessibility = ({
   const { setFieldValue } = useFormikContext<OfferEducationalFormValues>()
 
   return (
-    <FormLayout.Section title="À quel type de handicap votre offre est-elle accessible ? *">
+    <FormLayout.Section title="À quel type de handicap votre offre est-elle accessible ?">
       <FormLayout.Row>
         <CheckboxGroup
           group={useAccessibilityOptions(setFieldValue)}

diff --git a/...lectiveOffer/components/OfferEducational/OfferEducationalForm/FormContact/FormContact.tsx b/...lectiveOffer/components/OfferEducational/OfferEducationalForm/FormContact/FormContact.tsx
@@ -12,9 +12,7 @@ interface FormContactProps {
 
 export const FormContact = ({ disableForm }: FormContactProps): JSX.Element => {
   return (
-    <FormLayout.Section
-      title="Comment les enseignants peuvent-ils vous contacter ? *"
-    >
+    <FormLayout.Section title="Comment les enseignants peuvent-ils vous contacter ?">
       <FormLayout.Row className={styles['phone-number-row']}>
         <PhoneNumberInput
           name="phone"

diff --git a/...ponents/OfferEducational/OfferEducationalForm/FormContactTemplate/FormContactTemplate.tsx b/...ponents/OfferEducational/OfferEducationalForm/FormContactTemplate/FormContactTemplate.tsx
@@ -25,7 +25,7 @@ export const FormContactTemplate = ({
   const ariaDescribedBy = 'error-contactOptions'
 
   return (
-    <FormLayout.Section title="Comment les enseignants peuvent-ils vous contacter ? *">
+    <FormLayout.Section title="Comment les enseignants peuvent-ils vous contacter ?">
       <FieldSetLayout
         legend="Choisissez le ou les moyens par lesquels vous souhaitez être contacté par les enseignants au sujet de cette offre :"
         name="contactOptions"

diff --git a/...iveOffer/components/OfferEducational/OfferEducationalForm/FormDates/FormDates.module.scss b/...iveOffer/components/OfferEducational/OfferEducationalForm/FormDates/FormDates.module.scss
@@ -1,10 +1,21 @@
 @use "styles/mixins/_rem.scss" as rem;
+@use "styles/mixins/fonts-design-system.scss" as fonts-design-system;
+
+.container {
+  margin: rem.torem(48px) 0;
+}
 
 .banner {
   margin: rem.torem(16px) 0;
 }
 
-.container {
+.subtitle {
+  @include fonts-design-system.title2;
+
+  margin-bottom: rem.torem(16px);
+}
+
+.row-container {
   display: flex;
   gap: rem.torem(8px);
   margin-bottom: rem.torem(8px);

diff --git a/.../CollectiveOffer/components/OfferEducational/OfferEducationalForm/FormDates/FormDates.tsx b/.../CollectiveOffer/components/OfferEducational/OfferEducationalForm/FormDates/FormDates.tsx
@@ -1,5 +1,5 @@
 import { useFormikContext } from 'formik'
-import { ChangeEvent } from 'react'
+import { ChangeEvent, useId } from 'react'
 
 import { OfferEducationalFormValues } from 'commons/core/OfferEducational/types'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
@@ -28,6 +28,9 @@ export const FormDates = ({
   const areNewStatusesEnabled = useActiveFeature(
     'ENABLE_COLLECTIVE_NEW_STATUSES'
   )
+
+  const subtitleId = useId()
+
   const minBeginningDate = dateCreated ? new Date(dateCreated) : new Date()
   const minDateForEndingDate = isDateValid(values.beginningDate)
     ? new Date(values.beginningDate)
@@ -45,7 +48,10 @@ export const FormDates = ({
     : 'désactivée'
 
   return (
-    <FormLayout.Section title="Quand votre offre peut-elle avoir lieu ? *">
+    <div className={styles['container']}>
+      <h2 id={subtitleId} className={styles['subtitle']}>
+        Quand votre offre peut-elle avoir lieu ? *
+      </h2>
       <RadioGroup
         disabled={disableForm}
         group={[
@@ -54,12 +60,12 @@ export const FormDates = ({
             value: 'permanent',
           },
           {
-            label: 'Pendant une période précise uniquement',
+            label: 'À une date ou une période précise',
             value: 'specific_dates',
           },
         ]}
         variant={RadioVariant.BOX}
-        legend="Quand votre offre peut-elle avoir lieu ?"
+        describedBy={subtitleId}
         name="datesType"
       />
       {values.datesType === 'specific_dates' && (
@@ -68,7 +74,7 @@ export const FormDates = ({
             {`Votre offre sera ${deactivateWording} automatiquement à l’issue des dates
             précisées ci-dessous.`}
           </Callout>
-          <FormLayout.Row className={styles.container}>
+          <FormLayout.Row className={styles['row-container']}>
             <DatePicker
               name="beginningDate"
               label="Date de début"
@@ -94,6 +100,6 @@ export const FormDates = ({
           </FormLayout.Row>
         </>
       )}
-    </FormLayout.Section>
+    </div>
   )
 }
diff --git a/...r/components/OfferEducational/OfferEducationalForm/FormDates/__specs__/FormDates.spec.tsx b/...r/components/OfferEducational/OfferEducationalForm/FormDates/__specs__/FormDates.spec.tsx
@@ -132,7 +132,7 @@ describe('FormDates', () => {
 
     expect(
       screen.getByRole('radio', {
-        name: 'Pendant une période précise uniquement',
+        name: 'À une date ou une période précise',
       })
     ).not.toBeChecked()
   })
@@ -156,7 +156,7 @@ describe('FormDates', () => {
     })
 
     const screenSpecific = screen.getByRole('radio', {
-      name: 'Pendant une période précise uniquement',
+      name: 'À une date ou une période précise',
     })
 
     await userEvent.click(radioPermanent)

diff --git a/.../components/OfferEducational/OfferEducationalForm/FormNotifications/FormNotifications.tsx b/.../components/OfferEducational/OfferEducationalForm/FormNotifications/FormNotifications.tsx
@@ -19,7 +19,7 @@ export const FormNotifications = ({
   const { values } = useFormikContext<OfferEducationalFormValues>()
 
   return (
-    <FormLayout.Section title="À quel email le pass Culture peut-il vous envoyer des notifications ? *">
+    <FormLayout.Section title="À quel email le pass Culture peut-il vous envoyer des notifications ?">
       <FieldArray name="notificationEmails">
         {({ remove, push }) => (
           <>