@citizenplane/pimp 16.0.3 → 16.2.0

package/src/stories/CpTabs.stories.ts

@@ -1,12 +1,12 @@
 import { action } from 'storybook/actions'
 import { ref } from 'vue'
 
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpTabs from '@/components/CpTabs.vue'
 
 const meta = {
-  title: 'Navigation/CpTabs',
+  title: 'Molecules/CpTabs',
   component: CpTabs,
   argTypes: {
     defaultActiveIndex: {
@@ -28,15 +28,18 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-const defaultTemplate = '<CpTabs v-bind="args" @on-tab-click="args.onOnTabClick" />'
 const defaultRender = (args: Args) => ({
   components: { CpTabs },
   setup() {
     return { args }
   },
-  template: defaultTemplate,
+  template: '<CpTabs v-bind="args" @on-tab-click="args.onOnTabClick" />',
 })
 
+/**
+ * Default tabs rendered from an array of `{ title }` objects. Use the
+ * controls to experiment with each prop in isolation.
+ */
 export const Default: Story = {
   args: {
     defaultActiveIndex: 0,
@@ -47,6 +50,10 @@ export const Default: Story = {
   render: defaultRender,
 }
 
+/**
+ * Tabs augmented with leading icons through the `icon` property on each
+ * tab object.
+ */
 export const WithIcons: Story = {
   args: {
     ...Default.args,
@@ -59,6 +66,10 @@ export const WithIcons: Story = {
   render: defaultRender,
 }
 
+/**
+ * Tabs that display a count badge on the right — typically used for
+ * notifications or list sizes.
+ */
 export const WithCounts: Story = {
   args: {
     ...Default.args,
@@ -71,6 +82,9 @@ export const WithCounts: Story = {
   render: defaultRender,
 }
 
+/**
+ * Icons and counts combined on the same tab.
+ */
 export const WithIconsAndCounts: Story = {
   args: {
     ...Default.args,
@@ -83,6 +97,10 @@ export const WithIconsAndCounts: Story = {
   render: defaultRender,
 }
 
+/**
+ * Tabs nested inside a dialog — verifies the integration with overlay
+ * surfaces and the focus ring behaviour.
+ */
 export const InDialog: Story = {
   args: {
     ...Default.args,
@@ -105,7 +123,7 @@ export const InDialog: Story = {
           <CpTabs v-bind="args" @on-tab-click="args.onOnTabClick" v-if="isVisible" />
         </cp-dialog>
       </cp-transition-dialog>
-      <div style="display: flex; justify-content: center; align-items: center; min-height: 240px; min-width:240px;">
+      <div style="display: flex; justify-content: center; align-items: center; min-height: 240px; min-width: 240px;">
         <cp-button @click="isVisible = !isVisible">Open dialog</cp-button>
       </div>
     `,

package/src/stories/CpTelInput.stories.ts

@@ -1,48 +1,57 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpTelInput from '@/components/CpTelInput.vue'
 
+const telInputSizes = ['md', 'lg'] as const
+
 const meta = {
-  title: 'Form/CpTelInput',
+  title: 'Molecules/CpTelInput',
   component: CpTelInput,
   argTypes: {
-    telModel: {
+    modelValue: {
       control: 'text',
       description: 'The phone number value',
     },
     size: {
       control: 'select',
-      options: ['md', 'lg'],
+      options: telInputSizes,
       description: 'The size of the input',
     },
   },
 } satisfies Meta<typeof CpTelInput>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
+type TelInputStoryArgs = NonNullable<Story['args']>
+
+const defaultRender = (args: TelInputStoryArgs) => ({
+  components: { CpTelInput },
+  setup() {
+    return { args }
+  },
+  template: `<CpTelInput v-bind="args" />`,
+})
+
+/**
+ * Default telephone input with a country selector. Use the controls to
+ * experiment with each prop in isolation.
+ */
 export const Default: Story = {
   args: {
-    telModel: '',
+    modelValue: '',
   },
-  render: (args) => ({
-    components: { CpTelInput },
-    setup() {
-      return { args }
-    },
-    template: `<CpTelInput v-bind="args" />`,
-  }),
+  render: defaultRender,
 }
 
+/**
+ * Pre-select a country via the `defaultCountry` ISO-2 code (e.g. `us`,
+ * `fr`, `gb`).
+ */
 export const WithDefaultCountry: Story = {
   args: {
     defaultCountry: 'us',
   },
-  render: (args) => ({
-    components: { CpTelInput },
-    setup() {
-      return { args }
-    },
-    template: `<CpTelInput v-bind="args" />`,
-  }),
+  render: defaultRender,
 }

package/src/stories/CpText.stories.ts

@@ -0,0 +1,131 @@
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
+
+import CpText from '@/components/CpText.vue'
+import type { CpTextSize, CpTextWeight } from '@/components/CpText.vue'
+
+import { docLabelStyle } from '@/stories/documentationStyles'
+
+const textSizes = [
+  'xs',
+  'sm',
+  'md',
+  'lg',
+  'xl',
+  '2xl',
+  '3xl',
+  '4xl',
+  '5xl',
+  '6xl',
+  '7xl',
+  '8xl',
+  '9xl',
+] as const satisfies readonly CpTextSize[]
+
+const weights = [400, 500, 600, 700] as const satisfies readonly CpTextWeight[]
+
+const rowStyle = 'display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center;'
+
+const sizesRowStyle = 'display: flex; align-items: center; gap: 16px; width: max-content;'
+
+const meta = {
+  title: 'Atoms/CpText',
+  component: CpText,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Typography primitive for body and UI copy. Pairs each `size` with the matching `--cp-text-size-*` and `--cp-line-height-*` design tokens. Override the root element with `tag` (defaults to `p`).',
+      },
+    },
+  },
+  argTypes: {
+    tag: {
+      control: 'text',
+      description: 'Root HTML tag (default: `p`).',
+    },
+    size: {
+      control: 'select',
+      options: textSizes,
+      description: 'Scale step from `xs` through `9xl`; maps to typography CSS variables.',
+    },
+    weight: {
+      control: 'select',
+      options: [undefined, ...weights],
+      description: 'Font weight from 400 to 700.',
+    },
+  },
+} satisfies Meta<typeof CpText>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    size: 'md',
+  },
+  render: (args: Args) => ({
+    components: { CpText },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpText v-bind="args">Body text using the size and line-height tokens.</CpText>
+      </div>
+    `,
+  }),
+}
+
+export const Sizes: Story = {
+  parameters: { controls: { disable: true }, layout: 'padded' },
+  render: () => ({
+    components: { CpText },
+    setup() {
+      return { textSizes, sizesRowStyle, docLabelStyle }
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 12px; overflow-x: auto; max-width: 100%;">
+        <div v-for="size in textSizes" :key="size" :style="sizesRowStyle">
+          <span :style="docLabelStyle + ' flex: 0 0 56px;'">{{ size }}</span>
+          <CpText :size="size" style="white-space: nowrap;">A design system offers guidelines and components for consistent visuals and better user experience.</CpText>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const Weights: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpText },
+    setup() {
+      return { weights, rowStyle, docLabelStyle }
+    },
+    template: `
+      <div style="padding: 20px; display: flex; flex-direction: column; gap: 12px;">
+        <div v-for="w in weights" :key="w" :style="rowStyle">
+          <span :style="docLabelStyle">{{ w }}</span>
+          <CpText :weight="w">Create a harmonious user experience</CpText>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const CustomTag: Story = {
+  args: {
+    tag: 'span',
+    size: 'sm',
+  },
+  render: (args: Args) => ({
+    components: { CpText },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <p>Inline text: <CpText v-bind="args">styled snippet</CpText> inside a paragraph.</p>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpTextarea.stories.ts

@@ -1,11 +1,23 @@
 import { ref } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { ComponentPropsAndSlots, Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpTextarea from '@/components/CpTextarea.vue'
 
+import { docCellStyle, docLabelStyle, docRowColumnStyle } from '@/stories/documentationStyles'
+
+/** Native `<textarea>` attributes not declared as Vue props (see `CpTextarea` template). */
+type CpTextareaPassthroughAttrs = {
+  maxLength?: number
+  rows?: number
+}
+
+type CpTextareaStoryArgs = ComponentPropsAndSlots<typeof CpTextarea> & CpTextareaPassthroughAttrs
+
+const textareaStackStyle = `${docCellStyle} width: 100%; max-width: 360px;`
+
 const meta = {
-  title: 'Form/CpTextarea',
+  title: 'Atoms/CpTextarea',
   component: CpTextarea,
   argTypes: {
     modelValue: {
@@ -45,18 +57,24 @@ const meta = {
       description: 'Maximum number of characters allowed',
     },
   },
-} satisfies Meta<typeof CpTextarea>
+} satisfies Meta<CpTextareaStoryArgs>
 
 export default meta
-type Story = StoryObj<typeof meta>
 
+type Story = StoryObj<CpTextareaStoryArgs>
+
+type TextareaStoryArgs = Partial<CpTextareaStoryArgs>
+
+/**
+ * Default textarea. Use the controls to experiment with each prop in isolation.
+ */
 export const Default: Story = {
   args: {
     label: 'Textarea Label',
     placeholder: 'Enter your message here',
     rows: 4,
   },
-  render: (args) => ({
+  render: (args: TextareaStoryArgs) => ({
     components: { CpTextarea },
     setup() {
       const value = ref('')
@@ -64,37 +82,63 @@ export const Default: Story = {
     },
     template: `
       <div style="max-width: 400px; padding: 20px;">
-        <CpTextarea
-          v-model="value"
-          v-bind="args"
-        />
+        <CpTextarea v-model="value" v-bind="args" />
       </div>
     `,
   }),
 }
 
-export const WithError: Story = {
-  args: {
-    ...Default.args,
-    isInvalid: true,
-    errorMessage: 'This field is required',
-  },
-}
+/* -------------------------------------------------------------------------- */
+/* States                                                                     */
+/* -------------------------------------------------------------------------- */
 
-export const Required: Story = {
-  args: {
-    ...Default.args,
-    required: true,
-  },
+/**
+ * Default, required, disabled and invalid states compared side by side.
+ */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpTextarea },
+    setup() {
+      const value = ref('')
+      return { value, docRowColumnStyle, textareaStackStyle, docLabelStyle }
+    },
+    template: `
+      <div :style="docRowColumnStyle">
+        <div :style="textareaStackStyle">
+          <span :style="docLabelStyle">Default</span>
+          <CpTextarea v-model="value" label="Textarea label" placeholder="Enter your message here" />
+        </div>
+        <div :style="textareaStackStyle">
+          <span :style="docLabelStyle">Required</span>
+          <CpTextarea v-model="value" label="Textarea label" placeholder="Enter your message here" :required="true" />
+        </div>
+        <div :style="textareaStackStyle">
+          <span :style="docLabelStyle">Disabled</span>
+          <CpTextarea v-model="value" label="Textarea label" placeholder="Enter your message here" :disabled="true" />
+        </div>
+        <div :style="textareaStackStyle">
+          <span :style="docLabelStyle">Invalid</span>
+          <CpTextarea
+            v-model="value"
+            label="Textarea label"
+            placeholder="Enter your message here"
+            :is-invalid="true"
+            error-message="This field is required"
+          />
+        </div>
+      </div>
+    `,
+  }),
 }
 
-export const Disabled: Story = {
-  args: {
-    ...Default.args,
-    disabled: true,
-  },
-}
+/* -------------------------------------------------------------------------- */
+/* Variants                                                                   */
+/* -------------------------------------------------------------------------- */
 
+/**
+ * Enforce a character limit; a counter is shown below the field.
+ */
 export const WithMaxLength: Story = {
   args: {
     ...Default.args,
@@ -104,6 +148,9 @@ export const WithMaxLength: Story = {
   },
 }
 
+/**
+ * Adjust the number of visible rows through the `rows` prop.
+ */
 export const CustomRows: Story = {
   args: {
     ...Default.args,