From ea311a5df23bbae2b544e91eb613761b99516da1 Mon Sep 17 00:00:00 2001
From: Caroline Desprat <cdesprat@icij.org>
Date: Fri, 26 Jul 2024 09:54:24 +0000
Subject: [PATCH] stories: add router links

---
 .../LinkedDocumentListEntry.vue               |  7 +++--
 .../LinkedDocumentCard.stories.js             | 29 ++++++++++---------
 .../LinkedDocumentList.stories.js             | 16 ++++++----
 .../LinkedDocumentListEntry.stories.js        |  6 +++-
 4 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/components/LinkedDocument/LinkedDocumentListEntry.vue b/src/components/LinkedDocument/LinkedDocumentListEntry.vue
index 0368b437ef..7aa675ee46 100644
--- a/src/components/LinkedDocument/LinkedDocumentListEntry.vue
+++ b/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>
diff --git a/src/stories/components/LinkedDocument/LinkedDocumentCard.stories.js b/src/stories/components/LinkedDocument/LinkedDocumentCard.stories.js
index 7170a75a86..dccf03150e 100644
--- a/src/stories/components/LinkedDocument/LinkedDocumentCard.stories.js
+++ b/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: '/' }
     ]
   }
 }
diff --git a/src/stories/components/LinkedDocument/LinkedDocumentList.stories.js b/src/stories/components/LinkedDocument/LinkedDocumentList.stories.js
index 958c4284b6..04de04659c 100644
--- a/src/stories/components/LinkedDocument/LinkedDocumentList.stories.js
+++ b/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'
   }
diff --git a/src/stories/components/LinkedDocument/LinkedDocumentListEntry.stories.js b/src/stories/components/LinkedDocument/LinkedDocumentListEntry.stories.js
index 75d3fc41a6..1ed12852f5 100644
--- a/src/stories/components/LinkedDocument/LinkedDocumentListEntry.stories.js
+++ b/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: '/'
   }
 }