@citizenplane/pimp 18.23.0 → 18.23.2

package/src/stories/CpAncillaryItem.stories.ts

@@ -8,10 +8,43 @@ import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/document
 
 const galleryCellStyle = `${docCellStyle} width: 260px;`
 
+const listStackRows = [
+  {
+    title: 'Hand bag',
+    description: '5kg • 45 × 36 × 20 cm',
+    type: CpAncillaryItemTypes.HAND_BAG,
+    price: 990,
+    quantity: 0,
+  },
+  {
+    title: 'Cabin bag',
+    description: '10kg • 55 × 36 × 25 cm',
+    type: CpAncillaryItemTypes.CABIN_BAG,
+    price: 1990,
+    quantity: 1,
+  },
+  {
+    title: 'Checked bag',
+    description: '23kg • 158 cm total',
+    type: CpAncillaryItemTypes.CHECKED_BAG,
+    price: 2990,
+    quantity: 0,
+  },
+]
+
+const listCompactRows = listStackRows.slice(0, 2)
+
+const listWrapStyle = 'padding: 20px 0; width: 358px;'
+const listCompactWrapStyle = 'padding: 20px 0; width: 21rem;'
+
 const meta = {
   title: 'Business/CpAncillaryItem',
   component: CpAncillaryItem,
   argTypes: {
+    addLabel: {
+      control: 'text',
+      description: 'Label of the button shown while the quantity is 0',
+    },
     currency: {
       control: 'text',
       description: 'ISO currency code used to format price',
@@ -20,6 +53,11 @@ const meta = {
       control: 'text',
       description: 'Description text for the ancillary',
     },
+    layout: {
+      control: 'select',
+      options: ['card', 'list'],
+      description: 'Card renders the bordered tile, list renders a separated row',
+    },
     locale: {
       control: 'text',
       description: 'Locale used to format price, defaults to the browser locale',
@@ -60,7 +98,8 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 /**
- * Default ancillary card. Use the controls to experiment with each prop in isolation.
+ * Default ancillary card. It starts on the Add button, which sets the quantity to 1
+ * and hands over to the counter. Use the controls to experiment with each prop in isolation.
  */
 export const Default: Story = {
   args: {
@@ -93,7 +132,8 @@ export const Default: Story = {
 /* -------------------------------------------------------------------------- */
 
 /**
- * quantity > 0 adds the accent ring and swaps the counter background.
+ * quantity > 0 replaces the Add button with the counter, adds the accent ring and
+ * swaps the counter background.
  */
 export const Selected: Story = {
   args: {
@@ -115,7 +155,7 @@ export const Selected: Story = {
 }
 
 /**
- * No maxQuantity: the counter has no upper bound and the caption is hidden.
+ * No maxQuantity: once added, the counter has no upper bound and the caption is hidden.
  */
 export const Uncapped: Story = {
   args: {
@@ -227,6 +267,159 @@ export const VerticalOnMobile: Story = {
   }),
 }
 
+/* -------------------------------------------------------------------------- */
+/* List layout                                                                */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The list layout: no card frame, a 44px visual, title and price on one line and
+ * a soft bottom separator so stacked rows read as a list. maxQuantityLabel is not
+ * rendered here.
+ */
+export const List: Story = {
+  args: {
+    title: 'Hand bag',
+    description: '5kg • 45 × 36 × 20 cm',
+    type: CpAncillaryItemTypes.HAND_BAG,
+    quantity: 0,
+    maxQuantity: 10,
+    maxQuantityLabel: 'max. 10',
+    price: 990,
+    currency: 'EUR',
+    layout: 'list',
+  },
+  render: (args) => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, quantity, listWrapStyle }
+    },
+    template: `
+      <div :style="listWrapStyle">
+        <CpAncillaryItem v-bind="args" v-model:quantity="quantity" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Selected list row: the counter replaces the Add button and the row keeps its
+ * plain background, without the accent ring the card gets.
+ */
+export const ListSelected: Story = {
+  args: {
+    ...List.args,
+    quantity: 1,
+  },
+  render: (args) => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const quantity = ref(1)
+      return { args, quantity, listWrapStyle }
+    },
+    template: `
+      <div :style="listWrapStyle">
+        <CpAncillaryItem v-bind="args" v-model:quantity="quantity" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Below the tablet breakpoint the title, the price and the description stack on
+ * three lines and the bullet disappears.
+ */
+export const ListOnMobile: Story = {
+  args: {
+    ...List.args,
+  },
+  globals: {
+    viewport: { value: '390-844', isRotated: false },
+  },
+  render: (args) => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, quantity, listWrapStyle }
+    },
+    template: `
+      <div :style="listWrapStyle">
+        <CpAncillaryItem v-bind="args" v-model:quantity="quantity" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Under 22rem of component width the row goes compact: a 4px gap to a 40px visual
+ * holding a 24px image, the details wrap with an 8px gap, and the description drops
+ * to 12px. Driven by the component's own width, so a 336px side panel switches while
+ * the wider list does not.
+ */
+export const ListCompact: Story = {
+  args: {
+    ...List.args,
+  },
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const rows = listCompactRows
+      const quantities = ref(Object.fromEntries(rows.map((row) => [row.type, row.quantity])))
+      return { rows, quantities, listCompactWrapStyle }
+    },
+    template: `
+      <div :style="listCompactWrapStyle">
+        <CpAncillaryItem
+          v-for="row in rows"
+          :key="row.type"
+          v-model:quantity="quantities[row.type]"
+          :title="row.title"
+          :description="row.description"
+          :type="row.type"
+          :price="row.price"
+          currency="EUR"
+          layout="list"
+        />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Several rows in a row, to show how the separators build a list. The last row drops
+ * its separator so the list does not end on a rule.
+ */
+export const ListStack: Story = {
+  args: {
+    ...List.args,
+  },
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const rows = listStackRows
+      const quantities = ref(Object.fromEntries(rows.map((row) => [row.type, row.quantity])))
+      return { rows, quantities, listWrapStyle }
+    },
+    template: `
+      <div :style="listWrapStyle">
+        <CpAncillaryItem
+          v-for="row in rows"
+          :key="row.type"
+          v-model:quantity="quantities[row.type]"
+          :title="row.title"
+          :description="row.description"
+          :type="row.type"
+          :price="row.price"
+          currency="EUR"
+          layout="list"
+        />
+      </div>
+    `,
+  }),
+}
+
 /* -------------------------------------------------------------------------- */
 /* Gallery                                                                    */
 /* -------------------------------------------------------------------------- */
@@ -244,15 +437,27 @@ export const Gallery: Story = {
     components: { CpAncillaryItem },
     setup() {
       const types = Object.values(CpAncillaryItemTypes)
-      const quantities = ref(Object.fromEntries(types.map((type) => [type, 0])))
-      return { types, quantities, galleryCellStyle, docLabelStyle, docRowWrapStyle }
+      const cardQuantities = ref(Object.fromEntries(types.map((type) => [type, 0])))
+      const listQuantities = ref(Object.fromEntries(types.map((type) => [type, 0])))
+      return { types, cardQuantities, listQuantities, 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]"
+            v-model:quantity="cardQuantities[type]"
+            :title="type"
+            description="Sample description"
+            :type="type"
+            :max-quantity="5"
+            max-quantity-label="max. 5"
+            :price="1000"
+            currency="EUR"
+          />
+          <span :style="docLabelStyle">{{ type }} — list</span>
+          <CpAncillaryItem
+            v-model:quantity="listQuantities[type]"
             :title="type"
             description="Sample description"
             :type="type"
@@ -260,6 +465,7 @@ export const Gallery: Story = {
             max-quantity-label="max. 5"
             :price="1000"
             currency="EUR"
+            layout="list"
           />
         </div>
       </div>

package/src/stories/CpStepper.stories.ts

@@ -37,6 +37,10 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 /**
+ * Three visual states coexist: steps before the active one render as
+ * completed (white pill, green check badge, dark label), the active one keeps
+ * its accent pill, and the following ones stay upcoming (bordered, grey).
+ *
  * Clicking an enabled step updates the active step locally, the way a
  * consumer would react to `select` by navigating.
  */
@@ -65,10 +69,55 @@ export const Default: Story = {
   }),
 }
 
+/**
+ * Three steps already behind the active one: each renders completed, with the
+ * check badge replacing its number. Completed steps stay clickable.
+ */
+export const Completed: Story = {
+  args: {
+    steps,
+    activeStepId: 'extras',
+    reachedStepIndex: 3,
+  },
+  render: (args) => ({
+    components: { CpStepper },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="width: 70rem;">
+        <CpStepper v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * The funnel's last step is active, so every preceding step is completed.
+ */
+export const LastStep: Story = {
+  args: {
+    steps,
+    activeStepId: 'confirmation',
+    reachedStepIndex: 4,
+  },
+  render: (args) => ({
+    components: { CpStepper },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="width: 70rem;">
+        <CpStepper v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
 /**
  * Below the container width threshold (60.5rem, matching online-checkin's
  * former `$breakpoint-large-tablet`), step titles collapse and only the
- * numbered pills remain.
+ * numbered pills remain, the completed ones showing their check badge.
  */
 export const Narrow: Story = {
   args: { ...Default.args },