Merge pull request #598 from vincentlaine/feat/newsletterCallout

feat: ✨ Ajout de la variante "Mise en avant" du composant DsfrNewsLetter

Author: laruiss

src/components/DsfrFollow/DsfrFollow.stories.ts

@@ -15,7 +15,7 @@ export default {
     },
     newsletterData: {
       control: 'object',
-      description: 'Objet contenant en propriété les props attendues par DsfrSocialNetworks',
+      description: 'Objet contenant en propriété les props attendues par DsfrNewsLetter',
     },
   },
 }
@@ -67,5 +67,59 @@ Suivre.args = {
     hintText: 'Mise en garde concernant l’abonnement à la lettre d’information',
     buttonText: 'S’abonner',
     buttonTitle: 'Titre du bouton (valeur de l’attribut `title` de la balise `button`)',
+    buttonAction: () => undefined,
+    onlyCallout: false,
+  },
+}
+
+export const SuivreMiseEnAvant = (args) => ({
+  components: { DsfrFollow },
+  data () {
+    return {
+      ...args,
+    }
+  },
+  template: `
+    <DsfrFollow
+      :networks="networks"
+      :newsletter-data="newsletterData"
+    />
+  `,
+
+})
+SuivreMiseEnAvant.args = {
+  networks: [
+    {
+      name: 'facebook',
+      href: 'https://www.facebook.com',
+    },
+    {
+      name: 'twitter',
+      href: 'https://www.twitter.com',
+    },
+    {
+      name: 'youtube',
+      href: 'https://www.youtube.com',
+    },
+    {
+      name: 'linkedin',
+      href: 'https://www.linkedin.com',
+    },
+    {
+      name: 'instagram',
+      href: 'https://www.instagram.com',
+    },
+  ],
+  newsletterData: {
+    title: 'Titre de la lettre d’informations',
+    description: 'Description de la lettre d’informations',
+    email: '',
+    labelEmail: '',
+    placeholder: '',
+    hintText: '',
+    buttonText: 'S’abonner',
+    buttonTitle: 'Titre du bouton (valeur de l’attribut `title` de la balise `button`)',
+    buttonAction: () => undefined,
+    onlyCallout: true,
   },
 }

src/components/DsfrFollow/DsfrNewsLetter.spec.ts

@@ -54,4 +54,58 @@ describe('DsfrNewsLetter', () => {
     expect(buttonTextEl).toHaveClass('fr-btn')
     expect(buttonTextEl).toHaveAttribute('title', buttonTitle)
   })
+
+  it('should mount DsfrNewsLetter only callout', () => {
+    // Given
+    const title = 'Abonnez-vous à notre lettre d’information'
+    const description = 'Lorem ipsum dolor sit amet'
+    const email = '[email protected]'
+    const labelEmail = 'Votre adresse électronique (ex. : [email protected])'
+    const placeholder = '[email protected]'
+    const hintText = 'En renseignant votre adresse électronique, vous acceptez de recevoir nos actualités par courriel...'
+    const buttonText = 'S’abonner'
+    const buttonTitle = 'S’abonner à notre lettre d’information'
+    const buttonAction = () => undefined
+    const onlyCallout = true
+
+    // When
+    const { getByText, queryByText, queryByDisplayValue, queryByPlaceholderText } = render(DsfrNewsLetter, {
+      global: {
+      },
+      props: {
+        title,
+        description,
+        email,
+        labelEmail,
+        placeholder,
+        hintText,
+        buttonText,
+        buttonTitle,
+        buttonAction,
+        onlyCallout,
+      },
+    })
+
+    const titleEl = getByText(title)
+    const descriptionEl = getByText(description)
+    const emailInputEl = queryByDisplayValue(email)
+    // eslint-disable-next-line no-undef
+    const labelEmailEl = queryByText(labelEmail)
+    const placeholderEl = queryByPlaceholderText(placeholder)
+    const hintTextEl = queryByText(hintText)
+    const buttonTextEl = getByText(buttonText)
+
+    // Then
+    expect(titleEl.tagName).toBe('H3')
+    expect(titleEl).toHaveClass('fr-follow__title')
+    expect(descriptionEl.tagName).toBe('P')
+    expect(descriptionEl).toHaveClass('fr-follow__desc')
+    expect(emailInputEl).toBeNull()
+    expect(labelEmailEl).toBeNull()
+    expect(placeholderEl).toBeNull()
+    expect(hintTextEl).toBeNull()
+    expect(buttonTextEl.tagName).toBe('BUTTON')
+    expect(buttonTextEl).toHaveClass('fr-btn')
+    expect(buttonTextEl).toHaveAttribute('title', buttonTitle)
+  })
 })

