From 87e39071676bfefb6853a2e16b463b430732c23b Mon Sep 17 00:00:00 2001
From: MellyGray <melinaabril@gmail.com>
Date: Tue, 24 Oct 2023 11:43:07 +0200
Subject: [PATCH] feat(DatasetThumbnail): add thumbnail to stories

---
 src/stories/dataset/DatasetMockData.ts        |  4 +-
 .../DatasetCitation.stories.tsx               | 43 +++++++++++++++++--
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/stories/dataset/DatasetMockData.ts b/src/stories/dataset/DatasetMockData.ts
index 110c46377..e2af08a1c 100644
--- a/src/stories/dataset/DatasetMockData.ts
+++ b/src/stories/dataset/DatasetMockData.ts
@@ -95,6 +95,7 @@ export const DatasetMockData = (props?: Partial<Dataset>, anonymized = false): D
         }
       }
     ] as DatasetMetadataBlocks,
+    thumbnail: undefined,
     ...props
   }
   return new Dataset.Builder(
@@ -103,6 +104,7 @@ export const DatasetMockData = (props?: Partial<Dataset>, anonymized = false): D
     dataset.citation,
     dataset.summaryFields,
     dataset.license,
-    dataset.metadataBlocks
+    dataset.metadataBlocks,
+    dataset.thumbnail
   ).build()
 }
diff --git a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
index 55ddf4b93..a84a7cc60 100644
--- a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
+++ b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
@@ -3,6 +3,7 @@ import { WithI18next } from '../../WithI18next'
 import { DatasetCitation } from '../../../sections/dataset/dataset-citation/DatasetCitation'
 import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset'
 import { DatasetMockData } from '../DatasetMockData'
+import { faker } from '@faker-js/faker'
 
 const meta: Meta<typeof DatasetCitation> = {
   title: 'Sections/Dataset Page/DatasetCitation',
@@ -14,13 +15,35 @@ export default meta
 type Story = StoryObj<typeof DatasetCitation>
 
 export const Default: Story = {
+  render: () => {
+    const dataset = DatasetMockData({ thumbnail: faker.image.imageUrl() })
+    return (
+      <div>
+        <br></br>
+        <br></br>
+        <DatasetCitation
+          title={dataset.getTitle()}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
+      </div>
+    )
+  }
+}
+
+export const WithThumbnail: Story = {
   render: () => {
     const dataset = DatasetMockData()
     return (
       <div>
         <br></br>
         <br></br>
-        <DatasetCitation citation={dataset.citation} version={dataset.version} />
+        <DatasetCitation
+          title={dataset.getTitle()}
+          thumbnail={dataset.thumbnail}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
       </div>
     )
   }
@@ -41,7 +64,11 @@ export const DraftVersion: Story = {
       <div>
         <br></br>
         <br></br>
-        <DatasetCitation citation={dataset.citation} version={dataset.version} />
+        <DatasetCitation
+          title={dataset.getTitle()}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
       </div>
     )
   }
@@ -62,7 +89,11 @@ export const Deaccessioned: Story = {
       <div>
         <br></br>
         <br></br>
-        <DatasetCitation citation={dataset.citation} version={dataset.version} />
+        <DatasetCitation
+          title={dataset.getTitle()}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
       </div>
     )
   }
@@ -82,7 +113,11 @@ export const Anonymized: Story = {
       <div>
         <br></br>
         <br></br>
-        <DatasetCitation citation={dataset.citation} version={dataset.version} />
+        <DatasetCitation
+          title={dataset.getTitle()}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
       </div>
     )
   }