Merge pull request #309 from dnum-mi/feat/transition-dsfr-1.4.1

feat: ✨ Implémente la version 1.4.1 du DSFR

Author: DaBadBunny

package-lock.json

@@ -82,7 +82,7 @@
     "vue-tsc": "vue-tsc --declaration --emitDeclarationOnly"
   },
   "dependencies": {
-    "@gouvfr/dsfr": "^1.3.1",
+    "@gouvfr/dsfr": "^1.4.1",
     "focus-trap": "^6.7.3",
     "focus-trap-vue": "^3.2.1",
     "oh-vue-icons": "^1.0.0-rc2",

package.json

@@ -137,7 +137,7 @@ AccordeonDansUnAccordeon.args = {
 export const AccordeonTitreCustom = (args) => ({
   components: {
     DsfrAccordion,
-    DsfrAccordionsGroup
+    DsfrAccordionsGroup,
   },
 
   data () {
@@ -178,5 +178,5 @@ export const AccordeonTitreCustom = (args) => ({
 AccordeonTitreCustom.args = {
   dark: false,
   title1: 'Un titre d’accordéon customisé',
-  title2: 'Un autre titre d’accordéon'
+  title2: 'Un autre titre d’accordéon',
 }

src/components/DsfrAccordion/DsfrAccordion.stories.js

@@ -50,7 +50,7 @@ export default defineComponent({
         :aria-controls="id"
         @click="toggleExpanded()"
       >
-      <!-- @slot Slot pour le contenu personnalisé du titre de l’accordéon. Une props du même nom est utilisable pour du texte simple sans mise en forme. -->
+        <!-- @slot Slot pour le contenu personnalisé du titre de l’accordéon. Une props du même nom est utilisable pour du texte simple sans mise en forme. -->
         <slot name="title">
           <span>{{ title }}</span>
         </slot>

src/components/DsfrAccordion/DsfrAccordion.vue

@@ -33,7 +33,7 @@ describe('DsfrAlert', () => {
       .should('be.visible')
       .contains(description)
 
-    cy.get('.close-icon')
+    cy.get('.fr-btn--close')
       .should('be.visible')
   })
 

src/components/DsfrAlert/DsfrAlert.e2e.js

@@ -63,7 +63,7 @@ describe('DsfrAlert', () => {
     await fireEvent.click(closeBtn)
 
     // Then
-    expect(closeBtn).toHaveClass('close-icon')
+    expect(closeBtn).toHaveClass('fr-btn--close')
     expect(emitted()).toHaveProperty('close')
     expect(emitted().close).toHaveLength(1)
   })

src/components/DsfrAlert/DsfrAlert.spec.js

@@ -85,71 +85,17 @@ export default defineComponent({
       </div>
       <button
         v-if="closeable"
-        class="close-icon"
+        class="fr-btn fr-btn--close"
         title="Fermer"
         aria-label="Fermer"
         @click="onClick"
-      >
-        <VIcon
-          scale="1"
-          name="ri-close-line"
-        />
-      </button>
+      />
     </div>
   </transition>
 </template>
 
 <style src="@gouvfr/dsfr/dist/component/alert/alert.main.min.css" />
 
 <style scoped>
-.fr-alert,
-.close-icon {
-  color: var(--text-default-grey);
-}
 
-.fr-alert--info::before,
-.fr-alert--warning::before,
-.fr-alert--success::before,
-.fr-alert--error::before
-{
-  height: 40px;
-}
-.fr-alert--sm {
-  padding: .575rem 2.25rem .75rem 3.5rem;
-  height: 40px;
-  & .fr-alert__description {
-    margin: 0;
-  }
-}
-
-.alert-content {
-  display: flex;
-  flex-direction: column;
-}
-.close-icon {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  width: 2rem;
-  height: 2rem;
-
-  &:hover {
-    border-radius: 1rem;
-  }
-}
-
-/* Enter and leave animations can use different */
-/* durations and timing functions.              */
-/* .slide-fade-enter-active {
-  transition: all 0.5s ease-out;
-}
-.slide-fade-leave-active {
-  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
-}
-.slide-fade-enter-from,
-.slide-fade-leave-to {
-  transform: translateY(-100%);
-  opacity: 0;
-}
-*/
 </style>

src/components/DsfrAlert/DsfrAlert.vue

@@ -0,0 +1,43 @@
+import { render } from '@testing-library/vue'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
+
+import DsfrBadge from './DsfrBadge.vue'
+
+describe('DsfrBadge', () => {
+  it('should render a success badge', async () => {
+    const label = 'Succès'
+    const type = 'success'
+
+    const { getByText } = render(DsfrBadge, {
+      props: {
+        label,
+        type,
+      },
+    })
+
+    const badge = getByText(label).parentElement
+
+    expect(badge).toHaveClass('fr-badge')
+    expect(badge).not.toHaveClass('fr-badge--sm')
+    expect(badge).toHaveClass(`fr-badge--${type}`)
+  })
+
+  it('should render a small error badge', async () => {
+    const label = 'Error'
+    const type = 'error'
+
+    const { getByText } = render(DsfrBadge, {
+      props: {
+        label,
+        type,
+        small: true,
+      },
+    })
+
+    const badge = getByText(label).parentElement
+
+    expect(badge).toHaveClass('fr-badge')
+    expect(badge).toHaveClass('fr-badge--sm')
+    expect(badge).toHaveClass(`fr-badge--${type}`)
+  })
+})

src/components/DsfrBadge/DsfrBadge.spec.js

@@ -0,0 +1,89 @@
+import DsfrBadge from './DsfrBadge.vue'
+
+export default {
+  component: DsfrBadge,
+  title: 'Composants/Badge - DsfrBadge',
+  argTypes: {
+    dark: {
+      control: 'boolean',
+      description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
+    },
+    label: {
+      control: 'text',
+      description: 'Label (texte) du badge',
+    },
+    type: {
+      options: ['error', 'success', 'new', 'info', 'warning', undefined],
+      control: 'radio',
+      description: '(Optionnel) **Type** du badge : `error` (Erreur), `success` (Succès), `new` (Nouveau), `info` (Information), `warning` (Avertissement)',
+    },
+    noIcon: {
+      control: 'boolean',
+      description: 'Permet de ne pas afficher d’icône (si `true`)',
+    },
+    small: {
+      control: 'boolean',
+      description: 'Permet d’afficher une petite icône (si `true`)',
+    },
+  },
+}
+
+export const Badge = (args) => ({
+  components: {
+    DsfrBadge,
+  },
+  data () {
+    return args
+  },
+  template: `
+    <DsfrBadge :label="label" :small="small" :type="type" :no-icon="noIcon" />
+  `,
+  mounted () {
+    document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
+  },
+})
+Badge.args = {
+  dark: false,
+  small: false,
+  type: 'success',
+  label: 'Succès au chocolat vert',
+  noIcon: false,
+}
+
+export const TousLesBadges = (args) => ({
+  components: {
+    DsfrBadge,
+  },
+  data () {
+    return args
+  },
+  template: `
+    <p>
+      <DsfrBadge label="Simple" />
+    </p>
+    <p>
+      <DsfrBadge style="width: 300px" ellipsis label="Label très long qui, normalement, devrait être coupé par une ellipse" />
+    </p>
+    <p>
+      <DsfrBadge label="Succès" type="success" />
+    </p>
+    <p>
+      <DsfrBadge label="Erreur" type="error" />
+    </p>
+    <p>
+      <DsfrBadge label="Attention !" type="warning" />
+    </p>
+    <p>
+      <DsfrBadge label="Information" type="info" />
+    </p>
+    <p>
+      <DsfrBadge label="Nouveauté" type="new" />
+    </p>
+  `,
+  mounted () {
+    document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
+  },
+})
+TousLesBadges.args = {
+  dark: false,
+}

src/components/DsfrBadge/DsfrBadge.stories.js

@@ -0,0 +1,33 @@
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: undefined,
+    validator: value => ['success', 'error', 'new', 'info', 'warning', undefined].includes(value),
+  },
+  noIcon: Boolean,
+  small: Boolean,
+  ellipsis: Boolean,
+})
+</script>
+
+<template>
+  <p
+    class="fr-badge"
+    :class="{
+      [`fr-badge--${type}`]: type,
+      'fr-badge--no-icon': noIcon,
+      'fr-badge--sm': small,
+    }"
+  >
+    <span :class="ellipsis ? 'fr-ellipsis' : ''">
+      {{ label }}
+    </span>
+  </p>
+</template>
+
+<style src="@gouvfr/dsfr/dist/component/badge/badge.main.min.css" />