From d3f1dd55d5ae6799a17045cd97421275d3c05248 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Fri, 1 Sep 2023 15:24:48 +0200 Subject: [PATCH 1/2] Docs(web-react): Add missing info in READMEs --- .../src/components/Accordion/README.md | 1 + .../src/components/Breadcrumbs/README.md | 1 + .../src/components/Collapse/README.md | 19 ++++++++++--------- packages/web-react/src/types/breadcrumbs.ts | 2 +- 4 files changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/web-react/src/components/Accordion/README.md b/packages/web-react/src/components/Accordion/README.md index c3ab428abc..039b7fe551 100644 --- a/packages/web-react/src/components/Accordion/README.md +++ b/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 | diff --git a/packages/web-react/src/components/Breadcrumbs/README.md b/packages/web-react/src/components/Breadcrumbs/README.md index 3e5884837f..a6b6ea5079 100644 --- a/packages/web-react/src/components/Breadcrumbs/README.md +++ b/packages/web-react/src/components/Breadcrumbs/README.md @@ -56,6 +56,7 @@ Use custom content for ordered list as component's children instead of passing b | Name | Type | Default | Required | Description | | ------------------ | ------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | — | ✕ | Custom content to override items rendering from array | +| `elementType` | `ElementType` | `nav` | ✕ | Type of element used as wrapper | | `goBackTitle` | `string` | — | ✔ | Title/translation for back link to previous page on mobile. It's essential to be set along with items. If items property is not passed, backlink is to be created within children property. | | `items` | `BreadcrumbsItem[]` | — | ✕ | Navigation menu items | | `UNSAFE_className` | `string` | — | ✕ | Wrapper custom class name | diff --git a/packages/web-react/src/components/Collapse/README.md b/packages/web-react/src/components/Collapse/README.md index 203c11b60d..fad6806b9b 100644 --- a/packages/web-react/src/components/Collapse/README.md +++ b/packages/web-react/src/components/Collapse/README.md @@ -125,15 +125,16 @@ import { Button, UncontrolledCollapse } from '@lmc-eu/spirit-web-react/component ## API -| Name | Type | Default | Required | Description | -| ------------------------- | -------------------------------------------- | ---------- | -------- | -------------------------------------- | -| `collapsibleToBreakpoint` | [`mobile` \| `tablet` \| `desktop`] | — | ✕ | Handle for responsive breakpoint | -| `id` | `string` | `` | ✕ | Component id | -| `isOpen` | `bool` | — | ✕ | Is open on initialization | -| `hideOnCollapse` | `bool` | — | ✕ | Hides button when content is displayed | -| `renderTrigger` | `(render: CollapseRenderProps) => ReactNode` | — | ✕ | Properties for trigger render | -| `UNSAFE_className` | `string` | — | ✕ | Wrapper custom classname | -| `UNSAFE_style` | `CSSProperties` | — | ✕ | Wrapper custom style | +| Name | Type | Default | Required | Description | +| ------------------------- | -------------------------------------------- | ---------- | -------- | ------------------------------------------- | +| `collapsibleToBreakpoint` | [`mobile` \| `tablet` \| `desktop`] | — | ✕ | Handle for responsive breakpoint | +| `elementType` | [`span` \| `div`] | `div` | ✕ | Type of element used as wrapper and content | +| `id` | `string` | `` | ✕ | Component id | +| `isOpen` | `bool` | — | ✕ | Is open on initialization | +| `hideOnCollapse` | `bool` | — | ✕ | Hides button when content is displayed | +| `renderTrigger` | `(render: CollapseRenderProps) => ReactNode` | — | ✕ | Properties for trigger render | +| `UNSAFE_className` | `string` | — | ✕ | Wrapper custom classname | +| `UNSAFE_style` | `CSSProperties` | — | ✕ | Wrapper custom style | ## Render Toggle API diff --git a/packages/web-react/src/types/breadcrumbs.ts b/packages/web-react/src/types/breadcrumbs.ts index cf9ad2b1e7..5a512d1267 100644 --- a/packages/web-react/src/types/breadcrumbs.ts +++ b/packages/web-react/src/types/breadcrumbs.ts @@ -8,7 +8,7 @@ export type BreadcrumbsItem = { export interface AriaBreadcrumbsElementTypeProps { /** - * The HTML element or React element used to render the alert, e.g. 'div', 'span'. + * The HTML element or React element used to render the breadcrumbs, e.g. 'div', 'span'. * * @default 'nav' */ From f221eaa76c999c30438147ee2622af2e1d353f2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Fri, 1 Sep 2023 15:27:06 +0200 Subject: [PATCH 2/2] Docs(web-react): Introduce stories to the rest of the components #DS-476 Affected components are Accordion, Breadcrumbs, Collapse, Dropdown, Header, Icon, Pagination, ScrollView, Spinner, Tabs and Tooltip. --- .../components/Accordion/Accordion.stories.ts | 20 -- .../Accordion/Accordion.stories.tsx | 84 ++++++++ .../Accordion/AccordionContent.stories.tsx | 75 +++++++ .../Accordion/AccordionHeader.stories.tsx | 91 ++++++++ .../Accordion/AccordionItem.stories.tsx | 81 ++++++++ .../UncontrolledAccordion.stories.tsx | 73 +++++++ .../components/Accordion/stories/content.tsx | 20 ++ .../Breadcrumbs/Breadcrumbs.stories.ts | 18 -- .../Breadcrumbs/Breadcrumbs.stories.tsx | 59 ++++++ .../components/Collapse/Collapse.stories.ts | 20 -- .../components/Collapse/Collapse.stories.tsx | 73 +++++++ .../Collapse/UncontrolledCollapse.stories.tsx | 71 +++++++ .../components/Collapse/stories/content.tsx | 23 +++ .../components/Dropdown/Dropdown.stories.ts | 11 - .../components/Dropdown/Dropdown.stories.tsx | 87 ++++++++ .../src/components/Dropdown/demo/argTypes.ts | 21 -- .../src/components/Header/Header.stories.ts | 21 -- .../src/components/Header/Header.stories.tsx | 187 +++++++++++++++++ .../Header/HeaderDesktopActions.stories.tsx | 183 ++++++++++++++++ .../Header/HeaderDialog.stories.tsx | 194 +++++++++++++++++ .../Header/HeaderDialogActions.stories.tsx | 183 ++++++++++++++++ .../Header/HeaderDialogButton.stories.tsx | 174 ++++++++++++++++ .../HeaderDialogCloseButton.stories.tsx | 179 ++++++++++++++++ .../Header/HeaderDialogLink.stories.tsx | 183 ++++++++++++++++ .../Header/HeaderDialogNav.stories.tsx | 173 ++++++++++++++++ .../Header/HeaderDialogNavItem.stories.tsx | 173 ++++++++++++++++ .../Header/HeaderDialogText.stories.tsx | 177 ++++++++++++++++ .../components/Header/HeaderLink.stories.tsx | 181 ++++++++++++++++ .../Header/HeaderMobileActions.stories.tsx | 195 ++++++++++++++++++ .../components/Header/HeaderNav.stories.tsx | 173 ++++++++++++++++ .../Header/HeaderNavItem.stories.tsx | 173 ++++++++++++++++ .../src/components/Header/demo/argTypes.ts | 15 -- .../src/components/Icon/Icon.stories.ts | 21 -- .../src/components/Icon/Icon.stories.tsx | 49 +++++ .../src/components/Icon/demo/argTypes.ts | 26 --- .../Pagination/Pagination.stories.ts | 20 -- .../Pagination/Pagination.stories.tsx | 53 +++++ .../PaginationButtonLink.stories.tsx | 36 ++++ .../Pagination/PaginationItem.stories.tsx | 53 +++++ .../Pagination/PaginationLink.stories.tsx | 74 +++++++ .../Pagination/PaginationLinkNext.stories.tsx | 60 ++++++ .../PaginationLinkPrevious.stories.tsx | 60 ++++++ .../components/Pagination/demo/argTypes.ts | 1 - .../ScrollView/ScrollView.stories.ts | 18 -- .../ScrollView/ScrollView.stories.tsx | 149 +++++++++++++ .../src/components/Spinner/Spinner.stories.ts | 18 -- .../components/Spinner/Spinner.stories.tsx | 36 ++++ .../src/components/Spinner/demo/argTypes.ts | 11 - .../src/components/Tabs/Tab.stories.ts | 18 -- .../components/Tabs/TabContent.stories.tsx | 46 +++++ .../src/components/Tabs/TabContent.tsx | 2 +- .../src/components/Tabs/TabItem.stories.tsx | 48 +++++ .../web-react/src/components/Tabs/TabItem.tsx | 2 +- .../src/components/Tabs/TabLink.stories.tsx | 57 +++++ .../web-react/src/components/Tabs/TabLink.tsx | 2 +- .../src/components/Tabs/TabList.stories.tsx | 46 +++++ .../web-react/src/components/Tabs/TabList.tsx | 2 +- .../src/components/Tabs/TabPane.stories.tsx | 48 +++++ .../web-react/src/components/Tabs/TabPane.tsx | 2 +- .../src/components/Tabs/Tabs.stories.tsx | 46 +++++ .../web-react/src/components/Tabs/Tabs.tsx | 2 +- .../Tabs/UncontrolledTabs.stories.tsx | 42 ++++ .../src/components/Tooltip/Tooltip.stories.ts | 12 -- .../components/Tooltip/Tooltip.stories.tsx | 61 ++++++ .../Tooltip/UncontrolledTooltip.stories.tsx | 58 ++++++ .../src/components/Tooltip/demo/argTypes.ts | 27 --- 66 files changed, 4293 insertions(+), 304 deletions(-) delete mode 100644 packages/web-react/src/components/Accordion/Accordion.stories.ts create mode 100644 packages/web-react/src/components/Accordion/Accordion.stories.tsx create mode 100644 packages/web-react/src/components/Accordion/AccordionContent.stories.tsx create mode 100644 packages/web-react/src/components/Accordion/AccordionHeader.stories.tsx create mode 100644 packages/web-react/src/components/Accordion/AccordionItem.stories.tsx create mode 100644 packages/web-react/src/components/Accordion/UncontrolledAccordion.stories.tsx create mode 100644 packages/web-react/src/components/Accordion/stories/content.tsx delete mode 100644 packages/web-react/src/components/Breadcrumbs/Breadcrumbs.stories.ts create mode 100644 packages/web-react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx delete mode 100644 packages/web-react/src/components/Collapse/Collapse.stories.ts create mode 100644 packages/web-react/src/components/Collapse/Collapse.stories.tsx create mode 100644 packages/web-react/src/components/Collapse/UncontrolledCollapse.stories.tsx create mode 100644 packages/web-react/src/components/Collapse/stories/content.tsx delete mode 100644 packages/web-react/src/components/Dropdown/Dropdown.stories.ts create mode 100644 packages/web-react/src/components/Dropdown/Dropdown.stories.tsx delete mode 100644 packages/web-react/src/components/Dropdown/demo/argTypes.ts delete mode 100644 packages/web-react/src/components/Header/Header.stories.ts create mode 100644 packages/web-react/src/components/Header/Header.stories.tsx create mode 100644 packages/web-react/src/components/Header/HeaderDesktopActions.stories.tsx create mode 100644 packages/web-react/src/components/Header/HeaderDialog.stories.tsx create mode 100644 packages/web-react/src/components/Header/HeaderDialogActions.stories.tsx create mode 100644 packages/web-react/src/components/Header/HeaderDialogButton.stories.tsx create mode 100644 packages/web-react/src/components/Header/HeaderDialogCloseButton.stories.tsx create mode 100644 packages/web-react/src/components/Header/HeaderDialogLink.stories.tsx create mode 100644 packages/web-react/src/components/Header/HeaderDialogNav.stories.tsx create mode 100644 packages/web-react/src/components/Header/HeaderDialogNavItem.stories.tsx create mode 100644 packages/web-react/src/components/Header/HeaderDialogText.stories.tsx create mode 100644 packages/web-react/src/components/Header/HeaderLink.stories.tsx create mode 100644 packages/web-react/src/components/Header/HeaderMobileActions.stories.tsx create mode 100644 packages/web-react/src/components/Header/HeaderNav.stories.tsx create mode 100644 packages/web-react/src/components/Header/HeaderNavItem.stories.tsx delete mode 100644 packages/web-react/src/components/Header/demo/argTypes.ts delete mode 100644 packages/web-react/src/components/Icon/Icon.stories.ts create mode 100644 packages/web-react/src/components/Icon/Icon.stories.tsx delete mode 100644 packages/web-react/src/components/Icon/demo/argTypes.ts delete mode 100644 packages/web-react/src/components/Pagination/Pagination.stories.ts create mode 100644 packages/web-react/src/components/Pagination/Pagination.stories.tsx create mode 100644 packages/web-react/src/components/Pagination/PaginationButtonLink.stories.tsx create mode 100644 packages/web-react/src/components/Pagination/PaginationItem.stories.tsx create mode 100644 packages/web-react/src/components/Pagination/PaginationLink.stories.tsx create mode 100644 packages/web-react/src/components/Pagination/PaginationLinkNext.stories.tsx create mode 100644 packages/web-react/src/components/Pagination/PaginationLinkPrevious.stories.tsx delete mode 100644 packages/web-react/src/components/Pagination/demo/argTypes.ts delete mode 100644 packages/web-react/src/components/ScrollView/ScrollView.stories.ts create mode 100644 packages/web-react/src/components/ScrollView/ScrollView.stories.tsx delete mode 100644 packages/web-react/src/components/Spinner/Spinner.stories.ts create mode 100644 packages/web-react/src/components/Spinner/Spinner.stories.tsx delete mode 100644 packages/web-react/src/components/Spinner/demo/argTypes.ts delete mode 100644 packages/web-react/src/components/Tabs/Tab.stories.ts create mode 100644 packages/web-react/src/components/Tabs/TabContent.stories.tsx create mode 100644 packages/web-react/src/components/Tabs/TabItem.stories.tsx create mode 100644 packages/web-react/src/components/Tabs/TabLink.stories.tsx create mode 100644 packages/web-react/src/components/Tabs/TabList.stories.tsx create mode 100644 packages/web-react/src/components/Tabs/TabPane.stories.tsx create mode 100644 packages/web-react/src/components/Tabs/Tabs.stories.tsx create mode 100644 packages/web-react/src/components/Tabs/UncontrolledTabs.stories.tsx delete mode 100644 packages/web-react/src/components/Tooltip/Tooltip.stories.ts create mode 100644 packages/web-react/src/components/Tooltip/Tooltip.stories.tsx create mode 100644 packages/web-react/src/components/Tooltip/UncontrolledTooltip.stories.tsx delete mode 100644 packages/web-react/src/components/Tooltip/demo/argTypes.ts diff --git a/packages/web-react/src/components/Accordion/Accordion.stories.ts b/packages/web-react/src/components/Accordion/Accordion.stories.ts deleted file mode 100644 index 420cadf1d9..0000000000 --- a/packages/web-react/src/components/Accordion/Accordion.stories.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import Accordion from './Accordion'; - -export default { - title: 'Components/Accordion', - parameters: { - docs: { - description: { - component: ` - [Spirit Accordion](https://spirit.supernova-docs.io/spirit/latest/components/accordion/overview.html) - - Toggle the visibility of content across your project with Accordion. - `, - }, - }, - }, -} as ComponentMeta; - -export { default as Accordion } from './demo/Accordion'; -export { default as AccordionUncontrolled } from './demo/AccordionUncontrolled'; diff --git a/packages/web-react/src/components/Accordion/Accordion.stories.tsx b/packages/web-react/src/components/Accordion/Accordion.stories.tsx new file mode 100644 index 0000000000..8581ac4afb --- /dev/null +++ b/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 = { + title: 'Components/Accordion', + component: Accordion, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + elementType: { + control: 'text', + table: { + defaultValue: { summary: 'section' }, + }, + }, + open: { + control: 'text', + }, + toggle: { + control: 'text', + }, + }, + args: { + elementType: 'section', + }, +}; + +export default meta; +type Story = StoryObj; + +const AccordionWithHooks = (args: AccordionProps) => { + const [openState, setOpenState] = useState('AccordionItemExample1'); + + const toggle = (id: string) => { + setOpenState(toggleValueByType(id, openState)); + }; + + return ( + + + + Link + 3 + + } + > + Accordion Header #0 + + {content} + + + 3}>Accordion Header #1 + {content} + + + Accordion Header #2 + {content} + + + 3}>Accordion Header #3 + {content} + + + ); +}; + +export const Playground: Story = { + name: 'Accordion', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Accordion/AccordionContent.stories.tsx b/packages/web-react/src/components/Accordion/AccordionContent.stories.tsx new file mode 100644 index 0000000000..82c9842aa9 --- /dev/null +++ b/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 = { + title: 'Components/Accordion', + component: AccordionContent, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'text', + }, + }, + args: { + children: 'Accordion Content', + }, +}; + +export default meta; +type Story = StoryObj; + +const AccordionWithHooks = (args: AccordionContentProps) => { + const [openState, setOpenState] = useState('AccordionItemExample0'); + + const toggle = (id: string) => { + setOpenState(toggleValueByType(id, openState)); + }; + + return ( + + + + Link + 3 + + } + > + Accordion Header #0 + + + + + 3}>Accordion Header #1 + {content} + + + Accordion Header #2 + {content} + + + 3}>Accordion Header #3 + {content} + + + ); +}; + +export const AccordionContentPlayground: Story = { + name: 'AccordionContent', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Accordion/AccordionHeader.stories.tsx b/packages/web-react/src/components/Accordion/AccordionHeader.stories.tsx new file mode 100644 index 0000000000..b102f3b2be --- /dev/null +++ b/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 = { + title: 'Components/Accordion', + component: AccordionHeader, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + 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: 3, + 'link & pill': ( + <> + Link + 3 + + ), + }, + }, + }, + args: { + children: 'Accordion Header #0', + elementType: 'h3', + slot: undefined, + }, +}; + +export default meta; +type Story = StoryObj; + +const AccordionWithHooks = (args: AccordionHeaderProps) => { + const [openState, setOpenState] = useState('AccordionItemExample1'); + + const toggle = (id: string) => { + setOpenState(toggleValueByType(id, openState)); + }; + + return ( + + + + {content} + + + 3}>Accordion Header #1 + {content} + + + Accordion Header #2 + {content} + + + 3}>Accordion Header #3 + {content} + + + ); +}; + +export const AccordionHeaderPlayground: Story = { + name: 'AccordionHeader', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Accordion/AccordionItem.stories.tsx b/packages/web-react/src/components/Accordion/AccordionItem.stories.tsx new file mode 100644 index 0000000000..c05ef28c62 --- /dev/null +++ b/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 = { + title: 'Components/Accordion', + component: AccordionItem, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + elementType: { + control: 'text', + table: { + defaultValue: { summary: 'article' }, + }, + }, + id: { + control: 'text', + }, + }, + args: { + elementType: 'article', + }, +}; + +export default meta; +type Story = StoryObj; + +const AccordionWithHooks = (args: AccordionItemProps) => { + const [openState, setOpenState] = useState('AccordionItemExample1'); + + const toggle = (id: string) => { + setOpenState(toggleValueByType(id, openState)); + }; + + return ( + + + + Link + 3 + + } + > + Accordion Header #0 + + {content} + + + 3}>Accordion Header #1 + {content} + + + Accordion Header #2 + {content} + + + 3}>Accordion Header #3 + {content} + + + ); +}; + +export const AccordionItemPlayground: Story = { + name: 'AccordionItem', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Accordion/UncontrolledAccordion.stories.tsx b/packages/web-react/src/components/Accordion/UncontrolledAccordion.stories.tsx new file mode 100644 index 0000000000..c46448c095 --- /dev/null +++ b/packages/web-react/src/components/Accordion/UncontrolledAccordion.stories.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { Link } from '../Link'; +import { Pill } from '../Pill'; +import content from './stories/content'; +import ReadMe from './README.md'; +import { Accordion, AccordionHeader, AccordionContent, AccordionItem, UncontrolledAccordion } from '.'; + +const meta: Meta = { + title: 'Components/Accordion', + component: UncontrolledAccordion, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + defaultOpen: { + control: 'array', + }, + elementType: { + control: 'text', + table: { + defaultValue: { summary: 'section' }, + }, + }, + stayOpen: { + control: 'boolean', + }, + }, + args: { + defaultOpen: ['AccordionItemExample1'], + elementType: 'section', + }, +}; + +export default meta; +type Story = StoryObj; + +export const UncontrolledAccordionPlayground: Story = { + name: 'UncontrolledAccordion', + render: (args) => ( + + + + Link + 3 + + } + > + Accordion Header #0 + + {content} + + + 3}>Accordion Header #1 + {content} + + + Accordion Header #2 + {content} + + + 3}>Accordion Header #3 + {content} + + + ), +}; diff --git a/packages/web-react/src/components/Accordion/stories/content.tsx b/packages/web-react/src/components/Accordion/stories/content.tsx new file mode 100644 index 0000000000..cf46aad11b --- /dev/null +++ b/packages/web-react/src/components/Accordion/stories/content.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +export default ( +

+ Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae curabitur odio + leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at sem, mauris aenean + aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus ultricies sollicitudin + ligula. Sem proin, nibh maximus donec nec commodo molestie nulla sapien nec commodo, commodo et fermentum et. Mauris + posuere, mi orci et nisi et iaculis lorem fringilla sed mauris auctor, lorem tempus a pulvinar felis scelerisque. + Suscipit vivamus, elit vel arcu lorem fringilla finibus quis sit amet ligula convallis, consectetur potenti aenean + efficitur. +
+ Non suspendisse, maximus suscipit tortor non mauris bibendum felis scelerisque bibendum, nam augue scelerisque non + nulla. Erat nec, integer nec egestas integer consequat cursus sed porttitor, dolor sit amet lorem ipsum consectetur + porta. Condimentum urna, suspendisse mauris ligula duis id vivamus quis odio eget, integer ornare fermentum et + vehicula. Consequat bibendum, dui fusce gravida iaculis urna integer vitae id, ante purus nullam et nisl. Accumsan + arcu, nunc nulla faucibus purus vivamus facilisis augue, volutpat convallis eget suscipit. Tellus nunc ut enim et, + urna fusce pulvinar fusce et mauris donec, vitae odio morbi risus aliquet. et. +

+); diff --git a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.stories.ts b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.stories.ts deleted file mode 100644 index c8b7c739e0..0000000000 --- a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.stories.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import argTypes from './demo/argTypes'; -import Breadcrumbs from './Breadcrumbs'; - -export default { - title: 'Components/Breadcrumbs', - component: Breadcrumbs, - parameters: { - docs: { - description: { - component: "Breadcrumbs present a trail to each previous page in relation to website's structure.", - }, - }, - }, - argTypes, -} as ComponentMeta; - -export { default as Breadcrumbs } from './demo/BreadcrumbsDefault'; diff --git a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx new file mode 100644 index 0000000000..2826c3f12d --- /dev/null +++ b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { Breadcrumbs } from './Breadcrumbs'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Breadcrumbs', + component: Breadcrumbs, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + elementType: { + control: 'text', + table: { + defaultValue: { summary: 'nav' }, + }, + }, + goBackTitle: { + control: 'text', + table: { + defaultValue: { summary: 'Back' }, + }, + }, + }, + args: { + elementType: 'nav', + goBackTitle: 'Back', + items: [ + { + title: 'Root', + url: '#rootUrl', + }, + { + title: 'Category', + url: '#categoryUrl', + }, + { + title: 'Subcategory', + url: '#subcategoryUrl', + }, + { + title: 'Current page', + url: '#currentUrl', + }, + ], + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + name: 'Breadcrumbs', +}; diff --git a/packages/web-react/src/components/Collapse/Collapse.stories.ts b/packages/web-react/src/components/Collapse/Collapse.stories.ts deleted file mode 100644 index 89d78c85e5..0000000000 --- a/packages/web-react/src/components/Collapse/Collapse.stories.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import Collapse from './Collapse'; - -export default { - title: 'Components/Collapse', - parameters: { - docs: { - description: { - component: ` - [Spirit Collapse](https://spirit.supernova-docs.io/spirit/latest/components/collapse/overview.html) - - Toggle the visibility of content across your project with Collapse. - `, - }, - }, - }, -} as ComponentMeta; - -export { default as Collapse } from './demo/Collapse'; -export { default as CollapseUncontrolled } from './demo/CollapseUncontrolled'; diff --git a/packages/web-react/src/components/Collapse/Collapse.stories.tsx b/packages/web-react/src/components/Collapse/Collapse.stories.tsx new file mode 100644 index 0000000000..c549a33cfc --- /dev/null +++ b/packages/web-react/src/components/Collapse/Collapse.stories.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { SpiritCollapseProps } from '../../types'; +import { Button } from '../Button'; +import content from './stories/content'; +import ReadMe from './README.md'; +import { Collapse, useCollapse } from '.'; + +const meta: Meta = { + title: 'Components/Collapse', + component: Collapse, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + collapsibleToBreakpoint: { + control: 'select', + options: ['mobile', 'tablet', 'desktop', undefined], + table: { + defaultValue: { summary: undefined }, + }, + }, + elementType: { + control: 'text', + table: { + defaultValue: { summary: 'div' }, + }, + }, + id: { + control: 'text', + }, + isOpen: { + control: 'boolean', + }, + transitionDuration: { + control: 'number', + table: { + defaultValue: { summary: 250 }, + }, + }, + }, + args: { + elementType: 'div', + id: 'collapseExample', + isOpen: false, + transitionDuration: 250, + }, +}; + +export default meta; +type Story = StoryObj; + +const CollapseWithHooks = (args: SpiritCollapseProps) => { + const { isOpen, toggleHandler } = useCollapse(true); + + return ( +
+ + + {content} + +
+ ); +}; + +export const Playground: Story = { + name: 'Collapse', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Collapse/UncontrolledCollapse.stories.tsx b/packages/web-react/src/components/Collapse/UncontrolledCollapse.stories.tsx new file mode 100644 index 0000000000..f36d5f662b --- /dev/null +++ b/packages/web-react/src/components/Collapse/UncontrolledCollapse.stories.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { Button } from '../Button'; +import content from './stories/content'; +import ReadMe from './README.md'; +import { UncontrolledCollapse } from '.'; + +const meta: Meta = { + title: 'Components/Collapse', + component: UncontrolledCollapse, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + collapsibleToBreakpoint: { + control: 'select', + options: ['mobile', 'tablet', 'desktop', undefined], + table: { + defaultValue: { summary: undefined }, + }, + }, + elementType: { + control: 'text', + table: { + defaultValue: { summary: 'div' }, + }, + }, + hideOnCollapse: { + control: 'boolean', + }, + id: { + control: 'text', + }, + isOpen: { + control: 'boolean', + }, + transitionDuration: { + control: 'number', + table: { + defaultValue: { summary: 250 }, + }, + }, + }, + args: { + elementType: 'div', + id: 'collapseExample', + isOpen: false, + transitionDuration: 250, + }, +}; + +export default meta; +type Story = StoryObj; + +export const UncontrolledCollapsePlayground: Story = { + name: 'UncontrolledCollapse', + render: (args) => ( + ( + + )} + > + {content} + + ), +}; diff --git a/packages/web-react/src/components/Collapse/stories/content.tsx b/packages/web-react/src/components/Collapse/stories/content.tsx new file mode 100644 index 0000000000..5830486a36 --- /dev/null +++ b/packages/web-react/src/components/Collapse/stories/content.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +export default ( + <> +

+ Condimentum odio, pulvinar et sollicitudin accumsan ac hendrerit vestibulum commodo, molestie laoreet dui sit + amet. Molestie consectetur, sed ac felis scelerisque lectus accumsan purus id dolor sed vitae, praesent aliquam + dolor quis ornare. Nulla sit amet, rhoncus at quis odio et iaculis lacinia suscipit vivamus sodales, nunc id + condimentum felis. Consectetur nec commodo, praesent et elit magna purus molestie cursus molestie, libero ut + venenatis erat id et nisi. Quam posuere, aliquam quam leo vitae tellus semper eget nunc, ultricies adipiscing sit + amet accumsan. Lorem rutrum, porttitor ante mauris suspendisse ultricies consequat purus, congue a commodo magna + et. +

+

+ Nunc potenti, mauris sollicitudin purus augue justo et condimentum, vivamus a ornare consequat. Aliquet ut, metus + libero vitae volutpat felis a iaculis sapien dolor quis, augue fermentum donec urna. Sem facilisis, finibus non + mauris suspendisse varius et nisi egestas potenti, praesent interdum nulla sem. Sodales dui, quam sagittis sapien + elit lorem fringilla hendrerit nunc, porttitor quis dolor ut sit amet. Scelerisque aliquet, maximus integer cursus + fusce vitae proin lacinia sed vitae, bibendum suspendisse nunc ut enim et at. Sem turpis, iaculis a eget non + mauris nulla vitae augue, molestie porttitor luctus bibendum. +

+ +); diff --git a/packages/web-react/src/components/Dropdown/Dropdown.stories.ts b/packages/web-react/src/components/Dropdown/Dropdown.stories.ts deleted file mode 100644 index cdeaaad95b..0000000000 --- a/packages/web-react/src/components/Dropdown/Dropdown.stories.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import argTypes from './demo/argTypes'; -import Dropdown from './Dropdown'; - -export default { - title: 'Components/Dropdown', - component: Dropdown, - argTypes, -} as ComponentMeta; - -export { default as Dropdown } from './demo/Dropdown'; diff --git a/packages/web-react/src/components/Dropdown/Dropdown.stories.tsx b/packages/web-react/src/components/Dropdown/Dropdown.stories.tsx new file mode 100644 index 0000000000..216c3738b8 --- /dev/null +++ b/packages/web-react/src/components/Dropdown/Dropdown.stories.tsx @@ -0,0 +1,87 @@ +import React, { Ref } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { DropdownFullWidthModes, DropdownPlacements } from '../../types'; +import { Button, Icon, Text } from '..'; +import { Dropdown } from '.'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Dropdown', + component: Dropdown, + parameters: { + docs: { + page: () => {ReadMe}, + }, + layout: 'centered', + }, + argTypes: { + children: { + control: 'object', + }, + enableAutoClose: { + control: 'boolean', + table: { + defaultValue: { summary: true }, + }, + }, + fullWidthMode: { + control: 'select', + options: [...Object.values(DropdownFullWidthModes), undefined], + table: { + defaultValue: { summary: undefined }, + }, + }, + id: { + control: 'text', + }, + placement: { + control: 'select', + options: [...Object.values(DropdownPlacements), undefined], + table: { + defaultValue: { summary: DropdownPlacements.BOTTOM_LEFT }, + }, + }, + }, + args: { + children: ( + <> + + + Information + + + + More links + + + + Profile + + + + Help + + + ), + id: 'DropdownExample', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + name: 'Dropdown', + render: (args) => ( + ( + + )} + /> + ), +}; diff --git a/packages/web-react/src/components/Dropdown/demo/argTypes.ts b/packages/web-react/src/components/Dropdown/demo/argTypes.ts deleted file mode 100644 index 74a36de5a9..0000000000 --- a/packages/web-react/src/components/Dropdown/demo/argTypes.ts +++ /dev/null @@ -1,21 +0,0 @@ -export default { - fullWidthMode: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - enableAutoClose: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - placement: { - control: { - type: 'select', - options: ['bottom-left', 'bottom-right', 'top-left', 'top-right'], - }, - defaultValue: 'bottom-left', - }, -}; diff --git a/packages/web-react/src/components/Header/Header.stories.ts b/packages/web-react/src/components/Header/Header.stories.ts deleted file mode 100644 index 7bdafd8fcd..0000000000 --- a/packages/web-react/src/components/Header/Header.stories.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import argTypes from './demo/argTypes'; -import Header from './Header'; - -export default { - title: 'Components/Header', - component: Header, - parameters: { - docs: { - description: { - component: 'Provide page header.', - }, - }, - }, - args: { - color: 'inverted', - }, - argTypes, -} as ComponentMeta; - -export { default as Header } from './demo/Header'; diff --git a/packages/web-react/src/components/Header/Header.stories.tsx b/packages/web-react/src/components/Header/Header.stories.tsx new file mode 100644 index 0000000000..360db720d9 --- /dev/null +++ b/packages/web-react/src/components/Header/Header.stories.tsx @@ -0,0 +1,187 @@ +import React, { useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { HeaderProps } from '../../types'; +import { Link } from '../Link'; +import SpiritLogo from './demo/SpiritLogo'; +import ReadMe from './README.md'; +import { + Header, + HeaderDesktopActions, + HeaderDialog, + HeaderDialogActions, + HeaderDialogButton, + HeaderDialogCloseButton, + HeaderDialogLink, + HeaderDialogNav, + HeaderDialogNavItem, + HeaderDialogText, + HeaderLink, + HeaderMobileActions, + HeaderNav, + HeaderNavItem, +} from '.'; + +const meta: Meta = { + title: 'Components/Header', + component: Header, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + color: { + control: 'radio', + options: ['transparent', 'inverted'], + table: { + defaultValue: { summary: 'transparent' }, + }, + }, + isSimple: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + }, + args: { + color: 'inverted', + isSimple: false, + }, +}; + +export default meta; +type Story = StoryObj; + +const HeaderWithHooks = (args: HeaderProps) => { + const [isMenuOpen, setMenuOpen] = useState(false); + const [isUserMenuOpen, setUserMenuOpen] = useState(false); + + const handleMenuOpen = () => setMenuOpen(true); + const handleMenuClose = () => setMenuOpen(false); + const handleUserMenuOpen = () => setUserMenuOpen(true); + const handleUserMenuClose = () => setUserMenuOpen(false); + + return ( + <> +
+ + + + + + + + + Job offers + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + Marian + + + + +
+ + + + + + Job offers + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + Marian + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + ); +}; + +export const Playground: Story = { + name: 'Header', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Header/HeaderDesktopActions.stories.tsx b/packages/web-react/src/components/Header/HeaderDesktopActions.stories.tsx new file mode 100644 index 0000000000..98c3b1717d --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDesktopActions.stories.tsx @@ -0,0 +1,183 @@ +import React, { useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { HeaderDesktopActionsProps } from '../../types'; +import { Link } from '../Link'; +import SpiritLogo from './demo/SpiritLogo'; +import ReadMe from './README.md'; +import { + Header, + HeaderDesktopActions, + HeaderDialog, + HeaderDialogActions, + HeaderDialogButton, + HeaderDialogCloseButton, + HeaderDialogLink, + HeaderDialogNav, + HeaderDialogNavItem, + HeaderDialogText, + HeaderLink, + HeaderMobileActions, + HeaderNav, + HeaderNavItem, +} from '.'; + +const meta: Meta = { + title: 'Components/Header', + component: HeaderDesktopActions, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'object', + }, + color: { + control: 'radio', + options: ['primary', 'secondary'], + table: { + defaultValue: { summary: 'primary' }, + }, + }, + }, + args: { + color: 'primary', + }, +}; + +export default meta; +type Story = StoryObj; + +const HeaderWithHooks = (args: HeaderDesktopActionsProps) => { + const [isMenuOpen, setMenuOpen] = useState(false); + const [isUserMenuOpen, setUserMenuOpen] = useState(false); + + const handleMenuOpen = () => setMenuOpen(true); + const handleMenuClose = () => setMenuOpen(false); + const handleUserMenuOpen = () => setUserMenuOpen(true); + const handleUserMenuClose = () => setUserMenuOpen(false); + + return ( + <> +
+ + + + + + + + + Job offers + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + Marian + + + + +
+ + + + + + Job offers + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + Marian + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + ); +}; + +export const HeaderDesktopActionsPlayground: Story = { + name: 'HeaderDesktopActions', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Header/HeaderDialog.stories.tsx b/packages/web-react/src/components/Header/HeaderDialog.stories.tsx new file mode 100644 index 0000000000..696a5f34d9 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialog.stories.tsx @@ -0,0 +1,194 @@ +import React, { useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { HeaderDialogProps } from '../../types'; +import { Link } from '../Link'; +import SpiritLogo from './demo/SpiritLogo'; +import ReadMe from './README.md'; +import { + Header, + HeaderDesktopActions, + HeaderDialog, + HeaderDialogActions, + HeaderDialogButton, + HeaderDialogCloseButton, + HeaderDialogLink, + HeaderDialogNav, + HeaderDialogNavItem, + HeaderDialogText, + HeaderLink, + HeaderMobileActions, + HeaderNav, + HeaderNavItem, +} from '.'; + +const meta: Meta = { + title: 'Components/Header', + component: HeaderDialog, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'object', + }, + id: { + control: 'text', + }, + isOpen: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + onClose: { + control: 'function', + }, + }, + args: { + id: 'header_dialog_example_1', + }, +}; + +export default meta; +type Story = StoryObj; + +const HeaderWithHooks = (args: HeaderDialogProps) => { + const [isMenuOpen, setMenuOpen] = useState(false); + const [isUserMenuOpen, setUserMenuOpen] = useState(false); + + const handleMenuOpen = () => setMenuOpen(true); + const handleMenuClose = () => setMenuOpen(false); + const handleUserMenuOpen = () => setUserMenuOpen(true); + const handleUserMenuClose = () => setUserMenuOpen(false); + + return ( + <> +
+ + + + + + + + + Job offers + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + Marian + + + + +
+ + + + + + Job offers + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + Marian + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + ); +}; + +export const HeaderDialogPlayground: Story = { + name: 'HeaderDialog', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Header/HeaderDialogActions.stories.tsx b/packages/web-react/src/components/Header/HeaderDialogActions.stories.tsx new file mode 100644 index 0000000000..3575605002 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialogActions.stories.tsx @@ -0,0 +1,183 @@ +import React, { useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { HeaderDialogActionsProps } from '../../types'; +import { Link } from '../Link'; +import SpiritLogo from './demo/SpiritLogo'; +import ReadMe from './README.md'; +import { + Header, + HeaderDesktopActions, + HeaderDialog, + HeaderDialogActions, + HeaderDialogButton, + HeaderDialogCloseButton, + HeaderDialogLink, + HeaderDialogNav, + HeaderDialogNavItem, + HeaderDialogText, + HeaderLink, + HeaderMobileActions, + HeaderNav, + HeaderNavItem, +} from '.'; + +const meta: Meta = { + title: 'Components/Header', + component: HeaderDialogActions, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'object', + }, + color: { + control: 'radio', + options: ['primary', 'secondary'], + table: { + defaultValue: { summary: 'primary' }, + }, + }, + }, + args: { + color: 'primary', + }, +}; + +export default meta; +type Story = StoryObj; + +const HeaderWithHooks = (args: HeaderDialogActionsProps) => { + const [isMenuOpen, setMenuOpen] = useState(true); + const [isUserMenuOpen, setUserMenuOpen] = useState(false); + + const handleMenuOpen = () => setMenuOpen(true); + const handleMenuClose = () => setMenuOpen(false); + const handleUserMenuOpen = () => setUserMenuOpen(true); + const handleUserMenuClose = () => setUserMenuOpen(false); + + return ( + <> +
+ + + + + + + + + Job offers + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + Marian + + + + +
+ + + + + + Job offers + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + Marian + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + ); +}; + +export const HeaderDialogActionsPlayground: Story = { + name: 'HeaderDialogActions', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Header/HeaderDialogButton.stories.tsx b/packages/web-react/src/components/Header/HeaderDialogButton.stories.tsx new file mode 100644 index 0000000000..19e940ccb0 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialogButton.stories.tsx @@ -0,0 +1,174 @@ +import React, { useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { HeaderDialogButtonProps } from '../../types'; +import { Link } from '../Link'; +import SpiritLogo from './demo/SpiritLogo'; +import ReadMe from './README.md'; +import { + Header, + HeaderDesktopActions, + HeaderDialog, + HeaderDialogActions, + HeaderDialogButton, + HeaderDialogCloseButton, + HeaderDialogLink, + HeaderDialogNav, + HeaderDialogNavItem, + HeaderDialogText, + HeaderLink, + HeaderMobileActions, + HeaderNav, + HeaderNavItem, +} from '.'; + +const meta: Meta = { + title: 'Components/Header', + component: HeaderDialogButton, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'object', + }, + }, +}; + +export default meta; +type Story = StoryObj; + +const HeaderWithHooks = (args: HeaderDialogButtonProps) => { + const [isMenuOpen, setMenuOpen] = useState(true); + const [isUserMenuOpen, setUserMenuOpen] = useState(false); + + const handleMenuOpen = () => setMenuOpen(true); + const handleMenuClose = () => setMenuOpen(false); + const handleUserMenuOpen = () => setUserMenuOpen(true); + const handleUserMenuClose = () => setUserMenuOpen(false); + + return ( + <> +
+ + + + + + + + + Job offers + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + Marian + + + + +
+ + + + + + Job offers + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + Marian + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + ); +}; + +export const HeaderDialogButtonPlayground: Story = { + name: 'HeaderDialogButton', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Header/HeaderDialogCloseButton.stories.tsx b/packages/web-react/src/components/Header/HeaderDialogCloseButton.stories.tsx new file mode 100644 index 0000000000..0e6f461cd7 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialogCloseButton.stories.tsx @@ -0,0 +1,179 @@ +import React, { useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { HeaderDialogCloseButtonProps } from '../../types'; +import { Link } from '../Link'; +import SpiritLogo from './demo/SpiritLogo'; +import ReadMe from './README.md'; +import { + Header, + HeaderDesktopActions, + HeaderDialog, + HeaderDialogActions, + HeaderDialogButton, + HeaderDialogCloseButton, + HeaderDialogLink, + HeaderDialogNav, + HeaderDialogNavItem, + HeaderDialogText, + HeaderLink, + HeaderMobileActions, + HeaderNav, + HeaderNavItem, +} from '.'; + +const meta: Meta = { + title: 'Components/Header', + component: HeaderDialogCloseButton, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + label: { + control: 'text', + table: { + defaultValue: { summary: 'Close' }, + }, + }, + }, + args: { + label: 'Close', + }, +}; + +export default meta; +type Story = StoryObj; + +const HeaderWithHooks = (args: HeaderDialogCloseButtonProps) => { + const [isMenuOpen, setMenuOpen] = useState(true); + const [isUserMenuOpen, setUserMenuOpen] = useState(false); + + const handleMenuOpen = () => setMenuOpen(true); + const handleMenuClose = () => setMenuOpen(false); + const handleUserMenuOpen = () => setUserMenuOpen(true); + const handleUserMenuClose = () => setUserMenuOpen(false); + + return ( + <> +
+ + + + + + + + + Job offers + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + Marian + + + + +
+ + + + + + Job offers + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + Marian + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + ); +}; + +export const HeaderDialogCloseButtonPlayground: Story = { + name: 'HeaderDialogCloseButton', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Header/HeaderDialogLink.stories.tsx b/packages/web-react/src/components/Header/HeaderDialogLink.stories.tsx new file mode 100644 index 0000000000..62e80dba75 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialogLink.stories.tsx @@ -0,0 +1,183 @@ +import React, { useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { HeaderDialogLinkProps } from '../../types'; +import { Link } from '../Link'; +import SpiritLogo from './demo/SpiritLogo'; +import ReadMe from './README.md'; +import { + Header, + HeaderDesktopActions, + HeaderDialog, + HeaderDialogActions, + HeaderDialogButton, + HeaderDialogCloseButton, + HeaderDialogLink, + HeaderDialogNav, + HeaderDialogNavItem, + HeaderDialogText, + HeaderLink, + HeaderMobileActions, + HeaderNav, + HeaderNavItem, +} from '.'; + +const meta: Meta = { + title: 'Components/Header', + component: HeaderDialogLink, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'text', + }, + isCurrent: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + }, + args: { + children: 'Job offers', + isCurrent: true, + }, +}; + +export default meta; +type Story = StoryObj; + +const HeaderWithHooks = (args: HeaderDialogLinkProps) => { + const [isMenuOpen, setMenuOpen] = useState(true); + const [isUserMenuOpen, setUserMenuOpen] = useState(false); + + const handleMenuOpen = () => setMenuOpen(true); + const handleMenuClose = () => setMenuOpen(false); + const handleUserMenuOpen = () => setUserMenuOpen(true); + const handleUserMenuClose = () => setUserMenuOpen(false); + + return ( + <> +
+ + + + + + + + + Job offers + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + Marian + + + + +
+ + + + + + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + Marian + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + ); +}; + +export const HeaderDialogLinkPlayground: Story = { + name: 'HeaderDialogLink', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Header/HeaderDialogNav.stories.tsx b/packages/web-react/src/components/Header/HeaderDialogNav.stories.tsx new file mode 100644 index 0000000000..d00f7821a9 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialogNav.stories.tsx @@ -0,0 +1,173 @@ +import React, { useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { HeaderDialogNavProps } from '../../types'; +import { Link } from '../Link'; +import SpiritLogo from './demo/SpiritLogo'; +import ReadMe from './README.md'; +import { + Header, + HeaderDesktopActions, + HeaderDialog, + HeaderDialogActions, + HeaderDialogButton, + HeaderDialogCloseButton, + HeaderDialogLink, + HeaderDialogNav, + HeaderDialogNavItem, + HeaderDialogText, + HeaderLink, + HeaderMobileActions, + HeaderNav, + HeaderNavItem, +} from '.'; + +const meta: Meta = { + title: 'Components/Header', + component: HeaderDialogNav, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'object', + }, + }, +}; + +export default meta; +type Story = StoryObj; + +const HeaderWithHooks = (args: HeaderDialogNavProps) => { + const [isMenuOpen, setMenuOpen] = useState(true); + const [isUserMenuOpen, setUserMenuOpen] = useState(false); + + const handleMenuOpen = () => setMenuOpen(true); + const handleMenuClose = () => setMenuOpen(false); + const handleUserMenuOpen = () => setUserMenuOpen(true); + const handleUserMenuClose = () => setUserMenuOpen(false); + + return ( + <> +
+ + + + + + + + + Job offers + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + Marian + + + + +
+ + + + + + Job offers + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + Marian + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + ); +}; + +export const HeaderDialogNavPlayground: Story = { + name: 'HeaderDialogNav', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Header/HeaderDialogNavItem.stories.tsx b/packages/web-react/src/components/Header/HeaderDialogNavItem.stories.tsx new file mode 100644 index 0000000000..67cd1166ac --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialogNavItem.stories.tsx @@ -0,0 +1,173 @@ +import React, { useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { HeaderDialogNavItemProps } from '../../types'; +import { Link } from '../Link'; +import SpiritLogo from './demo/SpiritLogo'; +import ReadMe from './README.md'; +import { + Header, + HeaderDesktopActions, + HeaderDialog, + HeaderDialogActions, + HeaderDialogButton, + HeaderDialogCloseButton, + HeaderDialogLink, + HeaderDialogNav, + HeaderDialogNavItem, + HeaderDialogText, + HeaderLink, + HeaderMobileActions, + HeaderNav, + HeaderNavItem, +} from '.'; + +const meta: Meta = { + title: 'Components/Header', + component: HeaderDialogNavItem, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'object', + }, + }, +}; + +export default meta; +type Story = StoryObj; + +const HeaderWithHooks = (args: HeaderDialogNavItemProps) => { + const [isMenuOpen, setMenuOpen] = useState(true); + const [isUserMenuOpen, setUserMenuOpen] = useState(false); + + const handleMenuOpen = () => setMenuOpen(true); + const handleMenuClose = () => setMenuOpen(false); + const handleUserMenuOpen = () => setUserMenuOpen(true); + const handleUserMenuClose = () => setUserMenuOpen(false); + + return ( + <> +
+ + + + + + + + + Job offers + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + Marian + + + + +
+ + + + + + Job offers + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + Marian + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + ); +}; + +export const HeaderDialogNavItemPlayground: Story = { + name: 'HeaderDialogNavItem', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Header/HeaderDialogText.stories.tsx b/packages/web-react/src/components/Header/HeaderDialogText.stories.tsx new file mode 100644 index 0000000000..29c598b6e7 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialogText.stories.tsx @@ -0,0 +1,177 @@ +import React, { useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { HeaderDialogTextProps } from '../../types'; +import { Link } from '../Link'; +import SpiritLogo from './demo/SpiritLogo'; +import ReadMe from './README.md'; +import { + Header, + HeaderDesktopActions, + HeaderDialog, + HeaderDialogActions, + HeaderDialogButton, + HeaderDialogCloseButton, + HeaderDialogLink, + HeaderDialogNav, + HeaderDialogNavItem, + HeaderDialogText, + HeaderLink, + HeaderMobileActions, + HeaderNav, + HeaderNavItem, +} from '.'; + +const meta: Meta = { + title: 'Components/Header', + component: HeaderDialogText, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'text', + }, + }, + args: { + children: 'Marian', + UNSAFE_className: 'text-primary-inverted-disabled', + }, +}; + +export default meta; +type Story = StoryObj; + +const HeaderWithHooks = (args: HeaderDialogTextProps) => { + const [isMenuOpen, setMenuOpen] = useState(true); + const [isUserMenuOpen, setUserMenuOpen] = useState(false); + + const handleMenuOpen = () => setMenuOpen(true); + const handleMenuClose = () => setMenuOpen(false); + const handleUserMenuOpen = () => setUserMenuOpen(true); + const handleUserMenuClose = () => setUserMenuOpen(false); + + return ( + <> +
+ + + + + + + + + Job offers + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + Marian + + + + +
+ + + + + + Job offers + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + ); +}; + +export const HeaderDialogTextPlayground: Story = { + name: 'HeaderDialogText', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Header/HeaderLink.stories.tsx b/packages/web-react/src/components/Header/HeaderLink.stories.tsx new file mode 100644 index 0000000000..f53a60760d --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderLink.stories.tsx @@ -0,0 +1,181 @@ +import React, { useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { HeaderLinkProps } from '../../types'; +import { Link } from '../Link'; +import SpiritLogo from './demo/SpiritLogo'; +import ReadMe from './README.md'; +import { + Header, + HeaderDesktopActions, + HeaderDialog, + HeaderDialogActions, + HeaderDialogButton, + HeaderDialogCloseButton, + HeaderDialogLink, + HeaderDialogNav, + HeaderDialogNavItem, + HeaderDialogText, + HeaderLink, + HeaderMobileActions, + HeaderNav, + HeaderNavItem, +} from '.'; + +const meta: Meta = { + title: 'Components/Header', + component: HeaderLink, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'text', + }, + isCurrent: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + }, + args: { + children: 'Job offers', + isCurrent: true, + }, +}; + +export default meta; +type Story = StoryObj; + +const HeaderWithHooks = (args: HeaderLinkProps) => { + const [isMenuOpen, setMenuOpen] = useState(false); + const [isUserMenuOpen, setUserMenuOpen] = useState(false); + + const handleMenuOpen = () => setMenuOpen(true); + const handleMenuClose = () => setMenuOpen(false); + const handleUserMenuOpen = () => setUserMenuOpen(true); + const handleUserMenuClose = () => setUserMenuOpen(false); + + return ( + <> +
+ + + + + + + + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + Marian + + + + +
+ + + + + + Job offers + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + Marian + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + ); +}; + +export const HeaderLinkPlayground: Story = { + name: 'HeaderLink', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Header/HeaderMobileActions.stories.tsx b/packages/web-react/src/components/Header/HeaderMobileActions.stories.tsx new file mode 100644 index 0000000000..d2d08f0b8f --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderMobileActions.stories.tsx @@ -0,0 +1,195 @@ +import React, { useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { HeaderMobileActionsProps } from '../../types'; +import { Link } from '../Link'; +import SpiritLogo from './demo/SpiritLogo'; +import ReadMe from './README.md'; +import { + Header, + HeaderDesktopActions, + HeaderDialog, + HeaderDialogActions, + HeaderDialogButton, + HeaderDialogCloseButton, + HeaderDialogLink, + HeaderDialogNav, + HeaderDialogNavItem, + HeaderDialogText, + HeaderLink, + HeaderMobileActions, + HeaderNav, + HeaderNavItem, +} from '.'; + +const meta: Meta = { + title: 'Components/Header', + component: HeaderMobileActions, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'object', + }, + dialogId: { + control: 'text', + }, + isOpen: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + menuToggleLabel: { + control: 'text', + table: { + defaultValue: { summary: 'Menu' }, + }, + }, + onOpen: { + control: 'function', + }, + }, + args: { + dialogId: 'header_dialog_example_1', + menuToggleLabel: 'Menu', + }, +}; + +export default meta; +type Story = StoryObj; + +const HeaderWithHooks = (args: HeaderMobileActionsProps) => { + const [isMenuOpen, setMenuOpen] = useState(true); + const [isUserMenuOpen, setUserMenuOpen] = useState(false); + + const handleMenuOpen = () => setMenuOpen(true); + const handleMenuClose = () => setMenuOpen(false); + const handleUserMenuOpen = () => setUserMenuOpen(true); + const handleUserMenuClose = () => setUserMenuOpen(false); + + return ( + <> +
+ + + + + + + + + Job offers + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + Marian + + + + +
+ + + + + + Job offers + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + Marian + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + ); +}; + +export const HeaderMobileActionsPlayground: Story = { + name: 'HeaderMobileActions', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Header/HeaderNav.stories.tsx b/packages/web-react/src/components/Header/HeaderNav.stories.tsx new file mode 100644 index 0000000000..e9e643f1d5 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderNav.stories.tsx @@ -0,0 +1,173 @@ +import React, { useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { HeaderNavProps } from '../../types'; +import { Link } from '../Link'; +import SpiritLogo from './demo/SpiritLogo'; +import ReadMe from './README.md'; +import { + Header, + HeaderDesktopActions, + HeaderDialog, + HeaderDialogActions, + HeaderDialogButton, + HeaderDialogCloseButton, + HeaderDialogLink, + HeaderDialogNav, + HeaderDialogNavItem, + HeaderDialogText, + HeaderLink, + HeaderMobileActions, + HeaderNav, + HeaderNavItem, +} from '.'; + +const meta: Meta = { + title: 'Components/Header', + component: HeaderNav, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'object', + }, + }, +}; + +export default meta; +type Story = StoryObj; + +const HeaderWithHooks = (args: HeaderNavProps) => { + const [isMenuOpen, setMenuOpen] = useState(true); + const [isUserMenuOpen, setUserMenuOpen] = useState(false); + + const handleMenuOpen = () => setMenuOpen(true); + const handleMenuClose = () => setMenuOpen(false); + const handleUserMenuOpen = () => setUserMenuOpen(true); + const handleUserMenuClose = () => setUserMenuOpen(false); + + return ( + <> +
+ + + + + + + + + Job offers + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + Marian + + + + +
+ + + + + + Job offers + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + Marian + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + ); +}; + +export const HeaderNavPlayground: Story = { + name: 'HeaderNav', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Header/HeaderNavItem.stories.tsx b/packages/web-react/src/components/Header/HeaderNavItem.stories.tsx new file mode 100644 index 0000000000..f0f3dc20d1 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderNavItem.stories.tsx @@ -0,0 +1,173 @@ +import React, { useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { HeaderNavItemProps } from '../../types'; +import { Link } from '../Link'; +import SpiritLogo from './demo/SpiritLogo'; +import ReadMe from './README.md'; +import { + Header, + HeaderDesktopActions, + HeaderDialog, + HeaderDialogActions, + HeaderDialogButton, + HeaderDialogCloseButton, + HeaderDialogLink, + HeaderDialogNav, + HeaderDialogNavItem, + HeaderDialogText, + HeaderLink, + HeaderMobileActions, + HeaderNav, + HeaderNavItem, +} from '.'; + +const meta: Meta = { + title: 'Components/Header', + component: HeaderNavItem, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'object', + }, + }, +}; + +export default meta; +type Story = StoryObj; + +const HeaderWithHooks = (args: HeaderNavItemProps) => { + const [isMenuOpen, setMenuOpen] = useState(true); + const [isUserMenuOpen, setUserMenuOpen] = useState(false); + + const handleMenuOpen = () => setMenuOpen(true); + const handleMenuClose = () => setMenuOpen(false); + const handleUserMenuOpen = () => setUserMenuOpen(true); + const handleUserMenuClose = () => setUserMenuOpen(false); + + return ( + <> +
+ + + + + + + + + Job offers + + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + + Marian + + + + +
+ + + + + + Job offers + + + Part-time jobs + + + Inspiration + + + Replies + + + Employers + + + + + + + Marian + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + + + + + Dashboard + + + Profile + + + Favourites + + + Notifications + + + Sign out + + + + + + ); +}; + +export const HeaderNavItemPlayground: Story = { + name: 'HeaderNavItem', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Header/demo/argTypes.ts b/packages/web-react/src/components/Header/demo/argTypes.ts deleted file mode 100644 index 76262029fd..0000000000 --- a/packages/web-react/src/components/Header/demo/argTypes.ts +++ /dev/null @@ -1,15 +0,0 @@ -export default { - color: { - control: { - type: 'select', - options: ['inverted', 'transparent'], - }, - defaultValue: 'inverted', - }, - isSimple: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, -}; diff --git a/packages/web-react/src/components/Icon/Icon.stories.ts b/packages/web-react/src/components/Icon/Icon.stories.ts deleted file mode 100644 index 1e69d9b273..0000000000 --- a/packages/web-react/src/components/Icon/Icon.stories.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import argTypes from './demo/argTypes'; -import Icon from './Icon'; - -export default { - title: 'Components/Icon', - component: Icon, - parameters: { - docs: { - description: { - component: 'Icon', - }, - }, - }, - args: { - name: 'warning', - }, - argTypes, -} as ComponentMeta; - -export { default as Icon } from './demo/Icon'; diff --git a/packages/web-react/src/components/Icon/Icon.stories.tsx b/packages/web-react/src/components/Icon/Icon.stories.tsx new file mode 100644 index 0000000000..e068ad1ddc --- /dev/null +++ b/packages/web-react/src/components/Icon/Icon.stories.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { Icon } from './Icon'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Icon', + component: Icon, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + ariaHidden: { + control: 'boolean', + table: { + defaultValue: { summary: true }, + }, + }, + boxSize: { + control: 'number', + table: { + defaultValue: { summary: 24 }, + }, + }, + name: { + control: 'text', + }, + title: { + control: 'text', + }, + }, + args: { + ariaHidden: true, + boxSize: 24, + name: 'warning', + title: 'Warning', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + name: 'Icon', +}; diff --git a/packages/web-react/src/components/Icon/demo/argTypes.ts b/packages/web-react/src/components/Icon/demo/argTypes.ts deleted file mode 100644 index 4e7a70f762..0000000000 --- a/packages/web-react/src/components/Icon/demo/argTypes.ts +++ /dev/null @@ -1,26 +0,0 @@ -export default { - name: { - control: { - type: 'text', - }, - defaultValue: 'warning', - }, - title: { - control: { - type: 'text', - }, - defaultValue: 'Warning', - }, - boxSize: { - control: { - type: 'number', - }, - defaultValue: 24, - }, - ariaHidden: { - control: { - type: 'boolean', - }, - defaultValue: true, - }, -}; diff --git a/packages/web-react/src/components/Pagination/Pagination.stories.ts b/packages/web-react/src/components/Pagination/Pagination.stories.ts deleted file mode 100644 index b9f62639bd..0000000000 --- a/packages/web-react/src/components/Pagination/Pagination.stories.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import argTypes from './demo/argTypes'; -import Pagination from './Pagination'; - -export default { - title: 'Components/Pagination', - component: Pagination, - parameters: { - docs: { - description: { - component: 'Pagination is used to navigate between pages', - }, - }, - }, - argTypes, -} as ComponentMeta; - -export { default as PaginationCurrentFirst } from './demo/PaginationCurrentFirst'; -export { default as PaginationCurrentMiddle } from './demo/PaginationCurrentMiddle'; -export { default as PaginationCurrentLast } from './demo/PaginationCurrentLast'; diff --git a/packages/web-react/src/components/Pagination/Pagination.stories.tsx b/packages/web-react/src/components/Pagination/Pagination.stories.tsx new file mode 100644 index 0000000000..f67d2515f1 --- /dev/null +++ b/packages/web-react/src/components/Pagination/Pagination.stories.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { Pagination, PaginationItem, PaginationLink, PaginationLinkNext } from '.'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Pagination', + component: Pagination, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'object', + }, + listProps: { + control: 'object', + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + name: 'Pagination', + render: (args) => ( + + + + + + + + + + + + + + + + + + + + + ), +}; diff --git a/packages/web-react/src/components/Pagination/PaginationButtonLink.stories.tsx b/packages/web-react/src/components/Pagination/PaginationButtonLink.stories.tsx new file mode 100644 index 0000000000..2edb98a2e3 --- /dev/null +++ b/packages/web-react/src/components/Pagination/PaginationButtonLink.stories.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { PaginationButtonLink } from '.'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Pagination', + component: PaginationButtonLink, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + accessibilityLabel: { + control: 'text', + }, + direction: { + control: 'select', + options: ['next', 'previous'], + }, + }, + args: { + accessibilityLabel: 'Next', + direction: 'next', + }, +}; + +export default meta; +type Story = StoryObj; + +export const PaginationButtonLinkPlayground: Story = { + name: 'PaginationButtonLink', +}; diff --git a/packages/web-react/src/components/Pagination/PaginationItem.stories.tsx b/packages/web-react/src/components/Pagination/PaginationItem.stories.tsx new file mode 100644 index 0000000000..4470b2d5a0 --- /dev/null +++ b/packages/web-react/src/components/Pagination/PaginationItem.stories.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { Pagination, PaginationItem, PaginationLink, PaginationLinkNext, PaginationLinkPrevious } from '.'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Pagination', + component: PaginationItem, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'object', + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const PaginationItemPlayground: Story = { + name: 'PaginationItem', + render: (args) => ( + + + + + + + + + + + + + + + + + + + + + + + + ), +}; diff --git a/packages/web-react/src/components/Pagination/PaginationLink.stories.tsx b/packages/web-react/src/components/Pagination/PaginationLink.stories.tsx new file mode 100644 index 0000000000..4683e74490 --- /dev/null +++ b/packages/web-react/src/components/Pagination/PaginationLink.stories.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { Pagination, PaginationItem, PaginationLink, PaginationLinkNext, PaginationLinkPrevious } from '.'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Pagination', + component: PaginationLink, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + accessibilityLabel: { + control: 'text', + }, + elementType: { + control: 'text', + table: { + defaultValue: { summary: 'a' }, + }, + }, + isCurrent: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + pageNumber: { + control: 'number', + }, + }, + args: { + accessibilityLabel: 'Go to Page 11', + elementType: 'a', + isCurrent: false, + pageNumber: 11, + }, +}; + +export default meta; +type Story = StoryObj; + +export const PaginationLinkPlayground: Story = { + name: 'PaginationLink', + render: (args) => ( + + + + + + + + + + + + + + + + + + + + + + + + ), +}; diff --git a/packages/web-react/src/components/Pagination/PaginationLinkNext.stories.tsx b/packages/web-react/src/components/Pagination/PaginationLinkNext.stories.tsx new file mode 100644 index 0000000000..063e19c7fd --- /dev/null +++ b/packages/web-react/src/components/Pagination/PaginationLinkNext.stories.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { Pagination, PaginationItem, PaginationLink, PaginationLinkNext, PaginationLinkPrevious } from '.'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Pagination', + component: PaginationLinkNext, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + accessibilityLabel: { + control: 'text', + }, + href: { + control: 'text', + }, + }, + args: { + accessibilityLabel: 'Next', + href: '#', + }, +}; + +export default meta; +type Story = StoryObj; + +export const PaginationLinkNextPlayground: Story = { + name: 'PaginationLinkNext', + render: (args) => ( + + + + + + + + + + + + + + + + + + + + + + + + ), +}; diff --git a/packages/web-react/src/components/Pagination/PaginationLinkPrevious.stories.tsx b/packages/web-react/src/components/Pagination/PaginationLinkPrevious.stories.tsx new file mode 100644 index 0000000000..da9df04b3e --- /dev/null +++ b/packages/web-react/src/components/Pagination/PaginationLinkPrevious.stories.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { Pagination, PaginationItem, PaginationLink, PaginationLinkNext, PaginationLinkPrevious } from '.'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Pagination', + component: PaginationLinkPrevious, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + accessibilityLabel: { + control: 'text', + }, + href: { + control: 'text', + }, + }, + args: { + accessibilityLabel: 'Previous', + href: '#', + }, +}; + +export default meta; +type Story = StoryObj; + +export const PaginationLinkPreviousPlayground: Story = { + name: 'PaginationLinkPrevious', + render: (args) => ( + + + + + + + + + + + + + + + + + + + + + + + + ), +}; diff --git a/packages/web-react/src/components/Pagination/demo/argTypes.ts b/packages/web-react/src/components/Pagination/demo/argTypes.ts deleted file mode 100644 index ff8b4c5632..0000000000 --- a/packages/web-react/src/components/Pagination/demo/argTypes.ts +++ /dev/null @@ -1 +0,0 @@ -export default {}; diff --git a/packages/web-react/src/components/ScrollView/ScrollView.stories.ts b/packages/web-react/src/components/ScrollView/ScrollView.stories.ts deleted file mode 100644 index 79a0bb9ff4..0000000000 --- a/packages/web-react/src/components/ScrollView/ScrollView.stories.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import argTypes from './demo/argTypes'; -import ScrollView from './ScrollView'; - -export default { - title: 'Components/ScrollView', - component: ScrollView, - parameters: { - docs: { - description: { - component: 'ScrollView makes long content scrollable.', - }, - }, - }, - argTypes, -} as ComponentMeta; - -export { default as ScrollView } from './demo/ScrollView'; diff --git a/packages/web-react/src/components/ScrollView/ScrollView.stories.tsx b/packages/web-react/src/components/ScrollView/ScrollView.stories.tsx new file mode 100644 index 0000000000..43f66d1ac3 --- /dev/null +++ b/packages/web-react/src/components/ScrollView/ScrollView.stories.tsx @@ -0,0 +1,149 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import ScrollView from './ScrollView'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/ScrollView', + component: ScrollView, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'select', + options: ['vertical', 'horizontal'], + description: `This is the place for the content of the ScrollView. In the real code you can + pass in any children you want. In this demo we have predefined options: \`vertical\` and, + \`horizontal\`. Please note the predefined options in this demo are not customizable.`, + mapping: { + vertical: ( +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, + justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper + nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. + Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius + laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies + nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, + sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis + ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec + sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.Aenean massa. Cum + sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, + justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper + nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. + Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius + laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies + nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, + sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis + ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec + sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. +
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, + justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper + nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. + Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius + laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies + nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, + sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis + ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec + sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.Aenean massa. Cum + sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, + justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper + nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. + Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius + laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies + nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, + sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis + ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec + sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. +

