feat: Paragraph pages and Storybook improvements

packages/storybook-test/config/statuses.ts

@@ -5,26 +5,32 @@
  * `wcag-fail` is based on `"earl:Fail"`
  * `wcag-pass` is based on `"earl:Pass"`
  */
+export const STATUS = {
+  CONFORMS_TO_WCAG: 'Voldoet aan WCAG',
+  DOES_NOT_CONFORM_TO_NLDS: 'Voldoet niet aan NL Design System',
+  DOES_NOT_CONFORM_TO_WCAG: 'Voldoet niet aan WCAG',
+  OUT_OF_SCOPE: 'out-of-scope',
+};
 
 export const statuses = {
-  'out-of-scope': {
-    background: '#d3d3d3',
-    color: '#000',
-    description: 'Dit scenario is op dit moment out-of-scope voor deze component.',
-  },
-  'Voldoet aan WCAG': {
+  [STATUS.CONFORMS_TO_WCAG]: {
     background: '#009D12',
     color: 'white',
     description: 'WCAG 2.2: Voldoet',
   },
-  'Voldoet niet aan NL Design System': {
+  [STATUS.DOES_NOT_CONFORM_TO_NLDS]: {
     background: '#EC003B',
     color: 'white',
     description: 'Voldoet niet aan de richtlijnen of acceptatiecriteria van NL Design System',
   },
-  'Voldoet niet aan WCAG': {
+  [STATUS.DOES_NOT_CONFORM_TO_WCAG]: {
     background: '#EC003B',
     color: 'white',
     description: 'WCAG 2.2: Voldoet niet',
   },
+  [STATUS.OUT_OF_SCOPE]: {
+    background: '#d3d3d3',
+    color: '#000',
+    description: 'Dit scenario is op dit moment out-of-scope voor deze component.',
+  },
 };

packages/storybook-test/src/DocsPage.tsx

@@ -1,12 +1,10 @@
-import { Controls, Description, Stories, Subtitle } from '@storybook/blocks';
+import { Description, Stories } from '@storybook/blocks';
 import { DocsHeader } from './DocsHeader';
 
 export const DocsPage = () => (
   <>
     <DocsHeader />
-    <Subtitle />
     <Description />
-    <Controls />
     <Stories />
   </>
 );

packages/storybook-test/stories/paragraph/paragraph.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { CSSProperties } from 'react';
 import packageJSON from '../../../components-react/paragraph-react/package.json';
 import { Paragraph } from '../../../components-react/paragraph-react/src/css';
 import componentMarkdown from '../../../docs/paragraph-docs/docs/component.md?raw';
@@ -12,6 +13,10 @@ const meta = {
       table: { category: 'API' },
       type: 'string',
     },
+    style: {
+      control: 'object',
+      table: { category: 'API' },
+    },
   },
   component: Paragraph,
   parameters: {
@@ -70,6 +75,23 @@ export const ParagraphLead: Story = {
   },
 };
 
+export const LongParagraph: Story = {
+  name: 'Paragraph (lang)',
+  args: {
+    children:
+      'In de laatste dagen, toen ik uit Italië naar Engeland terugkeerde, besloot ik, liever dan al den tijd, dien ik te paard moest zitten, met smakelooze en onwetenschappelijke praatjes te slijten, zoo nu en dan of bij mij zelf over een onderwerp uit onze gemeenschappelijke letteroefeningen na te denken of mij te vermeien in de herinnering aan de even geleerde als dierbare vrienden, die ik hier had achtergelaten. Onder dezen kwam uw beeld, mijn beste Morus, mij zeker het allereerst voor den geest en de herinnering aan U, ofschoon wij ver van elkander waren, was mij even aangenaam, als uw omgang was, toen ik U nog van aangezicht tot aangezicht placht te zien, het aangenaamste—ik mag sterven, als het niet waar is—van al wat mij ooit in mijn leven te beurt is gevallen. Daarom vatte ik, omdat ik meende in allen gevalle iets te moeten doen en die tijd mij weinig geschikt voorkwam om een ernstig onderwerp te overdenken, het plan op een boertige lofrede op Moria (de Zotheid) te houden. “Welke Pallas heeft U op die gedachte gebracht?” zult ge zeggen. Vooreerst deed uw geslachtsnaam Morus mij dit plan opvatten, die even dicht bij het woord Moria komt, als gij ver van de zaak af zijt of liever, volgens aller eenstemmig getuigenis, daarmede volstrekt niets gemeen hebt. Verder vermoedde ik, dat deze speling van ons vernuft bovenal uw goedkeuring zou wegdragen, omdat gij in dergelijke jokkernijen, waarbij, zoo ik goed zie, nergens geleerdheid en geest kan gemist worden, bijzonder veel smaak vindt en in het dagelijksche leven als een Democritus pleegt op te treden. Ofschoon gij door uw buitengewone scherpzinnigheid gewoonlijk hemelsbreed in gevoelen van het gemeene volk verschilt, zijt gij toch door de ongeloofelijke zachtheid en meegaandheid van uw karakter niet alleen in staat om met allerlei menschen in alle omstandigheden des levens om te gaan, maar vindt gij er ook een genot in. Deze kleine verhandeling zult gij daarom gaarne aannemen als een aandenken van uw vriend en gij zult ook haar verdediging gaarne aanvaarden, want zij is u toegewijd en daarom voortaan Uw eigendom, niet het mijne.',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Een lange paragraaf die over meerdere regels gaat zodat duidelijk is dat de `line-height` van de paragraaf adequaat is. (fragment uit “De Lof der Zotheid” van Desiderius Erasmus)',
+      },
+    },
+    status: { type: [] },
+  },
+};
+
 export const ParagraphLeadPlusParagraph: Story = {
   name: 'Paragraph Lead + Paragraph',
   args: {
@@ -137,6 +159,26 @@ export const ParagraphLeadArabic: Story = {
   },
 };
 
+export const ParagraphZoom200: Story = {
+  name: 'Paragraph (zoom 200%)',
+  args: {
+    children: 'Knappekoppenbestuursoverlegorgaannotulen',
+    purpose: undefined,
+  },
+  globals: {
+    viewport: { value: undefined },
+    zoom: '400%',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Een paragraaf met een heel lang woord, gezoomed naar 200%.',
+      },
+    },
+    status: { type: [] },
+  },
+};
+
 export const ParagraphZoom400: Story = {
   name: 'Paragraph (zoom 400%)',
   args: {
@@ -145,19 +187,19 @@ export const ParagraphZoom400: Story = {
   },
   globals: {
     viewport: { value: undefined },
-    zoom: 4,
+    zoom: '400%',
   },
   parameters: {
     docs: {
       description: {
-        story: 'Een paragraaf met een heel lang woord , gezoomed naar 400%.',
+        story: 'Een paragraaf met een heel lang woord, gezoomed naar 400%.',
       },
     },
     status: { type: [] },
   },
 };
 
-export const ParagraphZoomSmallViewport: Story = {
+export const ParagraphSmallViewport: Story = {
   name: 'Paragraph (small viewport)',
   args: {
     children: 'Knappekoppenbestuursoverlegorgaannotulen',
@@ -170,7 +212,76 @@ export const ParagraphZoomSmallViewport: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Een paragraaf met een heel lang woord , in een kleine viewport.',
+        story: 'Een paragraaf met een heel lang woord, in een kleine viewport.',
+      },
+    },
+    status: { type: [] },
+  },
+};
+
+export const ParagraphZoom200SmallViewport: Story = {
+  name: 'Paragraph (zoom 200%, small viewport)',
+  args: {
+    children: 'Knappekoppenbestuursoverlegorgaannotulen',
+    purpose: undefined,
+  },
+  globals: {
+    viewport: { value: 'phone' },
+    zoom: '200%',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Een paragraaf met een heel lang woord, gezoomed naar 200%.',
+      },
+    },
+    status: { type: [] },
+  },
+};
+
+export const ParagraphZoom200SmallViewportSpacingOnly: Story = {
+  name: 'Paragraph (zoom 200%, small viewport)',
+  args: {
+    children: 'Knappekoppenbestuursoverlegorgaannotulen',
+    purpose: undefined,
+    style: {
+      'letter-spacing': '0.12em',
+      'word-spacing': '0.16em',
+    } as CSSProperties,
+  },
+  globals: {
+    viewport: { value: 'phone' },
+    zoom: '200%',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Een paragraaf met een heel lang woord, gezoomed naar 200%.',
+      },
+    },
+    status: { type: [] },
+  },
+};
+
+export const ParagraphZoom200SmallViewportSpacingAndWordBreak: Story = {
+  name: 'Paragraph (zoom 200%, small viewport)',
+  args: {
+    children: 'Knappekoppenbestuursoverlegorgaannotulen',
+    purpose: undefined,
+    style: {
+      letterSpacing: '0.12em',
+      wordBreak: 'break-word',
+      wordSpacing: '0.16em',
+    },
+  },
+  globals: {
+    viewport: { value: 'phone' },
+    zoom: '200%',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Een paragraaf met een heel lang woord, gezoomed naar 200%.',
       },
     },
     status: { type: [] },
@@ -185,14 +296,35 @@ export const ParagraphZoom400SmallViewport: Story = {
   },
   globals: {
     viewport: { value: 'phone' },
-    zoom: 4,
+    zoom: '400%',
   },
   parameters: {
     docs: {
       description: {
-        story: 'Een paragraaf met een heel lang woord , gezoomed naar 400%.',
+        story: 'Een paragraaf met een heel lang woord, gezoomed naar 400%.',
       },
     },
     status: { type: [] },
   },
 };
+
+export const ParagraphWithLetterAndWordSpacing: Story = {
+  name: 'Paragraph (letter-spacing + word-spacing)',
+  args: {
+    children: 'Op brute wijze ving de schooljuf de quasi-kalme lynx.',
+    style: {
+      letterSpacing: '0.12em',
+      wordSpacing: '0.16em',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Een paragraaf bestaand uit één alinea.',
+      },
+    },
+    status: {
+      type: [],
+    },
+  },
+};