From 94e92a9f571d5f634db3fc6bfe7b547d97e07c47 Mon Sep 17 00:00:00 2001 From: Mark Teekman <128050096+markacato@users.noreply.github.com> Date: Wed, 15 May 2024 16:26:49 +0200 Subject: [PATCH] feat: add accordion (#19) Co-authored-by: Mark Teekman --- packages/storybook/config/preview.tsx | 7 +- .../src/css-utrecht-accordion.stories.tsx | 121 +++++++++++++ .../storybook/src/documentation/accordion.md | 3 + .../storybook/src/react-button.stories.tsx | 23 --- .../src/web-component-button.stories.tsx | 44 ----- .../src/common/tilburg/line.tokens.json | 14 ++ .../components/utrecht/accordion.tokens.json | 166 ++++++++++++++++++ 7 files changed, 310 insertions(+), 68 deletions(-) create mode 100644 packages/storybook/src/css-utrecht-accordion.stories.tsx create mode 100644 packages/storybook/src/documentation/accordion.md delete mode 100644 packages/storybook/src/react-button.stories.tsx delete mode 100644 packages/storybook/src/web-component-button.stories.tsx create mode 100644 proprietary/design-tokens/src/common/tilburg/line.tokens.json create mode 100644 proprietary/design-tokens/src/components/utrecht/accordion.tokens.json diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx index d0274a49..5de14e7b 100644 --- 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 `` 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 new file mode 100644 index 00000000..2aff0d58 --- /dev/null +++ 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 new file mode 100644 index 00000000..8d96d82e --- /dev/null +++ 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 deleted file mode 100644 index 9f16151e..00000000 --- a/packages/storybook/src/react-button.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react'; -import { Button } from '../../components-react/src/Button'; - -const meta = { - title: 'React Component/Button', - id: 'react-button', - component: Button, - args: { - children: 'Read more...', - }, - argTypes: { - type: { - control: { type: 'select' }, - options: [undefined, 'button', 'submit', 'reset'], - }, - }, -} satisfies Meta<typeof Button>; - -export default meta; - -type Story = StoryObj<typeof meta>; - -export const Default: Story = {}; diff --git a/packages/storybook/src/web-component-button.stories.tsx b/packages/storybook/src/web-component-button.stories.tsx deleted file mode 100644 index ff8cb320..00000000 --- a/packages/storybook/src/web-component-button.stories.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/* @license CC0-1.0 */ - -import type { Meta, StoryObj } from '@storybook/react'; -import readme from '@tilburg/components-css/button/README.md?raw'; -import { TilburgButton } from '@tilburg/web-components-react/src'; -import { PropsWithChildren } from 'react'; - -const Button = ({ children }: PropsWithChildren<{}>) => <TilburgButton>{children}</TilburgButton>; - -const meta = { - title: 'Web Component/Button', - id: 'web-component-button', - component: Button, - argTypes: { - children: { - name: 'Content', - description: 'Button text', - type: { - name: 'string', - required: true, - }, - defaultValue: '', - }, - }, - args: { - children: 'Opslaan en verder', - }, - tags: ['autodocs'], - parameters: { - docs: { - description: { - component: readme, - }, - }, - }, -} satisfies Meta<typeof Button>; - -export default meta; - -type Story = StoryObj<typeof meta>; - -export const Default: Story = { - name: 'Example button', -}; diff --git a/proprietary/design-tokens/src/common/tilburg/line.tokens.json b/proprietary/design-tokens/src/common/tilburg/line.tokens.json new file mode 100644 index 00000000..6667d3b4 --- /dev/null +++ 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 new file mode 100644 index 00000000..870ff882 --- /dev/null +++ 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" + } + } + } + } +}