@citizenplane/pimp 18.23.6 → 18.24.0

package/package.json

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

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/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/index.ts

@@ -39,6 +39,7 @@ import CpDynamicDialog from './CpDynamicDialog.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 CpLoader from './CpLoader.vue'
@@ -146,6 +147,7 @@ const Components = {
   CpTable,
   CpTableColumnEditor,
   CpIcon,
+  CpIllustration,
   CpTelInput,
   CpTooltip,
   CpTextMorph,
@@ -204,6 +206,7 @@ const Pimp: Plugin = {
 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 +231,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,
@@ -265,6 +269,7 @@ export {
   CpFlightTabs,
   CpHeading,
   CpIcon,
+  CpIllustration,
   CpInput,
   CpItemActions,
   CpLoader,

package/src/constants/CpIllustrations.ts

@@ -0,0 +1,107 @@
+import AccessibilityIllustration from '@/assets/illustrations/accessibility.webp'
+import AirplaneSeatIllustration from '@/assets/illustrations/airplane-seat.webp'
+import AirportExperienceIllustration from '@/assets/illustrations/airport-experience.png'
+import AirportTransferIllustration from '@/assets/illustrations/airport-transfer.png'
+import BaggagesIllustration from '@/assets/illustrations/baggages.webp'
+import BicycleIllustration from '@/assets/illustrations/bicycle.png'
+import BoardingPassIllustration from '@/assets/illustrations/boarding-pass.webp'
+import BoardingPass2Illustration from '@/assets/illustrations/boarding-pass-2.webp'
+import Boeing787DreamlinerIllustration from '@/assets/illustrations/boeing-787-dreamliner.webp'
+import CabinBagIllustration from '@/assets/illustrations/cabin-bag.png'
+import CarbonOffsetIllustration from '@/assets/illustrations/carbon-offset.png'
+import CheckedBagIllustration from '@/assets/illustrations/checked-bag.png'
+import CheckedBagSize1Illustration from '@/assets/illustrations/checked-bag-size-1.png'
+import CheckedBagSize3Illustration from '@/assets/illustrations/checked-bag-size-3.png'
+import CheckoutIllustration from '@/assets/illustrations/checkout.webp'
+import ClockIllustration from '@/assets/illustrations/clock.png'
+import ConnectivityIllustration from '@/assets/illustrations/connectivity.png'
+import DivingSetIllustration from '@/assets/illustrations/diving-set.png'
+import EmptyBasketIllustration from '@/assets/illustrations/empty-basket.png'
+import EmptyResultIllustration from '@/assets/illustrations/empty-result.webp'
+import ExtraWeightIllustration from '@/assets/illustrations/extra-weight.png'
+import FastTrackIllustration from '@/assets/illustrations/fast-track.png'
+import FirearmIllustration from '@/assets/illustrations/firearm.png'
+import FishingRodIllustration from '@/assets/illustrations/fishing-rod.png'
+import FlipClockIllustration from '@/assets/illustrations/flip-clock.webp'
+import FrequentFlyerIllustration from '@/assets/illustrations/frequent-flyer.webp'
+import GenericIllustration from '@/assets/illustrations/generic.webp'
+import GolfIllustration from '@/assets/illustrations/golf.png'
+import HandBagIllustration from '@/assets/illustrations/hand-bag.png'
+import InsuranceIllustration from '@/assets/illustrations/insurance.png'
+import IslandIllustration from '@/assets/illustrations/island.webp'
+import KiteSurfIllustration from '@/assets/illustrations/kite-surf.png'
+import LoungeAccessIllustration from '@/assets/illustrations/lounge-access.png'
+import MeetAndGreetIllustration from '@/assets/illustrations/meet-and-greet.png'
+import MilesIllustration from '@/assets/illustrations/miles.webp'
+import MusicIllustration from '@/assets/illustrations/music.png'
+import NameChangeIllustration from '@/assets/illustrations/name-change.png'
+import OversizedIllustration from '@/assets/illustrations/oversized.png'
+import PassportIllustration from '@/assets/illustrations/passport.webp'
+import PaymentDeclinedIllustration from '@/assets/illustrations/payment-declined.png'
+import PetInCabinIllustration from '@/assets/illustrations/pet-in-cabin.png'
+import PetInHoldIllustration from '@/assets/illustrations/pet-in-hold.png'
+import PetsIllustration from '@/assets/illustrations/pets.webp'
+import PlaneIllustration from '@/assets/illustrations/plane.webp'
+import RestrictedIllustration from '@/assets/illustrations/restricted.png'
+import SignOutIllustration from '@/assets/illustrations/sign-out.png'
+import SkisIllustration from '@/assets/illustrations/skis.png'
+import SpecialMealIllustration from '@/assets/illustrations/special-meal.png'
+import SportEquipmentsIllustration from '@/assets/illustrations/sport-equipments.webp'
+import StandardMealIllustration from '@/assets/illustrations/standard-meal.png'
+
+export const CpIllustrations = {
+  accessibility: AccessibilityIllustration,
+  'airplane-seat': AirplaneSeatIllustration,
+  'airport-experience': AirportExperienceIllustration,
+  'airport-transfer': AirportTransferIllustration,
+  baggages: BaggagesIllustration,
+  bicycle: BicycleIllustration,
+  'boarding-pass-2': BoardingPass2Illustration,
+  'boarding-pass': BoardingPassIllustration,
+  'boeing-787-dreamliner': Boeing787DreamlinerIllustration,
+  'cabin-bag': CabinBagIllustration,
+  'carbon-offset': CarbonOffsetIllustration,
+  'checked-bag-size-1': CheckedBagSize1Illustration,
+  'checked-bag-size-3': CheckedBagSize3Illustration,
+  'checked-bag': CheckedBagIllustration,
+  checkout: CheckoutIllustration,
+  clock: ClockIllustration,
+  connectivity: ConnectivityIllustration,
+  'diving-set': DivingSetIllustration,
+  'empty-basket': EmptyBasketIllustration,
+  'empty-result': EmptyResultIllustration,
+  'extra-weight': ExtraWeightIllustration,
+  'fast-track': FastTrackIllustration,
+  firearm: FirearmIllustration,
+  'fishing-rod': FishingRodIllustration,
+  'flip-clock': FlipClockIllustration,
+  'frequent-flyer': FrequentFlyerIllustration,
+  generic: GenericIllustration,
+  golf: GolfIllustration,
+  'hand-bag': HandBagIllustration,
+  insurance: InsuranceIllustration,
+  island: IslandIllustration,
+  'kite-surf': KiteSurfIllustration,
+  'lounge-access': LoungeAccessIllustration,
+  'meet-and-greet': MeetAndGreetIllustration,
+  miles: MilesIllustration,
+  music: MusicIllustration,
+  'name-change': NameChangeIllustration,
+  oversized: OversizedIllustration,
+  passport: PassportIllustration,
+  'payment-declined': PaymentDeclinedIllustration,
+  'pet-in-cabin': PetInCabinIllustration,
+  'pet-in-hold': PetInHoldIllustration,
+  pets: PetsIllustration,
+  plane: PlaneIllustration,
+  restricted: RestrictedIllustration,
+  'sign-out': SignOutIllustration,
+  skis: SkisIllustration,
+  'special-meal': SpecialMealIllustration,
+  'sport-equipments': SportEquipmentsIllustration,
+  'standard-meal': StandardMealIllustration,
+} as const
+
+export type CpIllustrationName = keyof typeof CpIllustrations
+
+export const CpIllustrationNames = Object.keys(CpIllustrations) as CpIllustrationName[]

package/src/constants/index.ts

@@ -1,8 +1,10 @@
+export type { CpIllustrationName } from './CpIllustrations'
 export type { Colors } from './colors/Colors'
 export type { ToggleColors } from './colors/ToggleColors'
 export type { Sizes } from './Sizes'
 
 export { CustomCpIcons } from './CpCustomIcons'
+export { CpIllustrationNames, CpIllustrations } from './CpIllustrations'
 export { RESERVED_KEYS, VISIBLE_ROWS_MAX } from './CpTableConfig'
 export { Intent } from './Intent'
 export { Position } from './Position'

package/src/stories/CpIllustration.stories.ts

@@ -0,0 +1,129 @@
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
+
+import CpIllustration from '@/components/CpIllustration.vue'
+
+import { CpIllustrationNames } from '@/constants'
+import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'
+import { copyableClass, copyableCopiedClass, useCopier } from '@/stories/tokenUtils'
+
+const illustrationsOptions = [...CpIllustrationNames, 'unknown-illustration-name'].sort()
+
+const illustrationSizes = [24, 48, 96] as const
+
+const meta = {
+  title: 'Foundations/CpIllustration',
+  component: CpIllustration,
+  tags: ['!dev'],
+  argTypes: {
+    name: {
+      control: 'select',
+      options: illustrationsOptions,
+      description: 'Name of the illustration to display. An unknown name falls back to `generic`.',
+    },
+    size: {
+      control: 'number',
+      description: 'Size of the illustration in pixels',
+    },
+  },
+} satisfies Meta<typeof CpIllustration>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default illustration. Use the controls to experiment with each prop in isolation.
+ */
+export const Default: Story = {
+  args: {
+    name: 'generic',
+    size: 96,
+  },
+  render: (args: Args) => ({
+    components: { CpIllustration },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpIllustration v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* Sizes                                                                      */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The illustration scales freely through the `size` prop (pixel value). Below are
+ * the sizes used across the design system.
+ */
+export const Sizes: Story = {
+  args: { name: 'island' },
+  parameters: { controls: { disable: true } },
+  render: (args: Args) => ({
+    components: { CpIllustration },
+    setup() {
+      return { args, illustrationSizes, docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div v-for="size in illustrationSizes" :key="size" :style="docCellStyle">
+          <span :style="docLabelStyle">{{ size }}px</span>
+          <CpIllustration :name="args.name" :size="size" />
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* Catalog                                                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Every available illustration, at 24 / 48 / 96 px. Click a name to copy it.
+ */
+export const AllIllustrations: Story = {
+  args: { name: 'generic' },
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpIllustration },
+    setup() {
+      const { copiedKey, copy } = useCopier()
+      return {
+        illustrations: CpIllustrationNames,
+        illustrationSizes,
+        copiedKey,
+        copy,
+        copyClass: copyableClass,
+        copiedClass: copyableCopiedClass,
+      }
+    },
+    template: `
+      <div style="padding: 20px; display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 16px;">
+        <div
+          v-for="illustration in illustrations"
+          :key="illustration"
+          style="display: flex; flex-direction: column; align-items: center; border: 1px solid #eee; border-radius: 4px;"
+        >
+          <span
+            style="font-size: 12px; padding: 8px; word-break: break-word;"
+            :class="[copyClass, copiedKey === illustration ? copiedClass : '']"
+            role="button"
+            tabindex="0"
+            :title="'Click to copy ' + illustration"
+            @click="copy(illustration)"
+            @keydown.enter.prevent="copy(illustration)"
+            @keydown.space.prevent="copy(illustration)"
+          >{{ copiedKey === illustration ? 'Copied!' : illustration }}</span>
+          <hr style="width: 100%; background-color: #eee; height: 1px; border: 0;" />
+          <div style="padding: 20px; display: flex; align-items: flex-end; gap: 16px;">
+            <CpIllustration v-for="size in illustrationSizes" :key="size" :name="illustration" :size="size" />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+}