Merge pull request #566 from vincentlaine/feat/badgeBeta

feat: ✨ Ajout de la possibilité d'ajouter le badge "BETA" sur le composant Header

Author: laruiss

src/components/DsfrHeader/DsfrHeader.spec.ts

@@ -106,4 +106,35 @@ describe('DsfrHeader', () => {
     // Then
     expect(logo).toHaveClass('fr-logo')
   })
+
+  it('should render DsfrHeader with a BETA badge', async () => {
+    // Given
+    const logoText = 'Gouvernement'
+    const serviceTitle = 'Nom du service'
+    const serviceDescription = 'Description du service'
+    const showBeta = true
+
+    // When
+    const { getByText } = render(DsfrHeader, {
+      global: {
+        plugins: [router],
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        logoText,
+        serviceTitle,
+        serviceDescription,
+        showBeta,
+      },
+    })
+
+    await router.isReady()
+
+    const betaBadge = getByText('BETA')
+
+    // Then
+    expect(betaBadge).toHaveClass('fr-badge')
+  })
 })

src/components/DsfrHeader/DsfrHeader.stories.ts

@@ -38,6 +38,10 @@ export default {
       control: 'boolean',
       description: 'Indique si le champs de recherche doit être affiché (`true`) ou non (`false`, défaut)',
     },
+    showBeta: {
+      control: 'boolean',
+      description: 'Indique si le badge "BETA" doit être affiché (`true`) ou non (`false`, défaut)',
+    },
     homeTo: {
       control: 'text',
       description: 'Lien cible au clic sur le logo ou le titre',
@@ -384,3 +388,58 @@ EnTeteAvecNavigation.args = {
     },
   ],
 }
+
+export const EnTeteAvecBadgeBeta = (args, { argTypes }) => ({
+  components: {
+    DsfrHeader,
+  },
+  data () {
+    return {
+      ...args,
+      quickLincks: args.quickLinks.map((link, idx) => {
+        if (idx === 0) {
+          link.onClick = ($event) => {
+            $event.preventDefault()
+            this.actionOnLink()
+          }
+        }
+        return link
+      }),
+    }
+  },
+
+  template: `
+    <DsfrHeader
+      :service-title="serviceTitle"
+      :service-description="serviceDescription"
+      :home-to="homeTo"
+      :quick-links="quickLinks"
+      :show-search="showSearch"
+      :logo-text="logoText"
+      :show-beta="showBeta"
+      v-model="modelValue"
+      @click="onClickOnLogo"
+      @search="onSearch($event)"
+    />
+  `,
+
+  methods: {
+    onClickOnLogo ($event) {
+      $event.preventDefault()
+      $event.stopPropagation()
+      this.actionOnLogo($event)
+    },
+  },
+
+})
+EnTeteAvecBadgeBeta.args = {
+  showSearch: false,
+  showBeta: true,
+  logoText: ['Ministère', 'de l’intérieur'],
+  serviceTitle: 'Nom du Site/Service',
+  serviceDescription: 'baseline - précisions sur l‘organisation',
+  modelValue: '',
+  placeholder: '',
+  homeTo: '#',
+  quickLinks: [],
+}

src/components/DsfrHeader/DsfrHeader.vue

@@ -19,6 +19,7 @@ type DsfrHeaderProps = {
   searchLabel?: string
   quickLinksAriaLabel?: string
   showSearch?: boolean
+  showBeta?: boolean
 }
 
 const props = withDefaults(defineProps<DsfrHeaderProps>(), {
@@ -150,6 +151,12 @@ defineEmits<{
               >
                 <p class="fr-header__service-title">
                   {{ serviceTitle }}
+                  <span
+                    v-if="showBeta"
+                    class="fr-badge fr-badge--sm fr-badge--green-emeraude"
+                  >
+                    BETA
+                  </span>
                 </p>
               </RouterLink>
               <p
@@ -159,6 +166,14 @@ defineEmits<{
                 {{ serviceDescription }}
               </p>
             </div>
+            <div
+              v-if="!serviceTitle && showBeta"
+              class="fr-header__service"
+            >
+              <p class="fr-header__service-title">
+                <span class="fr-badge fr-badge--sm fr-badge--green-emeraude">BETA</span>
+              </p>
+            </div>
           </div>
           <div class="fr-header__tools">
             <div
@@ -231,7 +246,7 @@ defineEmits<{
             </div>
           </div>
         </div>
-        <slot />
+        <slot/>
       </div>
     </div>
   </header>