feat(Timeline): date supports a list of dates (#1464)

packages/dnb-design-system-portal/src/docs/uilib/components/timeline/properties.md

@@ -18,9 +18,9 @@ showTabs: true
 
 | Properties    | Description                                                                                                                                                                        |
 | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`        | _(required)_ Name/title of the Timeline item.                                                                                                                                     |
-| `state`       | _(required)_ The component state. Options: `completed` \| `current` \| `upcoming`.                                                                                                |
-| `date`        | _(optional)_ Date of the Timeline item, displayed below the `name`.                                                                                                                |
+| `name`        | _(required)_ Name/title of the Timeline item.                                                                                                                                      |
+| `state`       | _(required)_ The component state. Options: `completed` \| `current` \| `upcoming`.                                                                                                 |
+| `date`        | _(optional)_ Date of the Timeline item, displayed below the `name`. Also supports passing an array of dates.                                                                       |
 | `infoMessage` | _(optional)_ Info message, displayed in a [FormStatus of state info](/uilib/components/form-status#formstatus-displaying-info-status), below the `date` if it exists.              |
 | `icon`        | _(optional)_ Override icon displaying on the left side (Not recommended). Default: `check` for state `completed`, `pin` for state `current`, and `calendar` for state `upcoming` . |
 | `iconAlt`     | _(optional)_ Alt label describing the icon provided.                                                                                                                               |

packages/dnb-eufemia/src/components/timeline/TimelineItem.tsx

@@ -37,7 +37,7 @@ export interface TimelineItemProps {
   /**
    * Text displaying the date of the timeline item.
    */
-  date?: React.ReactNode
+  date?: React.ReactNode | React.ReactNode[]
 
   /**
    * Text displaying info message of the timeline item.
@@ -159,17 +159,32 @@ const TimelineItem = (localProps: TimelineItemProps) => {
     )
   }
 
+  const getDate = () => {
+    const TimelineItemDate = ({ date }: { date: React.ReactNode }) => (
+      <div
+        className="dnb-timeline__item__content__date"
+        data-testid="timeline-item-content-date"
+      >
+        {date}
+      </div>
+    )
+
+    if (!date) {
+      return null
+    }
+
+    if (Array.isArray(date)) {
+      return date.map((date, i) => (
+        <TimelineItemDate key={i} date={date} />
+      ))
+    }
+    return <TimelineItemDate date={date} />
+  }
+
   const TimelineItemContent = () => {
     return (
       <div className="dnb-timeline__item__content">
-        {date && (
-          <span
-            className="dnb-timeline__item__content__date"
-            data-testid="timeline-item-content-date"
-          >
-            {date}
-          </span>
-        )}
+        {getDate()}
         {infoMessage && (
           <FormStatus
             text={infoMessage}

packages/dnb-eufemia/src/components/timeline/__tests__/Timeline.test.tsx

@@ -126,6 +126,26 @@ describe('Timeline', () => {
       ).toBe(date)
     })
 
+    it('renders dates', () => {
+      const dates = ['10. september 2021', '11. september 2021']
+      render(
+        <TimelineItem date={dates} name="Complete" state="completed" />
+      )
+
+      expect(
+        screen.queryAllByTestId('timeline-item-content-date')
+      ).toHaveLength(2)
+
+      expect(
+        screen.queryAllByTestId('timeline-item-content-date')[0]
+          .textContent
+      ).toBe(dates[0])
+      expect(
+        screen.queryAllByTestId('timeline-item-content-date')[1]
+          .textContent
+      ).toBe(dates[1])
+    })
+
     it('renders info message', () => {
       const infoMessage = 'Info text'
       render(