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:
Valera Melnikov 2023-08-04 21:56:45 +03:00 committed by GitHub
parent fa1eefa4d0
commit 65a662ee48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 130 additions and 135 deletions

View File

@ -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:

View File

@ -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:

View File

@ -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>

View File

@ -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>