From 20fe1890ffb3c66a3f12a9d09ce88afaba7e4b44 Mon Sep 17 00:00:00 2001 From: Adham Abo Hasson Date: Thu, 15 Aug 2024 08:59:42 +0200 Subject: [PATCH] Feature/Action-Group (#535) closes #479 --------- Co-authored-by: Sjimmie Co-authored-by: Adham AboHasson --- .../storybook/src/community/action-group.md | 3 ++ .../src/community/action-group.stories.tsx | 49 +++++++++++++++++++ pnpm-lock.yaml | 39 +++------------ 3 files changed, 58 insertions(+), 33 deletions(-) create mode 100644 packages/storybook/src/community/action-group.md create mode 100644 packages/storybook/src/community/action-group.stories.tsx diff --git a/packages/storybook/src/community/action-group.md b/packages/storybook/src/community/action-group.md new file mode 100644 index 000000000..4ca013ccd --- /dev/null +++ b/packages/storybook/src/community/action-group.md @@ -0,0 +1,3 @@ + + +# Rijkshuisstijl Community action group component diff --git a/packages/storybook/src/community/action-group.stories.tsx b/packages/storybook/src/community/action-group.stories.tsx new file mode 100644 index 000000000..b86b44bbf --- /dev/null +++ b/packages/storybook/src/community/action-group.stories.tsx @@ -0,0 +1,49 @@ +import { Meta, StoryObj } from '@storybook/react/*'; +import { ButtonGroup as ActionGroup } from '@utrecht/component-library-react'; +import { Button } from '@utrecht/component-library-react/dist/css-module'; +import readme from './action-group.md?raw'; +const meta = { + title: 'Rijkshuisstijl/ActionGroup', + id: 'rijkshuisstijl-action-group', + component: ActionGroup, + argTypes: { + direction: { + description: 'Layout of the button group', + control: 'select', + options: ['column', 'row'], + }, + }, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: readme, + }, + }, + }, +} as Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + children: [ + , + , + ], + }, + name: 'Default', +}; + +export const Column: Story = { + args: { + direction: 'column', + children: [ + , + , + ], + }, + name: 'Column', +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 364761a9f..e5b4ec4f5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -85,6 +85,10 @@ importers: specifier: 5.5.3 version: 5.5.3 + apps/rhc-template/dist: {} + + apps/rhc-template/dist/types: {} + apps/rhc-templates: dependencies: next: @@ -143,10 +147,6 @@ importers: specifier: 5.5.3 version: 5.5.3 - apps/rhc-templates/dist: {} - - apps/rhc-templates/dist/types: {} - apps/rvs.rivm.nl: dependencies: next: @@ -13337,7 +13337,7 @@ snapshots: eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.16.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0) eslint-plugin-react: 7.34.3(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.0(eslint@8.57.0) @@ -13365,7 +13365,7 @@ snapshots: enhanced-resolve: 5.15.0 eslint: 8.57.0 eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.16.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.2 is-core-module: 2.13.1 @@ -13417,33 +13417,6 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): - dependencies: - array-includes: 3.1.7 - array.prototype.findlastindex: 1.2.3 - array.prototype.flat: 1.3.2 - array.prototype.flatmap: 1.3.2 - debug: 3.2.7 - doctrine: 2.1.0 - eslint: 8.57.0 - eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) - hasown: 2.0.0 - is-core-module: 2.13.1 - is-glob: 4.0.3 - minimatch: 3.1.2 - object.fromentries: 2.0.7 - object.groupby: 1.0.1 - object.values: 1.1.7 - semver: 6.3.1 - tsconfig-paths: 3.15.0 - optionalDependencies: - '@typescript-eslint/parser': 6.20.0(eslint@8.57.0)(typescript@5.5.3) - transitivePeerDependencies: - - eslint-import-resolver-typescript - - eslint-import-resolver-webpack - - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.16.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0): dependencies: array-includes: 3.1.7