feat: demo branch

packages/storybook/addons/user-theme/manager.tsx

@@ -0,0 +1,137 @@
+import { addons, types } from '@storybook/manager-api';
+import { useStorybookState } from '@storybook/manager-api';
+import React, { useRef, useState } from 'react';
+
+addons.register('my/panel', () => {
+  addons.add('my-panel-addon/panel', {
+    title: 'Jouw huisstijl',
+    type: types.TAB, //another option is using a panel but its much less visible to non power users
+    route: () => `/design-tokens`,
+    match: ({ viewMode }) => viewMode === 'design-tokens',
+    render: () => <DesignTokenUploaderTab />,
+  });
+});
+
+const DesignTokenUploaderTab = () => {
+  const [themeName, setThemeName] = useState<string>(null);
+  const { storyId } = useStorybookState();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const iframeUrl = `/iframe.html?id=${storyId}&viewMode=story`;
+  const themeElementRef = useRef<HTMLElement | null>(null);
+
+  const handleFileUpload = (file: File) => {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      const fileContent = e.target?.result as string;
+
+      if (fileContent) {
+        console.log('File content successfully read:', fileContent);
+
+        const themeMatch = fileContent.match(/(\.[\w-]+)/);
+        if (themeMatch) {
+          const themeSelector = themeMatch[1];
+          setThemeName(formatSelectorAsThemeName(themeSelector));
+
+          console.log(`Extracted theme selector: ${themeSelector}`);
+
+          if (iframeRef.current) {
+            const iframeDoc = iframeRef.current.contentDocument || iframeRef.current.contentWindow?.document;
+            if (iframeDoc) {
+              applyCustomTheme(iframeDoc, themeSelector, fileContent);
+            }
+          }
+        } else {
+          console.error('Failed to extract a valid theme selector from the file.');
+        }
+      } else {
+        console.error('No file content was read.');
+      }
+    };
+
+    reader.readAsText(file);
+  };
+
+  const handleFileDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files[0];
+    if (file) {
+      handleFileUpload(file);
+    }
+  };
+
+  const applyCustomTheme = (iframeDoc: Document, customTheme: string, fileContent: string) => {
+    const themeElement = iframeDoc.querySelector("[class$='-theme']");
+
+    if (themeElement) {
+      console.log('Found theme element:', themeElement);
+
+      themeElementRef.current = themeElement as HTMLElement;
+
+      const oldThemeClass = Array.from(themeElement.classList).find((c) => c.endsWith('-theme'));
+      if (oldThemeClass) {
+        themeElement.classList.remove(oldThemeClass);
+      }
+
+      themeElement.classList.add(customTheme.replace('.', ''));
+
+      const styleElement = document.createElement('style');
+      styleElement.innerHTML = fileContent;
+      themeElement.appendChild(styleElement);
+
+      console.log(`Applied new theme: ${customTheme} and dumped all CSS.`);
+    }
+  };
+
+  return (
+    <div style={{ height: '100vh', width: '100%', display: 'flex', flexDirection: 'column' }}>
+      <div
+        style={{ padding: '20px', background: '#444', borderBottom: '1px solid #ccc', marginBlockStart: '8px' }}
+        onDrop={handleFileDrop}
+        onDragOver={(e) => e.preventDefault()}
+      >
+        <h2>
+          Upload eigen huisstijl: <span>Actief: {themeName || 'Geen eigen thema'}</span>
+        </h2>
+        <p>
+          Je kan je eigen huisstijl uploaden door middel van een theme.css bestand. Lees hier voor een stappenplan: rip
+          geen docs
+        </p>
+        <input
+          type="file"
+          accept=".css"
+          onChange={(e) => {
+            if (e.target.files?.[0]) {
+              handleFileUpload(e.target.files[0]);
+            }
+          }}
+        />
+      </div>
+
+      <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'white' }}>
+        <iframe
+          id="storybook-canvas"
+          title="Storybook Canvas"
+          src={iframeUrl}
+          style={{
+            width: '100%',
+            height: '100%',
+            border: 'none',
+            margin: '0',
+            padding: '0',
+            background: 'white',
+          }}
+          ref={iframeRef}
+        />
+      </div>
+    </div>
+  );
+};
+
+const formatSelectorAsThemeName = (selector: string) => {
+  return selector
+    .replace('.', '')
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};

