stories: add router links

src/components/LinkedDocument/LinkedDocumentListEntry.vue

@@ -1,6 +1,8 @@
 <template>
-  <span class="d-inline-flex align-items-center"
-    ><component :is="findContentTypeIcon(contentType)" class="me-2" /><router-link :to="url"
+  <span class="linked-document-list-entry d-inline-flex align-items-center pe-2"
+    ><component :is="findContentTypeIcon(contentType)" class="tertiary me-2" /><router-link
+      :to="{ path: url }"
+      class="linked-document-list-entry__link d-inline-block text-nowrap"
       ><slot>{{ name }}</slot></router-link
     ></span
   >
@@ -18,3 +20,4 @@ defineProps({
   name: { type: String, default: 'No name provided' }
 })
 </script>
+<style lang="scss" scoped></style>

src/stories/components/LinkedDocument/LinkedDocumentCard.stories.js

@@ -1,6 +1,9 @@
-import LinkedDocumentCard from '@/components/LinkedDocument/LinkedDocumentCard'
+import { vueRouter } from 'storybook-vue3-router'
 
+import LinkedDocumentCard from '@/components/LinkedDocument/LinkedDocumentCard'
+const routes = [{ path: '/' }]
 export default {
+  decorators: [vueRouter(routes)],
   title: 'Components/LinkedDocument/LinkedDocumentCard',
   tags: ['autodocs'],
   component: LinkedDocumentCard,
@@ -10,20 +13,20 @@ export default {
     description: 'Same extraction level as this document',
     modelValue: true,
     siblings: [
-      { contentType: 'application/pdf', name: 'This is my document', url: 'toto' },
-      { contentType: 'text/html', name: 'This is my document', url: 'toto' },
-      { contentType: 'image/png', name: 'This is my document', url: 'toto' },
-      { contentType: 'application/msword', name: 'This is my document', url: 'toto' },
-      { contentType: 'application/msword', name: 'This is my document', url: 'toto' },
-      { contentType: 'application/vnd.ms-excel', name: 'This is my document', url: 'toto' }
+      { contentType: 'application/pdf', name: 'This is my document', url: '/' },
+      { contentType: 'text/html', name: 'This is my document', url: '/' },
+      { contentType: 'image/png', name: 'This is my document', url: '/' },
+      { contentType: 'application/msword', name: 'This is my document', url: '/' },
+      { contentType: 'application/msword', name: 'This is my document', url: '/' },
+      { contentType: 'application/vnd.ms-excel', name: 'This is my document', url: '/' }
     ],
     children: [
-      { contentType: 'application/pdf', name: 'This is my document', url: 'toto' },
-      { contentType: 'text/html', name: 'This is my document', url: 'toto' },
-      { contentType: 'image/png', name: 'This is my document', url: 'toto' },
-      { contentType: 'application/msword', name: 'This is my document', url: 'toto' },
-      { contentType: 'application/msword', name: 'This is my document', url: 'toto' },
-      { contentType: 'application/vnd.ms-excel', name: 'This is my document', url: 'toto' }
+      { contentType: 'application/pdf', name: 'This is my document', url: '/' },
+      { contentType: 'text/html', name: 'This is my document', url: '/' },
+      { contentType: 'image/png', name: 'This is my document', url: '/' },
+      { contentType: 'application/msword', name: 'This is my document', url: '/' },
+      { contentType: 'application/msword', name: 'This is my document', url: '/' },
+      { contentType: 'application/vnd.ms-excel', name: 'This is my document', url: '/' }
     ]
   }
 }

src/stories/components/LinkedDocument/LinkedDocumentList.stories.js

@@ -1,17 +1,21 @@
+import { vueRouter } from 'storybook-vue3-router'
+
 import LinkedDocumentList from '@/components/LinkedDocument/LinkedDocumentList'
+const routes = [{ path: '/' }]
 
 export default {
+  decorators: [vueRouter(routes)],
   title: 'Components/LinkedDocument/LinkedDocumentList',
   tags: ['autodocs'],
   component: LinkedDocumentList,
   args: {
     documents: [
-      { contentType: 'application/pdf', name: 'This is my document', url: 'toto' },
-      { contentType: 'text/html', name: 'This is my document', url: 'toto' },
-      { contentType: 'image/png', name: 'This is my document', url: 'toto' },
-      { contentType: 'application/msword', name: 'This is my document', url: 'toto' },
-      { contentType: 'application/msword', name: 'This is my document', url: 'toto' },
-      { contentType: 'application/vnd.ms-excel', name: 'This is my document', url: 'toto' }
+      { contentType: 'application/pdf', name: 'This is my document', url: '/' },
+      { contentType: 'text/html', name: 'This is my document', url: '/' },
+      { contentType: 'image/png', name: 'This is my document', url: '/' },
+      { contentType: 'application/msword', name: 'This is my document', url: '/' },
+      { contentType: 'application/msword', name: 'This is my document', url: '/' },
+      { contentType: 'application/vnd.ms-excel', name: 'This is my document', url: '/' }
     ],
     height: '150px'
   }

src/stories/components/LinkedDocument/LinkedDocumentListEntry.stories.js

@@ -1,13 +1,17 @@
+import { vueRouter } from 'storybook-vue3-router'
+
 import LinkedDocumentListEntry from '@/components/LinkedDocument/LinkedDocumentListEntry'
 
+const routes = [{ path: '/' }]
 export default {
+  decorators: [vueRouter(routes)],
   title: 'Components/LinkedDocument/LinkedDocumentListEntry',
   tags: ['autodocs'],
   component: LinkedDocumentListEntry,
   args: {
     contentType: 'application/pdf',
     name: 'This is my document',
-    url: 'toto'
+    url: '/'
   }
 }