@citizenplane/pimp 16.0.3 → 16.2.0

package/src/stories/CpAccordionGroup.stories.ts

@@ -1,23 +1,17 @@
 import { computed } from 'vue'
 
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 import type { MenuItem } from 'primevue/menuitem'
 
 import CpAccordion from '@/components/CpAccordion.vue'
 import CpAccordionGroup from '@/components/CpAccordionGroup.vue'
 
-import {
-  docCellStyle,
-  docLabelStyle,
-  docPageStyle,
-  docRowColumnStyle,
-  docSectionStyle,
-  docTitleStyle,
-} from '@/stories/documentationStyles'
-
 const sampleContentStyle =
   'padding: 16px; font-size: 13px; color: #374151; background: repeating-linear-gradient(45deg, #fff9c4, #fff9c4 4px, #fffde7 4px, #fffde7 8px);'
 
+const wrapperStyle =
+  'box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px; width: 500px;'
+
 type CpAccordionGroupStoryArgs = {
   itemActions: MenuItem[]
   itemDefaultOpenState: boolean
@@ -43,7 +37,7 @@ const defaultItemActions: MenuItem[] = [
 ]
 
 const meta = {
-  title: 'Visual/CpAccordionGroup',
+  title: 'Molecules/CpAccordionGroup',
   component: CpAccordionGroup,
   argTypes: {
     variant: {
@@ -110,10 +104,10 @@ const defaultRender = (args: Args) => ({
       }
     })
 
-    return { accordionBind, args, sampleContentStyle }
+    return { accordionBind, args, sampleContentStyle, wrapperStyle }
   },
   template: `
-    <div style="box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px; width: 500px;">
+    <div :style="wrapperStyle">
       <CpAccordionGroup :variant="args.variant">
         <CpAccordion
           v-for="i in 3"
@@ -128,91 +122,13 @@ const defaultRender = (args: Args) => ({
   `,
 })
 