packages/storybook/config/main.ts

@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     '@storybook/addon-docs',
     '@storybook/addon-viewport',
     '@whitespace/storybook-addon-html',
+    '../addons/user-theme',
   ],
   framework: {
     name: '@storybook/react-vite',

packages/storybook/package.json

@@ -33,6 +33,10 @@
     "@storybook/addon-interactions": "8.2.9",
     "@storybook/addon-links": "8.2.9",
     "@storybook/addon-viewport": "8.2.9",
+    "@storybook/components": "8.2.9",
+    "@storybook/manager-api": "8.2.9",
+    "@storybook/blocks": "8.2.9",
+    "@storybook/preview-api": "8.2.9",
     "@storybook/react": "8.2.9",
     "@storybook/react-vite": "8.2.9",
     "@tabler/icons-react": "3.14.0",

packages/storybook/src/templates/form-wmebv/documentation.md

@@ -3,7 +3,20 @@
 Voordat de huidige versie van het generieke e-formulier (meerstappenformulier) in deze Storybook-documentatie werd opgenomen, is er een eerdere versie ontwikkeld en gedocumenteerd in de Hulpgids Wmebv: e-formulieren en notificeren. Deze hulpgids vormde de basis voor het ontwerp en de implementatie van het meerstappenformulier.
 
 De hulpgids introduceerde een eerste generiek e-formulier, dat tot stand kwam in samenwerking met gemeenten, leveranciers en VNG Realisatie. Dit formulier werd uitgebreid getest op gebruiksvriendelijkheid en toegankelijkheid, wat leidde tot inzichten en verbeteringen die zijn verwerkt in de vernieuwde versie die nu beschikbaar is in het Storybook.
-
## Hulpgids Wmebv: e-formulieren en notificeren
+
+## Figma-ontwerpbestand
+
+Bij deze Storybook hoort een uitgebreid **Figma-ontwerpbestand**, waarin dezelfde templates zijn uitgewerkt op basis van de componenten uit het NL Design System. Dit bestand biedt handige referentie voor designers, zodat zij snel en efficiënt kunnen werken aan nieuwe ontwerpen die aansluiten bij de standaarden van het NL Design System.
+
+Het Figma-bestand is handig omdat:
+
+- **Consistentie**: Het gebruik van NL Design System figma componenten zorgt ervoor dat ontwerpen consistent blijven, zowel visueel als functioneel.
+- **Efficiëntie**: Designers kunnen bestaande componenten hergebruiken, wat de tijd die nodig is voor het maken van nieuwe ontwerpen aanzienlijk verkort.
+- **Samenwerking**: Het bestand fungeert als een gedeeld referentiepunt voor designers en ontwikkelaars, wat de communicatie en samenwerking binnen teams vereenvoudigt.
+
+Je kunt het Figma-ontwerpbestand bekijken via de volgende link: [Figma - Overheidsbrede portalen templates](https://www.figma.com/design/iZgSIuU8hvH9nw3h7WO1ZY/Overheidsbrede-portalen---Templates?node-id=1-3&node-type=canvas&t=KxnX9WoZ6S4tSxuF-0).
+
+## Hulpgids Wmebv: e-formulieren en notificeren
 
 De hulpgids is ontwikkeld om gemeenten en leveranciers te ondersteunen bij het toepassen van de vereisten van de Wet modernisering elektronisch bestuurlijk verkeer (Wmebv). De gids bevat toelichting, praktijkvoorbeelden en een generiek voorbeeldformulier, en richt zich specifiek op het ontwerpen en implementeren van digitaal toegankelijke en gebruiksvriendelijke e-formulieren en notificaties.
 

packages/storybook/src/templates/form-wmebv/index.css

@@ -135,6 +135,11 @@
 .denhaag-header__logo {
   block-size: 64px;
   inline-size: 180px;
+
+}
+
+.utrecht-document {
+  --utrecht-space-around: 1;
 }
 
 .voorbeeld-back-link {

packages/storybook/src/templates/form-wmebv/wmebv-2-question-step.stories.tsx

@@ -54,6 +54,15 @@ const TemplatePage = ({
         <Heading2>Uw vraag</Heading2>
       </HeadingGroup>
       <FormFieldTextarea label="Stel uw vraag" id="questionField" />
+      <div>
+        <p>Bestand toevoegen</p>
+        <ul>
+          <li>U kunt meerdere bestanden tegelijk toevoegen.</li>
+          <li>U mag maximaal 10 Mb aan bestanden toevoegen.</li>
+          <li>Toegestane bestandstypen: doc, docx, xslx, pdf, zip, jpg, png, bmp en gif.</li>
+        </ul>
+        <Button appearance="secondary-action-button">Bestand kiezen</Button>
+      </div>
       <ButtonGroup direction="column">
         <Button type="submit" className="voorbeeld-button-spacing" appearance="primary-action-button">
           Volgende stap

packages/storybook/src/templates/mijn-omgeving-home/documentation.md

@@ -4,6 +4,18 @@
 
 De **MijnOmgeving**-services bieden burgers een gepersonaliseerde digitale omgeving waarin zij eenvoudig toegang hebben tot hun persoonlijke gegevens, gemeentelijke diensten en relevante informatie. Gemeente Den Haag werkt met een systeem gebaseerd op **Generieke Services**, waarbij consistentie en gebruiksvriendelijkheid centraal staan. Dit biedt een modulaire aanpak om verschillende diensten efficiënt te integreren. Meer informatie over Generieke Services is te vinden via [denhaag.nl](https://www.denhaag.nl).
 
+## Figma-ontwerpbestand
+
+Bij deze Storybook hoort een uitgebreid **Figma-ontwerpbestand**, waarin dezelfde templates zijn uitgewerkt op basis van de componenten uit het NL Design System. Dit bestand biedt handige referentie voor designers, zodat zij snel en efficiënt kunnen werken aan nieuwe ontwerpen die aansluiten bij de standaarden van het NL Design System.
+
+Het Figma-bestand is handig omdat:
+
+- **Consistentie**: Het gebruik van NL Design System figma componenten zorgt ervoor dat ontwerpen consistent blijven, zowel visueel als functioneel.
+- **Efficiëntie**: Designers kunnen bestaande componenten hergebruiken, wat de tijd die nodig is voor het maken van nieuwe ontwerpen aanzienlijk verkort.
+- **Samenwerking**: Het bestand fungeert als een gedeeld referentiepunt voor designers en ontwikkelaars, wat de communicatie en samenwerking binnen teams vereenvoudigt.
+
+Je kunt het Figma-ontwerpbestand bekijken via de volgende link: [Figma - Overheidsbrede portalen templates](https://www.figma.com/design/iZgSIuU8hvH9nw3h7WO1ZY/Overheidsbrede-portalen---Templates?node-id=1-3&node-type=canvas&t=KxnX9WoZ6S4tSxuF-0).
+
 ---
 
 ## Gebruikersonderzoek naar MijnOmgeving

packages/storybook/src/templates/mijn-omgeving-home/index.css

@@ -10,8 +10,9 @@
   --utrecht-button-group-margin-block-start: var(--voorbeeld-space-block-rabbit);
   --utrecht-form-field-margin-block-start: var(--voorbeeld-space-block-rabbit);
   --utrecht-form-label-font-weight: var(--voorbeeld-typography-font-weight-bold);
-  --utrecht-heading-1-margin-block-start: 0;
+  --utrecht-heading-1-margin-block-start: var(--voorbeeld-space-block-rabbit);
   --utrecht-heading-1-margin-block-end: var(--voorbeeld-space-block-rabbit);
+  --utrecht-heading-2-margin-block-start: var(--voorbeeld-space-block-rabbit);
   --utrecht-heading-2-margin-block-end: var(--voorbeeld-space-block-rabbit);
   --utrecht-heading-3-margin-block-start: var(--voorbeeld-space-block-rabbit);
   --utrecht-paragraph-margin-block-end: var(--voorbeeld-space-block-rabbit);
@@ -78,6 +79,97 @@
   --denhaag-action-background-color: var(--utrecht-document-background-color);
 }
 
+.denhaag-theme {
+  --utrecht-space-around: 1;
+  --utrecht-article-max-inline-size: 670px;
+  --todo-page-header-content-max-inline-size: calc(var(--utrecht-article-max-inline-size) * 1.5);
+  --todo-page-header-padding-inline-start: var(--voorbeeld-space-inline-mouse);
+  --todo-page-header-padding-inline-end: var(--voorbeeld-space-inline-mouse);
+  --utrecht-paragraph-margin-block-end: var(--voorbeeld-space-block-rabbit);
+  --utrecht-heading-1-margin-block-start: 0;
+  --utrecht-heading-1-margin-block-end: var(--voorbeeld-space-block-rabbit);
+  --utrecht-heading-2-margin-block-end: var(--voorbeeld-space-block-rabbit);
+  --utrecht-heading-3-margin-block-start: var(--voorbeeld-space-block-rabbit);
+  --utrecht-button-group-margin-block-start: var(--voorbeeld-space-block-rabbit);
+  --utrecht-page-footer-padding-block-end: var(--voorbeeld-space-block-dog);
+  --utrecht-page-footer-padding-block-start: var(--voorbeeld-space-block-dog);
+  --utrecht-page-footer-padding-inline-end: var(--voorbeeld-space-inline-dog);
+  --utrecht-page-footer-padding-inline-start: var(--voorbeeld-space-inline-dog);
+  --utrecht-page-header-padding-block-start: var(--voorbeeld-space-block-mouse);
+  --utrecht-page-header-padding-block-end: var(--voorbeeld-space-block-mouse);
+  --utrecht-page-padding-inline-start: var(--voorbeeld-space-inline-pig);
+  --utrecht-page-padding-inline-end: var(--voorbeeld-space-inline-pig);
+  --utrecht-page-content-padding-block-start: var(--voorbeeld-space-block-beetle);
+  --utrecht-page-content-padding-block-end: var(--voorbeeld-space-block-dog);
+  --utrecht-page-content-padding-inline-start: 0;
+  --utrecht-page-content-padding-inline-end: 0;
+
+  /* TEMP VOORBEELD SCALE */
+  --voorbeeld-space-relation-onbemind: var(--voorbeeld-space-row-horse);
+  --voorbeeld-space-relation-onbekenden: var(--voorbeeld-space-row-pig);
+  --voorbeeld-space-relation-bekenden: var(--voorbeeld-space-row-cat);
+  --voorbeeld-space-relation-vrienden: var(--voorbeeld-space-row-rat);
+  --voorbeeld-space-relation-besties: var(--voorbeeld-space-row-snail);
+  --voorbeeld-space-relation-kind: 0px;
+  --voorbeeld-space-row-giraffe: 160px;
+  --voorbeeld-space-row-elephant: 96px;
+  --voorbeeld-space-row-horse: 64px;
+  --voorbeeld-space-row-tiger: 48px;
+  --voorbeeld-space-row-pig: 32px;
+  --voorbeeld-space-row-dog: 28px;
+  --voorbeeld-space-row-cat: 24px;
+  --voorbeeld-space-row-rabbit: 20px;
+  --voorbeeld-space-row-rat: 16px;
+  --voorbeeld-space-row-mouse: 12px;
+  --voorbeeld-space-row-snail: 8px;
+  --voorbeeld-space-row-beetle: 4px;
+  --voorbeeld-space-row-ant: 2px;
+  --voorbeeld-space-row-flea: 1px;
+  --voorbeeld-space-column-giraffe: 160px;
+  --voorbeeld-space-column-elephant: 96px;
+  --voorbeeld-space-column-horse: 64px;
+  --voorbeeld-space-column-tiger: 48px;
+  --voorbeeld-space-column-pig: 32px;
+  --voorbeeld-space-column-dog: 28px;
+  --voorbeeld-space-column-cat: 24px;
+  --voorbeeld-space-column-rabbit: 20px;
+  --voorbeeld-space-column-rat: 16px;
+  --voorbeeld-space-column-mouse: 12px;
+  --voorbeeld-space-column-snail: 8px;
+  --voorbeeld-space-column-beetle: 4px;
+  --voorbeeld-space-column-ant: 2px;
+  --voorbeeld-space-column-flea: 1px;
+  --voorbeeld-space-text-dog: 24px;
+  --voorbeeld-space-text-cat: 16px;
+  --voorbeeld-space-text-rabbit: 14px;
+  --voorbeeld-space-text-rat: 12px;
+  --voorbeeld-space-text-mouse: 8px;
+  --voorbeeld-space-text-snail: 6px;
+  --voorbeeld-space-text-beetle: 4px;
+  --voorbeeld-space-text-ant: 2px;
+  --voorbeeld-space-text-flea: 1px;
+  --voorbeeld-space-block-pig: 64px;
+  --voorbeeld-space-block-dog: 48px;
+  --voorbeeld-space-block-cat: 32px;
+  --voorbeeld-space-block-rabbit: 24px;
+  --voorbeeld-space-block-rat: 20px;
+  --voorbeeld-space-block-mouse: 16px;
+  --voorbeeld-space-block-snail: 12px;
+  --voorbeeld-space-block-beetle: 8px;
+  --voorbeeld-space-block-ant: 4px;
+  --voorbeeld-space-block-flea: 2px;
+  --voorbeeld-space-inline-pig: 48px;
+  --voorbeeld-space-inline-dog: 32px;
+  --voorbeeld-space-inline-cat: 28px;
+  --voorbeeld-space-inline-rabbit: 24px;
+  --voorbeeld-space-inline-rat: 20px;
+  --voorbeeld-space-inline-mouse: 16px;
+  --voorbeeld-space-inline-snail: 12px;
+  --voorbeeld-space-inline-beetle: 8px;
+  --voorbeeld-space-inline-ant: 4px;
+  --voorbeeld-space-inline-flea: 2px;
+}
+
 .voorbeeld-back-link {
   align-items: center;
   column-gap: 8px;

packages/storybook/src/templates/mijn-omgeving-zaakdetail/documentation.md

@@ -11,6 +11,18 @@ De **Zaakdetail pagina** is ontworpen op basis van het zaakdetailscherm van Geme
 
 Dit ontwerp is gemaakt om burgers en organisaties een overzichtelijke en toegankelijke manier te bieden om hun lopende zaken te beheren.
 
+## Figma-ontwerpbestand
+
+Bij deze Storybook hoort een uitgebreid **Figma-ontwerpbestand**, waarin dezelfde templates zijn uitgewerkt op basis van de componenten uit het NL Design System. Dit bestand biedt handige referentie voor designers, zodat zij snel en efficiënt kunnen werken aan nieuwe ontwerpen die aansluiten bij de standaarden van het NL Design System.
+
+Het Figma-bestand is handig omdat:
+
+- **Consistentie**: Het gebruik van NL Design System figma componenten zorgt ervoor dat ontwerpen consistent blijven, zowel visueel als functioneel.
+- **Efficiëntie**: Designers kunnen bestaande componenten hergebruiken, wat de tijd die nodig is voor het maken van nieuwe ontwerpen aanzienlijk verkort.
+- **Samenwerking**: Het bestand fungeert als een gedeeld referentiepunt voor designers en ontwikkelaars, wat de communicatie en samenwerking binnen teams vereenvoudigt.
+
+Je kunt het Figma-ontwerpbestand bekijken via de volgende link: [Figma - Overheidsbrede portalen templates](https://www.figma.com/design/iZgSIuU8hvH9nw3h7WO1ZY/Overheidsbrede-portalen---Templates?node-id=1-3&node-type=canvas&t=KxnX9WoZ6S4tSxuF-0).
+
 ---
 
 ## Componenten en het NL Design System