first commit
This commit is contained in:
60
services/web/frontend/stories/ui/badge.stories.tsx
Normal file
60
services/web/frontend/stories/ui/badge.stories.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import Badge from '@/features/ui/components/bootstrap-5/badge'
|
||||
import Icon from '@/shared/components/icon'
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
import classnames from 'classnames'
|
||||
|
||||
const meta: Meta<typeof Badge> = {
|
||||
title: 'Shared / Components / Badge',
|
||||
component: Badge,
|
||||
args: {
|
||||
children: 'Badge',
|
||||
},
|
||||
argTypes: {
|
||||
bg: {
|
||||
options: ['light', 'info', 'primary', 'warning', 'danger'],
|
||||
control: { type: 'radio' },
|
||||
},
|
||||
prepend: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
className: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof Badge>
|
||||
|
||||
export const BadgeDefault: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<Badge
|
||||
className={classnames({ 'text-dark': args.bg === 'light' })}
|
||||
{...args}
|
||||
/>
|
||||
)
|
||||
},
|
||||
}
|
||||
BadgeDefault.args = {
|
||||
bg: meta.argTypes!.bg!.options![0],
|
||||
}
|
||||
|
||||
export const BadgePrepend: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<Badge
|
||||
className={classnames({ 'text-dark': args.bg === 'light' })}
|
||||
prepend={<Icon type="star" fw />}
|
||||
{...args}
|
||||
/>
|
||||
)
|
||||
},
|
||||
}
|
||||
BadgePrepend.args = {
|
||||
bg: meta.argTypes!.bg!.options![0],
|
||||
}
|
||||
50
services/web/frontend/stories/ui/button.stories.tsx
Normal file
50
services/web/frontend/stories/ui/button.stories.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import Button from '@/features/ui/components/bootstrap-5/button'
|
||||
import { Meta } from '@storybook/react'
|
||||
|
||||
type Args = React.ComponentProps<typeof Button>
|
||||
|
||||
export const NewButton = (args: Args) => {
|
||||
return <Button {...args} />
|
||||
}
|
||||
|
||||
export const ButtonWithLeadingIcon = (args: Args) => {
|
||||
return <Button leadingIcon="add" {...args} />
|
||||
}
|
||||
|
||||
export const ButtonWithTrailingIcon = (args: Args) => {
|
||||
return <Button trailingIcon="add" {...args} />
|
||||
}
|
||||
|
||||
export const ButtonWithIcons = (args: Args) => {
|
||||
return <Button trailingIcon="add" leadingIcon="add" {...args} />
|
||||
}
|
||||
|
||||
const meta: Meta<typeof Button> = {
|
||||
title: 'Shared / Components / Button',
|
||||
component: Button,
|
||||
args: {
|
||||
children: 'A Button',
|
||||
disabled: false,
|
||||
isLoading: false,
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: 'radio',
|
||||
options: ['small', 'default', 'large'],
|
||||
},
|
||||
variant: {
|
||||
control: 'radio',
|
||||
options: [
|
||||
'primary',
|
||||
'secondary',
|
||||
'ghost',
|
||||
'danger',
|
||||
'danger-ghost',
|
||||
'premium',
|
||||
'premium-secondary',
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
236
services/web/frontend/stories/ui/dropdown-menu.stories.tsx
Normal file
236
services/web/frontend/stories/ui/dropdown-menu.stories.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
DropdownDivider,
|
||||
DropdownHeader,
|
||||
} from '@/features/ui/components/bootstrap-5/dropdown-menu'
|
||||
import type { Meta } from '@storybook/react'
|
||||
import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
|
||||
|
||||
type Args = React.ComponentProps<typeof DropdownMenu>
|
||||
|
||||
export const Default = (args: Args) => {
|
||||
return (
|
||||
<DropdownMenu show>
|
||||
<li>
|
||||
<DropdownItem eventKey="1" href="#/action-1">
|
||||
Example
|
||||
</DropdownItem>
|
||||
</li>
|
||||
<li>
|
||||
<DropdownItem eventKey="2" href="#/action-2">
|
||||
Example
|
||||
</DropdownItem>
|
||||
</li>
|
||||
<DropdownDivider />
|
||||
<li>
|
||||
<DropdownItem eventKey="3" disabled={args.disabled} href="#/action-3">
|
||||
Example
|
||||
</DropdownItem>
|
||||
</li>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
||||
export const Active = (args: Args) => {
|
||||
return (
|
||||
<DropdownMenu show>
|
||||
<li>
|
||||
<DropdownItem eventKey="1" href="#/action-1">
|
||||
Example
|
||||
</DropdownItem>
|
||||
</li>
|
||||
<li>
|
||||
<DropdownItem
|
||||
eventKey="2"
|
||||
active
|
||||
href="#/action-2"
|
||||
trailingIcon="check"
|
||||
>
|
||||
Example
|
||||
</DropdownItem>
|
||||
</li>
|
||||
<DropdownDivider />
|
||||
<li>
|
||||
<DropdownItem eventKey="3" disabled={args.disabled} href="#/action-3">
|
||||
Example
|
||||
</DropdownItem>
|
||||
</li>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
||||
export const MultipleSelection = (args: Args) => {
|
||||
return (
|
||||
<DropdownMenu show>
|
||||
<DropdownHeader>Header</DropdownHeader>
|
||||
<li>
|
||||
<DropdownItem
|
||||
eventKey="1"
|
||||
href="#/action-1"
|
||||
leadingIcon={<DropdownItem.EmptyLeadingIcon />}
|
||||
>
|
||||
Example
|
||||
</DropdownItem>
|
||||
</li>
|
||||
<li>
|
||||
<DropdownItem eventKey="2" href="#/action-2" leadingIcon="check">
|
||||
Example
|
||||
</DropdownItem>
|
||||
</li>
|
||||
<li>
|
||||
<DropdownItem eventKey="3" href="#/action-3" leadingIcon="check">
|
||||
Example
|
||||
</DropdownItem>
|
||||
</li>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
||||
export const Danger = (args: Args) => {
|
||||
return (
|
||||
<DropdownMenu show>
|
||||
<li>
|
||||
<DropdownItem eventKey="1" disabled={args.disabled} href="#/action-1">
|
||||
Example
|
||||
</DropdownItem>
|
||||
</li>
|
||||
<li>
|
||||
<DropdownItem eventKey="2" href="#/action-2">
|
||||
Example
|
||||
</DropdownItem>
|
||||
</li>
|
||||
<DropdownDivider />
|
||||
<li>
|
||||
<DropdownItem eventKey="3" href="#/action-3" variant="danger">
|
||||
Example
|
||||
</DropdownItem>
|
||||
</li>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
||||
export const Description = (args: Args) => {
|
||||
return (
|
||||
<DropdownMenu show>
|
||||
<li>
|
||||
<DropdownItem
|
||||
disabled={args.disabled}
|
||||
eventKey="1"
|
||||
href="#/action-1"
|
||||
description="Description of the menu"
|
||||
>
|
||||
Example
|
||||
</DropdownItem>
|
||||
</li>
|
||||
<li>
|
||||
<DropdownItem
|
||||
active
|
||||
eventKey="2"
|
||||
href="#/action-2"
|
||||
description="Description of the menu"
|
||||
trailingIcon="check"
|
||||
>
|
||||
Example
|
||||
</DropdownItem>
|
||||
</li>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
||||
export const LeadingIcon = (args: Args) => {
|
||||
return (
|
||||
<DropdownMenu show>
|
||||
<OLDropdownMenuItem
|
||||
disabled={args.disabled}
|
||||
eventKey="1"
|
||||
href="#/action-1"
|
||||
leadingIcon="view_column_2"
|
||||
>
|
||||
Editor & PDF
|
||||
</OLDropdownMenuItem>
|
||||
<OLDropdownMenuItem
|
||||
active
|
||||
eventKey="2"
|
||||
href="#/action-2"
|
||||
leadingIcon="terminal"
|
||||
>
|
||||
Editor only
|
||||
</OLDropdownMenuItem>
|
||||
<OLDropdownMenuItem
|
||||
eventKey="3"
|
||||
href="#/action-3"
|
||||
leadingIcon="picture_as_pdf"
|
||||
>
|
||||
PDF only
|
||||
</OLDropdownMenuItem>
|
||||
<OLDropdownMenuItem
|
||||
eventKey="4"
|
||||
href="#/action-4"
|
||||
leadingIcon="select_window"
|
||||
>
|
||||
PDF in separate tab
|
||||
</OLDropdownMenuItem>
|
||||
<OLDropdownMenuItem
|
||||
eventKey="5"
|
||||
href="#/action-5"
|
||||
leadingIcon="align_space_even"
|
||||
description="Some description"
|
||||
>
|
||||
With a description
|
||||
</OLDropdownMenuItem>
|
||||
<OLDropdownMenuItem
|
||||
eventKey="6"
|
||||
href="#/action-6"
|
||||
leadingIcon="align_space_even"
|
||||
className="dropdown-item-material-icon-small"
|
||||
>
|
||||
Small icon
|
||||
</OLDropdownMenuItem>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
||||
export const TrailingIcon = (args: Args) => {
|
||||
return (
|
||||
<DropdownMenu show>
|
||||
<OLDropdownMenuItem eventKey="1" href="#/action-1" trailingIcon="check">
|
||||
Tick
|
||||
</OLDropdownMenuItem>
|
||||
<OLDropdownMenuItem
|
||||
eventKey="2"
|
||||
href="#/action-2"
|
||||
trailingIcon="check"
|
||||
description="Some description"
|
||||
>
|
||||
With a description
|
||||
</OLDropdownMenuItem>
|
||||
<OLDropdownMenuItem
|
||||
eventKey="3"
|
||||
href="#/action-3"
|
||||
leadingIcon="align_space_even"
|
||||
trailingIcon="check"
|
||||
description="Some description"
|
||||
>
|
||||
With a leading icon
|
||||
</OLDropdownMenuItem>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
||||
const meta: Meta<typeof DropdownMenu> = {
|
||||
title: 'Shared / Components / DropdownMenu',
|
||||
component: DropdownMenu,
|
||||
argTypes: {
|
||||
disabled: {
|
||||
control: 'boolean',
|
||||
},
|
||||
show: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
@@ -0,0 +1,62 @@
|
||||
import { useRef, useLayoutEffect } from 'react'
|
||||
import { Form } from 'react-bootstrap-5'
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
const meta: Meta<(typeof Form)['Check']> = {
|
||||
title: 'Shared / Components / Form',
|
||||
component: Form.Check,
|
||||
argTypes: {
|
||||
id: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
defaultChecked: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<(typeof Form)['Check']>
|
||||
|
||||
export const Checkbox: Story = {
|
||||
args: {
|
||||
id: 'id-1',
|
||||
label: 'Label',
|
||||
disabled: false,
|
||||
},
|
||||
}
|
||||
|
||||
export const CheckboxChecked: Story = {
|
||||
args: {
|
||||
id: 'id-1',
|
||||
label: 'Label',
|
||||
disabled: false,
|
||||
defaultChecked: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const CheckboxIndeterminate = (args: Story['args']) => {
|
||||
const ref = useRef<HTMLInputElement>()
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (ref.current) {
|
||||
ref.current.indeterminate = true
|
||||
}
|
||||
}, [])
|
||||
|
||||
return <Form.Check ref={ref} {...args} />
|
||||
}
|
||||
CheckboxIndeterminate.args = {
|
||||
id: 'id-2',
|
||||
label: 'Label',
|
||||
disabled: false,
|
||||
}
|
||||
300
services/web/frontend/stories/ui/form/form-input-bs5.stories.tsx
Normal file
300
services/web/frontend/stories/ui/form/form-input-bs5.stories.tsx
Normal file
@@ -0,0 +1,300 @@
|
||||
import { Form } from 'react-bootstrap-5'
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
import FormGroup from '@/features/ui/components/bootstrap-5/form/form-group'
|
||||
import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
|
||||
import FormControl from '@/features/ui/components/bootstrap-5/form/form-control'
|
||||
import MaterialIcon from '@/shared/components/material-icon'
|
||||
import FormFeedback from '@/features/ui/components/bootstrap-5/form/form-feedback'
|
||||
|
||||
const meta: Meta<React.ComponentProps<typeof FormControl>> = {
|
||||
title: 'Shared / Components / Form / Input',
|
||||
component: FormControl,
|
||||
}
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<React.ComponentProps<typeof FormControl>>
|
||||
|
||||
export const Default: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl defaultValue="Large input" size="lg" {...args} />
|
||||
<FormText>Helper</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl defaultValue="Regular input" {...args} />
|
||||
<FormText>Helper</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl defaultValue="Small input" size="sm" {...args} />
|
||||
<FormText>Helper</FormText>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
Default.args = {
|
||||
disabled: false,
|
||||
}
|
||||
|
||||
export const Info: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Large input"
|
||||
size="lg"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="info">Info</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Regular input"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="info">Info</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Small input"
|
||||
size="sm"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="info">Info</FormText>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Error: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Large input"
|
||||
size="lg"
|
||||
isInvalid
|
||||
{...args}
|
||||
/>
|
||||
<FormFeedback type="invalid">Error</FormFeedback>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Regular input"
|
||||
isInvalid
|
||||
{...args}
|
||||
/>
|
||||
<FormFeedback type="invalid">Error</FormFeedback>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Small input"
|
||||
size="sm"
|
||||
isInvalid
|
||||
{...args}
|
||||
/>
|
||||
<FormFeedback type="invalid">Error</FormFeedback>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Warning: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Large input"
|
||||
size="lg"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="warning">Warning</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Regular input"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="warning">Warning</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Small input"
|
||||
size="sm"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="warning">Warning</FormText>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Success: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Large input"
|
||||
size="lg"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="success">Success</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Regular input"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="success">Success</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Small input"
|
||||
size="sm"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="success">Success</FormText>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const WithIcons: Story = {
|
||||
render: args => {
|
||||
const handleClear = () => {
|
||||
alert('Clicked clear button')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
prepend={<MaterialIcon type="search" />}
|
||||
append={
|
||||
<button
|
||||
type="button"
|
||||
className="form-control-search-clear-btn"
|
||||
onClick={handleClear}
|
||||
>
|
||||
<MaterialIcon type="clear" />
|
||||
</button>
|
||||
}
|
||||
size="lg"
|
||||
{...args}
|
||||
/>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
prepend={<MaterialIcon type="search" />}
|
||||
append={
|
||||
<button
|
||||
type="button"
|
||||
className="form-control-search-clear-btn"
|
||||
onClick={handleClear}
|
||||
>
|
||||
<MaterialIcon type="clear" />
|
||||
</button>
|
||||
}
|
||||
{...args}
|
||||
/>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
prepend={<MaterialIcon type="search" />}
|
||||
append={
|
||||
<button
|
||||
type="button"
|
||||
className="form-control-search-clear-btn"
|
||||
onClick={handleClear}
|
||||
>
|
||||
<MaterialIcon type="clear" />
|
||||
</button>
|
||||
}
|
||||
size="sm"
|
||||
{...args}
|
||||
/>
|
||||
</FormGroup>
|
||||
<br />
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Disabled state</Form.Label>
|
||||
<FormControl
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
prepend={<MaterialIcon type="search" />}
|
||||
append={
|
||||
<button
|
||||
type="button"
|
||||
className="form-control-search-clear-btn"
|
||||
onClick={handleClear}
|
||||
disabled
|
||||
>
|
||||
<MaterialIcon type="clear" />
|
||||
</button>
|
||||
}
|
||||
disabled
|
||||
{...args}
|
||||
/>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { Form } from 'react-bootstrap-5'
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
const meta: Meta<(typeof Form)['Check']> = {
|
||||
title: 'Shared / Components / Form',
|
||||
component: Form.Check,
|
||||
argTypes: {
|
||||
id: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
type: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
defaultChecked: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<(typeof Form)['Check']>
|
||||
|
||||
export const Radio: Story = {
|
||||
args: {
|
||||
id: 'id-1',
|
||||
type: 'radio',
|
||||
label: 'Label',
|
||||
disabled: false,
|
||||
},
|
||||
}
|
||||
|
||||
export const RadioChecked: Story = {
|
||||
args: {
|
||||
id: 'id-1',
|
||||
type: 'radio',
|
||||
label: 'Label',
|
||||
disabled: false,
|
||||
defaultChecked: true,
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
import { Form, FormSelectProps } from 'react-bootstrap-5'
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
import FormGroup from '@/features/ui/components/bootstrap-5/form/form-group'
|
||||
import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
|
||||
|
||||
const meta: Meta<FormSelectProps> = {
|
||||
title: 'Shared / Components / Form / Select',
|
||||
component: Form.Select,
|
||||
}
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<FormSelectProps>
|
||||
|
||||
export const Default: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select size="lg" {...args}>
|
||||
<option>Large select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText>Helper</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select {...args}>
|
||||
<option>Regular select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText>Helper</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select size="sm" {...args}>
|
||||
<option>Small select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText>Helper</FormText>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
Default.args = {
|
||||
disabled: false,
|
||||
}
|
||||
|
||||
export const Info: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select size="lg" {...args}>
|
||||
<option>Large select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText type="info">Info</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select {...args}>
|
||||
<option>Regular select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText type="info">Info</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select size="sm" {...args}>
|
||||
<option>Small select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText type="info">Info</FormText>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Error: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select size="lg" isInvalid {...args}>
|
||||
<option>Large select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText type="error">Error</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select isInvalid {...args}>
|
||||
<option>Regular select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText type="error">Error</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select size="sm" isInvalid {...args}>
|
||||
<option>Small select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText type="error">Error</FormText>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Warning: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select size="lg" {...args}>
|
||||
<option>Large select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText type="warning">Warning</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select {...args}>
|
||||
<option>Regular select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText type="warning">Warning</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select size="sm" {...args}>
|
||||
<option>Small select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText type="warning">Warning</FormText>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Success: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select size="lg" {...args}>
|
||||
<option>Large select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText type="success">Success</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select {...args}>
|
||||
<option>Regular select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText type="success">Success</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Form.Select size="sm" {...args}>
|
||||
<option>Small select</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</Form.Select>
|
||||
<FormText type="success">Success</FormText>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,227 @@
|
||||
import { Form } from 'react-bootstrap-5'
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
import FormGroup from '@/features/ui/components/bootstrap-5/form/form-group'
|
||||
import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
|
||||
import FormControl from '@/features/ui/components/bootstrap-5/form/form-control'
|
||||
|
||||
const meta: Meta<React.ComponentProps<typeof FormControl>> = {
|
||||
title: 'Shared / Components / Form / Textarea',
|
||||
component: FormControl,
|
||||
}
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<React.ComponentProps<typeof FormControl>>
|
||||
|
||||
export const Default: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
as="textarea"
|
||||
defaultValue="Large input"
|
||||
size="lg"
|
||||
{...args}
|
||||
/>
|
||||
<FormText>Helper</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl as="textarea" defaultValue="Regular input" {...args} />
|
||||
<FormText>Helper</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
as="textarea"
|
||||
defaultValue="Small input"
|
||||
size="sm"
|
||||
{...args}
|
||||
/>
|
||||
<FormText>Helper</FormText>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
Default.args = {
|
||||
disabled: false,
|
||||
}
|
||||
|
||||
export const Info: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
as="textarea"
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Large input"
|
||||
size="lg"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="info">Info</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
as="textarea"
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Regular input"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="info">Info</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
as="textarea"
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Small input"
|
||||
size="sm"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="info">Info</FormText>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Error: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
as="textarea"
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Large input"
|
||||
size="lg"
|
||||
isInvalid
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="error">Error</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
as="textarea"
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Regular input"
|
||||
isInvalid
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="error">Error</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
as="textarea"
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Small input"
|
||||
size="sm"
|
||||
isInvalid
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="error">Error</FormText>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Warning: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
as="textarea"
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Large input"
|
||||
size="lg"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="warning">Warning</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
as="textarea"
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Regular input"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="warning">Warning</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
as="textarea"
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Small input"
|
||||
size="sm"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="warning">Warning</FormText>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Success: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<>
|
||||
<FormGroup controlId="id-1">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
as="textarea"
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Large input"
|
||||
size="lg"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="success">Success</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-2">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
as="textarea"
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Regular input"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="success">Success</FormText>
|
||||
</FormGroup>
|
||||
<hr />
|
||||
<FormGroup controlId="id-3">
|
||||
<Form.Label>Label</Form.Label>
|
||||
<FormControl
|
||||
as="textarea"
|
||||
placeholder="Placeholder"
|
||||
defaultValue="Small input"
|
||||
size="sm"
|
||||
{...args}
|
||||
/>
|
||||
<FormText type="success">Success</FormText>
|
||||
</FormGroup>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
40
services/web/frontend/stories/ui/icon-button.stories.tsx
Normal file
40
services/web/frontend/stories/ui/icon-button.stories.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import IconButton from '@/features/ui/components/bootstrap-5/icon-button'
|
||||
import type { Meta } from '@storybook/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type Args = React.ComponentProps<typeof IconButton>
|
||||
|
||||
export const Icon = (args: Args) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return <IconButton accessibilityLabel={t('add')} disabled {...args} />
|
||||
}
|
||||
|
||||
const meta: Meta<typeof IconButton> = {
|
||||
title: 'Shared / Components / IconButton',
|
||||
component: IconButton,
|
||||
args: {
|
||||
disabled: false,
|
||||
icon: 'add',
|
||||
isLoading: false,
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: 'radio',
|
||||
options: ['small', 'default', 'large'],
|
||||
},
|
||||
variant: {
|
||||
control: 'radio',
|
||||
options: [
|
||||
'primary',
|
||||
'secondary',
|
||||
'ghost',
|
||||
'danger',
|
||||
'danger-ghost',
|
||||
'premium',
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
29
services/web/frontend/stories/ui/row.stories.tsx
Normal file
29
services/web/frontend/stories/ui/row.stories.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import { Container, Row, Col } from 'react-bootstrap-5'
|
||||
import { Meta } from '@storybook/react'
|
||||
|
||||
type Args = React.ComponentProps<typeof Row>
|
||||
|
||||
export const ColumnRowCell = (args: Args) => {
|
||||
return (
|
||||
<Container style={{ border: '3px solid green' }}>
|
||||
<Row {...args} style={{ border: '1px solid black' }}>
|
||||
<Col sm={6} style={{ border: '1px solid red' }}>
|
||||
<div style={{ backgroundColor: '#ddd' }}>Col 1</div>
|
||||
</Col>
|
||||
<Col sm={6} style={{ border: '1px solid red' }}>
|
||||
<div style={{ backgroundColor: '#ddd' }}>Col 2</div>
|
||||
</Col>
|
||||
<Col sm={{ span: 10, offset: 2 }} style={{ border: '1px solid red' }}>
|
||||
<div style={{ backgroundColor: '#ddd' }}>Col 3</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const meta: Meta<typeof Row> = {
|
||||
title: 'Shared / Components / Column-Row-Cell',
|
||||
component: Row,
|
||||
}
|
||||
|
||||
export default meta
|
||||
61
services/web/frontend/stories/ui/split-button.stories.tsx
Normal file
61
services/web/frontend/stories/ui/split-button.stories.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import { Fragment } from 'react'
|
||||
import type { Meta } from '@storybook/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
Dropdown,
|
||||
DropdownHeader,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownToggle,
|
||||
} from '@/features/ui/components/bootstrap-5/dropdown-menu'
|
||||
import Button from '@/features/ui/components/bootstrap-5/button'
|
||||
import { ButtonGroup } from 'react-bootstrap-5'
|
||||
|
||||
type Args = React.ComponentProps<typeof Dropdown>
|
||||
|
||||
export const Sizes = (args: Args) => {
|
||||
const { t } = useTranslation()
|
||||
const sizes = {
|
||||
Large: 'lg',
|
||||
Regular: undefined,
|
||||
Small: 'sm',
|
||||
} as const
|
||||
const variants = ['primary', 'secondary', 'danger'] as const
|
||||
|
||||
return Object.entries(sizes).map(([label, size]) => (
|
||||
<Fragment key={`${label}-${size}`}>
|
||||
<h4>{label}</h4>
|
||||
<div style={{ display: 'inline-flex', gap: '10px' }}>
|
||||
{variants.map(variant => (
|
||||
<Dropdown key={variant} as={ButtonGroup}>
|
||||
<Button variant={variant} size={size}>
|
||||
Split Button
|
||||
</Button>
|
||||
<DropdownToggle
|
||||
split
|
||||
variant={variant}
|
||||
id={`split-btn-${variant}-${size}`}
|
||||
size={size}
|
||||
aria-label={t('expand')}
|
||||
/>
|
||||
<DropdownMenu>
|
||||
<DropdownHeader>Header</DropdownHeader>
|
||||
<DropdownItem as="button">Action 1</DropdownItem>
|
||||
<DropdownItem as="button">Action 2</DropdownItem>
|
||||
<DropdownItem as="button">Action 3</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
))}
|
||||
</div>
|
||||
</Fragment>
|
||||
))
|
||||
}
|
||||
const meta: Meta<typeof Dropdown> = {
|
||||
title: 'Shared/Components/SplitButton',
|
||||
component: Dropdown,
|
||||
args: {
|
||||
align: { sm: 'start' },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
74
services/web/frontend/stories/ui/tag.stories.tsx
Normal file
74
services/web/frontend/stories/ui/tag.stories.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import OLTagIcon from '@/features/ui/components/ol/icons/ol-tag-icon'
|
||||
import Tag from '@/features/ui/components/bootstrap-5/tag'
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
const meta: Meta<typeof Tag> = {
|
||||
title: 'Shared / Components / Tag',
|
||||
component: Tag,
|
||||
args: {
|
||||
children: 'Tag',
|
||||
},
|
||||
argTypes: {
|
||||
prepend: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
className: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
closeBtnProps: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof Tag>
|
||||
|
||||
export const TagDefault: Story = {
|
||||
render: args => {
|
||||
return <Tag {...args} />
|
||||
},
|
||||
}
|
||||
|
||||
export const TagPrepend: Story = {
|
||||
render: args => {
|
||||
return <Tag prepend={<OLTagIcon />} {...args} />
|
||||
},
|
||||
}
|
||||
|
||||
export const TagWithCloseButton: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<Tag
|
||||
prepend={<OLTagIcon />}
|
||||
closeBtnProps={{
|
||||
onClick: () => alert('Close triggered!'),
|
||||
}}
|
||||
{...args}
|
||||
/>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const TagWithContentButtonAndCloseButton: Story = {
|
||||
render: args => {
|
||||
return (
|
||||
<Tag
|
||||
prepend={<OLTagIcon />}
|
||||
contentProps={{
|
||||
onClick: () => alert('Content button clicked!'),
|
||||
}}
|
||||
closeBtnProps={{
|
||||
onClick: () => alert('Close triggered!'),
|
||||
}}
|
||||
{...args}
|
||||
/>
|
||||
)
|
||||
},
|
||||
}
|
||||
38
services/web/frontend/stories/ui/tooltip.stories.tsx
Normal file
38
services/web/frontend/stories/ui/tooltip.stories.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import OLButton from '@/features/ui/components/ol/ol-button'
|
||||
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
|
||||
import { Meta } from '@storybook/react'
|
||||
|
||||
export const Tooltips = () => {
|
||||
const placements = ['top', 'right', 'bottom', 'left'] as const
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '200px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
margin: '0 auto',
|
||||
padding: '35px 0',
|
||||
gap: '35px',
|
||||
}}
|
||||
>
|
||||
{placements.map(placement => (
|
||||
<OLTooltip
|
||||
key={placement}
|
||||
id={`tooltip-${placement}`}
|
||||
description={`Tooltip on ${placement}`}
|
||||
overlayProps={{ placement }}
|
||||
>
|
||||
<OLButton variant="secondary">Tooltip on {placement}</OLButton>
|
||||
</OLTooltip>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const meta: Meta<typeof OLTooltip> = {
|
||||
title: 'Shared / Components / Tooltip',
|
||||
component: OLTooltip,
|
||||
}
|
||||
|
||||
export default meta
|
||||
Reference in New Issue
Block a user