Merge pull request #310 from dnum-mi/develop

RC9

Author: laruiss

.storybook/main.js

@@ -19,6 +19,6 @@ module.exports = {
   //   builder: 'webpack5'
   // }
   core: {
-    builder: 'storybook-builder-vite',
-  },
-}
+    builder: "@storybook/builder-vite"
+  }
+};

package-lock.json

@@ -82,69 +82,70 @@
     "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",
     "vue": "^3.2.31"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.8",
+    "@babel/core": "^7.17.9",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-syntax-jsx": "^7.16.7",
     "@babel/preset-env": "^7.16.11",
     "@cypress/vite-dev-server": "^2.2.2",
     "@cypress/vue": "^3.1.1",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^4.0.0",
     "@rollup/plugin-url": "^6.1.0",
     "@rushstack/eslint-patch": "^1.1.1",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-docs": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.20",
+    "@storybook/addon-docs": "^6.4.20",
+    "@storybook/addon-essentials": "^6.4.20",
+    "@storybook/addon-links": "^6.4.20",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.4.19",
-    "@storybook/client-api": "^6.4.19",
-    "@storybook/core-common": "^6.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/vue3": "^6.4.19",
-    "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/user-event": "^13.5.0",
+    "@storybook/builder-vite": "^0.1.24",
+    "@storybook/builder-webpack5": "^6.4.20",
+    "@storybook/client-api": "^6.4.20",
+    "@storybook/core-common": "^6.4.20",
+    "@storybook/manager-webpack5": "^6.4.20",
+    "@storybook/vue3": "^6.4.20",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/user-event": "^14.0.4",
     "@testing-library/vue": "^6.5.1",
     "@types/jest": "^27.4.1",
     "@types/jsdom": "^16.2.14",
     "@types/node": "^17.0.23",
     "@types/vue": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.16.0",
-    "@typescript-eslint/parser": "^5.16.0",
-    "@vitejs/plugin-vue": "^2.2.4",
-    "@vitejs/plugin-vue-jsx": "^1.3.8",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vitejs/plugin-vue-jsx": "^1.3.9",
     "@vue/compiler-sfc": "^3.2.31",
     "@vue/eslint-config-standard": "^6.1.0",
     "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/test-utils": "2.0.0-rc.19",
     "@vue/tsconfig": "^0.1.3",
     "autoprefixer": "^10.4.4",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^8.2.4",
     "babel-plugin-transform-import-meta": "^2.1.1",
-    "chalk": "^5.0.1",
     "c8": "^7.11.0",
+    "chalk": "^5.0.1",
     "copyfiles": "^2.4.1",
     "core-js": "^3.21.1",
     "cross-env": "^7.0.3",
-    "cypress": "^9.5.2",
+    "cypress": "^9.5.3",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^8.11.0",
+    "eslint": "^8.12.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-storybook": "^0.5.7",
-    "eslint-plugin-vue": "^8.5.0",
+    "eslint-plugin-vue": "^8.6.0",
     "globby": "^13.1.1",
     "inquirer": "^8.2.2",
     "jsdom": "^19.0.0",
@@ -167,11 +168,10 @@
     "rollup-plugin-vue": "^6.0.0",
     "semantic-release": "^19.0.2",
     "start-server-and-test": "^1.14.0",
-    "storybook-builder-vite": "^0.1.21",
     "tsd-jsdoc": "^2.5.0",
     "typescript": "^4.6.3",
-    "vite": "^2.8.6",
-    "vitest": "^0.7.11",
+    "vite": "^2.9.1",
+    "vitest": "^0.9.0",
     "vue-loader": "^17.0.0",
     "vue-router": "^4.0.14",
     "vue-router-mock": "^0.1.7",

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,
+}