@citizenplane/pimp 18.23.6 → 18.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.23.6",
+  "version": "18.25.0",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -75,6 +75,7 @@
     "@vitest/coverage-v8": "4.1.9",
     "@vue/test-utils": "2.4.11",
     "commitlint-config-gitmoji": "2.3.1",
+    "flag-icons": "7.5.0",
     "happy-dom": "20.14.5",
     "husky": "9.1.7",
     "lint-staged": "17.2.0",

package/src/components/CpAncillaryCategory.vue

@@ -65,13 +65,13 @@ 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 NameChangeVisual from '@/assets/images/ancillary-categories/name-change.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 BaggagesVisual from '@/assets/illustrations/baggages.webp'
+import CarbonOffsetVisual from '@/assets/illustrations/carbon-offset.png'
+import InsuranceVisual from '@/assets/illustrations/insurance.png'
+import NameChangeVisual from '@/assets/illustrations/name-change.png'
+import PetsVisual from '@/assets/illustrations/pets.webp'
+import RestrictedVisual from '@/assets/illustrations/restricted.png'
+import SportEquipmentsVisual from '@/assets/illustrations/sport-equipments.webp'
 import { CpAncillaryCategoryTypes, isSwitchCategory } from '@/constants/CpAncillaryCategoryTypes'
 
 interface Props {

package/src/components/CpAncillaryItem.vue

@@ -51,31 +51,30 @@ import CpButton from '@/components/CpButton.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 AirportTransferImage from '@/assets/illustrations/airport-transfer.png'
+import BicycleImage from '@/assets/illustrations/bicycle.png'
+import CabinBagImage from '@/assets/illustrations/cabin-bag.png'
+import CheckedBagImage from '@/assets/illustrations/checked-bag.png'
+import CheckedBagSize1Image from '@/assets/illustrations/checked-bag-size-1.png'
+import CheckedBagSize3Image from '@/assets/illustrations/checked-bag-size-3.png'
+import ConnectivityImage from '@/assets/illustrations/connectivity.png'
+import DivingSetImage from '@/assets/illustrations/diving-set.png'
+import ExtraWeightImage from '@/assets/illustrations/extra-weight.png'
+import FastTrackImage from '@/assets/illustrations/fast-track.png'
+import FirearmImage from '@/assets/illustrations/firearm.png'
+import FishingRodImage from '@/assets/illustrations/fishing-rod.png'
+import GolfImage from '@/assets/illustrations/golf.png'
+import HandBagImage from '@/assets/illustrations/hand-bag.png'
+import KiteSurfImage from '@/assets/illustrations/kite-surf.png'
+import LoungeAccessImage from '@/assets/illustrations/lounge-access.png'
+import MeetAndGreetImage from '@/assets/illustrations/meet-and-greet.png'
+import MusicImage from '@/assets/illustrations/music.png'
+import OversizedImage from '@/assets/illustrations/oversized.png'
+import PetInCabinImage from '@/assets/illustrations/pet-in-cabin.png'
+import PetInHoldImage from '@/assets/illustrations/pet-in-hold.png'
+import SkisImage from '@/assets/illustrations/skis.png'
+import SpecialMealImage from '@/assets/illustrations/special-meal.png'
+import StandardMealImage from '@/assets/illustrations/standard-meal.png'
 import { CpAncillaryItemTypes } from '@/constants/CpAncillaryItemTypes'
 
 interface Props {
@@ -114,7 +113,7 @@ const ancillaryImages: Partial<Record<CpAncillaryItemTypes, string>> = {
   [CpAncillaryItemTypes.CABIN_BAG]: CabinBagImage,
   [CpAncillaryItemTypes.CHECKED_BAG]: CheckedBagImage,
   [CpAncillaryItemTypes.CHECKED_BAG_SIZE_1]: CheckedBagSize1Image,
-  [CpAncillaryItemTypes.CHECKED_BAG_SIZE_2]: CheckedBagSize2Image,
+  [CpAncillaryItemTypes.CHECKED_BAG_SIZE_2]: CheckedBagImage,
   [CpAncillaryItemTypes.CHECKED_BAG_SIZE_3]: CheckedBagSize3Image,
   [CpAncillaryItemTypes.CONNECTIVITY]: ConnectivityImage,
   [CpAncillaryItemTypes.DIVING_SET]: DivingSetImage,

package/src/components/CpDynamicMenu.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="cpDynamicMenu">
+    <cp-menu v-if="!isMobile" ref="menuRef" v-bind="menuProps" @hide="onMenuHide" @show="onMenuShow">
+      <template #trigger>
+        <slot name="trigger" />
+      </template>
+      <slot />
+    </cp-menu>
+    <template v-else>
+      <div
+        ref="triggerRef"
+        :aria-controls="menuId"
+        :aria-expanded="isSheetVisible"
+        :aria-haspopup="popupType"
+        class="cpDynamicMenu__trigger"
+        @click="toggleSheet"
+      >
+        <slot name="trigger" />
+      </div>
+      <cp-bottom-sheet v-model="isSheetVisible" v-bind="bottomSheetProps">
+        <template v-if="hasSheetTitle" #header>
+          <slot name="sheet-title">
+            <cp-heading class="cpDynamicMenu__sheetTitle" heading-level="h3">{{ sheetTitle }}</cp-heading>
+          </slot>
+        </template>
+        <cp-menu-list v-if="hasItems" :id="menuId" :items="items" @async-complete="onItemClick" @click="onItemClick" />
+        <slot v-else />
+        <template #footer>
+          <slot name="footer" />
+        </template>
+      </cp-bottom-sheet>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MenuItem } from 'primevue/menuitem'
+import { computed, ref, useId, useSlots, useTemplateRef, watch } from 'vue'
+
+import type { CpMenuPlacement } from '@/components/CpMenu.vue'
+
+import { useIsBreakpoint } from '@/composables/useIsBreakpoint'
+
+import CpBottomSheet from '@/components/CpBottomSheet.vue'
+import CpHeading from '@/components/CpHeading.vue'
+import CpMenu from '@/components/CpMenu.vue'
+import CpMenuList from '@/components/CpMenuList.vue'
+
+import { Breakpoints } from '@/constants/layout'
+import { getKeyboardFocusableElements } from '@/helpers/dom'
+
+interface Props {
+  animationDuration?: number
+  breakpoint?: number
+  class?: string
+  contentClass?: string
+  expandOnContentDrag?: boolean
+  halfAndExpand?: boolean
+  items?: MenuItem[]
+  keepOpenOnClick?: boolean
+  placement?: CpMenuPlacement
+  preventClose?: boolean
+  sheetTitle?: string
+  snapPoints?: Array<number | `${number}%`>
+  swipeCloseThreshold?: string
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<{
+  hide: []
+  show: []
+}>()
+
+const slots = useSlots()
+
+const isMobile = useIsBreakpoint(props.breakpoint ?? Breakpoints.MOBILE)
+
+const menuRef = useTemplateRef('menuRef')
+const triggerRef = useTemplateRef<HTMLElement>('triggerRef')
+
+const isMenuOpen = ref(false)
+const isSheetVisible = ref(false)
+const menuId = useId()
+
+const hasItems = computed(() => Boolean(props.items?.length))
+const hasSheetTitle = computed(() => Boolean(props.sheetTitle || slots['sheet-title']))
+
+const popupType = computed(() => {
+  if (hasItems.value) return 'menu'
+  return 'dialog'
+})
+
+const menuProps = computed(() => ({
+  class: props.class,
+  forcePopover: true,
+  items: props.items,
+  keepOpenOnClick: props.keepOpenOnClick,
+  placement: props.placement,
+}))
+
+const sheetContentClass = computed(() => {
+  if (!hasItems.value) return props.contentClass
+  if (!props.contentClass) return 'cpDynamicMenu__menuListContent'
+  return `cpDynamicMenu__menuListContent ${props.contentClass}`
+})
+
+const sheetBaseClass = computed(() => {
+  if (hasSheetTitle.value) return 'cpDynamicMenu__sheet'
+  return 'cpDynamicMenu__sheet cpDynamicMenu__sheet--hasNoTitle'
+})
+
+const sheetClass = computed(() => {
+  if (!props.class) return sheetBaseClass.value
+  return `${sheetBaseClass.value} ${props.class}`
+})
+
+const bottomSheetProps = computed(() => ({
+  animationDuration: props.animationDuration,
+  canBackdropClose: !props.preventClose,
+  canSwipeClose: !props.preventClose,
+  class: sheetClass.value,
+  contentClass: sheetContentClass.value,
+  expandOnContentDrag: props.expandOnContentDrag,
+  halfAndExpand: props.halfAndExpand,
+  preventClose: props.preventClose,
+  snapPoints: props.snapPoints,
+  swipeCloseThreshold: props.swipeCloseThreshold,
+}))
+
+const focusTrigger = () => {
+  if (!triggerRef.value) return
+  const [firstFocusableElement] = getKeyboardFocusableElements(triggerRef.value) as HTMLElement[]
+  firstFocusableElement?.focus()
+}
+
+// CpMenu emits show/hide twice when driven imperatively, so only real state changes are relayed.
+const onMenuShow = () => {
+  if (isMenuOpen.value) return
+  isMenuOpen.value = true
+  emits('show')
+}
+
+const onMenuHide = () => {
+  if (!isMenuOpen.value) return
+  isMenuOpen.value = false
+  emits('hide')
+}
+
+const toggleSheet = () => {
+  isSheetVisible.value = !isSheetVisible.value
+}
+
+const onItemClick = () => {
+  if (props.keepOpenOnClick) return
+  isSheetVisible.value = false
+}
+
+const show = (event: Event) => {
+  if (isMobile.value) {
+    isSheetVisible.value = true
+    return
+  }
+  menuRef.value?.show(event)
+}
+
+const hide = () => {
+  if (isMobile.value) {
+    isSheetVisible.value = false
+    return
+  }
+  menuRef.value?.hide()
+}
+
+const toggle = (event: Event) => {
+  if (isMobile.value) {
+    toggleSheet()
+    return
+  }
+  menuRef.value?.toggle(event)
+}
+
+watch(isSheetVisible, (isVisible) => {
+  if (isVisible) {
+    emits('show')
+    return
+  }
+  emits('hide')
+  focusTrigger()
+})
+
+watch(isMobile, (isMobileViewport) => {
+  if (!isMobileViewport) {
+    isSheetVisible.value = false
+    return
+  }
+  if (isMenuOpen.value) menuRef.value?.hide()
+})
+
+defineExpose({ show, hide, toggle })
+</script>
+
+<style lang="scss">
+.cpDynamicMenu {
+  display: contents;
+
+  &__trigger {
+    display: inline-flex;
+    cursor: pointer;
+  }
+
+  &__sheetTitle {
+    font-size: var(--cp-text-size-2xl);
+    font-weight: 700;
+    line-height: var(--cp-line-height-2xl);
+  }
+
+  &__menuListContent.cpBottomSheet__content {
+    padding: var(--cp-spacing-sm) 0;
+  }
+
+  &__sheet--hasNoTitle .cpBottomSheet__header {
+    padding-bottom: 0;
+  }
+}
+</style>

package/src/components/CpIllustration.vue

@@ -0,0 +1,44 @@
+<template>
+  <img
+    alt=""
+    aria-hidden="true"
+    class="cpIllustration"
+    :class="nameClass"
+    :height="size"
+    :src="source"
+    :width="size"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { type CpIllustrationName, CpIllustrations } from '@/constants'
+
+export interface Props {
+  name: string
+  size?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+})
+
+const resolvedName = computed<CpIllustrationName>(() => {
+  const name = props.name as CpIllustrationName
+
+  if (!CpIllustrations[name]) return 'generic'
+
+  return name
+})
+
+const source = computed(() => CpIllustrations[resolvedName.value])
+
+const nameClass = computed(() => `cpIllustration--${resolvedName.value}`)
+</script>
+
+<style lang="scss">
+.cpIllustration {
+  object-fit: contain;
+}
+</style>

package/src/components/CpLanguageSwitcher.vue

@@ -0,0 +1,151 @@
+<template>
+  <cp-dynamic-menu
+    ref="dynamicMenuRef"
+    :breakpoint="breakpoint"
+    :class="props.class"
+    content-class="cpLanguageSwitcher__content"
+    :placement="placement"
+  >
+    <template #trigger>
+      <slot name="trigger">
+        <cp-button appearance="tertiary" color="accent" size="sm">
+          <template #leading-icon>
+            <cp-icon type="globe" />
+          </template>
+          {{ uppercasedCurrentCode }}
+        </cp-button>
+      </slot>
+    </template>
+    <ul class="cpLanguageSwitcher__list">
+      <li v-for="lang in langs" :key="lang.code">
+        <button
+          :aria-current="getAriaCurrent(lang.code)"
+          class="cpLanguageSwitcher__lang"
+          :class="getLangClass(lang.code)"
+          type="button"
+          @click="selectLanguage(lang.code)"
+        >
+          <span class="cpLanguageSwitcher__left">
+            <span v-if="lang.flag" class="cpLanguageSwitcher__flag" :class="getFlagClass(lang.flag)" />
+            <span class="cpLanguageSwitcher__name">{{ lang.name }}</span>
+          </span>
+          <cp-icon v-if="isCurrentLanguage(lang.code)" class="cpLanguageSwitcher__check" size="20" type="check" />
+        </button>
+      </li>
+    </ul>
+  </cp-dynamic-menu>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue'
+
+import type { CpMenuPlacement } from '@/components/CpMenu.vue'
+
+import CpButton from '@/components/CpButton.vue'
+import CpDynamicMenu from '@/components/CpDynamicMenu.vue'
+import CpIcon from '@/components/CpIcon.vue'
+
+export interface LanguageOption {
+  code: string
+  flag?: string
+  name: string
+}
+
+interface Props {
+  breakpoint?: number
+  class?: string
+  langs: LanguageOption[]
+  placement?: CpMenuPlacement
+}
+
+const props = defineProps<Props>()
+
+const currentCode = defineModel<string>()
+
+const dynamicMenuRef = useTemplateRef('dynamicMenuRef')
+
+const uppercasedCurrentCode = computed(() => {
+  if (!currentCode.value) return ''
+  return currentCode.value.toUpperCase()
+})
+
+const isCurrentLanguage = (code: string) => code === currentCode.value
+
+const getLangClass = (code: string) => ({ 'cpLanguageSwitcher__lang--isSelected': isCurrentLanguage(code) })
+
+// flag-icons is a devDependency only: the consumer app loads flag-icons.min.css itself.
+const getFlagClass = (flag: string) => `fi fi-${flag.toLowerCase()}`
+
+const getAriaCurrent = (code: string) => {
+  if (!isCurrentLanguage(code)) return undefined
+  return 'true'
+}
+
+const selectLanguage = (code: string) => {
+  if (!isCurrentLanguage(code)) currentCode.value = code
+  dynamicMenuRef.value?.hide()
+}
+</script>
+
+<style lang="scss">
+.cpLanguageSwitcher {
+  &__content.cpBottomSheet__content {
+    padding: var(--cp-spacing-sm) 0;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    padding: 0 var(--cp-spacing-sm);
+    margin: 0;
+    gap: var(--cp-spacing-sm);
+    list-style: none;
+  }
+
+  &__lang {
+    @extend %u-focus-outline;
+
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--cp-spacing-lg) var(--cp-spacing-xl) var(--cp-spacing-lg) var(--cp-spacing-lg);
+    border: none;
+    border-radius: var(--cp-radius-md);
+    background-color: transparent;
+    color: var(--cp-text-primary);
+    cursor: pointer;
+    gap: var(--cp-spacing-md);
+
+    &:hover {
+      background-color: var(--cp-background-primary-hover);
+    }
+
+    &--isSelected {
+      background-color: var(--cp-background-accent-primary);
+    }
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: var(--cp-spacing-lg);
+  }
+
+  &__flag {
+    flex: none;
+    border-radius: var(--cp-radius-sm);
+  }
+
+  &__name {
+    font-size: var(--cp-text-size-md);
+    font-weight: 500;
+    line-height: var(--cp-line-height-md);
+  }
+
+  &__check {
+    flex: none;
+    color: var(--cp-text-accent-primary);
+  }
+}
+</style>

package/src/components/index.ts

@@ -36,11 +36,14 @@ import CpDate from './CpDate.vue'
 import CpDatepicker from './CpDatepicker.vue'
 import CpDialog from './CpDialog.vue'
 import CpDynamicDialog from './CpDynamicDialog.vue'
+import CpDynamicMenu from './CpDynamicMenu.vue'
 import CpFlightTabs from './CpFlightTabs.vue'
 import CpHeading from './CpHeading.vue'
 import CpIcon from './CpIcon.vue'
+import CpIllustration from './CpIllustration.vue'
 import CpInput from './CpInput.vue'
 import CpItemActions from './CpItemActions.vue'
+import CpLanguageSwitcher from './CpLanguageSwitcher.vue'
 import CpLoader from './CpLoader.vue'
 import CpMenu from './CpMenu.vue'
 import CpMenuItem from './CpMenuItem.vue'
@@ -111,11 +114,13 @@ const Components = {
   CpButtonGroup,
   CpDialog,
   CpDynamicDialog,
+  CpDynamicMenu,
   CpDate,
   CpContextualMenu,
   CpMenu,
   CpMenuItem,
   CpMenuList,
+  CpLanguageSwitcher,
   CpItemActions,
   CpCoreDatepicker,
   CpDatepicker,
@@ -146,6 +151,7 @@ const Components = {
   CpTable,
   CpTableColumnEditor,
   CpIcon,
+  CpIllustration,
   CpTelInput,
   CpTooltip,
   CpTextMorph,
@@ -201,9 +207,11 @@ const Pimp: Plugin = {
   },
 }
 
+export type { LanguageOption } from '@/components/CpLanguageSwitcher.vue'
 export type { CpAncillaryFlightSelectionFlight } from '@/constants/CpAncillaryFlightSelectionTypes'
 export type { CpBasketCategory, CpBasketGroup, CpBasketRow } from '@/constants/CpBasketTypes'
 export type { CpFlightTabsFlight } from '@/constants/CpFlightTabsTypes'
+export type { CpIllustrationName } from '@/constants/CpIllustrations'
 export type { CpStepperStep } from '@/constants/CpStepperTypes'
 export type {
   CpSeatMapConfig,
@@ -228,6 +236,7 @@ export type {
 
 export { CpAncillaryCategoryTypes, isSwitchCategory } from '@/constants/CpAncillaryCategoryTypes'
 export { CpAncillaryItemTypes } from '@/constants/CpAncillaryItemTypes'
+export { CpIllustrationNames, CpIllustrations } from '@/constants/CpIllustrations'
 export {
   CpSeatMapTransitionDirections,
   DEFAULT_CP_SEAT_MAP_CONFIG,
@@ -262,11 +271,14 @@ export {
   CpDatepicker,
   CpDialog,
   CpDynamicDialog,
+  CpDynamicMenu,
   CpFlightTabs,
   CpHeading,
   CpIcon,
+  CpIllustration,
   CpInput,
   CpItemActions,
+  CpLanguageSwitcher,
   CpLoader,
   CpMenu,
   CpMenuItem,