@citizenplane/pimp 18.14.3 → 18.16.0

package/src/components/index.ts

@@ -63,6 +63,7 @@ import CpTabs from './CpTabs.vue'
 import CpTelInput from './CpTelInput.vue'
 import CpText from './CpText.vue'
 import CpTextarea from './CpTextarea.vue'
+import CpTextMorph from './CpTextMorph.vue'
 import CpToast from './CpToast.vue'
 import CpTooltip from './CpTooltip.vue'
 import CpTransitionCounter from './CpTransitionCounter.vue'
@@ -73,6 +74,11 @@ import CpTransitionSize from './CpTransitionSize.vue'
 import CpTransitionSlide from './CpTransitionSlide.vue'
 import CpTransitionTabContent from './CpTransitionTabContent.vue'
 import CpTrip from './CpTrip.vue'
+import CpTripDetails from './CpTripDetails.vue'
+import CpTripLegRouteInformation from './CpTripLegRouteInformation.vue'
+import CpTripLegRouteLayover from './CpTripLegRouteLayover.vue'
+import CpTripLegRoutePlace from './CpTripLegRoutePlace.vue'
+import CpTripLegRouteSegment from './CpTripLegRouteSegment.vue'
 import IconAirline from './icons/IconAirline.vue'
 import IconCheckList from './icons/IconCheckList.vue'
 import IconCollapse from './icons/IconCollapse.vue'
