Merge pull request #131 from laruiss/develop

Develop

Author: laruiss

src/components/DsfrHeader/DsfrHeader.stories.js

@@ -41,13 +41,20 @@ export default {
     },
     quickLinks: {
       control: 'array',
-      description: 'Tableau des liens d’accès rapide, chaque objet contiendra les props suivantes :\n\n- label: (`\'Notifications\'`, par ex.)\n\n- path: (`\'/notification\'` par ex.)\n\n- `icon` pour le nom de l’icône à afficher (`\'ri-phone-line\'` par ex.)\n\n- `iconRight` (`true` pour afficher l’icône à droite, `false` par défaut)',
+      description: `Tableau des liens d’accès rapide, chaque objet contiendra les props suivantes :
+
+- \`label\`: (\`'Notifications'\`, par ex.)
+- \`path\`: (\`'/notification'\` par ex.)
+- \`icon\` pour le nom de l’icône à afficher (\`'ri-phone-line'\` par ex.)
+- \`iconRight\` (\`true\` pour afficher l’icône à droite, \`false\` par défaut)
+- \`button\`: (\`true\` pour avoir une balise \`button\`, \`false\` pour laisser en balise \`a\`)`,
     },
     modelValue: {
       control: 'text',
       description: 'Contenu du champs de saisie de la barre de recherche',
     },
     actionOnLogo: { action: 'clicked on logo' },
+    actionOnLink: { action: 'clicked on quickLink' },
     onChangeSearchInput: { action: 'search changed' },
   },
 }
@@ -65,6 +72,15 @@ export const EnTete = (args, { argTypes }) => ({
   data () {
     return {
       ...args,
+      quickLincks: args.quickLinks.map((link, idx) => {
+        if (idx === 0) {
+          link.onClick = ($event) => {
+            $event.preventDefault()
+            this.actionOnLink()
+          }
+        }
+        return link
+      }),
     }
   },
   template: `
@@ -99,8 +115,8 @@ EnTete.args = {
   modelValue: '',
   homeTo: '#',
   quickLinks: [
+    { label: 'Lien2', path: '', icon: 'ri-notification-3-line', iconOnly: true, button: true },
     { label: 'Lien1', path: '/path1', icon: '' },
-    { label: 'Lien2', path: '/path2', icon: 'ri-notification-3-line' },
     { label: 'Lien3', path: '/path3', icon: 'ri-phone-line', iconRight: true },
   ],
 }

src/components/DsfrHeader/DsfrHeader.vue

@@ -171,14 +171,17 @@ export default {
       default: () => 'Gouvernement',
     },
   },
+
   emits: ['update:modelValue', 'search'],
+
   data () {
     return {
       menuOpened: false,
       searchModalOpened: false,
       modalOpened: false,
     }
   },
+
   methods: {
     hideModal () {
       this.modalOpened = false

src/components/DsfrHeader/DsfrHeaderMenuLink.vue

@@ -8,6 +8,7 @@
       'flex': true,
       'reverse': iconRight,
     }"
+    @click.stop="onClick"
   >
     <VIcon
       v-if="icon"
@@ -28,8 +29,9 @@ export default {
   props: {
     path: {
       type: String,
-      default: '',
+      default: undefined,
     },
+    button: Boolean,
     iconOnly: Boolean,
     iconRight: Boolean,
     icon: {
@@ -40,16 +42,24 @@ export default {
       type: String,
       default: '',
     },
+    onClick: {
+      type: Function,
+      default: () => {},
+    },
   },
+
   computed: {
     is () {
+      if (this.button) {
+        return 'button'
+      }
       return this.path.startsWith('http') ? 'a' : 'router-link'
     },
     to () {
-      return this.path.startsWith('http') ? undefined : this.path
+      return (this.button || this.path.startsWith('http')) ? undefined : this.path
     },
     href () {
-      return this.path.startsWith('http') ? this.path : undefined
+      return (!this.button && this.path.startsWith('http')) ? this.path : undefined
     },
   },
 }

src/components/DsfrHeader/DsfrHeaderMenuLinks.vue

@@ -3,8 +3,8 @@
     class="fr-links-group"
   >
     <li
-      v-for="quickLink in links"
-      :key="quickLink.path"
+      v-for="(quickLink, index) in links"
+      :key="index"
     >
       <DsfrHeaderMenuLink
         v-bind="quickLink"
@@ -15,20 +15,19 @@
 
 <script>
 import DsfrHeaderMenuLink from './DsfrHeaderMenuLink.vue'
+
 export default {
   name: 'DsfrMenuLinks',
   components: {
     DsfrHeaderMenuLink,
   },
+
   props: {
     links: {
       type: Array,
       default: () => undefined,
     },
   },
-  data () {
-    return {}
-  },
 }
 </script>