feat(DatasetCard): refactor component

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

@@ -1,6 +1,7 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .container {
+  min-height: calc(100vh + 100px);
   padding:15px;
   border: 1px solid #ddd;
   border-radius: 4px;

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

@@ -8,7 +8,7 @@ import { DatasetPaginationInfo } from '../../../dataset/domain/models/DatasetPag
 import { useLoading } from '../../loading/LoadingContext'
 import { DatasetsListSkeleton } from './DatasetsListSkeleton'
 import { NoDatasetsMessage } from './NoDatasetsMessage'
-import { DatasetCard } from './DatasetCard'
+import { DatasetCard } from './dataset-card/DatasetCard'
 
 interface DatasetsListProps {
   datasetRepository: DatasetRepository

src/sections/home/datasets-list/DatasetCard.module.scss → src/sections/home/datasets-list/dataset-card/DatasetCard.module.scss

@@ -1,14 +1,16 @@
+@use 'sass:color';
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module";
 
 .container {
   margin: 6px 0;
-  border: 1px solid $dv-info-border-color;
   padding: 4px 10px;
+  border: 1px solid $dv-info-border-color;
 }
 
 .header {
   display: flex;
+
   > * {
     margin-right: .5em;
   }
@@ -31,8 +33,8 @@
 .description {
   display: flex;
   flex-direction: column;
-  font-size: $dv-font-size-sm;
   width: 100%;
+  font-size: $dv-font-size-sm;
 }
 
 .date {
@@ -41,15 +43,15 @@
 }
 
 .citation-box {
-  background-color: lighten($dv-primary-color, 51%) ;
-  padding: 4px;
-  margin-bottom: .5em;
   margin-top: 4px;
+  margin-bottom: .5em;
+  padding: 4px;
+  background-color: color.adjust($dv-primary-color, $lightness: 51%) ;
 }
 
 .citation-box-deaccessioned {
-  background-color: $dv-danger-box-color;
-  padding: 4px;
-  margin-bottom: .5em;
   margin-top: 4px;
+  margin-bottom: .5em;
+  padding: 4px;
+  background-color: $dv-danger-box-color;
 }

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

@@ -0,0 +1,21 @@
+import { DatasetPreview } from '../../../../dataset/domain/models/DatasetPreview'
+import styles from './DatasetCard.module.scss'
+import { DatasetCardHeader } from './DatasetCardHeader'
+import { DatasetCardThumbnail } from './DatasetCardThumbnail'
+import { DatasetCardInfo } from './DatasetCardInfo'
+
+interface DatasetCardProps {
+  dataset: DatasetPreview
+}
+
+export function DatasetCard({ dataset }: DatasetCardProps) {
+  return (
+    <article className={styles.container}>
+      <DatasetCardHeader dataset={dataset} />
+      <div className={styles.info}>
+        <DatasetCardThumbnail dataset={dataset} />
+        <DatasetCardInfo dataset={dataset} />
+      </div>
+    </article>
+  )
+}

src/sections/home/datasets-list/dataset-card/DatasetCardHeader.tsx

@@ -0,0 +1,19 @@
+import styles from './DatasetCard.module.scss'
+import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
+import { Route } from '../../../Route.enum'
+import { DatasetLabels } from '../../../dataset/dataset-labels/DatasetLabels'
+import { DatasetPreview } from '../../../../dataset/domain/models/DatasetPreview'
+
+interface DatasetCardHeaderProps {
+  dataset: DatasetPreview
+}
+export function DatasetCardHeader({ dataset }: DatasetCardHeaderProps) {
+  return (
+    <div className={styles.header}>
+      <LinkToPage page={Route.DATASETS} searchParams={{ persistentId: dataset.persistentId }}>
+        {dataset.title}
+      </LinkToPage>
+      <DatasetLabels labels={dataset.labels} />
+    </div>
+  )
+}

src/sections/home/datasets-list/dataset-card/DatasetCardInfo.tsx

@@ -0,0 +1,23 @@
+import styles from './DatasetCard.module.scss'
+import { DateHelper } from '../../../../shared/domain/helpers/DateHelper'
+import { CitationDescription } from '../../../dataset/dataset-citation/DatasetCitation'
+import { DatasetPreview } from '../../../../dataset/domain/models/DatasetPreview'
+
+interface DatasetCardInfoProps {
+  dataset: DatasetPreview
+}
+
+export function DatasetCardInfo({ dataset }: DatasetCardInfoProps) {
+  return (
+    <div className={styles.description}>
+      <span className={styles.date}>{DateHelper.toDisplayFormat(dataset.releaseOrCreateDate)}</span>
+      <span
+        className={
+          dataset.isDeaccessioned ? styles['citation-box-deaccessioned'] : styles['citation-box']
+        }>
+        <CitationDescription citation={dataset.citation} version={dataset.version} />
+      </span>
+      <span>{dataset.abbreviatedDescription}</span>
+    </div>
+  )
+}

src/sections/home/datasets-list/dataset-card/DatasetCardThumbnail.tsx

@@ -0,0 +1,23 @@
+import styles from './DatasetCard.module.scss'
+import { DatasetPreview } from '../../../../dataset/domain/models/DatasetPreview'
+import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
+import { Route } from '../../../Route.enum'
+import { DatasetThumbnail } from '../../../dataset/dataset-citation/DatasetThumbnail'
+
+interface DatasetCardThumbnailProps {
+  dataset: DatasetPreview
+}
+
+export function DatasetCardThumbnail({ dataset }: DatasetCardThumbnailProps) {
+  return (
+    <div className={styles.thumbnail}>
+      <LinkToPage page={Route.DATASETS} searchParams={{ persistentId: dataset.persistentId }}>
+        <DatasetThumbnail
+          title={dataset.title}
+          thumbnail={dataset.thumbnail}
+          isDeaccessioned={dataset.isDeaccessioned}
+        />
+      </LinkToPage>
+    </div>
+  )
+}

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react'
 import { WithI18next } from '../../WithI18next'
-import { DatasetCard } from '../../../sections/home/datasets-list/DatasetCard'
+import { DatasetCard } from '../../../sections/home/datasets-list/dataset-card/DatasetCard'
 import { DatasetPreviewMother } from '../../../../tests/component/dataset/domain/models/DatasetPreviewMother'
 
 const meta: Meta<typeof DatasetCard> = {
@@ -15,3 +15,7 @@ type Story = StoryObj<typeof DatasetCard>
 export const Default: Story = {
   render: () => <DatasetCard dataset={DatasetPreviewMother.create()} />
 }
+
+export const Deaccessioned: Story = {
+  render: () => <DatasetCard dataset={DatasetPreviewMother.createDeaccessioned()} />
+}

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

@@ -200,6 +200,25 @@ export class DatasetLabelsMother {
       { value: DatasetLabelValue.DRAFT, semanticMeaning: DatasetLabelSemanticMeaning.DATASET }
     ]
   }
+
+  static createDeaccessioned(): DatasetLabel[] {
+    return [
+      {
+        value: DatasetLabelValue.DEACCESSIONED,
+        semanticMeaning: DatasetLabelSemanticMeaning.DANGER
+      }
+    ]
+  }
+}
+
+export class DatasetCitationMother {
+  static create(): string {
+    return 'Finch, Fiona, 2023, "Darwin\'s Finches", <a href="https://doi.org/10.5072/FK2/0YFWKL" target="_blank">https://doi.org/10.5072/FK2/0YFWKL</a>, Root, DRAFT VERSION'
+  }
+
+  static createDeaccessioned(): string {
+    return 'Finch, Fiona, 2023, "Darwin\'s Finches", <a href="https://doi.org/10.5072/FK2/0YFWKL" target="_blank">https://doi.org/10.5072/FK2/0YFWKL</a>, Root, V1, DEACCESSIONED VERSION'
+  }
 }
 
 export class DatasetMother {

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

@@ -1,6 +1,6 @@
 import { faker } from '@faker-js/faker'
 import { DatasetPreview } from '../../../../../src/dataset/domain/models/DatasetPreview'
-import { DatasetLabelsMother, DatasetVersionMother } from './DatasetMother'
+import { DatasetCitationMother, DatasetLabelsMother, DatasetVersionMother } from './DatasetMother'
 
 export class DatasetPreviewMother {
   static createMany(count: number): DatasetPreview[] {
@@ -16,8 +16,7 @@ export class DatasetPreviewMother {
       thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined,
       releaseOrCreateDate: faker.date.past(),
       version: DatasetVersionMother.create(),
-      citation:
-        'Finch, Fiona, 2023, "Darwin\'s Finches", <a href="https://doi.org/10.5072/FK2/0YFWKL" target="_blank">https://doi.org/10.5072/FK2/0YFWKL</a>, Root, DRAFT VERSION',
+      citation: DatasetCitationMother.create(),
       description: faker.lorem.paragraph(),
       ...props
     }
@@ -39,7 +38,15 @@ export class DatasetPreviewMother {
     return this.create({ thumbnail: faker.image.imageUrl(), isDeaccessioned: false })
   }
 
+  static createWithNoThumbnail(): DatasetPreview {
+    return this.create({ thumbnail: undefined, isDeaccessioned: false })
+  }
+
   static createDeaccessioned(): DatasetPreview {
-    return this.create({ isDeaccessioned: true })
+    return this.create({
+      isDeaccessioned: true,
+      labels: DatasetLabelsMother.createDeaccessioned(),
+      citation: DatasetCitationMother.createDeaccessioned()
+    })
   }
 }

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

@@ -38,7 +38,7 @@ describe('Datasets List', () => {
 
     cy.findByText('1 to 10 of 200 Datasets').should('exist')
     datasets.forEach((dataset) => {
-      cy.findByRole('link', { name: dataset.title })
+      cy.findByText(dataset.title)
         .should('exist')
         .should('have.attr', 'href', `/datasets?persistentId=${dataset.persistentId}`)
     })

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

@@ -0,0 +1,21 @@
+import { DatasetPreviewMother } from '../../../../dataset/domain/models/DatasetPreviewMother'
+import { DatasetCard } from '../../../../../../src/sections/home/datasets-list/dataset-card/DatasetCard'
+import { DateHelper } from '../../../../../../src/shared/domain/helpers/DateHelper'
+import styles from '../../../../../../src/sections/home/datasets-list/dataset-card/DatasetCard.module.scss'
+
+describe('DatasetCard', () => {
+  it('should render the card', () => {
+    const dataset = DatasetPreviewMother.create()
+    cy.customMount(<DatasetCard dataset={dataset} />)
+
+    cy.findByText(dataset.title).should('exist')
+
+    cy.findByRole('img').should('exist')
+    cy.findByText(DateHelper.toDisplayFormat(dataset.releaseOrCreateDate)).should('exist')
+    cy.findByText(/Finch, Fiona, 2023, "Darwin's Finches"/)
+      .should('exist')
+      .parent()
+      .should('have.class', styles['citation-box'])
+    cy.findByText(dataset.abbreviatedDescription).should('exist')
+  })
+})

tests/component/sections/home/datasets-list/dataset-card/DatasetCardHeader.spec.tsx

@@ -0,0 +1,16 @@
+import { DatasetCardHeader } from '../../../../../../src/sections/home/datasets-list/dataset-card/DatasetCardHeader'
+import { DatasetPreviewMother } from '../../../../dataset/domain/models/DatasetPreviewMother'
+
+describe('DatasetCardHeader', () => {
+  it('should render the header', () => {
+    const dataset = DatasetPreviewMother.create()
+    cy.customMount(<DatasetCardHeader dataset={dataset} />)
+
+    cy.findByText(dataset.title)
+      .should('exist')
+      .should('have.attr', 'href', `/datasets?persistentId=${dataset.persistentId}`)
+    dataset.labels.forEach((label) => {
+      cy.findByText(label.value).should('exist')
+    })
+  })
+})