@citizenplane/pimp 18.14.4 → 18.16.1

package/src/components/CpTripLegRouteSegment.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="cpTripLegRouteSegment">
+    <cp-trip-leg-route-layover
+      v-if="isLayoverSectionVisible"
+      :config="config"
+      :duration="stopDuration"
+      :locale="locale"
+    />
+    <cp-trip-leg-route-place
+      :city="origin.name"
+      class="cpTripLegRouteSegment__place"
+      :config="config"
+      :day-count-after-arrival="dayCountAfterArrival"
+      :iata="origin.iata_code"
+      :terminal="segment.origin_terminal"
+      :time="departureDate"
+      :type="firstAirportType"
+    />
+    <cp-trip-leg-route-information :config="config" :flight-duration="segmentDuration" :segment="segment" />
+    <cp-trip-leg-route-place
+      :city="destination.name"
+      class="cpTripLegRouteSegment__place"
+      :config="config"
+      :day-count-after-departure="dayCountAfterDeparture"
+      :iata="destination.iata_code"
+      :terminal="segment.destination_terminal"
+      :time="arrivalDate"
+      :type="secondAirportType"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { CpTripDetailsConfig } from '@/constants/tripDetails/CpTripDetailsConfig'
+import type { FlightSegment } from '@/constants/tripDetails/FlightSegment'
+import type { TripDateTime, TripDuration } from '@/helpers/tripDetails'
+
+import { FlightStopTypes } from '@/constants/tripDetails/FlightStopTypes'
+import { fromGMTToLocal, getDayCountBetweenDates, getDuration, getFormattedDuration } from '@/helpers/tripDetails'
+import CpTripLegRouteInformation from './CpTripLegRouteInformation.vue'
+import CpTripLegRouteLayover from './CpTripLegRouteLayover.vue'
+import CpTripLegRoutePlace from './CpTripLegRoutePlace.vue'
+
+interface Props {
+  config: CpTripDetailsConfig
+  locale?: string
+  previousSegmentArrival: TripDateTime
+  segment: FlightSegment
+  segmentCount: number
+  segmentIndex: number
+  stopDuration: TripDuration | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'en',
+})
+
+const isFirstSegment = computed(() => props.segmentIndex === 0)
+const isLayoverSectionVisible = computed(() => !isFirstSegment.value)
+const origin = computed(() => props.segment.origin)
+const destination = computed(() => props.segment.destination)
+const isDirectFlight = computed(() => props.segmentCount === 1)
+const isLastSegment = computed(() => props.segmentIndex === props.segmentCount - 1)
+
+const firstAirportType = computed(() => {
+  if (isFirstSegment.value) return FlightStopTypes.ORIGIN
+  return FlightStopTypes.LAYOVER_ORIGIN
+})
+
+const secondAirportType = computed(() => {
+  if (isDirectFlight.value || isLastSegment.value) return FlightStopTypes.DESTINATION
+  return FlightStopTypes.LAYOVER_DESTINATION
+})
+
+const departureDate = computed(() =>
+  fromGMTToLocal(props.segment.departure_date, props.segment.origin.timezone, props.locale),
+)
+const arrivalDate = computed(() =>
+  fromGMTToLocal(props.segment.arrival_date, props.segment.destination.timezone, props.locale),
+)
+
+const dayCountAfterArrival = computed(() => {
+  return getDayCountBetweenDates({
+    departureDate: departureDate.value,
+    arrivalDate: props.previousSegmentArrival,
+    isArrival: true,
+  })
+})
+
+const dayCountAfterDeparture = computed(() => {
+  return getDayCountBetweenDates({ departureDate: departureDate.value, arrivalDate: arrivalDate.value })
+})
+
+const segmentDuration = computed(() =>
+  getFormattedDuration(getDuration(arrivalDate.value, departureDate.value), props.locale),
+)
+</script>

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/CpMultiselect.stories.ts

@@ -109,6 +109,36 @@ export const Single: Story = {
   }),
 }
 
+/**
+ * Multi-value selection with a supplier prefix badge. Selected options are
+ * rendered as chips.
+ */
+export const Multiple: Story = {
+  args: {
+    placeholder: 'Select suppliers',
+    multiple: true,
+    options: supplierOptions,
+    trackBy: 'id',
+  },
+  render: (args) => ({
+    components: { CpMultiselect },
+    setup() {
+      const selectedSuppliers = ref([])
+
+      return { args, selectedSuppliers }
+    },
+    template: `
+      <div style="padding: 20px; max-width: 25rem;">
+        <CpMultiselect v-model="selectedSuppliers" v-bind="args">
+          <template #prefix>
+            <cp-badge color="magenta" is-square leading-icon="supplier" size="sm" />
+          </template>
+        </CpMultiselect>
+      </div>
+    `,
+  }),
+}
+
 /**
  * Multi-value selection with an async search handler. Selected options are
  * rendered as chips and can be customized through `#tag-leading-icon` and

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>
+    `,
+  }),
+}