chore: clean up switch stories (#26057)
## Description Clean up switch stories --------- Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>
This commit is contained in:
parent
fa1eefa4d0
commit
65a662ee48
2
.github/workflows/build-chromatic.yml
vendored
2
.github/workflows/build-chromatic.yml
vendored
|
|
@ -6,9 +6,11 @@ on:
|
||||||
- release
|
- release
|
||||||
paths:
|
paths:
|
||||||
- 'app/client/packages/design-system/**'
|
- 'app/client/packages/design-system/**'
|
||||||
|
- 'app/client/packages/storybook/**'
|
||||||
pull_request:
|
pull_request:
|
||||||
paths:
|
paths:
|
||||||
- 'app/client/packages/design-system/**'
|
- 'app/client/packages/design-system/**'
|
||||||
|
- 'app/client/packages/storybook/**'
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
chromatic-deployment:
|
chromatic-deployment:
|
||||||
|
|
|
||||||
2
.github/workflows/build-storybook.yml
vendored
2
.github/workflows/build-storybook.yml
vendored
|
|
@ -6,9 +6,11 @@ on:
|
||||||
- release
|
- release
|
||||||
paths:
|
paths:
|
||||||
- 'app/client/packages/design-system/**'
|
- 'app/client/packages/design-system/**'
|
||||||
|
- 'app/client/packages/storybook/**'
|
||||||
pull_request:
|
pull_request:
|
||||||
paths:
|
paths:
|
||||||
- 'app/client/packages/design-system/**'
|
- 'app/client/packages/design-system/**'
|
||||||
|
- 'app/client/packages/storybook/**'
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
chromatic-deployment:
|
chromatic-deployment:
|
||||||
|
|
|
||||||
|
|
@ -21,51 +21,53 @@ Switch is a component that allows the user to select one or more options from a
|
||||||
<Story name="Switch">{Template.bind({})}</Story>
|
<Story name="Switch">{Template.bind({})}</Story>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
||||||
|
<ArgsTable story="Switch" of={Switch} />
|
||||||
|
|
||||||
### States
|
### States
|
||||||
|
|
||||||
<Canvas>
|
<Story
|
||||||
<Story
|
|
||||||
name="State - unchecked"
|
name="State - unchecked"
|
||||||
args={{
|
args={{
|
||||||
children: "Unchecked",
|
children: "Unchecked",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{Template.bind({})}
|
{Template.bind({})}
|
||||||
</Story>
|
</Story>
|
||||||
<Story
|
|
||||||
|
<Story
|
||||||
name="State - Default Checked"
|
name="State - Default Checked"
|
||||||
args={{
|
args={{
|
||||||
defaultSelected: true,
|
defaultSelected: true,
|
||||||
children: "Checked",
|
children: "Checked",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{Template.bind({})}
|
{Template.bind({})}
|
||||||
</Story>
|
</Story>
|
||||||
<Story
|
|
||||||
|
<Story
|
||||||
name="State - Disabled"
|
name="State - Disabled"
|
||||||
args={{
|
args={{
|
||||||
defaultSelected: true,
|
defaultSelected: true,
|
||||||
children: "Disabled",
|
children: "Disabled",
|
||||||
isDisabled: true,
|
isDisabled: true,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{Template.bind({})}
|
{Template.bind({})}
|
||||||
</Story>
|
</Story>
|
||||||
<Story
|
|
||||||
|
<Story
|
||||||
name="State - Disabled unchecked"
|
name="State - Disabled unchecked"
|
||||||
args={{
|
args={{
|
||||||
children: "Disabled unchecked",
|
children: "Disabled unchecked",
|
||||||
isDisabled: true,
|
isDisabled: true,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{Template.bind({})}
|
{Template.bind({})}
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Label Position
|
### Label Position
|
||||||
|
|
||||||
<Canvas>
|
<Story
|
||||||
<Story
|
|
||||||
parameters={{
|
parameters={{
|
||||||
width: 250,
|
width: 250,
|
||||||
}}
|
}}
|
||||||
|
|
@ -74,10 +76,11 @@ Switch is a component that allows the user to select one or more options from a
|
||||||
labelPosition: "left",
|
labelPosition: "left",
|
||||||
children: "Label Position - Left",
|
children: "Label Position - Left",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{Template.bind({})}
|
{Template.bind({})}
|
||||||
</Story>
|
</Story>
|
||||||
<Story
|
|
||||||
|
<Story
|
||||||
parameters={{
|
parameters={{
|
||||||
width: 250,
|
width: 250,
|
||||||
}}
|
}}
|
||||||
|
|
@ -86,7 +89,6 @@ Switch is a component that allows the user to select one or more options from a
|
||||||
labelPosition: "right",
|
labelPosition: "right",
|
||||||
children: "Label Position - Right",
|
children: "Label Position - Right",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{Template.bind({})}
|
{Template.bind({})}
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
|
||||||
|
|
|
||||||
|
|
@ -31,89 +31,78 @@ Switch Group is a group of checkboxes that can be selected together.
|
||||||
|
|
||||||
# Orientation
|
# Orientation
|
||||||
|
|
||||||
<Canvas>
|
<Story
|
||||||
<Story
|
|
||||||
args={{
|
args={{
|
||||||
orientation: "vertical",
|
orientation: "vertical",
|
||||||
}}
|
}}
|
||||||
name="Orientation - Vertical"
|
name="Orientation - Vertical"
|
||||||
>
|
>
|
||||||
{Template.bind({})}
|
{Template.bind({})}
|
||||||
</Story>
|
</Story>
|
||||||
<Story
|
|
||||||
|
<Story
|
||||||
args={{
|
args={{
|
||||||
orientation: "horizontal",
|
orientation: "horizontal",
|
||||||
}}
|
}}
|
||||||
name="Orientation - Horizontal"
|
name="Orientation - Horizontal"
|
||||||
>
|
>
|
||||||
{Template.bind({})}
|
{Template.bind({})}
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
# Emphasized
|
# Emphasized
|
||||||
|
|
||||||
<Canvas>
|
<Story
|
||||||
<Story
|
|
||||||
args={{
|
args={{
|
||||||
isEmphasized: true,
|
isEmphasized: true,
|
||||||
}}
|
}}
|
||||||
name="Is Emphasised"
|
name="Is Emphasised"
|
||||||
>
|
>
|
||||||
{Template.bind({})}
|
{Template.bind({})}
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
# Label Position and Alignment
|
# Label Position and Alignment
|
||||||
|
|
||||||
<Canvas>
|
<Story
|
||||||
<Story
|
|
||||||
args={{
|
args={{
|
||||||
labelPosition: "side",
|
labelPosition: "side",
|
||||||
labelWidth: "100px",
|
labelWidth: "100px",
|
||||||
errorMessage: "This is a description",
|
errorMessage: "This is a description",
|
||||||
}}
|
}}
|
||||||
name="Label Position - Side"
|
name="Label Position - Side"
|
||||||
>
|
>
|
||||||
{Template.bind({})}
|
{Template.bind({})}
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
# Is Disabled
|
# Is Disabled
|
||||||
|
|
||||||
<Canvas>
|
<Story
|
||||||
<Story
|
|
||||||
args={{
|
args={{
|
||||||
isDisabled: true,
|
isDisabled: true,
|
||||||
}}
|
}}
|
||||||
name="Is Disabled"
|
name="Is Disabled"
|
||||||
>
|
>
|
||||||
{Template.bind({})}
|
{Template.bind({})}
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
# Is Required
|
# Is Required
|
||||||
|
|
||||||
<Canvas>
|
<Story
|
||||||
<Story
|
|
||||||
args={{
|
args={{
|
||||||
isRequired: true,
|
isRequired: true,
|
||||||
}}
|
}}
|
||||||
name="Is Required"
|
name="Is Required"
|
||||||
>
|
>
|
||||||
{Template.bind({})}
|
{Template.bind({})}
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
# Invalid State
|
# Invalid State
|
||||||
|
|
||||||
<Canvas>
|
<Story
|
||||||
<Story
|
|
||||||
args={{
|
args={{
|
||||||
validationState: "invalid",
|
validationState: "invalid",
|
||||||
errorMessage: "This is a error message",
|
errorMessage: "This is a error message",
|
||||||
}}
|
}}
|
||||||
name="Invalid State"
|
name="Invalid State"
|
||||||
>
|
>
|
||||||
{Template.bind({})}
|
{Template.bind({})}
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user