@citizenplane/pimp 18.17.0 → 18.18.0

package/package.json

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

package/src/components/CpAncillaryItem.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="cpAncillaryItem" :class="cpAncillaryItemDynamicClass">
+    <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" />
+      </div>
+      <div class="cpAncillaryItem__content">
+        <div class="cpAncillaryItem__name">
+          <p class="cpAncillaryItem__title">{{ title }}</p>
+          <p class="cpAncillaryItem__description">{{ description }}</p>
+          <p v-if="subtitle" class="cpAncillaryItem__subtitle">{{ subtitle }}</p>
+        </div>
+        <div class="cpAncillaryItem__quantity">
+          <cp-quantity-counter
+            v-model="quantity"
+            class="cpAncillaryItem__counter"
+            :decrease-label="decreaseLabel"
+            :increase-label="increaseLabel"
+            :max="maxQuantity"
+          />
+          <span v-if="hasMaxQuantity" class="cpAncillaryItem__maxQuantity">{{ maxQuantityLabel }}</span>
+        </div>
+        <p v-if="formattedPrice" class="cpAncillaryItem__price">{{ formattedPrice }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import CpIcon from '@/components/CpIcon.vue'
+import CpQuantityCounter from '@/components/CpQuantityCounter.vue'
+
+import AirportTransferImage from '@/assets/images/ancillaries/airport-transfer.png'
+import BicycleImage from '@/assets/images/ancillaries/bicycle.png'
+import CabinBagImage from '@/assets/images/ancillaries/cabin-bag.png'
+import CheckedBagImage from '@/assets/images/ancillaries/checked-bag.png'
+import CheckedBagSize1Image from '@/assets/images/ancillaries/checked-bag-size-1.png'
+import CheckedBagSize2Image from '@/assets/images/ancillaries/checked-bag-size-2.png'
+import CheckedBagSize3Image from '@/assets/images/ancillaries/checked-bag-size-3.png'
+import ConnectivityImage from '@/assets/images/ancillaries/connectivity.png'
+import DivingSetImage from '@/assets/images/ancillaries/diving-set.png'
+import ExtraWeightImage from '@/assets/images/ancillaries/extra-weight.png'
+import FastTrackImage from '@/assets/images/ancillaries/fast-track.png'
+import FirearmImage from '@/assets/images/ancillaries/firearm.png'
+import FishingRodImage from '@/assets/images/ancillaries/fishing-rod.png'
+import GolfImage from '@/assets/images/ancillaries/golf.png'
+import HandBagImage from '@/assets/images/ancillaries/hand-bag.png'
+import KiteSurfImage from '@/assets/images/ancillaries/kite-surf.png'
+import LoungeAccessImage from '@/assets/images/ancillaries/lounge-access.png'
+import MeetAndGreetImage from '@/assets/images/ancillaries/meet-and-greet.png'
+import MusicImage from '@/assets/images/ancillaries/music.png'
+import OversizedImage from '@/assets/images/ancillaries/oversized.png'
+import PetInCabinImage from '@/assets/images/ancillaries/pet-in-cabin.png'
+import PetInHoldImage from '@/assets/images/ancillaries/pet-in-hold.png'
+import SkisImage from '@/assets/images/ancillaries/skis.png'
+import SpecialMealImage from '@/assets/images/ancillaries/special-meal.png'
+import StandardMealImage from '@/assets/images/ancillaries/standard-meal.png'
+import { CpAncillaryItemTypes } from '@/constants/CpAncillaryItemTypes'
+
+interface Props {
+  currency?: string
+  description: string
+  locale?: string
+  maxQuantity?: number | null
+  maxQuantityLabel?: string
+  price?: number
+  subtitle?: string
+  title: string
+  type: CpAncillaryItemTypes
+  vertical?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: () => (typeof navigator === 'undefined' ? 'en' : navigator.language),
+  maxQuantity: null,
+  vertical: false,
+})
+
+const decreaseLabel = 'Decrease quantity'
+const increaseLabel = 'Increase quantity'
+
+const quantity = defineModel<number>('quantity', { required: true })
+
+const ancillaryImages: Partial<Record<CpAncillaryItemTypes, string>> = {
+  [CpAncillaryItemTypes.AIRPORT_TRANSFER]: AirportTransferImage,
+  [CpAncillaryItemTypes.BICYCLE]: BicycleImage,
+  [CpAncillaryItemTypes.CABIN_BAG]: CabinBagImage,
+  [CpAncillaryItemTypes.CHECKED_BAG]: CheckedBagImage,
+  [CpAncillaryItemTypes.CHECKED_BAG_SIZE_1]: CheckedBagSize1Image,
+  [CpAncillaryItemTypes.CHECKED_BAG_SIZE_2]: CheckedBagSize2Image,
+  [CpAncillaryItemTypes.CHECKED_BAG_SIZE_3]: CheckedBagSize3Image,
+  [CpAncillaryItemTypes.CONNECTIVITY]: ConnectivityImage,
+  [CpAncillaryItemTypes.DIVING_SET]: DivingSetImage,
+  [CpAncillaryItemTypes.EXTRA_WEIGHT]: ExtraWeightImage,
+  [CpAncillaryItemTypes.FAST_TRACK]: FastTrackImage,
+  [CpAncillaryItemTypes.FIREARM]: FirearmImage,
+  [CpAncillaryItemTypes.FISHING_ROD]: FishingRodImage,
+  [CpAncillaryItemTypes.GOLF]: GolfImage,
+  [CpAncillaryItemTypes.HAND_BAG]: HandBagImage,
+  [CpAncillaryItemTypes.KITE_SURF]: KiteSurfImage,
+  [CpAncillaryItemTypes.LOUNGE_ACCESS]: LoungeAccessImage,
+  [CpAncillaryItemTypes.MEET_AND_GREET]: MeetAndGreetImage,
+  [CpAncillaryItemTypes.MUSIC]: MusicImage,
+  [CpAncillaryItemTypes.OVERSIZED]: OversizedImage,
+  [CpAncillaryItemTypes.PET_IN_CABIN]: PetInCabinImage,
+  [CpAncillaryItemTypes.PET_IN_HOLD]: PetInHoldImage,
+  [CpAncillaryItemTypes.SKIS]: SkisImage,
+  [CpAncillaryItemTypes.SPECIAL_MEAL]: SpecialMealImage,
+  [CpAncillaryItemTypes.STANDARD_MEAL]: StandardMealImage,
+}
+
+const ancillaryImage = computed(() => ancillaryImages[props.type] ?? null)
+
+const hasMaxQuantity = computed(() => props.maxQuantity !== null)
+
+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 isSelected = computed(() => quantity.value > 0)
+const cpAncillaryItemDynamicClass = computed(() => ({
+  'cpAncillaryItem--isVertical': props.vertical,
+  'cpAncillaryItem--isSelected': isSelected.value,
+}))
+</script>
+
+<style lang="scss">
+.cpAncillaryItem {
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--cp-spacing-sm);
+  border: fn.px-to-rem(1) solid var(--cp-border-soft);
+  border-radius: var(--cp-radius-md);
+  background: var(--cp-background-primary);
+
+  &__wrap {
+    display: flex;
+    height: 100%;
+    border-radius: var(--cp-radius-sm);
+    gap: var(--cp-spacing-lg);
+  }
+
+  &__visual {
+    display: flex;
+    overflow: hidden;
+    width: fn.px-to-rem(96);
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--cp-radius-sm);
+    background: var(--cp-background-secondary);
+  }
+
+  &__image {
+    width: fn.px-to-rem(96);
+    height: fn.px-to-rem(96);
+    object-fit: contain;
+    transition: transform 200ms ease;
+  }
+
+  &__fallbackIcon {
+    color: var(--cp-text-tertiary);
+  }
+
+  &__content {
+    display: flex;
+    min-width: 0;
+    flex: auto;
+    flex-direction: column;
+    padding: var(--cp-spacing-lg) var(--cp-spacing-lg) var(--cp-spacing-lg) 0;
+    gap: var(--cp-spacing-lg);
+  }
+
+  &__name {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+  }
+
+  &__title {
+    color: var(--cp-text-primary);
+    font-size: var(--cp-text-size-md);
+    font-weight: 600;
+    line-height: var(--cp-text-md-line-height);
+  }
+
+  &__description,
+  &__subtitle {
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-text-sm-line-height);
+  }
+
+  &__quantity {
+    display: flex;
+    align-items: center;
+    gap: var(--cp-spacing-md);
+  }
+
+  &__maxQuantity {
+    color: var(--cp-text-tertiary);
+    font-size: var(--cp-text-size-xs);
+    line-height: var(--cp-text-xs-line-height);
+  }
+
+  &__price {
+    color: var(--cp-text-accent-primary);
+    font-size: var(--cp-text-size-md);
+    font-weight: 600;
+    line-height: var(--cp-text-md-line-height);
+  }
+
+  &--isVertical {
+    .cpAncillaryItem__wrap {
+      flex-direction: column;
+      align-items: center;
+      padding-bottom: var(--cp-spacing-lg);
+    }
+
+    .cpAncillaryItem__visual {
+      width: 100%;
+      height: fn.px-to-rem(128);
+    }
+
+    .cpAncillaryItem__image {
+      width: fn.px-to-rem(80);
+      height: fn.px-to-rem(80);
+    }
+
+    .cpAncillaryItem__content {
+      width: 100%;
+      align-items: center;
+    }
+
+    .cpAncillaryItem__name {
+      padding: 0 var(--cp-spacing-lg);
+    }
+
+    .cpAncillaryItem__title,
+    .cpAncillaryItem__description,
+    .cpAncillaryItem__subtitle {
+      text-align: center;
+    }
+
+    .cpAncillaryItem__quantity {
+      flex-direction: column;
+      gap: var(--cp-spacing-sm);
+    }
+  }
+
+  &--isSelected {
+    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);
+
+    .cpAncillaryItem__wrap {
+      background: var(--cp-background-secondary);
+    }
+
+    .cpAncillaryItem__counter {
+      background: var(--cp-background-primary);
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover .cpAncillaryItem__image {
+      transform: scale3d(1.1, 1.1, 1);
+    }
+  }
+}
+</style>

