Feature/contact timeline desktop

.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/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, { ContactTimelineProps } from '../../../components/ContactTimeline/src';
 import { Action } from '../../../components/Action/src';
 import { BadgeCounter, ButtonLink } from '@utrecht/component-library-react';
 
@@ -27,6 +28,7 @@ import {
   newsletterData,
   contactData,
   linkData,
+  dateFormatLabels,
 } from './util';
 
 import './template-story.scss';
@@ -84,6 +86,71 @@ const progressStepsData: StatusProps = {
   ],
 };
 
+const contactTimelineData: ContactTimelineProps = {
+  labels: { today: 'vandaag', yesterday: 'gisteren' },
+  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: new Date(Date.now() - 864e5).toISOString(),
+      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';
 
@@ -153,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
           >
@@ -162,10 +230,13 @@ 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}
             now={taskNow}
+            labels={dateFormatLabels}
             actions={<ButtonLink href="#example">Actie</ButtonLink>}
             relativeDate
           >

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

.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.',

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

components/Action/src/Action.tsx

@@ -1,13 +1,15 @@
 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;
   link: string;
   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) => {

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

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

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>

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

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>