From 06f4a379cb8303e48aacad2cc6d27bde5d217f5f 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] 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 | 191 +++++++++++++++++ .../Header/HeaderDesktopActions.stories.tsx | 187 ++++++++++++++++ .../Header/HeaderDialog.stories.tsx | 198 +++++++++++++++++ .../Header/HeaderDialogActions.stories.tsx | 187 ++++++++++++++++ .../Header/HeaderDialogButton.stories.tsx | 178 ++++++++++++++++ .../HeaderDialogCloseButton.stories.tsx | 183 ++++++++++++++++ .../Header/HeaderDialogLink.stories.tsx | 187 ++++++++++++++++ .../Header/HeaderDialogNav.stories.tsx | 177 ++++++++++++++++ .../Header/HeaderDialogNavItem.stories.tsx | 177 ++++++++++++++++ .../Header/HeaderDialogText.stories.tsx | 181 ++++++++++++++++ .../components/Header/HeaderLink.stories.tsx | 185 ++++++++++++++++ .../Header/HeaderMobileActions.stories.tsx | 199 ++++++++++++++++++ .../components/Header/HeaderNav.stories.tsx | 177 ++++++++++++++++ .../Header/HeaderNavItem.stories.tsx | 177 ++++++++++++++++ .../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, 4349 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 f42b7b0ace..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/Breadcrumbs'; 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..7551b8c2ed --- /dev/null +++ b/packages/web-react/src/components/Header/Header.stories.tsx @@ -0,0 +1,191 @@ +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 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 ( + <> +
+ + Spirit + + + + + + + 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..86b918c15e --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDesktopActions.stories.tsx @@ -0,0 +1,187 @@ +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 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 ( + <> +
+ + Spirit + + + + + + + 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..03a84ed19e --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialog.stories.tsx @@ -0,0 +1,198 @@ +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 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 ( + <> +
+ + Spirit + + + + + + + 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..321c9cb08f --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialogActions.stories.tsx @@ -0,0 +1,187 @@ +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 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 ( + <> +
+ + Spirit + + + + + + + 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..f26426d079 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialogButton.stories.tsx @@ -0,0 +1,178 @@ +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 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 ( + <> +
+ + Spirit + + + + + + + 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..7d7e75b8b5 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialogCloseButton.stories.tsx @@ -0,0 +1,183 @@ +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 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 ( + <> +
+ + Spirit + + + + + + + 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..47a49fa9ae --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialogLink.stories.tsx @@ -0,0 +1,187 @@ +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 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 ( + <> +
+ + Spirit + + + + + + + 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..d003462555 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialogNav.stories.tsx @@ -0,0 +1,177 @@ +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 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 ( + <> +
+ + Spirit + + + + + + + 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..69bea9e750 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialogNavItem.stories.tsx @@ -0,0 +1,177 @@ +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 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 ( + <> +
+ + Spirit + + + + + + + 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..4fe7dbf5f3 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderDialogText.stories.tsx @@ -0,0 +1,181 @@ +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 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 ( + <> +
+ + Spirit + + + + + + + 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..7aedf8b664 --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderLink.stories.tsx @@ -0,0 +1,185 @@ +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 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 ( + <> +
+ + Spirit + + + + + + + + + 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..3d822f8c5b --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderMobileActions.stories.tsx @@ -0,0 +1,199 @@ +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 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 ( + <> +
+ + Spirit + + + + + + + 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..2aa9e1ab0b --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderNav.stories.tsx @@ -0,0 +1,177 @@ +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 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 ( + <> +
+ + Spirit + + + + + + + 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..4afe351dbd --- /dev/null +++ b/packages/web-react/src/components/Header/HeaderNavItem.stories.tsx @@ -0,0 +1,177 @@ +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 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 ( + <> +
+ + Spirit + + + + + + + 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', - }, -};