@citizenplane/pimp 8.33.0 → 9.0.0

package/src/stories/CpButton.stories.ts

@@ -101,11 +101,11 @@ export const WithIcons: Story = {
     setup: () => ({ args }),
     template: `
       <CpButton v-bind="args">
-        <template #icon-before>
+        <template #leading-icon>
           <CpIcon type="arrow-left" />
         </template>
         Button with Icon
-        <template #icon-after>
+        <template #trailing-icon>
           <CpIcon type="arrow-right" />
         </template>
       </CpButton>

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: 'This is a helper text that provides additional information',
     disabled: false,
     color: 'purple',
     reverseLabel: false,
     autofocus: false,
+    isRequired: true,
+    tooltip: 'This is a tooltip text',
   },
   render: (args) => ({
     components: { CpSwitch },
@@ -83,6 +98,13 @@ export const DisabledChecked: Story = {
   },
 }
 
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    isRequired: true,
+  },
+}
+
 export const Reversed: Story = {
   args: {
     ...Default.args,
@@ -105,6 +127,20 @@ export const Reversed: Story = {
   }),
 }
 
+export const WithHelper: Story = {
+  args: {
+    ...Default.args,
+    helper: 'This is a helper text that provides additional information',
+  },
+}
+
+export const WithTooltip: Story = {
+  args: {
+    ...Default.args,
+    tooltip: 'This is a tooltip text',
+  },
+}
+
 export const SwitchGroup: Story = {
   render: () => ({
     components: { CpSwitch },
@@ -132,6 +168,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>
     `,