From 2f3833488a7d91bf08a9cbd9391787c60e7d093f Mon Sep 17 00:00:00 2001
From: YourivHDenHaag <youri.vanheumen@denhaag.nl>
Date: Tue, 24 Oct 2023 15:24:44 +0200
Subject: [PATCH] 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/CaseDetail-page.stories.mdx     |  76 +++++
 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, 556 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/CaseDetail-page.stories.mdx b/.storybook/stories/templates/CaseDetail-page.stories.mdx
index e6d377a606..ae15a459d3 100644
--- a/.storybook/stories/templates/CaseDetail-page.stories.mdx
+++ b/.storybook/stories/templates/CaseDetail-page.stories.mdx
@@ -27,6 +27,7 @@ import { Sheet, SheetCloseButton, SheetOverlay, SheetContainer } from "../../../
 import IconButton from "../../../components/IconButton/src";
 import { Status } from "../../../components/ProcessSteps/src";
 import { File } from "../../../components/File/src";
+import ContactTimeline from "../../../components/ContactTimeline/src";
 import { Action } from "../../../components/Action/src";
 import { Button } from "../../../components/Button/src";
 import { ButtonLink } from "@utrecht/component-library-react";
@@ -158,6 +159,79 @@ export const progressStepsData = {
   ],
 };
 
+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
+          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: "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",
+    },
+  ],
+};
+
 export const taskDateTime = "2023-09-30T19:47:36.593Z";
 export const taskNow = "2023-09-28T19:47:36.593Z";
 
@@ -262,6 +336,8 @@ export const copyright = "© 2022 Gemeente Den Haag";
             <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 f3d9235213..1e2339d9d7 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 89f286d29b..e515a37942 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