From 063a95b6e654c444ed20b5429341bbad0a7bdb80 Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Fri, 6 Oct 2023 10:47:34 +0200
Subject: [PATCH 01/18] WIP first working contact timeline desktop before
 refactor

---
 components/ContactTimeline/src/index.scss     | 13 +++++
 components/ContactTimeline/src/index.tsx      | 47 +++++++++++++++++--
 .../src/stories/react.stories.mdx             | 39 ++++++++++++++-
 3 files changed, 95 insertions(+), 4 deletions(-)

diff --git a/components/ContactTimeline/src/index.scss b/components/ContactTimeline/src/index.scss
index 7f95e6e683..ff0dcaa631 100644
--- a/components/ContactTimeline/src/index.scss
+++ b/components/ContactTimeline/src/index.scss
@@ -4,6 +4,18 @@
 }
 
 .denhaag-contact-timeline {
+  .denhaag-contact-timeline__step-header__date {
+    width: 96px;
+  }
+
+  .denhaag-contact-timeline__step-header__channel {
+    width: 80px;
+  }
+
+  .denhaag-step-marker__connector--main-to-main {
+    margin-inline-start: 112px;
+  }
+
   &.denhaag-contact-timeline--mobile {
     --denhaag-process-steps-step-distance: var(--denhaag-contact-timeline-mobile-step-distance);
 
@@ -18,6 +30,7 @@
     .denhaag-step-marker__connector--main-to-main {
       top: calc(var(--denhaag-step-marker-size) / 2);
       bottom: var(--denhaag-contact-timeline-mobile-step-marker-connector-bottom);
+      margin-inline-start: 0;
     }
   }
 }
diff --git a/components/ContactTimeline/src/index.tsx b/components/ContactTimeline/src/index.tsx
index d766463ffe..f2d88c3c6a 100644
--- a/components/ContactTimeline/src/index.tsx
+++ b/components/ContactTimeline/src/index.tsx
@@ -20,14 +20,26 @@ export interface ContactTimelineItemProps {
 export interface ContactTimelineProps {
   items: ContactTimelineItemProps[];
   todayLabel: string;
+  mobile?: boolean;
 }
 
-export const ContactTimelineMobile: React.FC<ContactTimelineProps> = ({ items, todayLabel }: ContactTimelineProps) => {
+export const ContactTimelineMobile: React.FC<ContactTimelineProps> = ({
+  items,
+  todayLabel,
+  mobile = false,
+}: ContactTimelineProps) => {
+  let ListItemComponent: React.FC<ContactTimelineItemProps>;
+  if (mobile) {
+    ListItemComponent = ContactTimelineListItem;
+  } else {
+    ListItemComponent = ContactTimelineListItemDesktop;
+  }
+
   return (
-    <ContactTimelineList mobile className="denhaag-process-steps">
+    <ContactTimelineList mobile={mobile} className="denhaag-process-steps">
       {items.map((item, index) => {
         const nextItem = index < items.length - 1;
-        return <ContactTimelineListItem {...item} key={item.id} nextItem={nextItem} todayLabel={todayLabel} />;
+        return <ListItemComponent {...item} key={item.id} nextItem={nextItem} todayLabel={todayLabel} />;
       })}
     </ContactTimelineList>
   );
@@ -99,4 +111,33 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
   );
 };
 
+const ContactTimelineListItemDesktop: React.FC<ContactTimelineItemProps> = ({
+  title,
+  date,
+  isoDate,
+  todayLabel,
+  channel,
+  nextItem,
+}) => {
+  return (
+    <Step appearance="default">
+      <StepHeader className="denhaag-contact-timeline__step-header">
+        <div className="denhaag-contact-timeline__step-header__date">
+          <time dateTime={isoDate} className="denhaag-contact-timeline__meta-date">
+            <ContactTimelineDate dateTime={isoDate} todayLabel={todayLabel} />
+          </time>
+        </div>
+        <StepMarker appearance="default" nested />
+        <div className="denhaag-contact-timeline__step-header__channel">
+          <span className="denhaag-contact-timeline__meta-channel">{channel}</span>
+        </div>
+        <div>
+          <StepHeading>{title}</StepHeading>
+        </div>
+      </StepHeader>
+      <StepBody>{nextItem && <StepMarkerConnector appearance="default" from="main" to="main" />}</StepBody>
+    </Step>
+  );
+};
+
 export default ContactTimelineMobile;
diff --git a/components/ContactTimeline/src/stories/react.stories.mdx b/components/ContactTimeline/src/stories/react.stories.mdx
index 102a12aa93..568807c228 100644
--- a/components/ContactTimeline/src/stories/react.stories.mdx
+++ b/components/ContactTimeline/src/stories/react.stories.mdx
@@ -30,6 +30,35 @@ export const exampleArgs = {
   ],
 };
 
+export const exampleArgsMobile = {
+  todayLabel: "vandaag",
+  items: [
+    {
+      id: "1",
+      title: "Herinnering: Geef informatie",
+      channel: "mail",
+      isoDate: new Date().toISOString(),
+    },
+    {
+      id: "2",
+      title: "Geef informatie",
+      channel: "mail",
+      isoDate: "2023-01-23T09:17:03.137Z",
+    },
+    {
+      id: "3",
+      title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
+      channel: "mail",
+      isoDate: "2023-01-06T09:17:03.137Z",
+    },
+    { id: "4", title: "Status is veranderd", channel: "mail", isoDate: "2022-12-01T09:17:03.137Z" },
+    { id: "5", title: "Mijn vraag", channel: "vraag", isoDate: "2022-11-29T09:17:03.137Z" },
+    { id: "6", title: "Gesprek over afspraak met adviseur", channel: "telefoon", isoDate: "2022-11-12T09:17:03.137Z" },
+    { id: "7", title: "Kosten onderzoek en verbeteringen", channel: "brief", isoDate: "2022-11-10T09:17:03.137Z" },
+  ],
+  mobile: true,
+};
+
 export const Template = (args) => {
   return <ContactTimelineMobile {...args}></ContactTimelineMobile>;
 };
