diff --git a/COMPONENTS_INVENTORY.md b/COMPONENTS_INVENTORY.md index 898b2951..029910a5 100644 --- a/COMPONENTS_INVENTORY.md +++ b/COMPONENTS_INVENTORY.md @@ -135,5 +135,5 @@ This document provides a comprehensive inventory of all components, services, te --- -*Last updated: December 8, 2025* +*Last updated: December 12, 2025* *Repository: [GetDKAN/cmsds-open-data-components](https://github.com/GetDKAN/cmsds-open-data-components)* diff --git a/src/components/DatasetDate/dataset-date.scss b/src/components/DatasetDate/dataset-date.scss new file mode 100644 index 00000000..66d428a4 --- /dev/null +++ b/src/components/DatasetDate/dataset-date.scss @@ -0,0 +1,15 @@ +.dataset-date { + .dataset-date-item { + white-space: nowrap; + + .ds-c-tooltip__container { + position: relative; + bottom: 10px; + width: 20px; + display: inline-block; + } + } + & > .bullet-point { + line-height: 2.2rem; + } +} \ No newline at end of file diff --git a/src/components/DatasetDate/datasetdate.test.tsx b/src/components/DatasetDate/datasetdate.test.tsx index 12d147a8..2890c8b6 100644 --- a/src/components/DatasetDate/datasetdate.test.tsx +++ b/src/components/DatasetDate/datasetdate.test.tsx @@ -59,16 +59,16 @@ describe('', () => { modified: '2023-02-01', released: '2023-01-01' }} - updatedBoldLabel={true} + modifiedBoldLabel={true} releasedBoldLabel={true} /> ); - const modifiedContainer = screen.getByText((content, element) => element?.textContent === 'Last Modified: February 1, 2023').closest('div'); - const releasedContainer = screen.getByText((content, element) => element?.textContent === 'Released: January 1, 2023').closest('div'); + const modifiedContainer = screen.getByText((content, element) => element?.textContent === 'Last Modified: February 1, 2023').closest('span'); + const releasedContainer = screen.getByText((content, element) => element?.textContent === 'Released: January 1, 2023').closest('span'); - expect(modifiedContainer).toHaveClass('dataset-date-item bold-label'); - expect(releasedContainer).toHaveClass('dataset-date-item bold-label'); + expect(modifiedContainer).toHaveClass('dataset-date-item-label ds-u-font-weight--bold'); + expect(releasedContainer).toHaveClass('dataset-date-item-label ds-u-font-weight--bold'); }); test('Disables tooltips when displayTooltips is false', () => { diff --git a/src/components/DatasetDate/index.tsx b/src/components/DatasetDate/index.tsx index b4645c16..b60f1ca7 100644 --- a/src/components/DatasetDate/index.tsx +++ b/src/components/DatasetDate/index.tsx @@ -1,5 +1,8 @@ import React from 'react'; import DatasetDateItem from '../DatasetDateItem'; +import { JSX } from 'react/jsx-runtime'; +import './dataset-date.scss' + type DateObject = { modified?: string; @@ -9,7 +12,7 @@ type DateObject = { type DatasetDateProps = { date: DateObject; - updatedBoldLabel?: boolean; + modifiedBoldLabel?: boolean; releasedBoldLabel?: boolean; refreshBoldLabel?: boolean; displayTooltips?: boolean; @@ -18,55 +21,32 @@ type DatasetDateProps = { const DatasetDate = (props: DatasetDateProps) => { const { date, - updatedBoldLabel = false, + modifiedBoldLabel = false, releasedBoldLabel = false, refreshBoldLabel = false, displayTooltips = true } = props; - const { modified, released, refresh } = date; - // Create an array of date items to render - const dateItems = []; - - if (modified) { - dateItems.push( - - ); - } - - if (released) { - dateItems.push( - - ); - } + const dateItems: JSX.Element[] = []; - if (refresh) { - dateItems.push( - - ); - } + Object.entries(date).forEach(([key, value]) => { + if (value) { + const bold = (key === "modified" && modifiedBoldLabel) || (key === "released" && releasedBoldLabel) || (key === "refresh" && refreshBoldLabel); + dateItems.push( + + ) + } + }) return ( -
+
{dateItems.map((item, index) => ( {item} diff --git a/src/components/DatasetDateItem/datasetdateitem.test.tsx b/src/components/DatasetDateItem/datasetdateitem.test.tsx index 26e91ebf..3c43320f 100644 --- a/src/components/DatasetDateItem/datasetdateitem.test.tsx +++ b/src/components/DatasetDateItem/datasetdateitem.test.tsx @@ -54,8 +54,8 @@ describe('', () => { const container = screen.getByText((content, element) => { return element?.textContent === 'Last Modified: February 1, 2023'; - }).closest('div'); - expect(container).toHaveClass('dataset-date-item bold-label'); + }).closest('span'); + expect(container).toHaveClass('dataset-date-item-label ds-u-font-weight--bold'); }); test('Shows tooltip when displayTooltips is true', () => { diff --git a/src/components/DatasetDateItem/index.tsx b/src/components/DatasetDateItem/index.tsx index 3f51543e..323153d7 100644 --- a/src/components/DatasetDateItem/index.tsx +++ b/src/components/DatasetDateItem/index.tsx @@ -38,14 +38,14 @@ const DatasetDateItem = (props: DatasetDateItemProps) => { }; return ( -
- +
+ {dateText[type]}: {displayTooltips === true && ( diff --git a/src/templates/Dataset/index.tsx b/src/templates/Dataset/index.tsx index da8a78f8..9a5079ed 100644 --- a/src/templates/Dataset/index.tsx +++ b/src/templates/Dataset/index.tsx @@ -21,6 +21,7 @@ import DataTableContext from './DataTableContext'; import DatasetDescription from '../../components/DatasetDescription'; import { acaToParams } from '../../utilities/aca'; import { ACAContext } from '../../utilities/ACAContext'; +import DatasetDate from '../../components/DatasetDate'; const getDataDictionary = (dataDictionaryUrl: string) => { const { ACA } = useContext(ACAContext); @@ -57,6 +58,7 @@ const Dataset = ({ updateAriaLive, showRowLimitNotice = false, tabHrefPrepend = '', + showDateDetails = false, }: DatasetPageType) => { const tabHref = `/dataset/${id}`; const options = location.search @@ -145,6 +147,7 @@ const Dataset = ({ const displayDataDictionaryTab = ((distribution.data && distribution.data.describedBy && distribution.data.describedByType === 'application/vnd.tableschema+json') || (datasetSitewideDictionary && datasetSitewideDictionary.length > 0)) as boolean; + const date = {modified: dataset.modified, released: dataset.released, refresh: dataset.nextUpdateDate}; return ( <> {dataset.error ? ( @@ -155,8 +158,15 @@ const Dataset = ({

{title}

-
-

Updated

+
+ {showDateDetails ? + : +

Updated

} +