-export const Documentation: Story = {
-  args: {
-    variant: 'default',
-  },
-  render: () => ({
-    components: { CpAccordion, CpAccordionGroup },
-    setup: () => ({
-      docPageStyle,
-      docSectionStyle,
-      docTitleStyle,
-      docRowColumnStyle,
-      docCellStyle,
-      docLabelStyle,
-      sampleContentStyle,
-    }),
-    template: `
-      <div :style="docPageStyle">
-        <h1 style="margin: 0 0 24px 0; font-size: 28px; font-weight: 700; color: #111827;">CpAccordionGroup</h1>
-
-        <section :style="docSectionStyle">
-          <h2 :style="docTitleStyle">Style</h2>
-          <div :style="docRowColumnStyle">
-            <div :style="docCellStyle">
-              <span :style="docLabelStyle">Minimal</span>
-              <CpAccordionGroup variant="minimal">
-                <CpAccordion key="doc-default-1" title="DIDA TRAVEL" icon-position="leading">
-                   <div :style="sampleContentStyle" />
-                 </CpAccordion>
-                <CpAccordion key="doc-default-2" title="DIDA TRAVEL" icon-position="leading">
-                   <div :style="sampleContentStyle" />
-                 </CpAccordion>
-                <CpAccordion key="doc-default-3" title="DIDA TRAVEL" icon-position="leading">
-                   <div :style="sampleContentStyle" />
-                 </CpAccordion>
-              </CpAccordionGroup>
-            </div>
-
-            <div :style="docCellStyle">
-              <span :style="docLabelStyle">Default</span>
-              <CpAccordionGroup variant="default">
-                <CpAccordion key="doc-bb-1" title="DIDA TRAVEL" icon-position="leading">
-                   <div :style="sampleContentStyle" />
-                 </CpAccordion>
-                <CpAccordion key="doc-bb-2" title="DIDA TRAVEL" icon-position="leading">
-                   <div :style="sampleContentStyle" />
-                 </CpAccordion>
-                <CpAccordion key="doc-bb-3" title="DIDA TRAVEL" icon-position="leading">
-                   <div :style="sampleContentStyle" />
-                 </CpAccordion>
-              </CpAccordionGroup>
-            </div>
-
-            <div :style="docCellStyle">
-              <span :style="docLabelStyle">Primary</span>
-              <CpAccordionGroup variant="primary">
-                <CpAccordion key="doc-gb-1" title="DIDA TRAVEL" icon-position="leading">
-                   <div :style="sampleContentStyle" />
-                 </CpAccordion>
-                <CpAccordion key="doc-gb-2" title="DIDA TRAVEL" icon-position="leading">
-                   <div :style="sampleContentStyle" />
-                 </CpAccordion>
-                <CpAccordion key="doc-gb-3" title="DIDA TRAVEL" icon-position="leading">
-                   <div :style="sampleContentStyle" />
-                 </CpAccordion>
-              </CpAccordionGroup>
-            </div>
-          </div>
-        </section>
-      </div>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      source: {
-        code: null,
-      },
-    },
-  },
-}
-
+/**
+ * Default accordion group rendered with the `default` variant.
+ */
 export const Default: Story = {
   args: {
     variant: 'default',
-    itemTitle: 'DIDA TRAVEL',
+    itemTitle: 'Accordion',
     itemDefaultOpenState: false,
     itemIconPosition: 'leading',
     itemQuickOptionsLimit: 2,
@@ -221,3 +137,43 @@ export const Default: Story = {
   },
   render: defaultRender,
 }
+
+/* -------------------------------------------------------------------------- */
+/* Variants                                                                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Minimal variant: no container border, no separators between items. Use when
+ * the grouping is implicit in the surrounding layout.
+ */
+export const Minimal: Story = {
+  args: {
+    ...Default.args,
+    variant: 'minimal',
+  },
+  render: defaultRender,
+}
+
+/**
+ * Default variant: thin separator lines between items, no outer border.
+ * This is the most common variant.
+ */
+export const DefaultVariant: Story = {
+  args: {
+    ...Default.args,
+    variant: 'default',
+  },
+  render: defaultRender,
+}
+
+/**
+ * Primary variant: the group is wrapped in a rounded card with an outer border
+ * and separators between items.
+ */
+export const Primary: Story = {
+  args: {
+    ...Default.args,
+    variant: 'primary',
+  },
+  render: defaultRender,
+}

package/src/stories/CpAirlineLogo.stories.ts

@@ -1,22 +1,26 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpAirlineLogo from '@/components/CpAirlineLogo.vue'
 
+import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'
+
+const airlineSizes = [16, 24, 32, 48] as const
+
 const meta = {
-  title: 'Visual/CpAirlineLogo',
+  title: 'Atoms/CpAirlineLogo',
   component: CpAirlineLogo,
   parameters: {
     docs: {
       description: {
         component:
-          'A component that displays airline logos using IATA codes. Fetches logos from Kiwi.com CDN and displays them with customizable sizes.',
+          'Displays an airline logo fetched from the Kiwi.com CDN using its IATA code. Falls back to a placeholder when the code is unknown.',
       },
     },
   },
   argTypes: {
     iataCode: {
       control: 'text',
-      description: 'The IATA airline code (e.g., "LH" for Lufthansa, "BA" for British Airways)',
+      description: 'The IATA airline code (e.g. "LH" for Lufthansa, "BA" for British Airways)',
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: '1L' },
@@ -31,21 +35,26 @@ const meta = {
       },
     },
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof CpAirlineLogo>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
-const defaultTemplate = '<CpAirlineLogo v-bind="args" />'
-const defaultRender = (args) => ({
+type AirlineLogoStoryArgs = NonNullable<Story['args']>
+
+const defaultRender = (args: AirlineLogoStoryArgs) => ({
   components: { CpAirlineLogo },
   setup() {
     return { args }
   },
-  template: defaultTemplate,
+  template: '<CpAirlineLogo v-bind="args" />',
 })
 
+/**
+ * Default airline logo. Use the controls to experiment with each prop in
+ * isolation.
+ */
 export const Default: Story = {
   args: {
     iataCode: 'AF',
@@ -54,40 +63,55 @@ export const Default: Story = {
   render: defaultRender,
 }
 
+/**
+ * Logo rendered at the sizes most commonly used across the design system.
+ */
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpAirlineLogo },
+    setup() {
+      return { airlineSizes, docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div v-for="size in airlineSizes" :key="size" :style="docCellStyle">
+          <span :style="docLabelStyle">{{ size }}px</span>
+          <CpAirlineLogo iata-code="AF" :size="size" />
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * A sample of common airline logos displayed side by side.
+ */
 export const MultipleAirlines: Story = {
+  parameters: { controls: { disable: true } },
   render: () => ({
     components: { CpAirlineLogo },
     template: `
       <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
-        <CpAirlineLogo iataCode="1L" :size="32" />
-        <CpAirlineLogo iataCode="BA" :size="32" />
-        <CpAirlineLogo iataCode="EK" :size="32" />
-        <CpAirlineLogo iataCode="AA" :size="32" />
-        <CpAirlineLogo iataCode="AF" :size="32" />
-        <CpAirlineLogo iataCode="KL" :size="32" />
+        <CpAirlineLogo iata-code="1L" :size="32" />
+        <CpAirlineLogo iata-code="BA" :size="32" />
+        <CpAirlineLogo iata-code="EK" :size="32" />
+        <CpAirlineLogo iata-code="AA" :size="32" />
+        <CpAirlineLogo iata-code="AF" :size="32" />
+        <CpAirlineLogo iata-code="KL" :size="32" />
       </div>
     `,
   }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Multiple airline logos displayed together.',
-      },
-    },
-  },
 }
 
+/**
+ * With an empty `iataCode`, the component falls back to a neutral
+ * placeholder.
+ */
 export const EmptyIATACode: Story = {
   args: {
     iataCode: '',
     size: 32,
   },
   render: defaultRender,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Shows the component with an empty IATA code.',
-      },
-    },
-  },
 }