From 44ac492da9a754cbd5409426818611e3a644b744 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Thu, 14 Dec 2023 15:59:06 +0100 Subject: [PATCH] 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') }) })