From 34672c22a010084e8ef70c3d999acd00cce35112 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Sun, 27 Aug 2023 22:59:24 +0200 Subject: [PATCH] refactor: migrate menulijst component from mdx to tsx --- .../menulijst/css/stories/default.stories.mdx | 29 --------- .../menulijst/css/stories/readme.stories.mdx | 8 --- .../menulijst/css/stories/tokens.stories.mdx | 11 ---- components/menulijst/css/story-template.jsx | 48 -------------- .../stories/components/Menulijst.stories.tsx | 65 +++++++++++++++++++ .../stories/components/Menulijst.tsx | 22 +++++++ 6 files changed, 87 insertions(+), 96 deletions(-) delete mode 100644 components/menulijst/css/stories/default.stories.mdx delete mode 100644 components/menulijst/css/stories/readme.stories.mdx delete mode 100644 components/menulijst/css/stories/tokens.stories.mdx delete mode 100644 components/menulijst/css/story-template.jsx create mode 100644 packages/storybook/stories/components/Menulijst.stories.tsx create mode 100644 packages/storybook/stories/components/Menulijst.tsx diff --git a/components/menulijst/css/stories/default.stories.mdx b/components/menulijst/css/stories/default.stories.mdx deleted file mode 100644 index 1a35276d7f8..00000000000 --- a/components/menulijst/css/stories/default.stories.mdx +++ /dev/null @@ -1,29 +0,0 @@ -{/* @license CC0-1.0 */} - -import { ArgsTable, Canvas, Meta, Story } from "@storybook/blocks"; -import { argTypes, decorators, defaultArgs, exampleArgs, Menulijst } from "../story-template"; -import "../index.scss"; - - - -# Menulijst - - - - {Menulijst.bind({})} - - - - diff --git a/components/menulijst/css/stories/readme.stories.mdx b/components/menulijst/css/stories/readme.stories.mdx deleted file mode 100644 index c063ca2ebb9..00000000000 --- a/components/menulijst/css/stories/readme.stories.mdx +++ /dev/null @@ -1,8 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Markdown, Meta } from "@storybook/blocks"; -import document from "../../README.md"; - - - -{document} diff --git a/components/menulijst/css/stories/tokens.stories.mdx b/components/menulijst/css/stories/tokens.stories.mdx deleted file mode 100644 index 05ed0c9a400..00000000000 --- a/components/menulijst/css/stories/tokens.stories.mdx +++ /dev/null @@ -1,11 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Meta } from "@storybook/blocks"; -import { ComponentTokensSection } from "../../../../documentation/components/ComponentTokensSection"; -import tokens from "../../../../proprietary/design-tokens/dist/index.json"; - - - -# Menulijst Design Tokens - - diff --git a/components/menulijst/css/story-template.jsx b/components/menulijst/css/story-template.jsx deleted file mode 100644 index 5b50fdb1206..00000000000 --- a/components/menulijst/css/story-template.jsx +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @license EUPL-1.2 - * Copyright (c) 2020-2022 Gemeente Utrecht - * Copyright (c) 2020-2022 Frameless B.V. - */ - -import clsx from 'clsx'; -import React from 'react'; - -export const argTypes = { - items: { - description: 'Items of the menu', - type: { - name: 'array', - required: true, - }, - }, -}; - -export const decorators = [ - (story) =>
{story()}
, -]; - -export const defaultArgs = { - items: [], -}; - -export const exampleArgs = { - items: [ - { href: 'https://example.com/1', textContent: 'Menu item label #1', active: true }, - { href: 'https://example.com/2', textContent: 'Menu item label #2' }, - { href: 'https://example.com/3', textContent: 'Menu item label #3' }, - ], -}; - -export const Menulijst = ({ items = defaultArgs.items }) => ( - -); - -export default Menulijst; diff --git a/packages/storybook/stories/components/Menulijst.stories.tsx b/packages/storybook/stories/components/Menulijst.stories.tsx new file mode 100644 index 00000000000..06ee0978de9 --- /dev/null +++ b/packages/storybook/stories/components/Menulijst.stories.tsx @@ -0,0 +1,65 @@ +/* @license CC0-1.0 */ + +import { Meta, StoryObj } from '@storybook/react'; +import readme from '@utrecht/components/menulijst/README.md?raw'; +import tokens from '@utrecht/design-tokens/dist/index.json'; +import React from 'react'; +import { Menulijst } from './Menulijst'; +import { designTokenStory } from './util'; + +const meta = { + title: 'CSS Component/Menulijst', + id: 'css-menulijst', + component: Menulijst, + argTypes: { + items: { + description: 'Items of the menu', + type: { + name: 'array', + required: true, + }, + }, + }, + decorators: [ + (story) =>
{story()}
, + ], + args: { + items: [], + }, + parameters: { + tokensPrefix: 'utrecht-menulijst', + status: { + type: 'WORK IN PROGRESS', + }, + tokens, + tokensDefinition: {}, + docs: { + description: { + component: readme, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + items: [ + { href: 'https://example.com/1', children: 'Menu item label #1', active: true }, + { href: 'https://example.com/2', children: 'Menu item label #2' }, + { href: 'https://example.com/3', children: 'Menu item label #3' }, + ], + }, + parameters: { + docs: { + description: { + story: 'Styling via `utrecht-menulijst` class name.', + }, + }, + }, +}; + +export const DesignTokens = designTokenStory(meta); diff --git a/packages/storybook/stories/components/Menulijst.tsx b/packages/storybook/stories/components/Menulijst.tsx new file mode 100644 index 00000000000..d5ff52d34c8 --- /dev/null +++ b/packages/storybook/stories/components/Menulijst.tsx @@ -0,0 +1,22 @@ +/** + * @license EUPL-1.2 + * Copyright (c) 2020-2022 Gemeente Utrecht + * Copyright (c) 2020-2022 Frameless B.V. + */ + +import clsx from 'clsx'; +import React, { PropsWithChildren, ReactNode } from 'react'; + +export const Menulijst = ({ + items = [], +}: PropsWithChildren<{ items: { active?: boolean; href: string; children: ReactNode }[] }>) => ( + +);