Merge pull request #524 from dnum-mi/develop

Develop

Author: laruiss

package-lock.json

@@ -85,29 +85,29 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-url": "^8.0.1",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-actions": "^7.0.0-rc.8",
-    "@storybook/addon-docs": "^7.0.0-rc.8",
-    "@storybook/addon-essentials": "^7.0.0-rc.7",
-    "@storybook/addon-interactions": "^7.0.0-rc.8",
-    "@storybook/addon-links": "^7.0.0-rc.7",
+    "@storybook/addon-actions": "^7.0.0-rc.10",
+    "@storybook/addon-docs": "^7.0.0-rc.10",
+    "@storybook/addon-essentials": "^7.0.0-rc.10",
+    "@storybook/addon-interactions": "^7.0.0-rc.10",
+    "@storybook/addon-links": "^7.0.0-rc.10",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-styling": "^0.3.2-next.0",
-    "@storybook/client-api": "^7.0.0-rc.8",
-    "@storybook/client-logger": "^7.0.0-rc.8",
-    "@storybook/core-common": "^7.0.0-rc.8",
+    "@storybook/addon-styling": "^0.3.2",
+    "@storybook/client-api": "^7.0.0-rc.10",
+    "@storybook/client-logger": "^7.0.0-rc.10",
+    "@storybook/core-common": "^7.0.0-rc.10",
     "@storybook/jest": "^0.0.10",
     "@storybook/testing-library": "^0.0.13",
-    "@storybook/vue3": "^7.0.0-rc.8",
-    "@storybook/vue3-vite": "^7.0.0-rc.8",
+    "@storybook/vue3": "^7.0.0-rc.10",
+    "@storybook/vue3-vite": "^7.0.0-rc.10",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "@testing-library/vue": "^7.0.0",
     "@types/jest": "^29.5.0",
     "@types/jsdom": "^21.1.1",
-    "@types/node": "^18.15.10",
+    "@types/node": "^18.15.11",
     "@types/vue": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.57.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/compiler-sfc": "^3.2.47",
@@ -122,10 +122,10 @@
     "copyfiles": "^2.4.1",
     "core-js": "^3.29.1",
     "cross-env": "^7.0.3",
-    "cypress": "^12.8.1",
+    "cypress": "^12.9.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^8.36.0",
-    "eslint-plugin-cypress": "^2.12.1",
+    "eslint": "^8.37.0",
+    "eslint-plugin-cypress": "^2.13.2",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
@@ -143,7 +143,7 @@
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^15.1.0",
     "postcss-nested": "^6.0.1",
-    "postcss-preset-env": "^8.1.0",
+    "postcss-preset-env": "^8.2.0",
     "postcss-url": "^10.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -157,11 +157,11 @@
     "rollup-plugin-vue": "^6.0.0",
     "semantic-release": "^20.1.3",
     "start-server-and-test": "^2.0.0",
-    "storybook": "^7.0.0-rc.8",
+    "storybook": "^7.0.0-rc.10",
     "tsd-jsdoc": "^2.5.0",
     "typescript": "^5.0.2",
     "vite": "~4.1.0",
-    "vitest": "^0.29.7",
+    "vitest": "^0.29.8",
     "vue-loader": "^17.0.1",
     "vue-router": "^4.1.6",
     "vue-router-mock": "^0.2.0",

package.json

