From fef9b68c7dca9c910c488389ad25903ff106294e Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Wed, 27 Sep 2023 21:04:48 +0200
Subject: [PATCH 01/23] feat: copied story to adapt

---
 .../stories/templates/My-Data.stories.tsx     | 98 +++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 .storybook/stories/templates/My-Data.stories.tsx

diff --git a/.storybook/stories/templates/My-Data.stories.tsx b/.storybook/stories/templates/My-Data.stories.tsx
new file mode 100644
index 0000000000..d8ac5bc463
--- /dev/null
+++ b/.storybook/stories/templates/My-Data.stories.tsx
@@ -0,0 +1,98 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Heading2, Paragraph } from '../../../components/Typography/src';
+import { Page, PageHeader, PageFooter } from '../../../components/Page/src';
+import { HeaderLogic, HeaderLogicProps } from '../../../components/Header/src';
+import Footer from '../../../components/Footer/src';
+import ResponsiveContent from '../../../components/ResponsiveContent/src';
+import { Sidenav, SidenavItem, SidenavLink, SidenavList } from '../../../components/Sidenav/src';
+import { ArchiveIcon, FavoriteIcon, GridIcon, UserIcon } from '../../../components/Icons/src';
+import { headerProps, footerLegalData, footerSocialData, newsletterData, contactData } from '../templates/util';
+
+import './story-login.css';
+
+import { List, ListItem, ListItemText, ListItemIcon } from '../../../components/List/src';
+
+const meta = {
+  title: 'Templates',
+  parameters: {
+    chromatic: { viewports: [1768, 1280, 768, 360] },
+  },
+} as Meta<typeof Page>;
+
+export default meta;
+
+const overviewHeaderProps: HeaderLogicProps = {
+  breadcrumbs: {
+    navigationPath: [
+      { label: 'Home', href: 'https://denhaag.nl/' },
+      { label: 'MijnDenHaag' },
+      { label: 'Mijn gegevens' },
+    ],
+  },
+};
+type Story = StoryObj<typeof meta>;
+
+const copyright = '© 2022 Gemeente Den Haag';
+export const OverviewPage: Story = {
+  render: () => (
+    <Page>
+      <PageHeader>
+        <HeaderLogic {...overviewHeaderProps} />
+      </PageHeader>
+      <ResponsiveContent className="denhaag-page-content denhaag-responsive-content--sidebar">
+        <Sidenav>
+          <SidenavList>
+            <SidenavItem>
+              <SidenavLink current={true}>
+                <GridIcon />
+                Overzicht
+              </SidenavLink>
+            </SidenavItem>
+            <SidenavItem>
+              <SidenavLink>
+                <ArchiveIcon />
+                Lopende zaken
+              </SidenavLink>
+            </SidenavItem>
+            <SidenavItem>
+              <SidenavLink>
+                <FavoriteIcon />
+                Thema's
+              </SidenavLink>
+            </SidenavItem>
+            <SidenavItem>
+              <SidenavLink>
+                <UserIcon />
+                Mijn account
+              </SidenavLink>
+            </SidenavItem>
+          </SidenavList>
+        </Sidenav>
+        <main className="denhaag-page-content__main">
+          <Heading2>Mijn gegevens</Heading2>
+          <Paragraph>
+            In MijnDenHaag kunt u zelf u persoonlijke zaken regelen wanneer u het uitkomt. Denk aan zaken zoals het zien
+            wanneer uw aanvraag klaar is of het bijkopen van extra parkeertegoed.
+          </Paragraph>
+          <List>
+            <ListItem>
+              <ListItemText>
+                test<ListItemIcon></ListItemIcon>
+              </ListItemText>
+            </ListItem>
+          </List>
+        </main>
+      </ResponsiveContent>
+      <PageFooter>
+        <Footer
+          newsletterData={newsletterData}
+          contactData={contactData}
+          legalData={footerLegalData}
+          copyrightLabel={copyright}
+          socialData={footerSocialData}
+        />
+      </PageFooter>
+    </Page>
+  ),
+};

From 63b1fa3e776824a5deaff347acde33d970fa97da Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Wed, 27 Sep 2023 21:25:15 +0200
Subject: [PATCH 02/23] feat: made components available on index.tsx

---
 components/List/src/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/List/src/index.tsx b/components/List/src/index.tsx
index b6f1cd5fea..3b4211c998 100644
--- a/components/List/src/index.tsx
+++ b/components/List/src/index.tsx
@@ -5,3 +5,6 @@ export default List;
 export * from './List';
 export * from './ListItem';
 export * from './ListSubheader';
+
+export * from './ListItemIcon';
+export * from './ListItemText';

From 82f421b37e5f4b684e6e68fdaf1a9b3647899623 Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Wed, 27 Sep 2023 21:26:43 +0200
Subject: [PATCH 03/23] fix: made story unique

---
 .storybook/stories/templates/My-Data.stories.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/.storybook/stories/templates/My-Data.stories.tsx b/.storybook/stories/templates/My-Data.stories.tsx
