@citizenplane/pimp 9.4.2 → 9.4.4

package/src/stories/CpSelect.stories.ts

@@ -2,8 +2,11 @@ import { ref } from 'vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
 
+import CpInput from '@/components/CpInput.vue'
 import CpSelect from '@/components/CpSelect.vue'
 
+import { Sizes } from '@/constants'
+
 const meta = {
   title: 'CpSelect',
   component: CpSelect,
@@ -44,9 +47,10 @@ const meta = {
       control: 'text',
       description: 'Error message to display',
     },
-    isLarge: {
-      control: 'boolean',
-      description: 'Whether to use large size variant',
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'The size of the select',
     },
     autocomplete: {
       control: 'text',
@@ -56,6 +60,14 @@ const meta = {
       control: 'text',
       description: 'Name attribute for the select',
     },
+    help: {
+      control: 'text',
+      description: 'Help text to display',
+    },
+    tooltip: {
+      control: 'text',
+      description: 'Tooltip text to display',
+    },
   },
 } satisfies Meta<typeof CpSelect>
 
@@ -79,7 +91,7 @@ export const Default: Story = {
     disabled: false,
     isInvalid: false,
     errorMessage: '',
-    isLarge: false,
+    size: Sizes.MD,
     autocomplete: 'on',
     name: 'select-field',
   },
@@ -122,10 +134,17 @@ export const Disabled: Story = {
   },
 }
 
+export const Small: Story = {
+  args: {
+    ...Default.args,
+    size: Sizes.SM,
+  },
+}
+
 export const Large: Story = {
   args: {
     ...Default.args,
-    isLarge: true,
+    size: Sizes.LG,
   },
 }
 
@@ -147,3 +166,28 @@ export const WithLongOptions: Story = {
     ],
   },
 }
+
+export const NextToInput: Story = {
+  args: {
+    ...Default.args,
+    hideDefaultValue: true,
+  },
+  render: (args) => ({
+    components: { CpSelect, CpInput },
+    setup() {
+      const value = ref('')
+      const textValue = ref('')
+
+      return { args, value, textValue }
+    },
+    template: `
+      <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 400px; padding: 20px;">
+        <CpSelect
+          v-model="value"
+          v-bind="args"
+        />
+        <CpInput :size="args.size" label="Input Label" name="input-field" placeholder="Enter text here" v-model="textValue" />
+      </div>
+    `,
+  }),
+}