docs: add utrecht note to themes and visual regression

packages/theme-toolkit/package.json

@@ -141,6 +141,8 @@
     "@utrecht/nav-list-css": "1.3.0",
     "@utrecht/number-data-css": "1.4.0",
     "@utrecht/ordered-list-css": "1.4.0",
+    "@utrecht/note-css": "1.0.0",
+    "@utrecht/note-react": "1.0.0",
     "@utrecht/page-body-react": "1.0.13",
     "@utrecht/page-content-css": "1.4.0",
     "@utrecht/page-footer-css": "2.1.0",

packages/theme-toolkit/src/component-stories-util.ts

@@ -50,6 +50,7 @@ export const STORY_GROUPS: { [index: string]: string } = {
   MARK: 'Mark',
   ROOT: 'Root',
   PAGE_BODY: 'Page Body',
+  NOTE: 'Note',
 };
 
 export interface ComponentStory {

packages/theme-toolkit/src/component-stories-utrecht.tsx

@@ -73,6 +73,8 @@ import { PageBody } from '@utrecht/page-body-react/css';
 import { PageLayout } from '@utrecht/page-layout-react/css';
 import { UtrechtIconChevronRight } from '@utrecht/web-component-library-react';
 import { Listbox, ListboxOption } from '@utrecht/listbox-react/css';
+import { Note } from '@utrecht/note-react/css';
+import '@utrecht/note-css';
 import { clsx } from 'clsx';
 
 const Blockquote = ({ children }: PropsWithChildren) => <div className="utrecht-blockquote">{children}</div>;
@@ -3262,7 +3264,7 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
     ),
   },
   {
-    storyId: 'react-root--default',
+    storyId: 'react-utrecht-root--default',
     component: 'utrecht-root',
     group: STORY_GROUPS['ROOT'],
     name: 'Utrecht Root',
@@ -3280,7 +3282,7 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
     },
   },
   {
-    storyId: 'react-page-body--default',
+    storyId: 'react-utrecht-page-body--default',
     component: 'utrecht-page-body',
     group: STORY_GROUPS['PAGE_BODY'],
     name: 'Utrecht Page Body',
@@ -3302,7 +3304,7 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
     },
   },
   {
-    storyId: 'react-page-layout--default',
+    storyId: 'react-utrecht-page-layout--default',
     component: 'utrecht-page-layout',
     group: STORY_GROUPS['PAGE_LAYOUT'],
     name: 'Utrecht Page Layout',
@@ -3319,4 +3321,44 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
       anyOf: [],
     },
   },
+  {
+    storyId: 'react-utrecht-note--default',
+    component: 'utrecht-note',
+    group: STORY_GROUPS['NOTE'],
+    name: 'Utrecht Note',
+    render: () => (
+      <Note>
+        <Heading2>Lorem ipsum</Heading2>
+        <Paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </Paragraph>
+      </Note>
+    ),
+    detectTokens: {
+      anyOf: [
+        'utrecht.note.background-color',
+        'utrecht.note.border-color',
+        'utrecht.note.border-width',
+        'utrecht.note.color',
+        'utrecht.note.padding-block-start',
+        'utrecht.note.padding-block-end',
+        'utrecht.note.padding-inline-start',
+        'utrecht.note.padding-inline-end',
+        'utrecht.note.margin-block-start',
+        'utrecht.note.margin-block-end',
+        'utrecht.note.info.background-color',
+        'utrecht.note.info.color',
+        'utrecht.note.warning.background-color',
+        'utrecht.note.warning.color',
+        'utrecht.note.error.background-color',
+        'utrecht.note.error.color',
+        'utrecht.note.success.background-color',
+        'utrecht.note.success.color',
+      ],
+    },
+  },
 ];

packages/voorbeeld-design-tokens/documentation/note/utrecht-note.stories.tsx

@@ -0,0 +1,41 @@
+import '@utrecht/note-css';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Note } from '@utrecht/note-react/css';
+import { Heading2, Paragraph } from '@utrecht/component-library-react/dist/css-module';
+
+const meta = {
+  id: 'utrecht-note',
+  title: 'Components/Note/Utrecht',
+  component: Note,
+  parameters: { actions: { disable: true } },
+  args: {
+    aside: false,
+    children: (
+      <>
+        <Heading2>Lorem ipsum</Heading2>
+        <Paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </Paragraph>
+      </>
+    ),
+    purpose: '',
+  },
+} satisfies Meta<typeof Note>;
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+export const VoorbeeldTheme: Story = {
+  name: 'Voorbeeld theme',
+  parameters: { theme: 'voorbeeld-theme' },
+};
+
+export const UtrechtTheme: Story = {
+  name: 'Utrecht theme',
+  parameters: { theme: 'utrecht-theme' },
+};

packages/voorbeeld-design-tokens/package.json

@@ -54,6 +54,8 @@
     "@utrecht/component-library-design-tokens": "1.0.0",
     "@utrecht/component-library-react": "8.0.3",
     "@utrecht/components": "7.4.0",
+    "@utrecht/note-css": "1.0.0",
+    "@utrecht/note-react": "1.0.0",
     "@utrecht/page-body-react": "1.0.13",
     "@utrecht/page-layout-react": "1.0.12",
     "@utrecht/root-react": "1.0.16",