src/components/DsfrFollow/DsfrNewsLetter.stories.ts

@@ -40,6 +40,11 @@ export default {
       control: 'text',
       description: 'Contenu de l’attribut `title` du bouton d’abonnement',
     },
+    buttonAction: { action: 'clicked' },
+    onlyCallout: {
+      control: 'boolean',
+      description: 'Newsletter simplifiée avec seulement un bouton, le formulaire sera masqué',
+    },
   },
 }
 
@@ -141,3 +146,50 @@ NewsletterAvecErreur.args = {
   buttonText: 'S’abonner',
   buttonTitle: 'Titre du bouton (attribut `title`) de la balise `button`',
 }
+
+export const NewsletterMiseEnAvant = (args) => ({
+  components: {
+    DsfrNewsLetter,
+    DsfrFollow,
+  },
+
+  data () {
+    return {
+      ...args,
+    }
+  },
+
+  template: `
+  <DsfrFollow>
+    <div class="fr-col-12">
+      <DsfrNewsLetter
+        :title="title"
+        :description="description"
+        v-model:email="email"
+        :labelEmail="labelEmail"
+        :inputTitle="inputTitle"
+        :placeholder="placeholder"
+        :hintText="hintText"
+        :buttonText="buttonText"
+        :buttonTitle="buttonTitle"
+        :buttonAction="buttonAction"
+        :onlyCallout="onlyCallout"
+      />
+    </div>
+  </DsfrFollow>
+  `,
+
+})
+NewsletterMiseEnAvant.args = {
+  title: 'Titre de la lettre d’information',
+  description: 'Description de la lettre d’information',
+  email: '',
+  labelEmail: '',
+  inputTitle: '',
+  placeholder: '',
+  hintText: '',
+  buttonText: 'S’abonner',
+  buttonTitle: 'Titre du bouton (attribut `title`) de la balise `button`',
+  buttonAction: () => undefined,
+  onlyCallout: true,
+}

src/components/DsfrFollow/DsfrNewsLetter.vue

@@ -10,6 +10,8 @@ export type DsfrNewsLetterProps = {
   inputTitle?: string
   buttonText?: string
   buttonTitle?: string
+  buttonAction?: ($event: MouseEvent) => void
+  onlyCallout?: boolean
 }
 
 withDefaults(defineProps<DsfrNewsLetterProps>(), {
@@ -23,6 +25,8 @@ withDefaults(defineProps<DsfrNewsLetterProps>(), {
   hintText: '',
   buttonText: 'S’abonner',
   buttonTitle: 'S‘abonner à notre lettre d’information',
+  buttonAction: () => undefined,
+  onlyCallout: false,
 })
 
 const emit = defineEmits<{(e: 'update:email', payload: string): void}>()
@@ -41,7 +45,16 @@ const updateEmail = ($event: InputEvent) => emit('update:email', $event.target.v
         {{ description }}
       </p>
     </div>
-    <div>
+    <div v-if="onlyCallout">
+      <button
+        class="fr-btn"
+        :title="buttonTitle"
+        @click="buttonAction ? buttonAction($event) : () => {}"
+      >
+        {{ buttonText }}
+      </button>
+    </div>
+    <div v-else>
       <form action="">
         <label
           class="fr-label"