APP-2301 - copy over switch story

packages/storybook/src/stories/switch.stories.mdx

@@ -0,0 +1,162 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title='Elements/Switch'
+  parameters={{
+    actions: {
+      handles: ['input'],
+    },
+  }}
+  argTypes={{
+    value: {
+      control: { type: 'select' },
+      options: ['on', 'off'],
+      description: 'Whether or not the switch is on.',
+      table: { defaultValue: { summary: 'off' } },
+    },
+    label: {
+      description: 'The input label',
+      table: { defaultValue: { summary: '' } },
+    },
+    labelposition: {
+      description: 'The position of the label',
+      control: 'select',
+      options: ['top', 'left'],
+      table: { defaultValue: { summary: 'top' } },
+    },
+    variant: {
+      description: 'The displayed style of the switch',
+      control: 'select',
+      options: ['default', 'annotated'],
+      table: { defaultValue: { summary: 'default' } },
+    },
+    disabled: {
+      description: 'Whether the input is disabled',
+      control: 'select',
+      options: ['true', 'false'],
+      table: { defaultValue: { summary: 'false' } },
+    },
+    tooltip: {
+      description: 'The tooltip message.',
+    },
+    'on:input': {
+      description: 'Event fired when input value changes.',
+    },
+  }}
+/>
+
+# Switch
+
+Used to handle binary input.
+
+<Canvas>
+  <Story
+    name='Default'
+    args={{
+      value: 'off',
+    }}
+  >
+    {({ value }) => `
+<v-switch
+  value='${value}'
+/>
+    `}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name='Annotated'
+    args={{
+      value: 'off',
+      variant: 'annotated',
+    }}
+  >
+    {({ value, variant }) => `
+<v-switch
+  value='${value}'
+  variant='${variant}'
+/>
+    `}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name='With label'
+    args={{
+      value: 'off',
+      label: 'Lunchtime',
+    }}
+  >
+    {({ value, label }) => `
+<v-switch
+  value='${value}'
+  label='${label}'
+/>
+    `}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name='Disabled'
+    args={{
+      value: 'off',
+      variant: 'labeled',
+      disabled: 'true',
+      label: 'disabled',
+    }}
+  >
+    {({ value, variant, disabled, label }) => `
+<v-switch
+  value='${value}'
+  variant='${variant}'
+  disabled='${disabled}'
+  label='${label}'
+/>
+    `}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name='Tooltip'
+    args={{
+      value: 'off',
+      variant: 'labeled',
+      label: 'Switch Label',
+      tooltip: 'This is the tooltip message.',
+    }}
+  >
+    {({ value, variant, tooltip, label }) => `
+<v-switch
+  value='${value}'
+  variant='${variant}'
+  tooltip='${tooltip}'
+  label='${label}'
+/>
+    `}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name='Readonly'
+    args={{
+      value: 'on',
+      variant: 'annotated',
+      readonly: 'true',
+      label: 'readonly',
+    }}
+  >
+    {({ value, variant, readonly, label }) => `
+<v-switch
+  value='${value}'
+  variant='${variant}'
+  readonly='${readonly}'
+  label='${label}'
+/>
+    `}
+  </Story>
+</Canvas>