+ ), + horizontal: ( +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, + justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper + nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. + Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius + laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies + nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, + sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis + ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec + sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.Aenean massa. Cum + sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, + justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper + nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. + Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius + laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies + nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, + sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis + ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec + sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. +

+ ), + }, + }, + direction: { + control: 'select', + options: ['horizontal', 'vertical'], + table: { + defaultValue: { summary: 'vertical' }, + }, + }, + isScrollbarDisabled: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + overflowDecorators: { + control: 'select', + options: ['borders', 'shadows', 'both'], + table: { + defaultValue: { summary: 'shadows' }, + }, + }, + }, + args: { + children: 'vertical', + direction: 'vertical', + isScrollbarDisabled: false, + overflowDecorators: 'shadows', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + name: 'ScrollView', + render: (args) => ( +
+ +
+ ), +}; diff --git a/packages/web-react/src/components/Spinner/Spinner.stories.ts b/packages/web-react/src/components/Spinner/Spinner.stories.ts deleted file mode 100644 index 8d27b122d6..0000000000 --- a/packages/web-react/src/components/Spinner/Spinner.stories.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import argTypes from './demo/argTypes'; -import Spinner from './Spinner'; - -export default { - title: 'Components/Spinner', - component: Spinner, - parameters: { - docs: { - description: { - component: 'Indicates something is loading.', - }, - }, - }, - argTypes, -} as ComponentMeta; - -export { default as Spinner } from './demo/Spinner'; diff --git a/packages/web-react/src/components/Spinner/Spinner.stories.tsx b/packages/web-react/src/components/Spinner/Spinner.stories.tsx new file mode 100644 index 0000000000..c09eb240f1 --- /dev/null +++ b/packages/web-react/src/components/Spinner/Spinner.stories.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { TextColors } from '../../constants'; +import { Spinner } from './Spinner'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Spinner', + component: Spinner, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + color: { + control: 'select', + options: [...Object.values(TextColors), undefined], + table: { + defaultValue: { summary: undefined }, + }, + }, + }, + args: { + color: undefined, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + name: 'Spinner', +}; diff --git a/packages/web-react/src/components/Spinner/demo/argTypes.ts b/packages/web-react/src/components/Spinner/demo/argTypes.ts deleted file mode 100644 index 9ba63c618b..0000000000 --- a/packages/web-react/src/components/Spinner/demo/argTypes.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { TextColors } from '../../../constants'; - -export default { - color: { - control: { - type: 'select', - options: [...Object.values(TextColors), undefined], - }, - defaultValue: undefined, - }, -}; diff --git a/packages/web-react/src/components/Tabs/Tab.stories.ts b/packages/web-react/src/components/Tabs/Tab.stories.ts deleted file mode 100644 index d880b9d183..0000000000 --- a/packages/web-react/src/components/Tabs/Tab.stories.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import Tab from './TabList'; - -export default { - title: 'Components/Tabs', - component: Tab, - parameters: { - docs: { - description: { - component: - 'The Tab component is used to organize related content. User can navigate between\ngroups of information in tabbable regions.', - }, - }, - }, -} as ComponentMeta; - -export { default as Tabs } from './demo/Tabs'; -export { default as UncontrolledTabs } from './demo/UncontrolledTabs'; diff --git a/packages/web-react/src/components/Tabs/TabContent.stories.tsx b/packages/web-react/src/components/Tabs/TabContent.stories.tsx new file mode 100644 index 0000000000..64a1c5da0f --- /dev/null +++ b/packages/web-react/src/components/Tabs/TabContent.stories.tsx @@ -0,0 +1,46 @@ +import React, { useCallback, useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { TabId } from '../../types'; +import ReadMe from './README.md'; +import { TabContent, TabContentProps, TabItem, TabList, TabPane, Tabs } from '.'; + +const meta: Meta = { + title: 'Components/Tabs', + component: TabContent, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +const TabsWithHooks = (args: TabContentProps) => { + const [selectedTabId, setState] = useState(1); + + const selectTab = useCallback((tabId: TabId) => { + setState(tabId); + }, []); + + return ( + + + Item Selected + Item + + + Pane 1 + Pane 2 + + + ); +}; + +export const TabContentPlayground: Story = { + name: 'TabContent', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Tabs/TabContent.tsx b/packages/web-react/src/components/Tabs/TabContent.tsx index 2795158ef5..b2eb338bcb 100644 --- a/packages/web-react/src/components/Tabs/TabContent.tsx +++ b/packages/web-react/src/components/Tabs/TabContent.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { ChildrenProps, TransferProps } from '../../types'; -type TabContentProps = ChildrenProps & TransferProps; +export type TabContentProps = ChildrenProps & TransferProps; const TabContent = ({ children, ...restProps }: TabContentProps): JSX.Element =>
{children}
; diff --git a/packages/web-react/src/components/Tabs/TabItem.stories.tsx b/packages/web-react/src/components/Tabs/TabItem.stories.tsx new file mode 100644 index 0000000000..cc212528e3 --- /dev/null +++ b/packages/web-react/src/components/Tabs/TabItem.stories.tsx @@ -0,0 +1,48 @@ +import React, { useCallback, useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { TabId } from '../../types'; +import ReadMe from './README.md'; +import { TabContent, TabItem, TabItemProps, TabList, TabPane, Tabs } from '.'; + +const meta: Meta = { + title: 'Components/Tabs', + component: TabItem, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +const TabsWithHooks = (args: TabItemProps) => { + const [selectedTabId, setState] = useState(1); + + const selectTab = useCallback((tabId: TabId) => { + setState(tabId); + }, []); + + return ( + + + + Item Selected + + Item + + + Pane 1 + Pane 2 + + + ); +}; + +export const TabItemPlayground: Story = { + name: 'TabItem', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Tabs/TabItem.tsx b/packages/web-react/src/components/Tabs/TabItem.tsx index 1c8d305344..ff8cb60ded 100644 --- a/packages/web-react/src/components/Tabs/TabItem.tsx +++ b/packages/web-react/src/components/Tabs/TabItem.tsx @@ -3,7 +3,7 @@ import { ChildrenProps, TabId, TransferProps, ClickEvents, ClickEvent } from '.. import { useTabContext } from './TabContext'; import { useTabsStyleProps } from './useTabsStyleProps'; -interface TabItemProps extends ChildrenProps, TransferProps, ClickEvents { +export interface TabItemProps extends ChildrenProps, TransferProps, ClickEvents { forTab: TabId; } diff --git a/packages/web-react/src/components/Tabs/TabLink.stories.tsx b/packages/web-react/src/components/Tabs/TabLink.stories.tsx new file mode 100644 index 0000000000..6d2ecc703b --- /dev/null +++ b/packages/web-react/src/components/Tabs/TabLink.stories.tsx @@ -0,0 +1,57 @@ +import React, { useCallback, useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { TabId } from '../../types'; +import ReadMe from './README.md'; +import { TabContent, TabItem, TabLink, TabLinkProps, TabList, TabPane, Tabs } from '.'; + +const meta: Meta = { + title: 'Components/Tabs', + component: TabLink, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + href: { + control: { + type: 'text', + }, + }, + }, + args: { + href: 'https://www.example.com', + }, +}; + +export default meta; +type Story = StoryObj; + +const TabsWithHooks = (args: TabLinkProps) => { + const [selectedTabId, setState] = useState(1); + + const selectTab = useCallback((tabId: TabId) => { + setState(tabId); + }, []); + + return ( + + + Item Selected + Item + Item Link + + + Pane 1 + Pane 2 + + + ); +}; + +export const TabLinkPlayground: Story = { + name: 'TabLink', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Tabs/TabLink.tsx b/packages/web-react/src/components/Tabs/TabLink.tsx index b332093ba7..08987f1baf 100644 --- a/packages/web-react/src/components/Tabs/TabLink.tsx +++ b/packages/web-react/src/components/Tabs/TabLink.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ChildrenProps, TransferProps } from '../../types'; import { useTabsStyleProps } from './useTabsStyleProps'; -interface TabLinkProps extends ChildrenProps, TransferProps { +export interface TabLinkProps extends ChildrenProps, TransferProps { href: string; } diff --git a/packages/web-react/src/components/Tabs/TabList.stories.tsx b/packages/web-react/src/components/Tabs/TabList.stories.tsx new file mode 100644 index 0000000000..e50242219c --- /dev/null +++ b/packages/web-react/src/components/Tabs/TabList.stories.tsx @@ -0,0 +1,46 @@ +import React, { useCallback, useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { TabId } from '../../types'; +import ReadMe from './README.md'; +import { TabContent, TabItem, TabList, TabListProps, TabPane, Tabs } from '.'; + +const meta: Meta = { + title: 'Components/Tabs', + component: TabList, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +const TabsWithHooks = (args: TabListProps) => { + const [selectedTabId, setState] = useState(1); + + const selectTab = useCallback((tabId: TabId) => { + setState(tabId); + }, []); + + return ( + + + Item Selected + Item + + + Pane 1 + Pane 2 + + + ); +}; + +export const TabListPlayground: Story = { + name: 'TabList', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Tabs/TabList.tsx b/packages/web-react/src/components/Tabs/TabList.tsx index 3aa9ca55b8..e4fb51300c 100644 --- a/packages/web-react/src/components/Tabs/TabList.tsx +++ b/packages/web-react/src/components/Tabs/TabList.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ChildrenProps, TransferProps } from '../../types'; import { useTabsStyleProps } from './useTabsStyleProps'; -type TabListProps = ChildrenProps & TransferProps; +export type TabListProps = ChildrenProps & TransferProps; const TabList = ({ children, ...restProps }: TabListProps): JSX.Element => { const { classProps } = useTabsStyleProps(); diff --git a/packages/web-react/src/components/Tabs/TabPane.stories.tsx b/packages/web-react/src/components/Tabs/TabPane.stories.tsx new file mode 100644 index 0000000000..1d76fe3819 --- /dev/null +++ b/packages/web-react/src/components/Tabs/TabPane.stories.tsx @@ -0,0 +1,48 @@ +import React, { useCallback, useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { TabId } from '../../types'; +import ReadMe from './README.md'; +import { TabContent, TabItem, TabList, TabPane, TabPaneProps, Tabs } from '.'; + +const meta: Meta = { + title: 'Components/Tabs', + component: TabPane, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +const TabsWithHooks = (args: TabPaneProps) => { + const [selectedTabId, setState] = useState(1); + + const selectTab = useCallback((tabId: TabId) => { + setState(tabId); + }, []); + + return ( + + + Item Selected + Item + + + + Pane 1 + + Pane 2 + + + ); +}; + +export const TabPanePlayground: Story = { + name: 'TabPane', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Tabs/TabPane.tsx b/packages/web-react/src/components/Tabs/TabPane.tsx index 683cd61440..43afb5c4ff 100644 --- a/packages/web-react/src/components/Tabs/TabPane.tsx +++ b/packages/web-react/src/components/Tabs/TabPane.tsx @@ -3,7 +3,7 @@ import { ChildrenProps, TabId, TransferProps } from '../../types'; import { useTabContext } from './TabContext'; import { useTabsStyleProps } from './useTabsStyleProps'; -interface TabPaneProps extends ChildrenProps, TransferProps { +export interface TabPaneProps extends ChildrenProps, TransferProps { tabId: TabId; } diff --git a/packages/web-react/src/components/Tabs/Tabs.stories.tsx b/packages/web-react/src/components/Tabs/Tabs.stories.tsx new file mode 100644 index 0000000000..90e859c3ee --- /dev/null +++ b/packages/web-react/src/components/Tabs/Tabs.stories.tsx @@ -0,0 +1,46 @@ +import React, { useCallback, useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { TabId } from '../../types'; +import ReadMe from './README.md'; +import { TabContent, TabItem, TabList, TabPane, Tabs, TabsProps } from '.'; + +const meta: Meta = { + title: 'Components/Tabs', + component: Tabs, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +const TabsWithHooks = (args: TabsProps) => { + const [selectedTabId, setState] = useState(1); + + const selectTab = useCallback((tabId: TabId) => { + setState(tabId); + }, []); + + return ( + + + Item Selected + Item + + + Pane 1 + Pane 2 + + + ); +}; + +export const Playground: Story = { + name: 'Tabs', + render: (args) => , +}; diff --git a/packages/web-react/src/components/Tabs/Tabs.tsx b/packages/web-react/src/components/Tabs/Tabs.tsx index 7b86262626..0259b7efe8 100644 --- a/packages/web-react/src/components/Tabs/Tabs.tsx +++ b/packages/web-react/src/components/Tabs/Tabs.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ChildrenProps, TabId, TransferProps } from '../../types'; import { TabsProvider, TabsToggler } from './TabContext'; -interface TabsProps extends ChildrenProps, TransferProps { +export interface TabsProps extends ChildrenProps, TransferProps { selectedTab: TabId; toggle: TabsToggler; // eslint-disable-next-line react/require-default-props diff --git a/packages/web-react/src/components/Tabs/UncontrolledTabs.stories.tsx b/packages/web-react/src/components/Tabs/UncontrolledTabs.stories.tsx new file mode 100644 index 0000000000..68752aff98 --- /dev/null +++ b/packages/web-react/src/components/Tabs/UncontrolledTabs.stories.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import ReadMe from './README.md'; +import { TabContent, TabItem, TabList, TabPane, UncontrolledTabs } from '.'; + +const meta: Meta = { + title: 'Components/Tabs', + component: UncontrolledTabs, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + defaultSelectedTab: { + control: { + type: 'string', + }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const UncontrolledTabsPlayground: Story = { + name: 'UncontrolledTabs', + render: (args) => ( + + + Item Selected + Item + + + Pane 1 + Pane 2 + + + ), +}; diff --git a/packages/web-react/src/components/Tooltip/Tooltip.stories.ts b/packages/web-react/src/components/Tooltip/Tooltip.stories.ts deleted file mode 100644 index d84d4b34e3..0000000000 --- a/packages/web-react/src/components/Tooltip/Tooltip.stories.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import argTypes from './demo/argTypes'; -import Tooltip from './Tooltip'; - -export default { - title: 'Components/Tooltip', - component: Tooltip, - argTypes, -} as ComponentMeta; - -export { default as Tooltip } from './demo/Tooltip'; -export { default as TooltipUncontrolled } from './demo/TooltipUncontrolled'; diff --git a/packages/web-react/src/components/Tooltip/Tooltip.stories.tsx b/packages/web-react/src/components/Tooltip/Tooltip.stories.tsx new file mode 100644 index 0000000000..df0c889243 --- /dev/null +++ b/packages/web-react/src/components/Tooltip/Tooltip.stories.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { Button } from '..'; +import { Tooltip, TooltipWrapper } from '.'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Tooltip', + component: Tooltip, + parameters: { + docs: { + page: () => {ReadMe}, + }, + layout: 'centered', + }, + argTypes: { + children: { + control: 'text', + }, + closeLabel: { + control: 'text', + table: { + defaultValue: { summary: 'Close' }, + }, + }, + isDismissible: { + control: 'boolean', + }, + open: { + control: 'boolean', + }, + placement: { + control: 'select', + options: ['top', 'right', 'bottom', 'left', 'off'], + table: { + defaultValue: { summary: 'bottom' }, + }, + }, + }, + args: { + children: 'Hello there!', + closeLabel: 'Close', + isDismissible: false, + placement: 'bottom', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + name: 'Tooltip', + render: (args) => ( + + + + + ), +}; diff --git a/packages/web-react/src/components/Tooltip/UncontrolledTooltip.stories.tsx b/packages/web-react/src/components/Tooltip/UncontrolledTooltip.stories.tsx new file mode 100644 index 0000000000..75b55e5c9e --- /dev/null +++ b/packages/web-react/src/components/Tooltip/UncontrolledTooltip.stories.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { Button } from '..'; +import { TooltipWrapper, UncontrolledTooltip } from '.'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Tooltip', + component: UncontrolledTooltip, + parameters: { + docs: { + page: () => {ReadMe}, + }, + layout: 'centered', + }, + argTypes: { + children: { + control: 'text', + }, + closeLabel: { + control: 'text', + table: { + defaultValue: { summary: 'Close' }, + }, + }, + isDismissible: { + control: 'boolean', + }, + placement: { + control: 'select', + options: ['top', 'right', 'bottom', 'left', 'off'], + table: { + defaultValue: { summary: 'bottom' }, + }, + }, + }, + args: { + children: 'Hello there!', + closeLabel: 'Close', + isDismissible: false, + placement: 'bottom', + }, +}; + +export default meta; +type Story = StoryObj; + +export const UncontrolledTooltipPlayground: Story = { + name: 'UncontrolledTooltip', + render: (args) => ( + + + + + ), +}; diff --git a/packages/web-react/src/components/Tooltip/demo/argTypes.ts b/packages/web-react/src/components/Tooltip/demo/argTypes.ts deleted file mode 100644 index 59ef322cdd..0000000000 --- a/packages/web-react/src/components/Tooltip/demo/argTypes.ts +++ /dev/null @@ -1,27 +0,0 @@ -export default { - placement: { - control: { - type: 'select', - options: ['top', 'right', 'bottom', 'left', 'off'], - }, - defaultValue: 'bottom', - }, - isDismissible: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - label: { - control: { - type: 'text', - }, - defaultValue: '', - }, - closeLabel: { - control: { - type: 'text', - }, - defaultValue: 'Close', - }, -};