Merge pull request #654 from dnum-mi/fix/issue#621

Fix/issue#621

Author: laruiss

.storybook/preview.ts

@@ -1,6 +1,10 @@
 import type { Preview } from "@storybook/vue3"
+import { setup } from "@storybook/vue3"
 import { themes } from '@storybook/theming'
 import { withThemeByDataAttribute } from "@storybook/addon-styling"
+import { FocusTrap } from 'focus-trap-vue'
+import { defineComponent } from 'vue'
+import { OhVueIcon as VIcon} from 'oh-vue-icons'
 
 import VueDsfrTheme from './vue-dsfr-theme.js'
 import '../src/assets/variables-fdr.css'
@@ -89,4 +93,20 @@ const preview: Preview = {
   },
 }
 
+const RouterLink = defineComponent({
+  name: 'RouterLink',
+  props: {
+    to: String,
+  },
+  template: `
+    <a :href="to" v-bind="$attrs"><slot /></a>
+  `,
+})
+
+setup(app => {
+  app.component('RouterLink', RouterLink);
+  app.component('VIcon', VIcon)
+  app.component('FocusTrap', FocusTrap)
+})
+
 export default preview;

src/components/DsfrHeader/DsfrHeader.types.ts

@@ -1,10 +1,11 @@
 import type { HTMLAttributes, StyleValue } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
+import { OhVueIcon } from 'oh-vue-icons'
 
 export type DsfrHeaderMenuLinkProps = {
   button?: boolean
   icon?: string
-  iconAttrs?: HTMLAttributes
+  iconAttrs?: InstanceType<typeof OhVueIcon>['$props'] & HTMLAttributes
   iconRight?: boolean
   label?: string
   target?: string

src/components/DsfrHeader/DsfrHeaderMenuLink.vue

@@ -58,7 +58,7 @@ const linkData = computed(() => {
     @click.stop="onClick"
   >
     <template
-      v-if="(icon || iconAttrs) && !iconRight"
+      v-if="(icon || iconAttrs?.name) && !iconRight"
     >
       <VIcon
         :name="icon"
@@ -70,7 +70,7 @@ const linkData = computed(() => {
     {{ label }}
 
     <template
-      v-if="(icon || iconAttrs) && iconRight"
+      v-if="(icon || iconAttrs?.name) && iconRight"
     >
       <VIcon
         :name="icon"

src/components/DsfrNavigation/DsfrNavigation.stories.ts

@@ -1,21 +1,5 @@
-import { setup } from '@storybook/vue3'
-
 import DsfrNavigation from './DsfrNavigation.vue'
 
-const RouterLink = {
-  name: 'RouterLink',
-  props: {
-    to: String,
-  },
-  template: `
-    <a :href="to" v-bind="$attrs"><slot /></a>
-  `,
-}
-
-setup(app => {
-  app.component('RouterLink', RouterLink)
-})
-
 /**
  * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/navigation-principale)
  */

src/components/DsfrNavigation/DsfrNavigationMegaMenuCategory.stories.ts

@@ -3,22 +3,6 @@ import DsfrNavigationItem from './DsfrNavigationItem.vue'
 import DsfrNavigationMegaMenu from './DsfrNavigationMegaMenu.vue'
 import DsfrNavigationMegaMenuCategory from './DsfrNavigationMegaMenuCategory.vue'
 
-import { setup } from '@storybook/vue3'
-
-const RouterLink = {
-  name: 'RouterLink',
-  props: {
-    to: String,
-  },
-  template: `
-    <a :href="to" v-bind="$attrs"><slot /></a>
-  `,
-}
-
-setup(app => {
-  app.component('RouterLink', RouterLink)
-})
-
 export default {
   component: DsfrNavigationMegaMenuCategory,
   title: 'Composants/DsfrNavigationMegaMenuCategory',

src/components/DsfrNavigation/DsfrNavigationMenuItem.stories.ts

@@ -4,22 +4,6 @@ import DsfrNavigationMenu from './DsfrNavigationMenu.vue'
 import DsfrNavigationMenuItem from './DsfrNavigationMenuItem.vue'
 import DsfrNavigationMenuLink from './DsfrNavigationMenuLink.vue'
 
-import { setup } from '@storybook/vue3'
-
-const RouterLink = {
-  name: 'RouterLink',
-  props: {
-    to: String,
-  },
-  template: `
-    <a :href="to" v-bind="$attrs"><slot /></a>
-  `,
-}
-
-setup(app => {
-  app.component('RouterLink', RouterLink)
-})
-
 export default {
   component: DsfrNavigationMenuItem,
   title: 'Composants/DsfrNavigationMenuItem',

src/components/DsfrNavigation/DsfrNavigationMenuLink.stories.ts

@@ -1,27 +1,11 @@
 import DsfrNavigationMenuLink from './DsfrNavigationMenuLink.vue'
 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: {
-    to: String,
-  },
-  template: `
-    <a :href="to" v-bind="$attrs"><slot /></a>
-  `,
-}
-
-setup(app => {
-  app.component('RouterLink', RouterLink)
-})
-
 export default {
   component: DsfrNavigationMenuLink,
   title: 'Composants/DsfrNavigationMenuLink',

vite.config.ts

@@ -10,7 +10,10 @@ const projectDir = dirname(new URL(import.meta.url).pathname)
 const isVitepress = process.env.VITEPRESS === 'true'
 
 const config: UserConfig = {
-  plugins: [vue(), vueJsx()],
+  plugins: [
+    vue(),
+    vueJsx(),
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),