@citizenplane/pimp 18.16.3 → 18.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.16.3",
+  "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/CpQuantityCounter.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="cpQuantityCounter">
+    <button
+      :aria-label="decreaseLabel"
+      class="cpQuantityCounter__button"
+      :disabled="isDecrementDisabled"
+      type="button"
+      @click="decrement"
+    >
+      <cp-icon size="16" type="minus" />
+    </button>
+    <cp-transition-counter v-if="!disableAnimation" class="cpQuantityCounter__count" :counter-number="modelValue">
+      <span>{{ modelValue }}</span>
+    </cp-transition-counter>
+    <span v-else class="cpQuantityCounter__count">{{ modelValue }}</span>
+    <button
+      :aria-label="increaseLabel"
+      class="cpQuantityCounter__button cpQuantityCounter__button--isAccent"
+      :disabled="isIncrementDisabled"
+      type="button"
+      @click="increment"
+    >
+      <cp-icon size="16" type="plus" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import CpIcon from '@/components/CpIcon.vue'
+import CpTransitionCounter from '@/components/CpTransitionCounter.vue'
+
+interface Props {
+  decreaseLabel: string
+  disableAnimation?: boolean
+  increaseLabel: string
+  max?: number | null
+  min?: number
+}
+
+const props = withDefaults(defineProps<Props>(), { disableAnimation: false, max: null, min: 0 })
+
+const modelValue = defineModel<number>({ required: true })
+
+const isDecrementDisabled = computed(() => modelValue.value <= props.min)
+const isIncrementDisabled = computed(() => props.max !== null && modelValue.value >= props.max)
+
+const decrement = () => {
+  if (isDecrementDisabled.value) return
+  modelValue.value -= 1
+}
+
+const increment = () => {
+  if (isIncrementDisabled.value) return
+  modelValue.value += 1
+}
+</script>
+
+<style lang="scss">
+.cpQuantityCounter {
+  display: flex;
+  align-items: center;
+  padding: var(--cp-spacing-xs);
+  border-radius: var(--cp-radius-md-lg);
+  background: var(--cp-background-accent-primary);
+  gap: var(--cp-spacing-sm);
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--cp-spacing-sm-md);
+    border: fn.px-to-rem(1) solid var(--cp-border-soft);
+    border-radius: var(--cp-radius-md);
+    background: var(--cp-background-primary);
+    box-shadow: var(--cp-shadows-3xs);
+    color: var(--cp-text-primary);
+
+    @include mx.square-sizing(28);
+    @extend %u-focus-outline;
+
+    &:disabled {
+      border-color: transparent;
+      background: var(--cp-background-secondary);
+      box-shadow: none;
+      color: var(--cp-text-disabled);
+    }
+
+    &--isAccent {
+      color: var(--cp-text-accent-primary);
+    }
+  }
+
+  &__count {
+    display: flex;
+    width: fn.px-to-rem(24);
+    justify-content: center;
+    color: var(--cp-text-primary);
+    font-size: var(--cp-text-size-sm);
+    font-weight: 500;
+    line-height: var(--cp-text-sm-line-height);
+    text-align: center;
+  }
+}
+</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'
@@ -40,6 +41,7 @@ import CpMenu from './CpMenu.vue'
 import CpMenuItem from './CpMenuItem.vue'
 import CpMenuList from './CpMenuList.vue'
 import CpMultiselect from './CpMultiselect.vue'
+import CpQuantityCounter from './CpQuantityCounter.vue'
 import CpRadio from './CpRadio.vue'
 import CpRadioGroup from './CpRadioGroup.vue'
 import CpRadioNew from './CpRadioNew.vue'
@@ -113,6 +115,7 @@ const Components = {
   CpRadioNew,
   CpCalendar,
   CpAlert,
+  CpAncillaryItem,
   CpLoader,
   CpInput,
   CpText,
@@ -120,6 +123,7 @@ const Components = {
   CpSelect,
   CpSelectMenu,
   CpMultiselect,
+  CpQuantityCounter,
   CpCheckbox,
   CpRadio,
   CpRadioGroup,
@@ -205,6 +209,7 @@ export type {
   FlightTerminal,
 } from '@/constants/tripDetails'
 
+export { CpAncillaryItemTypes } from '@/constants/CpAncillaryItemTypes'
 export {
   CpSeatMapTransitionDirections,
   DEFAULT_CP_SEAT_MAP_CONFIG,
@@ -222,6 +227,7 @@ export {
   CpAccordionGroup,
   CpAirlineLogo,
   CpAlert,
+  CpAncillaryItem,
   CpBadge,
   CpBottomSheet,
   CpButton,
@@ -244,6 +250,7 @@ export {
   CpMenuItem,
   CpMenuList,
   CpMultiselect,
+  CpQuantityCounter,
   CpRadio,
   CpRadioGroup,
   CpRadioNew,

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',
+}