@citizenplane/pimp 18.18.0 → 18.19.1

package/package.json

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

package/src/components/CpAncillaryCategory.vue

@@ -0,0 +1,310 @@
+<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);
+  }
+}
+</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 CpAncillaryCategory from './CpAncillaryCategory.vue'
 import CpAncillaryItem from './CpAncillaryItem.vue'
 import CpBadge from './CpBadge.vue'
 import CpBottomSheet from './CpBottomSheet.vue'
@@ -115,6 +116,7 @@ const Components = {
   CpRadioNew,
   CpCalendar,
   CpAlert,
+  CpAncillaryCategory,
   CpAncillaryItem,
   CpLoader,
   CpInput,
@@ -209,6 +211,7 @@ export type {
   FlightTerminal,
 } from '@/constants/tripDetails'
 
+export { CpAncillaryCategoryTypes, isSwitchCategory } from '@/constants/CpAncillaryCategoryTypes'
 export { CpAncillaryItemTypes } from '@/constants/CpAncillaryItemTypes'
 export {
   CpSeatMapTransitionDirections,
@@ -227,6 +230,7 @@ export {
   CpAccordionGroup,
   CpAirlineLogo,
   CpAlert,
+  CpAncillaryCategory,
   CpAncillaryItem,
   CpBadge,
   CpBottomSheet,

package/src/constants/CpAncillaryCategoryTypes.ts

@@ -0,0 +1,14 @@
+export enum CpAncillaryCategoryTypes {
+  AIRPORT_SERVICES = 'airportServices',
+  BAGGAGES = 'baggages',
+  CARBON_OFFSET = 'carbonOffset',
+  INSURANCE = 'insurance',
+  ON_BOARD = 'onBoard',
+  PETS = 'pets',
+  RESTRICTED = 'restricted',
+  SPORT_EQUIPMENTS = 'sportEquipments',
+}
+
+const SWITCH_CATEGORY_TYPES = new Set<CpAncillaryCategoryTypes>([CpAncillaryCategoryTypes.CARBON_OFFSET])
+
+export const isSwitchCategory = (type: CpAncillaryCategoryTypes): boolean => SWITCH_CATEGORY_TYPES.has(type)

package/src/stories/CpAncillaryCategory.stories.ts

@@ -0,0 +1,263 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import CpAncillaryCategory from '@/components/CpAncillaryCategory.vue'
+import CpAncillaryItem from '@/components/CpAncillaryItem.vue'
+
+import { CpAncillaryCategoryTypes } from '@/constants/CpAncillaryCategoryTypes'
+import { docLabelStyle } from '@/stories/documentationStyles'
+
+const cardGridStyle = 'display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;'
+const galleryListStyle = 'display: flex; flex-direction: column; gap: 24px; width: 100%;'
+const galleryRowStyle = 'display: flex; flex-direction: column; gap: 10px; width: 100%;'
+
+const meta = {
+  title: 'Business/CpAncillaryCategory',
+  component: CpAncillaryCategory,
+  argTypes: {
+    currency: {
+      control: 'text',
+      description: 'ISO currency code used to format the from price',
+    },
+    description: {
+      control: 'text',
+      description: 'Description text for the category',
+    },
+    fromPrice: {
+      control: 'number',
+      description: 'From price in minor units (cents), shown when isExpandable is set',
+    },
+    fromPriceLabel: {
+      control: 'text',
+      description: 'Caption shown before the from price amount',
+    },
+    isDefaultClosed: {
+      control: 'boolean',
+      description: 'Whether an expandable category starts closed',
+    },
+    isExpandable: {
+      control: 'boolean',
+      description: 'Whether the header gets a from-price + chevron toggle collapsing the body',
+    },
+    locale: {
+      control: 'text',
+      description: 'Locale used to format the from price, defaults to the browser locale',
+    },
+    title: {
+      control: 'text',
+      description: 'Title of the category',
+    },
+    type: {
+      control: 'select',
+      options: Object.values(CpAncillaryCategoryTypes),
+      description: 'Picks the visual and, for switch categories, the trailing control',
+    },
+  },
+} satisfies Meta<typeof CpAncillaryCategory>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Expandable category with a from-price. Use the controls to experiment with
+ * each prop in isolation.
+ */
+export const Default: Story = {
+  args: {
+    title: 'Baggages',
+    description: 'Check in your bags for the flight',
+    type: CpAncillaryCategoryTypes.BAGGAGES,
+    isExpandable: true,
+    fromPrice: 2990,
+    fromPriceLabel: 'From',
+    currency: 'EUR',
+  },
+  render: (args) => ({
+    components: { CpAncillaryCategory, CpAncillaryItem },
+    setup() {
+      const quantities = ref({ checkedBag: 0, cabinBag: 0, handBag: 0 })
+      return { args, cardGridStyle, quantities }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryCategory v-bind="args">
+          <div :style="cardGridStyle">
+            <CpAncillaryItem
+              v-model:quantity="quantities.checkedBag"
+              title="Checked bag"
+              description="23kg included"
+              type="checkedBag"
+              :max-quantity="3"
+              max-quantity-label="max. 3"
+              :price="2990"
+              currency="EUR"
+            />
+            <CpAncillaryItem
+              v-model:quantity="quantities.cabinBag"
+              title="Cabin bag"
+              description="10kg included"
+              type="cabinBag"
+              :max-quantity="1"
+              max-quantity-label="max. 1"
+              :price="1990"
+              currency="EUR"
+            />
+            <CpAncillaryItem
+              v-model:quantity="quantities.handBag"
+              title="Hand bag"
+              description="Personal item"
+              type="handBag"
+              :max-quantity="1"
+              max-quantity-label="max. 1"
+              :price="990"
+              currency="EUR"
+            />
+          </div>
+        </CpAncillaryCategory>
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* States                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * isDefaultClosed starts the expandable category collapsed.
+ */
+export const Collapsed: Story = {
+  args: {
+    ...Default.args,
+    isDefaultClosed: true,
+  },
+  render: (args) => ({
+    components: { CpAncillaryCategory, CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, cardGridStyle, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryCategory v-bind="args">
+          <div :style="cardGridStyle">
+            <CpAncillaryItem
+              v-model:quantity="quantity"
+              title="Checked bag"
+              description="23kg included"
+              type="checkedBag"
+              :max-quantity="3"
+              max-quantity-label="max. 3"
+              :price="2990"
+              currency="EUR"
+            />
+          </div>
+        </CpAncillaryCategory>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * isExpandable false: no from-price, no chevron, the body is always rendered.
+ */
+export const NotExpandable: Story = {
+  args: {
+    title: 'Insurance',
+    description: 'Protect your trip against the unexpected',
+    type: CpAncillaryCategoryTypes.INSURANCE,
+    isExpandable: false,
+  },
+  render: (args) => ({
+    components: { CpAncillaryCategory, CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, cardGridStyle, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryCategory v-bind="args">
+          <div :style="cardGridStyle">
+            <CpAncillaryItem
+              v-model:quantity="quantity"
+              title="Cancellation insurance"
+              description="Refund protection for your trip"
+              type="cancellationInsurance"
+              :max-quantity="1"
+              max-quantity-label="max. 1"
+              :price="1490"
+              currency="EUR"
+            />
+          </div>
+        </CpAncillaryCategory>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Switch categories (carbonOffset today) show a formatted price and a switch
+ * instead of a chevron, and are never expandable.
+ */
+export const Switch: Story = {
+  args: {
+    title: 'Carbon offset',
+    description: 'Compensate the CO2 emissions of your flight',
+    type: CpAncillaryCategoryTypes.CARBON_OFFSET,
+    fromPrice: 490,
+    currency: 'EUR',
+  },
+  render: (args) => ({
+    components: { CpAncillaryCategory },
+    setup() {
+      const checked = ref(false)
+      return { args, checked }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryCategory v-bind="args" v-model:checked="checked" />
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* Gallery                                                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Every enum value's header: each real visual, and the fallback icon for the
+ * two art-less types.
+ */
+export const Gallery: Story = {
+  args: {
+    ...Default.args,
+  },
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpAncillaryCategory },
+    setup() {
+      const types = Object.values(CpAncillaryCategoryTypes)
+      const checkedStates = ref(Object.fromEntries(types.map((type) => [type, false])))
+      return { types, checkedStates, galleryListStyle, galleryRowStyle, docLabelStyle }
+    },
+    template: `
+      <div :style="galleryListStyle">
+        <div v-for="type in types" :key="type" :style="galleryRowStyle">
+          <span :style="docLabelStyle">{{ type }}</span>
+          <CpAncillaryCategory
+            v-model:checked="checkedStates[type]"
+            :title="type"
+            description="Sample description"
+            :type="type"
+            is-expandable
+            :from-price="1000"
+            currency="EUR"
+          >
+            <span :style="docLabelStyle">Body content</span>
+          </CpAncillaryCategory>
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpAncillaryItem.stories.ts

@@ -9,7 +9,7 @@ import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/document
 const galleryCellStyle = `${docCellStyle} width: 260px;`
 
 const meta = {
-  title: 'Atoms/CpAncillaryItem',
+  title: 'Business/CpAncillaryItem',
   component: CpAncillaryItem,
   argTypes: {
     currency: {