@@ -15,9 +15,10 @@ const router = createRouter({
 })
 
 describe('DsfrNavigationMenuLink', () => {
-  it('should render a navigation menu link (internal)', async () => {
+  it('should render a navigation menu link (internal) with icon', async () => {
     const to = '/'
     const text = 'Texte du lien'
+    const icon = 'ri-home-2-line'
 
     const { getByTestId } = render(DsfrNavigationMenuLink, {
       global: {
@@ -29,13 +30,37 @@ describe('DsfrNavigationMenuLink', () => {
       props: {
         to,
         text,
+        icon,
       },
     })
 
     await router.isReady()
 
     const link = getByTestId('nav-router-link')
-    expect(link.innerHTML).toBe(text)
+    expect(link.innerHTML).toBe('<svg class="ov-icon" style="font-size: 1.2em;" aria-hidden="true" width="0" height="0" viewBox="0 0 0 0" fill="currentColor"></svg> ' + text)
+    expect(link).toHaveAttribute('href', to)
+  })
+  it('should render a navigation menu link (internal) without icon', async () => {
+    const to = '/'
+    const text = 'Texte du lien'
+
+    const { getByTestId } = render(DsfrNavigationMenuLink, {
+      global: {
+        plugins: [router],
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        to,
+        text,
+      },
+    })
+
+    await router.isReady()
+
+    const link = getByTestId('nav-router-link')
+    expect(link.innerHTML).toBe('<!--v-if--> ' + text)
     expect(link).toHaveAttribute('href', to)
   })
 })

src/components/DsfrNavigation/DsfrNavigationMenuLink.spec.js

@@ -3,6 +3,11 @@ import DsfrNavigation from './DsfrNavigation.vue'
 
 import { setup } from '@storybook/vue3'
 
+import { addIcons } from 'oh-vue-icons'
+import { RiHome2Line } from 'oh-vue-icons/icons/ri/index.js'
+
+addIcons(RiHome2Line)
+
 const RouterLink = {
   name: 'RouterLink',
   props: {
@@ -33,6 +38,10 @@ export default {
       control: 'text',
       description: '(Optionnel) Valeur de l’attribut `id` de la balise `<a>` du lien de navigation. Aura une valeur pseudo-aléatoire par défaut',
     },
+    icon: {
+      control: 'text',
+      description: '(Optionnel) **Nom de l’icône** (tel que sur le site [RemixIcon](https://remixicon.com), exemple: `"ri-search-line"`) à afficher à côté du texte du bouton.\n\n Par défaut, l’icône est à gauche',
+    },
     'toggle-id': {
       description: 'Événement émis lors du click sur le lien, avec en argument l’id de l’élément cliqué',
     },
@@ -54,14 +63,15 @@ export const NavigationLienMenu = (args) => ({
     <DsfrNavigationMenuLink
       :to="to"
       :text="text"
+      :icon="icon"
       @click.prevent.stop=""
     />
   </DsfrNavigation>
   `,
 
-
 })
 NavigationLienMenu.args = {
   to: '#test-navigation-menu-link',
   text: 'Lien de menu',
+  icon: 'ri-home-2-line',
 }

src/components/DsfrNavigation/DsfrNavigationMenuLink.stories.js

@@ -1,10 +1,15 @@
 <script>
 import { defineComponent } from 'vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { getRandomId } from '../../utils/random-utils.js'
 
 export default defineComponent({
   name: 'DsfrNavigationMenuLink',
 
+  components: {
+    VIcon,
+  },
+
   props: {
     id: {
       type: String,
@@ -18,6 +23,11 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    icon: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
 
   emits: ['toggle-id'],
@@ -47,6 +57,10 @@ export default defineComponent({
     :to="to"
     @click="$emit('toggle-id', id)"
   >
+    <VIcon
+      v-if="icon"
+      :name="icon"
+    />
     {{ text }}
   </RouterLink>
 </template>

src/components/DsfrNavigation/DsfrNavigationMenuLink.vue

@@ -1,7 +1,13 @@
+import { setup } from '@storybook/vue3'
+import DsfrTag from '../DsfrTag/DsfrTag.vue'
 import DsfrTable from './DsfrTable.vue'
 import DsfrTableHeaders from './DsfrTableHeaders.vue'
 import DsfrTableCell from './DsfrTableCell.vue'
 
+setup(app => {
+  app.component('DsfrTag', DsfrTag) // Composant utilisé dans les stories CelluleDeTableauAvecComposant et CelluleDeTableauComplexe
+})
+
 export default {
   component: DsfrTableCell,
   title: 'Composants/Tableau/Cellule de tableau - DsfrTableCell',
@@ -16,7 +22,7 @@ export default {
       description: 'Contenu du champ. Peut être une string ou bien un objet',
     },
     onClickCell: {
-      action: 'Clicked on cell',
+      action: 'Clic sur l’étiquette !',
       description: 'Fonction pour montrer le clic sur une cellule (Ici seulement pour "Cellule de tableau complexe")',
     },
   },
@@ -70,7 +76,6 @@ export const CelluleDeTableauSimple = (args) => ({
     </DsfrTable>
   `,
 
-
 })
 CelluleDeTableauSimple.args = {
   title,

src/components/DsfrTable/DsfrTableCell.stories.js

@@ -19,7 +19,7 @@ export default defineComponent({
     isObject () {
       return typeof this.field === 'object' && this.field !== null
     },
-    isComponent () {
+    component () {
       return (this.isObject && this.field.component) ? this.field.component : false
     },
     isString () {
@@ -32,8 +32,8 @@ export default defineComponent({
 <template>
   <td v-bind="cellAttrs">
     <component
-      :is="isComponent"
-      v-if="isComponent"
+      :is="component"
+      v-if="component"
       v-bind="field"
     >
       {{ field.text }}

src/components/DsfrTable/DsfrTableCell.vue

@@ -130,7 +130,7 @@ import {
 } from '@gouvminint/vue-dsfr'                                // Imports nommés de la bibliothèque
 
 import '@gouvfr/dsfr/dist/dsfr.min.css'                      // Import des styles du DSFR
-import '@gouvminint/vue-dsfr/styles'                         // Import des styles propre à la bibliothèque VueDSFR
+import '@gouvminint/vue-dsfr/styles'                         // Import des styles propres à la bibliothèque VueDSFR
 
 const app = createApp(App)
   .component('DsfrHeader', DsfrHeader)                       // Enregistrement global du composant DsfrHeader
@@ -160,7 +160,7 @@ Dans le point d’entrée de votre application Vue (souvent `main.js` ou `main.t
 
 ```javascript
 import '@gouvfr/dsfr/dist/core/core.main.min.css'            // Le CSS minimal du DSFR
-import '@gouvfr/dsfr/dist/component/component.main.min.css'  // Styles de tous les composants
+import '@gouvfr/dsfr/dist/component/component.main.min.css'  // Styles de tous les composants du DSFR
 import '@gouvfr/dsfr/dist/utility/utility.main.min.css'      // Classes utilitaires : les composants de VueDsfr en ont besoin
 import '@gouvminint/vue-dsfr/styles'                         // Les styles propres aux composants de VueDsfr
 
@@ -176,11 +176,10 @@ Dans `nuxt.config.js` :
 export default defineNuxtConfig({
   css: [
     '@gouvfr/dsfr/dist/core/core.main.min.css',           // Le CSS du DSFR
+    '@gouvfr/dsfr/dist/component/component.main.min.css'  // Styles de tous les composants du DSFR
     '@gouvfr/dsfr/dist/utility/utility.main.min.css'      // Classes utilitaires : les composants de VueDsfr en ont besoin
     '@gouvminint/vue-dsfr/styles',                        // Les styles propres aux composants de VueDsfr
 
-    '@gouvfr/dsfr/dist/component/componant.main.min.css'  // Styles des liens
-    '@gouvfr/dsfr/dist/component/form/form.min.css'       // Facultatif : Si l’application utilise des éléments de formulaire
     '@gouvfr/dsfr/dist/scheme/scheme.min.css'             // Facultatif : Si les thèmes sont utilisés (thème sombre, thème en bernes)
     '@gouvfr/dsfr/dist/utility/icons/icons.min.css',      // Facultatif : Si des icônes sont utilisées avec les classes "fr-icon-..."
   ],