From 4e65857343fe4775dae73a641dc56db9f0503880 Mon Sep 17 00:00:00 2001 From: Tessa Viergever <112861180+TessaViergever@users.noreply.github.com> Date: Tue, 18 Jun 2024 12:09:21 +0200 Subject: [PATCH] feat: add react stories of imported utrecht components --- .../src/react-stories/heading1.stories.tsx | 41 +++++++++ .../src/react-stories/heading2.stories.tsx | 43 +++++++++ .../src/react-stories/heading3.stories.tsx | 43 +++++++++ .../src/react-stories/heading4.stories.tsx | 43 +++++++++ .../src/react-stories/heading5.stories.tsx | 43 +++++++++ .../src/react-stories/heading6.stories.tsx | 43 +++++++++ .../src/react-stories/link.stories.tsx | 89 +++++++++++++++++++ .../src/react-stories/paragraph.stories.tsx | 57 ++++++++++++ .../react-stories/unordered-list.stories.tsx | 71 +++++++++++++++ 9 files changed, 473 insertions(+) create mode 100644 packages/storybook/src/react-stories/heading1.stories.tsx create mode 100644 packages/storybook/src/react-stories/heading2.stories.tsx create mode 100644 packages/storybook/src/react-stories/heading3.stories.tsx create mode 100644 packages/storybook/src/react-stories/heading4.stories.tsx create mode 100644 packages/storybook/src/react-stories/heading5.stories.tsx create mode 100644 packages/storybook/src/react-stories/heading6.stories.tsx create mode 100644 packages/storybook/src/react-stories/link.stories.tsx create mode 100644 packages/storybook/src/react-stories/paragraph.stories.tsx create mode 100644 packages/storybook/src/react-stories/unordered-list.stories.tsx diff --git a/packages/storybook/src/react-stories/heading1.stories.tsx b/packages/storybook/src/react-stories/heading1.stories.tsx new file mode 100644 index 00000000..e14ee6ad --- /dev/null +++ b/packages/storybook/src/react-stories/heading1.stories.tsx @@ -0,0 +1,41 @@ +/* @license CC0-1.0 */ + +import type { Meta, StoryObj } from '@storybook/react'; +import { Heading1 } from '@utrecht/component-library-react/dist/css-module'; +// import { Heading1 } from '@frameless/components-react'; // TODO: use frameless package instead + +const meta = { + title: 'React Component/Heading1', + id: 'react-heading1', + component: Heading1, + argTypes: { + children: { + name: 'Content', + description: 'Heading1 text', + type: { + name: 'string', + required: true, + }, + defaultValue: '', + }, + }, + args: { + children: 'Opslaan en verder', + }, + tags: ['autodocs'], + parameters: { + docs: { + description: { + // component: readme, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Frameless heading1', +}; diff --git a/packages/storybook/src/react-stories/heading2.stories.tsx b/packages/storybook/src/react-stories/heading2.stories.tsx new file mode 100644 index 00000000..a88c9978 --- /dev/null +++ b/packages/storybook/src/react-stories/heading2.stories.tsx @@ -0,0 +1,43 @@ +/* @license CC0-1.0 */ + +// import readme from '@frameless/components-css/heading1/README.md?raw'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Heading2 } from '@utrecht/component-library-react/dist/css-module'; +// import { Heading1 } from '@frameless/components-react'; // TODO: use frameless package instead +// import '@frameless/components-css/heading1/index.scss'; + +const meta = { + title: 'React Component/Heading2', + id: 'react-heading2', + component: Heading2, + argTypes: { + children: { + name: 'Content', + description: 'Heading2 text', + type: { + name: 'string', + required: true, + }, + defaultValue: '', + }, + }, + args: { + children: 'Opslaan en verder', + }, + tags: ['autodocs'], + parameters: { + docs: { + description: { + // component: readme, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Frameless heading2', +}; diff --git a/packages/storybook/src/react-stories/heading3.stories.tsx b/packages/storybook/src/react-stories/heading3.stories.tsx new file mode 100644 index 00000000..876305c3 --- /dev/null +++ b/packages/storybook/src/react-stories/heading3.stories.tsx @@ -0,0 +1,43 @@ +/* @license CC0-1.0 */ + +// import readme from '@frameless/components-css/heading1/README.md?raw'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Heading3 } from '@utrecht/component-library-react/dist/css-module'; +// import { Heading1 } from '@frameless/components-react'; // TODO: use frameless package instead +// import '@frameless/components-css/heading1/index.scss'; + +const meta = { + title: 'React Component/Heading3', + id: 'react-heading3', + component: Heading3, + argTypes: { + children: { + name: 'Content', + description: 'Heading3 text', + type: { + name: 'string', + required: true, + }, + defaultValue: '', + }, + }, + args: { + children: 'Opslaan en verder', + }, + tags: ['autodocs'], + parameters: { + docs: { + description: { + // component: readme, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Frameless heading3', +}; diff --git a/packages/storybook/src/react-stories/heading4.stories.tsx b/packages/storybook/src/react-stories/heading4.stories.tsx new file mode 100644 index 00000000..42df575d --- /dev/null +++ b/packages/storybook/src/react-stories/heading4.stories.tsx @@ -0,0 +1,43 @@ +/* @license CC0-1.0 */ + +// import readme from '@frameless/components-css/heading1/README.md?raw'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Heading4 } from '@utrecht/component-library-react/dist/css-module'; +// import { Heading1 } from '@frameless/components-react'; // TODO: use frameless package instead +// import '@frameless/components-css/heading1/index.scss'; + +const meta = { + title: 'React Component/Heading4', + id: 'react-heading4', + component: Heading4, + argTypes: { + children: { + name: 'Content', + description: 'Heading4 text', + type: { + name: 'string', + required: true, + }, + defaultValue: '', + }, + }, + args: { + children: 'Opslaan en verder', + }, + tags: ['autodocs'], + parameters: { + docs: { + description: { + // component: readme, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Frameless heading4', +}; diff --git a/packages/storybook/src/react-stories/heading5.stories.tsx b/packages/storybook/src/react-stories/heading5.stories.tsx new file mode 100644 index 00000000..3151d072 --- /dev/null +++ b/packages/storybook/src/react-stories/heading5.stories.tsx @@ -0,0 +1,43 @@ +/* @license CC0-1.0 */ + +// import readme from '@frameless/components-css/heading1/README.md?raw'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Heading5 } from '@utrecht/component-library-react/dist/css-module'; +// import { Heading1 } from '@frameless/components-react'; // TODO: use frameless package instead +// import '@frameless/components-css/heading1/index.scss'; + +const meta = { + title: 'React Component/Heading5', + id: 'react-heading5', + component: Heading5, + argTypes: { + children: { + name: 'Content', + description: 'Heading5 text', + type: { + name: 'string', + required: true, + }, + defaultValue: '', + }, + }, + args: { + children: 'Opslaan en verder', + }, + tags: ['autodocs'], + parameters: { + docs: { + description: { + // component: readme, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Frameless heading5', +}; diff --git a/packages/storybook/src/react-stories/heading6.stories.tsx b/packages/storybook/src/react-stories/heading6.stories.tsx new file mode 100644 index 00000000..8a3f24e4 --- /dev/null +++ b/packages/storybook/src/react-stories/heading6.stories.tsx @@ -0,0 +1,43 @@ +/* @license CC0-1.0 */ + +// import readme from '@frameless/components-css/heading1/README.md?raw'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Heading6 } from '@utrecht/component-library-react/dist/css-module'; +// import { Heading1 } from '@frameless/components-react'; // TODO: use frameless package instead +// import '@frameless/components-css/heading1/index.scss'; + +const meta = { + title: 'React Component/Heading6', + id: 'react-heading6', + component: Heading6, + argTypes: { + children: { + name: 'Content', + description: 'Heading6 text', + type: { + name: 'string', + required: true, + }, + defaultValue: '', + }, + }, + args: { + children: 'Opslaan en verder', + }, + tags: ['autodocs'], + parameters: { + docs: { + description: { + // component: readme, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Frameless heading6', +}; diff --git a/packages/storybook/src/react-stories/link.stories.tsx b/packages/storybook/src/react-stories/link.stories.tsx new file mode 100644 index 00000000..57527345 --- /dev/null +++ b/packages/storybook/src/react-stories/link.stories.tsx @@ -0,0 +1,89 @@ +/* @license CC0-1.0 */ + +import type { Meta, StoryObj } from '@storybook/react'; +import { Link, Paragraph } from '@utrecht/component-library-react/dist/css-module'; + +const meta = { + title: 'React Component/Link', + id: 'react-utrecht-link', + component: Link, + argTypes: { + children: { + name: 'Content', + type: { + name: 'string', + required: true, + }, + defaultValue: '', + }, + }, + args: { + children: '', + }, + tags: ['autodocs'], + parameters: { + docs: { + description: {}, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Link', + args: { + children: 'Frameless', + href: '#', + }, +}; + +export const LinkInParagraph: Story = { + name: 'Link in body text', + args: { + children: 'Op de website van Frameless', + href: '#', + }, + decorators: [ + (Story) => ( + + Afgelopen tijd hebben Robbert, Yolijn, Ali, Savi, Rowan, Tessa, Marwa, Angela en Bryan aan veel leuke projecten + gewerkt. {Story()} kun je een aantal van deze projecten zien. + + ), + ], +}; + +export const LinkInLeadParagraph: Story = { + name: 'Link in lead paragraph', + args: { + children: 'Op de website van Frameless', + href: '#', + }, + decorators: [ + (Story) => ( + + Afgelopen tijd hebben Robbert, Yolijn, Ali, Savi, Rowan, Tessa, Marwa, Angela en Bryan aan veel leuke projecten + gewerkt. {Story()} kun je een aantal van deze projecten zien. + + ), + ], +}; + +export const LinkInSmallPrint: Story = { + name: 'Link in small print', + args: { + children: 'Op de website van Frameless', + href: '#', + }, + decorators: [ + (Story) => ( + + Afgelopen tijd hebben Robbert, Yolijn, Ali, Savi, Rowan, Tessa, Marwa, Angela en Bryan aan veel leuke projecten + gewerkt. {Story()} kun je een aantal van deze projecten zien. + + ), + ], +}; diff --git a/packages/storybook/src/react-stories/paragraph.stories.tsx b/packages/storybook/src/react-stories/paragraph.stories.tsx new file mode 100644 index 00000000..35b65e6a --- /dev/null +++ b/packages/storybook/src/react-stories/paragraph.stories.tsx @@ -0,0 +1,57 @@ +/* @license CC0-1.0 */ + +import type { Meta, StoryObj } from '@storybook/react'; +import { Paragraph } from '@utrecht/component-library-react/dist/css-module'; +// import readme from 'paragraph.md?raw'; + +const meta = { + title: 'React Component/Paragraph', + id: 'react-utrecht-paragraph', + component: Paragraph, + argTypes: { + children: { + name: 'Content', + type: { + name: 'string', + required: true, + }, + defaultValue: '', + }, + }, + args: { + children: '', + }, + tags: ['autodocs'], + parameters: { + docs: { + description: {}, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Paragraph', + args: { + children: + 'Herbruikbare componenten onafhankelijk van huisstijl, daar mag je ons voor wakker maken! Frameless heeft al aan meerdere white-label design systems mogen werken en is trots op onze bijdrage aan NL Design System. Wij helpen ook graag als technisch partner bij het bouwen van toegankelijke en gebruiksvriendelijke web applicaties.', + }, +}; +export const LeadParagraph: Story = { + name: 'Lead paragraph', + args: { + ...Default.args, + lead: true, + }, +}; + +export const SmallPrintParagraph: Story = { + name: 'Small print', + args: { + ...Default.args, + small: true, + }, +}; diff --git a/packages/storybook/src/react-stories/unordered-list.stories.tsx b/packages/storybook/src/react-stories/unordered-list.stories.tsx new file mode 100644 index 00000000..a458a626 --- /dev/null +++ b/packages/storybook/src/react-stories/unordered-list.stories.tsx @@ -0,0 +1,71 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { UnorderedList, UnorderedListItem } from '@utrecht/component-library-react/dist/css-module'; + +const meta = { + title: 'React Component/Unordered list', + id: 'react-utrecht-unordered-list', + component: UnorderedList, + argTypes: { + children: { + name: 'Content', + type: { + name: 'string', + required: true, + }, + defaultValue: '', + }, + }, + args: { + children: '', + }, + tags: ['autodocs'], + parameters: { + docs: { + description: { + // component: readme, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Unordered list', + args: { + children: [ + + NL Design System: Yolijn en Robbert zijn sinds 2020 verantwoordelijk voor de architectuur,community en groei van + NL Design System. + , + + Utrecht Design System: meer dan 80 componenten ontwikkeld voor Utrecht in verschillende technieken (CSS, HTML, + React, Angular, Vue en als Web Component). Deze componenten worden inmiddels ook veel gebruikt door + uiteenlopende projecten in de NL Design System community. + , + + Den Haag Design System: begeleiding van het design system team, en leveranciers begeleiden met open source + bouwen volgens de NL Design System architectuur. + , + + Digitaal Loket van gemeente Utrecht: ontwikkeling van Strapi CMS voor de Producten en Diensten Catalogus, en de + nieuwe website ontwikkelen als headless frontend op basis van NL Design System. Dit project wordt in de loop van + 2024 zichtbaar op utrecht.nl. + , + + Huwelijksplanner voor gemeente Utrecht: front-end ontwikkeling Huwelijksplanner CMS op basis van NL Design + System componenten. + , + + Gemeente Voorbeeld: ontwikkeling van demo-website waar Vereniging van Nederlandse Gemeenten (VNG) + gebruikerstesten doet, om gemeenten op weg te helpen met voldoen aan de WMEBV met NL Design System. + , + + OpenCatalogi.nl - migratie naar NL Design System: migratie van codebase naar React componenten uit de NL Design + System community. + , + ], + }, +};