fix(Alert, Note): padding-block xl, icon size xl, heading margin reset, Paragraph component

- padding-block token: space.block.lg → space.block.xl (meer lucht)
- Icon: size="xl" toegevoegd — was default md, waardoor icoon te klein was t.o.v. span
- .dsn-alert__heading / .dsn-note__heading: margin-block-end: 0 — heading-3 had 12px bottom margin
  waardoor de grid-row opgerekt werd en het icoon niet meer uitlijnde met de heading tekst
- htmlTemplate + docs.mdx: <p> → <p class="dsn-paragraph">
- AllStates stories: {TEKST} gewrapt in <Paragraph> component
- WithList story in Alert: <ul> → <UnorderedList>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Jeffrey Lauwers

packages/components-html/src/alert/alert.css

@@ -115,6 +115,7 @@
   grid-column: 2;
   grid-row: 1;
   align-self: center;
+  margin-block-end: 0;
 }
 
 /* ===========================

packages/components-html/src/note/note.css

@@ -132,6 +132,7 @@
   grid-column: 2;
   grid-row: 1;
   align-self: center;
+  margin-block-end: 0;
 }
 
 /* ===========================

packages/components-react/src/Alert/Alert.tsx

@@ -101,6 +101,7 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       iconStart === undefined ? (
         <Icon
           name={PREFERRED_ICONS[variant] as Parameters<typeof Icon>[0]['name']}
+          size="xl"
           aria-hidden
         />
       ) : (

packages/components-react/src/Note/Note.tsx

@@ -120,6 +120,7 @@ export const Note = React.forwardRef<HTMLElement, NoteProps>(
       iconStart === undefined ? (
         <Icon
           name={PREFERRED_ICONS[variant] as Parameters<typeof Icon>[0]['name']}
+          size="xl"
           aria-hidden
         />
       ) : (

packages/design-tokens/src/tokens/components/alert.json

@@ -22,7 +22,7 @@
         "comment": "Gap between heading and body"
       },
       "padding-block": {
-        "value": "{dsn.space.block.lg}",
+        "value": "{dsn.space.block.xl}",
         "type": "dimension",
         "comment": "Vertical padding"
       },

packages/design-tokens/src/tokens/components/note.json

@@ -17,7 +17,7 @@
         "comment": "Gap between heading and body"
       },
       "padding-block": {
-        "value": "{dsn.space.block.lg}",
+        "value": "{dsn.space.block.xl}",
         "type": "dimension",
         "comment": "Vertical padding"
       },

packages/storybook/src/Alert.docs.mdx

@@ -23,7 +23,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
   </span>
   <strong class="dsn-alert__heading dsn-heading dsn-heading--3">Heading</strong>
   <div class="dsn-alert__content">
-    <p>Tekst</p>
+    <p class="dsn-paragraph">Tekst</p>
   </div>
 </div>`}
 />

packages/storybook/src/Alert.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Icon, Alert } from '@dsn/components-react';
+import { Icon, Alert, Paragraph, UnorderedList } from '@dsn/components-react';
 import type { IconName } from '@dsn/components-react/icon-registry.generated';
 import DocsPage from './Alert.docs.mdx';
 import {
@@ -97,7 +97,7 @@ const meta: Meta<typeof Alert> = {
 
         const heading = args.heading ?? 'Heading';
         const children = args.children
-          ? `\n  <div class="dsn-alert__content">\n    <p>${args.children}</p>\n  </div>`
+          ? `\n  <div class="dsn-alert__content">\n    <p class="dsn-paragraph">${args.children}</p>\n  </div>`
           : '';
 
         return `<div class="${cls}" role="alert">${icon}\n  <strong class="dsn-alert__heading dsn-heading dsn-heading--3">${heading}</strong>${children}\n</div>`;
@@ -172,16 +172,16 @@ export const AllStates: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
       <Alert variant="info" heading="Informatief bericht">
-        {TEKST}
+        <Paragraph>{TEKST}</Paragraph>
       </Alert>
       <Alert variant="positive" heading="Gelukt">
-        {TEKST}
+        <Paragraph>{TEKST}</Paragraph>
       </Alert>
       <Alert variant="negative" heading="Er is een fout opgetreden">
-        {TEKST}
+        <Paragraph>{TEKST}</Paragraph>
       </Alert>
       <Alert variant="warning" heading="Let op">
-        {TEKST}
+        <Paragraph>{TEKST}</Paragraph>
       </Alert>
     </div>
   ),
@@ -194,11 +194,11 @@ export const WithList: Story = {
       variant="negative"
       heading="Er zijn fouten opgetreden. Controleer de volgende velden:"
     >
-      <ul>
+      <UnorderedList>
         <li>Voornaam is verplicht</li>
         <li>E-mailadres is ongeldig</li>
         <li>Telefoonnummer ontbreekt</li>
-      </ul>
+      </UnorderedList>
     </Alert>
   ),
 };

packages/storybook/src/Note.docs.mdx

@@ -23,7 +23,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
   </span>
   <strong class="dsn-heading dsn-heading--3 dsn-note__heading">Heading</strong>
   <div class="dsn-note__content">
-    <p>Tekst</p>
+    <p class="dsn-paragraph">Tekst</p>
   </div>
 </div>`}
 />

packages/storybook/src/Note.stories.tsx

@@ -1,5 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Icon, Note, Link, UnorderedList } from '@dsn/components-react';
+import {
+  Icon,
+  Note,
+  Paragraph,
+  Link,
+  UnorderedList,
+} from '@dsn/components-react';
 import type { IconName } from '@dsn/components-react/icon-registry.generated';
 import DocsPage from './Note.docs.mdx';
 import {
@@ -101,7 +107,7 @@ const meta: Meta<typeof Note> = {
           ? `\n  <strong class="dsn-heading dsn-heading--3 dsn-note__heading">${args.heading}</strong>`
           : '';
         const children = args.children
-          ? `\n  <div class="dsn-note__content">\n    <p>${args.children}</p>\n  </div>`
+          ? `\n  <div class="dsn-note__content">\n    <p class="dsn-paragraph">${args.children}</p>\n  </div>`
           : '';
 
         const as = args.as ?? 'div';
@@ -189,19 +195,19 @@ export const AllStates: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
       <Note variant="neutral" heading="Neutral">
-        {TEKST}
+        <Paragraph>{TEKST}</Paragraph>
       </Note>
       <Note variant="info" heading="Info">
-        {TEKST}
+        <Paragraph>{TEKST}</Paragraph>
       </Note>
       <Note variant="positive" heading="Positive">
-        {TEKST}
+        <Paragraph>{TEKST}</Paragraph>
       </Note>
       <Note variant="negative" heading="Negative">
-        {TEKST}
+        <Paragraph>{TEKST}</Paragraph>
       </Note>
       <Note variant="warning" heading="Warning">
-        {TEKST}
+        <Paragraph>{TEKST}</Paragraph>
       </Note>
     </div>
   ),