feat(DatasetCard): add thumbnail

src/dataset/domain/models/DatasetPreview.ts

@@ -4,4 +4,6 @@ export interface DatasetPreview {
   persistentId: string
   title: string
   labels: DatasetLabel[]
+  thumbnail?: string
+  isDeaccessioned: boolean
 }

src/sections/dataset/dataset-citation/DatasetCitation.module.scss

@@ -17,20 +17,11 @@ min-height: 150px;
     border: 1px solid $dv-danger-color;
 }
 
-.icon {
-    color: #428BCA;
-    font-size: 7.5em;
-    line-height: 1.1;
-}
-
-.preview-image {
-    width: 100%;
-    max-width: 140px;
-    height: auto;
-    max-height: 140px;
-}
-
 .row {
     margin-right: -15px;
     margin-left: -15px;
+}
+
+.thumbnail {
+    font-size: 7.5em;
 }

src/sections/dataset/dataset-citation/DatasetCitation.tsx

@@ -3,7 +3,7 @@ import styles from './DatasetCitation.module.scss'
 import { useTranslation } from 'react-i18next'
 import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset'
 import parse from 'html-react-parser'
-import { CitationThumbnail } from './CitationThumbnail'
+import { DatasetThumbnail } from './DatasetThumbnail'
 
 interface DatasetCitationProps {
   thumbnail?: string
@@ -23,11 +23,11 @@ export function DatasetCitation({ thumbnail, title, citation, version }: Dataset
             : styles.container
         }>
         <Row className={styles.row}>
-          <Col sm={2}>
-            <CitationThumbnail
+          <Col sm={2} className={styles.thumbnail}>
+            <DatasetThumbnail
               thumbnail={thumbnail}
               title={title}
-              publishingStatus={version.publishingStatus}
+              isDeaccessioned={version.publishingStatus === DatasetPublishingStatus.DEACCESSIONED}
             />
           </Col>
           <Col>

src/sections/dataset/dataset-citation/DatasetThumbnail.module.scss

@@ -0,0 +1,13 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+
+.icon {
+  color: $dv-info-border-color;
+  line-height: 1.1;
+}
+
+.preview-image {
+  width: 100%;
+  max-width: 140px;
+  height: auto;
+  max-height: 140px;
+}

src/sections/dataset/dataset-citation/DatasetThumbnail.tsx

@@ -0,0 +1,20 @@
+import styles from './DatasetThumbnail.module.scss'
+import { Icon, IconName } from '@iqss/dataverse-design-system'
+
+interface DatasetThumbnailProps {
+  thumbnail?: string
+  title: string
+  isDeaccessioned?: boolean
+}
+
+export function DatasetThumbnail({ thumbnail, title, isDeaccessioned }: DatasetThumbnailProps) {
+  if (thumbnail && !isDeaccessioned) {
+    return <img className={styles['preview-image']} src={thumbnail} alt={title} />
+  }
+
+  return (
+    <div className={styles.icon}>
+      <Icon name={IconName.DATASET} />
+    </div>
+  )
+}

src/sections/home/datasets-list/DatasetCard.tsx

@@ -3,6 +3,7 @@ import { LinkToPage } from '../../shared/link-to-page/LinkToPage'
 import { Route } from '../../Route.enum'
 import { DatasetLabels } from '../../dataset/dataset-labels/DatasetLabels'
 import styles from './DatasetsList.module.scss'
+import { DatasetThumbnail } from '../../dataset/dataset-citation/DatasetThumbnail'
 
 interface DatasetCardProps {
   dataset: DatasetPreview
@@ -11,12 +12,21 @@ interface DatasetCardProps {
 export function DatasetCard({ dataset }: DatasetCardProps) {
   return (
     <article className={styles.card}>
-      <div className={styles['card-title']}>
+      <div className={styles['card-header']}>
         <LinkToPage page={Route.DATASETS} searchParams={{ persistentId: dataset.persistentId }}>
           {dataset.title}
         </LinkToPage>
         <DatasetLabels labels={dataset.labels} />
       </div>
+      <div className={styles['card-thumbnail']}>
+        <LinkToPage page={Route.DATASETS} searchParams={{ persistentId: dataset.persistentId }}>
+          <DatasetThumbnail
+            title={dataset.title}
+            thumbnail={dataset.thumbnail}
+            isDeaccessioned={dataset.isDeaccessioned}
+          />
+        </LinkToPage>
+      </div>
     </article>
   )
 }

src/sections/home/datasets-list/DatasetsList.module.scss

@@ -1,7 +1,7 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .container {
-    padding:15px;
+  padding:15px;
   border: 1px solid #ddd;
   border-radius: 4px;
 }
@@ -13,13 +13,19 @@
 
 .card {
     margin: 6px 0;
-    border: 1px solid #428bca;
+    border: 1px solid $dv-info-border-color;
     padding: 4px 10px;
+}
 
-    .card-title {
-        display: flex;
-        > * {
-            margin-right: .5em;
-        }
-    }
+.card-header {
+  display: flex;
+  > * {
+    margin-right: .5em;
+  }
 }
+
+.card-thumbnail {
+  width: 48px;
+  margin: 4px 12px 6px 0;
+  font-size: 2.8em;
+}

tests/component/dataset/domain/models/DatasetPreviewMother.ts

@@ -12,7 +12,13 @@ export class DatasetPreviewMother {
       persistentId: faker.datatype.uuid(),
       title: faker.lorem.sentence(),
       labels: DatasetLabelsMother.create(),
+      isDeaccessioned: faker.datatype.boolean(),
+      thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined,
       ...props
     }
   }
+
+  static createWithThumbnail(): DatasetPreview {
+    return this.create({ thumbnail: faker.image.imageUrl(), isDeaccessioned: false })
+  }
 }

tests/component/sections/dataset/dataset-citation/DatasetThumbnail.spec.tsx

@@ -0,0 +1,29 @@
+import { DatasetThumbnail } from '../../../../../src/sections/dataset/dataset-citation/DatasetThumbnail'
+
+describe('DatasetThumbnail', () => {
+  it('renders the dataset icon when there is no thumbnail', () => {
+    cy.customMount(<DatasetThumbnail title="Dataset title" />)
+
+    cy.findByLabelText('icon-dataset').should('exist')
+  })
+
+  it('renders the dataset icon when the dataset is deaccessioned', () => {
+    cy.customMount(
+      <DatasetThumbnail
+        title="Dataset title"
+        thumbnail="https://example.com/image.png"
+        isDeaccessioned
+      />
+    )
+
+    cy.findByLabelText('icon-dataset').should('exist')
+  })
+
+  it('renders the dataset thumbnail when there is one and the dataset is not deaccessioned', () => {
+    cy.customMount(
+      <DatasetThumbnail thumbnail="https://example.com/image.png" title="Dataset title" />
+    )
+
+    cy.findByRole('img', { name: 'Dataset title' }).should('exist')
+  })
+})

tests/component/sections/home/datasets-list/DatasetCard.spec.tsx

@@ -3,12 +3,18 @@ import { DatasetCard } from '../../../../../src/sections/home/datasets-list/Data
 
 describe('DatasetCard', () => {
   it('should render the card', () => {
-    const dataset = DatasetPreviewMother.create()
+    const dataset = DatasetPreviewMother.createWithThumbnail()
     cy.customMount(<DatasetCard dataset={dataset} />)
 
-    cy.findByRole('link', { name: dataset.title }).should('exist')
+    cy.findByText(dataset.title)
+      .should('exist')
+      .should('have.attr', 'href', `/datasets?persistentId=${dataset.persistentId}`)
     dataset.labels.forEach((label) => {
       cy.findByText(label.value).should('exist')
     })
+    cy.findByRole('img', { name: dataset.title })
+      .should('exist')
+      .parent('a')
+      .should('have.attr', 'href', `/datasets?persistentId=${dataset.persistentId}`)
   })
 })