From aa55223f7261388d8d608940e91b0ad54bcf8445 Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Mon, 4 Sep 2023 11:20:22 +0200 Subject: [PATCH] docs: fix show code on some stories and remove button migration doc (#2857) --- .../src/__stories__/ButtonMigration/Sizes.tsx | 29 ---- .../__stories__/ButtonMigration/Variants.tsx | 131 ------------------ .../ButtonMigration/index.stories.mdx | 48 ------- .../Banner/__stories__/Directions.stories.tsx | 4 +- .../Banner/__stories__/Sizes.stories.tsx | 6 +- .../Banner/__stories__/Variants.stories.tsx | 4 +- .../Button/__stories__/AsLink.stories.tsx | 4 +- .../__stories__/IconPosition.stories.tsx | 6 +- .../Button/__stories__/Showcase.stories.tsx | 3 +- .../Button/__stories__/Size.stories.tsx | 4 +- .../__stories__/AdvancedHeader.stories.tsx | 8 +- .../Card/__stories__/Disabled.stories.tsx | 4 +- .../Card/__stories__/IsActive.stories.tsx | 4 +- .../Checkbox/__stories__/Checked.stories.tsx | 11 +- .../Checkbox/__stories__/Disabled.stories.tsx | 12 +- .../Checkbox/__stories__/Value.stories.tsx | 8 +- .../__stories__/Controlled.stories.tsx | 11 +- .../DateInput/__stories__/I18n.stories.tsx | 4 +- .../__stories__/Controlled.stories.tsx | 4 +- .../__stories__/MinHeight.stories.tsx | 4 +- .../__stories__/NestedExpandable.stories.tsx | 4 +- .../Link/__stories__/OneLine.stories.tsx | 6 +- .../List/__stories__/ColumnInfo.stories.tsx | 4 +- .../List/__stories__/Context.stories.tsx | 4 +- .../List/__stories__/Example.stories.tsx | 3 +- .../List/__stories__/Ordering.stories.tsx | 3 +- .../Loader/__stories__/Active.stories.tsx | 9 +- .../Meter/__stories__/Playground.stories.tsx | 10 +- .../__stories__/Controlled.stories.tsx | 3 +- .../__stories__/Progress.stories.tsx | 9 +- .../Radio/__stories__/Controlled.stories.tsx | 4 +- .../Radio/__stories__/Disabled.stories.tsx | 4 +- .../Radio/__stories__/Error.stories.tsx | 4 +- .../Radio/__stories__/Helper.stories.tsx | 3 +- .../__stories__/Controlled.stories.tsx | 3 +- .../__stories__/Direction.stories.tsx | 23 +-- .../Row/__stories__/AlignItems.stories.tsx | 6 +- .../Row/__stories__/Example.stories.tsx | 8 +- .../__stories__/Children.stories.tsx | 5 +- .../__stories__/Controlled.stories.tsx | 4 +- .../__stories__/Disabled.stories.tsx | 4 +- .../__stories__/Error.stories.tsx | 4 +- .../__stories__/ShowTick.stories.tsx | 6 +- .../__stories__/Tooltip.stories.tsx | 4 +- .../__stories__/Type.stories.tsx | 6 +- .../Table/__stories__/Context.stories.tsx | 4 +- .../Table/__stories__/Ordering.stories.tsx | 3 +- .../Table/__stories__/Spanning.stories.tsx | 3 +- .../Table/__stories__/Style.stories.tsx | 3 +- .../Text/__stories__/Dir.stories.tsx | 8 +- .../Text/__stories__/OneLine.stories.tsx | 6 +- .../Text/__stories__/Placement.stories.tsx | 8 +- .../Text/__stories__/Sentiments.stories.tsx | 10 +- .../Toaster/__stories__/Variants.stories.tsx | 6 +- .../Toggle/__stories__/Helper.stories.tsx | 11 +- .../__stories__/OnComplete.stories.tsx | 4 +- 56 files changed, 188 insertions(+), 330 deletions(-) delete mode 100644 packages/ui/src/__stories__/ButtonMigration/Sizes.tsx delete mode 100644 packages/ui/src/__stories__/ButtonMigration/Variants.tsx delete mode 100644 packages/ui/src/__stories__/ButtonMigration/index.stories.mdx diff --git a/packages/ui/src/__stories__/ButtonMigration/Sizes.tsx b/packages/ui/src/__stories__/ButtonMigration/Sizes.tsx deleted file mode 100644 index efc3b2d579..0000000000 --- a/packages/ui/src/__stories__/ButtonMigration/Sizes.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Table } from '../../components' - -const SIZE_MATCH = { - large: 'large', - medium: 'medium', - small: 'small', - xsmall: 'xsmall', - xxsmall: 'xsmall', -} as const - -export const Sizes = () => ( - - - {(Object.keys(SIZE_MATCH) as (keyof typeof SIZE_MATCH)[]).map( - buttonV1Size => ( - - {buttonV1Size} - {SIZE_MATCH[buttonV1Size]} - - ), - )} - -
-) diff --git a/packages/ui/src/__stories__/ButtonMigration/Variants.tsx b/packages/ui/src/__stories__/ButtonMigration/Variants.tsx deleted file mode 100644 index 592915b5fd..0000000000 --- a/packages/ui/src/__stories__/ButtonMigration/Variants.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import styled from '@emotion/styled' -import { Snippet, Table, Text } from '../../components' - -const StyledCode = styled(Text)` - background: ${({ theme }) => theme.colors.neutral.backgroundStrong}; - padding: ${({ theme }) => theme.space['2']}; - border-radius: ${({ theme }) => theme.radii.default}; - width: 100%; - display: block; -` - -const StyledRow = styled(Table.Row)` - height: 70px; -` - -const StyledSnippet = styled(Snippet)` - padding: 16px; -` - -const VARIANTS_TO_SENTIMENTS = { - info: { - variant: 'filled', - sentiment: 'info', - size: '', - }, - 'info-bordered': { - variant: 'outlined', - sentiment: 'info', - size: '', - }, - link: { - variant: 'ghost', - sentiment: 'info', - size: 'xsmall', - }, - primary: { - variant: 'filled', - sentiment: 'primary', - size: '', - }, - 'primary-bordered': { - variant: 'outlined', - sentiment: 'primary', - size: '', - }, - 'primary-soft-bordered': { - variant: 'outlined', - sentiment: 'primary', - size: '', - }, - secondary: { - variant: 'filled', - sentiment: 'neutral', - size: '', - }, - 'secondary-bordered': { - variant: 'outlined', - sentiment: 'neutral', - size: '', - }, - success: { - variant: 'filled', - sentiment: 'success', - size: '', - }, - 'success-bordered': { - variant: 'outlined', - sentiment: 'success', - size: '', - }, - 'success-soft-bordered': { - variant: 'outlined', - sentiment: 'success', - size: '', - }, - transparent: { - variant: 'ghost', - sentiment: 'neutral', - size: '', - }, - warning: { - variant: 'filled', - sentiment: 'danger', - size: '', - }, - 'warning-bordered': { - variant: 'outlined', - sentiment: 'danger', - size: '', - }, - 'warning-soft-bordered': { - variant: 'outlined', - sentiment: 'danger', - size: '', - }, -} as const - -export const Variants = () => ( - - - {Object.keys(VARIANTS_TO_SENTIMENTS).map(variant => { - const variantToSentiment = - VARIANTS_TO_SENTIMENTS[variant as keyof typeof VARIANTS_TO_SENTIMENTS] - - const newVersion = `variant="${ - variantToSentiment.variant - }" sentiment="${variantToSentiment.sentiment}" ${ - variantToSentiment?.size ? `size="${variantToSentiment?.size}"` : '' - }` - - return ( - - - - {`variant="${variant}"`} - - - - {newVersion} - - - ) - })} - -
-) diff --git a/packages/ui/src/__stories__/ButtonMigration/index.stories.mdx b/packages/ui/src/__stories__/ButtonMigration/index.stories.mdx deleted file mode 100644 index efe047cd7c..0000000000 --- a/packages/ui/src/__stories__/ButtonMigration/index.stories.mdx +++ /dev/null @@ -1,48 +0,0 @@ -import { Meta } from '@storybook/blocks' -import { Variants } from './Variants' -import { Sizes } from './Sizes' -import ThemeWrapper from '../components/ThemeWrapper' - - - -# Migrate to the new Button version - -Welcome to the migration of the new version of button, here we will see how to easily migrate to the new version of the component. - -## Variants match - - - - - -## Size match - - - - - -> **_NOTE:_** -> - Inside `EmptyState` the Button size is `large`. -> - `xsmall` size should only be used for links converted into buttons. - -## Others Old/New props matching - -- `progress` → Loader (if prop `isLoading` if provided) replaces or use the `icon` spot. If you have no icon you can still use `iconPosition="right"` to put the Loader on the right. - ---- - -- `as` → Button do not support `as` prop and always renders a button expect if you provide an href prop then an anchor will be rendered. - ---- - -- `action` → Button do not support `action` prop anymore. Simply provide an `icon` without `children` and the size should be `small`. - ---- - -- `extend` → We removed this behavior, we recommend to still use a `icon` + `text (children)`.. - ---- - -- `iconSize` → Button do not support `iconSize` prop, the icon size is define internally depending on variant/size to make it consistent. - ---- diff --git a/packages/ui/src/components/Banner/__stories__/Directions.stories.tsx b/packages/ui/src/components/Banner/__stories__/Directions.stories.tsx index ac73c4dfaa..56b2bf8a17 100644 --- a/packages/ui/src/components/Banner/__stories__/Directions.stories.tsx +++ b/packages/ui/src/components/Banner/__stories__/Directions.stories.tsx @@ -1,9 +1,10 @@ import type { StoryFn } from '@storybook/react' import { Banner } from '..' -export const Directions: StoryFn = () => ( +export const Directions: StoryFn = args => ( <> ( business and limit your expenses. ( +export const Sizes: StoryFn = args => ( <> ( your expenses. ( your expenses. ( your expenses. ( +export const Variants: StoryFn = args => ( <> ( business and limit your expenses. = () => ( +// @ts-expect-error we can't use args as it leads to a type error +// eslint-disable-next-line @typescript-eslint/no-unused-vars +export const AsLink: StoryFn = args => ( {buttonVariants.map(variant => ( - diff --git a/packages/ui/src/components/Button/__stories__/Showcase.stories.tsx b/packages/ui/src/components/Button/__stories__/Showcase.stories.tsx index d092cc2325..c0c31c468f 100644 --- a/packages/ui/src/components/Button/__stories__/Showcase.stories.tsx +++ b/packages/ui/src/components/Button/__stories__/Showcase.stories.tsx @@ -10,7 +10,7 @@ const COLUMNS = [ })), ] -export const Showcase: StoryFn = () => { +export const Showcase: StoryFn = args => { const onClick = () => {} return ( @@ -27,6 +27,7 @@ export const Showcase: StoryFn = () => { ))} diff --git a/packages/ui/src/components/Card/__stories__/AdvancedHeader.stories.tsx b/packages/ui/src/components/Card/__stories__/AdvancedHeader.stories.tsx index 373c292ffe..8e61c539fa 100644 --- a/packages/ui/src/components/Card/__stories__/AdvancedHeader.stories.tsx +++ b/packages/ui/src/components/Card/__stories__/AdvancedHeader.stories.tsx @@ -5,7 +5,7 @@ import { Stack } from '../../Stack' import { Text } from '../../Text' import { Card } from '../index' -export const AdvancedHeader: StoryFn = () => { +export const AdvancedHeader: StoryFn = args => { const CustomHeader = ( @@ -20,7 +20,11 @@ export const AdvancedHeader: StoryFn = () => { ) - return This is the content of a Card + return ( + + This is the content of a Card + + ) } AdvancedHeader.parameters = { diff --git a/packages/ui/src/components/Card/__stories__/Disabled.stories.tsx b/packages/ui/src/components/Card/__stories__/Disabled.stories.tsx index 30d61518cb..65d29b70bd 100644 --- a/packages/ui/src/components/Card/__stories__/Disabled.stories.tsx +++ b/packages/ui/src/components/Card/__stories__/Disabled.stories.tsx @@ -4,8 +4,8 @@ import { Stack } from '../../Stack' import { Text } from '../../Text' import { Card } from '../index' -export const Disabled: StoryFn = () => ( - +export const Disabled: StoryFn = args => ( + This is a disabled card children. diff --git a/packages/ui/src/components/Card/__stories__/IsActive.stories.tsx b/packages/ui/src/components/Card/__stories__/IsActive.stories.tsx index ddd547175c..f8e71e0ab5 100644 --- a/packages/ui/src/components/Card/__stories__/IsActive.stories.tsx +++ b/packages/ui/src/components/Card/__stories__/IsActive.stories.tsx @@ -5,11 +5,11 @@ import { Stack } from '../../Stack' import { Text } from '../../Text' import { Card } from '../index' -export const IsActive: StoryFn = () => { +export const IsActive: StoryFn = args => { const [active, setActive] = useState(true) return ( - + This card is currently highlighted through isActive prop. In this diff --git a/packages/ui/src/components/Checkbox/__stories__/Checked.stories.tsx b/packages/ui/src/components/Checkbox/__stories__/Checked.stories.tsx index ef1d337bba..c6b0210828 100644 --- a/packages/ui/src/components/Checkbox/__stories__/Checked.stories.tsx +++ b/packages/ui/src/components/Checkbox/__stories__/Checked.stories.tsx @@ -1,12 +1,17 @@ import type { StoryFn } from '@storybook/react' import { Checkbox } from '..' -export const Checked: StoryFn = () => ( +export const Checked: StoryFn = args => ( <> - {}}> + {}}> Checked checkbox - {}}> + {}} + > Indeterminate checkbox diff --git a/packages/ui/src/components/Checkbox/__stories__/Disabled.stories.tsx b/packages/ui/src/components/Checkbox/__stories__/Disabled.stories.tsx index 7418f88dda..0f4410f7b9 100644 --- a/packages/ui/src/components/Checkbox/__stories__/Disabled.stories.tsx +++ b/packages/ui/src/components/Checkbox/__stories__/Disabled.stories.tsx @@ -1,21 +1,21 @@ import type { StoryFn } from '@storybook/react' import { Checkbox } from '..' -export const Disabled: StoryFn = () => ( +export const Disabled: StoryFn = args => ( <> - {}}> + {}}> Checkbox disabled - {}}> + {}}> Checkbox disabled and in error - {}}> + {}}> Checkbox checked and disabled - {}}> + {}}> Checkbox checked, disabled and in error - {}}> + {}}> Checkbox indeterminate and disabled diff --git a/packages/ui/src/components/Checkbox/__stories__/Value.stories.tsx b/packages/ui/src/components/Checkbox/__stories__/Value.stories.tsx index 9ca423ec30..d2388a3370 100644 --- a/packages/ui/src/components/Checkbox/__stories__/Value.stories.tsx +++ b/packages/ui/src/components/Checkbox/__stories__/Value.stories.tsx @@ -1,15 +1,15 @@ import type { StoryFn } from '@storybook/react' import { Checkbox } from '..' -export const Value: StoryFn = () => ( +export const Value: StoryFn = args => ( <> - {}}> + {}}> Checkbox value false - {}}> + {}}> Checkbox value true - {}}> + {}}> Checkbox value 1234 diff --git a/packages/ui/src/components/DateInput/__stories__/Controlled.stories.tsx b/packages/ui/src/components/DateInput/__stories__/Controlled.stories.tsx index 3162cdb73f..ef5f463ccf 100644 --- a/packages/ui/src/components/DateInput/__stories__/Controlled.stories.tsx +++ b/packages/ui/src/components/DateInput/__stories__/Controlled.stories.tsx @@ -3,12 +3,19 @@ import type { ComponentProps } from 'react' import { useState } from 'react' import { DateInput } from '..' -export const Controlled: StoryFn> = () => { +export const Controlled: StoryFn> = args => { const [value, setValue] = useState( new Date('December 17, 1995 03:24:00'), ) - return + return ( + + ) } Controlled.parameters = { diff --git a/packages/ui/src/components/DateInput/__stories__/I18n.stories.tsx b/packages/ui/src/components/DateInput/__stories__/I18n.stories.tsx index 5513fa1ac6..12394adbc9 100644 --- a/packages/ui/src/components/DateInput/__stories__/I18n.stories.tsx +++ b/packages/ui/src/components/DateInput/__stories__/I18n.stories.tsx @@ -5,7 +5,7 @@ import { DateInput } from '..' import type { SelectOption } from '../../SelectInput' import { SelectInput } from '../../SelectInput' -export const I18n: StoryFn> = () => { +export const I18n: StoryFn> = args => { const { locales, currentLocale, switchLocale, dateFnsLocale } = useI18n() if (!dateFnsLocale) { @@ -32,7 +32,7 @@ export const I18n: StoryFn> = () => { ))} - {}} label={currentLocale} /> + {}} label={currentLocale} /> ) } diff --git a/packages/ui/src/components/Expandable/__stories__/Controlled.stories.tsx b/packages/ui/src/components/Expandable/__stories__/Controlled.stories.tsx index 5e982e1b34..5d72cc2148 100644 --- a/packages/ui/src/components/Expandable/__stories__/Controlled.stories.tsx +++ b/packages/ui/src/components/Expandable/__stories__/Controlled.stories.tsx @@ -4,7 +4,7 @@ import { Expandable } from '..' import { Button } from '../../Button' import { Stack } from '../../Stack' -export const Controlled: StoryFn = () => { +export const Controlled: StoryFn = args => { const [toggled, onToggle] = useState(false) const toggle = () => onToggle(state => !state) @@ -13,7 +13,7 @@ export const Controlled: StoryFn = () => { - + I‘m a visible Expandable content diff --git a/packages/ui/src/components/Expandable/__stories__/MinHeight.stories.tsx b/packages/ui/src/components/Expandable/__stories__/MinHeight.stories.tsx index 89b6aa8543..b72dda428f 100644 --- a/packages/ui/src/components/Expandable/__stories__/MinHeight.stories.tsx +++ b/packages/ui/src/components/Expandable/__stories__/MinHeight.stories.tsx @@ -4,7 +4,7 @@ import { Expandable } from '..' import { Button } from '../../Button' import { Stack } from '../../Stack' -export const MinHeight: StoryFn = () => { +export const MinHeight: StoryFn = args => { const [toggled, onToggle] = useState(false) const toggle = () => onToggle(state => !state) @@ -13,7 +13,7 @@ export const MinHeight: StoryFn = () => { - + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea diff --git a/packages/ui/src/components/Expandable/__stories__/NestedExpandable.stories.tsx b/packages/ui/src/components/Expandable/__stories__/NestedExpandable.stories.tsx index b440af1084..5af7a339a7 100644 --- a/packages/ui/src/components/Expandable/__stories__/NestedExpandable.stories.tsx +++ b/packages/ui/src/components/Expandable/__stories__/NestedExpandable.stories.tsx @@ -4,7 +4,7 @@ import { Expandable } from '..' import { Button } from '../../Button' import { Stack } from '../../Stack' -export const NestedExpandable: StoryFn = () => { +export const NestedExpandable: StoryFn = args => { const [toggled, onToggle] = useState(false) const toggle = () => onToggle(state => !state) @@ -20,7 +20,7 @@ export const NestedExpandable: StoryFn = () => { - + I am the nested expandable content I am the first child of the Expandable component diff --git a/packages/ui/src/components/Link/__stories__/OneLine.stories.tsx b/packages/ui/src/components/Link/__stories__/OneLine.stories.tsx index 7619076aaf..309bf7ab0c 100644 --- a/packages/ui/src/components/Link/__stories__/OneLine.stories.tsx +++ b/packages/ui/src/components/Link/__stories__/OneLine.stories.tsx @@ -10,17 +10,17 @@ const Container = styled.div` padding: ${({ theme }) => theme.space['1']}; ` -export const OneLine: StoryFn = () => ( +export const OneLine: StoryFn = args => ( <> Without ellipsis - + This link is quite long and is displayed on two lines. With ellipsis (a tooltip is displayed on hover) - + This link is quite long and is cut in order to avoid two lines. diff --git a/packages/ui/src/components/List/__stories__/ColumnInfo.stories.tsx b/packages/ui/src/components/List/__stories__/ColumnInfo.stories.tsx index 7c01b46307..4763029591 100644 --- a/packages/ui/src/components/List/__stories__/ColumnInfo.stories.tsx +++ b/packages/ui/src/components/List/__stories__/ColumnInfo.stories.tsx @@ -1,8 +1,10 @@ +import type { StoryFn } from '@storybook/react' import { List } from '..' import { data } from './resources' -export const ColumnInfo = () => ( +export const ColumnInfo: StoryFn = args => ( { +export const Context: StoryFn = args => { const SubComponent = ({ srcData }: { srcData: typeof data }) => { const { selectedRowIds } = List.useListContext() @@ -21,7 +21,7 @@ export const Context: StoryFn = () => { } return ( - + {data.map(planet => ( { +export const Example: StoryFn = args => { const [currentOrder, setCurrentOrder] = useState<{ columnId: 'name' | 'perihelion' order: 'asc' | 'desc' @@ -31,6 +31,7 @@ export const Example: StoryFn = () => { return ( { +export const Ordering: StoryFn = args => { const [currentOrder, setCurrentOrder] = useState<{ columnId: 'name' | 'perihelion' order: 'asc' | 'desc' @@ -26,6 +26,7 @@ export const Ordering: StoryFn = () => { return ( +export const Active = Template.bind({}) + +Active.args = { + active: true, +} Active.parameters = { docs: { diff --git a/packages/ui/src/components/Meter/__stories__/Playground.stories.tsx b/packages/ui/src/components/Meter/__stories__/Playground.stories.tsx index 844ee96883..d998a23874 100644 --- a/packages/ui/src/components/Meter/__stories__/Playground.stories.tsx +++ b/packages/ui/src/components/Meter/__stories__/Playground.stories.tsx @@ -1,3 +1,4 @@ +import type { StoryFn } from '@storybook/react' import { useEffect, useState } from 'react' import zxcvbn from 'zxcvbn' import { Meter } from '..' @@ -12,7 +13,7 @@ const strength = [ { color: colors.success.text, text: 'veryStrong' }, ] -export const Playground = () => { +export const Playground: StoryFn = args => { const [value, setValue] = useState(0) const [password, setPassword] = useState('') @@ -30,7 +31,12 @@ export const Playground = () => { value={password} onChange={setPassword} /> - + ) } diff --git a/packages/ui/src/components/NumberInput/__stories__/Controlled.stories.tsx b/packages/ui/src/components/NumberInput/__stories__/Controlled.stories.tsx index 0c744c9c98..a61bef182f 100644 --- a/packages/ui/src/components/NumberInput/__stories__/Controlled.stories.tsx +++ b/packages/ui/src/components/NumberInput/__stories__/Controlled.stories.tsx @@ -3,7 +3,7 @@ import { useState } from 'react' import { NumberInput } from '..' import { Button, Stack } from '../..' -export const Controlled: StoryFn = () => { +export const Controlled: StoryFn = args => { const min = 10 const max = 100 const [value, setState] = useState(20) @@ -15,6 +15,7 @@ export const Controlled: StoryFn = () => { +export const Progress = Template.bind({}) + +Progress.args = { + progress: true, +} Progress.parameters = { docs: { diff --git a/packages/ui/src/components/Radio/__stories__/Controlled.stories.tsx b/packages/ui/src/components/Radio/__stories__/Controlled.stories.tsx index 4abaac817a..bd5ee8b1d6 100644 --- a/packages/ui/src/components/Radio/__stories__/Controlled.stories.tsx +++ b/packages/ui/src/components/Radio/__stories__/Controlled.stories.tsx @@ -2,12 +2,13 @@ import type { StoryFn } from '@storybook/react' import { useState } from 'react' import { Radio } from '..' -export const Controlled: StoryFn = () => { +export const Controlled: StoryFn = args => { const [value, onChange] = useState('label-1') return ( <> { label="Label 1" /> { +export const Disabled: StoryFn = args => { const [value, onChange] = useState('disabled-label-2') return ( <> { label="Label 1" /> { +export const Error: StoryFn = args => { const [value, onChange] = useState('error-label-1') return ( <> { label="Label 1" /> ( +export const Helper: StoryFn = args => ( { +export const Controlled: StoryFn = args => { const [value, onChange] = useState('label-1') return ( { - const [value, onChange] = useState('label-1') +export const Direction = Template.bind({}) - return ( - ) => - onChange(e.currentTarget.value) - } - direction="row" - > - - - - ) +Direction.args = { + direction: 'row', } Direction.parameters = { diff --git a/packages/ui/src/components/Row/__stories__/AlignItems.stories.tsx b/packages/ui/src/components/Row/__stories__/AlignItems.stories.tsx index a275a02056..0a71b92da5 100644 --- a/packages/ui/src/components/Row/__stories__/AlignItems.stories.tsx +++ b/packages/ui/src/components/Row/__stories__/AlignItems.stories.tsx @@ -8,9 +8,9 @@ const DivWithBackground = styled.div` color: ${({ theme }) => theme.colors.primary.text}; ` -export const AlignItems: StoryFn = () => ( +export const AlignItems: StoryFn = args => ( - + 100px height & default align @@ -20,7 +20,7 @@ export const AlignItems: StoryFn = () => ( auto height & default align - + 100px height & align center diff --git a/packages/ui/src/components/Row/__stories__/Example.stories.tsx b/packages/ui/src/components/Row/__stories__/Example.stories.tsx index 8e2df29a9c..e5ff6167f1 100644 --- a/packages/ui/src/components/Row/__stories__/Example.stories.tsx +++ b/packages/ui/src/components/Row/__stories__/Example.stories.tsx @@ -2,10 +2,10 @@ import type { StoryFn } from '@storybook/react' import { Row } from '..' import { Card, Separator, Stack, Status, Text } from '../..' -export const Example: StoryFn = () => ( +export const Example: StoryFn = args => ( - + Status @@ -43,7 +43,7 @@ export const Example: StoryFn = () => ( - + @@ -66,7 +66,7 @@ export const Example: StoryFn = () => ( - +
IPV6 diff --git a/packages/ui/src/components/SelectableCard/__stories__/Children.stories.tsx b/packages/ui/src/components/SelectableCard/__stories__/Children.stories.tsx index 6db87bdf43..da78d5ea5f 100644 --- a/packages/ui/src/components/SelectableCard/__stories__/Children.stories.tsx +++ b/packages/ui/src/components/SelectableCard/__stories__/Children.stories.tsx @@ -9,7 +9,7 @@ import type { SelectOption } from '../../SelectInput' import { SelectInput } from '../../SelectInput' import { Stack } from '../../Stack' -export const Children: StoryFn = () => { +export const Children: StoryFn = args => { const [value, onChange] = useState('label-9') const [selectInputValue, selectInputOnChange] = useState({ label: 'Option 1', @@ -25,6 +25,7 @@ export const Children: StoryFn = () => { return ( <> { )} { { +export const Controlled: StoryFn = args => { const [value, onChange] = useState('label-1') return ( <> { } /> { +export const Disabled: StoryFn = args => { const [value, onChange] = useState('label-8') return ( <> { label="Radio Left" /> { +export const Error: StoryFn = args => { const [value, onChange] = useState('label-12') return ( <> { label="Radio Left" /> { +export const ShowTick: StoryFn = args => { const [value, onChange] = useState('label-5') const [value2, onChange2] = useState({ 'label-1': true, 'label-2': true }) @@ -11,6 +11,7 @@ export const ShowTick: StoryFn = () => { <> { label="Radio Left" /> { { label="Checkbox 1" /> { +export const Tooltip: StoryFn = args => { const [value, onChange] = useState('label-14') return ( <> { label="Radio Left" /> { +export const Type: StoryFn = args => { const [value, onChange] = useState('label-3') const [value2, onChange2] = useState({ 'label-1': true, 'label-2': true }) @@ -11,6 +11,7 @@ export const Type: StoryFn = () => { <> { label="Radio Left" /> { { label="Checkbox 1" /> { +export const Context: StoryFn = args => { const SubComponent = ({ srcData }: { srcData: typeof data }) => { const { selectedRowIds } = Table.useTableContext() @@ -20,7 +20,7 @@ export const Context: StoryFn = () => { } return ( - +
{data.map(movie => ( diff --git a/packages/ui/src/components/Table/__stories__/Ordering.stories.tsx b/packages/ui/src/components/Table/__stories__/Ordering.stories.tsx index 5002b1d535..3e3ea56c8d 100644 --- a/packages/ui/src/components/Table/__stories__/Ordering.stories.tsx +++ b/packages/ui/src/components/Table/__stories__/Ordering.stories.tsx @@ -3,7 +3,7 @@ import { useMemo, useState } from 'react' import { Table } from '..' import { data as sourceData } from './resources' -export const Ordering: StoryFn = () => { +export const Ordering: StoryFn = args => { const [currentOrder, setCurrentOrder] = useState<{ columnId: 'name' | 'releaseYear' order: 'asc' | 'desc' @@ -26,6 +26,7 @@ export const Ordering: StoryFn = () => { return (
theme.colors.info.background}; ` -export const Spanning: StoryFn = () => ( +export const Spanning: StoryFn = args => (
( +export const Style: StoryFn = args => ( {combos.map((combo, index) => ( // eslint-disable-next-line react/no-array-index-key @@ -20,6 +20,7 @@ export const Style: StoryFn = () => ( {combo.bordered ? '✅' : '❌'} Bordered
= () => ( +export const Dir: StoryFn = args => (
ltr - + This text is quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. @@ -14,7 +14,7 @@ export const Dir: StoryFn = () => (
rtl - + This text is quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. @@ -22,7 +22,7 @@ export const Dir: StoryFn = () => (
auto - + This text is quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. diff --git a/packages/ui/src/components/Text/__stories__/OneLine.stories.tsx b/packages/ui/src/components/Text/__stories__/OneLine.stories.tsx index d80f8ddc00..a329e8dbaa 100644 --- a/packages/ui/src/components/Text/__stories__/OneLine.stories.tsx +++ b/packages/ui/src/components/Text/__stories__/OneLine.stories.tsx @@ -10,11 +10,11 @@ const Container = styled.div` padding: ${({ theme }) => theme.space['1']}; ` -export const OneLine: StoryFn = () => ( +export const OneLine: StoryFn = args => ( <> Without ellipsis - + This text is quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. @@ -22,7 +22,7 @@ export const OneLine: StoryFn = () => ( With ellipsis (a tooltip is displayed on hover) - + This text is quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. diff --git a/packages/ui/src/components/Text/__stories__/Placement.stories.tsx b/packages/ui/src/components/Text/__stories__/Placement.stories.tsx index a334eb54dc..347ae7ba74 100644 --- a/packages/ui/src/components/Text/__stories__/Placement.stories.tsx +++ b/packages/ui/src/components/Text/__stories__/Placement.stories.tsx @@ -2,11 +2,11 @@ import type { StoryFn } from '@storybook/react' import { Stack } from '../../Stack' import { Text } from '../index' -export const Placement: StoryFn = () => ( +export const Placement: StoryFn = args => (
start - + This text is quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. @@ -14,7 +14,7 @@ export const Placement: StoryFn = () => (
center - + This text is quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. @@ -22,7 +22,7 @@ export const Placement: StoryFn = () => (
right - + This text is quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. diff --git a/packages/ui/src/components/Text/__stories__/Sentiments.stories.tsx b/packages/ui/src/components/Text/__stories__/Sentiments.stories.tsx index 6fba66a363..3582d57e5b 100644 --- a/packages/ui/src/components/Text/__stories__/Sentiments.stories.tsx +++ b/packages/ui/src/components/Text/__stories__/Sentiments.stories.tsx @@ -3,10 +3,16 @@ import type { ComponentProps } from 'react' import { SENTIMENTS } from '../../../theme' import { Text } from '../index' -export const Sentiments: StoryFn> = () => ( +export const Sentiments: StoryFn> = args => (
{SENTIMENTS.map(sentiment => ( - + This text uses {sentiment} sentiment. ))} diff --git a/packages/ui/src/components/Toaster/__stories__/Variants.stories.tsx b/packages/ui/src/components/Toaster/__stories__/Variants.stories.tsx index 71f58bfb2f..5b1743b5c8 100644 --- a/packages/ui/src/components/Toaster/__stories__/Variants.stories.tsx +++ b/packages/ui/src/components/Toaster/__stories__/Variants.stories.tsx @@ -1,10 +1,10 @@ -import type { Decorator } from '@storybook/react' +import type { Decorator, StoryFn } from '@storybook/react' import { ToastContainer, toast } from '..' import { Button } from '../../index' -export const Variants = () => ( +export const Variants: StoryFn = args => ( <> - +