Merge pull request #522 from cailliaud/develop

feat: ✨ Ajoute l'icône optionnelle au DsfrNavigationMenuLink

Author: laruiss

src/components/DsfrNavigation/DsfrNavigationMenuLink.spec.js

@@ -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.stories.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.vue

@@ -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>