@citizenplane/pimp 18.17.0 → 18.19.0

package/package.json

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

package/src/components/CpAncillaryCategory.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class="cpAncillaryCategory">
+    <div class="cpAncillaryCategory__header">
+      <button class="cpAncillaryCategory__lead" type="button" @click="handleToggle">
+        <div class="cpAncillaryCategory__visual">
+          <img
+            v-if="visual"
+            alt=""
+            class="cpAncillaryCategory__visualImage"
+            :class="visualImageDynamicClass"
+            :src="visual"
+          />
+          <cp-icon v-else class="cpAncillaryCategory__fallbackIcon" size="40" type="shopping-bag" />
+        </div>
+        <div class="cpAncillaryCategory__texts">
+          <span :id="titleId" class="cpAncillaryCategory__title">{{ title }}</span>
+          <span class="cpAncillaryCategory__description">{{ description }}</span>
+        </div>
+      </button>
+      <div v-if="isSwitch" class="cpAncillaryCategory__trailing">
+        <span v-if="hasFromPrice" class="cpAncillaryCategory__price">{{ formattedPrice }}</span>
+        <cp-switch v-model="checked" color="accent" />
+      </div>
+      <div v-else-if="isActuallyExpandable" class="cpAncillaryCategory__trailing">
+        <span v-if="hasFromPrice" class="cpAncillaryCategory__fromPriceClip">
+          <span :aria-hidden="isOpen" class="cpAncillaryCategory__fromPrice" :class="fromPriceDynamicClass">
+            <span class="cpAncillaryCategory__fromPriceLabel">{{ fromPriceLabel }}</span>
+            <span class="cpAncillaryCategory__fromPriceAmount">{{ formattedPrice }}</span>
+          </span>
+        </span>
+        <button
+          :aria-controls="bodyId"
+          :aria-expanded="isOpen"
+          :aria-labelledby="titleId"
+          class="cpAncillaryCategory__toggle"
+          type="button"
+          @click="handleToggle"
+        >
+          <cp-icon class="cpAncillaryCategory__chevron" :class="chevronDynamicClass" size="24" type="chevron-down" />
+        </button>
+      </div>
+    </div>
+    <cp-transition-expand v-if="isActuallyExpandable">
+      <div v-if="isOpen">
+        <div :id="bodyId" class="cpAncillaryCategory__body">
+          <slot />
+        </div>
+      </div>
+    </cp-transition-expand>
+    <div v-else-if="!isSwitch" class="cpAncillaryCategory__body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useId } from 'vue'
+
+import CpIcon from '@/components/CpIcon.vue'
+import CpSwitch from '@/components/CpSwitch.vue'
+import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
+
+import BaggagesVisual from '@/assets/images/ancillary-categories/baggages.png'
+import CarbonOffsetVisual from '@/assets/images/ancillary-categories/carbon-offset.png'
+import InsuranceVisual from '@/assets/images/ancillary-categories/insurance.png'
+import PetsVisual from '@/assets/images/ancillary-categories/pets.png'
+import RestrictedVisual from '@/assets/images/ancillary-categories/restricted.png'
+import SportEquipmentsVisual from '@/assets/images/ancillary-categories/sport-equipments.png'
+import { CpAncillaryCategoryTypes, isSwitchCategory } from '@/constants/CpAncillaryCategoryTypes'
+
+interface Props {
+  currency?: string
+  description: string
+  fromPrice?: number
+  fromPriceLabel?: string
+  isDefaultClosed?: boolean
+  isExpandable?: boolean
+  locale?: string
+  title: string
+  type: CpAncillaryCategoryTypes
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fromPriceLabel: 'From',
+  isDefaultClosed: false,
+  isExpandable: false,
+  locale: () => (typeof navigator === 'undefined' ? 'en' : navigator.language),
+})
+
+const checked = defineModel<boolean>('checked', { default: false })
+
+const isOpen = ref(!props.isDefaultClosed)
+
+const isSwitch = computed(() => isSwitchCategory(props.type))
+const isActuallyExpandable = computed(() => props.isExpandable && !isSwitch.value)
+
+const toggleId = useId()
+const titleId = computed(() => `${toggleId}-title`)
+const bodyId = computed(() => `${toggleId}-body`)
+
+const categoryVisuals: Partial<Record<CpAncillaryCategoryTypes, string>> = {
+  [CpAncillaryCategoryTypes.BAGGAGES]: BaggagesVisual,
+  [CpAncillaryCategoryTypes.CARBON_OFFSET]: CarbonOffsetVisual,
+  [CpAncillaryCategoryTypes.INSURANCE]: InsuranceVisual,
+  [CpAncillaryCategoryTypes.PETS]: PetsVisual,
+  [CpAncillaryCategoryTypes.RESTRICTED]: RestrictedVisual,
+  [CpAncillaryCategoryTypes.SPORT_EQUIPMENTS]: SportEquipmentsVisual,
+}
+
+const visual = computed(() => categoryVisuals[props.type] ?? null)
+
+const visualImageDynamicClass = computed(() => ({
+  'cpAncillaryCategory__visualImage--isBaggages': props.type === CpAncillaryCategoryTypes.BAGGAGES,
+}))
+
+const formattedPrice = computed(() => {
+  if (props.fromPrice === undefined || !props.currency) return null
+  return new Intl.NumberFormat(props.locale, { style: 'currency', currency: props.currency }).format(
+    props.fromPrice / 100,
+  )
+})
+
+const hasFromPrice = computed(() => formattedPrice.value !== null)
+
+const fromPriceDynamicClass = computed(() => ({ 'cpAncillaryCategory__fromPrice--isHidden': isOpen.value }))
+
+const chevronDynamicClass = computed(() => ({ 'cpAncillaryCategory__chevron--isRotated': isOpen.value }))
+
+const handleToggle = () => {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<style lang="scss">
+.cpAncillaryCategory {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  padding: var(--cp-spacing-sm);
+  border: fn.px-to-rem(1) solid var(--cp-border-soft);
+  border-radius: var(--cp-radius-xl);
+  background: var(--cp-background-primary);
+  box-shadow: var(--cp-shadows-xs);
+  gap: var(--cp-spacing-sm);
+
+  &__header {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding: var(--cp-spacing-lg);
+    border-radius: var(--cp-radius-lg);
+    gap: var(--cp-spacing-lg);
+  }
+
+  &__trailing {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 var(--cp-spacing-xl);
+    border-radius: var(--cp-radius-lg);
+    gap: var(--cp-spacing-lg);
+  }
+
+  &__price {
+    color: var(--cp-text-accent-primary);
+    font-size: var(--cp-text-size-lg);
+    font-variant-numeric: lining-nums tabular-nums;
+    font-weight: 600;
+    line-height: var(--cp-text-lg-line-height);
+  }
+
+  &__fromPriceClip {
+    overflow: hidden;
+  }
+
+  &__fromPrice {
+    display: flex;
+    align-items: center;
+    gap: var(--cp-spacing-md);
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    transition:
+      opacity 200ms ease,
+      transform 200ms ease;
+
+    &--isHidden {
+      opacity: 0;
+      pointer-events: none;
+      transform: translate3d(0, 20px, 0);
+    }
+  }
+
+  &__fromPriceLabel {
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-lg);
+    font-variant-numeric: lining-nums tabular-nums;
+    line-height: var(--cp-text-lg-line-height);
+  }
+
+  &__fromPriceAmount {
+    color: var(--cp-text-primary);
+    font-size: var(--cp-text-size-lg);
+    font-variant-numeric: lining-nums tabular-nums;
+    font-weight: 600;
+    line-height: var(--cp-text-lg-line-height);
+  }
+
+  &__toggle {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    padding: var(--cp-spacing-xs);
+    border: 0;
+    border-radius: 50%;
+    appearance: none;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    transition: background-color 200ms ease;
+
+    @media (hover: hover) {
+      &:hover {
+        background: var(--cp-background-secondary-hover);
+      }
+    }
+
+    &:focus-visible {
+      border-radius: 50%;
+      background: var(--cp-background-secondary-hover);
+
+      @extend %u-focus-outline;
+    }
+  }
+
+  &__lead {
+    @extend %u-focus-outline;
+
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    flex: auto;
+    align-items: center;
+    gap: var(--cp-spacing-xl);
+    text-align: left;
+  }
+
+  &__visual {
+    display: flex;
+    width: fn.px-to-rem(96);
+    height: fn.px-to-rem(96);
+    flex: none;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__visualImage {
+    width: fn.px-to-rem(72);
+    height: fn.px-to-rem(72);
+    object-fit: contain;
+
+    &--isBaggages {
+      width: fn.px-to-rem(84);
+      height: fn.px-to-rem(84);
+    }
+  }
+
+  &__fallbackIcon {
+    color: var(--cp-text-tertiary);
+  }
+
+  &__texts {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+  }
+
+  &__title {
+    color: var(--cp-text-accent-primary);
+    font-size: var(--cp-text-size-xl);
+    font-weight: 600;
+    line-height: var(--cp-text-xl-line-height);
+  }
+
+  &__description {
+    color: var(--cp-text-primary);
+    font-size: var(--cp-text-size-md);
+    line-height: var(--cp-text-md-line-height);
+  }
+
+  &__chevron {
+    flex: none;
+    color: var(--cp-text-accent-primary);
+    transition: rotate 300ms ease;
+
+    &--isRotated {
+      rotate: 180deg;
+    }
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    padding: var(--cp-spacing-lg);
+    border-radius: var(--cp-radius-lg);
+    background: var(--cp-background-primary);
+    gap: var(--cp-spacing-lg);
+  }
+}
+</style>

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>