@@ -125,6 +131,7 @@ const Components = {
   CpIcon,
   CpTelInput,
   CpTooltip,
+  CpTextMorph,
   CpAirlineLogo,
   IconAirline,
   IconOta,
@@ -143,6 +150,11 @@ const Components = {
   CpTransitionSlide,
   CpTransitionTabContent,
   CpTrip,
+  CpTripDetails,
+  CpTripLegRouteInformation,
+  CpTripLegRouteLayover,
+  CpTripLegRoutePlace,
+  CpTripLegRouteSegment,
   CpSeatMap,
   CpSeatMapEmergencyExitDialog,
   CpSeatMapGrid,
@@ -184,6 +196,14 @@ export type {
   SeatRowFacilityFlags,
 } from '@/constants/seatMap'
 export type { CpSeatMapSeatSelection as CpSeatMapSelection } from '@/constants/seatMap/CpSeatMapSeatSelection'
+export type {
+  CpTripDetailsConfig,
+  Flight,
+  FlightAirline,
+  FlightAirport,
+  FlightSegment,
+  FlightTerminal,
+} from '@/constants/tripDetails'
 
 export {
   CpSeatMapTransitionDirections,
@@ -194,6 +214,7 @@ export {
   SeatRowFacilityPosition,
   SeatStatuses,
 } from '@/constants/seatMap'
+export { DEFAULT_CP_TRIP_DETAILS_CONFIG, FlightStopTypes } from '@/constants/tripDetails'
 // Consumers key `selections` with this, so it has to be the very same helper.
 export { displaySeat } from '@/helpers/seatMap'
 export {
@@ -256,6 +277,11 @@ export {
   CpTransitionSlide,
   CpTransitionTabContent,
   CpTrip,
+  CpTripDetails,
+  CpTripLegRouteInformation,
+  CpTripLegRouteLayover,
+  CpTripLegRoutePlace,
+  CpTripLegRouteSegment,
   IconAirline,
   IconCheckList,
   IconCollapse,

package/src/constants/tripDetails/Airline.ts

@@ -0,0 +1,4 @@
+export interface FlightAirline {
+  iata_code: string
+  name: string
+}

package/src/constants/tripDetails/Airport.ts

@@ -0,0 +1,6 @@
+export interface FlightAirport {
+  city_name: string
+  iata_code: string
+  name: string
+  timezone: string
+}

package/src/constants/tripDetails/CpTripDetailsConfig.ts

@@ -0,0 +1,29 @@
+export interface CpTripDetailsConfig {
+  routeInformation: {
+    airline: string
+    connectionInfo: string
+    flightNo: string
+    technicalStop: string
+  }
+  routeLayover: {
+    layover: string
+  }
+  routePlace: {
+    terminalNotSpecified: string
+  }
+}
+
+export const DEFAULT_CP_TRIP_DETAILS_CONFIG: CpTripDetailsConfig = {
+  routeLayover: {
+    layover: 'layover',
+  },
+  routePlace: {
+    terminalNotSpecified: 'Terminal not specified',
+  },
+  routeInformation: {
+    connectionInfo: 'Connection info',
+    airline: 'airline',
+    flightNo: 'Flight No',
+    technicalStop: 'Technical stop',
+  },
+}

package/src/constants/tripDetails/Flight.ts

@@ -0,0 +1,5 @@
+import type { FlightSegment } from './FlightSegment'
+
+export interface Flight {
+  segments: FlightSegment[]
+}

package/src/constants/tripDetails/FlightSegment.ts

@@ -0,0 +1,15 @@
+import type { FlightAirline } from './Airline'
+import type { FlightAirport } from './Airport'
+import type { FlightTerminal } from './Terminal'
+
+export interface FlightSegment {
+  airline: FlightAirline
+  arrival_date: string
+  departure_date: string
+  destination: FlightAirport
+  destination_terminal?: FlightTerminal
+  flight_number: string
+  origin: FlightAirport
+  origin_terminal?: FlightTerminal
+  via_airport?: Pick<FlightAirport, 'city_name' | 'iata_code'>
+}

package/src/constants/tripDetails/FlightStopTypes.ts

@@ -0,0 +1,6 @@
+export enum FlightStopTypes {
+  DESTINATION = 'destination',
+  LAYOVER_DESTINATION = 'layover destination',
+  LAYOVER_ORIGIN = 'layover origin',
+  ORIGIN = 'origin',
+}

package/src/constants/tripDetails/Terminal.ts

@@ -0,0 +1,4 @@
+export interface FlightTerminal {
+  label: string
+  terminal_code: string
+}

package/src/constants/tripDetails/index.ts

@@ -0,0 +1,9 @@
+export type { FlightAirline } from './Airline'
+export type { FlightAirport } from './Airport'
+export type { CpTripDetailsConfig } from './CpTripDetailsConfig'
+export type { Flight } from './Flight'
+export type { FlightSegment } from './FlightSegment'
+export type { FlightTerminal } from './Terminal'
+
+export { DEFAULT_CP_TRIP_DETAILS_CONFIG } from './CpTripDetailsConfig'
+export { FlightStopTypes } from './FlightStopTypes'

package/src/helpers/tripDetails.ts

@@ -0,0 +1,61 @@
+import { DateTime, Duration } from 'luxon'
+
+const DURATION_PLACEHOLDER = '-- h -- min'
+
+// Luxon ships no types in Pimp (see src/types/luxon.d.ts) — this is the slice of
+// DateTime/Duration's shape CpTripDetails actually relies on.
+export interface TripDuration {
+  shiftTo(...units: string[]): TripDuration
+  toHuman(opts: { maximumFractionDigits?: number; unitDisplay?: string }): string
+  toISO(): string | null
+  toObject(): Record<string, number>
+}
+
+export interface TripDateTime {
+  diff(other: TripDateTime, units: string[]): TripDuration
+  toFormat(format: string): string
+  toISO(): string | null
+}
+
+export const fromGMTToLocal = (date: string, zone: string, locale = 'en'): TripDateTime => {
+  return DateTime.fromISO(date, { zone: 'utc' }).setZone(zone).setLocale(locale)
+}
+
+export const getDuration = (end: TripDateTime, start: TripDateTime): TripDuration => {
+  return end.diff(start, ['hours', 'minutes'])
+}
+
+export const getFormattedDuration = (duration?: TripDuration | null, locale = 'en'): string => {
+  if (!duration) return DURATION_PLACEHOLDER
+
+  // Concatenates values to make toHuman more readable (ex: 26h becomes 1d, 2hr)
+  const shiftedDuration = duration.shiftTo('hours', 'minutes').toObject()
+  const entries = Object.entries(shiftedDuration).filter(([, amount]) => amount)
+  const formattedDuration = Duration.fromObject(Object.fromEntries(entries), { locale })
+
+  return (
+    formattedDuration.toHuman({
+      unitDisplay: 'short',
+      maximumFractionDigits: 0,
+    }) || DURATION_PLACEHOLDER
+  )
+}
+
+export const getDayCountBetweenDates = ({
+  departureDate,
+  arrivalDate,
+  isArrival = false,
+}: {
+  arrivalDate: TripDateTime
+  departureDate: TripDateTime
+  isArrival?: boolean
+}): number => {
+  const departureDay = departureDate.toFormat('yyyy-LL-dd')
+  const arrivalDay = arrivalDate.toFormat('yyyy-LL-dd')
+
+  if (isArrival) {
+    return DateTime.fromISO(departureDay).diff(DateTime.fromISO(arrivalDay), 'days').days
+  }
+
+  return DateTime.fromISO(arrivalDay).diff(DateTime.fromISO(departureDay), 'days').days
+}

package/src/stories/CpTextMorph.stories.ts

@@ -0,0 +1,236 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, ref } from 'vue'
+
+import CpButton from '@/components/CpButton.vue'
+import CpTextMorph from '@/components/CpTextMorph.vue'
+
+const meta = {
+  title: 'Transitions/CpTextMorph',
+  component: CpTextMorph,
+  argTypes: {
+    text: {
+      control: 'text',
+      description: 'Text to display. Changing it morphs from the previous value.',
+    },
+    duration: {
+      control: 'number',
+      description: 'Duration of the morph in milliseconds.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the morph is disabled.',
+    },
+    as: {
+      control: 'text',
+      description: 'HTML tag to render the component as.',
+    },
+  },
+  args: {
+    duration: 400,
+    disabled: false,
+    as: 'span',
+  },
+} satisfies Meta<typeof CpTextMorph>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const wrapperStyle = 'display: flex; flex-direction: column; align-items: flex-start; gap: 24px;'
+
+const singleLineStyle = 'font-size: 2rem; font-weight: 600; line-height: 1.2;'
+
+const multiLineStyle = 'font-size: 1.25rem; line-height: 1.6;'
+
+const singleLineTexts = ['Search for flights', 'Choose your seat']
+
+/**
+ * Single line text. Use the button to swap the value and watch the
+ * characters morph from one label to the other.
+ */
+export const Default: Story = {
+  args: {
+    text: singleLineTexts[0],
+  },
+  render: (args) => ({
+    components: { CpTextMorph, CpButton },
+    setup() {
+      const isMorphed = ref(false)
+      const text = computed(() => (isMorphed.value ? singleLineTexts[1] : args.text))
+
+      const toggle = () => {
+        isMorphed.value = !isMorphed.value
+      }
+
+      const buttonLabel = computed(() => (isMorphed.value ? 'Unmorph text' : 'Morph text'))
+
+      return { args, text, toggle, buttonLabel }
+    },
+    template: `
+      <div style="${wrapperStyle}">
+        <div style="${singleLineStyle}">
+          <CpTextMorph v-bind="args" :text="text" />
+        </div>
+        <CpButton appearance="primary" color="accent" @click="toggle">
+          <CpTextMorph v-bind="args" :text="buttonLabel" />
+        </CpButton>
+      </div>
+    `,
+  }),
+}
+
+/** Lines are explicit: torph keeps its content on a single line unless the value contains newlines. */
+const multiLineTexts = [
+  [
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit,',
+    'sed do eiusmod tempor incididunt ut labore et dolore',
+    'magna aliqua veniam quis nostrud.',
+  ].join('\n'),
+  [
+    'Lorem ipsum dolor sit amet, quis nostrud exercitation',
+    'ullamco laboris nisi ut aliquip ex ea commodo dolore',
+    'magna aliqua consectetur adipiscing elit.',
+  ].join('\n'),
+]
+
+/**
+ * Multi line paragraph. Both values share most of their words, so the
+ * morph mostly moves existing words to their new position across lines
+ * instead of fading everything in and out.
+ */
+export const MultiLine: Story = {
+  args: {
+    text: multiLineTexts[0],
+  },
+  render: (args) => ({
+    components: { CpTextMorph, CpButton },
+    setup() {
+      const isMorphed = ref(false)
+      const text = computed(() => (isMorphed.value ? multiLineTexts[1] : args.text))
+
+      const toggle = () => {
+        isMorphed.value = !isMorphed.value
+      }
+
+      return { args, text, toggle }
+    },
+    template: `
+      <div style="${wrapperStyle}">
+        <div style="${multiLineStyle}">
+          <CpTextMorph v-bind="args" :text="text" />
+        </div>
+        <CpButton appearance="primary" color="accent" @click="toggle">
+          Morph text
+        </CpButton>
+      </div>
+    `,
+  }),
+}
+
+const bookingSteps = [
+  {
+    title: 'Select your flight',
+    fields: ['Paris (CDG) → London (LHR)', 'Wednesday 19 August, 09:45', 'Economy, 1 passenger'],
+  },
+  {
+    title: 'Select your seat',
+    fields: ['Seat 14A, window', 'Extra legroom', 'Front of the cabin'],
+  },
+  {
+    title: 'Confirm your booking',
+    fields: ['Paris (CDG) → London (LHR)', 'Seat 14A, window', 'Total: 189,00 €'],
+  },
+]
+
+const dialogFooterStyle = 'display: flex; justify-content: space-between; gap: 8px; width: 100%;'
+
+const dialogFieldsStyle = 'display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none;'
+/**
+ * Use case — a multi step dialog whose title morphs on every step
+ * instead of being swapped instantly. The step titles share words on
+ * purpose ("Select your …"), so only the changing part animates while
+ * the rest stays in place.
+ *
+ * The title is wrapped in an `h2` inside the `title` slot to keep the
+ * dialog heading semantics. Around it, several transitions run together:
+ * `CpTransitionCounter` rolls the step number, `CpTransitionSize`
+ * animates the width of the whole "Step 1 of 3" subtitle and the body
+ * height, and the footer keeps a single action button whose label morphs
+ * from "Next" to "Confirm" while its width follows.
+ */
+export const MultiStepDialog: Story = {
+  args: {
+    text: bookingSteps[0].title,
+  },
+  render: (args) => ({
+    components: { CpTextMorph },
+    setup() {
+      const isOpen = ref(false)
+      const stepIndex = ref(0)
+
+      const step = computed(() => bookingSteps[stepIndex.value])
+      const stepLabel = computed(() => `Step ${stepIndex.value + 1} of ${bookingSteps.length}`)
+      const isLastStep = computed(() => stepIndex.value === bookingSteps.length - 1)
+      const nextLabel = computed(() => (isLastStep.value ? 'Confirm' : 'Next'))
+
+      const open = () => {
+        stepIndex.value = 0
+        isOpen.value = true
+      }
+
+      const close = () => {
+        isOpen.value = false
+      }
+
+      const goToNextStep = () => {
+        if (isLastStep.value) {
+          close()
+          return
+        }
+        stepIndex.value++
+      }
+
+      return {
+        args,
+        isOpen,
+        stepIndex,
+        step,
+        stepLabel,
+        nextLabel,
+        open,
+        close,
+        goToNextStep,
+      }
+    },
+    template: `
+      <CpButton appearance="primary" color="accent" @click="open">Book a flight</CpButton>
+      <CpTransitionDialog>
+        <CpDialog v-if="isOpen" :max-width="480" @close="close">
+          <template #title>
+            <h2><CpTextMorph v-bind="args" :text="step.title" /></h2>
+          </template>
+          <template #subtitle>
+            <CpTextMorph v-bind="args" :text="stepLabel" />
+          </template>
+          <ul style="${dialogFieldsStyle}">
+            <li v-for="field in step.fields" :key="field">{{ field }}</li>
+          </ul>
+          <template #footer>
+            <div style="${dialogFooterStyle}">
+              <CpButton
+                appearance="secondary"
+                color="neutral"
+                :disabled="stepIndex === 0"
+                @click="stepIndex--"
+              >
+                Back
+              </CpButton>
+              <CpButton appearance="primary" color="accent" @click="goToNextStep">
+                <CpTextMorph v-bind="args" :text="nextLabel" />
+              </CpButton>
+            </div>
+          </template>
+        </CpDialog>
+      </CpTransitionDialog>
+    `,
+  }),
+}

package/src/stories/CpTrip.stories.ts

@@ -1,6 +1,10 @@
 import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 
+import type { Flight } from '@/constants/tripDetails/Flight'
+
+import CpAccordion from '@/components/CpAccordion.vue'
 import CpTrip from '@/components/CpTrip.vue'
+import CpTripDetails from '@/components/CpTripDetails.vue'
 
 const directTrip = {
   arrivalDate: {
@@ -221,6 +225,104 @@ const fourStopTrip = {
   ],
 }
 
+/**
+ * Summary and segments below describe the same one-stop CDG → MUC → JFK
+ * itinerary: 09:00 Paris → 10:40 Munich, 2h 10m layover, 12:50 Munich →
+ * 16:15 New York, for 13h 15m of total travel time on 10 Jun 2026.
+ */
+const fullTrip = {
+  arrivalDate: {
+    formatted: 'Wed, 10 Jun 2026',
+    raw: '2026-06-10',
+  },
+  arrivalTime: '16:15',
+  dayCountAfterDeparture: 0,
+  departureDate: {
+    formatted: 'Wed, 10 Jun 2026',
+    raw: '2026-06-10',
+  },
+  departureTime: '09:00',
+  destination: {
+    iataCode: 'JFK',
+    name: 'John F. Kennedy International Airport',
+  },
+  flightDuration: {
+    formatted: '13h 15m',
+    raw: 'PT13H15M',
+  },
+  labels: {
+    layover: 'layover',
+    stopCount: '1 stop',
+  },
+  airlines: [
+    {
+      iataCode: 'AF',
+      name: 'Air France',
+    },
+    {
+      iataCode: 'LH',
+      name: 'Lufthansa',
+    },
+  ],
+  origin: {
+    iataCode: 'CDG',
+    name: 'Paris Charles de Gaulle Airport',
+  },
+  stops: [
+    {
+      duration: '2h 10m',
+      iata: 'MUC',
+      name: 'Munich',
+    },
+  ],
+}
+
+/** Segment dates are GMT — `CpTripDetails` converts them to each airport's timezone. */
+const fullTripFlight: Flight = {
+  segments: [
+    {
+      airline: { iata_code: 'AF', name: 'Air France' },
+      arrival_date: '2026-06-10T08:40:00',
+      departure_date: '2026-06-10T07:00:00',
+      destination: {
+        city_name: 'Munich',
+        iata_code: 'MUC',
+        name: 'Franz Josef Strauss Airport',
+        timezone: 'Europe/Berlin',
+      },
+      destination_terminal: { label: 'Terminal 2', terminal_code: '2' },
+      flight_number: 'AF1122',
+      origin: {
+        city_name: 'Paris',
+        iata_code: 'CDG',
+        name: 'Paris Charles de Gaulle Airport',
+        timezone: 'Europe/Paris',
+      },
+      origin_terminal: { label: 'Terminal 2E', terminal_code: '2E' },
+    },
+    {
+      airline: { iata_code: 'LH', name: 'Lufthansa' },
+      arrival_date: '2026-06-10T20:15:00',
+      departure_date: '2026-06-10T10:50:00',
+      destination: {
+        city_name: 'New York',
+        iata_code: 'JFK',
+        name: 'John F. Kennedy International Airport',
+        timezone: 'America/New_York',
+      },
+      destination_terminal: { label: 'Terminal 1', terminal_code: '1' },
+      flight_number: 'LH410',
+      origin: {
+        city_name: 'Munich',
+        iata_code: 'MUC',
+        name: 'Franz Josef Strauss Airport',
+        timezone: 'Europe/Berlin',
+      },
+      origin_terminal: { label: 'Terminal 2', terminal_code: '2' },
+    },
+  ],
+}
+
 const meta = {
   title: 'Business/CpTrip',
   component: CpTrip,
@@ -321,3 +423,48 @@ export const HideAirlines: Story = {
   },
   render: defaultRender,
 }
+
+/**
+ * A complete itinerary: `CpTrip` acts as the always-visible summary in the
+ * accordion header, and `CpTripDetails` renders the leg-by-leg breakdown in
+ * the expandable content. The rounded corners come from the wrapper, since
+ * `CpAccordion` is square by design so it can be stacked in a group.
+ */
+export const FullTrip: Story = {
+  args: {
+    trip: fullTrip,
+  },
+  render: (args: Args) => ({
+    components: { CpAccordion, CpTrip, CpTripDetails },
+    setup() {
+      const wrapperStyle = [
+        'box-sizing: border-box',
+        'width: 640px',
+        'max-width: 100%',
+        'overflow: hidden',
+        'border: 1px solid var(--cp-border-soft)',
+        'border-radius: var(--cp-radius-xl)',
+        'box-shadow: var(--cp-shadows-xs)',
+      ].join('; ')
+
+      const summaryStyle = 'padding-top: var(--cp-spacing-md);'
+      const detailsStyle = 'border-top: 1px solid var(--cp-border-soft);'
+
+      return { args, detailsStyle, fullTripFlight, summaryStyle, wrapperStyle }
+    },
+    template: `
+      <div :style="wrapperStyle">
+        <CpAccordion :default-open-state="true" icon-position="trailing" title="Outbound · Wed, 10 Jun 2026">
+          <template #leading-slot>
+            <div :style="summaryStyle">
+              <CpTrip v-bind="args" />
+            </div>
+          </template>
+          <div :style="detailsStyle">
+            <CpTripDetails :flight="fullTripFlight" />
+          </div>
+        </CpAccordion>
+      </div>
+    `,
+  }),
+}