@citizenplane/pimp 18.21.2 → 18.22.0

package/package.json

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

package/src/components/CpBasket.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="cpBasket">
+    <div v-if="hasLeading" class="cpBasket__trip">
+      <slot name="leading" />
+    </div>
+
+    <cp-transition-expand>
+      <div v-if="hasSections">
+        <div class="cpBasket__details">
+          <div v-for="category in visibleCategories" :key="category.id" class="cpBasket__category">
+            <div class="cpBasket__categoryTitle">
+              <p>{{ category.label }}</p>
+              <p>{{ category.subtotal }}</p>
+            </div>
+            <div v-if="category.hasGroups" class="cpBasket__groups">
+              <cp-transition-list-items>
+                <div v-for="group in category.groups" :key="group.id" class="cpBasket__group">
+                  <p v-if="group.label" class="cpBasket__route">{{ group.label }}</p>
+                  <cp-transition-list-items>
+                    <div v-for="row in group.rows" :key="row.key" :class="group.rowClass">
+                      <span>{{ row.label }}</span>
+                      <span>{{ row.value }}</span>
+                    </div>
+                  </cp-transition-list-items>
+                </div>
+              </cp-transition-list-items>
+            </div>
+          </div>
+        </div>
+      </div>
+    </cp-transition-expand>
+
+    <div class="cpBasket__total">
+      <p>{{ totalLabel }}</p>
+      <p class="cpBasket__totalValue">{{ total }}</p>
+    </div>
+
+    <div v-if="hasTrailing" class="cpBasket__trailing">
+      <slot name="trailing" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+import type { CpBasketCategory, CpBasketRow } from '@/constants/CpBasketTypes'
+
+import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
+import CpTransitionListItems from '@/components/CpTransitionListItems.vue'
+
+interface Props {
+  hideDetailsOnCategories?: string[]
+  rows: CpBasketRow[]
+  total: string
+  totalLabel: string
+}
+
+interface ResolvedRow extends CpBasketRow {
+  key: string
+}
+
+interface ResolvedGroup {
+  id: string
+  label: string | null
+  rowClass: string
+  rows: ResolvedRow[]
+}
+
+interface ResolvedCategory {
+  groups: ResolvedGroup[]
+  hasGroups: boolean
+  id: string
+  label: string
+  subtotal: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hideDetailsOnCategories: () => [],
+})
+
+const UNGROUPED_ID = '__cpBasketUngrouped__'
+
+const slots = useSlots()
+
+const hasLeading = computed(() => !!slots.leading)
+
+const hasTrailing = computed(() => !!slots.trailing)
+
+const hideDetailsIds = computed(() => new Set(props.hideDetailsOnCategories))
+
+const dedupeById = <T extends { id: string }>(items: T[]): T[] =>
+  items.filter((item, index) => items.findIndex((other) => other.id === item.id) === index)
+
+const orderedCategories = computed<CpBasketCategory[]>(() => dedupeById(props.rows.map((row) => row.category)))
+
+const withKeys = (rows: CpBasketRow[], categoryId: string): ResolvedRow[] =>
+  rows.map((row) => ({ ...row, key: `${categoryId}-${row.group?.id ?? 'ungrouped'}-${row.label}` }))
+
+const buildResolvedGroup = (id: string, label: string | null, rows: CpBasketRow[], categoryId: string): ResolvedGroup => ({
+  id,
+  label,
+  rowClass: label ? 'cpBasket__row cpBasket__row--isIndented' : 'cpBasket__row',
+  rows: withKeys(rows, categoryId),
+})
+
+const buildResolvedCategory = (category: CpBasketCategory, categoryRows: CpBasketRow[]): ResolvedCategory => {
+  if (hideDetailsIds.value.has(category.id)) {
+    return { groups: [], hasGroups: false, id: category.id, label: category.label, subtotal: category.subtotal }
+  }
+
+  const groupsInCategory = categoryRows.flatMap((row) => (row.group ? [row.group] : []))
+  const uniqueGroups = dedupeById(groupsInCategory)
+  const labelledGroups = uniqueGroups.map((group) =>
+    buildResolvedGroup(
+      group.id,
+      group.label,
+      categoryRows.filter((row) => row.group?.id === group.id),
+      category.id,
+    ),
+  )
+
+  const ungroupedRows = categoryRows.filter((row) => row.group == null)
+  const ungroupedGroup: ResolvedGroup[] =
+    ungroupedRows.length === 0 ? [] : [buildResolvedGroup(UNGROUPED_ID, null, ungroupedRows, category.id)]
+
+  const groups = [...labelledGroups, ...ungroupedGroup]
+
+  return { groups, hasGroups: groups.length > 0, id: category.id, label: category.label, subtotal: category.subtotal }
+}
+
+const visibleCategories = computed<ResolvedCategory[]>(() =>
+  orderedCategories.value.map((category) =>
+    buildResolvedCategory(
+      category,
+      props.rows.filter((row) => row.category.id === category.id),
+    ),
+  ),
+)
+
+const hasSections = computed(() => visibleCategories.value.length > 0)
+</script>
+
+<style lang="scss">
+.cpBasket {
+  display: flex;
+  flex-direction: column;
+  padding: var(--cp-spacing-sm);
+  border-radius: var(--cp-radius-xl);
+  background: var(--cp-background-tertiary);
+  gap: var(--cp-spacing-sm);
+
+  &__trip {
+    display: flex;
+    flex-direction: column;
+    padding: var(--cp-spacing-lg);
+    gap: var(--cp-spacing-md);
+  }
+
+  &__leg {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cp-spacing-sm);
+
+    & + & {
+      padding-top: var(--cp-spacing-md);
+      border-top: fn.px-to-rem(1) solid var(--cp-border-soft);
+    }
+  }
+
+  &__legDate {
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-xs);
+    font-weight: 600;
+    line-height: var(--cp-text-xs-line-height);
+    text-transform: uppercase;
+  }
+
+  &__details {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    padding: var(--cp-spacing-md) var(--cp-spacing-lg);
+    border-radius: var(--cp-radius-lg);
+    background: var(--cp-background-secondary);
+    gap: var(--cp-spacing-sm-md);
+  }
+
+  &__category {
+    display: flex;
+    flex-direction: column;
+
+    & + & {
+      padding-top: var(--cp-spacing-sm-md);
+      border-top: fn.px-to-rem(1) solid var(--cp-border-soft);
+    }
+  }
+
+  &__categoryTitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--cp-text-primary);
+    font-size: var(--cp-text-size-md);
+    font-weight: 600;
+    line-height: var(--cp-text-md-line-height);
+    padding-block: var(--cp-spacing-sm);
+
+    & > :last-child {
+      color: var(--cp-text-secondary);
+    }
+  }
+
+  &__groups {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cp-spacing-md);
+  }
+
+  &__group {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--cp-spacing-sm);
+  }
+
+  &__route {
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-sm);
+    font-weight: 500;
+    line-height: var(--cp-text-sm-line-height);
+  }
+
+  &__row {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-sm);
+    gap: var(--cp-spacing-md);
+    line-height: var(--cp-text-sm-line-height);
+
+    &--isIndented {
+      padding-left: var(--cp-spacing-md);
+    }
+  }
+
+  &__total {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    padding: var(--cp-spacing-lg);
+    color: var(--cp-text-primary);
+    font-size: var(--cp-text-size-lg);
+    font-weight: 600;
+    line-height: var(--cp-text-lg-line-height);
+  }
+
+  &__totalValue {
+    color: var(--cp-text-accent-primary);
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__trailing {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--cp-spacing-sm);
+  }
+}
+</style>

