Docs(web-react): Introduce stories to the rest of the components #DS-476

packages/web-react/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AccordionOpenStateType, AccordionProps } from '../../types';
+import { Link } from '../Link';
+import { Pill } from '../Pill';
+import toggleValueByType from './demo/toggleValueByType';
+import content from './stories/content';
+import ReadMe from './README.md';
+import { Accordion, AccordionHeader, AccordionContent, AccordionItem } from '.';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    elementType: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'section' },
+      },
+    },
+    open: {
+      control: 'text',
+    },
+    toggle: {
+      control: 'text',
+    },
+  },
+  args: {
+    elementType: 'section',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+const AccordionWithHooks = (args: AccordionProps) => {
+  const [openState, setOpenState] = useState<AccordionOpenStateType>('AccordionItemExample1');
+
+  const toggle = (id: string) => {
+    setOpenState(toggleValueByType(id, openState));
+  };
+
+  return (
+    <Accordion {...args} open={openState} toggle={toggle}>
+      <AccordionItem id="AccordionItemExample0">
+        <AccordionHeader
+          slot={
+            <>
+              <Link href="/">Link</Link>
+              <Pill>3</Pill>
+            </>
+          }
+        >
+          Accordion Header #0
+        </AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample1">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #1</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample2">
+        <AccordionHeader>Accordion Header #2</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample3">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #3</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export const Playground: Story = {
+  name: 'Accordion',
+  render: (args) => <AccordionWithHooks {...args} />,
+};

packages/web-react/src/components/Accordion/AccordionContent.stories.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AccordionContentProps, AccordionOpenStateType } from '../../types';
+import { Link } from '../Link';
+import { Pill } from '../Pill';
+import toggleValueByType from './demo/toggleValueByType';
+import content from './stories/content';
+import ReadMe from './README.md';
+import { Accordion, AccordionHeader, AccordionContent, AccordionItem } from '.';
+
+const meta: Meta<typeof AccordionContent> = {
+  title: 'Components/Accordion',
+  component: AccordionContent,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+  },
+  args: {
+    children: 'Accordion Content',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AccordionContent>;
+
+const AccordionWithHooks = (args: AccordionContentProps) => {
+  const [openState, setOpenState] = useState<AccordionOpenStateType>('AccordionItemExample0');
+
+  const toggle = (id: string) => {
+    setOpenState(toggleValueByType(id, openState));
+  };
+
+  return (
+    <Accordion open={openState} toggle={toggle}>
+      <AccordionItem id="AccordionItemExample0">
+        <AccordionHeader
+          slot={
+            <>
+              <Link href="/">Link</Link>
+              <Pill>3</Pill>
+            </>
+          }
+        >
+          Accordion Header #0
+        </AccordionHeader>
+        <AccordionContent {...args} />
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample1">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #1</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample2">
+        <AccordionHeader>Accordion Header #2</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample3">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #3</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export const AccordionContentPlayground: Story = {
+  name: 'AccordionContent',
+  render: (args) => <AccordionWithHooks {...args} />,
+};

packages/web-react/src/components/Accordion/AccordionHeader.stories.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AccordionHeaderProps, AccordionOpenStateType } from '../../types';
+import { Link } from '../Link';
+import { Pill } from '../Pill';
+import toggleValueByType from './demo/toggleValueByType';
+import content from './stories/content';
+import ReadMe from './README.md';
+import { Accordion, AccordionHeader, AccordionContent, AccordionItem } from '.';
+
+const meta: Meta<typeof AccordionHeader> = {
+  title: 'Components/Accordion',
+  component: AccordionHeader,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    elementType: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'h3' },
+      },
+    },
+    slot: {
+      control: 'select',
+      options: ['pill', 'link & pill', undefined],
+      description:
+        'This is the place for the content of the slot. In the real code you can pass in any ' +
+        'children you want. In this demo we have predefined options: `pill` and `link & pill`. ' +
+        'Please note the predefined options in this demo are not customizable.',
+      mapping: {
+        pill: <Pill>3</Pill>,
+        'link & pill': (
+          <>
+            <Link href="/">Link</Link>
+            <Pill>3</Pill>
+          </>
+        ),
+      },
+    },
+  },
+  args: {
+    children: 'Accordion Header #0',
+    elementType: 'h3',
+    slot: undefined,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AccordionHeader>;
+
+const AccordionWithHooks = (args: AccordionHeaderProps) => {
+  const [openState, setOpenState] = useState<AccordionOpenStateType>('AccordionItemExample1');
+
+  const toggle = (id: string) => {
+    setOpenState(toggleValueByType(id, openState));
+  };
+
+  return (
+    <Accordion open={openState} toggle={toggle}>
+      <AccordionItem id="AccordionItemExample0">
+        <AccordionHeader {...args} />
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample1">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #1</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample2">
+        <AccordionHeader>Accordion Header #2</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample3">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #3</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export const AccordionHeaderPlayground: Story = {
+  name: 'AccordionHeader',
+  render: (args) => <AccordionWithHooks {...args} />,
+};

packages/web-react/src/components/Accordion/AccordionItem.stories.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AccordionItemProps, AccordionOpenStateType } from '../../types';
+import { Link } from '../Link';
+import { Pill } from '../Pill';
+import toggleValueByType from './demo/toggleValueByType';
+import content from './stories/content';
+import ReadMe from './README.md';
+import { Accordion, AccordionHeader, AccordionContent, AccordionItem } from '.';
+
+const meta: Meta<typeof AccordionItem> = {
+  title: 'Components/Accordion',
+  component: AccordionItem,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    elementType: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'article' },
+      },
+    },
+    id: {
+      control: 'text',
+    },
+  },
+  args: {
+    elementType: 'article',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AccordionItem>;
+
+const AccordionWithHooks = (args: AccordionItemProps) => {
+  const [openState, setOpenState] = useState<AccordionOpenStateType>('AccordionItemExample1');
+
+  const toggle = (id: string) => {
+    setOpenState(toggleValueByType(id, openState));
+  };
+
+  return (
+    <Accordion open={openState} toggle={toggle}>
+      <AccordionItem {...args} id="AccordionItemExample0">
+        <AccordionHeader
+          slot={
+            <>
+              <Link href="/">Link</Link>
+              <Pill>3</Pill>
+            </>
+          }
+        >
+          Accordion Header #0
+        </AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample1">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #1</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample2">
+        <AccordionHeader>Accordion Header #2</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample3">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #3</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export const AccordionItemPlayground: Story = {
+  name: 'AccordionItem',
+  render: (args) => <AccordionWithHooks {...args} />,
+};

packages/web-react/src/components/Accordion/README.md

@@ -175,6 +175,7 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types';
 | Name               | Type            | Default | Required | Description              |
 | ------------------ | --------------- | ------- | -------- | ------------------------ |
 | `children`         | `ReactNode`     | —       | ✔        | Header children node     |
+| `elementType`      | `ElementType`   | `h3`    | ✕        | Type of element          |
 | `slot`             | `ReactNode`     | —       | ✕        | Side slot in the header  |
 | `UNSAFE_className` | `string`        | —       | ✕        | Header custom class name |
 | `UNSAFE_style`     | `CSSProperties` | —       | ✕        | Header custom style      |