feat: finished first version of refactored contact timelines, convert…

…ed react story to tsx, added component to casedetail template

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

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

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

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:*",

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>

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