package/src/components/index.ts

@@ -24,6 +24,7 @@ import CpAncillaryCategory from './CpAncillaryCategory.vue'
 import CpAncillaryFlightSelection from './CpAncillaryFlightSelection.vue'
 import CpAncillaryItem from './CpAncillaryItem.vue'
 import CpBadge from './CpBadge.vue'
+import CpBasket from './CpBasket.vue'
 import CpBottomSheet from './CpBottomSheet.vue'
 import CpButton from './CpButton.vue'
 import CpButtonGroup from './CpButtonGroup.vue'
@@ -123,6 +124,7 @@ const Components = {
   CpAncillaryCategory,
   CpAncillaryFlightSelection,
   CpAncillaryItem,
+  CpBasket,
   CpLoader,
   CpInput,
   CpText,
@@ -198,6 +200,7 @@ const Pimp: Plugin = {
 }
 
 export type { CpAncillaryFlightSelectionFlight } from '@/constants/CpAncillaryFlightSelectionTypes'
+export type { CpBasketCategory, CpBasketGroup, CpBasketRow } from '@/constants/CpBasketTypes'
 export type { CpStepperStep } from '@/constants/CpStepperTypes'
 export type {
   CpSeatMapConfig,
@@ -243,6 +246,7 @@ export {
   CpAncillaryFlightSelection,
   CpAncillaryItem,
   CpBadge,
+  CpBasket,
   CpBottomSheet,
   CpButton,
   CpButtonGroup,

package/src/constants/CpBasketTypes.ts

@@ -0,0 +1,17 @@
+export interface CpBasketCategory {
+  id: string
+  label: string
+  subtotal: string
+}
+
+export interface CpBasketGroup {
+  id: string
+  label: string
+}
+
+export interface CpBasketRow {
+  category: CpBasketCategory
+  group?: CpBasketGroup | null
+  label: string
+  value: string
+}

package/src/stories/CpBasket.stories.ts

@@ -0,0 +1,323 @@
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import type { CpBasketRow } from '@/constants/CpBasketTypes'
+
+import CpBasket from '@/components/CpBasket.vue'
+import CpButton from '@/components/CpButton.vue'
+import CpIcon from '@/components/CpIcon.vue'
+import CpTrip from '@/components/CpTrip.vue'
+
+const outboundTrip = {
+  arrivalDate: {
+    formatted: 'Tue, 10 Jun 2026',
+    raw: '2026-06-10',
+  },
+  arrivalTime: '10:20',
+  labels: {
+    nonStop: 'Direct',
+  },
+  dayCountAfterDeparture: 0,
+  departureDate: {
+    formatted: 'Tue, 10 Jun 2026',
+    raw: '2026-06-10',
+  },
+  departureTime: '09:00',
+  destination: {
+    iataCode: 'ORY',
+    name: 'Paris Orly Airport',
+  },
+  flightDuration: {
+    formatted: '1h 20m',
+    raw: 'PT1H20M',
+  },
+  airlines: [
+    {
+      iataCode: 'AF',
+      name: 'Air France',
+    },
+  ],
+  origin: {
+    iataCode: 'CDG',
+    name: 'Paris Charles de Gaulle Airport',
+  },
+}
+
+const returnTrip = {
+  arrivalDate: {
+    formatted: 'Fri, 13 Jun 2026',
+    raw: '2026-06-13',
+  },
+  arrivalTime: '19:50',
+  labels: {
+    nonStop: 'Direct',
+  },
+  dayCountAfterDeparture: 0,
+  departureDate: {
+    formatted: 'Fri, 13 Jun 2026',
+    raw: '2026-06-13',
+  },
+  departureTime: '18:30',
+  destination: {
+    iataCode: 'CDG',
+    name: 'Paris Charles de Gaulle Airport',
+  },
+  flightDuration: {
+    formatted: '1h 20m',
+    raw: 'PT1H20M',
+  },
+  airlines: [
+    {
+      iataCode: 'AF',
+      name: 'Air France',
+    },
+  ],
+  origin: {
+    iataCode: 'ORY',
+    name: 'Paris Orly Airport',
+  },
+}
+
+const seatsCategory = { id: 'seats', label: 'Seats', subtotal: '24,00 €' }
+const baggageCategory = { id: 'baggage', label: 'Baggage', subtotal: '20,00 €' }
+const extrasCategory = { id: 'extras', label: 'Extras', subtotal: '3,00 €' }
+
+const outboundGroup = { id: 'CDG-ORY', label: 'CDG → ORY' }
+const returnGroup = { id: 'ORY-CDG', label: 'ORY → CDG' }
+
+const rows: CpBasketRow[] = [
+  { label: 'Seat 12A', value: '12,00 €', category: seatsCategory, group: outboundGroup },
+  { label: 'Seat 14C', value: '12,00 €', category: seatsCategory, group: returnGroup },
+  { label: '2 × Cabin baggage 10kg', value: '20,00 €', category: baggageCategory, group: outboundGroup },
+  { label: 'Carbon offset', value: '3,00 €', category: extrasCategory },
+]
+
+const fakeRowPool: CpBasketRow[] = [
+  { label: 'Extra bag 20kg', value: '15,00 €', category: baggageCategory, group: outboundGroup },
+  { label: 'Seat 15B', value: '10,00 €', category: seatsCategory, group: returnGroup },
+  { label: 'Meal', value: '9,00 €', category: extrasCategory },
+  { label: 'Priority boarding', value: '8,00 €', category: extrasCategory, group: null },
+]
+
+const flightsCategory = { id: 'flights', label: 'Flights', subtotal: '159,80 €' }
+const hiddenSeatsCategory = { id: 'seats', label: 'Seats', subtotal: '99,60 €' }
+const tripExtrasCategory = { id: 'tripExtras', label: 'Trip extras', subtotal: '269,40 €' }
+const taxesCategory = { id: 'taxes', label: 'Taxes & Fees', subtotal: '14,30 €' }
+
+const hiddenDetailsRows: CpBasketRow[] = [
+  { label: 'CDG → MRS', value: '79,90 €', category: flightsCategory, group: outboundGroup },
+  { label: 'MRS → CDG', value: '79,90 €', category: flightsCategory, group: returnGroup },
+  { label: 'Extra legroom', value: '99,60 €', category: hiddenSeatsCategory },
+  { label: 'Priority boarding', value: '269,40 €', category: tripExtrasCategory },
+  { label: 'VAT', value: '14,30 €', category: taxesCategory },
+]
+
+const meta = {
+  title: 'Business/CpBasket',
+  component: CpBasket,
+  argTypes: {
+    hideDetailsOnCategories: {
+      control: 'object',
+      description: 'Category ids rendered as a title-only line, with no groups or rows',
+      table: { defaultValue: { summary: '[]' } },
+    },
+    rows: {
+      control: 'object',
+      description: 'Flat list of basket rows, each carrying its own category and group',
+    },
+    total: {
+      control: 'text',
+      description: 'Preformatted total amount',
+    },
+    totalLabel: {
+      control: 'text',
+      description: 'Label shown next to the total, translated by the consumer',
+    },
+  },
+} satisfies Meta<typeof CpBasket>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const defaultRender = (args: Args) => ({
+  components: { CpBasket, CpTrip },
+  setup() {
+    return { args, outboundTrip, returnTrip }
+  },
+  template: `
+    <CpBasket v-bind="args">
+      <template #leading>
+        <div class="cpBasket__leg">
+          <p class="cpBasket__legDate">{{ outboundTrip.departureDate.formatted }}</p>
+          <CpTrip hide-airlines :trip="outboundTrip" />
+        </div>
+        <div class="cpBasket__leg">
+          <p class="cpBasket__legDate">{{ returnTrip.departureDate.formatted }}</p>
+          <CpTrip hide-airlines :trip="returnTrip" />
+        </div>
+      </template>
+    </CpBasket>
+  `,
+})
+
+const defaultStoryRender = (args: Args) => ({
+  components: { CpBasket, CpButton, CpTrip },
+  setup() {
+    const storyRows = ref<CpBasketRow[]>([...rows])
+    const fakeRowCount = ref(0)
+
+    const addFakeRow = () => {
+      const pick = fakeRowPool[Math.floor(Math.random() * fakeRowPool.length)]
+      fakeRowCount.value += 1
+      storyRows.value = [...storyRows.value, { ...pick, label: `${pick.label} #${fakeRowCount.value}` }]
+    }
+
+    return { addFakeRow, args, outboundTrip, returnTrip, storyRows }
+  },
+  template: `
+    <div style="display: flex; flex-direction: column; gap: 16px; max-width: 415px;">
+      <CpButton @click="addFakeRow">Add fake row</CpButton>
+      <CpBasket v-bind="args" :rows="storyRows">
+        <template #leading>
+          <div class="cpBasket__leg">
+            <p class="cpBasket__legDate">{{ outboundTrip.departureDate.formatted }}</p>
+            <CpTrip hide-airlines :trip="outboundTrip" />
+          </div>
+          <div class="cpBasket__leg">
+            <p class="cpBasket__legDate">{{ returnTrip.departureDate.formatted }}</p>
+            <CpTrip hide-airlines :trip="returnTrip" />
+          </div>
+        </template>
+      </CpBasket>
+    </div>
+  `,
+})
+
+/**
+ * Three categories (seats, baggage, extras) with rows grouped per route in the
+ * `#leading` slot rendering the two `cp-trip` legs. The button above the
+ * basket appends one random fake row per click (sometimes ungrouped) to
+ * eyeball the `cp-transition-list-items` insert animation.
+ */
+export const Default: Story = {
+  args: {
+    rows,
+    total: '47,00 €',
+    totalLabel: 'Total',
+  },
+  render: defaultStoryRender,
+}
+
+/**
+ * No rows: only the `#leading` slot and the total render, the details block
+ * collapses via `cp-transition-expand`.
+ */
+export const EmptyRows: Story = {
+  args: {
+    rows: [],
+    total: '0,00 €',
+    totalLabel: 'Total',
+  },
+  render: defaultRender,
+}
+
+/**
+ * One category mixing a labelled group with ungrouped rows whose `group` is
+ * either omitted or explicitly `null` — both render the same way: no label,
+ * no indentation, after the labelled group.
+ */
+export const GroupedAndUngroupedRows: Story = {
+  args: {
+    rows: [
+      {
+        label: 'Seat 12A',
+        value: '12,00 €',
+        category: { id: 'seats', label: 'Seats', subtotal: '32,00 €' },
+        group: outboundGroup,
+      },
+      { label: 'Seat 14C', value: '12,00 €', category: { id: 'seats', label: 'Seats', subtotal: '32,00 €' } },
+      {
+        label: 'Priority boarding',
+        value: '8,00 €',
+        category: { id: 'seats', label: 'Seats', subtotal: '32,00 €' },
+        group: null,
+      },
+    ],
+    total: '32,00 €',
+    totalLabel: 'Total',
+  },
+  render: defaultRender,
+}
+
+/**
+ * No `#leading` slot content: the leading container is not rendered at all.
+ */
+export const NoLeadingSlot: Story = {
+  args: {
+    rows,
+    total: '47,00 €',
+    totalLabel: 'Total',
+  },
+  render: (args: Args) => ({
+    components: { CpBasket },
+    setup() {
+      return { args }
+    },
+    template: `<CpBasket v-bind="args" />`,
+  }),
+}
+
+/**
+ * `hideDetailsOnCategories` collapses "Seats", "Trip extras" and
+ * "Taxes & Fees" to their title line while "Flights" keeps its grouped rows,
+ * matching the Figma payment-summary reference.
+ */
+export const HiddenDetails: Story = {
+  args: {
+    hideDetailsOnCategories: ['seats', 'tripExtras', 'taxes'],
+    rows: hiddenDetailsRows,
+    total: '543,10 €',
+    totalLabel: 'Total',
+  },
+  render: defaultRender,
+}
+
+/**
+ * `#trailing` slot rendered after the total, with a `var(--cp-spacing-sm)`
+ * gap only appearing because the slot is provided.
+ */
+export const TrailingSlot: Story = {
+  args: {
+    rows,
+    total: '47,00 €',
+    totalLabel: 'Total',
+  },
+  render: (args: Args) => ({
+    components: { CpBasket, CpButton, CpIcon, CpTrip },
+    setup() {
+      return { args, outboundTrip, returnTrip }
+    },
+    template: `
+      <CpBasket v-bind="args">
+        <template #leading>
+          <div class="cpBasket__leg">
+            <p class="cpBasket__legDate">{{ outboundTrip.departureDate.formatted }}</p>
+            <CpTrip hide-airlines :trip="outboundTrip" />
+          </div>
+          <div class="cpBasket__leg">
+            <p class="cpBasket__legDate">{{ returnTrip.departureDate.formatted }}</p>
+            <CpTrip hide-airlines :trip="returnTrip" />
+          </div>
+        </template>
+        <template #trailing>
+          <CpButton appearance="secondary" color="accent" size="lg" style="width: 100%;">
+            <template #leading-icon><CpIcon type="download" /></template>
+            Download your invoice (PDF)
+          </CpButton>
+          <p style="color: var(--cp-text-secondary); font-size: 14px;">Paid on Jul 25, 2026 · card •• 4242</p>
+        </template>
+      </CpBasket>
+    `,
+  }),
+}