@@ -51,7 +80,15 @@ export const Template = (args) => {
 ## Mobile (Work in Progress)
 
 <Canvas>
-  <Story name="Mobile (Work in Progress)" args={exampleArgs}>
+  <Story name="Mobile (Work in Progress)" args={exampleArgsMobile}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Desktop (Work in Progress)
+
+<Canvas>
+  <Story name="Desktop (Work in Progress)" args={exampleArgs}>
     {Template.bind({})}
   </Story>
 </Canvas>

From 5b7467a12f43ed6a30c9ad1658982bf12413e147 Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Fri, 6 Oct 2023 15:37:05 +0200
Subject: [PATCH 02/18] WIP contact timeline desktop

---
 components/ContactTimeline/package.json       |  1 +
 .../src/ContactTimelineHeaderContent.tsx      |  8 ++++
 .../src/ContactTimelineMeta.tsx               |  8 ++++
 .../src/ContactTimelineMetaItem.tsx           |  8 ++++
 .../src/ContactTimelineMetaMarker.tsx         |  8 ++++
 .../src/ContactTimelineMetaTimeItem.tsx       | 12 ++++++
 components/ContactTimeline/src/index.scss     |  4 +-
 components/ContactTimeline/src/index.tsx      | 41 ++++++++++++-------
 pnpm-lock.yaml                                |  3 ++
 9 files changed, 77 insertions(+), 16 deletions(-)
 create mode 100644 components/ContactTimeline/src/ContactTimelineHeaderContent.tsx
 create mode 100644 components/ContactTimeline/src/ContactTimelineMeta.tsx
 create mode 100644 components/ContactTimeline/src/ContactTimelineMetaItem.tsx
 create mode 100644 components/ContactTimeline/src/ContactTimelineMetaMarker.tsx
 create mode 100644 components/ContactTimeline/src/ContactTimelineMetaTimeItem.tsx

diff --git a/components/ContactTimeline/package.json b/components/ContactTimeline/package.json
index f636b2fc56..b69b1e668b 100644
--- a/components/ContactTimeline/package.json
+++ b/components/ContactTimeline/package.json
@@ -29,6 +29,7 @@
     "clean": "rimraf dist tsconfig.tsbuildinfo"
   },
   "dependencies": {
+    "@gemeente-denhaag/icons": "workspace:*",
     "@gemeente-denhaag/process-steps": "workspace:*",
     "@gemeente-denhaag/step-marker": "workspace:*",
     "@gemeente-denhaag/typography": "workspace:*",
diff --git a/components/ContactTimeline/src/ContactTimelineHeaderContent.tsx b/components/ContactTimeline/src/ContactTimelineHeaderContent.tsx
new file mode 100644
index 0000000000..19952cce60
--- /dev/null
+++ b/components/ContactTimeline/src/ContactTimelineHeaderContent.tsx
@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import React, { HTMLAttributes } from 'react';
+
+interface ContactTimelineHeaderContentProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const ContactTimelineHeaderContent: React.FC<ContactTimelineHeaderContentProps> = ({ children }) => {
+  return <div className={clsx('denhaag-contact-timeline__step-header-content')}>{children}</div>;
+};
diff --git a/components/ContactTimeline/src/ContactTimelineMeta.tsx b/components/ContactTimeline/src/ContactTimelineMeta.tsx
new file mode 100644
index 0000000000..8eb17fa0bd
--- /dev/null
+++ b/components/ContactTimeline/src/ContactTimelineMeta.tsx
@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import React, { HTMLAttributes } from 'react';
+
+interface ContactTimelineMetaProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const ContactTimelineMeta: React.FC<ContactTimelineMetaProps> = ({ children }) => {
+  return <div className={clsx('denhaag-contact-timeline__meta')}>{children}</div>;
+};
diff --git a/components/ContactTimeline/src/ContactTimelineMetaItem.tsx b/components/ContactTimeline/src/ContactTimelineMetaItem.tsx
new file mode 100644
index 0000000000..6ed386d642
--- /dev/null
+++ b/components/ContactTimeline/src/ContactTimelineMetaItem.tsx
@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import React, { HTMLAttributes } from 'react';
+
+interface ContactTimelineMetaItemProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const ContactTimelineMetaItem: React.FC<ContactTimelineMetaItemProps> = ({ children }) => {
+  return <div className={clsx('denhaag-contact-timeline__meta-item')}>{children}</div>;
+};
diff --git a/components/ContactTimeline/src/ContactTimelineMetaMarker.tsx b/components/ContactTimeline/src/ContactTimelineMetaMarker.tsx
new file mode 100644
index 0000000000..e9fd037a88
--- /dev/null
+++ b/components/ContactTimeline/src/ContactTimelineMetaMarker.tsx
@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import React, { HTMLAttributes } from 'react';
+
+interface ContactTimelineMetaMarkerProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const ContactTimelineMetaMarker: React.FC<ContactTimelineMetaMarkerProps> = ({ children }) => {
+  return <div className={clsx('denhaag-contact-timeline__meta-marker')}>{children}</div>;
+};
diff --git a/components/ContactTimeline/src/ContactTimelineMetaTimeItem.tsx b/components/ContactTimeline/src/ContactTimelineMetaTimeItem.tsx
new file mode 100644
index 0000000000..5a813a9c5c
--- /dev/null
+++ b/components/ContactTimeline/src/ContactTimelineMetaTimeItem.tsx
@@ -0,0 +1,12 @@
+import clsx from 'clsx';
+import React, { TimeHTMLAttributes } from 'react';
+
+interface ContactTimelineMetaTimeItemProps extends TimeHTMLAttributes<HTMLTimeElement> {}
+
+export const ContactTimelineMetaTimeItem: React.FC<ContactTimelineMetaTimeItemProps> = ({ children, ...props }) => {
+  return (
+    <time className={clsx('denhaag-contact-timeline__meta-item')} {...props}>
+      {children}
+    </time>
+  );
+};
diff --git a/components/ContactTimeline/src/index.scss b/components/ContactTimeline/src/index.scss
index ff0dcaa631..c84f326c7d 100644
--- a/components/ContactTimeline/src/index.scss
+++ b/components/ContactTimeline/src/index.scss
@@ -5,11 +5,11 @@
 
 .denhaag-contact-timeline {
   .denhaag-contact-timeline__step-header__date {
-    width: 96px;
+    min-width: 96px;
   }
 
   .denhaag-contact-timeline__step-header__channel {
-    width: 80px;
+    min-width: 80px;
   }
 
   .denhaag-step-marker__connector--main-to-main {
diff --git a/components/ContactTimeline/src/index.tsx b/components/ContactTimeline/src/index.tsx
index f2d88c3c6a..b43ab813d5 100644
--- a/components/ContactTimeline/src/index.tsx
+++ b/components/ContactTimeline/src/index.tsx
@@ -1,10 +1,16 @@
 import React, { Key, OlHTMLAttributes, ReactNode } from 'react';
 import { StepMarker, StepMarkerConnector } from '@gemeente-denhaag/step-marker';
 import { Step, StepHeader, StepHeading, StepBody } from '@gemeente-denhaag/process-steps';
+import { ChevronDownIcon } from '@gemeente-denhaag/icons';
 import { format, differenceInDays } from 'date-fns';
 import { nl } from 'date-fns/locale';
 import clsx from 'clsx';
 import './index.scss';
+import { ContactTimelineMetaMarker } from './ContactTimelineMetaMarker';
+import { ContactTimelineMetaItem } from './ContactTimelineMetaItem';
+import { ContactTimelineMetaTimeItem } from './ContactTimelineMetaTimeItem';
+import { ContactTimelineMeta } from './ContactTimelineMeta';
+import { ContactTimelineHeaderContent } from './ContactTimelineHeaderContent';
 
 export interface ContactTimelineItemProps {
   id: Key;
@@ -91,20 +97,20 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
     <Step appearance="default">
       <StepHeader className="denhaag-contact-timeline__step-header">
         <StepMarker appearance="default" nested />
-        <div>
+        <ContactTimelineHeaderContent>
           <StepHeading>{title}</StepHeading>
-          <div className="denhaag-contact-timeline__meta">
+          <ContactTimelineMeta>
             {date ? (
               date
             ) : (
-              <time dateTime={isoDate} className="denhaag-contact-timeline__meta-date">
+              <ContactTimelineMetaTimeItem dateTime={isoDate}>
                 <ContactTimelineDate dateTime={isoDate} todayLabel={todayLabel} />
-              </time>
+              </ContactTimelineMetaTimeItem>
             )}
-            <span className="denhaag-contact-timeline__meta-marker" />
-            <span className="denhaag-contact-timeline__meta-channel">{channel}</span>
-          </div>
-        </div>
+            <ContactTimelineMetaMarker />
+            <ContactTimelineMetaItem>{channel}</ContactTimelineMetaItem>
+          </ContactTimelineMeta>
+        </ContactTimelineHeaderContent>
       </StepHeader>
       <StepBody>{nextItem && <StepMarkerConnector appearance="default" from="main" to="main" />}</StepBody>
     </Step>
@@ -123,19 +129,26 @@ const ContactTimelineListItemDesktop: React.FC<ContactTimelineItemProps> = ({
     <Step appearance="default">
       <StepHeader className="denhaag-contact-timeline__step-header">
         <div className="denhaag-contact-timeline__step-header__date">
-          <time dateTime={isoDate} className="denhaag-contact-timeline__meta-date">
-            <ContactTimelineDate dateTime={isoDate} todayLabel={todayLabel} />
-          </time>
+          <ContactTimelineMetaTimeItem>
+          {date ? (
+              date
+            ) : (
+              <ContactTimelineMetaTimeItem dateTime={isoDate}>
+                <ContactTimelineDate dateTime={isoDate} todayLabel={todayLabel} />
+              </ContactTimelineMetaTimeItem>
+            )}
+          </ContactTimelineMetaTimeItem>
         </div>
         <StepMarker appearance="default" nested />
         <div className="denhaag-contact-timeline__step-header__channel">
-          <span className="denhaag-contact-timeline__meta-channel">{channel}</span>
+          <ContactTimelineMetaItem>{channel}</ContactTimelineMetaItem>
         </div>
         <div>
-          <StepHeading>{title}</StepHeading>
+          <StepHeading>{title}</StepHeading> <ChevronDownIcon />
         </div>
+        {nextItem && <StepMarkerConnector appearance="default" from="main" to="main" />}
       </StepHeader>
-      <StepBody>{nextItem && <StepMarkerConnector appearance="default" from="main" to="main" />}</StepBody>
+      <StepBody></StepBody>
     </Step>
   );
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b42dac8b6..8a2069501b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -528,6 +528,9 @@ importers:
 
   components/ContactTimeline:
     dependencies:
+      '@gemeente-denhaag/icons':
+        specifier: workspace:*
+        version: link:../Icons
       '@gemeente-denhaag/process-steps':
         specifier: workspace:*
         version: link:../ProcessSteps

From 51df51782aa666a60a495d69efd68143d882c9e9 Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Thu, 12 Oct 2023 16:26:42 +0200
Subject: [PATCH 03/18] WIP contact timeline: transformed to one responsive
 component + collapsible

---
 .../src/ContactTimelineHeaderChannel.tsx      |  8 ++
 .../src/ContactTimelineHeaderContent.tsx      |  2 +-
 .../src/ContactTimelineHeaderDate.tsx         |  8 ++
 components/ContactTimeline/src/index.scss     | 46 ++++++++--
 components/ContactTimeline/src/index.tsx      | 88 ++++++++++++++++---
 .../src/stories/react.stories.mdx             | 37 +++++++-
 components/ProcessSteps/src/index.tsx         |  2 +
 7 files changed, 165 insertions(+), 26 deletions(-)
 create mode 100644 components/ContactTimeline/src/ContactTimelineHeaderChannel.tsx
 create mode 100644 components/ContactTimeline/src/ContactTimelineHeaderDate.tsx

diff --git a/components/ContactTimeline/src/ContactTimelineHeaderChannel.tsx b/components/ContactTimeline/src/ContactTimelineHeaderChannel.tsx
new file mode 100644
index 0000000000..e84eaac5c6
--- /dev/null
+++ b/components/ContactTimeline/src/ContactTimelineHeaderChannel.tsx
@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import React, { HTMLAttributes } from 'react';
+
+interface ContactTimelineHeaderChannelProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const ContactTimelineHeaderChannel: React.FC<ContactTimelineHeaderChannelProps> = ({ children }) => {
+  return <div className={clsx('denhaag-contact-timeline__step-header__channel')}>{children}</div>;
+};
diff --git a/components/ContactTimeline/src/ContactTimelineHeaderContent.tsx b/components/ContactTimeline/src/ContactTimelineHeaderContent.tsx
index 19952cce60..6c18e63f2f 100644
--- a/components/ContactTimeline/src/ContactTimelineHeaderContent.tsx
+++ b/components/ContactTimeline/src/ContactTimelineHeaderContent.tsx
@@ -4,5 +4,5 @@ import React, { HTMLAttributes } from 'react';
 interface ContactTimelineHeaderContentProps extends HTMLAttributes<HTMLSpanElement> {}
 
 export const ContactTimelineHeaderContent: React.FC<ContactTimelineHeaderContentProps> = ({ children }) => {
-  return <div className={clsx('denhaag-contact-timeline__step-header-content')}>{children}</div>;
+  return <div className={clsx('denhaag-contact-timeline__step-header__content')}>{children}</div>;
 };
diff --git a/components/ContactTimeline/src/ContactTimelineHeaderDate.tsx b/components/ContactTimeline/src/ContactTimelineHeaderDate.tsx
new file mode 100644
index 0000000000..4e517b86e6
--- /dev/null
+++ b/components/ContactTimeline/src/ContactTimelineHeaderDate.tsx
@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import React, { HTMLAttributes } from 'react';
+
+interface ContactTimelineHeaderDateProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const ContactTimelineHeaderDate: React.FC<ContactTimelineHeaderDateProps> = ({ children }) => {
+  return <div className={clsx('denhaag-contact-timeline__step-header__date')}>{children}</div>;
+};
diff --git a/components/ContactTimeline/src/index.scss b/components/ContactTimeline/src/index.scss
index c84f326c7d..d5da984f0a 100644
--- a/components/ContactTimeline/src/index.scss
+++ b/components/ContactTimeline/src/index.scss
@@ -4,21 +4,51 @@
 }
 
 .denhaag-contact-timeline {
-  .denhaag-contact-timeline__step-header__date {
-    min-width: 96px;
+  .denhaag-process-steps__step-header-toggle {
+    min-block-size: 0;
   }
 
-  .denhaag-contact-timeline__step-header__channel {
-    min-width: 80px;
-  }
+  @media (width >= 768px) {
+    .denhaag-contact-timeline__meta {
+      display: none;
+    }
+
+    .denhaag-contact-timeline__step-header__date {
+      min-width: 96px;
+    }
+
+    .denhaag-contact-timeline__step-header__channel {
+      min-width: 80px;
+    }
+
+    .denhaag-step-marker__connector--main-to-main {
+      margin-inline-start: 112px;
+    }
+
+    .denhaag-process-steps__step-details {
+      margin-inline-start: 248px;
+    }
 
-  .denhaag-step-marker__connector--main-to-main {
-    margin-inline-start: 112px;
+    .denhaag-contact-timeline__step-header__content {
+      display: flex;
+      flex-direction: row;
+      gap: 6px;
+      align-items: center;
+    }
   }
 
-  &.denhaag-contact-timeline--mobile {
+  @media (width <= 767px) {
     --denhaag-process-steps-step-distance: var(--denhaag-contact-timeline-mobile-step-distance);
 
+    .denhaag-process-steps__step-details {
+      margin-inline-start: 40px;
+    }
+
+    .denhaag-contact-timeline__step-header__date,
+    .denhaag-contact-timeline__step-header__channel {
+      display: none;
+    }
+
     .denhaag-process-steps__step {
       padding-block-end: var(--denhaag-contact-timeline-mobile-step-padding-block-end);
     }
diff --git a/components/ContactTimeline/src/index.tsx b/components/ContactTimeline/src/index.tsx
index b43ab813d5..7daabe1948 100644
--- a/components/ContactTimeline/src/index.tsx
+++ b/components/ContactTimeline/src/index.tsx
@@ -1,6 +1,13 @@
-import React, { Key, OlHTMLAttributes, ReactNode } from 'react';
+import React, { Key, OlHTMLAttributes, ReactNode, useState } from 'react';
 import { StepMarker, StepMarkerConnector } from '@gemeente-denhaag/step-marker';
-import { Step, StepHeader, StepHeading, StepBody } from '@gemeente-denhaag/process-steps';
+import {
+  Step,
+  StepHeader,
+  StepHeading,
+  StepBody,
+  StepHeaderToggle,
+  StepDetails,
+} from '@gemeente-denhaag/process-steps';
 import { ChevronDownIcon } from '@gemeente-denhaag/icons';
 import { format, differenceInDays } from 'date-fns';
 import { nl } from 'date-fns/locale';
@@ -11,29 +18,49 @@ import { ContactTimelineMetaItem } from './ContactTimelineMetaItem';
 import { ContactTimelineMetaTimeItem } from './ContactTimelineMetaTimeItem';
 import { ContactTimelineMeta } from './ContactTimelineMeta';
 import { ContactTimelineHeaderContent } from './ContactTimelineHeaderContent';
+import { ContactTimelineHeaderDate } from './ContactTimelineHeaderDate';
+import { ContactTimelineHeaderChannel } from './ContactTimelineHeaderChannel';
+import { Paragraph } from '@gemeente-denhaag/typography';
 
 export interface ContactTimelineItemProps {
   id: Key;
   title: ReactNode;
+  description?: ReactNode;
   marker?: ReactNode;
   date: ReactNode;
   isoDate: string;
   todayLabel: string;
   channel: ReactNode;
   nextItem?: boolean;
+  expanded?: boolean;
+  toggleExpanded: false | (() => void);
 }
 
 export interface ContactTimelineProps {
   items: ContactTimelineItemProps[];
+  expandedSteps?: Key[];
+  collapsible?: boolean;
   todayLabel: string;
   mobile?: boolean;
 }
 
+const toggleState = (key: Key, collection: Key[], setCollection: React.Dispatch<React.SetStateAction<React.Key[]>>) => {
+  if (collection.includes(key)) {
+    setCollection(collection.filter((item) => item !== key));
+  } else {
+    setCollection([...collection, key]);
+  }
+};
+
 export const ContactTimelineMobile: React.FC<ContactTimelineProps> = ({
   items,
   todayLabel,
+  expandedSteps: initialExpanded = [],
+  collapsible = false,
   mobile = false,
 }: ContactTimelineProps) => {
+  const [expandedSteps, setExpandedSteps] = useState(initialExpanded);
+
   let ListItemComponent: React.FC<ContactTimelineItemProps>;
   if (mobile) {
     ListItemComponent = ContactTimelineListItem;
@@ -45,7 +72,18 @@ export const ContactTimelineMobile: React.FC<ContactTimelineProps> = ({
     <ContactTimelineList mobile={mobile} className="denhaag-process-steps">
       {items.map((item, index) => {
         const nextItem = index < items.length - 1;
-        return <ListItemComponent {...item} key={item.id} nextItem={nextItem} todayLabel={todayLabel} />;
+        return (
+          <ListItemComponent
+            {...item}
+            key={item.id}
+            expanded={collapsible ? expandedSteps.includes(item.id) : true}
+            nextItem={nextItem}
+            todayLabel={todayLabel}
+            toggleExpanded={() => {
+              toggleState(item.id, expandedSteps, setExpandedSteps);
+            }}
+          />
+        );
       })}
     </ContactTimelineList>
   );
@@ -111,26 +149,31 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
             <ContactTimelineMetaItem>{channel}</ContactTimelineMetaItem>
           </ContactTimelineMeta>
         </ContactTimelineHeaderContent>
+        {nextItem && <StepMarkerConnector appearance="default" from="main" to="main" />}
       </StepHeader>
-      <StepBody>{nextItem && <StepMarkerConnector appearance="default" from="main" to="main" />}</StepBody>
+      <StepBody></StepBody>
     </Step>
   );
 };
 
 const ContactTimelineListItemDesktop: React.FC<ContactTimelineItemProps> = ({
+  id,
   title,
+  description,
   date,
   isoDate,
   todayLabel,
   channel,
   nextItem,
+  expanded = false,
+  toggleExpanded,
 }) => {
   return (
     <Step appearance="default">
       <StepHeader className="denhaag-contact-timeline__step-header">
-        <div className="denhaag-contact-timeline__step-header__date">
+        <ContactTimelineHeaderDate>
           <ContactTimelineMetaTimeItem>
-          {date ? (
+            {date ? (
               date
             ) : (
               <ContactTimelineMetaTimeItem dateTime={isoDate}>
@@ -138,17 +181,36 @@ const ContactTimelineListItemDesktop: React.FC<ContactTimelineItemProps> = ({
               </ContactTimelineMetaTimeItem>
             )}
           </ContactTimelineMetaTimeItem>
-        </div>
+        </ContactTimelineHeaderDate>
         <StepMarker appearance="default" nested />
-        <div className="denhaag-contact-timeline__step-header__channel">
+        <ContactTimelineHeaderChannel>
           <ContactTimelineMetaItem>{channel}</ContactTimelineMetaItem>
-        </div>
-        <div>
-          <StepHeading>{title}</StepHeading> <ChevronDownIcon />
-        </div>
+        </ContactTimelineHeaderChannel>
+        <ContactTimelineHeaderContent>
+          {toggleExpanded && description ? (
+            <StepHeaderToggle ariaControls={`${id}--details`} expanded={expanded} onClick={toggleExpanded}>
+              <StepHeading>{title}</StepHeading>
+            </StepHeaderToggle>
+          ) : (
+            <StepHeading>{title}</StepHeading>
+          )}
+          <ContactTimelineMeta>
+            {date ? (
+              date
+            ) : (
+              <ContactTimelineMetaTimeItem dateTime={isoDate}>
+                <ContactTimelineDate dateTime={isoDate} todayLabel={todayLabel} />
+              </ContactTimelineMetaTimeItem>
+            )}
+            <ContactTimelineMetaMarker />
+            <ContactTimelineMetaItem>{channel}</ContactTimelineMetaItem>
+          </ContactTimelineMeta>
+        </ContactTimelineHeaderContent>
         {nextItem && <StepMarkerConnector appearance="default" from="main" to="main" />}
       </StepHeader>
-      <StepBody></StepBody>
+      <StepDetails id={`${id}--details`} collapsed={!expanded}>
+        <Paragraph>{description}</Paragraph>
+      </StepDetails>
     </Step>
   );
 };
diff --git a/components/ContactTimeline/src/stories/react.stories.mdx b/components/ContactTimeline/src/stories/react.stories.mdx
index 568807c228..6f779be0bf 100644
--- a/components/ContactTimeline/src/stories/react.stories.mdx
+++ b/components/ContactTimeline/src/stories/react.stories.mdx
@@ -4,29 +4,58 @@ import pkg from "../../package.json";
 
 export const exampleArgs = {
   todayLabel: "vandaag",
+  collapsible: true,
   items: [
     {
       id: "1",
       title: "Herinnering: Geef informatie",
       channel: "mail",
       isoDate: new Date().toISOString(),
+      description: "Hier komt de uitgebreide beschrijving",
     },
     {
       id: "2",
       title: "Geef informatie",
       channel: "mail",
       isoDate: "2023-01-23T09:17:03.137Z",
+      description: "Hier komt de uitgebreide beschrijving",
     },
     {
       id: "3",
       title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
       channel: "mail",
       isoDate: "2023-01-06T09:17:03.137Z",
+      description:
+        "Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.",
+    },
+    {
+      id: "4",
+      title: "Status is veranderd",
+      channel: "mail",
+      isoDate: "2022-12-01T09:17:03.137Z",
+      description: "Hier komt de uitgebreide beschrijving",
+    },
+    {
+      id: "5",
+      title: "Mijn vraag",
+      channel: "vraag",
+      isoDate: "2022-11-29T09:17:03.137Z",
+      description: "Hier komt de uitgebreide beschrijving",
+    },
+    {
+      id: "6",
+      title: "Gesprek over afspraak met adviseur",
+      channel: "telefoon",
+      isoDate: "2022-11-12T09:17:03.137Z",
+      description: "Hier komt de uitgebreide beschrijving",
+    },
+    {
+      id: "7",
+      title: "Kosten onderzoek en verbeteringen",
+      channel: "brief",
+      isoDate: "2022-11-10T09:17:03.137Z",
+      description: "Hier komt de uitgebreide beschrijving",
     },
-    { id: "4", title: "Status is veranderd", channel: "mail", isoDate: "2022-12-01T09:17:03.137Z" },
-    { id: "5", title: "Mijn vraag", channel: "vraag", isoDate: "2022-11-29T09:17:03.137Z" },
-    { id: "6", title: "Gesprek over afspraak met adviseur", channel: "telefoon", isoDate: "2022-11-12T09:17:03.137Z" },
-    { id: "7", title: "Kosten onderzoek en verbeteringen", channel: "brief", isoDate: "2022-11-10T09:17:03.137Z" },
   ],
 };
 
diff --git a/components/ProcessSteps/src/index.tsx b/components/ProcessSteps/src/index.tsx
index 099c9936d9..49fdd8d8d7 100644
--- a/components/ProcessSteps/src/index.tsx
+++ b/components/ProcessSteps/src/index.tsx
@@ -17,9 +17,11 @@ export default ProcessSteps;
 export * from './Status';
 export * from './Step';
 export * from './StepHeader';
+export * from './StepHeaderToggle';
 export * from './StepHeading';
 export * from './StepBody';
 export * from './StepList';
+export * from './StepDetails';
 export * from './SubStep';
 export * from './SubStepHeading';
 export * from './StepMeta';

From b3c60c1efce37bd6d99e229719cb906b12502830 Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Tue, 17 Oct 2023 14:57:06 +0200
Subject: [PATCH 04/18] WIP contact timeline refactor, added story variants,
 started with file variant

---
 .../src/ContactTimelineMetaMarker.tsx         |   8 -
 .../src/ContactTimelineMetaSeparator.tsx      |   8 +
 .../src/ContactTimelineSender.tsx             |   8 +
 components/ContactTimeline/src/index.scss     |  18 +-
 components/ContactTimeline/src/index.tsx      |  88 +++-----
 .../src/stories/bem.stories.mdx               |   4 +-
 .../src/stories/react.stories.mdx             | 210 +++++++++++++++---
 7 files changed, 233 insertions(+), 111 deletions(-)
 delete mode 100644 components/ContactTimeline/src/ContactTimelineMetaMarker.tsx
 create mode 100644 components/ContactTimeline/src/ContactTimelineMetaSeparator.tsx
 create mode 100644 components/ContactTimeline/src/ContactTimelineSender.tsx

diff --git a/components/ContactTimeline/src/ContactTimelineMetaMarker.tsx b/components/ContactTimeline/src/ContactTimelineMetaMarker.tsx
deleted file mode 100644
index e9fd037a88..0000000000
--- a/components/ContactTimeline/src/ContactTimelineMetaMarker.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import clsx from 'clsx';
-import React, { HTMLAttributes } from 'react';
-
-interface ContactTimelineMetaMarkerProps extends HTMLAttributes<HTMLSpanElement> {}
-
-export const ContactTimelineMetaMarker: React.FC<ContactTimelineMetaMarkerProps> = ({ children }) => {
-  return <div className={clsx('denhaag-contact-timeline__meta-marker')}>{children}</div>;
-};
diff --git a/components/ContactTimeline/src/ContactTimelineMetaSeparator.tsx b/components/ContactTimeline/src/ContactTimelineMetaSeparator.tsx
new file mode 100644
index 0000000000..0858ecf81c
--- /dev/null
+++ b/components/ContactTimeline/src/ContactTimelineMetaSeparator.tsx
@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import React, { HTMLAttributes } from 'react';
+
+interface ContactTimelineMetaSeparatorProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const ContactTimelineMetaSeparator: React.FC<ContactTimelineMetaSeparatorProps> = ({ children }) => {
+  return <div className={clsx('denhaag-contact-timeline__meta-separator')}>{children}</div>;
+};
diff --git a/components/ContactTimeline/src/ContactTimelineSender.tsx b/components/ContactTimeline/src/ContactTimelineSender.tsx
new file mode 100644
index 0000000000..a06d42a97f
--- /dev/null
+++ b/components/ContactTimeline/src/ContactTimelineSender.tsx
@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import React, { HTMLAttributes } from 'react';
+
+interface ContactTimelineSenderProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const ContactTimelineSender: React.FC<ContactTimelineSenderProps> = ({ children }) => {
+  return <div className={clsx('denhaag-contact-timeline__sender')}>{children}</div>;
+};
diff --git a/components/ContactTimeline/src/index.scss b/components/ContactTimeline/src/index.scss
index d5da984f0a..80dfcab51a 100644
--- a/components/ContactTimeline/src/index.scss
+++ b/components/ContactTimeline/src/index.scss
@@ -1,6 +1,7 @@
 .denhaag-contact-timeline__step-header {
   --denhaag-process-steps-step-header-align-items: var(--denhaag-contact-timeline-mobile-step-marker-align-items);
   --denhaag-step-marker-margin: var(--denhaag-contact-timeline-mobile-step-marker-margin);
+  --denhaag-process-steps-step-heading-font-size: 20px;
 }
 
 .denhaag-contact-timeline {
@@ -57,6 +58,10 @@
       position: unset;
     }
 
+    .denhaag-contact-timeline__step-header__content {
+      width: 100%;
+    }
+
     .denhaag-step-marker__connector--main-to-main {
       top: calc(var(--denhaag-step-marker-size) / 2);
       bottom: var(--denhaag-contact-timeline-mobile-step-marker-connector-bottom);
@@ -71,7 +76,18 @@
   align-items: center;
 }
 
-.denhaag-contact-timeline__meta-marker {
+.denhaag-contact-timeline__sender {
+  font-size: 18px;
+  font-weight: 600; //semibold
+  margin-block-start: 16px;
+}
+
+.utrecht-button.denhaag-process-steps__step-header-toggle {
+  justify-content: space-between;
+  width: 100%;
+}
+
+.denhaag-contact-timeline__meta-separator {
   width: var(--denhaag-contact-timeline-mobile-meta-marker-size);
   height: var(--denhaag-contact-timeline-mobile-meta-marker-size);
   background-color: var(--denhaag-contact-timeline-mobile-meta-marker-color);
diff --git a/components/ContactTimeline/src/index.tsx b/components/ContactTimeline/src/index.tsx
index 7daabe1948..7e5d872198 100644
--- a/components/ContactTimeline/src/index.tsx
+++ b/components/ContactTimeline/src/index.tsx
@@ -4,16 +4,14 @@ import {
   Step,
   StepHeader,
   StepHeading,
-  StepBody,
   StepHeaderToggle,
   StepDetails,
 } from '@gemeente-denhaag/process-steps';
-import { ChevronDownIcon } from '@gemeente-denhaag/icons';
 import { format, differenceInDays } from 'date-fns';
 import { nl } from 'date-fns/locale';
 import clsx from 'clsx';
 import './index.scss';
-import { ContactTimelineMetaMarker } from './ContactTimelineMetaMarker';
+import { ContactTimelineMetaSeparator } from './ContactTimelineMetaSeparator';
 import { ContactTimelineMetaItem } from './ContactTimelineMetaItem';
 import { ContactTimelineMetaTimeItem } from './ContactTimelineMetaTimeItem';
 import { ContactTimelineMeta } from './ContactTimelineMeta';
@@ -21,12 +19,14 @@ import { ContactTimelineHeaderContent } from './ContactTimelineHeaderContent';
 import { ContactTimelineHeaderDate } from './ContactTimelineHeaderDate';
 import { ContactTimelineHeaderChannel } from './ContactTimelineHeaderChannel';
 import { Paragraph } from '@gemeente-denhaag/typography';
+import { ContactTimelineSender } from './ContactTimelineSender';
 
 export interface ContactTimelineItemProps {
   id: Key;
   title: ReactNode;
   description?: ReactNode;
-  marker?: ReactNode;
+  file?: ReactNode;
+  sender?: ReactNode;
   date: ReactNode;
   isoDate: string;
   todayLabel: string;
@@ -38,10 +38,9 @@ export interface ContactTimelineItemProps {
 
 export interface ContactTimelineProps {
   items: ContactTimelineItemProps[];
-  expandedSteps?: Key[];
+  expandedItems?: Key[];
   collapsible?: boolean;
   todayLabel: string;
-  mobile?: boolean;
 }
 
 const toggleState = (key: Key, collection: Key[], setCollection: React.Dispatch<React.SetStateAction<React.Key[]>>) => {
@@ -52,36 +51,31 @@ const toggleState = (key: Key, collection: Key[], setCollection: React.Dispatch<
   }
 };
 
-export const ContactTimelineMobile: React.FC<ContactTimelineProps> = ({
+export const ContactTimeline: React.FC<ContactTimelineProps> = ({
   items,
   todayLabel,
-  expandedSteps: initialExpanded = [],
+  expandedItems: initialExpanded = [],
   collapsible = false,
-  mobile = false,
 }: ContactTimelineProps) => {
-  const [expandedSteps, setExpandedSteps] = useState(initialExpanded);
-
-  let ListItemComponent: React.FC<ContactTimelineItemProps>;
-  if (mobile) {
-    ListItemComponent = ContactTimelineListItem;
-  } else {
-    ListItemComponent = ContactTimelineListItemDesktop;
-  }
+  const [expandedItems, setexpandedItems] = useState(initialExpanded);
 
   return (
-    <ContactTimelineList mobile={mobile} className="denhaag-process-steps">
+    <ContactTimelineList className="denhaag-process-steps">
       {items.map((item, index) => {
         const nextItem = index < items.length - 1;
         return (
-          <ListItemComponent
+          <ContactTimelineListItem
             {...item}
             key={item.id}
-            expanded={collapsible ? expandedSteps.includes(item.id) : true}
+            expanded={collapsible ? expandedItems.includes(item.id) : false}
             nextItem={nextItem}
             todayLabel={todayLabel}
-            toggleExpanded={() => {
-              toggleState(item.id, expandedSteps, setExpandedSteps);
-            }}
+            toggleExpanded={
+              collapsible &&
+              (() => {
+                toggleState(item.id, expandedItems, setexpandedItems);
+              })
+            }
           />
         );
       })}
@@ -89,17 +83,14 @@ export const ContactTimelineMobile: React.FC<ContactTimelineProps> = ({
   );
 };
 
-export interface ContactTimelineListProps extends OlHTMLAttributes<HTMLOListElement> {
-  mobile?: boolean;
-}
+export interface ContactTimelineListProps extends OlHTMLAttributes<HTMLOListElement> {}
 
 export const ContactTimelineList: React.FC<ContactTimelineListProps> = ({
   className,
-  mobile = false,
   children,
   ...props
 }: ContactTimelineListProps) => (
-  <ol {...props} className={clsx('denhaag-contact-timeline', mobile && 'denhaag-contact-timeline--mobile', className)}>
+  <ol {...props} className={clsx('denhaag-contact-timeline', className)}>
     {children}
   </ol>
 );
@@ -124,44 +115,13 @@ export const ContactTimelineDate = ({ dateTime, now = new Date().toISOString(),
 };
 
 const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
-  title,
-  date,
-  isoDate,
-  todayLabel,
-  channel,
-  nextItem,
-}) => {
-  return (
-    <Step appearance="default">
-      <StepHeader className="denhaag-contact-timeline__step-header">
-        <StepMarker appearance="default" nested />
-        <ContactTimelineHeaderContent>
-          <StepHeading>{title}</StepHeading>
-          <ContactTimelineMeta>
-            {date ? (
-              date
-            ) : (
-              <ContactTimelineMetaTimeItem dateTime={isoDate}>
-                <ContactTimelineDate dateTime={isoDate} todayLabel={todayLabel} />
-              </ContactTimelineMetaTimeItem>
-            )}
-            <ContactTimelineMetaMarker />
-            <ContactTimelineMetaItem>{channel}</ContactTimelineMetaItem>
-          </ContactTimelineMeta>
-        </ContactTimelineHeaderContent>
-        {nextItem && <StepMarkerConnector appearance="default" from="main" to="main" />}
-      </StepHeader>
-      <StepBody></StepBody>
-    </Step>
-  );
-};
-
-const ContactTimelineListItemDesktop: React.FC<ContactTimelineItemProps> = ({
   id,
   title,
   description,
+  file,
   date,
   isoDate,
+  sender = '',
   todayLabel,
   channel,
   nextItem,
@@ -202,17 +162,19 @@ const ContactTimelineListItemDesktop: React.FC<ContactTimelineItemProps> = ({
                 <ContactTimelineDate dateTime={isoDate} todayLabel={todayLabel} />
               </ContactTimelineMetaTimeItem>
             )}
-            <ContactTimelineMetaMarker />
+            <ContactTimelineMetaSeparator />
             <ContactTimelineMetaItem>{channel}</ContactTimelineMetaItem>
           </ContactTimelineMeta>
         </ContactTimelineHeaderContent>
         {nextItem && <StepMarkerConnector appearance="default" from="main" to="main" />}
       </StepHeader>
       <StepDetails id={`${id}--details`} collapsed={!expanded}>
+        <ContactTimelineSender>{sender}</ContactTimelineSender>
         <Paragraph>{description}</Paragraph>
+        {file}
       </StepDetails>
     </Step>
   );
 };
 
-export default ContactTimelineMobile;
+export default ContactTimeline;
diff --git a/components/ContactTimeline/src/stories/bem.stories.mdx b/components/ContactTimeline/src/stories/bem.stories.mdx
index 97e9c2f4bb..b9268a94a6 100644
--- a/components/ContactTimeline/src/stories/bem.stories.mdx
+++ b/components/ContactTimeline/src/stories/bem.stories.mdx
@@ -34,12 +34,12 @@ export const exampleArgs = {
 };
 
 export const Template = (args) => {
-  return <ContactTimelineMobile {...args}></ContactTimelineMobile>;
+  return <ContactTimeline {...args}></ContactTimeline>;
 };
 
 <Meta
   title="CSS/Process Steps/Contact Timeline"
-  component={ContactTimelineMobile}
+  component={ContactTimeline}
   parameters={{
     componentSubtitle: `${pkg.name} - ${pkg.version}`,
     docs: {
diff --git a/components/ContactTimeline/src/stories/react.stories.mdx b/components/ContactTimeline/src/stories/react.stories.mdx
index 6f779be0bf..6e901c7860 100644
--- a/components/ContactTimeline/src/stories/react.stories.mdx
+++ b/components/ContactTimeline/src/stories/react.stories.mdx
@@ -1,10 +1,10 @@
 import { Canvas, Meta, Story } from "@storybook/addon-docs";
-import { ContactTimelineMobile } from "../index";
+import { File } from "../../../File";
+import { ContactTimeline } from "../index";
 import pkg from "../../package.json";
 
 export const exampleArgs = {
   todayLabel: "vandaag",
-  collapsible: true,
   items: [
     {
       id: "1",
@@ -12,6 +12,7 @@ export const exampleArgs = {
       channel: "mail",
       isoDate: new Date().toISOString(),
       description: "Hier komt de uitgebreide beschrijving",
+      sender: "Gemeente Den Haag",
     },
     {
       id: "2",
@@ -19,6 +20,7 @@ export const exampleArgs = {
       channel: "mail",
       isoDate: "2023-01-23T09:17:03.137Z",
       description: "Hier komt de uitgebreide beschrijving",
+      sender: "Gemeente Den Haag",
     },
     {
       id: "3",
@@ -27,6 +29,7 @@ export const exampleArgs = {
       isoDate: "2023-01-06T09:17:03.137Z",
       description:
         "Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.",
+      sender: "Gemeente Den Haag",
     },
     {
       id: "4",
@@ -34,6 +37,7 @@ export const exampleArgs = {
       channel: "mail",
       isoDate: "2022-12-01T09:17:03.137Z",
       description: "Hier komt de uitgebreide beschrijving",
+      sender: "Gemeente Den Haag",
     },
     {
       id: "5",
@@ -41,6 +45,7 @@ export const exampleArgs = {
       channel: "vraag",
       isoDate: "2022-11-29T09:17:03.137Z",
       description: "Hier komt de uitgebreide beschrijving",
+      sender: "Anna Klap",
     },
     {
       id: "6",
@@ -48,6 +53,7 @@ export const exampleArgs = {
       channel: "telefoon",
       isoDate: "2022-11-12T09:17:03.137Z",
       description: "Hier komt de uitgebreide beschrijving",
+      sender: "Gemeente Den Haag",
     },
     {
       id: "7",
@@ -55,46 +61,18 @@ export const exampleArgs = {
       channel: "brief",
       isoDate: "2022-11-10T09:17:03.137Z",
       description: "Hier komt de uitgebreide beschrijving",
+      sender: "Gemeente Den Haag",
     },
   ],
 };
 
-export const exampleArgsMobile = {
-  todayLabel: "vandaag",
-  items: [
-    {
-      id: "1",
-      title: "Herinnering: Geef informatie",
-      channel: "mail",
-      isoDate: new Date().toISOString(),
-    },
-    {
-      id: "2",
-      title: "Geef informatie",
-      channel: "mail",
-      isoDate: "2023-01-23T09:17:03.137Z",
-    },
-    {
-      id: "3",
-      title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
-      channel: "mail",
-      isoDate: "2023-01-06T09:17:03.137Z",
-    },
-    { id: "4", title: "Status is veranderd", channel: "mail", isoDate: "2022-12-01T09:17:03.137Z" },
-    { id: "5", title: "Mijn vraag", channel: "vraag", isoDate: "2022-11-29T09:17:03.137Z" },
-    { id: "6", title: "Gesprek over afspraak met adviseur", channel: "telefoon", isoDate: "2022-11-12T09:17:03.137Z" },
-    { id: "7", title: "Kosten onderzoek en verbeteringen", channel: "brief", isoDate: "2022-11-10T09:17:03.137Z" },
-  ],
-  mobile: true,
-};
-
 export const Template = (args) => {
-  return <ContactTimelineMobile {...args}></ContactTimelineMobile>;
+  return <ContactTimeline {...args}></ContactTimeline>;
 };
 
 <Meta
   title="React/Process Steps/Contact Timeline"
-  component={ContactTimelineMobile}
+  component={ContactTimeline}
   parameters={{
     componentSubtitle: `${pkg.name} - ${pkg.version}`,
     docs: { source: { type: "dynamic" } },
@@ -106,18 +84,176 @@ export const Template = (args) => {
 
 # Contact Timeline
 
-## Mobile (Work in Progress)
+## Default
+
+<Canvas>
+  <Story name="Default" args={exampleArgs}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Collapsible
+
+<Canvas>
+  <Story name="Collapsible" args={{ ...exampleArgs, collapsible: true }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Collapsible with expanded item
+
+<Canvas>
+  <Story name="Collapsible with expanded item" args={{ ...exampleArgs, collapsible: true, expandedItems: ["3"] }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Without sender
 
 <Canvas>
-  <Story name="Mobile (Work in Progress)" args={exampleArgsMobile}>
+  <Story
+    name="Without sender"
+    args={{
+      todayLabel: "vandaag",
+      collapsible: true,
+      expandedItems: ["3"],
+      items: [
+        {
+          id: "1",
+          title: "Herinnering: Geef informatie",
+          channel: "mail",
+          isoDate: new Date().toISOString(),
+          description: "Hier komt de uitgebreide beschrijving",
+        },
+        {
+          id: "2",
+          title: "Geef informatie",
+          channel: "mail",
+          isoDate: "2023-01-23T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+        },
+        {
+          id: "3",
+          title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
+          channel: "mail",
+          isoDate: "2023-01-06T09:17:03.137Z",
+          description:
+            "Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.",
+        },
+        {
+          id: "4",
+          title: "Status is veranderd",
+          channel: "mail",
+          isoDate: "2022-12-01T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+        },
+        {
+          id: "5",
+          title: "Mijn vraag",
+          channel: "vraag",
+          isoDate: "2022-11-29T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+        },
+        {
+          id: "6",
+          title: "Gesprek over afspraak met adviseur",
+          channel: "telefoon",
+          isoDate: "2022-11-12T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+        },
+        {
+          id: "7",
+          title: "Kosten onderzoek en verbeteringen",
+          channel: "brief",
+          isoDate: "2022-11-10T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+        },
+      ],
+    }}
+  >
     {Template.bind({})}
   </Story>
 </Canvas>
 
-## Desktop (Work in Progress)
+## With file
 
 <Canvas>
-  <Story name="Desktop (Work in Progress)" args={exampleArgs}>
+  <Story
+    name="With file"
+    args={{
+      todayLabel: "vandaag",
+      collapsible: true,
+      expandedItems: ["3"],
+      items: [
+        {
+          id: "1",
+          title: "Herinnering: Geef informatie",
+          channel: "mail",
+          isoDate: new Date().toISOString(),
+          description: "Hier komt de uitgebreide beschrijving",
+          sender: "Gemeente Den Haag",
+        },
+        {
+          id: "2",
+          title: "Geef informatie",
+          channel: "mail",
+          isoDate: "2023-01-23T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+          sender: "Gemeente Den Haag",
+        },
+        {
+          id: "3",
+          title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
+          channel: "mail",
+          isoDate: "2023-01-06T09:17:03.137Z",
+          description:
+            "Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.",
+          sender: "Gemeente Den Haag",
+          file: (
+            <File
+              name="example3"
+              link="test.png"
+              extension="png"
+              size={2000}
+              lastUpdated="Thu Aug 31 2023 11:22:11 GMT+0200"
+            />
+          ),
+        },
+        {
+          id: "4",
+          title: "Status is veranderd",
+          channel: "mail",
+          isoDate: "2022-12-01T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+          sender: "Gemeente Den Haag",
+        },
+        {
+          id: "5",
+          title: "Mijn vraag",
+          channel: "vraag",
+          isoDate: "2022-11-29T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+          sender: "Anna Klap",
+        },
+        {
+          id: "6",
+          title: "Gesprek over afspraak met adviseur",
+          channel: "telefoon",
+          isoDate: "2022-11-12T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+          sender: "Gemeente Den Haag",
+        },
+        {
+          id: "7",
+          title: "Kosten onderzoek en verbeteringen",
+          channel: "brief",
+          isoDate: "2022-11-10T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+          sender: "Gemeente Den Haag",
+        },
+      ],
+    }}
+  >
     {Template.bind({})}
   </Story>
 </Canvas>

From dcde9f2aed988ef4e7383bc129f021a9fd40573f Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Fri, 20 Oct 2023 15:56:48 +0200
Subject: [PATCH 05/18] WIP refactor contact timeline

---
 .../src/ContactTimelineItemFile.tsx           |  8 +++
 .../src/ContactTimelineItemSender.tsx         |  8 +++
 .../src/ContactTimelineSender.tsx             |  8 ---
 components/ContactTimeline/src/index.scss     | 67 +++++++++++++------
 components/ContactTimeline/src/index.tsx      | 52 +++++++-------
 .../src/stories/react.stories.mdx             | 20 +++---
 .../src/denhaag/contact-timeline.tokens.json  | 53 ++++++++++-----
 7 files changed, 137 insertions(+), 79 deletions(-)
 create mode 100644 components/ContactTimeline/src/ContactTimelineItemFile.tsx
 create mode 100644 components/ContactTimeline/src/ContactTimelineItemSender.tsx
 delete mode 100644 components/ContactTimeline/src/ContactTimelineSender.tsx

diff --git a/components/ContactTimeline/src/ContactTimelineItemFile.tsx b/components/ContactTimeline/src/ContactTimelineItemFile.tsx
new file mode 100644
index 0000000000..653e2361f4
--- /dev/null
+++ b/components/ContactTimeline/src/ContactTimelineItemFile.tsx
@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import React, { HTMLAttributes } from 'react';
+
+interface ContactTimelineItemFileProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const ContactTimelineItemFile: React.FC<ContactTimelineItemFileProps> = ({ children }) => {
+  return <div className={clsx('denhaag-contact-timeline__step-item-file')}>{children}</div>;
+};
diff --git a/components/ContactTimeline/src/ContactTimelineItemSender.tsx b/components/ContactTimeline/src/ContactTimelineItemSender.tsx
new file mode 100644
index 0000000000..9336c1ac52
--- /dev/null
+++ b/components/ContactTimeline/src/ContactTimelineItemSender.tsx
@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import React, { HTMLAttributes } from 'react';
+
+interface ContactTimelineItemSenderProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const ContactTimelineItemSender: React.FC<ContactTimelineItemSenderProps> = ({ children }) => {
+  return <div className={clsx('denhaag-contact-timeline__step-item-sender')}>{children}</div>;
+};
diff --git a/components/ContactTimeline/src/ContactTimelineSender.tsx b/components/ContactTimeline/src/ContactTimelineSender.tsx
deleted file mode 100644
index a06d42a97f..0000000000
--- a/components/ContactTimeline/src/ContactTimelineSender.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import clsx from 'clsx';
-import React, { HTMLAttributes } from 'react';
-
-interface ContactTimelineSenderProps extends HTMLAttributes<HTMLSpanElement> {}
-
-export const ContactTimelineSender: React.FC<ContactTimelineSenderProps> = ({ children }) => {
-  return <div className={clsx('denhaag-contact-timeline__sender')}>{children}</div>;
-};
diff --git a/components/ContactTimeline/src/index.scss b/components/ContactTimeline/src/index.scss
index 80dfcab51a..8d02b65ead 100644
--- a/components/ContactTimeline/src/index.scss
+++ b/components/ContactTimeline/src/index.scss
@@ -1,12 +1,30 @@
 .denhaag-contact-timeline__step-header {
-  --denhaag-process-steps-step-header-align-items: var(--denhaag-contact-timeline-mobile-step-marker-align-items);
-  --denhaag-step-marker-margin: var(--denhaag-contact-timeline-mobile-step-marker-margin);
+  --denhaag-process-steps-step-header-align-items: var(--denhaag-contact-timeline-step-marker-align-items);
   --denhaag-process-steps-step-heading-font-size: 20px;
+  --denhaag-process-steps-step-heading-line-height: var(--denhaag-contact-timeline-step-header-line-height);
+  --denhaag-step-marker-margin: calc(
+    (var(--denhaag-contact-timeline-step-header-line-height) - var(--denhaag-step-marker-nested-size)) / 2
+  );
+}
+
+.denhaag-contact-timeline__step-header-toggle {
+  --utrecht-button-subtle-hover-color: var(--denhaag-contact-timeline-step-header-toggle-hover-color);
+  --utrecht-button-subtle-focus-color: var(--denhaag-contact-timeline-step-header-toggle-focus-color);
+  --utrecht-button-subtle-active-color: var(--denhaag-contact-timeline-step-header-toggle-active-color);
+  --utrecht-focus-outline-style: var(--denhaag-focus-border);
+  --utrecht-button-min-block-size: 0;
 }
 
 .denhaag-contact-timeline {
-  .denhaag-process-steps__step-header-toggle {
-    min-block-size: 0;
+  --denhaag-process-steps-step-distance: var(--denhaag-contact-timeline-step-distance);
+
+  .denhaag-process-steps__step {
+    padding-block-end: var(--denhaag-contact-timeline-step-padding-block-end);
+  }
+
+  .denhaag-step-marker__connector--main-to-main {
+    top: calc(var(--denhaag-step-marker-size) / 2);
+    bottom: var(--denhaag-contact-timeline-step-marker-connector-bottom);
   }
 
   @media (width >= 768px) {
@@ -15,15 +33,21 @@
     }
 
     .denhaag-contact-timeline__step-header__date {
-      min-width: 96px;
+      min-width: var(--denhaag-contact-timeline-step-header-date-width);
+      max-width: var(--denhaag-contact-timeline-step-header-date-width);
+      line-height: var(--denhaag-contact-timeline-step-header-line-height);
+      overflow-wrap: break-word;
     }
 
     .denhaag-contact-timeline__step-header__channel {
-      min-width: 80px;
+      min-width: var(--denhaag-contact-timeline-step-header-channel-width);
+      max-width: var(--denhaag-contact-timeline-step-header-channel-width);
+      line-height: var(--denhaag-contact-timeline-step-header-line-height);
+      overflow-wrap: break-word;
     }
 
     .denhaag-step-marker__connector--main-to-main {
-      margin-inline-start: 112px;
+      margin-inline-start: var(--denhaag-contact-timeline-step-marker-connector-desktop-margin-inline-start);
     }
 
     .denhaag-process-steps__step-details {
@@ -39,8 +63,6 @@
   }
 
   @media (width <= 767px) {
-    --denhaag-process-steps-step-distance: var(--denhaag-contact-timeline-mobile-step-distance);
-
     .denhaag-process-steps__step-details {
       margin-inline-start: 40px;
     }
@@ -50,10 +72,6 @@
       display: none;
     }
 
-    .denhaag-process-steps__step {
-      padding-block-end: var(--denhaag-contact-timeline-mobile-step-padding-block-end);
-    }
-
     .denhaag-process-steps__step-body {
       position: unset;
     }
@@ -63,33 +81,40 @@
     }
 
     .denhaag-step-marker__connector--main-to-main {
-      top: calc(var(--denhaag-step-marker-size) / 2);
-      bottom: var(--denhaag-contact-timeline-mobile-step-marker-connector-bottom);
-      margin-inline-start: 0;
+      margin-inline-start: var(--denhaag-contact-timeline-step-marker-connector-mobile-margin-inline-start);
+    }
+
+    .denhaag-contact-timeline__step-item-file {
+      margin-block-end: 32px;
     }
   }
 }
 
 .denhaag-contact-timeline__meta {
   display: flex;
-  gap: var(--denhaag-contact-timeline-mobile-meta-gap);
+  gap: var(--denhaag-contact-timeline-meta-gap);
   align-items: center;
 }
 
-.denhaag-contact-timeline__sender {
+.denhaag-contact-timeline__step-item-sender {
   font-size: 18px;
   font-weight: 600; //semibold
   margin-block-start: 16px;
 }
 
+.denhaag-contact-timeline__step-item-file {
+  margin-block-start: 24px;
+  margin-block-end: 24px;
+}
+
 .utrecht-button.denhaag-process-steps__step-header-toggle {
   justify-content: space-between;
   width: 100%;
 }
 
 .denhaag-contact-timeline__meta-separator {
-  width: var(--denhaag-contact-timeline-mobile-meta-marker-size);
-  height: var(--denhaag-contact-timeline-mobile-meta-marker-size);
-  background-color: var(--denhaag-contact-timeline-mobile-meta-marker-color);
+  width: var(--denhaag-contact-timeline-meta-marker-size);
+  height: var(--denhaag-contact-timeline-meta-marker-size);
+  background-color: var(--denhaag-contact-timeline-meta-marker-color);
   border-radius: 50%;
 }
diff --git a/components/ContactTimeline/src/index.tsx b/components/ContactTimeline/src/index.tsx
index 7e5d872198..b0a3c0ad1e 100644
--- a/components/ContactTimeline/src/index.tsx
+++ b/components/ContactTimeline/src/index.tsx
@@ -1,12 +1,6 @@
 import React, { Key, OlHTMLAttributes, ReactNode, useState } from 'react';
 import { StepMarker, StepMarkerConnector } from '@gemeente-denhaag/step-marker';
-import {
-  Step,
-  StepHeader,
-  StepHeading,
-  StepHeaderToggle,
-  StepDetails,
-} from '@gemeente-denhaag/process-steps';
+import { Step, StepHeader, StepHeading, StepHeaderToggle, StepDetails } from '@gemeente-denhaag/process-steps';
 import { format, differenceInDays } from 'date-fns';
 import { nl } from 'date-fns/locale';
 import clsx from 'clsx';
@@ -19,7 +13,8 @@ import { ContactTimelineHeaderContent } from './ContactTimelineHeaderContent';
 import { ContactTimelineHeaderDate } from './ContactTimelineHeaderDate';
 import { ContactTimelineHeaderChannel } from './ContactTimelineHeaderChannel';
 import { Paragraph } from '@gemeente-denhaag/typography';
-import { ContactTimelineSender } from './ContactTimelineSender';
+import { ContactTimelineItemSender } from './ContactTimelineItemSender';
+import { ContactTimelineItemFile } from './ContactTimelineItemFile';
 
 export interface ContactTimelineItemProps {
   id: Key;
@@ -102,16 +97,20 @@ interface Props {
   locale?: Locale;
 }
 
-// Partially copied version of the Action date. We should make a generic component.
-export const ContactTimelineDate = ({ dateTime, now = new Date().toISOString(), locale = nl, todayLabel }: Props) => {
+export const formatContactTimelineDate = ({
+  dateTime,
+  now = new Date().toISOString(),
+  locale = nl,
+  todayLabel,
+}: Props): string => {
   const date = new Date(dateTime);
   const daysDifference = differenceInDays(date, new Date(now));
 
   if (daysDifference === 0) {
-    return <>{todayLabel}</>;
+    return todayLabel;
   }
 
-  return <>{format(date, 'd-M-yyyy', { locale: locale })}</>;
+  return format(date, 'd-M-yyyy', { locale });
 };
 
 const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
@@ -132,15 +131,13 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
     <Step appearance="default">
       <StepHeader className="denhaag-contact-timeline__step-header">
         <ContactTimelineHeaderDate>
-          <ContactTimelineMetaTimeItem>
-            {date ? (
-              date
-            ) : (
-              <ContactTimelineMetaTimeItem dateTime={isoDate}>
-                <ContactTimelineDate dateTime={isoDate} todayLabel={todayLabel} />
-              </ContactTimelineMetaTimeItem>
-            )}
-          </ContactTimelineMetaTimeItem>
+          {date ? (
+            date
+          ) : (
+            <ContactTimelineMetaTimeItem dateTime={isoDate}>
+              {formatContactTimelineDate({ dateTime: isoDate, todayLabel: todayLabel })}
+            </ContactTimelineMetaTimeItem>
+          )}
         </ContactTimelineHeaderDate>
         <StepMarker appearance="default" nested />
         <ContactTimelineHeaderChannel>
@@ -148,7 +145,12 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
         </ContactTimelineHeaderChannel>
         <ContactTimelineHeaderContent>
           {toggleExpanded && description ? (
-            <StepHeaderToggle ariaControls={`${id}--details`} expanded={expanded} onClick={toggleExpanded}>
+            <StepHeaderToggle
+              className="denhaag-contact-timeline__step-header-toggle"
+              ariaControls={`${id}--details`}
+              expanded={expanded}
+              onClick={toggleExpanded}
+            >
               <StepHeading>{title}</StepHeading>
             </StepHeaderToggle>
           ) : (
@@ -159,7 +161,7 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
               date
             ) : (
               <ContactTimelineMetaTimeItem dateTime={isoDate}>
-                <ContactTimelineDate dateTime={isoDate} todayLabel={todayLabel} />
+                {formatContactTimelineDate({ dateTime: isoDate, todayLabel: todayLabel })}
               </ContactTimelineMetaTimeItem>
             )}
             <ContactTimelineMetaSeparator />
@@ -169,9 +171,9 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
         {nextItem && <StepMarkerConnector appearance="default" from="main" to="main" />}
       </StepHeader>
       <StepDetails id={`${id}--details`} collapsed={!expanded}>
-        <ContactTimelineSender>{sender}</ContactTimelineSender>
+        <ContactTimelineItemSender>{sender}</ContactTimelineItemSender>
         <Paragraph>{description}</Paragraph>
-        {file}
+        {file && <ContactTimelineItemFile>{file}</ContactTimelineItemFile>}
       </StepDetails>
     </Step>
   );
diff --git a/components/ContactTimeline/src/stories/react.stories.mdx b/components/ContactTimeline/src/stories/react.stories.mdx
index 6e901c7860..7e8b06efde 100644
--- a/components/ContactTimeline/src/stories/react.stories.mdx
+++ b/components/ContactTimeline/src/stories/react.stories.mdx
@@ -116,7 +116,7 @@ export const Template = (args) => {
     args={{
       todayLabel: "vandaag",
       collapsible: true,
-      expandedItems: ["3"],
+      expandedItems: ["4"],
       items: [
         {
           id: "1",
@@ -183,7 +183,7 @@ export const Template = (args) => {
     args={{
       todayLabel: "vandaag",
       collapsible: true,
-      expandedItems: ["3"],
+      expandedItems: ["4"],
       items: [
         {
           id: "1",
@@ -209,6 +209,14 @@ export const Template = (args) => {
           description:
             "Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.",
           sender: "Gemeente Den Haag",
+        },
+        {
+          id: "4",
+          title: "Status is veranderd",
+          channel: "mail",
+          isoDate: "2022-12-01T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+          sender: "Gemeente Den Haag",
           file: (
             <File
               name="example3"
@@ -219,14 +227,6 @@ export const Template = (args) => {
             />
           ),
         },
-        {
-          id: "4",
-          title: "Status is veranderd",
-          channel: "mail",
-          isoDate: "2022-12-01T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-          sender: "Gemeente Den Haag",
-        },
         {
           id: "5",
           title: "Mijn vraag",
diff --git a/proprietary/Components/src/denhaag/contact-timeline.tokens.json b/proprietary/Components/src/denhaag/contact-timeline.tokens.json
index e3a0f37d49..96ce162511 100644
--- a/proprietary/Components/src/denhaag/contact-timeline.tokens.json
+++ b/proprietary/Components/src/denhaag/contact-timeline.tokens.json
@@ -1,24 +1,47 @@
 {
   "denhaag": {
     "contact-timeline": {
-      "mobile": {
-        "step": {
-          "marker": {
-            "align-items": { "value": "flex-start" },
-            "margin": { "value": "5px" },
-            "connector": {
-              "bottom": { "value": "0" }
-            }
+      "step": {
+        "header": {
+          "line-height": { "value": "27px" },
+          "date": {
+            "width": { "value": "96px" }
+          },
+          "channel": {
+            "width": { "value": "80px" }
           },
-          "distance": { "value": "0" },
-          "padding-block-end": { "value": "32px" }
+          "toggle": {
+            "hover": {
+              "color": { "value": "{denhaag.color.green.3}" }
+            },
+            "focus": {
+              "color": { "value": "{denhaag.color.green.3}" }
+            },
+            "active": {
+              "color": { "value": "{denhaag.color.green.3}" }
+            }
+          }
         },
-        "meta": {
-          "gap": { "value": "6px" },
-          "marker": {
-            "size": { "value": "4px" },
-            "color": { "value": "{denhaag.color.black}" }
+        "marker": {
+          "align-items": { "value": "flex-start" },
+          "connector": {
+            "bottom": { "value": "0" },
+            "desktop": {
+              "margin-inline-start": { "value": "112px" }
+            },
+            "mobile": {
+              "margin-inline-start": { "value": "0" }
+            }
           }
+        },
+        "distance": { "value": "0" },
+        "padding-block-end": { "value": "32px" }
+      },
+      "meta": {
+        "gap": { "value": "6px" },
+        "marker": {
+          "size": { "value": "4px" },
+          "color": { "value": "{denhaag.color.black}" }
         }
       }
     }

From 2326790b69c5c53f780922dc934aafb2f49891b4 Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Mon, 23 Oct 2023 12:39:34 +0200
Subject: [PATCH 06/18] WIP contact timeline refactor

---
 components/ContactTimeline/src/index.scss     | 151 ++++++++----------
 components/ContactTimeline/src/index.tsx      |  13 +-
 components/ProcessSteps/src/Step.tsx          |  10 +-
 components/ProcessSteps/src/StepDetails.tsx   |   8 +-
 .../src/denhaag/contact-timeline.tokens.json  |  39 ++++-
 5 files changed, 125 insertions(+), 96 deletions(-)

diff --git a/components/ContactTimeline/src/index.scss b/components/ContactTimeline/src/index.scss
index 8d02b65ead..180743b370 100644
--- a/components/ContactTimeline/src/index.scss
+++ b/components/ContactTimeline/src/index.scss
@@ -1,6 +1,6 @@
 .denhaag-contact-timeline__step-header {
   --denhaag-process-steps-step-header-align-items: var(--denhaag-contact-timeline-step-marker-align-items);
-  --denhaag-process-steps-step-heading-font-size: 20px;
+  --denhaag-process-steps-step-heading-font-size: var(--denhaag-contact-timeline-step-header-font-size);
   --denhaag-process-steps-step-heading-line-height: var(--denhaag-contact-timeline-step-header-line-height);
   --denhaag-step-marker-margin: calc(
     (var(--denhaag-contact-timeline-step-header-line-height) - var(--denhaag-step-marker-nested-size)) / 2
@@ -11,110 +11,97 @@
   --utrecht-button-subtle-hover-color: var(--denhaag-contact-timeline-step-header-toggle-hover-color);
   --utrecht-button-subtle-focus-color: var(--denhaag-contact-timeline-step-header-toggle-focus-color);
   --utrecht-button-subtle-active-color: var(--denhaag-contact-timeline-step-header-toggle-active-color);
-  --utrecht-focus-outline-style: var(--denhaag-focus-border);
   --utrecht-button-min-block-size: 0;
 }
 
 .denhaag-contact-timeline {
   --denhaag-process-steps-step-distance: var(--denhaag-contact-timeline-step-distance);
+}
+.denhaag-contact-timeline__step {
+  padding-block-end: var(--denhaag-contact-timeline-step-padding-block-end);
+}
 
-  .denhaag-process-steps__step {
-    padding-block-end: var(--denhaag-contact-timeline-step-padding-block-end);
-  }
-
-  .denhaag-step-marker__connector--main-to-main {
-    top: calc(var(--denhaag-step-marker-size) / 2);
-    bottom: var(--denhaag-contact-timeline-step-marker-connector-bottom);
-  }
-
-  @media (width >= 768px) {
-    .denhaag-contact-timeline__meta {
-      display: none;
-    }
-
-    .denhaag-contact-timeline__step-header__date {
-      min-width: var(--denhaag-contact-timeline-step-header-date-width);
-      max-width: var(--denhaag-contact-timeline-step-header-date-width);
-      line-height: var(--denhaag-contact-timeline-step-header-line-height);
-      overflow-wrap: break-word;
-    }
-
-    .denhaag-contact-timeline__step-header__channel {
-      min-width: var(--denhaag-contact-timeline-step-header-channel-width);
-      max-width: var(--denhaag-contact-timeline-step-header-channel-width);
-      line-height: var(--denhaag-contact-timeline-step-header-line-height);
-      overflow-wrap: break-word;
-    }
-
-    .denhaag-step-marker__connector--main-to-main {
-      margin-inline-start: var(--denhaag-contact-timeline-step-marker-connector-desktop-margin-inline-start);
-    }
-
-    .denhaag-process-steps__step-details {
-      margin-inline-start: 248px;
-    }
-
-    .denhaag-contact-timeline__step-header__content {
-      display: flex;
-      flex-direction: row;
-      gap: 6px;
-      align-items: center;
-    }
-  }
-
-  @media (width <= 767px) {
-    .denhaag-process-steps__step-details {
-      margin-inline-start: 40px;
-    }
-
-    .denhaag-contact-timeline__step-header__date,
-    .denhaag-contact-timeline__step-header__channel {
-      display: none;
-    }
-
-    .denhaag-process-steps__step-body {
-      position: unset;
-    }
-
-    .denhaag-contact-timeline__step-header__content {
-      width: 100%;
-    }
-
-    .denhaag-step-marker__connector--main-to-main {
-      margin-inline-start: var(--denhaag-contact-timeline-step-marker-connector-mobile-margin-inline-start);
-    }
-
-    .denhaag-contact-timeline__step-item-file {
-      margin-block-end: 32px;
-    }
-  }
+.denhaag-step-marker__connector.denhaag-contact-timeline__step-marker-connector {
+  top: calc(var(--denhaag-step-marker-size) / 2);
+  bottom: var(--denhaag-contact-timeline-step-marker-connector-bottom);
 }
 
 .denhaag-contact-timeline__meta {
   display: flex;
-  gap: var(--denhaag-contact-timeline-meta-gap);
+  gap: var(--denhaag-contact-timeline-step-meta-gap);
   align-items: center;
 }
 
 .denhaag-contact-timeline__step-item-sender {
-  font-size: 18px;
-  font-weight: 600; //semibold
-  margin-block-start: 16px;
+  font-size: var(--denhaag-contact-timeline-step-details-sender-font-size);
+  font-weight: var(--denhaag-contact-timeline-step-details-sender-font-weight);
+  margin-block-start: var(--denhaag-contact-timeline-step-details-sender-margin-block-start);
 }
 
 .denhaag-contact-timeline__step-item-file {
-  margin-block-start: 24px;
-  margin-block-end: 24px;
+  margin-block-start: var(--denhaag-contact-timeline-step-details-file-margin-block-start);
+  margin-block-end: var(--denhaag-contact-timeline-step-details-file-margin-block-end);
 }
 
-.utrecht-button.denhaag-process-steps__step-header-toggle {
+.denhaag-process-steps__step-header-toggle.denhaag-contact-timeline__step-header-toggle {
   justify-content: space-between;
   width: 100%;
 }
 
 .denhaag-contact-timeline__meta-separator {
-  width: var(--denhaag-contact-timeline-meta-marker-size);
-  height: var(--denhaag-contact-timeline-meta-marker-size);
-  background-color: var(--denhaag-contact-timeline-meta-marker-color);
+  width: var(--denhaag-contact-timeline-step-meta-marker-size);
+  height: var(--denhaag-contact-timeline-step-meta-marker-size);
+  background-color: var(--denhaag-contact-timeline-step-meta-marker-color);
   border-radius: 50%;
 }
+
+@media (width >= 768px) {
+  .denhaag-contact-timeline__meta {
+    display: none;
+  }
+
+  .denhaag-contact-timeline__step-header__date {
+    min-width: var(--denhaag-contact-timeline-step-header-date-width);
+    max-width: var(--denhaag-contact-timeline-step-header-date-width);
+    line-height: var(--denhaag-contact-timeline-step-header-line-height);
+    overflow-wrap: break-word;
+  }
+
+  .denhaag-contact-timeline__step-header__channel {
+    min-width: var(--denhaag-contact-timeline-step-header-channel-width);
+    max-width: var(--denhaag-contact-timeline-step-header-channel-width);
+    line-height: var(--denhaag-contact-timeline-step-header-line-height);
+    overflow-wrap: break-word;
+  }
+
+  .denhaag-step-marker__connector.denhaag-contact-timeline__step-marker-connector {
+    margin-inline-start: var(--denhaag-contact-timeline-step-marker-connector-desktop-margin-inline-start);
+  }
+
+  .denhaag-contact-timeline__step-details {
+    margin-inline-start: var(--denhaag-contact-timeline-step-details-desktop-margin-inline-start);
+  }
+}
+
+@media (width <= 767px) {
+  .denhaag-contact-timeline__step-details {
+    margin-inline-start: var(--denhaag-contact-timeline-step-details-mobile-margin-inline-start);
+  }
+
+  .denhaag-contact-timeline__step-header__date,
+  .denhaag-contact-timeline__step-header__channel {
+    display: none;
+  }
+
+  .denhaag-contact-timeline__step-header__content {
+    width: 100%;
+  }
+
+  .denhaag-step-marker__connector.denhaag-contact-timeline__step-marker-connector {
+    margin-inline-start: var(--denhaag-contact-timeline-step-marker-connector-mobile-margin-inline-start);
+  }
+
+  .denhaag-contact-timeline__step-item-file {
+    margin-block-end: var(--denhaag-contact-timeline-step-details-file-mobile-margin-block-end);
+  }
+}
diff --git a/components/ContactTimeline/src/index.tsx b/components/ContactTimeline/src/index.tsx
index b0a3c0ad1e..08d86fdf8e 100644
--- a/components/ContactTimeline/src/index.tsx
+++ b/components/ContactTimeline/src/index.tsx
@@ -128,7 +128,7 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
   toggleExpanded,
 }) => {
   return (
-    <Step appearance="default">
+    <Step className="denhaag-contact-timeline__step" appearance="default">
       <StepHeader className="denhaag-contact-timeline__step-header">
         <ContactTimelineHeaderDate>
           {date ? (
@@ -168,9 +168,16 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
             <ContactTimelineMetaItem>{channel}</ContactTimelineMetaItem>
           </ContactTimelineMeta>
         </ContactTimelineHeaderContent>
-        {nextItem && <StepMarkerConnector appearance="default" from="main" to="main" />}
+        {nextItem && (
+          <StepMarkerConnector
+            className="denhaag-contact-timeline__step-marker-connector"
+            appearance="default"
+            from="main"
+            to="main"
+          />
+        )}
       </StepHeader>
-      <StepDetails id={`${id}--details`} collapsed={!expanded}>
+      <StepDetails className="denhaag-contact-timeline__step-details" id={`${id}--details`} collapsed={!expanded}>
         <ContactTimelineItemSender>{sender}</ContactTimelineItemSender>
         <Paragraph>{description}</Paragraph>
         {file && <ContactTimelineItemFile>{file}</ContactTimelineItemFile>}
diff --git a/components/ProcessSteps/src/Step.tsx b/components/ProcessSteps/src/Step.tsx
index f401433b56..7febb58d33 100644
--- a/components/ProcessSteps/src/Step.tsx
+++ b/components/ProcessSteps/src/Step.tsx
@@ -8,11 +8,17 @@ export interface StepProps extends LiHTMLAttributes<HTMLLIElement> {
   current?: boolean;
 }
 
-export const Step: React.FC<StepProps> = ({ children, current = false, appearance = 'not-checked', ...props }) => {
+export const Step: React.FC<StepProps> = ({
+  className,
+  children,
+  current = false,
+  appearance = 'not-checked',
+  ...props
+}) => {
   return (
     <li
       {...props}
-      className={clsx('denhaag-process-steps__step', `denhaag-process-steps__step--${appearance}`)}
+      className={clsx('denhaag-process-steps__step', `denhaag-process-steps__step--${appearance}`, className)}
       aria-current={current ? 'step' : undefined}
     >
       {children}
diff --git a/components/ProcessSteps/src/StepDetails.tsx b/components/ProcessSteps/src/StepDetails.tsx
index b8ce93b315..27c5e3b510 100644
--- a/components/ProcessSteps/src/StepDetails.tsx
+++ b/components/ProcessSteps/src/StepDetails.tsx
@@ -6,10 +6,14 @@ interface StepDetailsProps extends HTMLAttributes<HTMLDivElement> {
   collapsed?: boolean;
 }
 
-export const StepDetails: React.FC<StepDetailsProps> = ({ id, collapsed = false, children }) => (
+export const StepDetails: React.FC<StepDetailsProps> = ({ id, className, collapsed = false, children }) => (
   <div
     id={id}
-    className={clsx('denhaag-process-steps__step-details', collapsed && 'denhaag-process-steps__step-details--hidden')}
+    className={clsx(
+      'denhaag-process-steps__step-details',
+      collapsed && 'denhaag-process-steps__step-details--hidden',
+      className,
+    )}
   >
     {children}
   </div>
diff --git a/proprietary/Components/src/denhaag/contact-timeline.tokens.json b/proprietary/Components/src/denhaag/contact-timeline.tokens.json
index 96ce162511..d70c09964a 100644
--- a/proprietary/Components/src/denhaag/contact-timeline.tokens.json
+++ b/proprietary/Components/src/denhaag/contact-timeline.tokens.json
@@ -4,6 +4,7 @@
       "step": {
         "header": {
           "line-height": { "value": "27px" },
+          "font-size": { "value": "20px" },
           "date": {
             "width": { "value": "96px" }
           },
@@ -34,15 +35,39 @@
             }
           }
         },
+        "details": {
+          "desktop": {
+            "margin-inline-start": { "value": "248px" }
+          },
+          "mobile": {
+            "margin-inline-start": { "value": "40px" }
+          },
+          "sender": {
+            "font": {
+              "weight": {
+                "value": "{denhaag.typography.weight.semibold}"
+              },
+              "size": { "value": "18px" }
+            },
+            "margin-block-start": { "value": "16px" }
+          },
+          "file": {
+            "margin-block-start": { "value": "24px" },
+            "margin-block-end": { "value": "24px" },
+            "mobile": {
+              "margin-block-end": { "value": "32px" }
+            }
+          }
+        },
+        "meta": {
+          "gap": { "value": "6px" },
+          "marker": {
+            "size": { "value": "4px" },
+            "color": { "value": "{denhaag.color.black}" }
+          }
+        },
         "distance": { "value": "0" },
         "padding-block-end": { "value": "32px" }
-      },
-      "meta": {
-        "gap": { "value": "6px" },
-        "marker": {
-          "size": { "value": "4px" },
-          "color": { "value": "{denhaag.color.black}" }
-        }
       }
     }
   }

From f15707f3d2586258b6f29c047f57ee47b9d8aeb2 Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Mon, 23 Oct 2023 16:24:29 +0200
Subject: [PATCH 07/18] WIP refactor contact timeline

---
 .../ContactTimeline/src/ContactTimeline.tsx   | 189 +++++++++++++++
 .../ContactTimeline/src/_ContactTimeline.scss |   3 +
 .../src/_ContactTimelineHeader.scss           |   8 +
 .../src/_ContactTimelineHeaderChannel.scss    |  10 +
 .../src/_ContactTimelineHeaderContent.scss    |   5 +
 .../src/_ContactTimelineHeaderDate.scss       |  10 +
 .../src/_ContactTimelineHeaderToggle.scss     |  11 +
 .../src/_ContactTimelineItemFile.scss         |   8 +
 .../src/_ContactTimelineItemSender.scss       |   5 +
 .../src/_ContactTimelineMeta.scss             |   9 +
 .../src/_ContactTimelineMetaSeparator.scss    |   6 +
 .../src/_ContactTimelineStep.scss             |   3 +
 .../src/_ContactTimelineStepDetails.scss      |   7 +
 .../_ContactTimelineStepMarkerConnector.scss  |  12 +
 components/ContactTimeline/src/index.scss     | 120 ++--------
 components/ContactTimeline/src/index.tsx      | 198 +---------------
 .../src/stories/bem.stories.mdx               | 215 +++++++++++++++++-
 .../src/stories/react.stories.mdx             |   2 +-
 18 files changed, 519 insertions(+), 302 deletions(-)
 create mode 100644 components/ContactTimeline/src/ContactTimeline.tsx
 create mode 100644 components/ContactTimeline/src/_ContactTimeline.scss
 create mode 100644 components/ContactTimeline/src/_ContactTimelineHeader.scss
 create mode 100644 components/ContactTimeline/src/_ContactTimelineHeaderChannel.scss
 create mode 100644 components/ContactTimeline/src/_ContactTimelineHeaderContent.scss
 create mode 100644 components/ContactTimeline/src/_ContactTimelineHeaderDate.scss
 create mode 100644 components/ContactTimeline/src/_ContactTimelineHeaderToggle.scss
 create mode 100644 components/ContactTimeline/src/_ContactTimelineItemFile.scss
 create mode 100644 components/ContactTimeline/src/_ContactTimelineItemSender.scss
 create mode 100644 components/ContactTimeline/src/_ContactTimelineMeta.scss
 create mode 100644 components/ContactTimeline/src/_ContactTimelineMetaSeparator.scss
 create mode 100644 components/ContactTimeline/src/_ContactTimelineStep.scss
 create mode 100644 components/ContactTimeline/src/_ContactTimelineStepDetails.scss
 create mode 100644 components/ContactTimeline/src/_ContactTimelineStepMarkerConnector.scss

diff --git a/components/ContactTimeline/src/ContactTimeline.tsx b/components/ContactTimeline/src/ContactTimeline.tsx
new file mode 100644
index 0000000000..08d86fdf8e
--- /dev/null
+++ b/components/ContactTimeline/src/ContactTimeline.tsx
@@ -0,0 +1,189 @@
+import React, { Key, OlHTMLAttributes, ReactNode, useState } from 'react';
+import { StepMarker, StepMarkerConnector } from '@gemeente-denhaag/step-marker';
+import { Step, StepHeader, StepHeading, StepHeaderToggle, StepDetails } from '@gemeente-denhaag/process-steps';
+import { format, differenceInDays } from 'date-fns';
+import { nl } from 'date-fns/locale';
+import clsx from 'clsx';
+import './index.scss';
+import { ContactTimelineMetaSeparator } from './ContactTimelineMetaSeparator';
+import { ContactTimelineMetaItem } from './ContactTimelineMetaItem';
+import { ContactTimelineMetaTimeItem } from './ContactTimelineMetaTimeItem';
+import { ContactTimelineMeta } from './ContactTimelineMeta';
+import { ContactTimelineHeaderContent } from './ContactTimelineHeaderContent';
+import { ContactTimelineHeaderDate } from './ContactTimelineHeaderDate';
+import { ContactTimelineHeaderChannel } from './ContactTimelineHeaderChannel';
+import { Paragraph } from '@gemeente-denhaag/typography';
+import { ContactTimelineItemSender } from './ContactTimelineItemSender';
+import { ContactTimelineItemFile } from './ContactTimelineItemFile';
+
+export interface ContactTimelineItemProps {
+  id: Key;
+  title: ReactNode;
+  description?: ReactNode;
+  file?: ReactNode;
+  sender?: ReactNode;
+  date: ReactNode;
+  isoDate: string;
+  todayLabel: string;
+  channel: ReactNode;
+  nextItem?: boolean;
+  expanded?: boolean;
+  toggleExpanded: false | (() => void);
+}
+
+export interface ContactTimelineProps {
+  items: ContactTimelineItemProps[];
+  expandedItems?: Key[];
+  collapsible?: boolean;
+  todayLabel: string;
+}
+
+const toggleState = (key: Key, collection: Key[], setCollection: React.Dispatch<React.SetStateAction<React.Key[]>>) => {
+  if (collection.includes(key)) {
+    setCollection(collection.filter((item) => item !== key));
+  } else {
+    setCollection([...collection, key]);
+  }
+};
+
+export const ContactTimeline: React.FC<ContactTimelineProps> = ({
+  items,
+  todayLabel,
+  expandedItems: initialExpanded = [],
+  collapsible = false,
+}: ContactTimelineProps) => {
+  const [expandedItems, setexpandedItems] = useState(initialExpanded);
+
+  return (
+    <ContactTimelineList className="denhaag-process-steps">
+      {items.map((item, index) => {
+        const nextItem = index < items.length - 1;
+        return (
+          <ContactTimelineListItem
+            {...item}
+            key={item.id}
+            expanded={collapsible ? expandedItems.includes(item.id) : false}
+            nextItem={nextItem}
+            todayLabel={todayLabel}
+            toggleExpanded={
+              collapsible &&
+              (() => {
+                toggleState(item.id, expandedItems, setexpandedItems);
+              })
+            }
+          />
+        );
+      })}
+    </ContactTimelineList>
+  );
+};
+
+export interface ContactTimelineListProps extends OlHTMLAttributes<HTMLOListElement> {}
+
+export const ContactTimelineList: React.FC<ContactTimelineListProps> = ({
+  className,
+  children,
+  ...props
+}: ContactTimelineListProps) => (
+  <ol {...props} className={clsx('denhaag-contact-timeline', className)}>
+    {children}
+  </ol>
+);
+
+interface Props {
+  dateTime: string;
+  todayLabel: string;
+  now?: string;
+  locale?: Locale;
+}
+
+export const formatContactTimelineDate = ({
+  dateTime,
+  now = new Date().toISOString(),
+  locale = nl,
+  todayLabel,
+}: Props): string => {
+  const date = new Date(dateTime);
+  const daysDifference = differenceInDays(date, new Date(now));
+
+  if (daysDifference === 0) {
+    return todayLabel;
+  }
+
+  return format(date, 'd-M-yyyy', { locale });
+};
+
+const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
+  id,
+  title,
+  description,
+  file,
+  date,
+  isoDate,
+  sender = '',
+  todayLabel,
+  channel,
+  nextItem,
+  expanded = false,
+  toggleExpanded,
+}) => {
+  return (
+    <Step className="denhaag-contact-timeline__step" appearance="default">
+      <StepHeader className="denhaag-contact-timeline__step-header">
+        <ContactTimelineHeaderDate>
+          {date ? (
+            date
+          ) : (
+            <ContactTimelineMetaTimeItem dateTime={isoDate}>
+              {formatContactTimelineDate({ dateTime: isoDate, todayLabel: todayLabel })}
+            </ContactTimelineMetaTimeItem>
+          )}
+        </ContactTimelineHeaderDate>
+        <StepMarker appearance="default" nested />
+        <ContactTimelineHeaderChannel>
+          <ContactTimelineMetaItem>{channel}</ContactTimelineMetaItem>
+        </ContactTimelineHeaderChannel>
+        <ContactTimelineHeaderContent>
+          {toggleExpanded && description ? (
+            <StepHeaderToggle
+              className="denhaag-contact-timeline__step-header-toggle"
+              ariaControls={`${id}--details`}
+              expanded={expanded}
+              onClick={toggleExpanded}
+            >
+              <StepHeading>{title}</StepHeading>
+            </StepHeaderToggle>
+          ) : (
+            <StepHeading>{title}</StepHeading>
+          )}
+          <ContactTimelineMeta>
+            {date ? (
+              date
+            ) : (
+              <ContactTimelineMetaTimeItem dateTime={isoDate}>
+                {formatContactTimelineDate({ dateTime: isoDate, todayLabel: todayLabel })}
+              </ContactTimelineMetaTimeItem>
+            )}
+            <ContactTimelineMetaSeparator />
+            <ContactTimelineMetaItem>{channel}</ContactTimelineMetaItem>
+          </ContactTimelineMeta>
+        </ContactTimelineHeaderContent>
+        {nextItem && (
+          <StepMarkerConnector
+            className="denhaag-contact-timeline__step-marker-connector"
+            appearance="default"
+            from="main"
+            to="main"
+          />
+        )}
+      </StepHeader>
+      <StepDetails className="denhaag-contact-timeline__step-details" id={`${id}--details`} collapsed={!expanded}>
+        <ContactTimelineItemSender>{sender}</ContactTimelineItemSender>
+        <Paragraph>{description}</Paragraph>
+        {file && <ContactTimelineItemFile>{file}</ContactTimelineItemFile>}
+      </StepDetails>
+    </Step>
+  );
+};
+
+export default ContactTimeline;
diff --git a/components/ContactTimeline/src/_ContactTimeline.scss b/components/ContactTimeline/src/_ContactTimeline.scss
new file mode 100644
index 0000000000..98e1d732c9
--- /dev/null
+++ b/components/ContactTimeline/src/_ContactTimeline.scss
@@ -0,0 +1,3 @@
+.denhaag-contact-timeline {
+  --denhaag-process-steps-step-distance: var(--denhaag-contact-timeline-step-distance);
+}
diff --git a/components/ContactTimeline/src/_ContactTimelineHeader.scss b/components/ContactTimeline/src/_ContactTimelineHeader.scss
new file mode 100644
index 0000000000..003c062446
--- /dev/null
+++ b/components/ContactTimeline/src/_ContactTimelineHeader.scss
@@ -0,0 +1,8 @@
+.denhaag-contact-timeline__step-header {
+  --denhaag-process-steps-step-header-align-items: var(--denhaag-contact-timeline-step-marker-align-items);
+  --denhaag-process-steps-step-heading-font-size: var(--denhaag-contact-timeline-step-header-font-size);
+  --denhaag-process-steps-step-heading-line-height: var(--denhaag-contact-timeline-step-header-line-height);
+  --denhaag-step-marker-margin: calc(
+    (var(--denhaag-contact-timeline-step-header-line-height) - var(--denhaag-step-marker-nested-size)) / 2
+  );
+}
\ No newline at end of file
diff --git a/components/ContactTimeline/src/_ContactTimelineHeaderChannel.scss b/components/ContactTimeline/src/_ContactTimelineHeaderChannel.scss
new file mode 100644
index 0000000000..f8a0d6ab5f
--- /dev/null
+++ b/components/ContactTimeline/src/_ContactTimelineHeaderChannel.scss
@@ -0,0 +1,10 @@
+.denhaag-contact-timeline__step-header__channel {
+  min-width: var(--denhaag-contact-timeline-step-header-channel-width);
+  max-width: var(--denhaag-contact-timeline-step-header-channel-width);
+  line-height: var(--denhaag-contact-timeline-step-header-line-height);
+  overflow-wrap: break-word;
+
+  @media (width <= 767px) {
+    display: none;
+  }
+}
diff --git a/components/ContactTimeline/src/_ContactTimelineHeaderContent.scss b/components/ContactTimeline/src/_ContactTimelineHeaderContent.scss
new file mode 100644
index 0000000000..cd59062b6b
--- /dev/null
+++ b/components/ContactTimeline/src/_ContactTimelineHeaderContent.scss
@@ -0,0 +1,5 @@
+.denhaag-contact-timeline__step-header__content {
+  @media (width <= 767px) {
+    width: 100%;
+  }
+}
diff --git a/components/ContactTimeline/src/_ContactTimelineHeaderDate.scss b/components/ContactTimeline/src/_ContactTimelineHeaderDate.scss
new file mode 100644
index 0000000000..7bfca1051b
--- /dev/null
+++ b/components/ContactTimeline/src/_ContactTimelineHeaderDate.scss
@@ -0,0 +1,10 @@
+.denhaag-contact-timeline__step-header__date {
+  min-width: var(--denhaag-contact-timeline-step-header-date-width);
+  max-width: var(--denhaag-contact-timeline-step-header-date-width);
+  line-height: var(--denhaag-contact-timeline-step-header-line-height);
+  overflow-wrap: break-word;
+
+  @media (width <= 767px) {
+    display: none;
+  }
+}
diff --git a/components/ContactTimeline/src/_ContactTimelineHeaderToggle.scss b/components/ContactTimeline/src/_ContactTimelineHeaderToggle.scss
new file mode 100644
index 0000000000..0db5c60e9e
--- /dev/null
+++ b/components/ContactTimeline/src/_ContactTimelineHeaderToggle.scss
@@ -0,0 +1,11 @@
+.denhaag-process-steps__step-header-toggle {
+  &.denhaag-contact-timeline__step-header-toggle {
+    --utrecht-button-subtle-hover-color: var(--denhaag-contact-timeline-step-header-toggle-hover-color);
+    --utrecht-button-subtle-focus-color: var(--denhaag-contact-timeline-step-header-toggle-focus-color);
+    --utrecht-button-subtle-active-color: var(--denhaag-contact-timeline-step-header-toggle-active-color);
+    --utrecht-button-min-block-size: 0;
+
+    justify-content: space-between;
+    width: 100%;
+  }
+}
diff --git a/components/ContactTimeline/src/_ContactTimelineItemFile.scss b/components/ContactTimeline/src/_ContactTimelineItemFile.scss
new file mode 100644
index 0000000000..c7b54df7f2
--- /dev/null
+++ b/components/ContactTimeline/src/_ContactTimelineItemFile.scss
@@ -0,0 +1,8 @@
+.denhaag-contact-timeline__step-item-file {
+  margin-block-start: var(--denhaag-contact-timeline-step-details-file-margin-block-start);
+  margin-block-end: var(--denhaag-contact-timeline-step-details-file-margin-block-end);
+
+  @media (width <= 767px) {
+    margin-block-end: var(--denhaag-contact-timeline-step-details-file-mobile-margin-block-end);
+  }
+}
diff --git a/components/ContactTimeline/src/_ContactTimelineItemSender.scss b/components/ContactTimeline/src/_ContactTimelineItemSender.scss
new file mode 100644
index 0000000000..6e8669058e
--- /dev/null
+++ b/components/ContactTimeline/src/_ContactTimelineItemSender.scss
@@ -0,0 +1,5 @@
+.denhaag-contact-timeline__step-item-sender {
+  font-size: var(--denhaag-contact-timeline-step-details-sender-font-size);
+  font-weight: var(--denhaag-contact-timeline-step-details-sender-font-weight);
+  margin-block-start: var(--denhaag-contact-timeline-step-details-sender-margin-block-start);
+}
\ No newline at end of file
diff --git a/components/ContactTimeline/src/_ContactTimelineMeta.scss b/components/ContactTimeline/src/_ContactTimelineMeta.scss
new file mode 100644
index 0000000000..c09bb8265b
--- /dev/null
+++ b/components/ContactTimeline/src/_ContactTimelineMeta.scss
@@ -0,0 +1,9 @@
+.denhaag-contact-timeline__meta {
+  display: flex;
+  gap: var(--denhaag-contact-timeline-step-meta-gap);
+  align-items: center;
+
+  @media (width >= 768px) {
+    display: none;
+  }
+}
diff --git a/components/ContactTimeline/src/_ContactTimelineMetaSeparator.scss b/components/ContactTimeline/src/_ContactTimelineMetaSeparator.scss
new file mode 100644
index 0000000000..f86f0f9387
--- /dev/null
+++ b/components/ContactTimeline/src/_ContactTimelineMetaSeparator.scss
@@ -0,0 +1,6 @@
+.denhaag-contact-timeline__meta-separator {
+  width: var(--denhaag-contact-timeline-step-meta-marker-size);
+  height: var(--denhaag-contact-timeline-step-meta-marker-size);
+  background-color: var(--denhaag-contact-timeline-step-meta-marker-color);
+  border-radius: 50%;
+}
\ No newline at end of file
diff --git a/components/ContactTimeline/src/_ContactTimelineStep.scss b/components/ContactTimeline/src/_ContactTimelineStep.scss
new file mode 100644
index 0000000000..1c63ae4bc9
--- /dev/null
+++ b/components/ContactTimeline/src/_ContactTimelineStep.scss
@@ -0,0 +1,3 @@
+.denhaag-contact-timeline__step {
+  padding-block-end: var(--denhaag-contact-timeline-step-padding-block-end);
+}
\ No newline at end of file
diff --git a/components/ContactTimeline/src/_ContactTimelineStepDetails.scss b/components/ContactTimeline/src/_ContactTimelineStepDetails.scss
new file mode 100644
index 0000000000..e821cf61ca
--- /dev/null
+++ b/components/ContactTimeline/src/_ContactTimelineStepDetails.scss
@@ -0,0 +1,7 @@
+.denhaag-contact-timeline__step-details {
+  margin-inline-start: var(--denhaag-contact-timeline-step-details-desktop-margin-inline-start);
+
+  @media (width <= 767px) {
+    margin-inline-start: var(--denhaag-contact-timeline-step-details-mobile-margin-inline-start);
+  }
+}
diff --git a/components/ContactTimeline/src/_ContactTimelineStepMarkerConnector.scss b/components/ContactTimeline/src/_ContactTimelineStepMarkerConnector.scss
new file mode 100644
index 0000000000..ed509ef94b
--- /dev/null
+++ b/components/ContactTimeline/src/_ContactTimelineStepMarkerConnector.scss
@@ -0,0 +1,12 @@
+.denhaag-step-marker__connector {
+  &.denhaag-contact-timeline__step-marker-connector {
+    top: calc(var(--denhaag-step-marker-size) / 2);
+    bottom: var(--denhaag-contact-timeline-step-marker-connector-bottom);
+
+    margin-inline-start: var(--denhaag-contact-timeline-step-marker-connector-desktop-margin-inline-start);
+    
+    @media (width <= 767px) {
+      margin-inline-start: var(--denhaag-contact-timeline-step-marker-connector-mobile-margin-inline-start);
+    }
+  }
+}
diff --git a/components/ContactTimeline/src/index.scss b/components/ContactTimeline/src/index.scss
index 180743b370..dc0d22dfeb 100644
--- a/components/ContactTimeline/src/index.scss
+++ b/components/ContactTimeline/src/index.scss
@@ -1,107 +1,13 @@
-.denhaag-contact-timeline__step-header {
-  --denhaag-process-steps-step-header-align-items: var(--denhaag-contact-timeline-step-marker-align-items);
-  --denhaag-process-steps-step-heading-font-size: var(--denhaag-contact-timeline-step-header-font-size);
-  --denhaag-process-steps-step-heading-line-height: var(--denhaag-contact-timeline-step-header-line-height);
-  --denhaag-step-marker-margin: calc(
-    (var(--denhaag-contact-timeline-step-header-line-height) - var(--denhaag-step-marker-nested-size)) / 2
-  );
-}
-
-.denhaag-contact-timeline__step-header-toggle {
-  --utrecht-button-subtle-hover-color: var(--denhaag-contact-timeline-step-header-toggle-hover-color);
-  --utrecht-button-subtle-focus-color: var(--denhaag-contact-timeline-step-header-toggle-focus-color);
-  --utrecht-button-subtle-active-color: var(--denhaag-contact-timeline-step-header-toggle-active-color);
-  --utrecht-button-min-block-size: 0;
-}
-
-.denhaag-contact-timeline {
-  --denhaag-process-steps-step-distance: var(--denhaag-contact-timeline-step-distance);
-}
-.denhaag-contact-timeline__step {
-  padding-block-end: var(--denhaag-contact-timeline-step-padding-block-end);
-}
-
-.denhaag-step-marker__connector.denhaag-contact-timeline__step-marker-connector {
-  top: calc(var(--denhaag-step-marker-size) / 2);
-  bottom: var(--denhaag-contact-timeline-step-marker-connector-bottom);
-}
-
-.denhaag-contact-timeline__meta {
-  display: flex;
-  gap: var(--denhaag-contact-timeline-step-meta-gap);
-  align-items: center;
-}
-
-.denhaag-contact-timeline__step-item-sender {
-  font-size: var(--denhaag-contact-timeline-step-details-sender-font-size);
-  font-weight: var(--denhaag-contact-timeline-step-details-sender-font-weight);
-  margin-block-start: var(--denhaag-contact-timeline-step-details-sender-margin-block-start);
-}
-
-.denhaag-contact-timeline__step-item-file {
-  margin-block-start: var(--denhaag-contact-timeline-step-details-file-margin-block-start);
-  margin-block-end: var(--denhaag-contact-timeline-step-details-file-margin-block-end);
-}
-
-.denhaag-process-steps__step-header-toggle.denhaag-contact-timeline__step-header-toggle {
-  justify-content: space-between;
-  width: 100%;
-}
-
-.denhaag-contact-timeline__meta-separator {
-  width: var(--denhaag-contact-timeline-step-meta-marker-size);
-  height: var(--denhaag-contact-timeline-step-meta-marker-size);
-  background-color: var(--denhaag-contact-timeline-step-meta-marker-color);
-  border-radius: 50%;
-}
-
-@media (width >= 768px) {
-  .denhaag-contact-timeline__meta {
-    display: none;
-  }
-
-  .denhaag-contact-timeline__step-header__date {
-    min-width: var(--denhaag-contact-timeline-step-header-date-width);
-    max-width: var(--denhaag-contact-timeline-step-header-date-width);
-    line-height: var(--denhaag-contact-timeline-step-header-line-height);
-    overflow-wrap: break-word;
-  }
-
-  .denhaag-contact-timeline__step-header__channel {
-    min-width: var(--denhaag-contact-timeline-step-header-channel-width);
-    max-width: var(--denhaag-contact-timeline-step-header-channel-width);
-    line-height: var(--denhaag-contact-timeline-step-header-line-height);
-    overflow-wrap: break-word;
-  }
-
-  .denhaag-step-marker__connector.denhaag-contact-timeline__step-marker-connector {
-    margin-inline-start: var(--denhaag-contact-timeline-step-marker-connector-desktop-margin-inline-start);
-  }
-
-  .denhaag-contact-timeline__step-details {
-    margin-inline-start: var(--denhaag-contact-timeline-step-details-desktop-margin-inline-start);
-  }
-}
-
-@media (width <= 767px) {
-  .denhaag-contact-timeline__step-details {
-    margin-inline-start: var(--denhaag-contact-timeline-step-details-mobile-margin-inline-start);
-  }
-
-  .denhaag-contact-timeline__step-header__date,
-  .denhaag-contact-timeline__step-header__channel {
-    display: none;
-  }
-
-  .denhaag-contact-timeline__step-header__content {
-    width: 100%;
-  }
-
-  .denhaag-step-marker__connector.denhaag-contact-timeline__step-marker-connector {
-    margin-inline-start: var(--denhaag-contact-timeline-step-marker-connector-mobile-margin-inline-start);
-  }
-
-  .denhaag-contact-timeline__step-item-file {
-    margin-block-end: var(--denhaag-contact-timeline-step-details-file-mobile-margin-block-end);
-  }
-}
+@import "./ContactTimeline";
+@import "./ContactTimelineHeader";
+@import "./ContactTimelineHeaderChannel";
+@import "./ContactTimelineHeaderContent";
+@import "./ContactTimelineHeaderDate";
+@import "./ContactTimelineHeaderToggle";
+@import "./ContactTimelineItemFile";
+@import "./ContactTimelineItemSender";
+@import "./ContactTimelineMeta";
+@import "./ContactTimelineMetaSeparator";
+@import "./ContactTimelineStep";
+@import "./ContactTimelineStepDetails";
+@import "./ContactTimelineStepMarkerConnector";
diff --git a/components/ContactTimeline/src/index.tsx b/components/ContactTimeline/src/index.tsx
index 08d86fdf8e..37a494c787 100644
--- a/components/ContactTimeline/src/index.tsx
+++ b/components/ContactTimeline/src/index.tsx
@@ -1,189 +1,13 @@
-import React, { Key, OlHTMLAttributes, ReactNode, useState } from 'react';
-import { StepMarker, StepMarkerConnector } from '@gemeente-denhaag/step-marker';
-import { Step, StepHeader, StepHeading, StepHeaderToggle, StepDetails } from '@gemeente-denhaag/process-steps';
-import { format, differenceInDays } from 'date-fns';
-import { nl } from 'date-fns/locale';
-import clsx from 'clsx';
-import './index.scss';
-import { ContactTimelineMetaSeparator } from './ContactTimelineMetaSeparator';
-import { ContactTimelineMetaItem } from './ContactTimelineMetaItem';
-import { ContactTimelineMetaTimeItem } from './ContactTimelineMetaTimeItem';
-import { ContactTimelineMeta } from './ContactTimelineMeta';
-import { ContactTimelineHeaderContent } from './ContactTimelineHeaderContent';
-import { ContactTimelineHeaderDate } from './ContactTimelineHeaderDate';
-import { ContactTimelineHeaderChannel } from './ContactTimelineHeaderChannel';
-import { Paragraph } from '@gemeente-denhaag/typography';
-import { ContactTimelineItemSender } from './ContactTimelineItemSender';
-import { ContactTimelineItemFile } from './ContactTimelineItemFile';
-
-export interface ContactTimelineItemProps {
-  id: Key;
-  title: ReactNode;
-  description?: ReactNode;
-  file?: ReactNode;
-  sender?: ReactNode;
-  date: ReactNode;
-  isoDate: string;
-  todayLabel: string;
-  channel: ReactNode;
-  nextItem?: boolean;
-  expanded?: boolean;
-  toggleExpanded: false | (() => void);
-}
-
-export interface ContactTimelineProps {
-  items: ContactTimelineItemProps[];
-  expandedItems?: Key[];
-  collapsible?: boolean;
-  todayLabel: string;
-}
-
-const toggleState = (key: Key, collection: Key[], setCollection: React.Dispatch<React.SetStateAction<React.Key[]>>) => {
-  if (collection.includes(key)) {
-    setCollection(collection.filter((item) => item !== key));
-  } else {
-    setCollection([...collection, key]);
-  }
-};
-
-export const ContactTimeline: React.FC<ContactTimelineProps> = ({
-  items,
-  todayLabel,
-  expandedItems: initialExpanded = [],
-  collapsible = false,
-}: ContactTimelineProps) => {
-  const [expandedItems, setexpandedItems] = useState(initialExpanded);
-
-  return (
-    <ContactTimelineList className="denhaag-process-steps">
-      {items.map((item, index) => {
-        const nextItem = index < items.length - 1;
-        return (
-          <ContactTimelineListItem
-            {...item}
-            key={item.id}
-            expanded={collapsible ? expandedItems.includes(item.id) : false}
-            nextItem={nextItem}
-            todayLabel={todayLabel}
-            toggleExpanded={
-              collapsible &&
-              (() => {
-                toggleState(item.id, expandedItems, setexpandedItems);
-              })
-            }
-          />
-        );
-      })}
-    </ContactTimelineList>
-  );
-};
-
-export interface ContactTimelineListProps extends OlHTMLAttributes<HTMLOListElement> {}
-
-export const ContactTimelineList: React.FC<ContactTimelineListProps> = ({
-  className,
-  children,
-  ...props
-}: ContactTimelineListProps) => (
-  <ol {...props} className={clsx('denhaag-contact-timeline', className)}>
-    {children}
-  </ol>
-);
-
-interface Props {
-  dateTime: string;
-  todayLabel: string;
-  now?: string;
-  locale?: Locale;
-}
-
-export const formatContactTimelineDate = ({
-  dateTime,
-  now = new Date().toISOString(),
-  locale = nl,
-  todayLabel,
-}: Props): string => {
-  const date = new Date(dateTime);
-  const daysDifference = differenceInDays(date, new Date(now));
-
-  if (daysDifference === 0) {
-    return todayLabel;
-  }
-
-  return format(date, 'd-M-yyyy', { locale });
-};
-
-const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
-  id,
-  title,
-  description,
-  file,
-  date,
-  isoDate,
-  sender = '',
-  todayLabel,
-  channel,
-  nextItem,
-  expanded = false,
-  toggleExpanded,
-}) => {
-  return (
-    <Step className="denhaag-contact-timeline__step" appearance="default">
-      <StepHeader className="denhaag-contact-timeline__step-header">
-        <ContactTimelineHeaderDate>
-          {date ? (
-            date
-          ) : (
-            <ContactTimelineMetaTimeItem dateTime={isoDate}>
-              {formatContactTimelineDate({ dateTime: isoDate, todayLabel: todayLabel })}
-            </ContactTimelineMetaTimeItem>
-          )}
-        </ContactTimelineHeaderDate>
-        <StepMarker appearance="default" nested />
-        <ContactTimelineHeaderChannel>
-          <ContactTimelineMetaItem>{channel}</ContactTimelineMetaItem>
-        </ContactTimelineHeaderChannel>
-        <ContactTimelineHeaderContent>
-          {toggleExpanded && description ? (
-            <StepHeaderToggle
-              className="denhaag-contact-timeline__step-header-toggle"
-              ariaControls={`${id}--details`}
-              expanded={expanded}
-              onClick={toggleExpanded}
-            >
-              <StepHeading>{title}</StepHeading>
-            </StepHeaderToggle>
-          ) : (
-            <StepHeading>{title}</StepHeading>
-          )}
-          <ContactTimelineMeta>
-            {date ? (
-              date
-            ) : (
-              <ContactTimelineMetaTimeItem dateTime={isoDate}>
-                {formatContactTimelineDate({ dateTime: isoDate, todayLabel: todayLabel })}
-              </ContactTimelineMetaTimeItem>
-            )}
-            <ContactTimelineMetaSeparator />
-            <ContactTimelineMetaItem>{channel}</ContactTimelineMetaItem>
-          </ContactTimelineMeta>
-        </ContactTimelineHeaderContent>
-        {nextItem && (
-          <StepMarkerConnector
-            className="denhaag-contact-timeline__step-marker-connector"
-            appearance="default"
-            from="main"
-            to="main"
-          />
-        )}
-      </StepHeader>
-      <StepDetails className="denhaag-contact-timeline__step-details" id={`${id}--details`} collapsed={!expanded}>
-        <ContactTimelineItemSender>{sender}</ContactTimelineItemSender>
-        <Paragraph>{description}</Paragraph>
-        {file && <ContactTimelineItemFile>{file}</ContactTimelineItemFile>}
-      </StepDetails>
-    </Step>
-  );
-};
+import ContactTimeline from './ContactTimeline';
 
 export default ContactTimeline;
+
+export * from './ContactTimelineHeaderChannel';
+export * from './ContactTimelineHeaderContent';
+export * from './ContactTimelineHeaderDate';
+export * from './ContactTimelineItemFile';
+export * from './ContactTimelineItemSender';
+export * from './ContactTimelineMeta';
+export * from './ContactTimelineMetaItem';
+export * from './ContactTimelineMetaSeparator';
+export * from './ContactTimelineMetaTimeItem';
diff --git a/components/ContactTimeline/src/stories/bem.stories.mdx b/components/ContactTimeline/src/stories/bem.stories.mdx
index b9268a94a6..41617288fd 100644
--- a/components/ContactTimeline/src/stories/bem.stories.mdx
+++ b/components/ContactTimeline/src/stories/bem.stories.mdx
@@ -2,7 +2,7 @@ import { Canvas, Meta, Story } from "@storybook/addon-docs";
 import prettierBabel from "prettier/parser-babel";
 import prettier from "prettier/standalone";
 import * as ReactDOMServer from "react-dom/server";
-import { ContactTimelineMobile } from "../index";
+import ContactTimeline from "../index";
 import pkg from "../../package.json";
 
 export const exampleArgs = {
@@ -13,23 +13,58 @@ export const exampleArgs = {
       title: "Herinnering: Geef informatie",
       channel: "mail",
       isoDate: new Date().toISOString(),
+      description: "Hier komt de uitgebreide beschrijving",
+      sender: "Gemeente Den Haag",
     },
     {
       id: "2",
       title: "Geef informatie",
       channel: "mail",
       isoDate: "2023-01-23T09:17:03.137Z",
+      description: "Hier komt de uitgebreide beschrijving",
+      sender: "Gemeente Den Haag",
     },
     {
       id: "3",
       title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
       channel: "mail",
       isoDate: "2023-01-06T09:17:03.137Z",
+      description:
+        "Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.",
+      sender: "Gemeente Den Haag",
+    },
+    {
+      id: "4",
+      title: "Status is veranderd",
+      channel: "mail",
+      isoDate: "2022-12-01T09:17:03.137Z",
+      description: "Hier komt de uitgebreide beschrijving",
+      sender: "Gemeente Den Haag",
+    },
+    {
+      id: "5",
+      title: "Mijn vraag",
+      channel: "vraag",
+      isoDate: "2022-11-29T09:17:03.137Z",
+      description: "Hier komt de uitgebreide beschrijving",
+      sender: "Anna Klap",
+    },
+    {
+      id: "6",
+      title: "Gesprek over afspraak met adviseur",
+      channel: "telefoon",
+      isoDate: "2022-11-12T09:17:03.137Z",
+      description: "Hier komt de uitgebreide beschrijving",
+      sender: "Gemeente Den Haag",
+    },
+    {
+      id: "7",
+      title: "Kosten onderzoek en verbeteringen",
+      channel: "brief",
+      isoDate: "2022-11-10T09:17:03.137Z",
+      description: "Hier komt de uitgebreide beschrijving",
+      sender: "Gemeente Den Haag",
     },
-    { id: "4", title: "Status is veranderd", channel: "mail", isoDate: "2022-12-01T09:17:03.137Z" },
-    { id: "5", title: "Mijn vraag", channel: "vraag", isoDate: "2022-11-29T09:17:03.137Z" },
-    { id: "6", title: "Gesprek over afspraak met adviseur", channel: "telefoon", isoDate: "2022-11-12T09:17:03.137Z" },
-    { id: "7", title: "Kosten onderzoek en verbeteringen", channel: "brief", isoDate: "2022-11-10T09:17:03.137Z" },
   ],
 };
 
@@ -63,10 +98,176 @@ export const Template = (args) => {
 
 # Contact Timeline
 
-## Mobile (Work in Progress)
+## Default
+
+<Canvas>
+  <Story name="Default" args={exampleArgs}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Collapsible
+
+<Canvas>
+  <Story name="Collapsible" args={{ ...exampleArgs, collapsible: true }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Collapsible with expanded item
+
+<Canvas>
+  <Story name="Collapsible with expanded item" args={{ ...exampleArgs, collapsible: true, expandedItems: ["3"] }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Without sender
+
+<Canvas>
+  <Story
+    name="Without sender"
+    args={{
+      todayLabel: "vandaag",
+      collapsible: true,
+      expandedItems: ["4"],
+      items: [
+        {
+          id: "1",
+          title: "Herinnering: Geef informatie",
+          channel: "mail",
+          isoDate: new Date().toISOString(),
+          description: "Hier komt de uitgebreide beschrijving",
+        },
+        {
+          id: "2",
+          title: "Geef informatie",
+          channel: "mail",
+          isoDate: "2023-01-23T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+        },
+        {
+          id: "3",
+          title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
+          channel: "mail",
+          isoDate: "2023-01-06T09:17:03.137Z",
+          description:
+            "Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.",
+        },
+        {
+          id: "4",
+          title: "Status is veranderd",
+          channel: "mail",
+          isoDate: "2022-12-01T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+        },
+        {
+          id: "5",
+          title: "Mijn vraag",
+          channel: "vraag",
+          isoDate: "2022-11-29T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+        },
+        {
+          id: "6",
+          title: "Gesprek over afspraak met adviseur",
+          channel: "telefoon",
+          isoDate: "2022-11-12T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+        },
+        {
+          id: "7",
+          title: "Kosten onderzoek en verbeteringen",
+          channel: "brief",
+          isoDate: "2022-11-10T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+        },
+      ],
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## With file
 
 <Canvas>
-  <Story name="Mobile (Work in Progress)" args={exampleArgs}>
+  <Story
+    name="With file"
+    args={{
+      todayLabel: "vandaag",
+      collapsible: true,
+      expandedItems: ["4"],
+      items: [
+        {
+          id: "1",
+          title: "Herinnering: Geef informatie",
+          channel: "mail",
+          isoDate: new Date().toISOString(),
+          description: "Hier komt de uitgebreide beschrijving",
+          sender: "Gemeente Den Haag",
+        },
+        {
+          id: "2",
+          title: "Geef informatie",
+          channel: "mail",
+          isoDate: "2023-01-23T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+          sender: "Gemeente Den Haag",
+        },
+        {
+          id: "3",
+          title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
+          channel: "mail",
+          isoDate: "2023-01-06T09:17:03.137Z",
+          description:
+            "Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.",
+          sender: "Gemeente Den Haag",
+        },
+        {
+          id: "4",
+          title: "Status is veranderd",
+          channel: "mail",
+          isoDate: "2022-12-01T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+          sender: "Gemeente Den Haag",
+          file: (
+            <File
+              name="example3"
+              link="test.png"
+              extension="png"
+              size={2000}
+              lastUpdated="Thu Aug 31 2023 11:22:11 GMT+0200"
+            />
+          ),
+        },
+        {
+          id: "5",
+          title: "Mijn vraag",
+          channel: "vraag",
+          isoDate: "2022-11-29T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+          sender: "Anna Klap",
+        },
+        {
+          id: "6",
+          title: "Gesprek over afspraak met adviseur",
+          channel: "telefoon",
+          isoDate: "2022-11-12T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+          sender: "Gemeente Den Haag",
+        },
+        {
+          id: "7",
+          title: "Kosten onderzoek en verbeteringen",
+          channel: "brief",
+          isoDate: "2022-11-10T09:17:03.137Z",
+          description: "Hier komt de uitgebreide beschrijving",
+          sender: "Gemeente Den Haag",
+        },
+      ],
+    }}
+  >
     {Template.bind({})}
   </Story>
 </Canvas>
diff --git a/components/ContactTimeline/src/stories/react.stories.mdx b/components/ContactTimeline/src/stories/react.stories.mdx
index 7e8b06efde..466bd7d0dd 100644
--- a/components/ContactTimeline/src/stories/react.stories.mdx
+++ b/components/ContactTimeline/src/stories/react.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from "@storybook/addon-docs";
 import { File } from "../../../File";
-import { ContactTimeline } from "../index";
+import ContactTimeline from "../index";
 import pkg from "../../package.json";
 
 export const exampleArgs = {

From 8c147e5afdf40519c88952d60b4753c193edb570 Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Tue, 24 Oct 2023 15:24:44 +0200
Subject: [PATCH 08/18] feat: finished first version of refactored contact
 timelines, converted react story to tsx, added component to casedetail
 template

---
 .storybook/@types/icons.d.ts                  |   5 +
 .../templates/05-Case-detail-page.stories.tsx |  68 +++++
 components/ContactTimeline/README.md          | 210 +++++++++++++-
 components/ContactTimeline/package.json       |   1 +
 .../ContactTimeline/src/ContactTimeline.tsx   |  39 +--
 .../src/_ContactTimelineHeader.scss           |   2 +-
 .../src/_ContactTimelineItemSender.scss       |   2 +-
 .../src/_ContactTimelineMetaSeparator.scss    |   2 +-
 .../src/_ContactTimelineStep.scss             |   2 +-
 .../_ContactTimelineStepMarkerConnector.scss  |   3 +-
 .../src/stories/react.stories.mdx             | 259 ------------------
 .../src/stories/react.stories.tsx             | 236 ++++++++++++++++
 pnpm-lock.yaml                                |   3 +
 13 files changed, 548 insertions(+), 284 deletions(-)
 delete mode 100644 components/ContactTimeline/src/stories/react.stories.mdx
 create mode 100644 components/ContactTimeline/src/stories/react.stories.tsx

diff --git a/.storybook/@types/icons.d.ts b/.storybook/@types/icons.d.ts
index 10243c1f95..c6acee9281 100644
--- a/.storybook/@types/icons.d.ts
+++ b/.storybook/@types/icons.d.ts
@@ -8,3 +8,8 @@ declare module '*.json' {
   const content: string;
   export default content;
 }
+
+declare module '*.md?raw' {
+  const content: string;
+  export default content;
+}
diff --git a/.storybook/stories/templates/05-Case-detail-page.stories.tsx b/.storybook/stories/templates/05-Case-detail-page.stories.tsx
index 7cf12e32ab..9aa9998278 100644
--- a/.storybook/stories/templates/05-Case-detail-page.stories.tsx
+++ b/.storybook/stories/templates/05-Case-detail-page.stories.tsx
@@ -16,6 +16,7 @@ import {
 } from '../../../components/Icons/src';
 import { Status, StatusProps } from '../../../components/ProcessSteps/src';
 import { File } from '../../../components/File/src';
+import ContactTimeline from '../../../components/ContactTimeline/src';
 import { Action } from '../../../components/Action/src';
 import { BadgeCounter, ButtonLink } from '@utrecht/component-library-react';
 
@@ -84,6 +85,71 @@ const progressStepsData: StatusProps = {
   ],
 };
 
+export const contactTimelineData = {
+  todayLabel: 'vandaag',
+  collapsible: true,
+  items: [
+    {
+      id: '1',
+      title: 'Herinnering: Geef informatie',
+      channel: 'mail',
+      isoDate: new Date().toISOString(),
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '2',
+      title: 'Geef informatie',
+      channel: 'mail',
+      isoDate: '2023-01-23T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '3',
+      title: 'Tip: u heeft recht op extra subsidie, zie hier een extra lange regel',
+      channel: 'mail',
+      isoDate: '2023-01-06T09:17:03.137Z',
+      description:
+        'Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '4',
+      title: 'Status is veranderd',
+      channel: 'mail',
+      isoDate: '2022-12-01T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+      file: <File {...linkData} />,
+    },
+    {
+      id: '5',
+      title: 'Mijn vraag',
+      channel: 'vraag',
+      isoDate: '2022-11-29T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'A. Klap',
+    },
+    {
+      id: '6',
+      title: 'Gesprek over afspraak met adviseur',
+      channel: 'telefoon',
+      isoDate: '2022-11-12T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '7',
+      title: 'Kosten onderzoek en verbeteringen',
+      channel: 'brief',
+      isoDate: '2022-11-10T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+  ],
+};
+
 const taskDateTime = '2023-09-30T19:47:36.593Z';
 const taskNow = '2023-09-28T19:47:36.593Z';
 
@@ -162,6 +228,8 @@ export const ZaakDetailPagina: Story = {
           <Status {...progressStepsData}></Status>
           <Heading3 className="denhaag-page-content__heading">Documenten</Heading3>
           <File {...linkData} />
+          <Heading3 className="denhaag-page-content__heading">Eerdere contactmomenten</Heading3>
+          <ContactTimeline {...contactTimelineData} />
           <Action
             className="denhaag-page-content__task"
             dateTime={taskDateTime}
diff --git a/components/ContactTimeline/README.md b/components/ContactTimeline/README.md
index fe2feb5f8c..d0e9a8a830 100644
--- a/components/ContactTimeline/README.md
+++ b/components/ContactTimeline/README.md
@@ -1 +1,209 @@
-# Contact Timeline
+## Documentatie
+
+## Introductie
+
+Een contact timeline is een visuele weergave van de interacties (hierna: contactmomenten) tussen een gebruiker en de gemeente. Het stelt de gebruiker in staat om snel en eenvoudig de geschiedenis van hun contactmomenten met een medewerker te begrijpen en te doorlopen.
+
+## Wanneer gebruiken
+
+Gebruik een contact timeline wanneer er contactmomenten tussen een gebruiker en de gemeente in een chronologische volgorde getoond moet worden. Deze contactmomenten hebben altijd te maken met een zaak of product die de gebruiker bij de gemeente heeft (lopen).
+
+## Wanneer niet gebruiken
+
+Gebruik een contact timeline niet wanneer er geen contactmomenten hoeven te worden gepresenteerd. Gebruik in plaats daarvan Procedure als je een proces wilt weergeven in chronologische volgorde waar geen interactie mogelijk is.
+
+## Anatomie
+
+Een contact timeline bestaat uit:
+
+1. Date: communiceert de datum van wanneer het contactmoment heeft plaatsgevonden.
+2. Separator: visuele indicatie tussen de date en channel op kleine viewports.
+3. Marker: visuele indicatie die is verbonden met de line.
+4. Line: de lijn die is verbonden met de marker.
+5. Channel: het kanaal van het contactmoment.
+6. Label: beschrijft het onderwerp van het contactmoment.
+7. Trailing icon: laat zien dat het mogelijk is om het contactmoment in- en uit te klappen.
+8. Sender label: geeft aan wie de afzender van het contactmoment is.
+9. Subtext: communiceert de inhoud van het contactmoment.
+10. File (optioneel): een bijlage.
+
+## Staten
+
+De contact timeline bevat de staten:
+
+- default
+- hover
+- focus
+
+## Ontwerpeigenschappen
+
+### Typografie
+
+🖥️ Desktop
+
+- Date: TheSans/md/400
+- Channel: TheSans/md/400
+- Label: TheSans/lg/700
+- Sender label: TheSans/sm/700
+- Subtext: TheSans/md/400
+
+📱 Mobile
+
+- Date: TheSans/md/400
+- Channel: TheSans/md/400
+- Label: TheSans/lg/700
+- Sender label: TheSans/md/700
+- Subtext: TheSans/md/400
+
+### Kleur
+
+Default:
+
+- Date: text color Grey/4
+- Separator: svg color Grey/4
+- Marker: svg color Grey/2
+- Line: color Grey/2
+- Channel: text color Grey/4
+- Label: text color Grey/5
+- Trailing icon: svg color Grey/4
+- Sender label: text color Grey/5
+- Subtext: text color Grey/4
+- File: zoals beschreven staat bij het component File.
+
+Hover:
+
+- Label: text color Green/3
+- Trailing icon: svg color Green/3
+- Trailing icon: svg color Green/3
+- File: zoals beschreven staat bij het component File.
+
+Focus:
+
+- Label and trailing icon: border color Ocher/5
+- File: zoals beschreven staat bij het component File.
+
+### Structuur
+
+🖥️ Desktop
+
+- Marker: padding-left 8px
+- Channel: padding-left 16px
+- Label: padding-left 24px
+- Trailing icon: padding-left 4px
+- Subtext: padding-bottom 24px
+- File: padding-bottom 24px
+
+📱 Mobile
+
+- Label: padding-left 16px
+- Sender label: padding-top 16px
+- Subtext: padding-bottom 24px
+- File: padding-bottom 32px
+
+### Grootte
+
+- Date: max-width 96px
+- Separator: size 4px
+- Marker: size 16px
+- Line: bottom height 24px
+- Channel: max-width 80px
+- Trailing icon: size 24px
+
+## Animatie
+
+Bekijk de animatie
+
+## Best practices
+
+### Do’s
+
+- Houd de contact timeline zo eenvoudig en overzichtelijk mogelijk, zodat de gebruiker snel kan begrijpen wat er is gebeurd.
+- Zorg voor een chronologische volgorde van de interacties, van nieuw (boven) naar oud (onder).
+- Zorg voor een consistente stijl en lay-out met andere componenten.
+- Plaats bij de channel mail de inhoud van de mail zonder opmaak en maak gebruik van alinea’s zoals in de mail.
+- Laat de gehele tijdlijn in één keer zien.
+
+### Dont’s
+
+- Overlaad de contact timeline niet met te veel informatie of onnodige details.
+- Gebruik geen dubbelzinnige of verwarrende labels voor de verschillende soorten contactmomenten.
+- Gebruik niet te veel kleuren of iconen die de gebruiker kunnen afleiden of verwarren.
+
+## Content richtlijnen
+
+### Label
+
+- Gebruik duidelijke labels om de verschillende contactmomenten te onderscheiden.
+- Gebruik labels die gemakkelijk te begrijpen zijn en het contactmoment duidelijk omschrijven.
+- Houd de labels kort en krachtig.
+- Schrijf de naam van de zaak of product niet zoals je dat bij de e-mail notificatie doet. Bijvoorbeeld: schrijf ‘Geef informatie’ in plaats van ‘Geef informatie voor uw aanvraag subsidie geluidsisolatie’.
+
+### Channel
+
+Er zijn 5 soorten kanalen die bij de contact timeline voorkomen.
+
+1. mail
+2. brief
+3. balie
+4. telefoon
+5. mijn vraag
+
+Schrijf de kanalen in kleine letters, zoals hierboven.
+
+### Sender label
+
+De afzender kan bestaan uit de volgende attributen:
+
+- Voorletter(s) en achternaam ingelogde. Bijvoorbeeld: ‘A. Klap’.
+- Gemeente Den Haag
+
+### Subtext
+
+De inhoud van een contactmoment kan uit onderstaande elementen bestaan. Dit verschilt per kanaal.
+
+- Aanhef: ‘Beste [geslacht] [achternaam],’
+- Context: beschrijft in voltooid deelwoord waar het contactmoment over gaat. Bijvoorbeeld: ‘U heeft op [datum] een mail ontvangen. Dit staat erin:’
+- Inhoud: dit kan een notitie zijn die is geschreven door een medewerker, een geschreven tekst door de gebruiker, een bijlage of een mailinhoud zonder opmaak.
+- Slot: ‘Met vriendelijke groet,Gemeente Den Haag’
+
+Hieronder is een overzicht te zien van de opbouw per kanaal.
+
+- mail: aanhef, context, mailinhoud, slot.
+- brief: bijlage.
+- balie: aanhef, context, notities van medewerker, slot.
+- telefoon: aanhef, context, notities van medewerker, slot.
+- mijn vraag: geschreven tekst door gebruiker.
+
+### Date
+
+- Communiceer datums op de volgende manier: [dag]-[maand]-[jaar]. Bijvoorbeeld: ‘1-5-2023’.
+- Als een contactmoment eergisteren, gisteren of vandaag heeft plaatsgevonden, communiceer deze dan op de volgende manier:
+  - vandaag
+  - gisteren
+  - eergisteren
+
+## Toegankelijkheid
+
+- Zorg voor duidelijke en beknopte tekstbeschrijvingen voor elk contactmoment die in de tijdlijn wordt weergegeven. Gebruik hierbij beschrijvende taal en vermijd jargon.
+- Maak de tijdslijn gemakkelijk te navigeren met behulp van duidelijke knoppen voor het scrollen door de tijdlijn en voor het selecteren van een specifieke contactmoment.
+- Zorg ervoor dat de tijdlijn ook toegankelijk is voor gebruikers die alleen met een toetsenbord navigeren, door het gebruik van duidelijke focusindicatoren en toetsenbordnavigatie.
+- Zorg ervoor dat de tijdlijn ook werkt met screenreaders, door het gebruik van beschrijvende HTML-elementen en ARIA-attributen die de inhoud en navigatie van de tijdlijn beschrijven.
+
+## Onderzoek
+
+In januari en in februari 2023 is er onderzoek gedaan naar dit component.
+
+Bevindingen:
+
+- Overzicht contact timeline is erg waardevol​.
+- Op mobiel is de contact timeline soms niet direct duidelijk​. Deze is in maart 2023 aangepast om het duidelijker en rustiger te maken.
+
+## Gerelateerde componenten
+
+- Form navigation: Gebruik de form navigation om de voortgang van de gebruiker door een reeks stappen in een formulier te laten zien
+- Status: Gebruik de status om een reeks informatie in het proces van een lopende zaak weer te geven.
+- Procedure: Gebruik de procedure wanneer een gebruiker moet worden geïnformeerd over de komende stappen.
+
+## Meer informatie online
+
+-
diff --git a/components/ContactTimeline/package.json b/components/ContactTimeline/package.json
index b69b1e668b..5e090d89c7 100644
--- a/components/ContactTimeline/package.json
+++ b/components/ContactTimeline/package.json
@@ -29,6 +29,7 @@
     "clean": "rimraf dist tsconfig.tsbuildinfo"
   },
   "dependencies": {
+    "@gemeente-denhaag/file": "workspace:*",
     "@gemeente-denhaag/icons": "workspace:*",
     "@gemeente-denhaag/process-steps": "workspace:*",
     "@gemeente-denhaag/step-marker": "workspace:*",
diff --git a/components/ContactTimeline/src/ContactTimeline.tsx b/components/ContactTimeline/src/ContactTimeline.tsx
index 08d86fdf8e..b88fd7e47a 100644
--- a/components/ContactTimeline/src/ContactTimeline.tsx
+++ b/components/ContactTimeline/src/ContactTimeline.tsx
@@ -22,10 +22,13 @@ export interface ContactTimelineItemProps {
   description?: ReactNode;
   file?: ReactNode;
   sender?: ReactNode;
-  date: ReactNode;
-  isoDate: string;
-  todayLabel: string;
+  date?: ReactNode;
+  isoDate?: string;
   channel: ReactNode;
+}
+
+interface ContactTimelineItemInternalProps extends ContactTimelineItemProps {
+  todayLabel: string;
   nextItem?: boolean;
   expanded?: boolean;
   toggleExpanded: false | (() => void);
@@ -113,7 +116,7 @@ export const formatContactTimelineDate = ({
   return format(date, 'd-M-yyyy', { locale });
 };
 
-const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
+const ContactTimelineListItem: React.FC<ContactTimelineItemInternalProps> = ({
   id,
   title,
   description,
@@ -131,13 +134,13 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
     <Step className="denhaag-contact-timeline__step" appearance="default">
       <StepHeader className="denhaag-contact-timeline__step-header">
         <ContactTimelineHeaderDate>
-          {date ? (
-            date
-          ) : (
-            <ContactTimelineMetaTimeItem dateTime={isoDate}>
-              {formatContactTimelineDate({ dateTime: isoDate, todayLabel: todayLabel })}
-            </ContactTimelineMetaTimeItem>
-          )}
+          {date
+            ? date
+            : isoDate && (
+                <ContactTimelineMetaTimeItem dateTime={isoDate}>
+                  {formatContactTimelineDate({ dateTime: isoDate, todayLabel: todayLabel })}
+                </ContactTimelineMetaTimeItem>
+              )}
         </ContactTimelineHeaderDate>
         <StepMarker appearance="default" nested />
         <ContactTimelineHeaderChannel>
@@ -157,13 +160,13 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
             <StepHeading>{title}</StepHeading>
           )}
           <ContactTimelineMeta>
-            {date ? (
-              date
-            ) : (
-              <ContactTimelineMetaTimeItem dateTime={isoDate}>
-                {formatContactTimelineDate({ dateTime: isoDate, todayLabel: todayLabel })}
-              </ContactTimelineMetaTimeItem>
-            )}
+            {date
+              ? date
+              : isoDate && (
+                  <ContactTimelineMetaTimeItem dateTime={isoDate}>
+                    {formatContactTimelineDate({ dateTime: isoDate, todayLabel: todayLabel })}
+                  </ContactTimelineMetaTimeItem>
+                )}
             <ContactTimelineMetaSeparator />
             <ContactTimelineMetaItem>{channel}</ContactTimelineMetaItem>
           </ContactTimelineMeta>
diff --git a/components/ContactTimeline/src/_ContactTimelineHeader.scss b/components/ContactTimeline/src/_ContactTimelineHeader.scss
index 003c062446..38e9ca0308 100644
--- a/components/ContactTimeline/src/_ContactTimelineHeader.scss
+++ b/components/ContactTimeline/src/_ContactTimelineHeader.scss
@@ -5,4 +5,4 @@
   --denhaag-step-marker-margin: calc(
     (var(--denhaag-contact-timeline-step-header-line-height) - var(--denhaag-step-marker-nested-size)) / 2
   );
-}
\ No newline at end of file
+}
diff --git a/components/ContactTimeline/src/_ContactTimelineItemSender.scss b/components/ContactTimeline/src/_ContactTimelineItemSender.scss
index 6e8669058e..a8d5f44f76 100644
--- a/components/ContactTimeline/src/_ContactTimelineItemSender.scss
+++ b/components/ContactTimeline/src/_ContactTimelineItemSender.scss
@@ -2,4 +2,4 @@
   font-size: var(--denhaag-contact-timeline-step-details-sender-font-size);
   font-weight: var(--denhaag-contact-timeline-step-details-sender-font-weight);
   margin-block-start: var(--denhaag-contact-timeline-step-details-sender-margin-block-start);
-}
\ No newline at end of file
+}
diff --git a/components/ContactTimeline/src/_ContactTimelineMetaSeparator.scss b/components/ContactTimeline/src/_ContactTimelineMetaSeparator.scss
index f86f0f9387..17ef6a595d 100644
--- a/components/ContactTimeline/src/_ContactTimelineMetaSeparator.scss
+++ b/components/ContactTimeline/src/_ContactTimelineMetaSeparator.scss
@@ -3,4 +3,4 @@
   height: var(--denhaag-contact-timeline-step-meta-marker-size);
   background-color: var(--denhaag-contact-timeline-step-meta-marker-color);
   border-radius: 50%;
-}
\ No newline at end of file
+}
diff --git a/components/ContactTimeline/src/_ContactTimelineStep.scss b/components/ContactTimeline/src/_ContactTimelineStep.scss
index 1c63ae4bc9..b50123c402 100644
--- a/components/ContactTimeline/src/_ContactTimelineStep.scss
+++ b/components/ContactTimeline/src/_ContactTimelineStep.scss
@@ -1,3 +1,3 @@
 .denhaag-contact-timeline__step {
   padding-block-end: var(--denhaag-contact-timeline-step-padding-block-end);
-}
\ No newline at end of file
+}
diff --git a/components/ContactTimeline/src/_ContactTimelineStepMarkerConnector.scss b/components/ContactTimeline/src/_ContactTimelineStepMarkerConnector.scss
index ed509ef94b..e936ce7f14 100644
--- a/components/ContactTimeline/src/_ContactTimelineStepMarkerConnector.scss
+++ b/components/ContactTimeline/src/_ContactTimelineStepMarkerConnector.scss
@@ -2,9 +2,8 @@
   &.denhaag-contact-timeline__step-marker-connector {
     top: calc(var(--denhaag-step-marker-size) / 2);
     bottom: var(--denhaag-contact-timeline-step-marker-connector-bottom);
-
     margin-inline-start: var(--denhaag-contact-timeline-step-marker-connector-desktop-margin-inline-start);
-    
+
     @media (width <= 767px) {
       margin-inline-start: var(--denhaag-contact-timeline-step-marker-connector-mobile-margin-inline-start);
     }
diff --git a/components/ContactTimeline/src/stories/react.stories.mdx b/components/ContactTimeline/src/stories/react.stories.mdx
deleted file mode 100644
index 466bd7d0dd..0000000000
--- a/components/ContactTimeline/src/stories/react.stories.mdx
+++ /dev/null
@@ -1,259 +0,0 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs";
-import { File } from "../../../File";
-import ContactTimeline from "../index";
-import pkg from "../../package.json";
-
-export const exampleArgs = {
-  todayLabel: "vandaag",
-  items: [
-    {
-      id: "1",
-      title: "Herinnering: Geef informatie",
-      channel: "mail",
-      isoDate: new Date().toISOString(),
-      description: "Hier komt de uitgebreide beschrijving",
-      sender: "Gemeente Den Haag",
-    },
-    {
-      id: "2",
-      title: "Geef informatie",
-      channel: "mail",
-      isoDate: "2023-01-23T09:17:03.137Z",
-      description: "Hier komt de uitgebreide beschrijving",
-      sender: "Gemeente Den Haag",
-    },
-    {
-      id: "3",
-      title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
-      channel: "mail",
-      isoDate: "2023-01-06T09:17:03.137Z",
-      description:
-        "Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.",
-      sender: "Gemeente Den Haag",
-    },
-    {
-      id: "4",
-      title: "Status is veranderd",
-      channel: "mail",
-      isoDate: "2022-12-01T09:17:03.137Z",
-      description: "Hier komt de uitgebreide beschrijving",
-      sender: "Gemeente Den Haag",
-    },
-    {
-      id: "5",
-      title: "Mijn vraag",
-      channel: "vraag",
-      isoDate: "2022-11-29T09:17:03.137Z",
-      description: "Hier komt de uitgebreide beschrijving",
-      sender: "Anna Klap",
-    },
-    {
-      id: "6",
-      title: "Gesprek over afspraak met adviseur",
-      channel: "telefoon",
-      isoDate: "2022-11-12T09:17:03.137Z",
-      description: "Hier komt de uitgebreide beschrijving",
-      sender: "Gemeente Den Haag",
-    },
-    {
-      id: "7",
-      title: "Kosten onderzoek en verbeteringen",
-      channel: "brief",
-      isoDate: "2022-11-10T09:17:03.137Z",
-      description: "Hier komt de uitgebreide beschrijving",
-      sender: "Gemeente Den Haag",
-    },
-  ],
-};
-
-export const Template = (args) => {
-  return <ContactTimeline {...args}></ContactTimeline>;
-};
-
-<Meta
-  title="React/Process Steps/Contact Timeline"
-  component={ContactTimeline}
-  parameters={{
-    componentSubtitle: `${pkg.name} - ${pkg.version}`,
-    docs: { source: { type: "dynamic" } },
-    status: {
-      type: "EXPERIMENTAL",
-    },
-  }}
-/>
-
-# Contact Timeline
-
-## Default
-
-<Canvas>
-  <Story name="Default" args={exampleArgs}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## Collapsible
-
-<Canvas>
-  <Story name="Collapsible" args={{ ...exampleArgs, collapsible: true }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## Collapsible with expanded item
-
-<Canvas>
-  <Story name="Collapsible with expanded item" args={{ ...exampleArgs, collapsible: true, expandedItems: ["3"] }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## Without sender
-
-<Canvas>
-  <Story
-    name="Without sender"
-    args={{
-      todayLabel: "vandaag",
-      collapsible: true,
-      expandedItems: ["4"],
-      items: [
-        {
-          id: "1",
-          title: "Herinnering: Geef informatie",
-          channel: "mail",
-          isoDate: new Date().toISOString(),
-          description: "Hier komt de uitgebreide beschrijving",
-        },
-        {
-          id: "2",
-          title: "Geef informatie",
-          channel: "mail",
-          isoDate: "2023-01-23T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-        },
-        {
-          id: "3",
-          title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
-          channel: "mail",
-          isoDate: "2023-01-06T09:17:03.137Z",
-          description:
-            "Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.",
-        },
-        {
-          id: "4",
-          title: "Status is veranderd",
-          channel: "mail",
-          isoDate: "2022-12-01T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-        },
-        {
-          id: "5",
-          title: "Mijn vraag",
-          channel: "vraag",
-          isoDate: "2022-11-29T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-        },
-        {
-          id: "6",
-          title: "Gesprek over afspraak met adviseur",
-          channel: "telefoon",
-          isoDate: "2022-11-12T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-        },
-        {
-          id: "7",
-          title: "Kosten onderzoek en verbeteringen",
-          channel: "brief",
-          isoDate: "2022-11-10T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-        },
-      ],
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## With file
-
-<Canvas>
-  <Story
-    name="With file"
-    args={{
-      todayLabel: "vandaag",
-      collapsible: true,
-      expandedItems: ["4"],
-      items: [
-        {
-          id: "1",
-          title: "Herinnering: Geef informatie",
-          channel: "mail",
-          isoDate: new Date().toISOString(),
-          description: "Hier komt de uitgebreide beschrijving",
-          sender: "Gemeente Den Haag",
-        },
-        {
-          id: "2",
-          title: "Geef informatie",
-          channel: "mail",
-          isoDate: "2023-01-23T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-          sender: "Gemeente Den Haag",
-        },
-        {
-          id: "3",
-          title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
-          channel: "mail",
-          isoDate: "2023-01-06T09:17:03.137Z",
-          description:
-            "Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.",
-          sender: "Gemeente Den Haag",
-        },
-        {
-          id: "4",
-          title: "Status is veranderd",
-          channel: "mail",
-          isoDate: "2022-12-01T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-          sender: "Gemeente Den Haag",
-          file: (
-            <File
-              name="example3"
-              link="test.png"
-              extension="png"
-              size={2000}
-              lastUpdated="Thu Aug 31 2023 11:22:11 GMT+0200"
-            />
-          ),
-        },
-        {
-          id: "5",
-          title: "Mijn vraag",
-          channel: "vraag",
-          isoDate: "2022-11-29T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-          sender: "Anna Klap",
-        },
-        {
-          id: "6",
-          title: "Gesprek over afspraak met adviseur",
-          channel: "telefoon",
-          isoDate: "2022-11-12T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-          sender: "Gemeente Den Haag",
-        },
-        {
-          id: "7",
-          title: "Kosten onderzoek en verbeteringen",
-          channel: "brief",
-          isoDate: "2022-11-10T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-          sender: "Gemeente Den Haag",
-        },
-      ],
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
diff --git a/components/ContactTimeline/src/stories/react.stories.tsx b/components/ContactTimeline/src/stories/react.stories.tsx
new file mode 100644
index 0000000000..6e54c7c0bf
--- /dev/null
+++ b/components/ContactTimeline/src/stories/react.stories.tsx
@@ -0,0 +1,236 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { File } from '@gemeente-denhaag/file';
+import readme from '../../README.md?raw';
+import ContactTimeline from '../index';
+import { ContactTimelineProps } from '../ContactTimeline';
+
+const exampleArgs: ContactTimelineProps = {
+  todayLabel: 'vandaag',
+  items: [
+    {
+      id: '1',
+      title: 'Herinnering: Geef informatie',
+      channel: 'mail',
+      isoDate: new Date().toISOString(),
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '2',
+      title: 'Geef informatie',
+      channel: 'mail',
+      isoDate: '2023-01-23T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '3',
+      title: 'Tip: u heeft recht op extra subsidie, zie hier een extra lange regel',
+      channel: 'mail',
+      isoDate: '2023-01-06T09:17:03.137Z',
+      description:
+        'Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '4',
+      title: 'Status is veranderd',
+      channel: 'mail',
+      isoDate: '2022-12-01T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '5',
+      title: 'Mijn vraag',
+      channel: 'vraag',
+      isoDate: '2022-11-29T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Anna Klap',
+    },
+    {
+      id: '6',
+      title: 'Gesprek over afspraak met adviseur',
+      channel: 'telefoon',
+      isoDate: '2022-11-12T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '7',
+      title: 'Kosten onderzoek en verbeteringen',
+      channel: 'brief',
+      isoDate: '2022-11-10T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+  ],
+};
+
+const exampleArgsWithoutSender: ContactTimelineProps = {
+  todayLabel: 'vandaag',
+  collapsible: true,
+  expandedItems: ['4'],
+  items: [
+    {
+      id: '1',
+      title: 'Herinnering: Geef informatie',
+      channel: 'mail',
+      isoDate: new Date().toISOString(),
+      description: 'Hier komt de uitgebreide beschrijving',
+    },
+    {
+      id: '2',
+      title: 'Geef informatie',
+      channel: 'mail',
+      isoDate: '2023-01-23T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+    },
+    {
+      id: '3',
+      title: 'Tip: u heeft recht op extra subsidie, zie hier een extra lange regel',
+      channel: 'mail',
+      isoDate: '2023-01-06T09:17:03.137Z',
+      description:
+        'Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.',
+    },
+    {
+      id: '4',
+      title: 'Status is veranderd',
+      channel: 'mail',
+      isoDate: '2022-12-01T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+    },
+    {
+      id: '5',
+      title: 'Mijn vraag',
+      channel: 'vraag',
+      isoDate: '2022-11-29T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+    },
+    {
+      id: '6',
+      title: 'Gesprek over afspraak met adviseur',
+      channel: 'telefoon',
+      isoDate: '2022-11-12T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+    },
+    {
+      id: '7',
+      title: 'Kosten onderzoek en verbeteringen',
+      channel: 'brief',
+      isoDate: '2022-11-10T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+    },
+  ],
+};
+
+const exampleArgsWithFile: ContactTimelineProps = {
+  todayLabel: 'vandaag',
+  collapsible: true,
+  expandedItems: ['4'],
+  items: [
+    {
+      id: '1',
+      title: 'Herinnering: Geef informatie',
+      channel: 'mail',
+      isoDate: new Date().toISOString(),
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '2',
+      title: 'Geef informatie',
+      channel: 'mail',
+      isoDate: '2023-01-23T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '3',
+      title: 'Tip: u heeft recht op extra subsidie, zie hier een extra lange regel',
+      channel: 'mail',
+      isoDate: '2023-01-06T09:17:03.137Z',
+      description:
+        'Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '4',
+      title: 'Status is veranderd',
+      channel: 'mail',
+      isoDate: '2022-12-01T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+      file: (
+        <File
+          name="example3"
+          link="test.png"
+          extension="png"
+          size={2000}
+          lastUpdated="Thu Aug 31 2023 11:22:11 GMT+0200"
+        />
+      ),
+    },
+    {
+      id: '5',
+      title: 'Mijn vraag',
+      channel: 'vraag',
+      isoDate: '2022-11-29T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Anna Klap',
+    },
+    {
+      id: '6',
+      title: 'Gesprek over afspraak met adviseur',
+      channel: 'telefoon',
+      isoDate: '2022-11-12T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '7',
+      title: 'Kosten onderzoek en verbeteringen',
+      channel: 'brief',
+      isoDate: '2022-11-10T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+  ],
+};
+
+const meta = {
+  title: 'React/Process Steps/Contact Timeline',
+  id: 'react-contact-timeline',
+  component: ContactTimeline,
+  args: exampleArgs,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} as Meta<typeof ContactTimeline>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+
+export const Collapsible: Story = {
+  args: { ...Default.args, collapsible: true },
+};
+
+export const CollapsibleWithExpandedItem: Story = {
+  args: { ...Default.args, collapsible: true, expandedItems: ['3'] },
+};
+
+export const WithoutSender: Story = {
+  args: exampleArgsWithoutSender,
+};
+
+export const WithFile: Story = {
+  args: exampleArgsWithFile,
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8a2069501b..470e84a085 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -528,6 +528,9 @@ importers:
 
   components/ContactTimeline:
     dependencies:
+      '@gemeente-denhaag/file':
+        specifier: workspace:*
+        version: link:../File
       '@gemeente-denhaag/icons':
         specifier: workspace:*
         version: link:../Icons

From 5ba809c957494e3e94603dd1b9d7252e52d0762f Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Thu, 26 Oct 2023 10:42:33 +0200
Subject: [PATCH 09/18] fix: changed breakpoint from 768 to 1024px

---
 .../ContactTimeline/src/_ContactTimelineHeaderChannel.scss      | 2 +-
 .../ContactTimeline/src/_ContactTimelineHeaderContent.scss      | 2 +-
 components/ContactTimeline/src/_ContactTimelineHeaderDate.scss  | 2 +-
 components/ContactTimeline/src/_ContactTimelineItemFile.scss    | 2 +-
 components/ContactTimeline/src/_ContactTimelineMeta.scss        | 2 +-
 components/ContactTimeline/src/_ContactTimelineStepDetails.scss | 2 +-
 .../src/_ContactTimelineStepMarkerConnector.scss                | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/ContactTimeline/src/_ContactTimelineHeaderChannel.scss b/components/ContactTimeline/src/_ContactTimelineHeaderChannel.scss
index f8a0d6ab5f..bdd7ca229e 100644
--- a/components/ContactTimeline/src/_ContactTimelineHeaderChannel.scss
+++ b/components/ContactTimeline/src/_ContactTimelineHeaderChannel.scss
@@ -4,7 +4,7 @@
   line-height: var(--denhaag-contact-timeline-step-header-line-height);
   overflow-wrap: break-word;
 
-  @media (width <= 767px) {
+  @media (width <= 1023px) {
     display: none;
   }
 }
diff --git a/components/ContactTimeline/src/_ContactTimelineHeaderContent.scss b/components/ContactTimeline/src/_ContactTimelineHeaderContent.scss
index cd59062b6b..8b0917f1a1 100644
--- a/components/ContactTimeline/src/_ContactTimelineHeaderContent.scss
+++ b/components/ContactTimeline/src/_ContactTimelineHeaderContent.scss
@@ -1,5 +1,5 @@
 .denhaag-contact-timeline__step-header__content {
-  @media (width <= 767px) {
+  @media (width <= 1023px) {
     width: 100%;
   }
 }
diff --git a/components/ContactTimeline/src/_ContactTimelineHeaderDate.scss b/components/ContactTimeline/src/_ContactTimelineHeaderDate.scss
index 7bfca1051b..58ff52447a 100644
--- a/components/ContactTimeline/src/_ContactTimelineHeaderDate.scss
+++ b/components/ContactTimeline/src/_ContactTimelineHeaderDate.scss
@@ -4,7 +4,7 @@
   line-height: var(--denhaag-contact-timeline-step-header-line-height);
   overflow-wrap: break-word;
 
-  @media (width <= 767px) {
+  @media (width <= 1023px) {
     display: none;
   }
 }
diff --git a/components/ContactTimeline/src/_ContactTimelineItemFile.scss b/components/ContactTimeline/src/_ContactTimelineItemFile.scss
index c7b54df7f2..69778d3791 100644
--- a/components/ContactTimeline/src/_ContactTimelineItemFile.scss
+++ b/components/ContactTimeline/src/_ContactTimelineItemFile.scss
@@ -2,7 +2,7 @@
   margin-block-start: var(--denhaag-contact-timeline-step-details-file-margin-block-start);
   margin-block-end: var(--denhaag-contact-timeline-step-details-file-margin-block-end);
 
-  @media (width <= 767px) {
+  @media (width <= 1023px) {
     margin-block-end: var(--denhaag-contact-timeline-step-details-file-mobile-margin-block-end);
   }
 }
diff --git a/components/ContactTimeline/src/_ContactTimelineMeta.scss b/components/ContactTimeline/src/_ContactTimelineMeta.scss
index c09bb8265b..5403604c45 100644
--- a/components/ContactTimeline/src/_ContactTimelineMeta.scss
+++ b/components/ContactTimeline/src/_ContactTimelineMeta.scss
@@ -3,7 +3,7 @@
   gap: var(--denhaag-contact-timeline-step-meta-gap);
   align-items: center;
 
-  @media (width >= 768px) {
+  @media (width >= 1024px) {
     display: none;
   }
 }
diff --git a/components/ContactTimeline/src/_ContactTimelineStepDetails.scss b/components/ContactTimeline/src/_ContactTimelineStepDetails.scss
index e821cf61ca..c3b11e25e8 100644
--- a/components/ContactTimeline/src/_ContactTimelineStepDetails.scss
+++ b/components/ContactTimeline/src/_ContactTimelineStepDetails.scss
@@ -1,7 +1,7 @@
 .denhaag-contact-timeline__step-details {
   margin-inline-start: var(--denhaag-contact-timeline-step-details-desktop-margin-inline-start);
 
-  @media (width <= 767px) {
+  @media (width <= 1023px) {
     margin-inline-start: var(--denhaag-contact-timeline-step-details-mobile-margin-inline-start);
   }
 }
diff --git a/components/ContactTimeline/src/_ContactTimelineStepMarkerConnector.scss b/components/ContactTimeline/src/_ContactTimelineStepMarkerConnector.scss
index e936ce7f14..5bb52131b8 100644
--- a/components/ContactTimeline/src/_ContactTimelineStepMarkerConnector.scss
+++ b/components/ContactTimeline/src/_ContactTimelineStepMarkerConnector.scss
@@ -4,7 +4,7 @@
     bottom: var(--denhaag-contact-timeline-step-marker-connector-bottom);
     margin-inline-start: var(--denhaag-contact-timeline-step-marker-connector-desktop-margin-inline-start);
 
-    @media (width <= 767px) {
+    @media (width <= 1023px) {
       margin-inline-start: var(--denhaag-contact-timeline-step-marker-connector-mobile-margin-inline-start);
     }
   }

From 4bf94a573df3b90b9a705c29275ef57bad61855b Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Tue, 31 Oct 2023 14:52:20 +0100
Subject: [PATCH 10/18] chore: converted contact timeline bem story to tsx

---
 .../src/stories/bem.stories.mdx               | 273 ------------------
 .../src/stories/bem.stories.tsx               | 244 ++++++++++++++++
 2 files changed, 244 insertions(+), 273 deletions(-)
 delete mode 100644 components/ContactTimeline/src/stories/bem.stories.mdx
 create mode 100644 components/ContactTimeline/src/stories/bem.stories.tsx

diff --git a/components/ContactTimeline/src/stories/bem.stories.mdx b/components/ContactTimeline/src/stories/bem.stories.mdx
deleted file mode 100644
index 41617288fd..0000000000
--- a/components/ContactTimeline/src/stories/bem.stories.mdx
+++ /dev/null
@@ -1,273 +0,0 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs";
-import prettierBabel from "prettier/parser-babel";
-import prettier from "prettier/standalone";
-import * as ReactDOMServer from "react-dom/server";
-import ContactTimeline from "../index";
-import pkg from "../../package.json";
-
-export const exampleArgs = {
-  todayLabel: "vandaag",
-  items: [
-    {
-      id: "1",
-      title: "Herinnering: Geef informatie",
-      channel: "mail",
-      isoDate: new Date().toISOString(),
-      description: "Hier komt de uitgebreide beschrijving",
-      sender: "Gemeente Den Haag",
-    },
-    {
-      id: "2",
-      title: "Geef informatie",
-      channel: "mail",
-      isoDate: "2023-01-23T09:17:03.137Z",
-      description: "Hier komt de uitgebreide beschrijving",
-      sender: "Gemeente Den Haag",
-    },
-    {
-      id: "3",
-      title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
-      channel: "mail",
-      isoDate: "2023-01-06T09:17:03.137Z",
-      description:
-        "Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.",
-      sender: "Gemeente Den Haag",
-    },
-    {
-      id: "4",
-      title: "Status is veranderd",
-      channel: "mail",
-      isoDate: "2022-12-01T09:17:03.137Z",
-      description: "Hier komt de uitgebreide beschrijving",
-      sender: "Gemeente Den Haag",
-    },
-    {
-      id: "5",
-      title: "Mijn vraag",
-      channel: "vraag",
-      isoDate: "2022-11-29T09:17:03.137Z",
-      description: "Hier komt de uitgebreide beschrijving",
-      sender: "Anna Klap",
-    },
-    {
-      id: "6",
-      title: "Gesprek over afspraak met adviseur",
-      channel: "telefoon",
-      isoDate: "2022-11-12T09:17:03.137Z",
-      description: "Hier komt de uitgebreide beschrijving",
-      sender: "Gemeente Den Haag",
-    },
-    {
-      id: "7",
-      title: "Kosten onderzoek en verbeteringen",
-      channel: "brief",
-      isoDate: "2022-11-10T09:17:03.137Z",
-      description: "Hier komt de uitgebreide beschrijving",
-      sender: "Gemeente Den Haag",
-    },
-  ],
-};
-
-export const Template = (args) => {
-  return <ContactTimeline {...args}></ContactTimeline>;
-};
-
-<Meta
-  title="CSS/Process Steps/Contact Timeline"
-  component={ContactTimeline}
-  parameters={{
-    componentSubtitle: `${pkg.name} - ${pkg.version}`,
-    docs: {
-      source: { type: "dynamic" },
-      transformSource: (src, storyContext) => {
-        // Ensure valid HTML in the Preview source
-        if (storyContext.component) {
-          return prettier.format(
-            ReactDOMServer.renderToStaticMarkup(storyContext.component(storyContext.parameters.args)),
-            { parser: "babel", plugins: [prettierBabel] },
-          );
-        }
-        return src;
-      },
-    },
-    status: {
-      type: "EXPERIMENTAL",
-    },
-  }}
-/>
-
-# Contact Timeline
-
-## Default
-
-<Canvas>
-  <Story name="Default" args={exampleArgs}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## Collapsible
-
-<Canvas>
-  <Story name="Collapsible" args={{ ...exampleArgs, collapsible: true }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## Collapsible with expanded item
-
-<Canvas>
-  <Story name="Collapsible with expanded item" args={{ ...exampleArgs, collapsible: true, expandedItems: ["3"] }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## Without sender
-
-<Canvas>
-  <Story
-    name="Without sender"
-    args={{
-      todayLabel: "vandaag",
-      collapsible: true,
-      expandedItems: ["4"],
-      items: [
-        {
-          id: "1",
-          title: "Herinnering: Geef informatie",
-          channel: "mail",
-          isoDate: new Date().toISOString(),
-          description: "Hier komt de uitgebreide beschrijving",
-        },
-        {
-          id: "2",
-          title: "Geef informatie",
-          channel: "mail",
-          isoDate: "2023-01-23T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-        },
-        {
-          id: "3",
-          title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
-          channel: "mail",
-          isoDate: "2023-01-06T09:17:03.137Z",
-          description:
-            "Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.",
-        },
-        {
-          id: "4",
-          title: "Status is veranderd",
-          channel: "mail",
-          isoDate: "2022-12-01T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-        },
-        {
-          id: "5",
-          title: "Mijn vraag",
-          channel: "vraag",
-          isoDate: "2022-11-29T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-        },
-        {
-          id: "6",
-          title: "Gesprek over afspraak met adviseur",
-          channel: "telefoon",
-          isoDate: "2022-11-12T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-        },
-        {
-          id: "7",
-          title: "Kosten onderzoek en verbeteringen",
-          channel: "brief",
-          isoDate: "2022-11-10T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-        },
-      ],
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## With file
-
-<Canvas>
-  <Story
-    name="With file"
-    args={{
-      todayLabel: "vandaag",
-      collapsible: true,
-      expandedItems: ["4"],
-      items: [
-        {
-          id: "1",
-          title: "Herinnering: Geef informatie",
-          channel: "mail",
-          isoDate: new Date().toISOString(),
-          description: "Hier komt de uitgebreide beschrijving",
-          sender: "Gemeente Den Haag",
-        },
-        {
-          id: "2",
-          title: "Geef informatie",
-          channel: "mail",
-          isoDate: "2023-01-23T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-          sender: "Gemeente Den Haag",
-        },
-        {
-          id: "3",
-          title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
-          channel: "mail",
-          isoDate: "2023-01-06T09:17:03.137Z",
-          description:
-            "Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.",
-          sender: "Gemeente Den Haag",
-        },
-        {
-          id: "4",
-          title: "Status is veranderd",
-          channel: "mail",
-          isoDate: "2022-12-01T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-          sender: "Gemeente Den Haag",
-          file: (
-            <File
-              name="example3"
-              link="test.png"
-              extension="png"
-              size={2000}
-              lastUpdated="Thu Aug 31 2023 11:22:11 GMT+0200"
-            />
-          ),
-        },
-        {
-          id: "5",
-          title: "Mijn vraag",
-          channel: "vraag",
-          isoDate: "2022-11-29T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-          sender: "Anna Klap",
-        },
-        {
-          id: "6",
-          title: "Gesprek over afspraak met adviseur",
-          channel: "telefoon",
-          isoDate: "2022-11-12T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-          sender: "Gemeente Den Haag",
-        },
-        {
-          id: "7",
-          title: "Kosten onderzoek en verbeteringen",
-          channel: "brief",
-          isoDate: "2022-11-10T09:17:03.137Z",
-          description: "Hier komt de uitgebreide beschrijving",
-          sender: "Gemeente Den Haag",
-        },
-      ],
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
diff --git a/components/ContactTimeline/src/stories/bem.stories.tsx b/components/ContactTimeline/src/stories/bem.stories.tsx
new file mode 100644
index 0000000000..6b4f9a9dd0
--- /dev/null
+++ b/components/ContactTimeline/src/stories/bem.stories.tsx
@@ -0,0 +1,244 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { File } from '@gemeente-denhaag/file';
+import * as ReactDOMServer from 'react-dom/server';
+import readme from '../../README.md?raw';
+import ContactTimeline from '../index';
+import { ContactTimelineProps } from '../ContactTimeline';
+
+const exampleArgs: ContactTimelineProps = {
+  todayLabel: 'vandaag',
+  items: [
+    {
+      id: '1',
+      title: 'Herinnering: Geef informatie',
+      channel: 'mail',
+      isoDate: new Date().toISOString(),
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '2',
+      title: 'Geef informatie',
+      channel: 'mail',
+      isoDate: '2023-01-23T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '3',
+      title: 'Tip: u heeft recht op extra subsidie, zie hier een extra lange regel',
+      channel: 'mail',
+      isoDate: '2023-01-06T09:17:03.137Z',
+      description:
+        'Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '4',
+      title: 'Status is veranderd',
+      channel: 'mail',
+      isoDate: '2022-12-01T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '5',
+      title: 'Mijn vraag',
+      channel: 'vraag',
+      isoDate: '2022-11-29T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Anna Klap',
+    },
+    {
+      id: '6',
+      title: 'Gesprek over afspraak met adviseur',
+      channel: 'telefoon',
+      isoDate: '2022-11-12T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '7',
+      title: 'Kosten onderzoek en verbeteringen',
+      channel: 'brief',
+      isoDate: '2022-11-10T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+  ],
+};
+
+const exampleArgsWithoutSender: ContactTimelineProps = {
+  todayLabel: 'vandaag',
+  collapsible: true,
+  expandedItems: ['4'],
+  items: [
+    {
+      id: '1',
+      title: 'Herinnering: Geef informatie',
+      channel: 'mail',
+      isoDate: new Date().toISOString(),
+      description: 'Hier komt de uitgebreide beschrijving',
+    },
+    {
+      id: '2',
+      title: 'Geef informatie',
+      channel: 'mail',
+      isoDate: '2023-01-23T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+    },
+    {
+      id: '3',
+      title: 'Tip: u heeft recht op extra subsidie, zie hier een extra lange regel',
+      channel: 'mail',
+      isoDate: '2023-01-06T09:17:03.137Z',
+      description:
+        'Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.',
+    },
+    {
+      id: '4',
+      title: 'Status is veranderd',
+      channel: 'mail',
+      isoDate: '2022-12-01T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+    },
+    {
+      id: '5',
+      title: 'Mijn vraag',
+      channel: 'vraag',
+      isoDate: '2022-11-29T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+    },
+    {
+      id: '6',
+      title: 'Gesprek over afspraak met adviseur',
+      channel: 'telefoon',
+      isoDate: '2022-11-12T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+    },
+    {
+      id: '7',
+      title: 'Kosten onderzoek en verbeteringen',
+      channel: 'brief',
+      isoDate: '2022-11-10T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+    },
+  ],
+};
+
+const exampleArgsWithFile: ContactTimelineProps = {
+  todayLabel: 'vandaag',
+  collapsible: true,
+  expandedItems: ['4'],
+  items: [
+    {
+      id: '1',
+      title: 'Herinnering: Geef informatie',
+      channel: 'mail',
+      isoDate: new Date().toISOString(),
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '2',
+      title: 'Geef informatie',
+      channel: 'mail',
+      isoDate: '2023-01-23T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '3',
+      title: 'Tip: u heeft recht op extra subsidie, zie hier een extra lange regel',
+      channel: 'mail',
+      isoDate: '2023-01-06T09:17:03.137Z',
+      description:
+        'Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving. Hier komt de uitgebreide beschrijving, en hier een extra lange uitgebreide beschrijving.',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '4',
+      title: 'Status is veranderd',
+      channel: 'mail',
+      isoDate: '2022-12-01T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+      file: (
+        <File
+          name="example3"
+          link="test.png"
+          extension="png"
+          size={2000}
+          lastUpdated="Thu Aug 31 2023 11:22:11 GMT+0200"
+        />
+      ),
+    },
+    {
+      id: '5',
+      title: 'Mijn vraag',
+      channel: 'vraag',
+      isoDate: '2022-11-29T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Anna Klap',
+    },
+    {
+      id: '6',
+      title: 'Gesprek over afspraak met adviseur',
+      channel: 'telefoon',
+      isoDate: '2022-11-12T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+    {
+      id: '7',
+      title: 'Kosten onderzoek en verbeteringen',
+      channel: 'brief',
+      isoDate: '2022-11-10T09:17:03.137Z',
+      description: 'Hier komt de uitgebreide beschrijving',
+      sender: 'Gemeente Den Haag',
+    },
+  ],
+};
+
+const meta = {
+  title: 'CSS/Process Steps/Contact Timeline',
+  id: 'css-contact-timeline',
+  component: ContactTimeline,
+  args: exampleArgs,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+      source: { type: 'dynamic' },
+      transformSource: (src, storyContext) => {
+        if (storyContext.component) {
+          return ReactDOMServer.renderToStaticMarkup(storyContext.component(storyContext.parameters.args));
+        }
+        return src;
+      },
+    },
+  },
+} as Meta<typeof ContactTimeline>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+
+export const Collapsible: Story = {
+  args: { ...Default.args, collapsible: true },
+};
+
+export const CollapsibleWithExpandedItem: Story = {
+  args: { ...Default.args, collapsible: true, expandedItems: ['3'] },
+};
+
+export const WithoutSender: Story = {
+  args: exampleArgsWithoutSender,
+};
+
+export const WithFile: Story = {
+  args: exampleArgsWithFile,
+};

From 53de10850d94434d9ae94b9705f544b5b7de6f85 Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Tue, 31 Oct 2023 14:55:07 +0100
Subject: [PATCH 11/18] fix: fixed bug with code snippets which used
 prettier.format

---
 components/ProcessSteps/src/stories/bem.stories.mdx | 7 +------
 components/StepMarker/src/stories/bem.stories.mdx   | 7 +------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/components/ProcessSteps/src/stories/bem.stories.mdx b/components/ProcessSteps/src/stories/bem.stories.mdx
index 081a0b10e4..d557604d14 100644
--- a/components/ProcessSteps/src/stories/bem.stories.mdx
+++ b/components/ProcessSteps/src/stories/bem.stories.mdx
@@ -1,6 +1,4 @@
 import { Canvas, Meta, Story } from "@storybook/addon-docs";
-import prettierBabel from "prettier/parser-babel";
-import prettier from "prettier/standalone";
 import * as ReactDOMServer from "react-dom/server";
 import { Status } from "../index";
 import pkg from "../../package.json";
@@ -44,10 +42,7 @@ export const Template = (args) => {
       transformSource: (src, storyContext) => {
         // Ensure valid HTML in the Preview source
         if (storyContext.component) {
-          return prettier.format(
-            ReactDOMServer.renderToStaticMarkup(storyContext.component(storyContext.parameters.args)),
-            { parser: "babel", plugins: [prettierBabel] },
-          );
+          return ReactDOMServer.renderToStaticMarkup(storyContext.component(storyContext.parameters.args));
         }
         return src;
       },
diff --git a/components/StepMarker/src/stories/bem.stories.mdx b/components/StepMarker/src/stories/bem.stories.mdx
index 863d47e03c..58e2ff731c 100644
--- a/components/StepMarker/src/stories/bem.stories.mdx
+++ b/components/StepMarker/src/stories/bem.stories.mdx
@@ -1,6 +1,4 @@
 import * as ReactDOMServer from "react-dom/server";
-import prettierBabel from "prettier/parser-babel";
-import prettier from "prettier/standalone";
 import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
 import { StepMarker } from "../index";
 import pkg from "../../package.json";
@@ -19,10 +17,7 @@ export const Template = (args) => <StepMarker {...args} />;
       transformSource: (src, storyContext) => {
         // Ensure valid HTML in the Preview source
         if (storyContext.component) {
-          return prettier.format(
-            ReactDOMServer.renderToStaticMarkup(storyContext.component(storyContext.parameters.args)),
-            { parser: "babel", plugins: [prettierBabel] },
-          );
+          return ReactDOMServer.renderToStaticMarkup(storyContext.component(storyContext.parameters.args));
         }
         return src;
       },

From b5bab27e82a93d7ec9ab85c4f02f6891cd350063 Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Tue, 31 Oct 2023 15:31:12 +0100
Subject: [PATCH 12/18] fix: moved ContactTimelineList to separate file

---
 .../ContactTimeline/src/ContactTimeline.tsx      | 16 ++--------------
 .../ContactTimeline/src/ContactTimelineList.tsx  | 14 ++++++++++++++
 components/ContactTimeline/src/index.tsx         |  2 ++
 3 files changed, 18 insertions(+), 14 deletions(-)
 create mode 100644 components/ContactTimeline/src/ContactTimelineList.tsx

diff --git a/components/ContactTimeline/src/ContactTimeline.tsx b/components/ContactTimeline/src/ContactTimeline.tsx
index b88fd7e47a..f46c943112 100644
--- a/components/ContactTimeline/src/ContactTimeline.tsx
+++ b/components/ContactTimeline/src/ContactTimeline.tsx
@@ -1,9 +1,8 @@
-import React, { Key, OlHTMLAttributes, ReactNode, useState } from 'react';
+import React, { Key, ReactNode, useState } from 'react';
 import { StepMarker, StepMarkerConnector } from '@gemeente-denhaag/step-marker';
 import { Step, StepHeader, StepHeading, StepHeaderToggle, StepDetails } from '@gemeente-denhaag/process-steps';
 import { format, differenceInDays } from 'date-fns';
 import { nl } from 'date-fns/locale';
-import clsx from 'clsx';
 import './index.scss';
 import { ContactTimelineMetaSeparator } from './ContactTimelineMetaSeparator';
 import { ContactTimelineMetaItem } from './ContactTimelineMetaItem';
@@ -15,6 +14,7 @@ import { ContactTimelineHeaderChannel } from './ContactTimelineHeaderChannel';
 import { Paragraph } from '@gemeente-denhaag/typography';
 import { ContactTimelineItemSender } from './ContactTimelineItemSender';
 import { ContactTimelineItemFile } from './ContactTimelineItemFile';
+import { ContactTimelineList } from './ContactTimelineList';
 
 export interface ContactTimelineItemProps {
   id: Key;
@@ -81,18 +81,6 @@ export const ContactTimeline: React.FC<ContactTimelineProps> = ({
   );
 };
 
-export interface ContactTimelineListProps extends OlHTMLAttributes<HTMLOListElement> {}
-
-export const ContactTimelineList: React.FC<ContactTimelineListProps> = ({
-  className,
-  children,
-  ...props
-}: ContactTimelineListProps) => (
-  <ol {...props} className={clsx('denhaag-contact-timeline', className)}>
-    {children}
-  </ol>
-);
-
 interface Props {
   dateTime: string;
   todayLabel: string;
diff --git a/components/ContactTimeline/src/ContactTimelineList.tsx b/components/ContactTimeline/src/ContactTimelineList.tsx
new file mode 100644
index 0000000000..318afa8644
--- /dev/null
+++ b/components/ContactTimeline/src/ContactTimelineList.tsx
@@ -0,0 +1,14 @@
+import clsx from 'clsx';
+import React, { OlHTMLAttributes } from 'react';
+
+export interface ContactTimelineListProps extends OlHTMLAttributes<HTMLOListElement> {}
+
+export const ContactTimelineList: React.FC<ContactTimelineListProps> = ({
+  className,
+  children,
+  ...props
+}: ContactTimelineListProps) => (
+  <ol {...props} className={clsx('denhaag-contact-timeline', className)}>
+    {children}
+  </ol>
+);
diff --git a/components/ContactTimeline/src/index.tsx b/components/ContactTimeline/src/index.tsx
index 37a494c787..99936848c9 100644
--- a/components/ContactTimeline/src/index.tsx
+++ b/components/ContactTimeline/src/index.tsx
@@ -2,11 +2,13 @@ import ContactTimeline from './ContactTimeline';
 
 export default ContactTimeline;
 
+export * from './ContactTimeline';
 export * from './ContactTimelineHeaderChannel';
 export * from './ContactTimelineHeaderContent';
 export * from './ContactTimelineHeaderDate';
 export * from './ContactTimelineItemFile';
 export * from './ContactTimelineItemSender';
+export * from './ContactTimelineList';
 export * from './ContactTimelineMeta';
 export * from './ContactTimelineMetaItem';
 export * from './ContactTimelineMetaSeparator';

From 4058f15e7523bc2768ad7f849dfac0cc60172c1e Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Tue, 31 Oct 2023 15:31:53 +0100
Subject: [PATCH 13/18] fix: use correct html element in HTMLAttributes

---
 components/ContactTimeline/src/ContactTimelineHeaderChannel.tsx | 2 +-
 components/ContactTimeline/src/ContactTimelineHeaderContent.tsx | 2 +-
 components/ContactTimeline/src/ContactTimelineHeaderDate.tsx    | 2 +-
 components/ContactTimeline/src/ContactTimelineItemFile.tsx      | 2 +-
 components/ContactTimeline/src/ContactTimelineItemSender.tsx    | 2 +-
 components/ContactTimeline/src/ContactTimelineMeta.tsx          | 2 +-
 components/ContactTimeline/src/ContactTimelineMetaItem.tsx      | 2 +-
 components/ContactTimeline/src/ContactTimelineMetaSeparator.tsx | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/ContactTimeline/src/ContactTimelineHeaderChannel.tsx b/components/ContactTimeline/src/ContactTimelineHeaderChannel.tsx
index e84eaac5c6..b7fda9f7bd 100644
--- a/components/ContactTimeline/src/ContactTimelineHeaderChannel.tsx
+++ b/components/ContactTimeline/src/ContactTimelineHeaderChannel.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineHeaderChannelProps extends HTMLAttributes<HTMLSpanElement> {}
+interface ContactTimelineHeaderChannelProps extends HTMLAttributes<HTMLDivElement> {}
 
 export const ContactTimelineHeaderChannel: React.FC<ContactTimelineHeaderChannelProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__step-header__channel')}>{children}</div>;
diff --git a/components/ContactTimeline/src/ContactTimelineHeaderContent.tsx b/components/ContactTimeline/src/ContactTimelineHeaderContent.tsx
index 6c18e63f2f..3c110c7a5c 100644
--- a/components/ContactTimeline/src/ContactTimelineHeaderContent.tsx
+++ b/components/ContactTimeline/src/ContactTimelineHeaderContent.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineHeaderContentProps extends HTMLAttributes<HTMLSpanElement> {}
+interface ContactTimelineHeaderContentProps extends HTMLAttributes<HTMLDivElement> {}
 
 export const ContactTimelineHeaderContent: React.FC<ContactTimelineHeaderContentProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__step-header__content')}>{children}</div>;
diff --git a/components/ContactTimeline/src/ContactTimelineHeaderDate.tsx b/components/ContactTimeline/src/ContactTimelineHeaderDate.tsx
index 4e517b86e6..ade64ea7df 100644
--- a/components/ContactTimeline/src/ContactTimelineHeaderDate.tsx
+++ b/components/ContactTimeline/src/ContactTimelineHeaderDate.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineHeaderDateProps extends HTMLAttributes<HTMLSpanElement> {}
+interface ContactTimelineHeaderDateProps extends HTMLAttributes<HTMLDivElement> {}
 
 export const ContactTimelineHeaderDate: React.FC<ContactTimelineHeaderDateProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__step-header__date')}>{children}</div>;
diff --git a/components/ContactTimeline/src/ContactTimelineItemFile.tsx b/components/ContactTimeline/src/ContactTimelineItemFile.tsx
index 653e2361f4..cdbbc72faa 100644
--- a/components/ContactTimeline/src/ContactTimelineItemFile.tsx
+++ b/components/ContactTimeline/src/ContactTimelineItemFile.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineItemFileProps extends HTMLAttributes<HTMLSpanElement> {}
+interface ContactTimelineItemFileProps extends HTMLAttributes<HTMLDivElement> {}
 
 export const ContactTimelineItemFile: React.FC<ContactTimelineItemFileProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__step-item-file')}>{children}</div>;
diff --git a/components/ContactTimeline/src/ContactTimelineItemSender.tsx b/components/ContactTimeline/src/ContactTimelineItemSender.tsx
index 9336c1ac52..b21a905d21 100644
--- a/components/ContactTimeline/src/ContactTimelineItemSender.tsx
+++ b/components/ContactTimeline/src/ContactTimelineItemSender.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineItemSenderProps extends HTMLAttributes<HTMLSpanElement> {}
+interface ContactTimelineItemSenderProps extends HTMLAttributes<HTMLDivElement> {}
 
 export const ContactTimelineItemSender: React.FC<ContactTimelineItemSenderProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__step-item-sender')}>{children}</div>;
diff --git a/components/ContactTimeline/src/ContactTimelineMeta.tsx b/components/ContactTimeline/src/ContactTimelineMeta.tsx
index 8eb17fa0bd..a7f89840de 100644
--- a/components/ContactTimeline/src/ContactTimelineMeta.tsx
+++ b/components/ContactTimeline/src/ContactTimelineMeta.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineMetaProps extends HTMLAttributes<HTMLSpanElement> {}
+interface ContactTimelineMetaProps extends HTMLAttributes<HTMLDivElement> {}
 
 export const ContactTimelineMeta: React.FC<ContactTimelineMetaProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__meta')}>{children}</div>;
diff --git a/components/ContactTimeline/src/ContactTimelineMetaItem.tsx b/components/ContactTimeline/src/ContactTimelineMetaItem.tsx
index 6ed386d642..58870655a0 100644
--- a/components/ContactTimeline/src/ContactTimelineMetaItem.tsx
+++ b/components/ContactTimeline/src/ContactTimelineMetaItem.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineMetaItemProps extends HTMLAttributes<HTMLSpanElement> {}
+interface ContactTimelineMetaItemProps extends HTMLAttributes<HTMLDivElement> {}
 
 export const ContactTimelineMetaItem: React.FC<ContactTimelineMetaItemProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__meta-item')}>{children}</div>;
diff --git a/components/ContactTimeline/src/ContactTimelineMetaSeparator.tsx b/components/ContactTimeline/src/ContactTimelineMetaSeparator.tsx
index 0858ecf81c..a9278d3efb 100644
--- a/components/ContactTimeline/src/ContactTimelineMetaSeparator.tsx
+++ b/components/ContactTimeline/src/ContactTimelineMetaSeparator.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineMetaSeparatorProps extends HTMLAttributes<HTMLSpanElement> {}
+interface ContactTimelineMetaSeparatorProps extends HTMLAttributes<HTMLDivElement> {}
 
 export const ContactTimelineMetaSeparator: React.FC<ContactTimelineMetaSeparatorProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__meta-separator')}>{children}</div>;

From 36a18eb415c1629cb80c2c7158fc8853c79065fa Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Tue, 31 Oct 2023 15:38:36 +0100
Subject: [PATCH 14/18] fix: fixed issue in storybook story with unexpected
 export

---
 .storybook/stories/templates/05-Case-detail-page.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.storybook/stories/templates/05-Case-detail-page.stories.tsx b/.storybook/stories/templates/05-Case-detail-page.stories.tsx
index 9aa9998278..e14f1d8e81 100644
--- a/.storybook/stories/templates/05-Case-detail-page.stories.tsx
+++ b/.storybook/stories/templates/05-Case-detail-page.stories.tsx
@@ -16,7 +16,7 @@ import {
 } from '../../../components/Icons/src';
 import { Status, StatusProps } from '../../../components/ProcessSteps/src';
 import { File } from '../../../components/File/src';
-import ContactTimeline from '../../../components/ContactTimeline/src';
+import ContactTimeline, { ContactTimelineProps } from '../../../components/ContactTimeline/src';
 import { Action } from '../../../components/Action/src';
 import { BadgeCounter, ButtonLink } from '@utrecht/component-library-react';
 
@@ -85,7 +85,7 @@ const progressStepsData: StatusProps = {
   ],
 };
 
-export const contactTimelineData = {
+const contactTimelineData: ContactTimelineProps = {
   todayLabel: 'vandaag',
   collapsible: true,
   items: [

From 2e64a77f5cf089284e076b8e7ee1180eb4b62aae Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Thu, 2 Nov 2023 15:35:09 +0100
Subject: [PATCH 15/18] feat: created Utils package with generic formatDate

---
 .../templates/05-Case-detail-page.stories.tsx |  4 +-
 components/ContactTimeline/package.json       |  4 +-
 .../ContactTimeline/src/ContactTimeline.tsx   | 45 +++++-----------
 .../src/stories/bem.stories.tsx               | 12 ++---
 .../src/stories/react.stories.tsx             | 12 ++---
 components/ContactTimeline/tsconfig.json      |  3 ++
 components/Utils/package.json                 | 38 +++++++++++++
 components/Utils/src/formatDate.tsx           | 53 +++++++++++++++++++
 components/Utils/src/index.tsx                |  1 +
 components/Utils/tsconfig.json                | 11 ++++
 pnpm-lock.yaml                                | 15 ++++--
 11 files changed, 147 insertions(+), 51 deletions(-)
 create mode 100644 components/Utils/package.json
 create mode 100644 components/Utils/src/formatDate.tsx
 create mode 100644 components/Utils/src/index.tsx
 create mode 100644 components/Utils/tsconfig.json

diff --git a/.storybook/stories/templates/05-Case-detail-page.stories.tsx b/.storybook/stories/templates/05-Case-detail-page.stories.tsx
index e14f1d8e81..4066f6f923 100644
--- a/.storybook/stories/templates/05-Case-detail-page.stories.tsx
+++ b/.storybook/stories/templates/05-Case-detail-page.stories.tsx
@@ -86,7 +86,7 @@ const progressStepsData: StatusProps = {
 };
 
 const contactTimelineData: ContactTimelineProps = {
-  todayLabel: 'vandaag',
+  labels: { today: 'vandaag', yesterday: 'gisteren' },
   collapsible: true,
   items: [
     {
@@ -101,7 +101,7 @@ const contactTimelineData: ContactTimelineProps = {
       id: '2',
       title: 'Geef informatie',
       channel: 'mail',
-      isoDate: '2023-01-23T09:17:03.137Z',
+      isoDate: new Date(Date.now() - 864e5).toISOString(),
       description: 'Hier komt de uitgebreide beschrijving',
       sender: 'Gemeente Den Haag',
     },
diff --git a/components/ContactTimeline/package.json b/components/ContactTimeline/package.json
index 5e090d89c7..091f23b9e9 100644
--- a/components/ContactTimeline/package.json
+++ b/components/ContactTimeline/package.json
@@ -34,7 +34,7 @@
     "@gemeente-denhaag/process-steps": "workspace:*",
     "@gemeente-denhaag/step-marker": "workspace:*",
     "@gemeente-denhaag/typography": "workspace:*",
-    "clsx": "2.0.0",
-    "date-fns": "2.30.0"
+    "@gemeente-denhaag/utils": "workspace:*",
+    "clsx": "2.0.0"
   }
 }
diff --git a/components/ContactTimeline/src/ContactTimeline.tsx b/components/ContactTimeline/src/ContactTimeline.tsx
index f46c943112..3e329a8ed5 100644
--- a/components/ContactTimeline/src/ContactTimeline.tsx
+++ b/components/ContactTimeline/src/ContactTimeline.tsx
@@ -1,8 +1,7 @@
 import React, { Key, ReactNode, useState } from 'react';
 import { StepMarker, StepMarkerConnector } from '@gemeente-denhaag/step-marker';
 import { Step, StepHeader, StepHeading, StepHeaderToggle, StepDetails } from '@gemeente-denhaag/process-steps';
-import { format, differenceInDays } from 'date-fns';
-import { nl } from 'date-fns/locale';
+import { formatDate } from '@gemeente-denhaag/utils';
 import './index.scss';
 import { ContactTimelineMetaSeparator } from './ContactTimelineMetaSeparator';
 import { ContactTimelineMetaItem } from './ContactTimelineMetaItem';
@@ -27,8 +26,13 @@ export interface ContactTimelineItemProps {
   channel: ReactNode;
 }
 
+interface Labels {
+  today: string;
+  yesterday: string;
+}
+
 interface ContactTimelineItemInternalProps extends ContactTimelineItemProps {
-  todayLabel: string;
+  labels: Labels;
   nextItem?: boolean;
   expanded?: boolean;
   toggleExpanded: false | (() => void);
@@ -38,7 +42,7 @@ export interface ContactTimelineProps {
   items: ContactTimelineItemProps[];
   expandedItems?: Key[];
   collapsible?: boolean;
-  todayLabel: string;
+  labels: Labels;
 }
 
 const toggleState = (key: Key, collection: Key[], setCollection: React.Dispatch<React.SetStateAction<React.Key[]>>) => {
@@ -51,7 +55,7 @@ const toggleState = (key: Key, collection: Key[], setCollection: React.Dispatch<
 
 export const ContactTimeline: React.FC<ContactTimelineProps> = ({
   items,
-  todayLabel,
+  labels,
   expandedItems: initialExpanded = [],
   collapsible = false,
 }: ContactTimelineProps) => {
@@ -67,7 +71,7 @@ export const ContactTimeline: React.FC<ContactTimelineProps> = ({
             key={item.id}
             expanded={collapsible ? expandedItems.includes(item.id) : false}
             nextItem={nextItem}
-            todayLabel={todayLabel}
+            labels={labels}
             toggleExpanded={
               collapsible &&
               (() => {
@@ -81,29 +85,6 @@ export const ContactTimeline: React.FC<ContactTimelineProps> = ({
   );
 };
 
-interface Props {
-  dateTime: string;
-  todayLabel: string;
-  now?: string;
-  locale?: Locale;
-}
-
-export const formatContactTimelineDate = ({
-  dateTime,
-  now = new Date().toISOString(),
-  locale = nl,
-  todayLabel,
-}: Props): string => {
-  const date = new Date(dateTime);
-  const daysDifference = differenceInDays(date, new Date(now));
-
-  if (daysDifference === 0) {
-    return todayLabel;
-  }
-
-  return format(date, 'd-M-yyyy', { locale });
-};
-
 const ContactTimelineListItem: React.FC<ContactTimelineItemInternalProps> = ({
   id,
   title,
@@ -112,7 +93,7 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemInternalProps> = ({
   date,
   isoDate,
   sender = '',
-  todayLabel,
+  labels,
   channel,
   nextItem,
   expanded = false,
@@ -126,7 +107,7 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemInternalProps> = ({
             ? date
             : isoDate && (
                 <ContactTimelineMetaTimeItem dateTime={isoDate}>
-                  {formatContactTimelineDate({ dateTime: isoDate, todayLabel: todayLabel })}
+                  {formatDate({ dateTime: isoDate, labels: { ...labels } })}
                 </ContactTimelineMetaTimeItem>
               )}
         </ContactTimelineHeaderDate>
@@ -152,7 +133,7 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemInternalProps> = ({
               ? date
               : isoDate && (
                   <ContactTimelineMetaTimeItem dateTime={isoDate}>
-                    {formatContactTimelineDate({ dateTime: isoDate, todayLabel: todayLabel })}
+                    {formatDate({ dateTime: isoDate, labels: { ...labels } })}
                   </ContactTimelineMetaTimeItem>
                 )}
             <ContactTimelineMetaSeparator />
diff --git a/components/ContactTimeline/src/stories/bem.stories.tsx b/components/ContactTimeline/src/stories/bem.stories.tsx
index 6b4f9a9dd0..5783c005e1 100644
--- a/components/ContactTimeline/src/stories/bem.stories.tsx
+++ b/components/ContactTimeline/src/stories/bem.stories.tsx
@@ -7,7 +7,7 @@ import ContactTimeline from '../index';
 import { ContactTimelineProps } from '../ContactTimeline';
 
 const exampleArgs: ContactTimelineProps = {
-  todayLabel: 'vandaag',
+  labels: { today: 'vandaag', yesterday: 'gisteren' },
   items: [
     {
       id: '1',
@@ -21,7 +21,7 @@ const exampleArgs: ContactTimelineProps = {
       id: '2',
       title: 'Geef informatie',
       channel: 'mail',
-      isoDate: '2023-01-23T09:17:03.137Z',
+      isoDate: new Date(Date.now() - 864e5).toISOString(),
       description: 'Hier komt de uitgebreide beschrijving',
       sender: 'Gemeente Den Haag',
     },
@@ -70,7 +70,7 @@ const exampleArgs: ContactTimelineProps = {
 };
 
 const exampleArgsWithoutSender: ContactTimelineProps = {
-  todayLabel: 'vandaag',
+  labels: { today: 'vandaag', yesterday: 'gisteren' },
   collapsible: true,
   expandedItems: ['4'],
   items: [
@@ -85,7 +85,7 @@ const exampleArgsWithoutSender: ContactTimelineProps = {
       id: '2',
       title: 'Geef informatie',
       channel: 'mail',
-      isoDate: '2023-01-23T09:17:03.137Z',
+      isoDate: new Date(Date.now() - 864e5).toISOString(),
       description: 'Hier komt de uitgebreide beschrijving',
     },
     {
@@ -128,7 +128,7 @@ const exampleArgsWithoutSender: ContactTimelineProps = {
 };
 
 const exampleArgsWithFile: ContactTimelineProps = {
-  todayLabel: 'vandaag',
+  labels: { today: 'vandaag', yesterday: 'gisteren' },
   collapsible: true,
   expandedItems: ['4'],
   items: [
@@ -144,7 +144,7 @@ const exampleArgsWithFile: ContactTimelineProps = {
       id: '2',
       title: 'Geef informatie',
       channel: 'mail',
-      isoDate: '2023-01-23T09:17:03.137Z',
+      isoDate: new Date(Date.now() - 864e5).toISOString(),
       description: 'Hier komt de uitgebreide beschrijving',
       sender: 'Gemeente Den Haag',
     },
diff --git a/components/ContactTimeline/src/stories/react.stories.tsx b/components/ContactTimeline/src/stories/react.stories.tsx
index 6e54c7c0bf..72d30715bc 100644
--- a/components/ContactTimeline/src/stories/react.stories.tsx
+++ b/components/ContactTimeline/src/stories/react.stories.tsx
@@ -6,7 +6,7 @@ import ContactTimeline from '../index';
 import { ContactTimelineProps } from '../ContactTimeline';
 
 const exampleArgs: ContactTimelineProps = {
-  todayLabel: 'vandaag',
+  labels: { today: 'vandaag', yesterday: 'gisteren' },
   items: [
     {
       id: '1',
@@ -20,7 +20,7 @@ const exampleArgs: ContactTimelineProps = {
       id: '2',
       title: 'Geef informatie',
       channel: 'mail',
-      isoDate: '2023-01-23T09:17:03.137Z',
+      isoDate: new Date(Date.now() - 864e5).toISOString(),
       description: 'Hier komt de uitgebreide beschrijving',
       sender: 'Gemeente Den Haag',
     },
@@ -69,7 +69,7 @@ const exampleArgs: ContactTimelineProps = {
 };
 
 const exampleArgsWithoutSender: ContactTimelineProps = {
-  todayLabel: 'vandaag',
+  labels: { today: 'vandaag', yesterday: 'gisteren' },
   collapsible: true,
   expandedItems: ['4'],
   items: [
@@ -84,7 +84,7 @@ const exampleArgsWithoutSender: ContactTimelineProps = {
       id: '2',
       title: 'Geef informatie',
       channel: 'mail',
-      isoDate: '2023-01-23T09:17:03.137Z',
+      isoDate: new Date(Date.now() - 864e5).toISOString(),
       description: 'Hier komt de uitgebreide beschrijving',
     },
     {
@@ -127,7 +127,7 @@ const exampleArgsWithoutSender: ContactTimelineProps = {
 };
 
 const exampleArgsWithFile: ContactTimelineProps = {
-  todayLabel: 'vandaag',
+  labels: { today: 'vandaag', yesterday: 'gisteren' },
   collapsible: true,
   expandedItems: ['4'],
   items: [
@@ -143,7 +143,7 @@ const exampleArgsWithFile: ContactTimelineProps = {
       id: '2',
       title: 'Geef informatie',
       channel: 'mail',
-      isoDate: '2023-01-23T09:17:03.137Z',
+      isoDate: new Date(Date.now() - 864e5).toISOString(),
       description: 'Hier komt de uitgebreide beschrijving',
       sender: 'Gemeente Den Haag',
     },
diff --git a/components/ContactTimeline/tsconfig.json b/components/ContactTimeline/tsconfig.json
index 1f48cb1449..62f4dd560c 100644
--- a/components/ContactTimeline/tsconfig.json
+++ b/components/ContactTimeline/tsconfig.json
@@ -16,6 +16,9 @@
     },
     {
       "path": "../Typography"
+    },
+    {
+      "path": "../Utils"
     }
   ]
 }
diff --git a/components/Utils/package.json b/components/Utils/package.json
new file mode 100644
index 0000000000..61d7cbaa08
--- /dev/null
+++ b/components/Utils/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@gemeente-denhaag/utils",
+  "version": "0.2.3-alpha.352",
+  "description": "Utils",
+  "bugs": "https://github.com/nl-design-system/denhaag/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nl-design-system/denhaag.git",
+    "directory": "components/Utils"
+  },
+  "license": "EUPL-1.2",
+  "author": "Municipality of The Hague",
+  "exports": {
+    ".": {
+      "types": "./dist/cjs/index.d.ts",
+      "import": "./dist/mjs/index.js",
+      "default": "./dist/cjs/index.js"
+    },
+    "./index.css": "./dist/index.css"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/mjs/index.js",
+  "types": "dist/cjs/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c ../../rollup.config.mjs",
+    "clean": "rimraf dist tsconfig.tsbuildinfo"
+  },
+  "dependencies": {
+    "date-fns": "2.30.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "gitHead": "dcf72a9b79266c1ebede35aff4a02dd9121a980f"
+}
diff --git a/components/Utils/src/formatDate.tsx b/components/Utils/src/formatDate.tsx
new file mode 100644
index 0000000000..75e7ae30fe
--- /dev/null
+++ b/components/Utils/src/formatDate.tsx
@@ -0,0 +1,53 @@
+import { format, differenceInDays } from 'date-fns';
+import { nl } from 'date-fns/locale';
+
+interface Labels {
+  today?: string;
+  yesterday?: string;
+  before?: string;
+  approachingDeadline?: (daysDifference: number) => string;
+}
+
+interface Props {
+  dateTime: string;
+  now?: string;
+  locale?: Locale;
+  labels?: Labels;
+  relative?: boolean;
+}
+
+export const formatDate = ({
+  dateTime,
+  now = new Date().toISOString(),
+  locale = nl,
+  labels = {},
+  relative,
+}: Props): [string | null, boolean] => {
+  const date = new Date(dateTime);
+  const daysDifference = differenceInDays(date, new Date(now));
+
+  console.log(date);
+  console.log(daysDifference);
+
+  if (relative) {
+    if (daysDifference < 0) {
+      return [null, false];
+    }
+
+    if (daysDifference <= 2) {
+      return [labels.approachingDeadline?.(daysDifference) ?? null, true];
+    }
+
+    return [`${labels.before} ${format(date, 'd MMMM yyyy', { locale: locale })}`, false];
+  }
+
+  if (daysDifference === 0) {
+    return [labels.today || null, false];
+  }
+
+  if (daysDifference === -1) {
+    return [labels.yesterday || null, false];
+  }
+
+  return [format(date, 'd-M-yyyy', { locale }), false];
+};
diff --git a/components/Utils/src/index.tsx b/components/Utils/src/index.tsx
new file mode 100644
index 0000000000..70684446e3
--- /dev/null
+++ b/components/Utils/src/index.tsx
@@ -0,0 +1 @@
+export * from './formatDate';
diff --git a/components/Utils/tsconfig.json b/components/Utils/tsconfig.json
new file mode 100644
index 0000000000..1990c90373
--- /dev/null
+++ b/components/Utils/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "composite": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "src/**/*.stories.tsx"],
+  "references": []
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 470e84a085..ddfb3fc0d3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -543,12 +543,12 @@ importers:
       '@gemeente-denhaag/typography':
         specifier: workspace:*
         version: link:../Typography
+      '@gemeente-denhaag/utils':
+        specifier: workspace:*
+        version: link:../Utils
       clsx:
         specifier: 2.0.0
         version: 2.0.0
-      date-fns:
-        specifier: 2.30.0
-        version: 2.30.0
 
   components/CtaDownload:
     devDependencies:
@@ -1104,6 +1104,15 @@ importers:
         specifier: 1.0.0-alpha.563
         version: 1.0.0-alpha.563
 
+  components/Utils:
+    dependencies:
+      date-fns:
+        specifier: 2.30.0
+        version: 2.30.0
+      react:
+        specifier: ^17.0.0 || ^18.0.0
+        version: 17.0.2
+
   packages/components-css:
     devDependencies:
       '@gemeente-denhaag/accordion':

From 40b2b94f589e868b2581f44893e894164b152986 Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Fri, 3 Nov 2023 15:15:45 +0100
Subject: [PATCH 16/18] feat: added more generic Den Haag formatData, improved
 multi language support of Action component

---
 .../templates/05-Case-detail-page.stories.tsx |  3 ++
 .../templates/Messages-page.stories.tsx       |  3 +-
 .storybook/stories/templates/util.tsx         | 12 +++++
 components/Action/package.json                |  1 +
 components/Action/src/Action.tsx              |  3 ++
 components/Action/src/ActionDate.tsx          | 46 ++++++-------------
 components/Action/src/ActionDetails.tsx       |  6 ++-
 components/Action/src/ActionMulti.tsx         |  3 +-
 components/Action/src/ActionSingle.tsx        |  3 +-
 .../Action/src/stories/react.stories.mdx      | 33 +++++++++++--
 components/Utils/src/formatDate.tsx           |  7 +--
 pnpm-lock.yaml                                |  3 ++
 12 files changed, 78 insertions(+), 45 deletions(-)

diff --git a/.storybook/stories/templates/05-Case-detail-page.stories.tsx b/.storybook/stories/templates/05-Case-detail-page.stories.tsx
index 4066f6f923..d6045d950b 100644
--- a/.storybook/stories/templates/05-Case-detail-page.stories.tsx
+++ b/.storybook/stories/templates/05-Case-detail-page.stories.tsx
@@ -28,6 +28,7 @@ import {
   newsletterData,
   contactData,
   linkData,
+  dateFormatLabels,
 } from './util';
 
 import './template-story.scss';
@@ -219,6 +220,7 @@ export const ZaakDetailPagina: Story = {
             className="denhaag-page-content__task"
             dateTime={taskDateTime}
             now={taskNow}
+            labels={dateFormatLabels}
             actions={<ButtonLink href="#example">Actie</ButtonLink>}
             relativeDate
           >
@@ -234,6 +236,7 @@ export const ZaakDetailPagina: Story = {
             className="denhaag-page-content__task"
             dateTime={taskDateTime}
             now={taskNow}
+            labels={dateFormatLabels}
             actions={<ButtonLink href="#example">Actie</ButtonLink>}
             relativeDate
           >
diff --git a/.storybook/stories/templates/Messages-page.stories.tsx b/.storybook/stories/templates/Messages-page.stories.tsx
index c9a57168aa..90602b2bb9 100644
--- a/.storybook/stories/templates/Messages-page.stories.tsx
+++ b/.storybook/stories/templates/Messages-page.stories.tsx
@@ -18,6 +18,7 @@ import {
   BookIcon,
   InboxIcon,
 } from '../../../components/Icons/src';
+import { dateFormatLabels } from './util';
 import { Action } from '../../../components/Action/src';
 import { Table, TableHead, TableHeader, TableRow } from '../../../components/Table/src';
 
@@ -244,7 +245,7 @@ export const MessagesPage: StoryObj<typeof meta> = {
             </TableHead>
           </Table>
           {messages.map((m) => (
-            <Action link={m.link} dateTime={m.dateTime} now={currentDate}>
+            <Action link={m.link} dateTime={m.dateTime} now={currentDate} labels={dateFormatLabels}>
               {m.new ? <strong>{m.title}</strong> : m.title}
             </Action>
           ))}
diff --git a/.storybook/stories/templates/util.tsx b/.storybook/stories/templates/util.tsx
index e65d32a12b..161680d32e 100644
--- a/.storybook/stories/templates/util.tsx
+++ b/.storybook/stories/templates/util.tsx
@@ -128,6 +128,18 @@ export const footerSocialData = {
   ],
 };
 
+export const dateFormatLabels = {
+  today: 'vandaag',
+  yesterday: 'gisteren',
+  before: 'vóór',
+  approachingDeadline: (daysDifference) => {
+    if (daysDifference === 1) {
+      return `nog ${daysDifference} dag`;
+    }
+    return `nog ${daysDifference} dagen`;
+  },
+};
+
 export const newsletterData = {
   title: 'Meld u aan voor de nieuwsbrief',
   text: 'Blijf gemakkelijk op de hoogte van ontwikkelingen in uw stadsdeel en de belangrijkste zaken van Den Haag.',
diff --git a/components/Action/package.json b/components/Action/package.json
index eacfb8cbfb..0418efb322 100644
--- a/components/Action/package.json
+++ b/components/Action/package.json
@@ -32,6 +32,7 @@
     "@gemeente-denhaag/button": "workspace:*",
     "@gemeente-denhaag/icons": "workspace:*",
     "@gemeente-denhaag/link": "workspace:*",
+    "@gemeente-denhaag/utils": "workspace:*",
     "date-fns": "2.30.0"
   }
 }
diff --git a/components/Action/src/Action.tsx b/components/Action/src/Action.tsx
index 28f2c6c3e4..ae38923e0e 100644
--- a/components/Action/src/Action.tsx
+++ b/components/Action/src/Action.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { ActionSingle, ActionMulti } from './index';
+import { FormatDateLabels } from '@gemeente-denhaag/utils';
 
 export interface ActionSingleProps extends React.HTMLAttributes<HTMLAnchorElement> {
   children: React.ReactNode;
@@ -8,6 +9,7 @@ export interface ActionSingleProps extends React.HTMLAttributes<HTMLAnchorElemen
   dateTime?: string;
   now?: string;
   relativeDate?: boolean;
+  labels?: FormatDateLabels;
 }
 
 export interface ActionMultiProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -16,6 +18,7 @@ export interface ActionMultiProps extends React.HTMLAttributes<HTMLDivElement> {
   dateTime?: string;
   now?: string;
   relativeDate?: boolean;
+  labels?: FormatDateLabels;
 }
 
 export const Action = (props: ActionSingleProps | ActionMultiProps) => {
diff --git a/components/Action/src/ActionDate.tsx b/components/Action/src/ActionDate.tsx
index 3a2cdbd30c..3b523fd3ce 100644
--- a/components/Action/src/ActionDate.tsx
+++ b/components/Action/src/ActionDate.tsx
@@ -1,49 +1,31 @@
 import React from 'react';
-import { format, differenceInCalendarDays } from 'date-fns';
 import { nl } from 'date-fns/locale';
 import { AlertTriangleFilledIcon } from '@gemeente-denhaag/icons';
 import { Time } from './index';
+import { formatDate, FormatDateLabels } from '@gemeente-denhaag/utils';
+import clsx from 'clsx';
 
 interface Props {
   dateTime: string;
   now?: string;
   relative?: boolean;
   locale?: Locale;
+  labels?: FormatDateLabels;
 }
 
-export const ActionDate = ({ dateTime, now = new Date().toISOString(), relative = false, locale = nl }: Props) => {
-  const date = new Date(dateTime);
-  const daysDifference = differenceInCalendarDays(date, new Date(now));
-
-  if (relative) {
-    if (daysDifference < 0) return null;
-
-    if (daysDifference <= 2)
-      return (
-        <div className="denhaag-action__date denhaag-action__date--warning">
-          <AlertTriangleFilledIcon className="denhaag-action__warning-icon" useDefaultClass={false} />
-          <Time dateTime={dateTime}>{`nog ${daysDifference} dagen`}</Time>
-        </div>
-      );
-
-    return (
-      <div className="denhaag-action__date">
-        <Time dateTime={dateTime}>{`vóór ${format(date, 'd MMMM yyyy', { locale: locale })}`}</Time>
-      </div>
-    );
-  }
-
-  if (daysDifference === 0) {
-    return (
-      <div className="denhaag-action__date">
-        <Time dateTime={dateTime}>vandaag</Time>
-      </div>
-    );
-  }
+export const ActionDate = ({
+  dateTime,
+  now = new Date().toISOString(),
+  relative = false,
+  locale = nl,
+  labels,
+}: Props) => {
+  const [formattedDate, deadline] = formatDate({ dateTime, labels, relative, locale, now });
 
   return (
-    <div className="denhaag-action__date">
-      <Time dateTime={dateTime}>{format(date, 'd-M-yyyy')}</Time>
+    <div className={clsx('denhaag-action__date', deadline && 'denhaag-action__date--warning')}>
+      {deadline && <AlertTriangleFilledIcon className="denhaag-action__warning-icon" useDefaultClass={false} />}
+      <Time dateTime={dateTime}>{formattedDate}</Time>
     </div>
   );
 };
diff --git a/components/Action/src/ActionDetails.tsx b/components/Action/src/ActionDetails.tsx
index 47b10fe509..37b9290f9c 100644
--- a/components/Action/src/ActionDetails.tsx
+++ b/components/Action/src/ActionDetails.tsx
@@ -1,17 +1,19 @@
 import React from 'react';
 import { ActionDate, ActionActions } from './index';
+import { FormatDateLabels } from '@gemeente-denhaag/utils';
 
 interface ActionDetailsProps {
   children?: React.ReactNode;
   dateTime?: string;
   now?: string;
   relativeDate?: boolean;
+  labels?: FormatDateLabels;
 }
 
-export const ActionDetails = ({ children, dateTime, now, relativeDate }: ActionDetailsProps) => {
+export const ActionDetails = ({ children, dateTime, now, relativeDate, labels }: ActionDetailsProps) => {
   return (
     <div className="denhaag-action__details">
-      {dateTime && <ActionDate dateTime={dateTime} now={now} relative={relativeDate} />}
+      {dateTime && <ActionDate dateTime={dateTime} now={now} relative={relativeDate} labels={labels} />}
       <ActionActions>{children}</ActionActions>
     </div>
   );
diff --git a/components/Action/src/ActionMulti.tsx b/components/Action/src/ActionMulti.tsx
index 2b99448371..3441e16ba7 100644
--- a/components/Action/src/ActionMulti.tsx
+++ b/components/Action/src/ActionMulti.tsx
@@ -9,13 +9,14 @@ export const ActionMulti = ({
   dateTime,
   now,
   relativeDate,
+  labels,
   className,
   ...rest
 }: ActionMultiProps) => {
   return (
     <div className={clsx('denhaag-action', className)} {...rest}>
       <ActionContent>{children}</ActionContent>
-      <ActionDetails dateTime={dateTime} now={now} relativeDate={relativeDate}>
+      <ActionDetails dateTime={dateTime} now={now} relativeDate={relativeDate} labels={labels}>
         {actions}
       </ActionDetails>
     </div>
diff --git a/components/Action/src/ActionSingle.tsx b/components/Action/src/ActionSingle.tsx
index 3296d16b10..94d5256a6b 100644
--- a/components/Action/src/ActionSingle.tsx
+++ b/components/Action/src/ActionSingle.tsx
@@ -9,13 +9,14 @@ export const ActionSingle = ({
   dateTime,
   now,
   relativeDate,
+  labels,
   className,
   ...rest
 }: ActionSingleProps) => {
   return (
     <a href={link} className={clsx('denhaag-action denhaag-action--single', className)} {...rest}>
       <ActionContent>{children}</ActionContent>
-      <ActionDetails dateTime={dateTime} now={now} relativeDate={relativeDate} />
+      <ActionDetails dateTime={dateTime} now={now} relativeDate={relativeDate} labels={labels} />
     </a>
   );
 };
diff --git a/components/Action/src/stories/react.stories.mdx b/components/Action/src/stories/react.stories.mdx
index abeba5f014..8b55afa697 100644
--- a/components/Action/src/stories/react.stories.mdx
+++ b/components/Action/src/stories/react.stories.mdx
@@ -5,6 +5,18 @@ import pkg from "../../package.json";
 import readme from "../../README.md";
 import { Action } from "../index.tsx";
 
+export const labels = {
+  today: "vandaag",
+  yesterday: "gisteren",
+  before: "vóór",
+  approachingDeadline: (daysDifference) => {
+    if (daysDifference === 1) {
+      return `nog ${daysDifference} dag`;
+    }
+    return `nog ${daysDifference} dagen`;
+  },
+};
+
 <Meta
   title="React/Actions/Action"
   parameters={{
@@ -62,7 +74,7 @@ import { Action } from "../index.tsx";
 <Canvas>
   <Story name="Single - with date">
     {() => (
-      <Action link="#example" dateTime={"2023-09-28T19:47:36.593Z"}>
+      <Action link="#example" dateTime={"2023-09-28T19:47:36.593Z"} labels={labels}>
         <strong>Taak</strong>
       </Action>
     )}
@@ -74,7 +86,13 @@ import { Action } from "../index.tsx";
 <Canvas>
   <Story name="Single - with date - relative">
     {() => (
-      <Action link="#example" dateTime={"2023-10-02T19:47:36.593Z"} now={"2023-09-28T19:47:36.593Z"} relativeDate>
+      <Action
+        link="#example"
+        dateTime={"2023-10-02T19:47:36.593Z"}
+        now={"2023-09-28T19:47:36.593Z"}
+        relativeDate
+        labels={labels}
+      >
         <strong>Taak</strong>
       </Action>
     )}
@@ -86,7 +104,13 @@ import { Action } from "../index.tsx";
 <Canvas>
   <Story name="Single - with warning date - relative">
     {() => (
-      <Action link="#example" dateTime={"2023-09-30T19:47:36.593Z"} now={"2023-09-28T19:47:36.593Z"} relativeDate>
+      <Action
+        link="#example"
+        dateTime={"2023-09-30T19:47:36.593Z"}
+        now={"2023-09-28T19:47:36.593Z"}
+        relativeDate
+        labels={labels}
+      >
         <strong>Taak</strong>
       </Action>
     )}
@@ -149,6 +173,7 @@ import { Action } from "../index.tsx";
       <Action
         dateTime={"2023-09-28T19:47:36.593Z"}
         now={"2023-09-28T19:47:36.593Z"}
+        labels={labels}
         actions={<ButtonLink href="#example">Actie</ButtonLink>}
       >
         <strong>Taak</strong>
@@ -166,6 +191,7 @@ import { Action } from "../index.tsx";
         relativeDate
         dateTime={"2023-10-02T19:47:36.593Z"}
         now={"2023-09-28T19:47:36.593Z"}
+        labels={labels}
         actions={<ButtonLink href="#example">Actie</ButtonLink>}
       >
         <strong>Taak</strong>
@@ -183,6 +209,7 @@ import { Action } from "../index.tsx";
         relativeDate
         dateTime={"2023-09-30T19:47:36.593Z"}
         now={"2023-09-28T19:47:36.593Z"}
+        labels={labels}
         actions={<ButtonLink href="#example">Actie</ButtonLink>}
       >
         <strong>Taak</strong>
diff --git a/components/Utils/src/formatDate.tsx b/components/Utils/src/formatDate.tsx
index 75e7ae30fe..959efa7e5a 100644
--- a/components/Utils/src/formatDate.tsx
+++ b/components/Utils/src/formatDate.tsx
@@ -1,7 +1,7 @@
 import { format, differenceInDays } from 'date-fns';
 import { nl } from 'date-fns/locale';
 
-interface Labels {
+export interface FormatDateLabels {
   today?: string;
   yesterday?: string;
   before?: string;
@@ -12,7 +12,7 @@ interface Props {
   dateTime: string;
   now?: string;
   locale?: Locale;
-  labels?: Labels;
+  labels?: FormatDateLabels;
   relative?: boolean;
 }
 
@@ -26,9 +26,6 @@ export const formatDate = ({
   const date = new Date(dateTime);
   const daysDifference = differenceInDays(date, new Date(now));
 
-  console.log(date);
-  console.log(daysDifference);
-
   if (relative) {
     if (daysDifference < 0) {
       return [null, false];
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ddfb3fc0d3..e4f88d57e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -379,6 +379,9 @@ importers:
       '@gemeente-denhaag/link':
         specifier: workspace:*
         version: link:../Link
+      '@gemeente-denhaag/utils':
+        specifier: workspace:*
+        version: link:../Utils
       date-fns:
         specifier: 2.30.0
         version: 2.30.0

From b5c688a41be25a5ff123a7e708bd6d133a169ded Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Mon, 6 Nov 2023 14:37:27 +0100
Subject: [PATCH 17/18] fix: made labels prop in formatDate and Action
 mandatory

---
 components/Action/src/Action.tsx        | 4 ++--
 components/Action/src/ActionDate.tsx    | 2 +-
 components/Action/src/ActionDetails.tsx | 2 +-
 components/Utils/src/formatDate.tsx     | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/Action/src/Action.tsx b/components/Action/src/Action.tsx
index ae38923e0e..d3d70ba3e7 100644
--- a/components/Action/src/Action.tsx
+++ b/components/Action/src/Action.tsx
@@ -9,7 +9,7 @@ export interface ActionSingleProps extends React.HTMLAttributes<HTMLAnchorElemen
   dateTime?: string;
   now?: string;
   relativeDate?: boolean;
-  labels?: FormatDateLabels;
+  labels: FormatDateLabels;
 }
 
 export interface ActionMultiProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -18,7 +18,7 @@ export interface ActionMultiProps extends React.HTMLAttributes<HTMLDivElement> {
   dateTime?: string;
   now?: string;
   relativeDate?: boolean;
-  labels?: FormatDateLabels;
+  labels: FormatDateLabels;
 }
 
 export const Action = (props: ActionSingleProps | ActionMultiProps) => {
diff --git a/components/Action/src/ActionDate.tsx b/components/Action/src/ActionDate.tsx
index 3b523fd3ce..b988dd34d3 100644
--- a/components/Action/src/ActionDate.tsx
+++ b/components/Action/src/ActionDate.tsx
@@ -10,7 +10,7 @@ interface Props {
   now?: string;
   relative?: boolean;
   locale?: Locale;
-  labels?: FormatDateLabels;
+  labels: FormatDateLabels;
 }
 
 export const ActionDate = ({
diff --git a/components/Action/src/ActionDetails.tsx b/components/Action/src/ActionDetails.tsx
index 37b9290f9c..6c31128b7e 100644
--- a/components/Action/src/ActionDetails.tsx
+++ b/components/Action/src/ActionDetails.tsx
@@ -7,7 +7,7 @@ interface ActionDetailsProps {
   dateTime?: string;
   now?: string;
   relativeDate?: boolean;
-  labels?: FormatDateLabels;
+  labels: FormatDateLabels;
 }
 
 export const ActionDetails = ({ children, dateTime, now, relativeDate, labels }: ActionDetailsProps) => {
diff --git a/components/Utils/src/formatDate.tsx b/components/Utils/src/formatDate.tsx
index 959efa7e5a..857e57ba70 100644
--- a/components/Utils/src/formatDate.tsx
+++ b/components/Utils/src/formatDate.tsx
@@ -12,7 +12,7 @@ interface Props {
   dateTime: string;
   now?: string;
   locale?: Locale;
-  labels?: FormatDateLabels;
+  labels: FormatDateLabels;
   relative?: boolean;
 }
 
@@ -20,7 +20,7 @@ export const formatDate = ({
   dateTime,
   now = new Date().toISOString(),
   locale = nl,
-  labels = {},
+  labels,
   relative,
 }: Props): [string | null, boolean] => {
   const date = new Date(dateTime);

From e806c6d848312bf082f3bba2cd3b09b3281e7a61 Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Tue, 7 Nov 2023 11:09:18 +0100
Subject: [PATCH 18/18] fix: use the differenceInCalendarDays, so time is not
 included in the calculation

---
 components/Utils/src/formatDate.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Utils/src/formatDate.tsx b/components/Utils/src/formatDate.tsx
index 857e57ba70..4531ed4759 100644
--- a/components/Utils/src/formatDate.tsx
+++ b/components/Utils/src/formatDate.tsx
@@ -1,4 +1,4 @@
-import { format, differenceInDays } from 'date-fns';
+import { format, differenceInCalendarDays } from 'date-fns';
 import { nl } from 'date-fns/locale';
 
 export interface FormatDateLabels {
@@ -24,7 +24,7 @@ export const formatDate = ({
   relative,
 }: Props): [string | null, boolean] => {
   const date = new Date(dateTime);
-  const daysDifference = differenceInDays(date, new Date(now));
+  const daysDifference = differenceInCalendarDays(date, new Date(now));
 
   if (relative) {
     if (daysDifference < 0) {