1298 zaakdetail pagina template in storybook (#1310)

* feat: create new page

* feat: add status

* fix: heading css

* fix: stepheadertoggle padding

* fix: step header toggle gap

.storybook/stories/templates/CaseDetail-page.css

@@ -0,0 +1,3 @@
+.denhaag-page-content__status {
+  margin-block-start: 64px;
+}

.storybook/stories/templates/CaseDetail-page.stories.mdx

@@ -0,0 +1,252 @@
+import { Meta, Canvas, Story } from "@storybook/addon-docs";
+import { Heading1, Heading2, Heading3, Heading4, Paragraph } from "/components/Typography/src";
+import Alert from "/components/Alert/src";
+import { Page, PageHeader, PageFooter } from "/components/Page/src";
+import { HeaderLogic } from "/components/Header/src";
+import HeaderLogo from "/components/HeaderLogo/src";
+import Footer from "/components/Footer/src";
+import ResponsiveContent from "/components/ResponsiveContent/src";
+import Link from "/components/Link/src";
+import Breadcrumb from "/components/Breadcrumb/src";
+import { Sidenav, SidenavItem, SidenavLink, SidenavList } from "/components/Sidenav/src";
+import { LinkGroup, LinkGroupList, LinkGroupListItem } from "/components/LinkGroup/src";
+import { AuthenticationCardGroup } from "/components/CardGroup/src/story-template";
+import {
+  ArchiveIcon,
+  GridIcon,
+  UserIcon,
+  FacebookIcon,
+  TwitterIcon,
+  LinkedInIcon,
+  InstagramIcon,
+  YouTubeIcon,
+  ArrowRightIcon,
+  BookIcon,
+} from "/components/Icons/src";
+import { Sheet, SheetCloseButton, SheetOverlay, SheetContainer } from "/components/Sheet/src";
+import IconButton from "/components/IconButton/src";
+import { Status } from "/components/ProcessSteps/src";
+
+import clsx from "clsx";
+
+import "./CaseDetail-page.css";
+
+<Meta
+  title="Templates/Case Detail page"
+  parameters={{
+    chromatic: { viewports: [1768, 1280, 768, 360] },
+  }}
+/>
+
+# Case Detail page
+
+export const exampleArgs = {
+  breadcrumbs: {
+    navigationPath: [
+      { label: "Home", href: "https://denhaag.nl/" },
+      { label: "MijnDenHaag", href: "https://denhaag.nl/" },
+      { label: "Mijn lopende zaken", href: "https://denhaag.nl/" },
+    ],
+  },
+  userprofileMenu: {
+    label: "Welkom Anne Klap",
+    authorisedLoginLabel: "Ingelogd namens Jason Verploeg",
+    navigationGroups: [
+      {
+        label: "MijnDenHaag",
+        navigation: [
+          { label: "Overzicht", href: "" },
+          { label: "Lopende zaken", href: "" },
+          { label: "Thema's", href: "" },
+          { label: "Mijn account", href: "" },
+        ],
+      },
+    ],
+  },
+  languageSwitcherMenu: {
+    currentLanguageLabel: "NL",
+    languageSwitcherProps: {
+      variant: "button",
+      label: "Kies uw voorkeurstaal",
+      languages: [
+        {
+          id: "nl",
+          label: "Nederlands",
+          linkProps: { href: "#nl", lang: "nl", hrefLang: "nl-NL" },
+          active: true,
+        },
+        {
+          id: "en",
+          label: "Engels",
+          linkProps: { href: "#en", lang: "en", hrefLang: "en-GB" },
+          active: false,
+        },
+        {
+          id: "fr",
+          label: "Français",
+          linkProps: { href: "#fr", lang: "fr", hrefLang: "fr-FR" },
+          active: false,
+        },
+      ],
+    },
+  },
+  logoutButton: {
+    label: "Uitloggen",
+    onLogoutClick: () => {},
+  },
+  mobileMenu: {
+    openLabel: "Menu",
+    closeLabel: "Sluiten",
+    navigation: [
+      { label: "Home", href: "https://www.denhaag.nl" },
+      {
+        label: "Onderwerpen",
+        navigation: [
+          {
+            label: "Omgeving",
+            navigation: [
+              { label: "Parkeren", href: "https://www.denhaag.nl/parkeren" },
+              { label: "Afval", href: "https://www.denhaag.nl/afval" },
+            ],
+          },
+          {
+            label: "Wonen",
+            navigation: [
+              { label: "Verhuizen en migratie", href: "https://www.denhaag.nl/verhuizen" },
+              { label: "Belastingen", href: "https://www.denhaag.nl/belastingen" },
+            ],
+          },
+        ],
+      },
+      {
+        label: "MijnDenHaag",
+        navigation: [
+          { label: "Overzicht", href: "https://klantportaal.denhaag.nl/overzicht" },
+          { label: "Lopende zaken", href: "https://klantportaal.denhaag.nl/zaken" },
+          { label: "Thema's", href: "https://klantportaal.denhaag.nl/themas" },
+          { label: "Mijn account", href: "https://klantportaal.denhaag.nl/account" },
+        ],
+      },
+    ],
+  },
+};
+
+export const progressStepsData = {
+  collapsible: true,
+  expandedSteps: ["onderzoek"],
+  steps: [
+    {
+      id: "deelname",
+      marker: 1,
+      title: "Deelname aan geluidsonderzoek",
+      status: "checked",
+      steps: [{ title: "Aanmelding ontvangen", status: "checked" }],
+    },
+    {
+      id: "onderzoek",
+      marker: 2,
+      title: "Onderzoek naar geluidsoverlast",
+      status: "current",
+      steps: [{ title: "Afspraak meten geluidsoverlast gemaakt (afspraak op 24 mei)" }],
+    },
+    { id: "uitvoeren", marker: 3, title: "Uitvoeren van maatregelen" },
+    { id: "klaar", marker: 4, title: "Maatregelen zijn uitgevoerd" },
+  ],
+};
+
+export const navigationPathData = [
+  { label: "Home", href: "https://denhaag.nl/" },
+  { label: "MijnDenHaag", href: "https://denhaag.nl/parkeren/" },
+];
+
+export const footerLegalData = [
+  { label: "Sitemap", href: "https://denhaag.nl/" },
+  { label: "Toegankelijkheid", href: "https://denhaag.nl/" },
+  { label: "Privacy", href: "https://denhaag.nl/" },
+  { label: "Proclaimer", href: "https://denhaag.nl/" },
+  { label: "Disclaimer", href: "https://denhaag.nl/" },
+  { label: "Voorwaarden", href: "https://denhaag.nl/" },
+];
+
+export const footerSocialData = {
+  title: "Volg ons op",
+  links: [
+    { icon: <FacebookIcon />, label: "Facebook", href: "https://facebook.com" },
+    { icon: <TwitterIcon />, label: "Facebook", href: "https://facebook.com" },
+    { icon: <LinkedInIcon />, label: "Facebook", href: "https://facebook.com" },
+    { icon: <InstagramIcon />, label: "Facebook", href: "https://facebook.com" },
+    { icon: <YouTubeIcon />, label: "Facebook", href: "https://facebook.com" },
+  ],
+};
+
+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.",
+  buttonLabel: "Aanmelden nieuwsbrief",
+  href: "#",
+};
+export const contactData = {
+  title: "Contact",
+  links: [
+    { label: "Bel ons op 14070", href: "#" },
+    { label: "Contactformulier", href: "#" },
+  ],
+  buttonLabel: "Contactpagina",
+  href: "https://www.denhaag.nl/nl/bestuur-en-organisatie/contact-met-de-gemeente.htm",
+};
+
+export const copyright = "© 2022 Gemeente Den Haag";
+
+<Canvas>
+  <Story name="Case Detail page">
+    <Page>
+      <PageHeader>
+        <HeaderLogic {...exampleArgs} />
+      </PageHeader>
+      <ResponsiveContent className="denhaag-page-content denhaag-responsive-content--sidebar">
+        <Sidenav>
+          <SidenavList>
+            <SidenavItem>
+              <SidenavLink>
+                <GridIcon />
+                Overzicht
+              </SidenavLink>
+            </SidenavItem>
+            <SidenavItem>
+              <SidenavLink current={true}>
+                <ArchiveIcon />
+                Mijn lopende zaken
+              </SidenavLink>
+            </SidenavItem>
+            <SidenavItem>
+              <SidenavLink>
+                <BookIcon />
+                Mijn thema's
+              </SidenavLink>
+            </SidenavItem>
+            <SidenavItem>
+              <SidenavLink>
+                <UserIcon />
+                Mijn gegevens
+              </SidenavLink>
+            </SidenavItem>
+          </SidenavList>
+        </Sidenav>
+        <main className="denhaag-page-content__main">
+          <Heading2>Aanvraag subsidie geluidsisolatie</Heading2>
+          <Heading3 className="denhaag-page-content__status">Status</Heading3>
+          <Status {...progressStepsData}></Status>
+        </main>
+      </ResponsiveContent>
+      <PageFooter>
+        <Footer
+          newsletterData={newsletterData}
+          contactData={contactData}
+          legalData={footerLegalData}
+          copyrightLabel={copyright}
+          socialData={footerSocialData}
+        />
+      </PageFooter>
+    </Page>
+  </Story>
+</Canvas>

