chore: clean up switch stories (#26057)

## Description
Clean up switch stories

---------

Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>

.github/workflows/build-chromatic.yml

@@ -6,9 +6,11 @@ on:
       - release
     paths:
       - 'app/client/packages/design-system/**'
+      - 'app/client/packages/storybook/**'
   pull_request:
     paths:
       - 'app/client/packages/design-system/**'
+      - 'app/client/packages/storybook/**'
 
 jobs:
   chromatic-deployment:

.github/workflows/build-storybook.yml

@@ -6,9 +6,11 @@ on:
       - release
     paths:
       - 'app/client/packages/design-system/**'
+      - 'app/client/packages/storybook/**'
   pull_request:
     paths:
       - 'app/client/packages/design-system/**'
+      - 'app/client/packages/storybook/**'
 
 jobs:
   chromatic-deployment:

app/client/packages/storybook/stories/design-system/widgets/Switch.stories.mdx

@@ -21,72 +21,74 @@ Switch is a component that allows the user to select one or more options from a
   <Story name="Switch">{Template.bind({})}</Story>
 </Canvas>
 
+<ArgsTable story="Switch" of={Switch} />
+
 ### 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
+
-    name="State - Disabled"
+<Story
-    args={{
+  name="State - Disabled"
-      defaultSelected: true,
+  args={{
-      children: "Disabled",
+    defaultSelected: true,
-      isDisabled: true,
+    children: "Disabled",
-    }}
+    isDisabled: true,
-  >
+  }}
-    {Template.bind({})}
+>
-  </Story>
+  {Template.bind({})}
-  <Story
+</Story>
-    name="State - Disabled unchecked"
+
-    args={{
+<Story
-      children: "Disabled unchecked",
+  name="State - Disabled unchecked"
-      isDisabled: true,
+  args={{
-    }}
+    children: "Disabled unchecked",
-  >
+    isDisabled: true,
-    {Template.bind({})}
+  }}
-  </Story>
+>
-</Canvas>
+  {Template.bind({})}
+</Story>
 
 ### Label Position
 
-<Canvas>
+<Story
-  <Story
+  parameters={{
-    parameters={{
+    width: 250,
-      width: 250,
+  }}
-    }}
+  name="Label Position - Left"
-    name="Label Position - Left"
+  args={{
-    args={{
+    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,
-    }}
+  }}
-    name="Label Position - Right"
+  name="Label Position - Right"
-    args={{
+  args={{
-      labelPosition: "right",
+    labelPosition: "right",
-      children: "Label Position - Right",
+    children: "Label Position - Right",
-    }}
+  }}
-  >
+>
-    {Template.bind({})}
+  {Template.bind({})}
-  </Story>
+</Story>
-</Canvas>

app/client/packages/storybook/stories/design-system/widgets/SwitchGroup.stories.mdx

@@ -31,89 +31,78 @@ Switch Group is a group of checkboxes that can be selected together.
 
 # 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
 
-<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
 
-<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
 
-<Canvas>
+<Story
-  <Story
+  args={{
-    args={{
+    isDisabled: true,
-      isDisabled: true,
+  }}
-    }}
+  name="Is Disabled"
-    name="Is Disabled"
+>
-  >
+  {Template.bind({})}
-    {Template.bind({})}
+</Story>
-  </Story>
-</Canvas>
 
 # 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
 
-<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>