index d8ac5bc463..da2f3413c7 100644
--- a/.storybook/stories/templates/My-Data.stories.tsx
+++ b/.storybook/stories/templates/My-Data.stories.tsx
@@ -22,7 +22,7 @@ const meta = {
 
 export default meta;
 
-const overviewHeaderProps: HeaderLogicProps = {
+const myDataHeaderProps: HeaderLogicProps = {
   breadcrumbs: {
     navigationPath: [
       { label: 'Home', href: 'https://denhaag.nl/' },
@@ -34,11 +34,11 @@ const overviewHeaderProps: HeaderLogicProps = {
 type Story = StoryObj<typeof meta>;
 
 const copyright = '© 2022 Gemeente Den Haag';
-export const OverviewPage: Story = {
+export const myDataPage: Story = {
   render: () => (
     <Page>
       <PageHeader>
-        <HeaderLogic {...overviewHeaderProps} />
+        <HeaderLogic {...myDataHeaderProps} />
       </PageHeader>
       <ResponsiveContent className="denhaag-page-content denhaag-responsive-content--sidebar">
         <Sidenav>
@@ -76,9 +76,9 @@ export const OverviewPage: Story = {
             wanneer uw aanvraag klaar is of het bijkopen van extra parkeertegoed.
           </Paragraph>
           <List>
-            <ListItem>
+            <ListItem primaryText="test">
               <ListItemText>
-                test<ListItemIcon></ListItemIcon>
+                <ListItemIcon></ListItemIcon>
               </ListItemText>
             </ListItem>
           </List>

From 1f3797d9d0a62c077e944a18cc0c082903576dd3 Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Wed, 27 Sep 2023 21:30:28 +0200
Subject: [PATCH 04/23] fix: deleted unused import headerprops

---
 .storybook/stories/templates/My-Data.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.storybook/stories/templates/My-Data.stories.tsx b/.storybook/stories/templates/My-Data.stories.tsx
index da2f3413c7..f1c78a2d17 100644
--- a/.storybook/stories/templates/My-Data.stories.tsx
+++ b/.storybook/stories/templates/My-Data.stories.tsx
@@ -7,7 +7,7 @@ import Footer from '../../../components/Footer/src';
 import ResponsiveContent from '../../../components/ResponsiveContent/src';
 import { Sidenav, SidenavItem, SidenavLink, SidenavList } from '../../../components/Sidenav/src';
 import { ArchiveIcon, FavoriteIcon, GridIcon, UserIcon } from '../../../components/Icons/src';
-import { headerProps, footerLegalData, footerSocialData, newsletterData, contactData } from '../templates/util';
+import { footerLegalData, footerSocialData, newsletterData, contactData } from '../templates/util';
 
 import './story-login.css';
 

From f110878a977bf62866f36820cdd64680da8928f8 Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Thu, 28 Sep 2023 13:20:52 +0200
Subject: [PATCH 05/23] style: commented out nonused List for testing

---
 .storybook/stories/templates/My-Data.stories.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.storybook/stories/templates/My-Data.stories.tsx b/.storybook/stories/templates/My-Data.stories.tsx
index f1c78a2d17..190b347e1e 100644
--- a/.storybook/stories/templates/My-Data.stories.tsx
+++ b/.storybook/stories/templates/My-Data.stories.tsx
@@ -11,7 +11,7 @@ import { footerLegalData, footerSocialData, newsletterData, contactData } from '
 
 import './story-login.css';
 
-import { List, ListItem, ListItemText, ListItemIcon } from '../../../components/List/src';
+// import { List, ListItem, ListItemText, ListItemIcon } from '../../../components/List/src';
 
 const meta = {
   title: 'Templates',
@@ -75,12 +75,13 @@ export const myDataPage: Story = {
             In MijnDenHaag kunt u zelf u persoonlijke zaken regelen wanneer u het uitkomt. Denk aan zaken zoals het zien
             wanneer uw aanvraag klaar is of het bijkopen van extra parkeertegoed.
           </Paragraph>
-          <List>
+          {/* <List>
             <ListItem primaryText="test">
               <ListItemText>
                 <ListItemIcon></ListItemIcon>
               </ListItemText>
             </ListItem>
+          </List> */}
           </List>
         </main>
       </ResponsiveContent>

From cfadd90280792da2235982c87309be107ad69cdf Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Thu, 28 Sep 2023 13:24:24 +0200
Subject: [PATCH 06/23] feat: imported components missing for Table List

---
 .storybook/stories/templates/My-Data.stories.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/.storybook/stories/templates/My-Data.stories.tsx b/.storybook/stories/templates/My-Data.stories.tsx
index 190b347e1e..97bde607c2 100644
--- a/.storybook/stories/templates/My-Data.stories.tsx
+++ b/.storybook/stories/templates/My-Data.stories.tsx
@@ -12,6 +12,20 @@ import { footerLegalData, footerSocialData, newsletterData, contactData } from '
 import './story-login.css';
 
 // import { List, ListItem, ListItemText, ListItemIcon } from '../../../components/List/src';
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableHeader,
+} from '../../../components/Table/src';
+
+import { EditIcon } from '../../../components/Icons/src';
+import { List, ListSubheader, ListItem } from '../../../components/List/src';
+import { ArrowRightIcon } from '../../../components/Icons/src';
+import { Link } from '../../../components/Link/src';
 
 const meta = {
   title: 'Templates',

From 43490ec7422861c8e691590c058bafc8ab5ce5da Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Thu, 28 Sep 2023 13:27:08 +0200
Subject: [PATCH 07/23] feat: added Table with data

---
 .../stories/templates/My-Data.stories.tsx     | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)

diff --git a/.storybook/stories/templates/My-Data.stories.tsx b/.storybook/stories/templates/My-Data.stories.tsx
index 97bde607c2..6a84e359de 100644
--- a/.storybook/stories/templates/My-Data.stories.tsx
+++ b/.storybook/stories/templates/My-Data.stories.tsx
@@ -96,6 +96,114 @@ export const myDataPage: Story = {
               </ListItemText>
             </ListItem>
           </List> */}
+          <Table>
+            <TableCaption>Contact</TableCaption>
+            <TableHead>
+              <TableRow>
+                <TableCell />
+                <TableHeader className="heman">He-Man</TableHeader>
+                <TableHeader className="skeletor">Skeletor</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <TableRow>
+                <TableHeader scope="row">E-mailadres</TableHeader>
+                <TableCell>anneklap@hotmail.com</TableCell>
+                <TableCell>
+                  <EditIcon></EditIcon> Aanpassen
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHeader scope="row">Telefoonnummer</TableHeader>
+                <TableCell>-</TableCell>
+                <TableCell>
+                  {' '}
+                  <EditIcon></EditIcon> Aanpassen
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+          <Table>
+            <TableCaption>Persoonsgegevens</TableCaption>
+            <TableHead>
+              <TableRow>
+                <TableCell />
+                <TableHeader className="heman">He-Man</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <TableRow>
+                <TableHeader scope="row">Voornamen</TableHeader>
+                <TableCell>Anne</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHeader scope="row">Geslachtsnaam</TableHeader>
+                <TableCell>Klap</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHeader scope="row">Geslacht</TableHeader>
+                <TableCell>Vrouw</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHeader scope="row">Burgerservicenummer</TableHeader>
+                <TableCell>203674581</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHeader scope="row">Geboortedatum</TableHeader>
+                <TableCell>05-12-1988</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHeader scope="row">Nationaliteit</TableHeader>
+                <TableCell>Nederlandse</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+          <Table>
+            <TableCaption>Adres</TableCaption>
+            <TableHead>
+              <TableRow>
+                <TableCell />
+                <TableHeader className="heman">He-Man</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <TableRow>
+                <TableHeader scope="row">Straat</TableHeader>
+                <TableCell>Balistraat 44</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHeader scope="row">Postcode en plaats</TableHeader>
+                <TableCell>2538 JH's-Gravenhage</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHeader scope="row">Aanvangsdatum</TableHeader>
+                <TableCell>03-04-2002</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHeader scope="row">Aantal inwoners op woonadres</TableHeader>
+                <TableCell>3</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+          <Paragraph>
+            Staat er een ander aantal inwoners op uw adres ingeschreven dan u verwacht? Dan kunt u een
+            <Link href="#"> adresonderzoek aanvragen </Link> bij de gemeente. U kunt een adresonderzoek ook intrekken.
+          </Paragraph>
+          <Table>
+            <TableCaption>Inschrijving</TableCaption>
+            <TableHead>
+              <TableRow>
+                <TableCell />
+                <TableHeader className="heman">He-Man</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <TableRow>
+                <TableHeader scope="row">Indicatie geheim</TableHeader>
+                <TableCell>Nee</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
           </List>
         </main>
       </ResponsiveContent>

From 43f5e2bfa9307395ea1da9b0d34f3597e29db48a Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Thu, 28 Sep 2023 13:27:59 +0200
Subject: [PATCH 08/23] feat: added List with data

---
 .../stories/templates/My-Data.stories.tsx     | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/.storybook/stories/templates/My-Data.stories.tsx b/.storybook/stories/templates/My-Data.stories.tsx
index 6a84e359de..84f24379f2 100644
--- a/.storybook/stories/templates/My-Data.stories.tsx
+++ b/.storybook/stories/templates/My-Data.stories.tsx
@@ -204,6 +204,44 @@ export const myDataPage: Story = {
               </TableRow>
             </TableBody>
           </Table>
+
+          <List subheader={<ListSubheader>Inschrijving</ListSubheader>}>
+            <Link href="#">
+              <ListItem
+                primaryText="Meer informatie over adresonderzoek"
+                leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
+              />
+            </Link>
+            <Link href="#">
+              <ListItem
+                primaryText="Gegevens in BRP laten corrigeren, wijzigen of verwijderen"
+                leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
+              />
+            </Link>
+            <Link href="#">
+              <ListItem
+                primaryText="Verhuizing doorgeven"
+                leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
+              />
+            </Link>
+            <Link href="#">
+              <ListItem
+                primaryText="Verandering naamgebruik aanvragen"
+                leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
+              />
+            </Link>
+            <Link href="#">
+              <ListItem
+                primaryText="Vermelding geslacht wijzigen (transgenders)"
+                leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
+              />
+            </Link>
+            <Link href="#">
+              <ListItem
+                primaryText="Geheimhouding persoonsgegevens aanvragen"
+                leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
+              />
+            </Link>
           </List>
         </main>
       </ResponsiveContent>

From f866c4e9be0376d0388c306efa5da188781b5ca2 Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Thu, 28 Sep 2023 15:45:49 +0200
Subject: [PATCH 09/23] feat: added table and imports

---
 .../templates/02-Overview-page.stories.tsx    | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/.storybook/stories/templates/02-Overview-page.stories.tsx b/.storybook/stories/templates/02-Overview-page.stories.tsx
index 943a9a917e..bba2ae183d 100644
--- a/.storybook/stories/templates/02-Overview-page.stories.tsx
+++ b/.storybook/stories/templates/02-Overview-page.stories.tsx
@@ -11,6 +11,18 @@ import { copyright, headerProps, footerLegalData, footerSocialData, newsletterDa
 
 import './template-story.scss';
 
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableHeader,
+} from '../../../components/Table/src';
+
+import { ArrowRightIcon } from '../../../components/Icons/src';
+
 const meta = {
   title: 'Templates/OverviewPage',
   parameters: {
@@ -69,6 +81,33 @@ export const OverviewPage: Story = {
             In MijnDenHaag kunt u zelf u persoonlijke zaken regelen wanneer u het uitkomt. Denk aan zaken zoals het zien
             wanneer uw aanvraag klaar is of het bijkopen van extra parkeertegoed.
           </Paragraph>
+          <Table>
+            <TableCaption>Wat ik moet regelen</TableCaption>
+            <TableHead>
+              <TableRow>
+                <TableCell />
+                <TableHeader className="heman">He-Man</TableHeader>
+
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <TableRow>
+                <TableHeader scope="row">Geef informatie voor uw aanvraag subsidie geluidisolatie</TableHeader>
+                <TableCell>nog 2 dagen<ArrowRightIcon color="inherit"></ArrowRightIcon></TableCell>
+
+              </TableRow>
+              <TableRow>
+                <TableHeader scope="row">Betaal uw parkeerbon van € 74,90 voor parkeren bij Valeriusplein </TableHeader>
+                <TableCell>vóór 1 maart 2023</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHeader scope="row">Verleng uw identiteitskaart</TableHeader>
+                <TableCell>vóór 1 maart 2023</TableCell>
+
+              </TableRow>
+            </TableBody>
+          </Table>
+          <Table></Table>
         </main>
       </ResponsiveContent>
       <PageFooter>

From be9d694c1c03d3f9791fae1010258b03f3984dfe Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Thu, 28 Sep 2023 15:46:25 +0200
Subject: [PATCH 10/23] fix: replaced invalid story-login file

---
 .storybook/stories/templates/My-Data.stories.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.storybook/stories/templates/My-Data.stories.tsx b/.storybook/stories/templates/My-Data.stories.tsx
index 84f24379f2..d5235684ba 100644
--- a/.storybook/stories/templates/My-Data.stories.tsx
+++ b/.storybook/stories/templates/My-Data.stories.tsx
@@ -9,7 +9,8 @@ import { Sidenav, SidenavItem, SidenavLink, SidenavList } from '../../../compone
 import { ArchiveIcon, FavoriteIcon, GridIcon, UserIcon } from '../../../components/Icons/src';
 import { footerLegalData, footerSocialData, newsletterData, contactData } from '../templates/util';
 
-import './story-login.css';
+// import './story-login.css'; <-vroegere oplossing niet meer valid
+import './template-story.scss';
 
 // import { List, ListItem, ListItemText, ListItemIcon } from '../../../components/List/src';
 import {

From 5af807708bcb2459f66d8f6123f26fe02a5c4ed4 Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Thu, 28 Sep 2023 16:32:38 +0200
Subject: [PATCH 11/23] fix: added table data and icon

---
 .../stories/templates/02-Overview-page.stories.tsx     | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/.storybook/stories/templates/02-Overview-page.stories.tsx b/.storybook/stories/templates/02-Overview-page.stories.tsx
index bba2ae183d..a1aef66c9f 100644
--- a/.storybook/stories/templates/02-Overview-page.stories.tsx
+++ b/.storybook/stories/templates/02-Overview-page.stories.tsx
@@ -21,7 +21,7 @@ import {
   TableHeader,
 } from '../../../components/Table/src';
 
-import { ArrowRightIcon } from '../../../components/Icons/src';
+import { ArrowRightIcon, AlertTriangleFilledIcon } from '../../../components/Icons/src';
 
 const meta = {
   title: 'Templates/OverviewPage',
@@ -93,16 +93,18 @@ export const OverviewPage: Story = {
             <TableBody>
               <TableRow>
                 <TableHeader scope="row">Geef informatie voor uw aanvraag subsidie geluidisolatie</TableHeader>
-                <TableCell>nog 2 dagen<ArrowRightIcon color="inherit"></ArrowRightIcon></TableCell>
+                <TableCell>
+                   {/* <AlertTriangleFilledIcon color="inherit"></AlertTriangleFilledIcon> */}
+                   nog 2 dagen <ArrowRightIcon color="inherit"></ArrowRightIcon></TableCell>
 
               </TableRow>
               <TableRow>
                 <TableHeader scope="row">Betaal uw parkeerbon van € 74,90 voor parkeren bij Valeriusplein </TableHeader>
-                <TableCell>vóór 1 maart 2023</TableCell>
+                <TableCell>vóór 1 maart 2023<ArrowRightIcon color="inherit"></ArrowRightIcon></TableCell>
               </TableRow>
               <TableRow>
                 <TableHeader scope="row">Verleng uw identiteitskaart</TableHeader>
-                <TableCell>vóór 1 maart 2023</TableCell>
+                <TableCell><ArrowRightIcon color="inherit"></ArrowRightIcon></TableCell>
 
               </TableRow>
             </TableBody>

From ddee49bae29da7044e41dd79d26e193141601325 Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Thu, 28 Sep 2023 17:46:21 +0200
Subject: [PATCH 12/23] fix: added CaseCards and Icons

---
 .../templates/02-Overview-page.stories.tsx    | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/.storybook/stories/templates/02-Overview-page.stories.tsx b/.storybook/stories/templates/02-Overview-page.stories.tsx
index a1aef66c9f..031ff8f62a 100644
--- a/.storybook/stories/templates/02-Overview-page.stories.tsx
+++ b/.storybook/stories/templates/02-Overview-page.stories.tsx
@@ -21,7 +21,11 @@ import {
   TableHeader,
 } from '../../../components/Table/src';
 
-import { ArrowRightIcon, AlertTriangleFilledIcon } from '../../../components/Icons/src';
+import { ArrowRightIcon, CircleWarningIcon } from '../../../components/Icons/src';
+import { CaseCard } from '../../../components/Card/src';
+
+
+
 
 const meta = {
   title: 'Templates/OverviewPage',
@@ -94,8 +98,8 @@ export const OverviewPage: Story = {
               <TableRow>
                 <TableHeader scope="row">Geef informatie voor uw aanvraag subsidie geluidisolatie</TableHeader>
                 <TableCell>
-                   {/* <AlertTriangleFilledIcon color="inherit"></AlertTriangleFilledIcon> */}
-                   nog 2 dagen <ArrowRightIcon color="inherit"></ArrowRightIcon></TableCell>
+                   <CircleWarningIcon color="inherit"></CircleWarningIcon>
+                   nog 2 dagen!! <ArrowRightIcon color="inherit"></ArrowRightIcon></TableCell>
 
               </TableRow>
               <TableRow>
@@ -109,7 +113,18 @@ export const OverviewPage: Story = {
               </TableRow>
             </TableBody>
           </Table>
-          <Table></Table>
+          <CaseCard
+  date={new Date("2020-10-17T00:00:00.000Z")}
+  href="#"
+  title="Aanvraag subsidie geluidsisolatie"
+
+/>
+<CaseCard
+  date={new Date("2020-08-01T00:00:00.000Z")}
+  href="#"
+  title="Aanvraag Ooievaarspas"
+/>
+
         </main>
       </ResponsiveContent>
       <PageFooter>

From 7bfdb244503e2914601449b2108117104e246a91 Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Fri, 29 Sep 2023 10:36:50 +0200
Subject: [PATCH 13/23] fix: added Icons to side navigation

---
 .../templates/02-Overview-page.stories.tsx    | 34 ++++++++++++++-----
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/.storybook/stories/templates/02-Overview-page.stories.tsx b/.storybook/stories/templates/02-Overview-page.stories.tsx
index 031ff8f62a..505be20aaa 100644
--- a/.storybook/stories/templates/02-Overview-page.stories.tsx
+++ b/.storybook/stories/templates/02-Overview-page.stories.tsx
@@ -6,7 +6,7 @@ import { HeaderLogic, HeaderLogicProps } from '../../../components/Header/src';
 import Footer from '../../../components/Footer/src';
 import ResponsiveContent from '../../../components/ResponsiveContent/src';
 import { Sidenav, SidenavItem, SidenavLink, SidenavList } from '../../../components/Sidenav/src';
-import { ArchiveIcon, FavoriteIcon, GridIcon, UserIcon } from '../../../components/Icons/src';
+import { ArchiveIcon, FavoriteIcon, GridIcon, InboxIcon, UserIcon, ArrowRightIcon, HouseIcon, ParkingIcon, AlertTriangleIcon } from '../../../components/Icons/src';
 import { copyright, headerProps, footerLegalData, footerSocialData, newsletterData, contactData } from './util';
 
 import './template-story.scss';
@@ -21,7 +21,6 @@ import {
   TableHeader,
 } from '../../../components/Table/src';
 
-import { ArrowRightIcon, CircleWarningIcon } from '../../../components/Icons/src';
 import { CaseCard } from '../../../components/Card/src';
 
 
@@ -55,26 +54,44 @@ export const OverviewPage: Story = {
           <SidenavList>
             <SidenavItem>
               <SidenavLink current={true}>
-                <GridIcon />
+                <InboxIcon />
                 Overzicht
               </SidenavLink>
             </SidenavItem>
             <SidenavItem>
               <SidenavLink>
                 <ArchiveIcon />
-                Lopende zaken
+                Mijn lopende zaken
+              </SidenavLink>
+            </SidenavItem>
+            <SidenavItem>
+              <SidenavLink >
+                <GridIcon />
+                Belastingzaken
               </SidenavLink>
             </SidenavItem>
             <SidenavItem>
               <SidenavLink>
-                <FavoriteIcon />
-                Thema's
+                <HouseIcon />
+                WOZ
               </SidenavLink>
             </SidenavItem>
             <SidenavItem>
               <SidenavLink>
+                <ParkingIcon />
+                Parkeren
+              </SidenavLink>
+            </SidenavItem>
+            <SidenavItem>
+              <SidenavLink >
+                <GridIcon />
+                Erfpacht
+              </SidenavLink>
+            </SidenavItem>
+            <SidenavItem>
+              <SidenavLink >
                 <UserIcon />
-                Mijn account
+                Mijn gegevens
               </SidenavLink>
             </SidenavItem>
           </SidenavList>
@@ -98,7 +115,8 @@ export const OverviewPage: Story = {
               <TableRow>
                 <TableHeader scope="row">Geef informatie voor uw aanvraag subsidie geluidisolatie</TableHeader>
                 <TableCell>
-                   <CircleWarningIcon color="inherit"></CircleWarningIcon>
+                   <AlertTriangleIcon></AlertTriangleIcon>
+
                    nog 2 dagen!! <ArrowRightIcon color="inherit"></ArrowRightIcon></TableCell>
 
               </TableRow>

From 80aca32634c1d31a7a3c3947b7ca12ac20d615ef Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Fri, 29 Sep 2023 10:52:33 +0200
Subject: [PATCH 14/23] fix: update side navigation My-Data

---
 .../stories/templates/My-Data.stories.tsx     | 42 +++++++++++++++----
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/.storybook/stories/templates/My-Data.stories.tsx b/.storybook/stories/templates/My-Data.stories.tsx
index d5235684ba..0e1c7e694a 100644
--- a/.storybook/stories/templates/My-Data.stories.tsx
+++ b/.storybook/stories/templates/My-Data.stories.tsx
@@ -6,7 +6,15 @@ import { HeaderLogic, HeaderLogicProps } from '../../../components/Header/src';
 import Footer from '../../../components/Footer/src';
 import ResponsiveContent from '../../../components/ResponsiveContent/src';
 import { Sidenav, SidenavItem, SidenavLink, SidenavList } from '../../../components/Sidenav/src';
-import { ArchiveIcon, FavoriteIcon, GridIcon, UserIcon } from '../../../components/Icons/src';
+import {
+  ArchiveIcon,
+  GridIcon,
+  InboxIcon,
+  UserIcon,
+  ArrowRightIcon,
+  HouseIcon,
+  ParkingIcon,
+} from '../../../components/Icons/src';
 import { footerLegalData, footerSocialData, newsletterData, contactData } from '../templates/util';
 
 // import './story-login.css'; <-vroegere oplossing niet meer valid
@@ -25,7 +33,7 @@ import {
 
 import { EditIcon } from '../../../components/Icons/src';
 import { List, ListSubheader, ListItem } from '../../../components/List/src';
-import { ArrowRightIcon } from '../../../components/Icons/src';
+
 import { Link } from '../../../components/Link/src';
 
 const meta = {
@@ -60,26 +68,44 @@ export const myDataPage: Story = {
           <SidenavList>
             <SidenavItem>
               <SidenavLink current={true}>
-                <GridIcon />
-                Overzicht
+                <InboxIcon />
+                Label
               </SidenavLink>
             </SidenavItem>
             <SidenavItem>
               <SidenavLink>
                 <ArchiveIcon />
-                Lopende zaken
+                Mijn lopende zaken
               </SidenavLink>
             </SidenavItem>
             <SidenavItem>
               <SidenavLink>
-                <FavoriteIcon />
-                Thema's
+                <GridIcon />
+                Belastingzaken
+              </SidenavLink>
+            </SidenavItem>
+            <SidenavItem>
+              <SidenavLink>
+                <HouseIcon />
+                WOZ
+              </SidenavLink>
+            </SidenavItem>
+            <SidenavItem>
+              <SidenavLink>
+                <ParkingIcon />
+                Parkeren
+              </SidenavLink>
+            </SidenavItem>
+            <SidenavItem>
+              <SidenavLink>
+                <GridIcon />
+                Erfpacht
               </SidenavLink>
             </SidenavItem>
             <SidenavItem>
               <SidenavLink>
                 <UserIcon />
-                Mijn account
+                Mijn gegevens
               </SidenavLink>
             </SidenavItem>
           </SidenavList>

From cbf1666231bda69252d94f41498d9d1c202e5e9e Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Fri, 29 Sep 2023 10:57:39 +0200
Subject: [PATCH 15/23] fix: update icon import list

---
 .storybook/stories/templates/02-Overview-page.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.storybook/stories/templates/02-Overview-page.stories.tsx b/.storybook/stories/templates/02-Overview-page.stories.tsx
index 505be20aaa..2463b937d0 100644
--- a/.storybook/stories/templates/02-Overview-page.stories.tsx
+++ b/.storybook/stories/templates/02-Overview-page.stories.tsx
@@ -6,7 +6,7 @@ import { HeaderLogic, HeaderLogicProps } from '../../../components/Header/src';
 import Footer from '../../../components/Footer/src';
 import ResponsiveContent from '../../../components/ResponsiveContent/src';
 import { Sidenav, SidenavItem, SidenavLink, SidenavList } from '../../../components/Sidenav/src';
-import { ArchiveIcon, FavoriteIcon, GridIcon, InboxIcon, UserIcon, ArrowRightIcon, HouseIcon, ParkingIcon, AlertTriangleIcon } from '../../../components/Icons/src';
+import { ArchiveIcon, GridIcon, InboxIcon, UserIcon, ArrowRightIcon, HouseIcon, ParkingIcon, AlertTriangleIcon } from '../../../components/Icons/src';
 import { copyright, headerProps, footerLegalData, footerSocialData, newsletterData, contactData } from './util';
 
 import './template-story.scss';

From 401f25f736731c34f768d90f6ee4842f6783d2e8 Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Fri, 29 Sep 2023 10:58:41 +0200
Subject: [PATCH 16/23] fix: added breadcrumb link MijnDenHaag

---
 .storybook/stories/templates/My-Data.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.storybook/stories/templates/My-Data.stories.tsx b/.storybook/stories/templates/My-Data.stories.tsx
index 0e1c7e694a..bd6d875f82 100644
--- a/.storybook/stories/templates/My-Data.stories.tsx
+++ b/.storybook/stories/templates/My-Data.stories.tsx
@@ -49,7 +49,7 @@ const myDataHeaderProps: HeaderLogicProps = {
   breadcrumbs: {
     navigationPath: [
       { label: 'Home', href: 'https://denhaag.nl/' },
-      { label: 'MijnDenHaag' },
+      { label: 'MijnDenHaag', href: 'https://denhaag.nl/' },
       { label: 'Mijn gegevens' },
     ],
   },

From e4b9e9a577cbc967b7036b526e87798afb6c4b45 Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Fri, 29 Sep 2023 11:04:30 +0200
Subject: [PATCH 17/23] fix: deleted Paragraph

---
 .storybook/stories/templates/My-Data.stories.tsx | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/.storybook/stories/templates/My-Data.stories.tsx b/.storybook/stories/templates/My-Data.stories.tsx
index bd6d875f82..80c832588c 100644
--- a/.storybook/stories/templates/My-Data.stories.tsx
+++ b/.storybook/stories/templates/My-Data.stories.tsx
@@ -112,17 +112,7 @@ export const myDataPage: Story = {
         </Sidenav>
         <main className="denhaag-page-content__main">
           <Heading2>Mijn gegevens</Heading2>
-          <Paragraph>
-            In MijnDenHaag kunt u zelf u persoonlijke zaken regelen wanneer u het uitkomt. Denk aan zaken zoals het zien
-            wanneer uw aanvraag klaar is of het bijkopen van extra parkeertegoed.
-          </Paragraph>
-          {/* <List>
-            <ListItem primaryText="test">
-              <ListItemText>
-                <ListItemIcon></ListItemIcon>
-              </ListItemText>
-            </ListItem>
-          </List> */}
+
           <Table>
             <TableCaption>Contact</TableCaption>
             <TableHead>

From 79db4864924cc41ac5cbd285e0da30273b45ec14 Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Fri, 29 Sep 2023 11:04:58 +0200
Subject: [PATCH 18/23] fix: correction List data

---
 .storybook/stories/templates/My-Data.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.storybook/stories/templates/My-Data.stories.tsx b/.storybook/stories/templates/My-Data.stories.tsx
index 80c832588c..cb468609b2 100644
--- a/.storybook/stories/templates/My-Data.stories.tsx
+++ b/.storybook/stories/templates/My-Data.stories.tsx
@@ -222,7 +222,7 @@ export const myDataPage: Story = {
             </TableBody>
           </Table>
 
-          <List subheader={<ListSubheader>Inschrijving</ListSubheader>}>
+          <List subheader={<ListSubheader>Wijzigingen en aanvragen BRP</ListSubheader>}>
             <Link href="#">
               <ListItem
                 primaryText="Meer informatie over adresonderzoek"

From dc0319b960252bec0610b509fed0f3d7171a50c9 Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Fri, 29 Sep 2023 12:00:43 +0200
Subject: [PATCH 19/23] fix: commented out TableHeads

---
 .../templates/02-Overview-page.stories.tsx       |  3 +--
 .storybook/stories/templates/My-Data.stories.tsx | 16 ++++++++--------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/.storybook/stories/templates/02-Overview-page.stories.tsx b/.storybook/stories/templates/02-Overview-page.stories.tsx
index 2463b937d0..29a741d783 100644
--- a/.storybook/stories/templates/02-Overview-page.stories.tsx
+++ b/.storybook/stories/templates/02-Overview-page.stories.tsx
@@ -99,8 +99,7 @@ export const OverviewPage: Story = {
         <main className="denhaag-page-content__main">
           <Heading2>Hallo, Anne Klap!</Heading2>
           <Paragraph>
-            In MijnDenHaag kunt u zelf u persoonlijke zaken regelen wanneer u het uitkomt. Denk aan zaken zoals het zien
-            wanneer uw aanvraag klaar is of het bijkopen van extra parkeertegoed.
+In MijnDenHaag kunt u zelf uw persoonlijke zaken regelen wanneer het u uitkomt. U kunt bijvoorbeeld uw rekeningen betalen en zien wanneer uw aanvraag klaar is.
           </Paragraph>
           <Table>
             <TableCaption>Wat ik moet regelen</TableCaption>
diff --git a/.storybook/stories/templates/My-Data.stories.tsx b/.storybook/stories/templates/My-Data.stories.tsx
index cb468609b2..7e63afa933 100644
--- a/.storybook/stories/templates/My-Data.stories.tsx
+++ b/.storybook/stories/templates/My-Data.stories.tsx
@@ -115,13 +115,13 @@ export const myDataPage: Story = {
 
           <Table>
             <TableCaption>Contact</TableCaption>
-            <TableHead>
+            {/* <TableHead>
               <TableRow>
                 <TableCell />
                 <TableHeader className="heman">He-Man</TableHeader>
                 <TableHeader className="skeletor">Skeletor</TableHeader>
               </TableRow>
-            </TableHead>
+            </TableHead> */}
             <TableBody>
               <TableRow>
                 <TableHeader scope="row">E-mailadres</TableHeader>
@@ -142,12 +142,12 @@ export const myDataPage: Story = {
           </Table>
           <Table>
             <TableCaption>Persoonsgegevens</TableCaption>
-            <TableHead>
+            {/* <TableHead>
               <TableRow>
                 <TableCell />
                 <TableHeader className="heman">He-Man</TableHeader>
               </TableRow>
-            </TableHead>
+            </TableHead> */}
             <TableBody>
               <TableRow>
                 <TableHeader scope="row">Voornamen</TableHeader>
@@ -177,12 +177,12 @@ export const myDataPage: Story = {
           </Table>
           <Table>
             <TableCaption>Adres</TableCaption>
-            <TableHead>
+            {/* <TableHead>
               <TableRow>
                 <TableCell />
                 <TableHeader className="heman">He-Man</TableHeader>
               </TableRow>
-            </TableHead>
+            </TableHead> */}
             <TableBody>
               <TableRow>
                 <TableHeader scope="row">Straat</TableHeader>
@@ -208,12 +208,12 @@ export const myDataPage: Story = {
           </Paragraph>
           <Table>
             <TableCaption>Inschrijving</TableCaption>
-            <TableHead>
+            {/* <TableHead>
               <TableRow>
                 <TableCell />
                 <TableHeader className="heman">He-Man</TableHeader>
               </TableRow>
-            </TableHead>
+            </TableHead> */}
             <TableBody>
               <TableRow>
                 <TableHeader scope="row">Indicatie geheim</TableHeader>

From 9a1b7795993bd705d466a9b935f46dc918aa0b5d Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Fri, 29 Sep 2023 16:00:48 +0200
Subject: [PATCH 20/23] fix: added Actions

---
 .../templates/02-Overview-page.stories.tsx    | 101 +++++++++++-------
 1 file changed, 63 insertions(+), 38 deletions(-)

diff --git a/.storybook/stories/templates/02-Overview-page.stories.tsx b/.storybook/stories/templates/02-Overview-page.stories.tsx
index 29a741d783..bb0614f806 100644
--- a/.storybook/stories/templates/02-Overview-page.stories.tsx
+++ b/.storybook/stories/templates/02-Overview-page.stories.tsx
@@ -1,30 +1,39 @@
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { Heading2, Paragraph } from '../../../components/Typography/src';
+import { Heading2, Heading3, Paragraph } from '../../../components/Typography/src';
 import { Page, PageHeader, PageFooter } from '../../../components/Page/src';
 import { HeaderLogic, HeaderLogicProps } from '../../../components/Header/src';
 import Footer from '../../../components/Footer/src';
 import ResponsiveContent from '../../../components/ResponsiveContent/src';
 import { Sidenav, SidenavItem, SidenavLink, SidenavList } from '../../../components/Sidenav/src';
-import { ArchiveIcon, GridIcon, InboxIcon, UserIcon, ArrowRightIcon, HouseIcon, ParkingIcon, AlertTriangleIcon } from '../../../components/Icons/src';
+import {
+  ArchiveIcon,
+  GridIcon,
+  InboxIcon,
+  UserIcon,
+  ArrowRightIcon,
+  HouseIcon,
+  ParkingIcon,
+  // AlertTriangleIcon,
+} from '../../../components/Icons/src';
 import { copyright, headerProps, footerLegalData, footerSocialData, newsletterData, contactData } from './util';
+import { Link } from '../../../components/Link/src';
 
 import './template-story.scss';
 
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableHeader,
-} from '../../../components/Table/src';
+// import {
+//   Table,
+//   TableBody,
+//   TableCaption,
+//   TableHead,
+//   TableRow,
+//   TableCell,
+//   TableHeader,
+// } from '../../../components/Table/src';
 
 import { CaseCard } from '../../../components/Card/src';
 
-
-
+import { Action } from '../../../components/Action/src';
 
 const meta = {
   title: 'Templates/OverviewPage',
@@ -43,6 +52,8 @@ const overviewHeaderProps: HeaderLogicProps = {
 };
 type Story = StoryObj<typeof meta>;
 
+let deadlineDate = new Date(new Date().setDate(new Date().getDate() + 2));
+
 export const OverviewPage: Story = {
   render: () => (
     <Page>
@@ -65,7 +76,7 @@ export const OverviewPage: Story = {
               </SidenavLink>
             </SidenavItem>
             <SidenavItem>
-              <SidenavLink >
+              <SidenavLink>
                 <GridIcon />
                 Belastingzaken
               </SidenavLink>
@@ -83,13 +94,13 @@ export const OverviewPage: Story = {
               </SidenavLink>
             </SidenavItem>
             <SidenavItem>
-              <SidenavLink >
+              <SidenavLink>
                 <GridIcon />
                 Erfpacht
               </SidenavLink>
             </SidenavItem>
             <SidenavItem>
-              <SidenavLink >
+              <SidenavLink>
                 <UserIcon />
                 Mijn gegevens
               </SidenavLink>
@@ -97,51 +108,65 @@ export const OverviewPage: Story = {
           </SidenavList>
         </Sidenav>
         <main className="denhaag-page-content__main">
-          <Heading2>Hallo, Anne Klap!</Heading2>
+          <Heading2>Hallo Anne</Heading2>
           <Paragraph>
-In MijnDenHaag kunt u zelf uw persoonlijke zaken regelen wanneer het u uitkomt. U kunt bijvoorbeeld uw rekeningen betalen en zien wanneer uw aanvraag klaar is.
+            In MijnDenHaag kunt u zelf uw persoonlijke zaken regelen wanneer het u uitkomt. U kunt bijvoorbeeld uw
+            rekeningen betalen en zien wanneer uw aanvraag klaar is.
           </Paragraph>
+
+          <Heading3>Wat ik moet regelen</Heading3>
+          {/* Must not be a series of Action components, use another component */}
+          <Action link="#example" deadline={deadlineDate} relativeDate>
+            Geef informatie voor uw aanvraag subsidie geluidisolatie
+          </Action>
+
+          <Action link="#example" deadline={deadlineDate}>
+            Betaal uw parkeerbon van € 74,90 voor parkeren bij Valeriusplein
+          </Action>
+
+          <Action link="#example">Verleng uw identiteitskaart</Action>
+
+          {/* <br />
+          <br />
           <Table>
             <TableCaption>Wat ik moet regelen</TableCaption>
             <TableHead>
               <TableRow>
                 <TableCell />
                 <TableHeader className="heman">He-Man</TableHeader>
-
               </TableRow>
             </TableHead>
             <TableBody>
               <TableRow>
                 <TableHeader scope="row">Geef informatie voor uw aanvraag subsidie geluidisolatie</TableHeader>
                 <TableCell>
-                   <AlertTriangleIcon></AlertTriangleIcon>
-
-                   nog 2 dagen!! <ArrowRightIcon color="inherit"></ArrowRightIcon></TableCell>
-
+                  <AlertTriangleIcon></AlertTriangleIcon>
+                  nog 2 dagen!! <ArrowRightIcon color="inherit"></ArrowRightIcon>
+                </TableCell>
               </TableRow>
               <TableRow>
                 <TableHeader scope="row">Betaal uw parkeerbon van € 74,90 voor parkeren bij Valeriusplein </TableHeader>
-                <TableCell>vóór 1 maart 2023<ArrowRightIcon color="inherit"></ArrowRightIcon></TableCell>
+                <TableCell>
+                  vóór 1 maart 2023<ArrowRightIcon color="inherit"></ArrowRightIcon>
+                </TableCell>
               </TableRow>
               <TableRow>
                 <TableHeader scope="row">Verleng uw identiteitskaart</TableHeader>
-                <TableCell><ArrowRightIcon color="inherit"></ArrowRightIcon></TableCell>
-
+                <TableCell>
+                  <ArrowRightIcon color="inherit"></ArrowRightIcon>
+                </TableCell>
               </TableRow>
             </TableBody>
-          </Table>
-          <CaseCard
-  date={new Date("2020-10-17T00:00:00.000Z")}
-  href="#"
-  title="Aanvraag subsidie geluidsisolatie"
-
-/>
-<CaseCard
-  date={new Date("2020-08-01T00:00:00.000Z")}
-  href="#"
-  title="Aanvraag Ooievaarspas"
-/>
+          </Table> */}
+          <Heading3>Mijn lopende zaken</Heading3>
+          <Paragraph>
+            <Link href="#" icon={<ArrowRightIcon />}>
+              Bekijk alle zaken
+            </Link>
+          </Paragraph>
 
+          <CaseCard date={new Date('2020-10-17T00:00:00.000Z')} href="#" title="Aanvraag subsidie geluidsisolatie" />
+          <CaseCard date={new Date('2020-08-01T00:00:00.000Z')} href="#" title="Aanvraag Ooievaarspas" />
         </main>
       </ResponsiveContent>
       <PageFooter>

From e006c273575f91af1985da5871ca0f3ef63537e5 Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Fri, 29 Sep 2023 16:03:13 +0200
Subject: [PATCH 21/23] style: removed unused commented code

---
 .../templates/02-Overview-page.stories.tsx    | 43 -------------------
 1 file changed, 43 deletions(-)

diff --git a/.storybook/stories/templates/02-Overview-page.stories.tsx b/.storybook/stories/templates/02-Overview-page.stories.tsx
index bb0614f806..9be15eb734 100644
--- a/.storybook/stories/templates/02-Overview-page.stories.tsx
+++ b/.storybook/stories/templates/02-Overview-page.stories.tsx
@@ -14,23 +14,12 @@ import {
   ArrowRightIcon,
   HouseIcon,
   ParkingIcon,
-  // AlertTriangleIcon,
 } from '../../../components/Icons/src';
 import { copyright, headerProps, footerLegalData, footerSocialData, newsletterData, contactData } from './util';
 import { Link } from '../../../components/Link/src';
 
 import './template-story.scss';
 
-// import {
-//   Table,
-//   TableBody,
-//   TableCaption,
-//   TableHead,
-//   TableRow,
-//   TableCell,
-//   TableHeader,
-// } from '../../../components/Table/src';
-
 import { CaseCard } from '../../../components/Card/src';
 
 import { Action } from '../../../components/Action/src';
@@ -126,38 +115,6 @@ export const OverviewPage: Story = {
 
           <Action link="#example">Verleng uw identiteitskaart</Action>
 
-          {/* <br />
-          <br />
-          <Table>
-            <TableCaption>Wat ik moet regelen</TableCaption>
-            <TableHead>
-              <TableRow>
-                <TableCell />
-                <TableHeader className="heman">He-Man</TableHeader>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              <TableRow>
-                <TableHeader scope="row">Geef informatie voor uw aanvraag subsidie geluidisolatie</TableHeader>
-                <TableCell>
-                  <AlertTriangleIcon></AlertTriangleIcon>
-                  nog 2 dagen!! <ArrowRightIcon color="inherit"></ArrowRightIcon>
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableHeader scope="row">Betaal uw parkeerbon van € 74,90 voor parkeren bij Valeriusplein </TableHeader>
-                <TableCell>
-                  vóór 1 maart 2023<ArrowRightIcon color="inherit"></ArrowRightIcon>
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableHeader scope="row">Verleng uw identiteitskaart</TableHeader>
-                <TableCell>
-                  <ArrowRightIcon color="inherit"></ArrowRightIcon>
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          </Table> */}
           <Heading3>Mijn lopende zaken</Heading3>
           <Paragraph>
             <Link href="#" icon={<ArrowRightIcon />}>

From 4964a2a847407093e4a75248eb8cd864e9b19e72 Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Fri, 29 Sep 2023 16:26:56 +0200
Subject: [PATCH 22/23] style: added section for Cards styling

---
 .storybook/stories/templates/02-Overview-page.stories.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/.storybook/stories/templates/02-Overview-page.stories.tsx b/.storybook/stories/templates/02-Overview-page.stories.tsx
index 9be15eb734..b30d525d2b 100644
--- a/.storybook/stories/templates/02-Overview-page.stories.tsx
+++ b/.storybook/stories/templates/02-Overview-page.stories.tsx
@@ -121,9 +121,10 @@ export const OverviewPage: Story = {
               Bekijk alle zaken
             </Link>
           </Paragraph>
-
-          <CaseCard date={new Date('2020-10-17T00:00:00.000Z')} href="#" title="Aanvraag subsidie geluidsisolatie" />
-          <CaseCard date={new Date('2020-08-01T00:00:00.000Z')} href="#" title="Aanvraag Ooievaarspas" />
+          <section className="denhaag-card-group">
+            <CaseCard date={new Date('2020-10-17T00:00:00.000Z')} href="#" title="Aanvraag subsidie geluidsisolatie" />
+            <CaseCard date={new Date('2020-08-01T00:00:00.000Z')} href="#" title="Aanvraag Ooievaarspas" />
+          </section>
         </main>
       </ResponsiveContent>
       <PageFooter>

From 6abbfee7a0fe53e5543cf198565112687b009127 Mon Sep 17 00:00:00 2001
From: savitris <11764984+savitris@users.noreply.github.com>
Date: Fri, 29 Sep 2023 17:00:25 +0200
Subject: [PATCH 23/23] fix: added dl and nav links

---
 .../stories/templates/My-Data.stories.tsx     | 206 +++++-------------
 1 file changed, 60 insertions(+), 146 deletions(-)

diff --git a/.storybook/stories/templates/My-Data.stories.tsx b/.storybook/stories/templates/My-Data.stories.tsx
index 7e63afa933..10c00abefc 100644
--- a/.storybook/stories/templates/My-Data.stories.tsx
+++ b/.storybook/stories/templates/My-Data.stories.tsx
@@ -35,6 +35,7 @@ import { EditIcon } from '../../../components/Icons/src';
 import { List, ListSubheader, ListItem } from '../../../components/List/src';
 
 import { Link } from '../../../components/Link/src';
+import { DescriptionList } from '../../../components/DescriptionList/src';
 
 const meta = {
   title: 'Templates',
@@ -56,6 +57,27 @@ const myDataHeaderProps: HeaderLogicProps = {
 };
 type Story = StoryObj<typeof meta>;
 
+export const items = [
+  { title: 'E-mailadres', detail: 'anneklap@hotmail.com' },
+  { title: 'Telefoonnummer', detail: '-' },
+];
+
+export const items2 = [
+  { title: 'Voornamen', detail: 'Anne' },
+  { title: 'Geslachtsnaam', detail: 'Klap' },
+  { title: 'Geslacht', detail: 'Vrouw' },
+  { title: 'Burgerservicenummer', detail: '203674581' },
+  { title: 'Geboortedatum', detail: '05-12-1988' },
+  { title: 'Nationaliteit', detail: 'Nederlandse' },
+];
+
+export const items3 = [
+  { title: 'Straat', detail: 'Balistraat 44' },
+  { title: 'Postcode en plaats', detail: '2538 JH ‘s-Gravenhage' },
+  { title: 'Aanvangsdatum', detail: '03-04-2002' },
+  { title: 'Aantal inwoner op woonadres', detail: '3' },
+];
+
 const copyright = '© 2022 Gemeente Den Haag';
 export const myDataPage: Story = {
   render: () => (
@@ -113,153 +135,45 @@ export const myDataPage: Story = {
         <main className="denhaag-page-content__main">
           <Heading2>Mijn gegevens</Heading2>
 
-          <Table>
-            <TableCaption>Contact</TableCaption>
-            {/* <TableHead>
-              <TableRow>
-                <TableCell />
-                <TableHeader className="heman">He-Man</TableHeader>
-                <TableHeader className="skeletor">Skeletor</TableHeader>
-              </TableRow>
-            </TableHead> */}
-            <TableBody>
-              <TableRow>
-                <TableHeader scope="row">E-mailadres</TableHeader>
-                <TableCell>anneklap@hotmail.com</TableCell>
-                <TableCell>
-                  <EditIcon></EditIcon> Aanpassen
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableHeader scope="row">Telefoonnummer</TableHeader>
-                <TableCell>-</TableCell>
-                <TableCell>
-                  {' '}
-                  <EditIcon></EditIcon> Aanpassen
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-          <Table>
-            <TableCaption>Persoonsgegevens</TableCaption>
-            {/* <TableHead>
-              <TableRow>
-                <TableCell />
-                <TableHeader className="heman">He-Man</TableHeader>
-              </TableRow>
-            </TableHead> */}
-            <TableBody>
-              <TableRow>
-                <TableHeader scope="row">Voornamen</TableHeader>
-                <TableCell>Anne</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableHeader scope="row">Geslachtsnaam</TableHeader>
-                <TableCell>Klap</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableHeader scope="row">Geslacht</TableHeader>
-                <TableCell>Vrouw</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableHeader scope="row">Burgerservicenummer</TableHeader>
-                <TableCell>203674581</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableHeader scope="row">Geboortedatum</TableHeader>
-                <TableCell>05-12-1988</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableHeader scope="row">Nationaliteit</TableHeader>
-                <TableCell>Nederlandse</TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-          <Table>
-            <TableCaption>Adres</TableCaption>
-            {/* <TableHead>
-              <TableRow>
-                <TableCell />
-                <TableHeader className="heman">He-Man</TableHeader>
-              </TableRow>
-            </TableHead> */}
-            <TableBody>
-              <TableRow>
-                <TableHeader scope="row">Straat</TableHeader>
-                <TableCell>Balistraat 44</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableHeader scope="row">Postcode en plaats</TableHeader>
-                <TableCell>2538 JH's-Gravenhage</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableHeader scope="row">Aanvangsdatum</TableHeader>
-                <TableCell>03-04-2002</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableHeader scope="row">Aantal inwoners op woonadres</TableHeader>
-                <TableCell>3</TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-          <Paragraph>
-            Staat er een ander aantal inwoners op uw adres ingeschreven dan u verwacht? Dan kunt u een
-            <Link href="#"> adresonderzoek aanvragen </Link> bij de gemeente. U kunt een adresonderzoek ook intrekken.
-          </Paragraph>
-          <Table>
-            <TableCaption>Inschrijving</TableCaption>
-            {/* <TableHead>
-              <TableRow>
-                <TableCell />
-                <TableHeader className="heman">He-Man</TableHeader>
-              </TableRow>
-            </TableHead> */}
-            <TableBody>
-              <TableRow>
-                <TableHeader scope="row">Indicatie geheim</TableHeader>
-                <TableCell>Nee</TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
+          <DescriptionList caption="Contact" items={items} />
+          <DescriptionList caption="Persoonsgegevens" items={items2} />
+          <DescriptionList caption="Adres" items={items3} />
 
-          <List subheader={<ListSubheader>Wijzigingen en aanvragen BRP</ListSubheader>}>
-            <Link href="#">
-              <ListItem
-                primaryText="Meer informatie over adresonderzoek"
-                leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
-              />
-            </Link>
-            <Link href="#">
-              <ListItem
-                primaryText="Gegevens in BRP laten corrigeren, wijzigen of verwijderen"
-                leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
-              />
-            </Link>
-            <Link href="#">
-              <ListItem
-                primaryText="Verhuizing doorgeven"
-                leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
-              />
-            </Link>
-            <Link href="#">
-              <ListItem
-                primaryText="Verandering naamgebruik aanvragen"
-                leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
-              />
-            </Link>
-            <Link href="#">
-              <ListItem
-                primaryText="Vermelding geslacht wijzigen (transgenders)"
-                leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
-              />
-            </Link>
-            <Link href="#">
-              <ListItem
-                primaryText="Geheimhouding persoonsgegevens aanvragen"
-                leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
-              />
-            </Link>
-          </List>
+          <nav className="denhaag-list__wrapper">
+            <p className="denhaag-list__subheader">Wijzigingen en aanvragen BRP</p>
+            <ul className="denhaag-list">
+              <li className="denhaag-list__item">
+                <Link component={Link} href="/" icon={<ArrowRightIcon />} iconAlign="start">
+                  Meer informatie over adresonderzoek
+                </Link>
+              </li>
+              <li className="denhaag-list__item">
+                <Link component={Link} href="/" icon={<ArrowRightIcon />} iconAlign="start">
+                  Gegevens in BRP laten corrigeren, wijzigen of verwijderen
+                </Link>
+              </li>
+              <li className="denhaag-list__item">
+                <Link component={Link} href="/nl" icon={<ArrowRightIcon />} iconAlign="start">
+                  Verhuizing doorgeven
+                </Link>
+              </li>
+              <li className="denhaag-list__item">
+                <Link component={Link} href="/nl" icon={<ArrowRightIcon />} iconAlign="start">
+                  Verandering naamgebruik aanvragen
+                </Link>
+              </li>
+              <li className="denhaag-list__item">
+                <Link component={Link} href="/nl" icon={<ArrowRightIcon />} iconAlign="start">
+                  Vermelding geslacht wijzigen (transgenders)
+                </Link>
+              </li>
+              <li className="denhaag-list__item">
+                <Link component={Link} href="/nl" icon={<ArrowRightIcon />} iconAlign="start">
+                  Geheimhouding persoonsgegevens aanvragen
+                </Link>
+              </li>
+            </ul>
+          </nav>
         </main>
       </ResponsiveContent>
       <PageFooter>