Merge branch 'main' into feature/utrecht-table

packages/storybook/config/preview.tsx

@@ -11,7 +11,12 @@ defineCustomElements();
 const preview: Preview = {
   parameters: {
     controls: { expanded: false },
-    options: { panelPosition: 'right' },
+    options: {
+      panelPosition: 'right',
+      storySort: {
+        order: ['Tilburg', 'CSS Component'],
+      },
+    },
     docs: {
       page: () => {
         // Exclude `<Title>` because the title comes from the Markdown file

packages/storybook/src/css-breadcrumb-nav.stories.tsx

@@ -0,0 +1,86 @@
+/* @license CC0-1.0 */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  BreadcrumbNav,
+  BreadcrumbNavLink,
+  BreadcrumbNavSeparator,
+} from '@utrecht/component-library-react/dist/css-module';
+import readme from './documentation/breadcrumb-nav.md?raw';
+
+const meta = {
+  title: 'CSS Component/Breadcrumb navigation',
+  id: 'css-utrecht-breadcrumb-nav',
+  component: BreadcrumbNav,
+  argTypes: {
+    children: {
+      name: 'Content',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: '',
+    },
+  },
+  args: {
+    children: '',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Fbreadcrumb-nav',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/ZWSC4gCrOXRUR9UX3aoZ8x/?node-id=501-18760',
+    },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof BreadcrumbNav>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Breadcrumb navigation',
+  args: {
+    children: [
+      <BreadcrumbNavLink href="/" rel="home" index={0}>
+        Home
+      </BreadcrumbNavLink>,
+      <BreadcrumbNavSeparator>
+        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
+          <path
+            fill-rule="evenodd"
+            d="M20.607 16 10 5.393l1.414-1.414L23.435 16l-12.02 12.02L10 26.608z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+      </BreadcrumbNavSeparator>,
+      <BreadcrumbNavLink href="/a/" index={1}>
+        Parkeren in Tilburg
+      </BreadcrumbNavLink>,
+      <BreadcrumbNavSeparator>
+        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
+          <path
+            fill-rule="evenodd"
+            d="M20.607 16 10 5.393l1.414-1.414L23.435 16l-12.02 12.02L10 26.608z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+      </BreadcrumbNavSeparator>,
+      <BreadcrumbNavLink href="/a/b/" rel="up" index={2} disabled current>
+        Product aanvragen
+      </BreadcrumbNavLink>,
+    ],
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/ZWSC4gCrOXRUR9UX3aoZ8x/Gemeente-Rotterdam-Design-System?type=design&node-id=507-20062&mode=design&t=yvzUSkFQYQmWSHsQ-4',
+    },
+  },
+};

packages/storybook/src/css-utrecht-accordion.stories.tsx

@@ -0,0 +1,121 @@
+/* @license CC0-1.0 */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { AccordionProvider } from '@utrecht/component-library-react/dist/css-module';
+import { ReactNode } from 'react';
+import readme from './documentation/accordion.md?raw';
+
+interface AccordionStoryProps {
+  label: string;
+  body: ReactNode;
+  expanded?: boolean;
+  expandedAccordion?: boolean;
+}
+
+const AccordionStory = ({ expanded, label, body }: AccordionStoryProps) => (
+  <AccordionProvider sections={[{ expanded, label, body }]} />
+);
+
+const meta = {
+  title: 'CSS Component/Accordion',
+  id: 'css-utrecht-accordion',
+  component: AccordionProvider,
+  args: {
+    // @ts-ignore
+    label: '',
+    body: '',
+    expandedAccordion: false,
+  },
+  argTypes: {
+    // @ts-ignore
+    label: {
+      name: 'label',
+      type: { name: 'string', required: true },
+      table: {
+        defaultValue: { summary: '' },
+        category: 'API',
+      },
+    },
+    body: {
+      name: 'body',
+      type: { name: 'string', required: true },
+      table: {
+        defaultValue: { summary: '' },
+        category: 'API',
+      },
+    },
+    expandedAccordion: {
+      name: 'expandedAccordion',
+      type: { name: 'boolean', required: false },
+      table: {
+        defaultValue: { summary: false },
+        category: 'API',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?node-id=1261%3A4784&t=lu24fBlSHdl7JcKT-1',
+    },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  // @ts-ignore
+  render: AccordionStory,
+} satisfies Meta<typeof AccordionProvider>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  // @ts-ignore
+  args: {
+    label: 'Lorem ipsum',
+    body: `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.`,
+    expandedAccordion: true,
+  },
+};
+
+const accordionData = [
+  {
+    label: 'Lorem ipsum 1',
+    body: `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.`,
+    expandedAccordion: true,
+  },
+  {
+    label: 'Lorem ipsum 2',
+    body: `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.`,
+    expandedAccordion: false,
+  },
+  {
+    label: 'Lorem ipsum 3',
+    body: `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.`,
+    expandedAccordion: false,
+  },
+];
+
+// @ts-ignore
+export const Multiple: Story = {
+  render: () => <AccordionProvider sections={accordionData} />,
+};

packages/storybook/src/documentation/accordion.md

@@ -0,0 +1,3 @@
+# Accordion
+
+The accordion component is a container that can be collapsed and expanded. It is used to hide and show content.

packages/storybook/src/documentation/breadcrumb-nav.md

@@ -0,0 +1,3 @@
+# Breadcrumb navigation
+
+The breadcrumb nav component is used to show the user's current location within a website or application. It is a secondary navigation scheme that allows the user to see where the current page is in relation to the hierarchy of the website or application.