@citizenplane/pimp 8.33.0 → 9.0.1

package/src/stories/CpSwitch.stories.ts

@@ -8,13 +8,14 @@ const meta = {
   title: 'CpSwitch',
   component: CpSwitch,
   argTypes: {
-    modelValue: {
+    autofocus: {
       control: 'boolean',
-      description: 'The switch state',
+      description: 'Whether to autofocus the switch',
     },
-    label: {
-      control: 'text',
-      description: 'Label text for the switch',
+    color: {
+      control: 'select',
+      options: ['blue', 'purple'],
+      description: 'Color variant of the switch',
     },
     disabled: {
       control: 'boolean',
@@ -24,18 +25,29 @@ const meta = {
       control: 'text',
       description: 'Name attribute for the switch',
     },
-    color: {
-      control: 'select',
-      options: ['blue', 'purple'],
-      description: 'Color variant of the switch',
+    helper: {
+      control: 'text',
+      description: 'Helper text to display below the label',
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Whether the switch is required',
+    },
+    label: {
+      control: 'text',
+      description: 'Label text for the switch',
+    },
+    modelValue: {
+      control: 'boolean',
+      description: 'The switch state',
     },
     reverseLabel: {
       control: 'boolean',
       description: 'Whether to show label before the switch',
     },
-    autofocus: {
-      control: 'boolean',
-      description: 'Whether to autofocus the switch',
+    tooltip: {
+      control: 'text',
+      description: 'Tooltip text to display',
     },
   },
 } satisfies Meta<typeof CpSwitch>
@@ -45,11 +57,14 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    label: 'Switch Label',
+    label: 'Label',
+    helper: '',
     disabled: false,
     color: 'purple',
     reverseLabel: false,
     autofocus: false,
+    isRequired: true,
+    tooltip: '',
   },
   render: (args) => ({
     components: { CpSwitch },
@@ -83,6 +98,28 @@ export const DisabledChecked: Story = {
   },
 }
 
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    isRequired: true,
+  },
+  render: (args) => ({
+    components: { CpSwitch },
+    setup() {
+      const value = ref(false)
+      return { args, value }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpSwitch
+          v-model="value"
+          v-bind="args"
+        />
+      </div>
+    `,
+  }),
+}
+
 export const Reversed: Story = {
   args: {
     ...Default.args,
@@ -105,6 +142,73 @@ export const Reversed: Story = {
   }),
 }
 
+export const WithHelper: Story = {
+  args: {
+    ...Default.args,
+    helper: 'This is a helper text that provides additional information',
+  },
+  render: (args) => ({
+    components: { CpSwitch },
+    setup() {
+      const value = ref(false)
+      return { args, value }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpSwitch
+          v-model="value"
+          v-bind="args"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const WithTooltip: Story = {
+  args: {
+    ...Default.args,
+    tooltip: 'This is a tooltip text',
+  },
+  render: (args) => ({
+    components: { CpSwitch },
+    setup() {
+      const value = ref(false)
+      return { args, value }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpSwitch
+          v-model="value"
+          v-bind="args"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const WithHelperAndTooltip: Story = {
+  args: {
+    ...Default.args,
+    helper: 'This is a helper text that provides additional information',
+    tooltip: 'This is a tooltip text',
+  },
+  render: (args) => ({
+    components: { CpSwitch },
+    setup() {
+      const value = ref(false)
+      return { args, value }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpSwitch
+          v-model="value"
+          v-bind="args"
+        />
+      </div>
+    `,
+  }),
+}
+
 export const SwitchGroup: Story = {
   render: () => ({
     components: { CpSwitch },
@@ -132,6 +236,12 @@ export const SwitchGroup: Story = {
           v-model="switches.switch3"
           label="Third Switch"
           group-name="switch-group"
+          disabled
+        />
+        <CpSwitch
+          v-model="switches.switch4"
+          label="Fourth Switch"
+          group-name="switch-group"
         />
       </div>
     `,