Merge pull request #500 from pixiv/chore/storybook-Switch

chore: switch story
pixiv · Apr 5, 2024 · 69ebed2 · 69ebed2
2 parents dc3642b + 271a6f7
commit 69ebed2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 27 deletions.
diff --git a/packages/react/src/components/Switch/__snapshots__/index.story.storyshot b/packages/react/src/components/Switch/__snapshots__/index.story.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Switch Basic 1`] = `
+exports[`Storybook Tests Switch Checked 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -118,8 +118,8 @@ exports[`Storybook Tests Switch Basic 1`] = `
       className="c0"
     >
       <input
-        aria-label="label"
-        checked={false}
+        aria-label="checked"
+        checked={true}
         className="c1"
         disabled={false}
         name="name"
@@ -144,7 +144,7 @@ exports[`Storybook Tests Switch Basic 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Switch Checked 1`] = `
+exports[`Storybook Tests Switch Default 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -262,8 +262,7 @@ exports[`Storybook Tests Switch Checked 1`] = `
       className="c0"
     >
       <input
-        aria-label="label"
-        checked={true}
+        checked={false}
         className="c1"
         disabled={false}
         name="name"
@@ -417,7 +416,7 @@ exports[`Storybook Tests Switch Disabled 1`] = `
         checked={false}
         className="c1"
         disabled={true}
-        name="name"
+        name="disabled"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -444,7 +443,7 @@ exports[`Storybook Tests Switch Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Switch Labelled 1`] = `
+exports[`Storybook Tests Switch Label 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -572,7 +571,7 @@ exports[`Storybook Tests Switch Labelled 1`] = `
         checked={false}
         className="c1"
         disabled={false}
-        name="name"
+        name="label"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}

diff --git a/packages/react/src/components/Switch/index.story.tsx b/packages/react/src/components/Switch/index.story.tsx
@@ -5,16 +5,12 @@ import { Meta, StoryObj } from '@storybook/react'
 export default {
   title: 'Switch',
   component: Switch,
-  args: {
-    name: 'name',
-    label: 'label',
-  },
   parameters: {
     layout: 'centered',
   },
 } as Meta<typeof Switch>
 
-export const Basic: StoryObj<typeof Switch> = {
+export const Default: StoryObj<typeof Switch> = {
   render: function Render(args) {
     const [checked, setChecked] = useState(false)
     return (
@@ -33,33 +29,29 @@ export const Basic: StoryObj<typeof Switch> = {
 }
 
 export const Checked: StoryObj<typeof Switch> = {
-  render: function Render(args) {
+  render: function Render() {
     const [checked, setChecked] = useState(true)
     return (
       <div>
         <Switch
-          {...args}
           name="name"
+          label="checked"
           onChange={(v) => {
             setChecked(v)
           }}
-          checked={args.checked ?? checked}
+          checked={checked}
         />
       </div>
     )
   },
 }
 
-export const Labelled: StoryObj<typeof Switch> = {
-  render: function Render(args) {
+export const Label: StoryObj<typeof Switch> = {
+  render: function Render() {
     const [checked, setChecked] = useState(false)
     return (
       <div>
-        <Switch
-          {...args}
-          checked={args.checked ?? checked}
-          onChange={setChecked}
-        >
+        <Switch name="label" checked={checked} onChange={setChecked}>
           Label
         </Switch>
       </div>
@@ -68,13 +60,13 @@ export const Labelled: StoryObj<typeof Switch> = {
 }
 
 export const Disabled: StoryObj<typeof Switch> = {
-  render: function Render(args) {
+  render: function Render() {
     const [checked, setChecked] = useState(false)
     return (
       <div>
         <Switch
-          {...args}
-          checked={args.checked ?? checked}
+          name="disabled"
+          checked={checked}
           onChange={setChecked}
           disabled
         >