aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/collapsible
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-12-15 18:35:16 +0100
committerArmand Philippot <git@armandphilippot.com>2023-12-15 18:49:49 +0100
commit0f936ec0e7606cb79434d94096b6e113a7ce78eb (patch)
tree465ec7f66ac9459be6a18ac046e10357814c7b92 /src/components/molecules/collapsible
parent4e4d2eb25365be861e19f9756cf334ba2faa6911 (diff)
refactor(stories): migrate stories to CSF3 format
Diffstat (limited to 'src/components/molecules/collapsible')
-rw-r--r--src/components/molecules/collapsible/collapsible.stories.ts31
-rw-r--r--src/components/molecules/collapsible/collapsible.stories.tsx72
2 files changed, 31 insertions, 72 deletions
diff --git a/src/components/molecules/collapsible/collapsible.stories.ts b/src/components/molecules/collapsible/collapsible.stories.ts
new file mode 100644
index 0000000..e869306
--- /dev/null
+++ b/src/components/molecules/collapsible/collapsible.stories.ts
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Collapsible } from './collapsible';
+
+const meta = {
+ component: Collapsible,
+ title: 'Molecules/Collapsible',
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const heading = 'Your title';
+const body =
+ 'Eius et eum ex voluptas laboriosam aliquid quas necessitatibus. Molestiae eius voluptatem qui voluptas eaque et totam. Ut ipsum ea sit. Quos molestiae id est consequatur. Suscipit illo at. Omnis non suscipit. Qui itaque laboriosam quos ut est laudantium. Iusto recusandae excepturi quia labore voluptatem quod recusandae. Quod ducimus ut rem dolore et.';
+
+export const Collapsed: Story = {
+ args: {
+ children: body,
+ heading,
+ isCollapsed: true,
+ },
+};
+
+export const Expanded: Story = {
+ args: {
+ children: body,
+ heading,
+ isCollapsed: false,
+ },
+};
diff --git a/src/components/molecules/collapsible/collapsible.stories.tsx b/src/components/molecules/collapsible/collapsible.stories.tsx
deleted file mode 100644
index 7cac64d..0000000
--- a/src/components/molecules/collapsible/collapsible.stories.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Heading } from '../../atoms';
-import { Collapsible } from './collapsible';
-
-/**
- * HeadingButton - Storybook Meta
- */
-export default {
- title: 'Molecules/Collapsible',
- component: Collapsible,
- argTypes: {
- heading: {
- control: {
- type: 'text',
- },
- description: 'Define the collapsible heading.',
- type: {
- name: 'function',
- required: true,
- },
- },
- isCollapsed: {
- control: {
- type: 'boolean',
- },
- description: 'Define if the component should be collapsed or expanded.',
- table: {
- category: 'Options',
- defaultValue: { summary: false },
- },
- type: {
- name: 'boolean',
- required: true,
- },
- },
- },
-} as ComponentMeta<typeof Collapsible>;
-
-const Template: ComponentStory<typeof Collapsible> = ({ heading, ...args }) => (
- <Collapsible
- {...args}
- heading={
- <Heading isFake level={3}>
- {heading}
- </Heading>
- }
- />
-);
-
-const heading = 'Your title';
-const body =
- 'Eius et eum ex voluptas laboriosam aliquid quas necessitatibus. Molestiae eius voluptatem qui voluptas eaque et totam. Ut ipsum ea sit. Quos molestiae id est consequatur. Suscipit illo at. Omnis non suscipit. Qui itaque laboriosam quos ut est laudantium. Iusto recusandae excepturi quia labore voluptatem quod recusandae. Quod ducimus ut rem dolore et.';
-
-/**
- * Collapsible Stories - Collapsed
- */
-export const Collapsed = Template.bind({});
-Collapsed.args = {
- children: body,
- heading,
- isCollapsed: true,
-};
-
-/**
- * Collapsible Stories - Expanded
- */
-export const Expanded = Template.bind({});
-Expanded.args = {
- children: body,
- heading,
- isCollapsed: false,
-};