components/Icons/src/index.tsx

@@ -45,6 +45,7 @@ import SettingsSvg from './svg/informational/settings.svg';
 
 // Objects
 import ArchiveSvg from './svg/objects/archive.svg';
+import BookSvg from './svg/objects/book.svg';
 import CalendarSvg from './svg/objects/calendar.svg';
 import CardSvg from './svg/objects/card.svg';
 import ClipboardSvg from './svg/objects/clipboard.svg';
@@ -113,6 +114,7 @@ export const SettingsIcon: F = (props: SvgIconProps) => buildIcon(SettingsSvg, p
 
 // Objects
 export const ArchiveIcon: F = (props: SvgIconProps) => buildIcon(ArchiveSvg, props);
+export const BookIcon: F = (props: SvgIconProps) => buildIcon(BookSvg, props);
 export const CalendarIcon: F = (props: SvgIconProps) => buildIcon(CalendarSvg, props);
 export const CardIcon: F = (props: SvgIconProps) => buildIcon(CardSvg, props);
 export const ClipboardIcon: F = (props: SvgIconProps) => buildIcon(ClipboardSvg, props);

components/ProcessSteps/src/StepHeaderToggle.scss

@@ -2,6 +2,11 @@
   --utrecht-button-subtle-font-size: inherit;
   --utrecht-button-subtle-background-color: transparent;
   --utrecht-button-subtle-color: auto;
+  --utrecht-button-padding-block-end: 0;
+  --utrecht-button-padding-block-start: 0;
+  --utrecht-button-padding-inline-end: 0;
+  --utrecht-button-padding-inline-start: 0;
+  --utrecht-button-icon-gap: 4px;
 
   border: 0;
   background-color: inherit;