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
}
+