package/src/components/index.ts

@@ -19,6 +19,7 @@ import CpAccordion from './CpAccordion.vue'
 import CpAccordionGroup from './CpAccordionGroup.vue'
 import CpAirlineLogo from './CpAirlineLogo.vue'
 import CpAlert from './CpAlert.vue'
+import CpAncillaryItem from './CpAncillaryItem.vue'
 import CpBadge from './CpBadge.vue'
 import CpBottomSheet from './CpBottomSheet.vue'
 import CpButton from './CpButton.vue'
@@ -114,6 +115,7 @@ const Components = {
   CpRadioNew,
   CpCalendar,
   CpAlert,
+  CpAncillaryItem,
   CpLoader,
   CpInput,
   CpText,
@@ -207,6 +209,7 @@ export type {
   FlightTerminal,
 } from '@/constants/tripDetails'
 
+export { CpAncillaryItemTypes } from '@/constants/CpAncillaryItemTypes'
 export {
   CpSeatMapTransitionDirections,
   DEFAULT_CP_SEAT_MAP_CONFIG,
@@ -224,6 +227,7 @@ export {
   CpAccordionGroup,
   CpAirlineLogo,
   CpAlert,
+  CpAncillaryItem,
   CpBadge,
   CpBottomSheet,
   CpButton,

package/src/constants/CpAncillaryItemTypes.ts

@@ -0,0 +1,30 @@
+export enum CpAncillaryItemTypes {
+  AIRPORT_TRANSFER = 'airportTransfer',
+  BICYCLE = 'bicycle',
+  CABIN_BAG = 'cabinBag',
+  CANCELLATION_INSURANCE = 'cancellationInsurance',
+  CHECKED_BAG = 'checkedBag',
+  CHECKED_BAG_SIZE_1 = 'checkedBagSize1',
+  CHECKED_BAG_SIZE_2 = 'checkedBagSize2',
+  CHECKED_BAG_SIZE_3 = 'checkedBagSize3',
+  CONNECTIVITY = 'connectivity',
+  DIVING_SET = 'divingSet',
+  EXTRA_WEIGHT = 'extraWeight',
+  FAST_TRACK = 'fastTrack',
+  FIREARM = 'firearm',
+  FISHING_ROD = 'fishingRod',
+  GOLF = 'golf',
+  HAND_BAG = 'handBag',
+  KITE_SURF = 'kiteSurf',
+  LOUNGE_ACCESS = 'loungeAccess',
+  MEET_AND_GREET = 'meetAndGreet',
+  MUSIC = 'music',
+  NAME_CHANGE = 'nameChange',
+  OTHER = 'other',
+  OVERSIZED = 'oversized',
+  PET_IN_CABIN = 'petInCabin',
+  PET_IN_HOLD = 'petInHold',
+  SKIS = 'skis',
+  SPECIAL_MEAL = 'specialMeal',
+  STANDARD_MEAL = 'standardMeal',
+}

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>
+    `,
+  }),
+}