@citizenplane/pimp 18.23.1 → 18.23.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.23.1",
+  "version": "18.23.2",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpAncillaryItem.vue

@@ -3,16 +3,31 @@
     <div class="cpAncillaryItem__wrap">
       <div class="cpAncillaryItem__visual">
         <img v-if="ancillaryImage" alt="" class="cpAncillaryItem__image" :src="ancillaryImage" />
-        <cp-icon v-else class="cpAncillaryItem__fallbackIcon" size="40" type="shopping-bag" />
+        <cp-icon v-else class="cpAncillaryItem__fallbackIcon" :size="fallbackIconSize" type="shopping-bag" />
       </div>
       <div class="cpAncillaryItem__content">
         <div class="cpAncillaryItem__name">
-          <p class="cpAncillaryItem__title">{{ title }}</p>
+          <div class="cpAncillaryItem__heading">
+            <p class="cpAncillaryItem__title">{{ title }}</p>
+            <p v-if="hasInlinePrice" class="cpAncillaryItem__bullet">•</p>
+            <p v-if="hasInlinePrice" class="cpAncillaryItem__inlinePrice">{{ formattedPrice }}</p>
+          </div>
           <p class="cpAncillaryItem__description">{{ description }}</p>
           <p v-if="subtitle" class="cpAncillaryItem__subtitle">{{ subtitle }}</p>
         </div>
         <div class="cpAncillaryItem__quantity">
+          <cp-button
+            v-if="isAddButtonVisible"
+            appearance="secondary"
+            class="cpAncillaryItem__addButton"
+            color="accent"
+            size="sm"
+            @click="selectFirstQuantity"
+          >
+            {{ addLabel }}
+          </cp-button>
           <cp-quantity-counter
+            v-else
             v-model="quantity"
             class="cpAncillaryItem__counter"
             :decrease-label="decreaseLabel"
@@ -20,9 +35,9 @@
             :increase-label="increaseLabel"
             :max="maxQuantity"
           />
-          <span v-if="hasMaxQuantity" class="cpAncillaryItem__maxQuantity">{{ maxQuantityLabel }}</span>
+          <span v-if="hasMaxQuantityCaption" class="cpAncillaryItem__maxQuantity">{{ maxQuantityLabel }}</span>
         </div>
-        <p v-if="formattedPrice" class="cpAncillaryItem__price">{{ formattedPrice }}</p>
+        <p v-if="hasStackedPrice" class="cpAncillaryItem__price">{{ formattedPrice }}</p>
       </div>
     </div>
   </div>
@@ -31,6 +46,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import CpButton from '@/components/CpButton.vue'
 import CpIcon from '@/components/CpIcon.vue'
 import CpQuantityCounter from '@/components/CpQuantityCounter.vue'
 
