From 108228b478d6b4e09a741ae32909de93a73e2c3c Mon Sep 17 00:00:00 2001 From: MellyGray Date: Thu, 30 Nov 2023 10:48:01 +0100 Subject: [PATCH 01/13] feat(DatasetCard): add DatasetCard component --- src/sections/home/datasets-list/DatasetCard.tsx | 17 +++++++++++++++++ .../home/datasets-list/DatasetsList.tsx | 11 ++--------- .../home/datasets-list/DatasetCard.stories.tsx | 17 +++++++++++++++++ .../home/datasets-list/DatasetsList.stories.tsx | 7 +++---- .../home/datasets-list/DatasetCard.spec.tsx | 11 +++++++++++ 5 files changed, 50 insertions(+), 13 deletions(-) create mode 100644 src/sections/home/datasets-list/DatasetCard.tsx create mode 100644 src/stories/home/datasets-list/DatasetCard.stories.tsx create mode 100644 tests/component/sections/home/datasets-list/DatasetCard.spec.tsx diff --git a/src/sections/home/datasets-list/DatasetCard.tsx b/src/sections/home/datasets-list/DatasetCard.tsx new file mode 100644 index 000000000..c0b4af2fb --- /dev/null +++ b/src/sections/home/datasets-list/DatasetCard.tsx @@ -0,0 +1,17 @@ +import { DatasetPreview } from '../../../dataset/domain/models/DatasetPreview' +import { LinkToPage } from '../../shared/link-to-page/LinkToPage' +import { Route } from '../../Route.enum' + +interface DatasetCardProps { + dataset: DatasetPreview +} + +export function DatasetCard({ dataset }: DatasetCardProps) { + return ( +
+ + {dataset.title} + +
+ ) +} diff --git a/src/sections/home/datasets-list/DatasetsList.tsx b/src/sections/home/datasets-list/DatasetsList.tsx index c2f902295..4c78ecd40 100644 --- a/src/sections/home/datasets-list/DatasetsList.tsx +++ b/src/sections/home/datasets-list/DatasetsList.tsx @@ -5,11 +5,10 @@ import { useEffect, useState } from 'react' import { PaginationResultsInfo } from '../../shared/pagination/PaginationResultsInfo' import { PaginationControls } from '../../shared/pagination/PaginationControls' import { DatasetPaginationInfo } from '../../../dataset/domain/models/DatasetPaginationInfo' -import { LinkToPage } from '../../shared/link-to-page/LinkToPage' -import { Route } from '../../Route.enum' import { useLoading } from '../../loading/LoadingContext' import { DatasetsListSkeleton } from './DatasetsListSkeleton' import { NoDatasetsMessage } from './NoDatasetsMessage' +import { DatasetCard } from './DatasetCard' interface DatasetsListProps { datasetRepository: DatasetRepository @@ -40,13 +39,7 @@ export function DatasetsList({ datasetRepository }: DatasetsListProps) { {datasets.map((dataset) => ( -
- - {dataset.title} - -
+ ))} = { + title: 'Sections/Home/DatasetCard', + component: DatasetCard, + decorators: [WithI18next] +} + +export default meta +type Story = StoryObj + +export const Default: Story = { + render: () => +} diff --git a/src/stories/home/datasets-list/DatasetsList.stories.tsx b/src/stories/home/datasets-list/DatasetsList.stories.tsx index 7f2d32c02..51287336f 100644 --- a/src/stories/home/datasets-list/DatasetsList.stories.tsx +++ b/src/stories/home/datasets-list/DatasetsList.stories.tsx @@ -1,19 +1,18 @@ import { Meta, StoryObj } from '@storybook/react' -import { Home } from '../../../sections/home/Home' import { WithI18next } from '../../WithI18next' import { DatasetMockRepository } from '../../dataset/DatasetMockRepository' import { DatasetsList } from '../../../sections/home/datasets-list/DatasetsList' import { DatasetLoadingMockRepository } from '../../dataset/DatasetLoadingMockRepository' import { NoDatasetsMockRepository } from '../../dataset/NoDatasetsMockRepository' -const meta: Meta = { +const meta: Meta = { title: 'Sections/Home/DatasetsList', - component: Home, + component: DatasetsList, decorators: [WithI18next] } export default meta -type Story = StoryObj +type Story = StoryObj export const Default: Story = { render: () => diff --git a/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx b/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx new file mode 100644 index 000000000..6ab4aac15 --- /dev/null +++ b/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx @@ -0,0 +1,11 @@ +import { DatasetPreviewMother } from '../../../dataset/domain/models/DatasetPreviewMother' +import { DatasetCard } from '../../../../../src/sections/home/datasets-list/DatasetCard' + +describe('DatasetCard', () => { + it('should render the card', () => { + const dataset = DatasetPreviewMother.create() + cy.customMount() + + cy.findByRole('link', { name: dataset.title }).should('exist') + }) +}) From 3f8f4c962183591798a0762d18090c08d119732b Mon Sep 17 00:00:00 2001 From: MellyGray Date: Thu, 30 Nov 2023 11:26:24 +0100 Subject: [PATCH 02/13] feat(DatasetCard): add dataset labels --- src/dataset/domain/models/DatasetPreview.ts | 3 ++ .../home/datasets-list/DatasetCard.tsx | 13 +++++--- .../datasets-list/DatasetsList.module.scss | 15 ++++++++- .../dataset/domain/models/DatasetMother.ts | 32 ++++++++----------- .../domain/models/DatasetPreviewMother.ts | 2 ++ .../home/datasets-list/DatasetCard.spec.tsx | 3 ++ 6 files changed, 45 insertions(+), 23 deletions(-) diff --git a/src/dataset/domain/models/DatasetPreview.ts b/src/dataset/domain/models/DatasetPreview.ts index 9acae6281..5048393f9 100644 --- a/src/dataset/domain/models/DatasetPreview.ts +++ b/src/dataset/domain/models/DatasetPreview.ts @@ -1,4 +1,7 @@ +import { DatasetLabel } from './Dataset' + export interface DatasetPreview { persistentId: string title: string + labels: DatasetLabel[] } diff --git a/src/sections/home/datasets-list/DatasetCard.tsx b/src/sections/home/datasets-list/DatasetCard.tsx index c0b4af2fb..f9e0a6129 100644 --- a/src/sections/home/datasets-list/DatasetCard.tsx +++ b/src/sections/home/datasets-list/DatasetCard.tsx @@ -1,6 +1,8 @@ import { DatasetPreview } from '../../../dataset/domain/models/DatasetPreview' 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' interface DatasetCardProps { dataset: DatasetPreview @@ -8,10 +10,13 @@ interface DatasetCardProps { export function DatasetCard({ dataset }: DatasetCardProps) { return ( -
- - {dataset.title} - +
+
+ + {dataset.title} + + +
) } diff --git a/src/sections/home/datasets-list/DatasetsList.module.scss b/src/sections/home/datasets-list/DatasetsList.module.scss index 852fa280c..8d5b5f94d 100644 --- a/src/sections/home/datasets-list/DatasetsList.module.scss +++ b/src/sections/home/datasets-list/DatasetsList.module.scss @@ -9,4 +9,17 @@ .empty-message-container { padding: .5em 1em; background: $dv-warning-box-color; -} \ No newline at end of file +} + +.card { + margin: 6px 0; + border: 1px solid #428bca; + padding: 4px 10px; + + .card-title { + display: flex; + > * { + margin-right: .5em; + } + } +} diff --git a/tests/component/dataset/domain/models/DatasetMother.ts b/tests/component/dataset/domain/models/DatasetMother.ts index 51a959267..245b65a4d 100644 --- a/tests/component/dataset/domain/models/DatasetMother.ts +++ b/tests/component/dataset/domain/models/DatasetMother.ts @@ -2,6 +2,7 @@ import { faker } from '@faker-js/faker' import { ANONYMIZED_FIELD_VALUE, Dataset, + DatasetLabel, DatasetLabelSemanticMeaning, DatasetLabelValue, DatasetLock, @@ -189,6 +190,18 @@ export class DatasetLockMother { } } +export class DatasetLabelsMother { + static create(): DatasetLabel[] { + return [ + { + value: DatasetLabelValue.UNPUBLISHED, + semanticMeaning: DatasetLabelSemanticMeaning.WARNING + }, + { value: DatasetLabelValue.DRAFT, semanticMeaning: DatasetLabelSemanticMeaning.DATASET } + ] + } +} + export class DatasetMother { static createEmpty(): undefined { return undefined @@ -210,24 +223,7 @@ export class DatasetMother { uri: 'https://creativecommons.org/publicdomain/zero/1.0/', iconUri: 'https://licensebuttons.net/p/zero/1.0/88x31.png' }, - labels: [ - { - value: DatasetLabelValue.IN_REVIEW, - semanticMeaning: faker.helpers.arrayElement(Object.values(DatasetLabelSemanticMeaning)) - }, - { - value: DatasetLabelValue.EMBARGOED, - semanticMeaning: faker.helpers.arrayElement(Object.values(DatasetLabelSemanticMeaning)) - }, - { - value: DatasetLabelValue.UNPUBLISHED, - semanticMeaning: faker.helpers.arrayElement(Object.values(DatasetLabelSemanticMeaning)) - }, - { - value: `Version ${faker.lorem.word()}`, - semanticMeaning: faker.helpers.arrayElement(Object.values(DatasetLabelSemanticMeaning)) - } - ], + labels: DatasetLabelsMother.create(), summaryFields: [ { name: MetadataBlockName.CITATION, diff --git a/tests/component/dataset/domain/models/DatasetPreviewMother.ts b/tests/component/dataset/domain/models/DatasetPreviewMother.ts index 3932aa6b6..f844b12be 100644 --- a/tests/component/dataset/domain/models/DatasetPreviewMother.ts +++ b/tests/component/dataset/domain/models/DatasetPreviewMother.ts @@ -1,5 +1,6 @@ import { faker } from '@faker-js/faker' import { DatasetPreview } from '../../../../../src/dataset/domain/models/DatasetPreview' +import { DatasetLabelsMother } from './DatasetMother' export class DatasetPreviewMother { static createMany(count: number): DatasetPreview[] { @@ -10,6 +11,7 @@ export class DatasetPreviewMother { return { persistentId: faker.datatype.uuid(), title: faker.lorem.sentence(), + labels: DatasetLabelsMother.create(), ...props } } diff --git a/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx b/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx index 6ab4aac15..994d2b116 100644 --- a/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx +++ b/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx @@ -7,5 +7,8 @@ describe('DatasetCard', () => { cy.customMount() cy.findByRole('link', { name: dataset.title }).should('exist') + dataset.labels.forEach((label) => { + cy.findByText(label.value).should('exist') + }) }) }) From 8144a50bc1a391541fec53c3f33e6b35f99b6282 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Thu, 30 Nov 2023 12:03:27 +0100 Subject: [PATCH 03/13] feat(DatasetCard): add thumbnail --- src/dataset/domain/models/DatasetPreview.ts | 2 + .../dataset-citation/CitationThumbnail.tsx | 21 ---------- .../DatasetCitation.module.scss | 17 ++------ .../dataset-citation/DatasetCitation.tsx | 8 ++-- .../DatasetThumbnail.module.scss | 13 +++++++ .../dataset-citation/DatasetThumbnail.tsx | 20 ++++++++++ .../home/datasets-list/DatasetCard.tsx | 12 +++++- .../datasets-list/DatasetsList.module.scss | 22 +++++++---- .../domain/models/DatasetPreviewMother.ts | 6 +++ .../CitationThumbnail.spec.tsx | 39 ------------------- .../DatasetThumbnail.spec.tsx | 29 ++++++++++++++ .../home/datasets-list/DatasetCard.spec.tsx | 10 ++++- 12 files changed, 111 insertions(+), 88 deletions(-) delete mode 100644 src/sections/dataset/dataset-citation/CitationThumbnail.tsx create mode 100644 src/sections/dataset/dataset-citation/DatasetThumbnail.module.scss create mode 100644 src/sections/dataset/dataset-citation/DatasetThumbnail.tsx delete mode 100644 tests/component/sections/dataset/dataset-citation/CitationThumbnail.spec.tsx create mode 100644 tests/component/sections/dataset/dataset-citation/DatasetThumbnail.spec.tsx diff --git a/src/dataset/domain/models/DatasetPreview.ts b/src/dataset/domain/models/DatasetPreview.ts index 5048393f9..cb909c5f3 100644 --- a/src/dataset/domain/models/DatasetPreview.ts +++ b/src/dataset/domain/models/DatasetPreview.ts @@ -4,4 +4,6 @@ export interface DatasetPreview { persistentId: string title: string labels: DatasetLabel[] + thumbnail?: string + isDeaccessioned: boolean } diff --git a/src/sections/dataset/dataset-citation/CitationThumbnail.tsx b/src/sections/dataset/dataset-citation/CitationThumbnail.tsx deleted file mode 100644 index 57cda7c95..000000000 --- a/src/sections/dataset/dataset-citation/CitationThumbnail.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { DatasetPublishingStatus } from '../../../dataset/domain/models/Dataset' -import styles from './DatasetCitation.module.scss' -import { Icon, IconName } from '@iqss/dataverse-design-system' - -interface CitationThumbnailProps { - thumbnail?: string - title: string - publishingStatus: DatasetPublishingStatus -} - -export function CitationThumbnail({ thumbnail, title, publishingStatus }: CitationThumbnailProps) { - if (thumbnail && publishingStatus !== DatasetPublishingStatus.DEACCESSIONED) { - return {title} - } - - return ( -
- -
- ) -} diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss index 4e3ecc9ea..4dfa0ae50 100644 --- a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss +++ b/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; } \ No newline at end of file diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.tsx b/src/sections/dataset/dataset-citation/DatasetCitation.tsx index 9b523c7c7..5fe0f39b6 100644 --- a/src/sections/dataset/dataset-citation/DatasetCitation.tsx +++ b/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 }> - - + diff --git a/src/sections/dataset/dataset-citation/DatasetThumbnail.module.scss b/src/sections/dataset/dataset-citation/DatasetThumbnail.module.scss new file mode 100644 index 000000000..f29c32553 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/sections/dataset/dataset-citation/DatasetThumbnail.tsx b/src/sections/dataset/dataset-citation/DatasetThumbnail.tsx new file mode 100644 index 000000000..922aa57da --- /dev/null +++ b/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 {title} + } + + return ( +
+ +
+ ) +} diff --git a/src/sections/home/datasets-list/DatasetCard.tsx b/src/sections/home/datasets-list/DatasetCard.tsx index f9e0a6129..aeb6acf25 100644 --- a/src/sections/home/datasets-list/DatasetCard.tsx +++ b/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 (
-
+
{dataset.title}
+
+ + + +
) } diff --git a/src/sections/home/datasets-list/DatasetsList.module.scss b/src/sections/home/datasets-list/DatasetsList.module.scss index 8d5b5f94d..c939ff8d3 100644 --- a/src/sections/home/datasets-list/DatasetsList.module.scss +++ b/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; +} \ No newline at end of file diff --git a/tests/component/dataset/domain/models/DatasetPreviewMother.ts b/tests/component/dataset/domain/models/DatasetPreviewMother.ts index f844b12be..93146766d 100644 --- a/tests/component/dataset/domain/models/DatasetPreviewMother.ts +++ b/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 }) + } } diff --git a/tests/component/sections/dataset/dataset-citation/CitationThumbnail.spec.tsx b/tests/component/sections/dataset/dataset-citation/CitationThumbnail.spec.tsx deleted file mode 100644 index c73ab2359..000000000 --- a/tests/component/sections/dataset/dataset-citation/CitationThumbnail.spec.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { DatasetPublishingStatus } from '../../../../../src/dataset/domain/models/Dataset' -import { CitationThumbnail } from '../../../../../src/sections/dataset/dataset-citation/CitationThumbnail' - -describe('CitationThumbnail', () => { - it('renders the dataset icon when there is no thumbnail', () => { - cy.customMount( - - ) - - cy.findByLabelText('icon-dataset').should('exist') - }) - - it('renders the dataset icon when the dataset is deaccessioned', () => { - cy.customMount( - - ) - - cy.findByLabelText('icon-dataset').should('exist') - }) - - it('renders the dataset thumbnail when there is one and the dataset is not deaccessioned', () => { - cy.customMount( - - ) - - cy.findByRole('img', { name: 'Dataset title' }).should('exist') - }) -}) diff --git a/tests/component/sections/dataset/dataset-citation/DatasetThumbnail.spec.tsx b/tests/component/sections/dataset/dataset-citation/DatasetThumbnail.spec.tsx new file mode 100644 index 000000000..5cb2ba9bf --- /dev/null +++ b/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() + + cy.findByLabelText('icon-dataset').should('exist') + }) + + it('renders the dataset icon when the dataset is deaccessioned', () => { + cy.customMount( + + ) + + cy.findByLabelText('icon-dataset').should('exist') + }) + + it('renders the dataset thumbnail when there is one and the dataset is not deaccessioned', () => { + cy.customMount( + + ) + + cy.findByRole('img', { name: 'Dataset title' }).should('exist') + }) +}) diff --git a/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx b/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx index 994d2b116..311bfb028 100644 --- a/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx +++ b/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() - 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}`) }) }) From 2fe350f10ad676205ac704661f4d319736befdd2 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Fri, 1 Dec 2023 15:21:55 +0100 Subject: [PATCH 04/13] feat(DatasetCard): add date --- src/dataset/domain/models/DatasetPreview.ts | 1 + .../file-info-data/FileDate.tsx | 8 ++----- .../file-info-data/FileEmbargoDate.tsx | 7 ++---- .../home/datasets-list/DatasetCard.tsx | 24 ++++++++++++------- .../datasets-list/DatasetsList.module.scss | 10 ++++++++ src/shared/domain/helpers/DateHelper.ts | 9 +++++++ .../domain/models/DatasetPreviewMother.ts | 1 + .../file-info-data/FileDate.spec.tsx | 7 ++---- .../home/datasets-list/DatasetCard.spec.tsx | 2 ++ 9 files changed, 45 insertions(+), 24 deletions(-) create mode 100644 src/shared/domain/helpers/DateHelper.ts diff --git a/src/dataset/domain/models/DatasetPreview.ts b/src/dataset/domain/models/DatasetPreview.ts index cb909c5f3..4e1272e89 100644 --- a/src/dataset/domain/models/DatasetPreview.ts +++ b/src/dataset/domain/models/DatasetPreview.ts @@ -6,4 +6,5 @@ export interface DatasetPreview { labels: DatasetLabel[] thumbnail?: string isDeaccessioned: boolean + releaseOrCreateDate: Date } diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileDate.tsx b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileDate.tsx index 61ddb0c44..054ab4b89 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileDate.tsx +++ b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileDate.tsx @@ -1,17 +1,13 @@ import { FileDate as FileDateModel } from '../../../../../../../files/domain/models/File' import { useTranslation } from 'react-i18next' +import { DateHelper } from '../../../../../../../shared/domain/helpers/DateHelper' export function FileDate({ date }: { date: FileDateModel }) { const { t } = useTranslation('files') return (
- {t(`table.date.${date.type}`)}{' '} - {date.date.toLocaleDateString(Intl.DateTimeFormat().resolvedOptions().locale, { - year: 'numeric', - month: 'short', - day: 'numeric' - })} + {t(`table.date.${date.type}`)} {DateHelper.toDisplayFormat(date.date)}
) diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate.tsx b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate.tsx index 4c61171b9..50db565fa 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate.tsx +++ b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate.tsx @@ -1,5 +1,6 @@ import { FileEmbargo, FilePublishingStatus } from '../../../../../../../files/domain/models/File' import { useTranslation } from 'react-i18next' +import { DateHelper } from '../../../../../../../shared/domain/helpers/DateHelper' interface FileEmbargoDateProps { embargo: FileEmbargo | undefined @@ -17,11 +18,7 @@ export function FileEmbargoDate({ embargo, publishingStatus }: FileEmbargoDatePr
{t(embargoTypeOfDate(embargo.isActive, publishingStatus))}{' '} - {embargo.dateAvailable.toLocaleDateString(Intl.DateTimeFormat().resolvedOptions().locale, { - year: 'numeric', - month: 'short', - day: 'numeric' - })} + {DateHelper.toDisplayFormat(embargo.dateAvailable)}
) diff --git a/src/sections/home/datasets-list/DatasetCard.tsx b/src/sections/home/datasets-list/DatasetCard.tsx index aeb6acf25..4d2821701 100644 --- a/src/sections/home/datasets-list/DatasetCard.tsx +++ b/src/sections/home/datasets-list/DatasetCard.tsx @@ -4,6 +4,7 @@ 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' +import { DateHelper } from '../../../shared/domain/helpers/DateHelper' interface DatasetCardProps { dataset: DatasetPreview @@ -18,14 +19,21 @@ export function DatasetCard({ dataset }: DatasetCardProps) { -
- - - +
+
+ + + +
+
+ + {DateHelper.toDisplayFormat(dataset.releaseOrCreateDate)} + +
) diff --git a/src/sections/home/datasets-list/DatasetsList.module.scss b/src/sections/home/datasets-list/DatasetsList.module.scss index c939ff8d3..8c5ecdd31 100644 --- a/src/sections/home/datasets-list/DatasetsList.module.scss +++ b/src/sections/home/datasets-list/DatasetsList.module.scss @@ -1,4 +1,5 @@ @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 { padding:15px; @@ -28,4 +29,13 @@ width: 48px; margin: 4px 12px 6px 0; font-size: 2.8em; +} + +.card-info { + display: flex; +} + +.date { + color: $dv-subtext-color; + font-size: $dv-font-size-sm; } \ No newline at end of file diff --git a/src/shared/domain/helpers/DateHelper.ts b/src/shared/domain/helpers/DateHelper.ts new file mode 100644 index 000000000..021ec2a68 --- /dev/null +++ b/src/shared/domain/helpers/DateHelper.ts @@ -0,0 +1,9 @@ +export class DateHelper { + static toDisplayFormat(date: Date): string { + return date.toLocaleDateString(Intl.DateTimeFormat().resolvedOptions().locale, { + year: 'numeric', + month: 'short', + day: 'numeric' + }) + } +} diff --git a/tests/component/dataset/domain/models/DatasetPreviewMother.ts b/tests/component/dataset/domain/models/DatasetPreviewMother.ts index 93146766d..a40e4c0d8 100644 --- a/tests/component/dataset/domain/models/DatasetPreviewMother.ts +++ b/tests/component/dataset/domain/models/DatasetPreviewMother.ts @@ -14,6 +14,7 @@ export class DatasetPreviewMother { labels: DatasetLabelsMother.create(), isDeaccessioned: faker.datatype.boolean(), thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined, + releaseOrCreateDate: faker.date.past(), ...props } } diff --git a/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileDate.spec.tsx b/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileDate.spec.tsx index 851029fa5..9f605cc54 100644 --- a/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileDate.spec.tsx +++ b/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileDate.spec.tsx @@ -1,16 +1,13 @@ import { FileDate } from '../../../../../../../../../src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileDate' import { FileDateType } from '../../../../../../../../../src/files/domain/models/File' +import { DateHelper } from '../../../../../../../../../src/shared/domain/helpers/DateHelper' describe('FileDate', () => { it('renders the date', () => { const fileDate = new Date('2023-09-18') const date = { type: FileDateType.PUBLISHED, date: fileDate } cy.customMount() - const dateString = fileDate.toLocaleDateString(Intl.DateTimeFormat().resolvedOptions().locale, { - year: 'numeric', - month: 'short', - day: 'numeric' - }) + const dateString = DateHelper.toDisplayFormat(fileDate) cy.findByText(`Published ` + dateString).should('exist') }) }) diff --git a/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx b/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx index 311bfb028..317eda169 100644 --- a/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx +++ b/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx @@ -1,5 +1,6 @@ import { DatasetPreviewMother } from '../../../dataset/domain/models/DatasetPreviewMother' import { DatasetCard } from '../../../../../src/sections/home/datasets-list/DatasetCard' +import { DateHelper } from '../../../../../src/shared/domain/helpers/DateHelper' describe('DatasetCard', () => { it('should render the card', () => { @@ -16,5 +17,6 @@ describe('DatasetCard', () => { .should('exist') .parent('a') .should('have.attr', 'href', `/datasets?persistentId=${dataset.persistentId}`) + cy.findByText(DateHelper.toDisplayFormat(dataset.releaseOrCreateDate)).should('exist') }) }) From 18286d481d9ab9fb60edc9395aa762400675cecc Mon Sep 17 00:00:00 2001 From: MellyGray Date: Fri, 1 Dec 2023 16:43:59 +0100 Subject: [PATCH 05/13] feat(DatasetCard): add citation --- src/dataset/domain/models/DatasetPreview.ts | 4 +- .../dataset-citation/DatasetCitation.tsx | 8 +++- .../datasets-list/DatasetCard.module.scss | 47 +++++++++++++++++++ .../home/datasets-list/DatasetCard.tsx | 21 ++++++--- .../datasets-list/DatasetsList.module.scss | 29 ------------ .../domain/models/DatasetPreviewMother.ts | 11 ++++- .../home/datasets-list/DatasetCard.spec.tsx | 15 ++++++ 7 files changed, 96 insertions(+), 39 deletions(-) create mode 100644 src/sections/home/datasets-list/DatasetCard.module.scss diff --git a/src/dataset/domain/models/DatasetPreview.ts b/src/dataset/domain/models/DatasetPreview.ts index 4e1272e89..d38732048 100644 --- a/src/dataset/domain/models/DatasetPreview.ts +++ b/src/dataset/domain/models/DatasetPreview.ts @@ -1,8 +1,10 @@ -import { DatasetLabel } from './Dataset' +import { DatasetLabel, DatasetVersion } from './Dataset' export interface DatasetPreview { persistentId: string title: string + version: DatasetVersion + citation: string labels: DatasetLabel[] thumbnail?: string isDeaccessioned: boolean diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.tsx b/src/sections/dataset/dataset-citation/DatasetCitation.tsx index 5fe0f39b6..eac677feb 100644 --- a/src/sections/dataset/dataset-citation/DatasetCitation.tsx +++ b/src/sections/dataset/dataset-citation/DatasetCitation.tsx @@ -53,7 +53,13 @@ export function DatasetCitation({ thumbnail, title, citation, version }: Dataset ) } -function CitationDescription({ citation, version }: { citation: string; version: DatasetVersion }) { +export function CitationDescription({ + citation, + version +}: { + citation: string + version: DatasetVersion +}) { const citationAsReactElement = parse(citation) return ( diff --git a/src/sections/home/datasets-list/DatasetCard.module.scss b/src/sections/home/datasets-list/DatasetCard.module.scss new file mode 100644 index 000000000..44ce4bc53 --- /dev/null +++ b/src/sections/home/datasets-list/DatasetCard.module.scss @@ -0,0 +1,47 @@ +@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; +} + +.header { + display: flex; + > * { + margin-right: .5em; + } +} + +.thumbnail { + width: 48px; + margin: 4px 12px 6px 0; + font-size: 2.8em; +} + +.info { + display: flex; +} + +.description { + display: flex; + flex-direction: column; + font-size: $dv-font-size-sm; + width: 100%; +} + +.date { + color: $dv-subtext-color; + +} + +.citation-box { + background-color: lighten($dv-primary-color, 51%) ; + padding: 4px; +} + +.citation-box-deaccessioned { + background-color: $dv-danger-box-color; + padding: 4px; +} \ No newline at end of file diff --git a/src/sections/home/datasets-list/DatasetCard.tsx b/src/sections/home/datasets-list/DatasetCard.tsx index 4d2821701..a5ce73147 100644 --- a/src/sections/home/datasets-list/DatasetCard.tsx +++ b/src/sections/home/datasets-list/DatasetCard.tsx @@ -2,9 +2,10 @@ import { DatasetPreview } from '../../../dataset/domain/models/DatasetPreview' 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 styles from './DatasetCard.module.scss' import { DatasetThumbnail } from '../../dataset/dataset-citation/DatasetThumbnail' import { DateHelper } from '../../../shared/domain/helpers/DateHelper' +import { CitationDescription } from '../../dataset/dataset-citation/DatasetCitation' interface DatasetCardProps { dataset: DatasetPreview @@ -12,15 +13,15 @@ interface DatasetCardProps { export function DatasetCard({ dataset }: DatasetCardProps) { return ( -
-
+
+
{dataset.title}
-
-
+
+
-
+
{DateHelper.toDisplayFormat(dataset.releaseOrCreateDate)} + + +
diff --git a/src/sections/home/datasets-list/DatasetsList.module.scss b/src/sections/home/datasets-list/DatasetsList.module.scss index 8c5ecdd31..3076055b7 100644 --- a/src/sections/home/datasets-list/DatasetsList.module.scss +++ b/src/sections/home/datasets-list/DatasetsList.module.scss @@ -1,5 +1,4 @@ @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 { padding:15px; @@ -11,31 +10,3 @@ padding: .5em 1em; background: $dv-warning-box-color; } - -.card { - margin: 6px 0; - border: 1px solid $dv-info-border-color; - padding: 4px 10px; -} - -.card-header { - display: flex; - > * { - margin-right: .5em; - } -} - -.card-thumbnail { - width: 48px; - margin: 4px 12px 6px 0; - font-size: 2.8em; -} - -.card-info { - display: flex; -} - -.date { - color: $dv-subtext-color; - font-size: $dv-font-size-sm; -} \ No newline at end of file diff --git a/tests/component/dataset/domain/models/DatasetPreviewMother.ts b/tests/component/dataset/domain/models/DatasetPreviewMother.ts index a40e4c0d8..9f1b39bd2 100644 --- a/tests/component/dataset/domain/models/DatasetPreviewMother.ts +++ b/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 } from './DatasetMother' +import { DatasetLabelsMother, DatasetVersionMother } from './DatasetMother' export class DatasetPreviewMother { static createMany(count: number): DatasetPreview[] { @@ -12,9 +12,12 @@ export class DatasetPreviewMother { persistentId: faker.datatype.uuid(), title: faker.lorem.sentence(), labels: DatasetLabelsMother.create(), - isDeaccessioned: faker.datatype.boolean(), + isDeaccessioned: false, thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined, releaseOrCreateDate: faker.date.past(), + version: DatasetVersionMother.create(), + citation: + 'Finch, Fiona, 2023, "Darwin\'s Finches", https://doi.org/10.5072/FK2/0YFWKL, Root, DRAFT VERSION', ...props } } @@ -22,4 +25,8 @@ export class DatasetPreviewMother { static createWithThumbnail(): DatasetPreview { return this.create({ thumbnail: faker.image.imageUrl(), isDeaccessioned: false }) } + + static createDeaccessioned(): DatasetPreview { + return this.create({ isDeaccessioned: true }) + } } diff --git a/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx b/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx index 317eda169..6cbee7642 100644 --- a/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx +++ b/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx @@ -1,6 +1,7 @@ import { DatasetPreviewMother } from '../../../dataset/domain/models/DatasetPreviewMother' import { DatasetCard } from '../../../../../src/sections/home/datasets-list/DatasetCard' import { DateHelper } from '../../../../../src/shared/domain/helpers/DateHelper' +import styles from '../../../../../src/sections/home/datasets-list/DatasetCard.module.scss' describe('DatasetCard', () => { it('should render the card', () => { @@ -18,5 +19,19 @@ describe('DatasetCard', () => { .parent('a') .should('have.attr', 'href', `/datasets?persistentId=${dataset.persistentId}`) 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']) + }) + + it('should render the citation with the deaccessioned background if the dataset is deaccessioned', () => { + const dataset = DatasetPreviewMother.createDeaccessioned() + cy.customMount() + + cy.findByText(/Finch, Fiona, 2023, "Darwin's Finches"/) + .should('exist') + .parent() + .should('have.class', styles['citation-box-deaccessioned']) }) }) From 5e3b47c5bf4d45a6094636fa8dccda8ab39b575b Mon Sep 17 00:00:00 2001 From: MellyGray Date: Fri, 1 Dec 2023 17:05:55 +0100 Subject: [PATCH 06/13] feat(DatasetCard): add description --- src/dataset/domain/models/DatasetPreview.ts | 28 +++++++++++++------ .../datasets-list/DatasetCard.module.scss | 4 +++ .../home/datasets-list/DatasetCard.tsx | 1 + .../domain/models/DatasetPreviewMother.ts | 15 +++++++++- .../home/datasets-list/DatasetCard.spec.tsx | 1 + 5 files changed, 39 insertions(+), 10 deletions(-) diff --git a/src/dataset/domain/models/DatasetPreview.ts b/src/dataset/domain/models/DatasetPreview.ts index d38732048..849ba4691 100644 --- a/src/dataset/domain/models/DatasetPreview.ts +++ b/src/dataset/domain/models/DatasetPreview.ts @@ -1,12 +1,22 @@ import { DatasetLabel, DatasetVersion } from './Dataset' -export interface DatasetPreview { - persistentId: string - title: string - version: DatasetVersion - citation: string - labels: DatasetLabel[] - thumbnail?: string - isDeaccessioned: boolean - releaseOrCreateDate: Date +export class DatasetPreview { + constructor( + public persistentId: string, + public title: string, + public version: DatasetVersion, + public citation: string, + public labels: DatasetLabel[], + public isDeaccessioned: boolean, + public releaseOrCreateDate: Date, + public description: string, + public thumbnail?: string + ) {} + + get abbreviatedDescription(): string { + if (this.description.length > 280) { + return `${this.description.substring(0, 280)}...` + } + return this.description + } } diff --git a/src/sections/home/datasets-list/DatasetCard.module.scss b/src/sections/home/datasets-list/DatasetCard.module.scss index 44ce4bc53..116bdf606 100644 --- a/src/sections/home/datasets-list/DatasetCard.module.scss +++ b/src/sections/home/datasets-list/DatasetCard.module.scss @@ -39,9 +39,13 @@ .citation-box { background-color: lighten($dv-primary-color, 51%) ; padding: 4px; + margin-bottom: .5em; + margin-top: 4px; } .citation-box-deaccessioned { background-color: $dv-danger-box-color; padding: 4px; + margin-bottom: .5em; + margin-top: 4px; } \ No newline at end of file diff --git a/src/sections/home/datasets-list/DatasetCard.tsx b/src/sections/home/datasets-list/DatasetCard.tsx index a5ce73147..b0ef1bae0 100644 --- a/src/sections/home/datasets-list/DatasetCard.tsx +++ b/src/sections/home/datasets-list/DatasetCard.tsx @@ -42,6 +42,7 @@ export function DatasetCard({ dataset }: DatasetCardProps) { }> + {dataset.abbreviatedDescription}
diff --git a/tests/component/dataset/domain/models/DatasetPreviewMother.ts b/tests/component/dataset/domain/models/DatasetPreviewMother.ts index 9f1b39bd2..451d32882 100644 --- a/tests/component/dataset/domain/models/DatasetPreviewMother.ts +++ b/tests/component/dataset/domain/models/DatasetPreviewMother.ts @@ -8,7 +8,7 @@ export class DatasetPreviewMother { } static create(props?: Partial): DatasetPreview { - return { + const datasetPreview = { persistentId: faker.datatype.uuid(), title: faker.lorem.sentence(), labels: DatasetLabelsMother.create(), @@ -18,8 +18,21 @@ export class DatasetPreviewMother { version: DatasetVersionMother.create(), citation: 'Finch, Fiona, 2023, "Darwin\'s Finches", https://doi.org/10.5072/FK2/0YFWKL, Root, DRAFT VERSION', + description: faker.lorem.paragraph(), ...props } + + return new DatasetPreview( + datasetPreview.persistentId, + datasetPreview.title, + datasetPreview.version, + datasetPreview.citation, + datasetPreview.labels, + datasetPreview.isDeaccessioned, + datasetPreview.releaseOrCreateDate, + datasetPreview.description, + datasetPreview.thumbnail + ) } static createWithThumbnail(): DatasetPreview { diff --git a/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx b/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx index 6cbee7642..dd67850e7 100644 --- a/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx +++ b/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx @@ -23,6 +23,7 @@ describe('DatasetCard', () => { .should('exist') .parent() .should('have.class', styles['citation-box']) + cy.findByText(dataset.abbreviatedDescription).should('exist') }) it('should render the citation with the deaccessioned background if the dataset is deaccessioned', () => { From ad4f3083a36180bd54b1171d7a616e657b16b33d Mon Sep 17 00:00:00 2001 From: MellyGray Date: Fri, 1 Dec 2023 17:30:33 +0100 Subject: [PATCH 07/13] feat(DatasetCard): adjust skeleton --- .../DatasetJSDataverseRepository.ts | 2 +- .../datasets-list/DatasetCard.module.scss | 6 +++++- .../datasets-list/DatasetsListSkeleton.tsx | 20 +++++++++---------- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts b/src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts index c062faa8d..385099768 100644 --- a/src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts +++ b/src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts @@ -23,7 +23,7 @@ export class DatasetJSDataverseRepository implements DatasetRepository { // TODO - Implement using the js-dataverse-client return new Promise((resolve) => { setTimeout(() => { - resolve(DatasetPreviewMother.createMany(200)) + resolve(DatasetPreviewMother.createMany(10)) }, 1000) }) } diff --git a/src/sections/home/datasets-list/DatasetCard.module.scss b/src/sections/home/datasets-list/DatasetCard.module.scss index 116bdf606..de6e3fe8c 100644 --- a/src/sections/home/datasets-list/DatasetCard.module.scss +++ b/src/sections/home/datasets-list/DatasetCard.module.scss @@ -16,8 +16,12 @@ .thumbnail { width: 48px; - margin: 4px 12px 6px 0; + margin: 8px 12px 6px 0; font-size: 2.8em; + + img { + vertical-align: top; + } } .info { diff --git a/src/sections/home/datasets-list/DatasetsListSkeleton.tsx b/src/sections/home/datasets-list/DatasetsListSkeleton.tsx index a1a28c45c..b07bc39d3 100644 --- a/src/sections/home/datasets-list/DatasetsListSkeleton.tsx +++ b/src/sections/home/datasets-list/DatasetsListSkeleton.tsx @@ -9,16 +9,16 @@ export function DatasetsListSkeleton() {
- - - - - - - - - - + + + + + + + + + +
From e9108031ad6c6540d5d1b2747bf3e5d64fe3f602 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 4 Dec 2023 11:06:38 +0100 Subject: [PATCH 08/13] feat(DatasetCard): refactor component --- .../home/datasets-list/DatasetCard.tsx | 50 ------------------- .../datasets-list/DatasetsList.module.scss | 1 + .../home/datasets-list/DatasetsList.tsx | 2 +- .../DatasetCard.module.scss | 18 ++++--- .../dataset-card/DatasetCard.tsx | 21 ++++++++ .../dataset-card/DatasetCardHeader.tsx | 19 +++++++ .../dataset-card/DatasetCardInfo.tsx | 23 +++++++++ .../dataset-card/DatasetCardThumbnail.tsx | 23 +++++++++ .../datasets-list/DatasetCard.stories.tsx | 6 ++- .../dataset/domain/models/DatasetMother.ts | 19 +++++++ .../domain/models/DatasetPreviewMother.ts | 15 ++++-- .../home/datasets-list/DatasetCard.spec.tsx | 38 -------------- .../home/datasets-list/DatasetsList.spec.tsx | 2 +- .../dataset-card/DatasetCard.spec.tsx | 21 ++++++++ .../dataset-card/DatasetCardHeader.spec.tsx | 16 ++++++ .../dataset-card/DatasetCardInfo.spec.tsx | 28 +++++++++++ .../DatasetCardThumbnail.spec.tsx | 25 ++++++++++ 17 files changed, 224 insertions(+), 103 deletions(-) delete mode 100644 src/sections/home/datasets-list/DatasetCard.tsx rename src/sections/home/datasets-list/{ => dataset-card}/DatasetCard.module.scss (90%) create mode 100644 src/sections/home/datasets-list/dataset-card/DatasetCard.tsx create mode 100644 src/sections/home/datasets-list/dataset-card/DatasetCardHeader.tsx create mode 100644 src/sections/home/datasets-list/dataset-card/DatasetCardInfo.tsx create mode 100644 src/sections/home/datasets-list/dataset-card/DatasetCardThumbnail.tsx delete mode 100644 tests/component/sections/home/datasets-list/DatasetCard.spec.tsx create mode 100644 tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx create mode 100644 tests/component/sections/home/datasets-list/dataset-card/DatasetCardHeader.spec.tsx create mode 100644 tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx create mode 100644 tests/component/sections/home/datasets-list/dataset-card/DatasetCardThumbnail.spec.tsx diff --git a/src/sections/home/datasets-list/DatasetCard.tsx b/src/sections/home/datasets-list/DatasetCard.tsx deleted file mode 100644 index b0ef1bae0..000000000 --- a/src/sections/home/datasets-list/DatasetCard.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { DatasetPreview } from '../../../dataset/domain/models/DatasetPreview' -import { LinkToPage } from '../../shared/link-to-page/LinkToPage' -import { Route } from '../../Route.enum' -import { DatasetLabels } from '../../dataset/dataset-labels/DatasetLabels' -import styles from './DatasetCard.module.scss' -import { DatasetThumbnail } from '../../dataset/dataset-citation/DatasetThumbnail' -import { DateHelper } from '../../../shared/domain/helpers/DateHelper' -import { CitationDescription } from '../../dataset/dataset-citation/DatasetCitation' - -interface DatasetCardProps { - dataset: DatasetPreview -} - -export function DatasetCard({ dataset }: DatasetCardProps) { - return ( -
-
- - {dataset.title} - - -
-
-
- - - -
-
- - {DateHelper.toDisplayFormat(dataset.releaseOrCreateDate)} - - - - - {dataset.abbreviatedDescription} -
-
-
- ) -} diff --git a/src/sections/home/datasets-list/DatasetsList.module.scss b/src/sections/home/datasets-list/DatasetsList.module.scss index 3076055b7..15aff10a5 100644 --- a/src/sections/home/datasets-list/DatasetsList.module.scss +++ b/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; diff --git a/src/sections/home/datasets-list/DatasetsList.tsx b/src/sections/home/datasets-list/DatasetsList.tsx index 4c78ecd40..da13f06d3 100644 --- a/src/sections/home/datasets-list/DatasetsList.tsx +++ b/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 diff --git a/src/sections/home/datasets-list/DatasetCard.module.scss b/src/sections/home/datasets-list/dataset-card/DatasetCard.module.scss similarity index 90% rename from src/sections/home/datasets-list/DatasetCard.module.scss rename to src/sections/home/datasets-list/dataset-card/DatasetCard.module.scss index de6e3fe8c..142f89a6a 100644 --- a/src/sections/home/datasets-list/DatasetCard.module.scss +++ b/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; } \ No newline at end of file diff --git a/src/sections/home/datasets-list/dataset-card/DatasetCard.tsx b/src/sections/home/datasets-list/dataset-card/DatasetCard.tsx new file mode 100644 index 000000000..6fe1f807e --- /dev/null +++ b/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 ( +
+ +
+ + +
+
+ ) +} diff --git a/src/sections/home/datasets-list/dataset-card/DatasetCardHeader.tsx b/src/sections/home/datasets-list/dataset-card/DatasetCardHeader.tsx new file mode 100644 index 000000000..d243cd620 --- /dev/null +++ b/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 ( +
+ + {dataset.title} + + +
+ ) +} diff --git a/src/sections/home/datasets-list/dataset-card/DatasetCardInfo.tsx b/src/sections/home/datasets-list/dataset-card/DatasetCardInfo.tsx new file mode 100644 index 000000000..f3309fd76 --- /dev/null +++ b/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 ( +
+ {DateHelper.toDisplayFormat(dataset.releaseOrCreateDate)} + + + + {dataset.abbreviatedDescription} +
+ ) +} diff --git a/src/sections/home/datasets-list/dataset-card/DatasetCardThumbnail.tsx b/src/sections/home/datasets-list/dataset-card/DatasetCardThumbnail.tsx new file mode 100644 index 000000000..8f631b442 --- /dev/null +++ b/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 ( +
+ + + +
+ ) +} diff --git a/src/stories/home/datasets-list/DatasetCard.stories.tsx b/src/stories/home/datasets-list/DatasetCard.stories.tsx index 6bb6a9c2c..81d3c7170 100644 --- a/src/stories/home/datasets-list/DatasetCard.stories.tsx +++ b/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 = { @@ -15,3 +15,7 @@ type Story = StoryObj export const Default: Story = { render: () => } + +export const Deaccessioned: Story = { + render: () => +} diff --git a/tests/component/dataset/domain/models/DatasetMother.ts b/tests/component/dataset/domain/models/DatasetMother.ts index 245b65a4d..40a07a2e6 100644 --- a/tests/component/dataset/domain/models/DatasetMother.ts +++ b/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", https://doi.org/10.5072/FK2/0YFWKL, Root, DRAFT VERSION' + } + + static createDeaccessioned(): string { + return 'Finch, Fiona, 2023, "Darwin\'s Finches", https://doi.org/10.5072/FK2/0YFWKL, Root, V1, DEACCESSIONED VERSION' + } } export class DatasetMother { diff --git a/tests/component/dataset/domain/models/DatasetPreviewMother.ts b/tests/component/dataset/domain/models/DatasetPreviewMother.ts index 451d32882..458f68bff 100644 --- a/tests/component/dataset/domain/models/DatasetPreviewMother.ts +++ b/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", https://doi.org/10.5072/FK2/0YFWKL, 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() + }) } } diff --git a/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx b/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx deleted file mode 100644 index dd67850e7..000000000 --- a/tests/component/sections/home/datasets-list/DatasetCard.spec.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { DatasetPreviewMother } from '../../../dataset/domain/models/DatasetPreviewMother' -import { DatasetCard } from '../../../../../src/sections/home/datasets-list/DatasetCard' -import { DateHelper } from '../../../../../src/shared/domain/helpers/DateHelper' -import styles from '../../../../../src/sections/home/datasets-list/DatasetCard.module.scss' - -describe('DatasetCard', () => { - it('should render the card', () => { - const dataset = DatasetPreviewMother.createWithThumbnail() - cy.customMount() - - 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}`) - 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') - }) - - it('should render the citation with the deaccessioned background if the dataset is deaccessioned', () => { - const dataset = DatasetPreviewMother.createDeaccessioned() - cy.customMount() - - cy.findByText(/Finch, Fiona, 2023, "Darwin's Finches"/) - .should('exist') - .parent() - .should('have.class', styles['citation-box-deaccessioned']) - }) -}) diff --git a/tests/component/sections/home/datasets-list/DatasetsList.spec.tsx b/tests/component/sections/home/datasets-list/DatasetsList.spec.tsx index 2623da1d7..e126ce245 100644 --- a/tests/component/sections/home/datasets-list/DatasetsList.spec.tsx +++ b/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}`) }) diff --git a/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx b/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx new file mode 100644 index 000000000..4bebfacca --- /dev/null +++ b/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() + + 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') + }) +}) diff --git a/tests/component/sections/home/datasets-list/dataset-card/DatasetCardHeader.spec.tsx b/tests/component/sections/home/datasets-list/dataset-card/DatasetCardHeader.spec.tsx new file mode 100644 index 000000000..5a90c109c --- /dev/null +++ b/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() + + cy.findByText(dataset.title) + .should('exist') + .should('have.attr', 'href', `/datasets?persistentId=${dataset.persistentId}`) + dataset.labels.forEach((label) => { + cy.findByText(label.value).should('exist') + }) + }) +}) diff --git a/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx b/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx new file mode 100644 index 000000000..222c45f1e --- /dev/null +++ b/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx @@ -0,0 +1,28 @@ +import { DatasetPreviewMother } from '../../../../dataset/domain/models/DatasetPreviewMother' +import { DateHelper } from '../../../../../../src/shared/domain/helpers/DateHelper' +import styles from '../../../../../../src/sections/home/datasets-list/dataset-card/DatasetCard.module.scss' +import { DatasetCardInfo } from '../../../../../../src/sections/home/datasets-list/dataset-card/DatasetCardInfo' + +describe('DatasetCardInfo', () => { + it('should render the dataset info', () => { + const dataset = DatasetPreviewMother.create() + cy.customMount() + + 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') + }) + + it('should render the citation with the deaccessioned background if the dataset is deaccessioned', () => { + const dataset = DatasetPreviewMother.createDeaccessioned() + cy.customMount() + + cy.findByText(/Finch, Fiona, 2023, "Darwin's Finches"/) + .should('exist') + .parent() + .should('have.class', styles['citation-box-deaccessioned']) + }) +}) diff --git a/tests/component/sections/home/datasets-list/dataset-card/DatasetCardThumbnail.spec.tsx b/tests/component/sections/home/datasets-list/dataset-card/DatasetCardThumbnail.spec.tsx new file mode 100644 index 000000000..e261e32db --- /dev/null +++ b/tests/component/sections/home/datasets-list/dataset-card/DatasetCardThumbnail.spec.tsx @@ -0,0 +1,25 @@ +import { DatasetPreviewMother } from '../../../../dataset/domain/models/DatasetPreviewMother' +import { DatasetCardThumbnail } from '../../../../../../src/sections/home/datasets-list/dataset-card/DatasetCardThumbnail' + +describe('DatasetCardThumbnail', () => { + it('should render the thumbnail', () => { + const dataset = DatasetPreviewMother.createWithThumbnail() + cy.customMount() + + cy.findByRole('img', { name: dataset.title }) + .should('exist') + .parent('a') + .should('have.attr', 'href', `/datasets?persistentId=${dataset.persistentId}`) + }) + + it('should render the placeholder if the dataset has no thumbnail', () => { + const dataset = DatasetPreviewMother.createWithNoThumbnail() + cy.customMount() + + cy.findByRole('img', { name: 'icon-dataset' }) + .should('exist') + .parent() + .parent('a') + .should('have.attr', 'href', `/datasets?persistentId=${dataset.persistentId}`) + }) +}) From aaeb023d1a633fd485743193b91597bd0cda7b9c Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 4 Dec 2023 11:27:51 +0100 Subject: [PATCH 09/13] fix: contrast-ratio deaccessioned background --- .../home/datasets-list/dataset-card/DatasetCard.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/home/datasets-list/dataset-card/DatasetCard.module.scss b/src/sections/home/datasets-list/dataset-card/DatasetCard.module.scss index 142f89a6a..16b6be8a5 100644 --- a/src/sections/home/datasets-list/dataset-card/DatasetCard.module.scss +++ b/src/sections/home/datasets-list/dataset-card/DatasetCard.module.scss @@ -53,5 +53,5 @@ margin-top: 4px; margin-bottom: .5em; padding: 4px; - background-color: $dv-danger-box-color; + background-color: color.adjust($dv-danger-box-color, $lightness: 6%); } \ No newline at end of file From d847894a60db0b0ca24501897023db2e445a5f25 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Thu, 14 Dec 2023 12:21:43 +0100 Subject: [PATCH 10/13] refactor: move CitationDescription to shared folder --- .../dataset-citation/DatasetCitation.tsx | 42 +---------------- .../dataset-card/DatasetCardInfo.tsx | 2 +- .../shared/citation/CitationDescription.tsx | 42 +++++++++++++++++ .../citation/CitationDescription.spec.tsx | 46 +++++++++++++++++++ 4 files changed, 91 insertions(+), 41 deletions(-) create mode 100644 src/sections/shared/citation/CitationDescription.tsx create mode 100644 tests/component/sections/shared/citation/CitationDescription.spec.tsx diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.tsx b/src/sections/dataset/dataset-citation/DatasetCitation.tsx index eac677feb..5fc95d1b9 100644 --- a/src/sections/dataset/dataset-citation/DatasetCitation.tsx +++ b/src/sections/dataset/dataset-citation/DatasetCitation.tsx @@ -1,9 +1,9 @@ -import { Col, QuestionMarkTooltip, Row } from '@iqss/dataverse-design-system' +import { Col, Row } from '@iqss/dataverse-design-system' 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 { DatasetThumbnail } from './DatasetThumbnail' +import { CitationDescription } from '../../shared/citation/CitationDescription' interface DatasetCitationProps { thumbnail?: string @@ -52,41 +52,3 @@ export function DatasetCitation({ thumbnail, title, citation, version }: Dataset ) } - -export function CitationDescription({ - citation, - version -}: { - citation: string - version: DatasetVersion -}) { - const citationAsReactElement = parse(citation) - - return ( - - {citationAsReactElement} - - - ) -} - -interface CitationDatasetStatusProps { - status: DatasetPublishingStatus -} - -function CitationTooltip({ status }: CitationDatasetStatusProps) { - const { t } = useTranslation('dataset') - - if (status !== DatasetPublishingStatus.RELEASED) { - return ( - <> - {' '} - - - ) - } - return <> -} diff --git a/src/sections/home/datasets-list/dataset-card/DatasetCardInfo.tsx b/src/sections/home/datasets-list/dataset-card/DatasetCardInfo.tsx index f3309fd76..1ed0f32fa 100644 --- a/src/sections/home/datasets-list/dataset-card/DatasetCardInfo.tsx +++ b/src/sections/home/datasets-list/dataset-card/DatasetCardInfo.tsx @@ -1,7 +1,7 @@ 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' +import { CitationDescription } from '../../../shared/citation/CitationDescription' interface DatasetCardInfoProps { dataset: DatasetPreview diff --git a/src/sections/shared/citation/CitationDescription.tsx b/src/sections/shared/citation/CitationDescription.tsx new file mode 100644 index 000000000..e3d99dc36 --- /dev/null +++ b/src/sections/shared/citation/CitationDescription.tsx @@ -0,0 +1,42 @@ +import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset' +import parse from 'html-react-parser' +import styles from '../../dataset/dataset-citation/DatasetCitation.module.scss' +import { useTranslation } from 'react-i18next' +import { QuestionMarkTooltip } from '@iqss/dataverse-design-system' + +interface CitationDescriptionProps { + citation: string + version: DatasetVersion +} + +export function CitationDescription({ citation, version }: CitationDescriptionProps) { + const citationAsReactElement = parse(citation) + + return ( + + {citationAsReactElement} + + + ) +} + +interface CitationTooltipProps { + status: DatasetPublishingStatus +} + +function CitationTooltip({ status }: CitationTooltipProps) { + const { t } = useTranslation('dataset') + + if (status !== DatasetPublishingStatus.RELEASED) { + return ( + <> + {' '} + + + ) + } + return <> +} diff --git a/tests/component/sections/shared/citation/CitationDescription.spec.tsx b/tests/component/sections/shared/citation/CitationDescription.spec.tsx new file mode 100644 index 000000000..54924a7e9 --- /dev/null +++ b/tests/component/sections/shared/citation/CitationDescription.spec.tsx @@ -0,0 +1,46 @@ +import { CitationDescription } from '../../../../../src/sections/shared/citation/CitationDescription' +import { DatasetMother } from '../../../dataset/domain/models/DatasetMother' +import { + DatasetPublishingStatus, + DatasetVersion +} from '../../../../../src/dataset/domain/models/Dataset' + +describe('CitationDescription', () => { + it('renders the citation', () => { + const citation = 'This is a citation' + cy.customMount( + + ) + + cy.findByText(citation).should('exist') + }) + + it('renders the citation with a tooltip when the version is not released', () => { + const citation = 'This is a citation' + const dataset = DatasetMother.create({ + version: new DatasetVersion( + 1, + DatasetPublishingStatus.DRAFT, + true, + false, + DatasetPublishingStatus.DRAFT + ) + }) + cy.customMount() + + cy.findByText(citation).should('exist') + cy.findByRole('img', { name: 'tooltip icon' }).should('exist').trigger('mouseover') + cy.findByText( + /DRAFT VERSION will be replaced in the citation with the selected version once the dataset has been published./ + ).should('exist') + }) + + it('does not render the tooltip when the version is released', () => { + const citation = 'This is a citation' + const dataset = DatasetMother.create() + cy.customMount() + + cy.findByText(citation).should('exist') + cy.findByRole('img', { name: 'tooltip icon' }).should('not.exist') + }) +}) From 6da0f0afffc77524447d5eab35a2b2846b496b95 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Thu, 14 Dec 2023 13:45:07 +0100 Subject: [PATCH 11/13] feat(DatasetPreviewMother): mock randomly deaccessioned of draft datasets previews --- .../DatasetJSDataverseRepository.ts | 2 +- src/stories/dataset/DatasetMockRepository.ts | 2 +- .../home/datasets-list/DatasetCard.stories.tsx | 2 +- .../dataset/domain/models/DatasetMother.ts | 8 ++++++++ .../domain/models/DatasetPreviewMother.ts | 18 +++++++++++++++++- .../dataset-card/DatasetCard.spec.tsx | 2 +- .../dataset-card/DatasetCardInfo.spec.tsx | 2 +- 7 files changed, 30 insertions(+), 6 deletions(-) diff --git a/src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts b/src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts index 385099768..59ea3c23a 100644 --- a/src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts +++ b/src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts @@ -23,7 +23,7 @@ export class DatasetJSDataverseRepository implements DatasetRepository { // TODO - Implement using the js-dataverse-client return new Promise((resolve) => { setTimeout(() => { - resolve(DatasetPreviewMother.createMany(10)) + resolve(DatasetPreviewMother.createManyRealistic(10)) }, 1000) }) } diff --git a/src/stories/dataset/DatasetMockRepository.ts b/src/stories/dataset/DatasetMockRepository.ts index 263d789a9..9ffa083ed 100644 --- a/src/stories/dataset/DatasetMockRepository.ts +++ b/src/stories/dataset/DatasetMockRepository.ts @@ -11,7 +11,7 @@ export class DatasetMockRepository implements DatasetRepository { getAll(paginationInfo: DatasetPaginationInfo): Promise { return new Promise((resolve) => { setTimeout(() => { - resolve(DatasetPreviewMother.createMany(paginationInfo.pageSize)) + resolve(DatasetPreviewMother.createManyRealistic(paginationInfo.pageSize)) }, 1000) }) } diff --git a/src/stories/home/datasets-list/DatasetCard.stories.tsx b/src/stories/home/datasets-list/DatasetCard.stories.tsx index 81d3c7170..26f6af0da 100644 --- a/src/stories/home/datasets-list/DatasetCard.stories.tsx +++ b/src/stories/home/datasets-list/DatasetCard.stories.tsx @@ -13,7 +13,7 @@ export default meta type Story = StoryObj export const Default: Story = { - render: () => + render: () => } export const Deaccessioned: Story = { diff --git a/tests/component/dataset/domain/models/DatasetMother.ts b/tests/component/dataset/domain/models/DatasetMother.ts index 40a07a2e6..6c2a01f28 100644 --- a/tests/component/dataset/domain/models/DatasetMother.ts +++ b/tests/component/dataset/domain/models/DatasetMother.ts @@ -192,6 +192,10 @@ export class DatasetLockMother { export class DatasetLabelsMother { static create(): DatasetLabel[] { + return [{ value: 'Version 1.0', semanticMeaning: DatasetLabelSemanticMeaning.FILE }] + } + + static createDraft(): DatasetLabel[] { return [ { value: DatasetLabelValue.UNPUBLISHED, @@ -213,6 +217,10 @@ export class DatasetLabelsMother { export class DatasetCitationMother { static create(): string { + return 'Finch, Fiona, 2023, "Darwin\'s Finches", https://doi.org/10.5072/FK2/0YFWKL, Root, V1' + } + + static createDraft(): string { return 'Finch, Fiona, 2023, "Darwin\'s Finches", https://doi.org/10.5072/FK2/0YFWKL, Root, DRAFT VERSION' } diff --git a/tests/component/dataset/domain/models/DatasetPreviewMother.ts b/tests/component/dataset/domain/models/DatasetPreviewMother.ts index 458f68bff..83e080ff9 100644 --- a/tests/component/dataset/domain/models/DatasetPreviewMother.ts +++ b/tests/component/dataset/domain/models/DatasetPreviewMother.ts @@ -7,12 +7,16 @@ export class DatasetPreviewMother { return Array.from({ length: count }, () => this.create()) } + static createManyRealistic(count: number): DatasetPreview[] { + return Array.from({ length: count }, () => this.createRealistic()) + } + static create(props?: Partial): DatasetPreview { const datasetPreview = { persistentId: faker.datatype.uuid(), title: faker.lorem.sentence(), labels: DatasetLabelsMother.create(), - isDeaccessioned: false, + isDeaccessioned: faker.datatype.boolean(), thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined, releaseOrCreateDate: faker.date.past(), version: DatasetVersionMother.create(), @@ -34,6 +38,18 @@ export class DatasetPreviewMother { ) } + static createRealistic(): DatasetPreview { + return faker.datatype.boolean() ? this.createDraft() : this.createDeaccessioned() + } + + static createDraft(): DatasetPreview { + return this.create({ + isDeaccessioned: false, + labels: DatasetLabelsMother.createDraft(), + citation: DatasetCitationMother.createDraft() + }) + } + static createWithThumbnail(): DatasetPreview { return this.create({ thumbnail: faker.image.imageUrl(), isDeaccessioned: false }) } diff --git a/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx b/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx index 4bebfacca..d0b2750f6 100644 --- a/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx +++ b/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx @@ -5,7 +5,7 @@ import styles from '../../../../../../src/sections/home/datasets-list/dataset-ca describe('DatasetCard', () => { it('should render the card', () => { - const dataset = DatasetPreviewMother.create() + const dataset = DatasetPreviewMother.createDraft() cy.customMount() cy.findByText(dataset.title).should('exist') diff --git a/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx b/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx index 222c45f1e..5563fe412 100644 --- a/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx +++ b/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx @@ -5,7 +5,7 @@ import { DatasetCardInfo } from '../../../../../../src/sections/home/datasets-li describe('DatasetCardInfo', () => { it('should render the dataset info', () => { - const dataset = DatasetPreviewMother.create() + const dataset = DatasetPreviewMother.createDraft() cy.customMount() cy.findByText(DateHelper.toDisplayFormat(dataset.releaseOrCreateDate)).should('exist') From efbe448ba2d2d4b0bf26d62c307041cd489a196c Mon Sep 17 00:00:00 2001 From: MellyGray Date: Thu, 14 Dec 2023 13:58:57 +0100 Subject: [PATCH 12/13] fix: remove tooltip from dataset card citation --- .../dataset-citation/DatasetCitation.tsx | 6 ++- .../DatasetCitationTooltip.tsx | 24 ++++++++++ .../dataset-card/DatasetCardInfo.tsx | 2 +- .../shared/citation/CitationDescription.tsx | 35 +-------------- .../citation/CitationDescription.spec.tsx | 44 +++---------------- 5 files changed, 37 insertions(+), 74 deletions(-) create mode 100644 src/sections/dataset/dataset-citation/DatasetCitationTooltip.tsx diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.tsx b/src/sections/dataset/dataset-citation/DatasetCitation.tsx index 5fc95d1b9..f1004960d 100644 --- a/src/sections/dataset/dataset-citation/DatasetCitation.tsx +++ b/src/sections/dataset/dataset-citation/DatasetCitation.tsx @@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next' import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset' import { DatasetThumbnail } from './DatasetThumbnail' import { CitationDescription } from '../../shared/citation/CitationDescription' +import { DatasetCitationTooltip } from './DatasetCitationTooltip' interface DatasetCitationProps { thumbnail?: string @@ -32,7 +33,10 @@ export function DatasetCitation({ thumbnail, title, citation, version }: Dataset - + + + +
diff --git a/src/sections/dataset/dataset-citation/DatasetCitationTooltip.tsx b/src/sections/dataset/dataset-citation/DatasetCitationTooltip.tsx new file mode 100644 index 000000000..0ae1676b1 --- /dev/null +++ b/src/sections/dataset/dataset-citation/DatasetCitationTooltip.tsx @@ -0,0 +1,24 @@ +import { DatasetPublishingStatus } from '../../../dataset/domain/models/Dataset' +import { useTranslation } from 'react-i18next' +import { QuestionMarkTooltip } from '@iqss/dataverse-design-system' + +interface DatasetCitationTooltipProps { + status: DatasetPublishingStatus +} + +export function DatasetCitationTooltip({ status }: DatasetCitationTooltipProps) { + const { t } = useTranslation('dataset') + + if (status !== DatasetPublishingStatus.RELEASED) { + return ( + <> + {' '} + + + ) + } + return <> +} diff --git a/src/sections/home/datasets-list/dataset-card/DatasetCardInfo.tsx b/src/sections/home/datasets-list/dataset-card/DatasetCardInfo.tsx index 1ed0f32fa..76a03a645 100644 --- a/src/sections/home/datasets-list/dataset-card/DatasetCardInfo.tsx +++ b/src/sections/home/datasets-list/dataset-card/DatasetCardInfo.tsx @@ -15,7 +15,7 @@ export function DatasetCardInfo({ dataset }: DatasetCardInfoProps) { className={ dataset.isDeaccessioned ? styles['citation-box-deaccessioned'] : styles['citation-box'] }> - + {dataset.abbreviatedDescription}
diff --git a/src/sections/shared/citation/CitationDescription.tsx b/src/sections/shared/citation/CitationDescription.tsx index e3d99dc36..eb2730bd2 100644 --- a/src/sections/shared/citation/CitationDescription.tsx +++ b/src/sections/shared/citation/CitationDescription.tsx @@ -1,42 +1,11 @@ -import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset' import parse from 'html-react-parser' -import styles from '../../dataset/dataset-citation/DatasetCitation.module.scss' -import { useTranslation } from 'react-i18next' -import { QuestionMarkTooltip } from '@iqss/dataverse-design-system' interface CitationDescriptionProps { citation: string - version: DatasetVersion } -export function CitationDescription({ citation, version }: CitationDescriptionProps) { +export function CitationDescription({ citation }: CitationDescriptionProps) { const citationAsReactElement = parse(citation) - return ( - - {citationAsReactElement} - - - ) -} - -interface CitationTooltipProps { - status: DatasetPublishingStatus -} - -function CitationTooltip({ status }: CitationTooltipProps) { - const { t } = useTranslation('dataset') - - if (status !== DatasetPublishingStatus.RELEASED) { - return ( - <> - {' '} - - - ) - } - return <> + return {citationAsReactElement} } diff --git a/tests/component/sections/shared/citation/CitationDescription.spec.tsx b/tests/component/sections/shared/citation/CitationDescription.spec.tsx index 54924a7e9..ce5b1a57e 100644 --- a/tests/component/sections/shared/citation/CitationDescription.spec.tsx +++ b/tests/component/sections/shared/citation/CitationDescription.spec.tsx @@ -1,46 +1,12 @@ import { CitationDescription } from '../../../../../src/sections/shared/citation/CitationDescription' -import { DatasetMother } from '../../../dataset/domain/models/DatasetMother' -import { - DatasetPublishingStatus, - DatasetVersion -} from '../../../../../src/dataset/domain/models/Dataset' describe('CitationDescription', () => { it('renders the citation', () => { - const citation = 'This is a citation' - cy.customMount( - - ) + const citation = + 'Finch, Fiona, 2023, "Darwin\'s Finches", https://doi.org/10.5072/FK2/0YFWKL, Root, V1' + cy.customMount() - cy.findByText(citation).should('exist') - }) - - it('renders the citation with a tooltip when the version is not released', () => { - const citation = 'This is a citation' - const dataset = DatasetMother.create({ - version: new DatasetVersion( - 1, - DatasetPublishingStatus.DRAFT, - true, - false, - DatasetPublishingStatus.DRAFT - ) - }) - cy.customMount() - - cy.findByText(citation).should('exist') - cy.findByRole('img', { name: 'tooltip icon' }).should('exist').trigger('mouseover') - cy.findByText( - /DRAFT VERSION will be replaced in the citation with the selected version once the dataset has been published./ - ).should('exist') - }) - - it('does not render the tooltip when the version is released', () => { - const citation = 'This is a citation' - const dataset = DatasetMother.create() - cy.customMount() - - cy.findByText(citation).should('exist') - cy.findByRole('img', { name: 'tooltip icon' }).should('not.exist') + cy.findByText(/Finch, Fiona, 2023, "Darwin's Finches",/).should('exist') + cy.findByRole('link', { name: 'https://doi.org/10.5072/FK2/0YFWKL' }).should('exist') }) }) From 44ac492da9a754cbd5409426818611e3a644b744 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Thu, 14 Dec 2023 15:59:06 +0100 Subject: [PATCH 13/13] feat(DatasetCard): add dataset icon at the top right --- .../dataset/dataset-citation/DatasetCitation.tsx | 2 +- .../DatasetIcon.module.scss} | 7 ------- src/sections/dataset/dataset-icon/DatasetIcon.tsx | 10 ++++++++++ .../dataset-thumbnail/DatasetThumbnail.module.scss | 6 ++++++ .../DatasetThumbnail.tsx | 8 ++------ .../dataset-card/DatasetCard.module.scss | 14 ++++++++++++++ .../dataset-card/DatasetCardHeader.tsx | 14 ++++++++++---- .../dataset-card/DatasetCardThumbnail.tsx | 2 +- .../dataset/dataset-icon/DatasetIcon.spec.tsx | 9 +++++++++ .../DatasetThumbnail.spec.tsx | 2 +- .../dataset-card/DatasetCard.spec.tsx | 4 ++-- .../dataset-card/DatasetCardHeader.spec.tsx | 1 + 12 files changed, 57 insertions(+), 22 deletions(-) rename src/sections/dataset/{dataset-citation/DatasetThumbnail.module.scss => dataset-icon/DatasetIcon.module.scss} (64%) create mode 100644 src/sections/dataset/dataset-icon/DatasetIcon.tsx create mode 100644 src/sections/dataset/dataset-thumbnail/DatasetThumbnail.module.scss rename src/sections/dataset/{dataset-citation => dataset-thumbnail}/DatasetThumbnail.tsx (70%) create mode 100644 tests/component/sections/dataset/dataset-icon/DatasetIcon.spec.tsx rename tests/component/sections/dataset/{dataset-citation => dataset-thumbanil}/DatasetThumbnail.spec.tsx (95%) diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.tsx b/src/sections/dataset/dataset-citation/DatasetCitation.tsx index f1004960d..9f1450830 100644 --- a/src/sections/dataset/dataset-citation/DatasetCitation.tsx +++ b/src/sections/dataset/dataset-citation/DatasetCitation.tsx @@ -2,7 +2,7 @@ import { Col, Row } from '@iqss/dataverse-design-system' import styles from './DatasetCitation.module.scss' import { useTranslation } from 'react-i18next' import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset' -import { DatasetThumbnail } from './DatasetThumbnail' +import { DatasetThumbnail } from '../dataset-thumbnail/DatasetThumbnail' import { CitationDescription } from '../../shared/citation/CitationDescription' import { DatasetCitationTooltip } from './DatasetCitationTooltip' diff --git a/src/sections/dataset/dataset-citation/DatasetThumbnail.module.scss b/src/sections/dataset/dataset-icon/DatasetIcon.module.scss similarity index 64% rename from src/sections/dataset/dataset-citation/DatasetThumbnail.module.scss rename to src/sections/dataset/dataset-icon/DatasetIcon.module.scss index f29c32553..4025c0bbe 100644 --- a/src/sections/dataset/dataset-citation/DatasetThumbnail.module.scss +++ b/src/sections/dataset/dataset-icon/DatasetIcon.module.scss @@ -3,11 +3,4 @@ .icon { color: $dv-info-border-color; line-height: 1.1; -} - -.preview-image { - width: 100%; - max-width: 140px; - height: auto; - max-height: 140px; } \ No newline at end of file diff --git a/src/sections/dataset/dataset-icon/DatasetIcon.tsx b/src/sections/dataset/dataset-icon/DatasetIcon.tsx new file mode 100644 index 000000000..ac68ba92b --- /dev/null +++ b/src/sections/dataset/dataset-icon/DatasetIcon.tsx @@ -0,0 +1,10 @@ +import styles from './DatasetIcon.module.scss' +import { Icon, IconName } from '@iqss/dataverse-design-system' + +export function DatasetIcon() { + return ( +
+ +
+ ) +} diff --git a/src/sections/dataset/dataset-thumbnail/DatasetThumbnail.module.scss b/src/sections/dataset/dataset-thumbnail/DatasetThumbnail.module.scss new file mode 100644 index 000000000..a464f4dc4 --- /dev/null +++ b/src/sections/dataset/dataset-thumbnail/DatasetThumbnail.module.scss @@ -0,0 +1,6 @@ +.preview-image { + width: 100%; + max-width: 140px; + height: auto; + max-height: 140px; +} \ No newline at end of file diff --git a/src/sections/dataset/dataset-citation/DatasetThumbnail.tsx b/src/sections/dataset/dataset-thumbnail/DatasetThumbnail.tsx similarity index 70% rename from src/sections/dataset/dataset-citation/DatasetThumbnail.tsx rename to src/sections/dataset/dataset-thumbnail/DatasetThumbnail.tsx index 922aa57da..628cdd8ac 100644 --- a/src/sections/dataset/dataset-citation/DatasetThumbnail.tsx +++ b/src/sections/dataset/dataset-thumbnail/DatasetThumbnail.tsx @@ -1,5 +1,5 @@ import styles from './DatasetThumbnail.module.scss' -import { Icon, IconName } from '@iqss/dataverse-design-system' +import { DatasetIcon } from '../dataset-icon/DatasetIcon' interface DatasetThumbnailProps { thumbnail?: string @@ -12,9 +12,5 @@ export function DatasetThumbnail({ thumbnail, title, isDeaccessioned }: DatasetT return {title} } - return ( -
- -
- ) + return } diff --git a/src/sections/home/datasets-list/dataset-card/DatasetCard.module.scss b/src/sections/home/datasets-list/dataset-card/DatasetCard.module.scss index 16b6be8a5..92f7696b2 100644 --- a/src/sections/home/datasets-list/dataset-card/DatasetCard.module.scss +++ b/src/sections/home/datasets-list/dataset-card/DatasetCard.module.scss @@ -10,12 +10,26 @@ .header { display: flex; + justify-content: space-between; +} + +.title { + display: flex; > * { margin-right: .5em; } } +.icon { + margin-top: 2px; + font-size: 1.3em; + + > div >span { + margin-right: 0; + } +} + .thumbnail { width: 48px; margin: 8px 12px 6px 0; diff --git a/src/sections/home/datasets-list/dataset-card/DatasetCardHeader.tsx b/src/sections/home/datasets-list/dataset-card/DatasetCardHeader.tsx index d243cd620..9e927b2fc 100644 --- a/src/sections/home/datasets-list/dataset-card/DatasetCardHeader.tsx +++ b/src/sections/home/datasets-list/dataset-card/DatasetCardHeader.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 { DatasetPreview } from '../../../../dataset/domain/models/DatasetPreview' +import { DatasetIcon } from '../../../dataset/dataset-icon/DatasetIcon' interface DatasetCardHeaderProps { dataset: DatasetPreview @@ -10,10 +11,15 @@ interface DatasetCardHeaderProps { export function DatasetCardHeader({ dataset }: DatasetCardHeaderProps) { return (
- - {dataset.title} - - +
+ + {dataset.title} + + +
+
+ +
) } diff --git a/src/sections/home/datasets-list/dataset-card/DatasetCardThumbnail.tsx b/src/sections/home/datasets-list/dataset-card/DatasetCardThumbnail.tsx index 8f631b442..cba65b215 100644 --- a/src/sections/home/datasets-list/dataset-card/DatasetCardThumbnail.tsx +++ b/src/sections/home/datasets-list/dataset-card/DatasetCardThumbnail.tsx @@ -2,7 +2,7 @@ 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' +import { DatasetThumbnail } from '../../../dataset/dataset-thumbnail/DatasetThumbnail' interface DatasetCardThumbnailProps { dataset: DatasetPreview diff --git a/tests/component/sections/dataset/dataset-icon/DatasetIcon.spec.tsx b/tests/component/sections/dataset/dataset-icon/DatasetIcon.spec.tsx new file mode 100644 index 000000000..163759a50 --- /dev/null +++ b/tests/component/sections/dataset/dataset-icon/DatasetIcon.spec.tsx @@ -0,0 +1,9 @@ +import { DatasetIcon } from '../../../../../src/sections/dataset/dataset-icon/DatasetIcon' + +describe('DatasetIcon', () => { + it('renders the dataset icon', () => { + cy.customMount() + + cy.findByLabelText('icon-dataset').should('exist') + }) +}) diff --git a/tests/component/sections/dataset/dataset-citation/DatasetThumbnail.spec.tsx b/tests/component/sections/dataset/dataset-thumbanil/DatasetThumbnail.spec.tsx similarity index 95% rename from tests/component/sections/dataset/dataset-citation/DatasetThumbnail.spec.tsx rename to tests/component/sections/dataset/dataset-thumbanil/DatasetThumbnail.spec.tsx index 5cb2ba9bf..1bb47523e 100644 --- a/tests/component/sections/dataset/dataset-citation/DatasetThumbnail.spec.tsx +++ b/tests/component/sections/dataset/dataset-thumbanil/DatasetThumbnail.spec.tsx @@ -1,4 +1,4 @@ -import { DatasetThumbnail } from '../../../../../src/sections/dataset/dataset-citation/DatasetThumbnail' +import { DatasetThumbnail } from '../../../../../src/sections/dataset/dataset-thumbnail/DatasetThumbnail' describe('DatasetThumbnail', () => { it('renders the dataset icon when there is no thumbnail', () => { diff --git a/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx b/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx index d0b2750f6..8b66c37d1 100644 --- a/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx +++ b/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx @@ -5,12 +5,12 @@ import styles from '../../../../../../src/sections/home/datasets-list/dataset-ca describe('DatasetCard', () => { it('should render the card', () => { - const dataset = DatasetPreviewMother.createDraft() + const dataset = DatasetPreviewMother.createWithThumbnail() cy.customMount() cy.findByText(dataset.title).should('exist') - cy.findByRole('img').should('exist') + cy.findByRole('img', { name: dataset.title }).should('exist') cy.findByText(DateHelper.toDisplayFormat(dataset.releaseOrCreateDate)).should('exist') cy.findByText(/Finch, Fiona, 2023, "Darwin's Finches"/) .should('exist') diff --git a/tests/component/sections/home/datasets-list/dataset-card/DatasetCardHeader.spec.tsx b/tests/component/sections/home/datasets-list/dataset-card/DatasetCardHeader.spec.tsx index 5a90c109c..1e7773dfc 100644 --- a/tests/component/sections/home/datasets-list/dataset-card/DatasetCardHeader.spec.tsx +++ b/tests/component/sections/home/datasets-list/dataset-card/DatasetCardHeader.spec.tsx @@ -12,5 +12,6 @@ describe('DatasetCardHeader', () => { dataset.labels.forEach((label) => { cy.findByText(label.value).should('exist') }) + cy.findByLabelText('icon-dataset').should('exist') }) })