WCMS-26910: Add support for multiple dates on dataset template

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)*

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

src/components/DatasetDate/datasetdate.test.tsx

@@ -59,16 +59,16 @@ describe('<DatasetDate />', () => {
           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', () => {

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(
-      <DatasetDateItem 
-        key="modified"
-        displayTooltips={displayTooltips} 
-        type='modified' 
-        date={modified} 
-        boldLabel={updatedBoldLabel} 
-      />
-    );
-  }
-
-  if (released) {
-    dateItems.push(
-      <DatasetDateItem 
-        key="released"
-        displayTooltips={displayTooltips} 
-        type='released' 
-        date={released} 
-        boldLabel={releasedBoldLabel} 
-      />
-    );
-  }
+  const dateItems: JSX.Element[] = [];
 
-  if (refresh) {
-    dateItems.push(
-      <DatasetDateItem 
-        key="refresh"
-        displayTooltips={displayTooltips} 
-        type='refresh' 
-        date={refresh} 
-        boldLabel={refreshBoldLabel} 
-      />
-    );
-  }
+  Object.entries(date).forEach(([key, value]) => {
+    if (value) {
+      const bold = (key === "modified" && modifiedBoldLabel) || (key === "released" && releasedBoldLabel) || (key === "refresh" && refreshBoldLabel);
+      dateItems.push(
+        <DatasetDateItem
+          key={key}
+          type={key as any}
+          displayTooltips={displayTooltips}
+          date={value}
+          boldLabel={bold} 
+        />
+      )
+    }
+  })
 
   return (
-    <div className='dataset-date'>
+    <div className='dataset-date ds-u-display--flex ds-u-font-size--sm ds-u-align-items--start'>
       {dateItems.map((item, index) => (
         <React.Fragment key={index}>
           {item}

src/components/DatasetDateItem/datasetdateitem.test.tsx

@@ -54,8 +54,8 @@ describe('<DatasetDateItem />', () => {
 
     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', () => {

src/components/DatasetDateItem/index.tsx

@@ -38,14 +38,14 @@ const DatasetDateItem = (props: DatasetDateItemProps) => {
   };
 
   return (
-    <div className={`dataset-date-item${boldLabel ? ' bold-label' : ''}`}>
-      <span className='dataset-data-item-label'>
+    <div className='dataset-date-item'>
+      <span className={`dataset-date-item-label ${boldLabel ? 'ds-u-font-weight--bold' : ''}`}>
         <span>{dateText[type]}</span>: <TransformedDate date={date} />
       </span>
       {displayTooltips === true && (
         <Tooltip
           aria-label={dateText[type]}
-          className="ds-c-tooltip__trigger-icon ds-u-display--inline ds-u-padding-left--0 ds-uw-padding-right--0"
+          className="ds-c-tooltip__trigger-icon ds-u-display--inline ds-u-padding-left--0 ds-uw-padding-right--0 ds-u-font-weight--normal"
           title={tooltipContent[type]}
           placement="top"
         >

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 = ({
             <div className={'ds-l-md-col--9'}>
               <h1 className="ds-text-heading--3xl">{title}</h1>
             </div>
-            <div className={'ds-l-md-col--12 ds-u-margin-y--1 ds-u-text-align--right'}>
-              <p className="ds-u-margin--0">Updated <TransformedDate date={dataset.modified} /></p>
+            <div className={'ds-l-md-col--12 ds-u-margin-y--2'}>
+              {showDateDetails ? 
+                <DatasetDate 
+                  date={date}
+                  modifiedBoldLabel
+                  displayTooltips
+                /> :
+                 <p className="ds-u-margin--0 ds-u-font-weight--bold">Updated <TransformedDate date={date.modified} /></p>}
+
             </div>
             <div className={'ds-l-md-col--9'}>
               <DatasetDescription

src/types/dataset.ts

@@ -24,6 +24,8 @@ export type DatasetType = {
   describedBy?: any, // TODO
   describedByType?: any, //TODO
   modified: string,
+  released?: string,
+  nextUpdateDate?: string,
 }
 
 export type ConditionType = {
@@ -74,6 +76,7 @@ export type DatasetPageType = {
   updateAriaLive?: Function,
   showRowLimitNotice?: boolean,
   tabHrefPrepend?: string,
+  showDateDetails?: boolean,
 }