@@ -62,9 +78,11 @@ import StandardMealImage from '@/assets/images/ancillaries/standard-meal.png'
 import { CpAncillaryItemTypes } from '@/constants/CpAncillaryItemTypes'
 
 interface Props {
+  addLabel?: string
   currency?: string
   description: string
   disableAnimation?: boolean
+  layout?: 'card' | 'list'
   locale?: string
   maxQuantity?: number | null
   maxQuantityLabel?: string
@@ -76,6 +94,8 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  addLabel: 'Add',
+  layout: 'card',
   locale: () => (typeof navigator === 'undefined' ? 'en' : navigator.language),
   maxQuantity: null,
   vertical: false,
@@ -116,16 +136,40 @@ const ancillaryImages: Partial<Record<CpAncillaryItemTypes, string>> = {
 
 const ancillaryImage = computed(() => ancillaryImages[props.type] ?? null)
 
+const isListLayout = computed(() => props.layout === 'list')
+
+const fallbackIconSize = computed(() => {
+  if (isListLayout.value) return '28'
+  return '40'
+})
+
 const hasMaxQuantity = computed(() => props.maxQuantity !== null)
 
+const hasMaxQuantityCaption = computed(() => hasMaxQuantity.value && !isListLayout.value)
+
+const isAddButtonVisible = computed(() => quantity.value < 1)
+
+const selectFirstQuantity = (): void => {
+  quantity.value = 1
+}
+
 const formattedPrice = computed(() => {
   if (props.price === undefined || !props.currency) return null
   return new Intl.NumberFormat(props.locale, { style: 'currency', currency: props.currency }).format(props.price / 100)
 })
 
+const hasPrice = computed(() => formattedPrice.value !== null)
+
+const hasInlinePrice = computed(() => hasPrice.value && isListLayout.value)
+
+const hasStackedPrice = computed(() => hasPrice.value && !isListLayout.value)
+
+const isVerticalCard = computed(() => props.vertical && !isListLayout.value)
+
 const isSelected = computed(() => quantity.value > 0)
 const cpAncillaryItemDynamicClass = computed(() => ({
-  'cpAncillaryItem--isVertical': props.vertical,
+  'cpAncillaryItem--isList': isListLayout.value,
+  'cpAncillaryItem--isVertical': isVerticalCard.value,
   'cpAncillaryItem--isSelected': isSelected.value,
 }))
 </script>
@@ -256,7 +300,7 @@ const cpAncillaryItemDynamicClass = computed(() => ({
     }
   }
 
-  &--isSelected {
+  &--isSelected:not(#{&}--isList) {
     border-color: var(--cp-border-accent-solid);
     outline: fn.px-to-rem(1) solid var(--cp-border-accent-solid);
     outline-offset: fn.px-to-rem(-2);
@@ -270,8 +314,122 @@ const cpAncillaryItemDynamicClass = computed(() => ({
     }
   }
 
+  &--isList {
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: none;
+    container-type: inline-size;
+
+    .cpAncillaryItem__wrap {
+      align-items: center;
+      padding: var(--cp-spacing-lg) 0;
+      border-radius: 0;
+      border-bottom: fn.px-to-rem(1) solid var(--cp-border-soft);
+    }
+
+    .cpAncillaryItem__visual {
+      width: fn.px-to-rem(44);
+      height: fn.px-to-rem(44);
+      border-radius: 0;
+      background: none;
+    }
+
+    .cpAncillaryItem__image {
+      width: fn.px-to-rem(28);
+      height: fn.px-to-rem(28);
+    }
+
+    .cpAncillaryItem__content {
+      flex-direction: row;
+      align-items: center;
+      padding: 0;
+    }
+
+    .cpAncillaryItem__name {
+      flex: auto;
+    }
+
+    .cpAncillaryItem__heading {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .cpAncillaryItem__title {
+      font-weight: 500;
+    }
+
+    .cpAncillaryItem__bullet,
+    .cpAncillaryItem__inlinePrice {
+      color: var(--cp-text-secondary);
+      font-size: var(--cp-text-size-md);
+      font-weight: 500;
+      line-height: var(--cp-text-md-line-height);
+    }
+
+    .cpAncillaryItem__bullet {
+      display: none;
+    }
+
+    .cpAncillaryItem__quantity {
+      flex: none;
+    }
+
+    &:last-child .cpAncillaryItem__wrap {
+      border-bottom: none;
+    }
+
+    @include mx.media-query-min(48rem) {
+      .cpAncillaryItem__heading {
+        flex-direction: row;
+        gap: var(--cp-spacing-sm);
+      }
+
+      .cpAncillaryItem__bullet {
+        display: block;
+      }
+    }
+
+    @container (width < 22rem) {
+      .cpAncillaryItem__wrap {
+        gap: var(--cp-spacing-sm);
+      }
+
+      .cpAncillaryItem__visual {
+        width: fn.px-to-rem(40);
+        height: fn.px-to-rem(40);
+      }
+
+      .cpAncillaryItem__image {
+        width: fn.px-to-rem(24);
+        height: fn.px-to-rem(24);
+      }
+
+      .cpAncillaryItem__content {
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--cp-spacing-md);
+      }
+
+      .cpAncillaryItem__heading {
+        flex-direction: column;
+        gap: 0;
+      }
+
+      .cpAncillaryItem__bullet {
+        display: none;
+      }
+
+      .cpAncillaryItem__description,
+      .cpAncillaryItem__subtitle {
+        font-size: var(--cp-text-size-xs);
+        line-height: var(--cp-text-xs-line-height);
+      }
+    }
+  }
+
   @media (hover: hover) {
-    &:hover .cpAncillaryItem__image {
+    &:not(#{&}--isList):hover .cpAncillaryItem__image {
       transform: scale3d(1.1, 1.1, 1);
     }
   }

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>