feat: add accordion (#19)

Co-authored-by: Mark Teekman <[email protected]>
nl-design-system · May 15, 2024 · 94e92a9 · 94e92a9
1 parent c4954c6
commit 94e92a9
Show file tree

Hide file tree

Showing 7 changed files with 310 additions and 68 deletions.
diff --git a/packages/storybook/config/preview.tsx b/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

diff --git a/packages/storybook/src/css-utrecht-accordion.stories.tsx b/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} />,
+};
diff --git a/packages/storybook/src/documentation/accordion.md b/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.
diff --git a/packages/storybook/src/react-button.stories.tsx b/packages/storybook/src/react-button.stories.tsx
diff --git a/packages/storybook/src/web-component-button.stories.tsx b/packages/storybook/src/web-component-button.stories.tsx
diff --git a/proprietary/design-tokens/src/common/tilburg/line.tokens.json b/proprietary/design-tokens/src/common/tilburg/line.tokens.json
@@ -0,0 +1,14 @@
+{
+  "tilburg": {
+    "line": {
+      "border-color": {
+        "value": "{tilburg.color.gray.200}",
+        "type": "color"
+      },
+      "border-width": {
+        "value": "{tilburg.border-width.sm}",
+        "type": "borderWidth"
+      }
+    }
+  }
+}
diff --git a/proprietary/design-tokens/src/components/utrecht/accordion.tokens.json b/proprietary/design-tokens/src/components/utrecht/accordion.tokens.json
@@ -0,0 +1,166 @@
+{
+  "utrecht": {
+    "accordion": {
+      "border-radius": {
+        "type": "borderRadius",
+        "value": "0px"
+      },
+      "section": {
+        "border-block-end-width": {
+          "type": "borderWidth",
+          "value": "{tilburg.border-width.sm}"
+        },
+        "border-width": {
+          "type": "borderWidth",
+          "value": "auto"
+        },
+        "border-color": {
+          "value": "{tilburg.line.border-color}",
+          "type": "color"
+        }
+      },
+      "panel": {
+        "border-color": {
+          "value": "transparent",
+          "type": "color"
+        },
+        "border-width": {
+          "type": "borderWidth",
+          "value": "{tilburg.border-width.lg}"
+        },
+        "padding-block-end": {
+          "value": "{tilburg.space.block.rabbit}",
+          "type": "spacing"
+        },
+        "padding-block-start": {
+          "value": "{tilburg.space.block.rabbit}",
+          "type": "spacing"
+        },
+        "padding-inline-end": {
+          "value": "{tilburg.space.inline.mouse}",
+          "type": "spacing"
+        },
+        "padding-inline-start": {
+          "value": "{tilburg.space.inline.mouse}",
+          "type": "spacing"
+        }
+      },
+      "button": {
+        "font-size": {
+          "value": "{tilburg.document.font-size}",
+          "type": "fontSizes"
+        },
+        "line-height": {
+          "value": "{tilburg.document.line-height}",
+          "type": "lineHeights"
+        },
+        "icon": {
+          "margin-inline": {
+            "value": "{tilburg.space.text.mouse}",
+            "type": "spacing"
+          },
+          "size": {
+            "type": "sizing",
+            "value": "{tilburg.icon.functional.size}"
+          }
+        },
+        "padding-block-end": {
+          "value": "{tilburg.space.block.snail}",
+          "type": "spacing"
+        },
+        "padding-block-start": {
+          "value": "{tilburg.space.block.snail}",
+          "type": "spacing"
+        },
+        "padding-inline-end": {
+          "value": "{tilburg.space.inline.mouse}",
+          "type": "spacing"
+        },
+        "padding-inline-start": {
+          "value": "{tilburg.space.inline.mouse}",
+          "type": "spacing"
+        },
+        "hover": {
+          "background-color": {
+            "type": "color",
+            "value": "{tilburg.color.gray.100}"
+          },
+          "border-color": {
+            "value": "transparent",
+            "type": "color"
+          },
+          "color": {
+            "type": "color",
+            "value": "{tilburg.interaction.hover.color}"
+          }
+        },
+        "expanded": {
+          "background-color": {
+            "value": "{tilburg.color.gray.50}",
+            "type": "color"
+          },
+          "border-color": {
+            "value": "transparent",
+            "type": "color"
+          },
+          "color": {
+            "type": "color",
+            "value": "{tilburg.interaction.color}"
+          }
+        },
+        "background-color": {
+          "type": "color",
+          "value": "{tilburg.color.gray.50}"
+        },
+        "border-color": {
+          "value": "transparent",
+          "type": "color"
+        },
+        "color": {
+          "type": "color",
+          "value": "{tilburg.interaction.color}"
+        },
+        "focus": {
+          "background-color": {
+            "type": "color",
+            "value": "{tilburg.focus.background-color}"
+          },
+          "border-color": {
+            "value": "transparent",
+            "type": "color"
+          },
+          "color": {
+            "type": "color",
+            "value": "{tilburg.focus.color}"
+          }
+        },
+        "active": {
+          "background-color": {
+            "type": "color",
+            "value": "{tilburg.color.gray.200}"
+          },
+          "border-color": {
+            "value": "transparent",
+            "type": "color"
+          },
+          "color": {
+            "type": "color",
+            "value": "{tilburg.interaction.active.color}"
+          }
+        },
+        "border-width": {
+          "type": "borderWidth",
+          "value": "{tilburg.border-width.sm}"
+        },
+        "font-family": {
+          "value": "{tilburg.document.font-family}",
+          "type": "fontFamilies"
+        },
+        "font-weight": {
+          "value": "{tilburg.document.strong.font-weight}",
+          "type": "fontWeights"
+        }
+      }
+    }
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -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.