@citizenplane/pimp 18.16.3 → 18.18.0

package/src/stories/CpAncillaryItem.stories.ts

@@ -0,0 +1,243 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import CpAncillaryItem from '@/components/CpAncillaryItem.vue'
+
+import { CpAncillaryItemTypes } from '@/constants/CpAncillaryItemTypes'
+import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'
+
+const galleryCellStyle = `${docCellStyle} width: 260px;`
+
+const meta = {
+  title: 'Atoms/CpAncillaryItem',
+  component: CpAncillaryItem,
+  argTypes: {
+    currency: {
+      control: 'text',
+      description: 'ISO currency code used to format price',
+    },
+    description: {
+      control: 'text',
+      description: 'Description text for the ancillary',
+    },
+    locale: {
+      control: 'text',
+      description: 'Locale used to format price, defaults to the browser locale',
+    },
+    maxQuantity: {
+      control: 'number',
+      description: 'Maximum selectable quantity, null for uncapped',
+    },
+    maxQuantityLabel: {
+      control: 'text',
+      description: 'Caption shown next to the counter when maxQuantity is set',
+    },
+    price: {
+      control: 'number',
+      description: 'Price in minor units (cents), formatted with currency',
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Optional second line rendered under the description',
+    },
+    title: {
+      control: 'text',
+      description: 'Title of the ancillary',
+    },
+    type: {
+      control: 'select',
+      options: Object.values(CpAncillaryItemTypes),
+      description: 'Picks the visual for the ancillary',
+    },
+    vertical: {
+      control: 'boolean',
+      description: 'Whether to use the column layout instead of the row layout',
+    },
+  },
+} satisfies Meta<typeof CpAncillaryItem>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default ancillary card. Use the controls to experiment with each prop in isolation.
+ */
+export const Default: Story = {
+  args: {
+    title: 'Checked bag',
+    description: '23kg included',
+    type: CpAncillaryItemTypes.CHECKED_BAG,
+    quantity: 0,
+    maxQuantity: 3,
+    maxQuantityLabel: 'max. 3',
+    price: 2990,
+    currency: 'EUR',
+    vertical: false,
+  },
+  render: (args) => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryItem v-bind="args" v-model:quantity="quantity" />
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* States                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * quantity > 0 adds the accent ring and swaps the counter background.
+ */
+export const Selected: Story = {
+  args: {
+    ...Default.args,
+    quantity: 1,
+  },
+  render: (args) => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const quantity = ref(1)
+      return { args, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryItem v-bind="args" v-model:quantity="quantity" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * No maxQuantity: the counter has no upper bound and the caption is hidden.
+ */
+export const Uncapped: Story = {
+  args: {
+    title: 'Extra weight',
+    description: 'Additional 5kg allowance',
+    type: CpAncillaryItemTypes.EXTRA_WEIGHT,
+    quantity: 0,
+    maxQuantity: null,
+    price: 990,
+    currency: 'EUR',
+    vertical: false,
+  },
+  render: (args) => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryItem v-bind="args" v-model:quantity="quantity" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * A type with no bundled visual falls back to the shopping-bag icon.
+ */
+export const NoImage: Story = {
+  args: {
+    title: 'Cancellation insurance',
+    description: 'Refund protection for your trip',
+    type: CpAncillaryItemTypes.CANCELLATION_INSURANCE,
+    quantity: 0,
+    maxQuantity: 1,
+    maxQuantityLabel: 'max. 1',
+    price: 1490,
+    currency: 'EUR',
+    vertical: false,
+  },
+  render: (args) => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryItem v-bind="args" v-model:quantity="quantity" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * The column layout, used for baggage grids. subtitle renders a second details
+ * line under the description.
+ */
+export const Vertical: Story = {
+  args: {
+    title: 'Cabin bag',
+    description: '10kg included',
+    subtitle: '9kg • 55 × 36 × 25 cm',
+    type: CpAncillaryItemTypes.CABIN_BAG,
+    quantity: 0,
+    maxQuantity: 1,
+    maxQuantityLabel: 'max. 1',
+    price: 1990,
+    currency: 'EUR',
+    vertical: true,
+  },
+  render: (args) => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryItem v-bind="args" v-model:quantity="quantity" />
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* Gallery                                                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Every enum value rendered at once: each real visual, and the fallback icon
+ * for the three art-less types.
+ */
+export const Gallery: Story = {
+  args: {
+    ...Default.args,
+  },
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const types = Object.values(CpAncillaryItemTypes)
+      const quantities = ref(Object.fromEntries(types.map((type) => [type, 0])))
+      return { types, quantities, galleryCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div v-for="type in types" :key="type" :style="galleryCellStyle">
+          <span :style="docLabelStyle">{{ type }}</span>
+          <CpAncillaryItem
+            v-model:quantity="quantities[type]"
+            :title="type"
+            description="Sample description"
+            :type="type"
+            :max-quantity="5"
+            max-quantity-label="max. 5"
+            :price="1000"
+            currency="EUR"
+          />
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpQuantityCounter.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import CpQuantityCounter from '@/components/CpQuantityCounter.vue'
+
+const meta = {
+  title: 'Atoms/CpQuantityCounter',
+  component: CpQuantityCounter,
+  argTypes: {
+    decreaseLabel: {
+      control: 'text',
+      description: 'Aria-label for the decrease button',
+    },
+    disableAnimation: {
+      control: 'boolean',
+      description: 'Whether to render the count as a plain span instead of animating it',
+    },
+    increaseLabel: {
+      control: 'text',
+      description: 'Aria-label for the increase button',
+    },
+    max: {
+      control: 'number',
+      description: 'Maximum allowed value',
+    },
+    min: {
+      control: 'number',
+      description: 'Minimum allowed value',
+    },
+    modelValue: {
+      control: 'number',
+      description: 'The counter value',
+    },
+  },
+} satisfies Meta<typeof CpQuantityCounter>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default counter. Use the controls to experiment with each prop in isolation.
+ */
+export const Default: Story = {
+  args: {
+    modelValue: 1,
+    min: 0,
+    max: 5,
+    decreaseLabel: 'Decrease',
+    increaseLabel: 'Increase',
+  },
+  render: (args) => ({
+    components: { CpQuantityCounter },
+    setup() {
+      const value = ref(1)
+      return { args, value }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpQuantityCounter v-bind="args" v-model="value" />
+      </div>
+    `,
+  }),
+}