@citizenplane/pimp 18.14.4 → 18.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.14.4",
+  "version": "18.16.0",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -54,6 +54,7 @@
     "maska": "3.2.0",
     "modern-normalize": "3.0.1",
     "primevue": "4.5.5",
+    "torph": "^0.1.0",
     "vue": "3.5.39",
     "vue-bind-once": "0.2.1",
     "vue-tel-input": "9.5.0"

package/src/assets/images/dot.svg

@@ -0,0 +1,3 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+    <path d="M60 90C76.5685 90 90 76.5685 90 60C90 43.4315 76.5685 30 60 30C43.4315 30 30 43.4315 30 60C30 76.5685 43.4315 90 60 90Z" fill="#D8D8DE"/>
+</svg>

package/src/components/CpTextMorph.vue

@@ -0,0 +1,17 @@
+<template>
+  <text-morph :text="text" :duration="duration" :disabled="disabled" :as="as" :class="props.class" />
+</template>
+
+<script setup lang="ts">
+import { TextMorph } from 'torph/vue'
+
+interface Props {
+  as?: string
+  class?: string
+  disabled?: boolean
+  duration?: number
+  text: string
+}
+
+const props = defineProps<Props>()
+</script>

package/src/components/CpTripDetails.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="cpTripDetails">
+    <cp-trip-leg-route-segment
+      v-for="(segment, segmentIndex) in flightSegments"
+      :key="`segment_${segmentIndex}`"
+      :config="config"
+      :locale="locale"
+      :previous-segment-arrival="getPreviousSegmentArrival(segmentIndex)"
+      :segment="segment"
+      :segment-count="segmentCount"
+      :segment-index="segmentIndex"
+      :stop-duration="getStopDuration(segmentIndex)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DateTime } from 'luxon'
+import { computed } from 'vue'
+
+import type { CpTripDetailsConfig } from '@/constants/tripDetails/CpTripDetailsConfig'
+import type { Flight } from '@/constants/tripDetails/Flight'
+
+import { DEFAULT_CP_TRIP_DETAILS_CONFIG } from '@/constants/tripDetails/CpTripDetailsConfig'
+import { getDuration } from '@/helpers/tripDetails'
+import CpTripLegRouteSegment from './CpTripLegRouteSegment.vue'
+
+interface Props {
+  config?: CpTripDetailsConfig
+  flight: Flight
+  locale?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  config: () => DEFAULT_CP_TRIP_DETAILS_CONFIG,
+  locale: 'en',
+})
+
+const flightSegments = computed(() => props.flight.segments)
+const segmentCount = computed(() => flightSegments.value.length)
+
+const getSegmentTime = (segmentIndex: number, timeKey: 'arrival_date' | 'departure_date') => {
+  return DateTime.fromISO(flightSegments.value[segmentIndex]?.[timeKey])
+}
+
+const getPreviousSegmentArrival = (segmentIndex: number) => {
+  return getSegmentTime(segmentIndex - 1, 'arrival_date')
+}
+
+const getStopDuration = (segmentIndex: number) => {
+  if (segmentCount.value < 2) return null
+
+  const departure = getSegmentTime(segmentIndex, 'departure_date')
+  const arrival = getPreviousSegmentArrival(segmentIndex)
+
+  return getDuration(departure, arrival)
+}
+</script>
+
+<style lang="scss">
+.cpTripDetails {
+  padding: var(--cp-spacing-xl) var(--cp-spacing-md);
+}
+</style>

package/src/components/CpTripLegRouteInformation.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="cpTripLegRouteInformation">
+    <div class="cpTripLegRouteInformation__icon">
+      <cp-icon size="18" type="flight" />
+    </div>
+    <div class="cpTripLegRouteInformation__content" @click="toggleDetails">
+      <div class="cpTripLegRouteInformation__main">
+        <div class="cpTripLegRouteInformation__airline">
+          <cp-airline-logo class="cpTripLegRouteInformation__logo" :iata-code="airlineIata" />
+        </div>
+        <cp-badge class="cpTripLegRouteInformation__badge" size="sm">{{ airlineName }}</cp-badge>
+        <cp-badge class="cpTripLegRouteInformation__badge" color="accent" size="sm">{{ flightDuration }}</cp-badge>
+        <div class="cpTripLegRouteInformation__toggle">
+          <button class="toggle__button" type="button" @click.stop="toggleDetails">
+            <cp-icon class="toggle__icon" :class="toggleDynamicClass" size="16" type="chevron-down" />
+          </button>
+        </div>
+      </div>
+      <cp-transition-expand>
+        <div v-if="isToggled" class="cpTripLegRouteInformation__details">
+          <div class="details__wrapper">
+            <p class="details__title">{{ config.routeInformation.connectionInfo }}</p>
+            <span class="details__label">
+              <cp-airline-logo class="details__airlineLogo" :iata-code="airlineIata" :size="16" />
+              {{ config.routeInformation.airline }}
+            </span>
+            <span class="details__value">{{ airlineName }}</span>
+            <span class="details__label">
+              <cp-icon class="details__icon" size="16" type="info" />{{ config.routeInformation.flightNo }}
+            </span>
+            <span class="details__value">{{ flightNumber }}</span>
+            <template v-if="technicalStop">
+              <span class="details__label">
+                <cp-icon class="details__icon" size="16" type="route-one-stop" />
+                {{ config.routeInformation.technicalStop }}
+              </span>
+              <span class="details__value">{{ technicalStop }}</span>
+            </template>
+          </div>
+        </div>
+      </cp-transition-expand>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import type { CpTripDetailsConfig } from '@/constants/tripDetails/CpTripDetailsConfig'
+import type { FlightSegment } from '@/constants/tripDetails/FlightSegment'
+
+import CpAirlineLogo from './CpAirlineLogo.vue'
+import CpBadge from './CpBadge.vue'
+import CpIcon from './CpIcon.vue'
+import CpTransitionExpand from './CpTransitionExpand.vue'
+
+interface Props {
+  config: CpTripDetailsConfig
+  flightDuration: string
+  segment: FlightSegment
+}
+
+const props = defineProps<Props>()
+
+const isToggled = ref(false)
+
+const airlineIata = computed(() => props.segment.airline.iata_code)
+const airlineName = computed(() => props.segment.airline.name || 'n/a')
+const flightNumber = computed(() => props.segment.flight_number)
+
+const technicalStop = computed(() => {
+  const viaAirport = props.segment.via_airport
+  return viaAirport ? `${viaAirport.city_name} (${viaAirport.iata_code})` : ''
+})
+
+const toggleDynamicClass = computed(() => ({ 'toggle__icon--isRotated': isToggled.value }))
+
+const toggleDetails = () => (isToggled.value = !isToggled.value)
+</script>
+
+<style lang="scss">
+.cpTripLegRouteInformation {
+  position: relative;
+  display: flex;
+  width: min(100%, #{fn.px-to-rem(450)});
+  align-items: flex-start;
+
+  &::before {
+    position: absolute;
+    width: fn.px-to-rem(24);
+    background-image: url('@/assets/images/dot.svg');
+    background-position: center center;
+    background-repeat: repeat-y;
+    background-size: var(--cp-spacing-sm);
+    content: '';
+    inset: 0;
+  }
+
+  &__icon {
+    position: relative;
+    display: flex;
+    width: fn.px-to-rem(18);
+    flex-shrink: 0;
+    align-items: center;
+    margin: fn.px-to-rem(22) var(--cp-spacing-md) 0 fn.px-to-rem(3); // 3px so it matches 24px width (18px + 2 * 3px)
+    background-color: var(--cp-background-primary);
+    color: var(--cp-text-secondary);
+    transform: rotate(180deg);
+  }
+
+  &__icon::before {
+    position: absolute;
+    z-index: -1;
+    top: calc(#{var(--cp-spacing-sm)} / 2 * -1);
+    width: 100%;
+    height: calc(100% + #{var(--cp-spacing-sm)});
+    background-color: var(--cp-background-primary);
+    content: '';
+  }
+
+  &__icon i {
+    width: 100%;
+  }
+
+  &__content {
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    cursor: pointer;
+    padding-block: fn.px-to-rem(20);
+  }
+
+  &__main {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--cp-spacing-md);
+  }
+
+  &__airline {
+    @include mx.square-sizing(24);
+
+    overflow: hidden;
+    border-radius: fn.px-to-rem(4);
+  }
+
+  &__logo {
+    width: 100% !important;
+  }
+
+  &__badge {
+    @extend %u-text-ellipsis;
+
+    min-width: 0;
+
+    .cpBadge__label {
+      text-transform: initial !important;
+    }
+  }
+
+  .details {
+    &__wrapper {
+      display: grid;
+      width: min(100%, #{fn.px-to-rem(300)});
+      padding: var(--cp-spacing-lg) 0 var(--cp-spacing-md);
+      font-size: fn.px-to-em(14);
+      gap: var(--cp-spacing-md);
+      grid-template-columns: auto 1fr;
+    }
+
+    &__title {
+      margin-bottom: var(--cp-spacing-xs);
+      font-weight: 600;
+      grid-column: 1 / -1;
+    }
+
+    &__label,
+    &__value {
+      color: var(--cp-text-secondary);
+      text-transform: capitalize;
+    }
+
+    &__label {
+      display: flex;
+      align-items: center;
+    }
+
+    &__icon,
+    &__airlineLogo {
+      margin-right: var(--cp-spacing-md);
+    }
+
+    &__value {
+      text-align: right;
+    }
+  }
+
+  &__toggle {
+    flex-shrink: 0;
+  }
+
+  .toggle {
+    &__button {
+      display: flex;
+      align-items: center;
+      padding: var(--cp-spacing-sm);
+      border-radius: 50%;
+      background-color: var(--cp-background-secondary);
+
+      &:focus-visible {
+        @extend %u-focus-outline;
+      }
+    }
+
+    &__icon {
+      transition: rotate 300ms ease;
+
+      &--isRotated {
+        rotate: 180deg;
+      }
+    }
+  }
+}
+</style>

package/src/components/CpTripLegRouteLayover.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="cpTripLegRouteLayover">
+    <p class="cpTripLegRouteLayover__content">
+      <cp-icon class="cpTripLegRouteLayover__icon" type="clock" />
+      <time :datetime="isoDuration">{{ formattedDuration }}</time>
+      {{ config.routeLayover.layover }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { CpTripDetailsConfig } from '@/constants/tripDetails/CpTripDetailsConfig'
+import type { TripDuration } from '@/helpers/tripDetails'
+
+import { getFormattedDuration } from '@/helpers/tripDetails'
+import CpIcon from './CpIcon.vue'
+
+interface Props {
+  config: CpTripDetailsConfig
+  duration: TripDuration | null
+  locale?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'en',
+})
+
+const isoDuration = computed(() => props.duration?.toISO() ?? '')
+const formattedDuration = computed(() => getFormattedDuration(props.duration, props.locale))
+</script>
+
+<style lang="scss">
+.cpTripLegRouteLayover {
+  position: relative;
+
+  &__content {
+    display: flex;
+    padding-left: calc(#{fn.px-to-rem(24)} + #{fn.px-to-rem(12)});
+    color: var(--cp-text-secondary);
+    padding-block: var(--cp-spacing-2xl);
+
+    time {
+      margin-right: var(--cp-spacing-sm);
+    }
+  }
+
+  &__icon {
+    @include mx.square-sizing(18);
+
+    margin-right: var(--cp-spacing-md);
+  }
+
+  &::before {
+    position: absolute;
+    width: fn.px-to-rem(2);
+    background-color: var(--cp-border-soft);
+    content: '';
+    inset: 0 fn.px-to-rem(11);
+  }
+}
+</style>

package/src/components/CpTripLegRoutePlace.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="cpTripLegRoutePlace" :class="classes">
+    <div class="cpTripLegRoutePlace__pin">
+      <cp-icon v-if="displayPinIcon" type="map-pin" />
+    </div>
+    <div class="cpTripLegRoutePlace__details">
+      <cp-tooltip class="cpTripLegRoutePlace__timeTooltip" :content="dateFormatted">
+        <time class="cpTripLegRoutePlace__time" :datetime="isoTime">
+          <!-- eslint-disable-next-line -->
+          <span>{{ formattedTime }}</span
+          ><!-- remove unwanted white space --><sup v-if="plusOneDay">+{{ plusOneDay }}</sup>
+        </time>
+      </cp-tooltip>
+      <h4 class="cpTripLegRoutePlace__city">{{ city }}</h4>
+      <h5 class="cpTripLegRoutePlace__iata">{{ iata }}</h5>
+      <span v-if="terminal" class="cpTripLegRoutePlace__terminal">
+        <span class="cpTripLegRoutePlace__terminalIcon">T{{ terminal.terminal_code }}</span>
+        <span class="cpTripLegRoutePlace__terminalLabel">{{ terminalLabel }}</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { CpTripDetailsConfig } from '@/constants/tripDetails/CpTripDetailsConfig'
+import type { FlightTerminal } from '@/constants/tripDetails/Terminal'
+import type { TripDateTime } from '@/helpers/tripDetails'
+
+import { FlightStopTypes } from '@/constants/tripDetails/FlightStopTypes'
+import CpIcon from './CpIcon.vue'
+import CpTooltip from './CpTooltip.vue'
+
+interface Props {
+  city: string
+  config: CpTripDetailsConfig
+  dayCountAfterArrival?: number
+  dayCountAfterDeparture?: number
+  iata: string
+  terminal?: FlightTerminal
+  time: TripDateTime
+  type: FlightStopTypes
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dayCountAfterArrival: 0,
+  dayCountAfterDeparture: 0,
+  terminal: undefined,
+})
+
+const displayPinIcon = computed(() => props.type === FlightStopTypes.DESTINATION)
+const classes = computed(() => `cpTripLegRoutePlace--${props.type}`)
+const dateFormatted = computed(() => props.time.toFormat('ccc, LLL d'))
+const formattedTime = computed(() => props.time.toFormat('T'))
+const terminalLabel = computed(() => props.terminal?.label || props.config.routePlace.terminalNotSpecified)
+const plusOneDay = computed(() => props.dayCountAfterArrival || props.dayCountAfterDeparture)
+const isoTime = computed(() => props.time.toISO() ?? '')
+</script>
+
+<style lang="scss">
+.cpTripLegRoutePlace {
+  position: relative;
+  display: flex;
+
+  &::before {
+    position: absolute;
+    width: fn.px-to-rem(24);
+    background-image: url('@/assets/images/dot.svg');
+    background-position: center center;
+    background-repeat: repeat-y;
+    background-size: var(--cp-spacing-sm);
+    content: '';
+    inset: 0;
+  }
+
+  &--layover:last-child::before {
+    width: fn.px-to-rem(2);
+    background-color: var(--cp-border-soft);
+    inset: 0 fn.px-to-rem(11);
+  }
+
+  &--destination:last-child::before {
+    content: none;
+  }
+
+  &__pin {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    width: fn.px-to-rem(24);
+    height: fn.px-to-rem(22); // Same value as __details line-height
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    margin-right: var(--cp-spacing-lg);
+    color: var(--cp-text-secondary); // Visual design, no design token needed
+
+    > i {
+      width: fn.px-to-rem(18);
+      height: fn.px-to-rem(22);
+    }
+
+    &::before,
+    &::after {
+      background-color: var(--cp-background-primary);
+      content: '';
+    }
+
+    &::before {
+      position: absolute;
+      z-index: -1;
+      top: calc(#{var(--cp-spacing-xs)} * -1);
+      left: 0;
+      width: 100%;
+      height: calc(100% + #{var(--cp-spacing-sm)});
+    }
+  }
+
+  &--origin &__pin::after {
+    width: fn.px-to-rem(10);
+    border: max(1.5px, 0.08em) solid var(--cp-border-soft); // Visual design, no design token needed
+    border-radius: fn.px-to-rem(1000);
+    aspect-ratio: 1 / 1;
+  }
+
+  &--layover &__pin::after {
+    width: fn.px-to-rem(4);
+    height: fn.px-to-rem(4);
+    border-radius: fn.px-to-rem(1000);
+    background-color: var(--cp-text-secondary); // Visual design, no design token needed
+  }
+
+  &__details {
+    line-height: fn.px-to-rem(22); // Same value as pin height
+  }
+
+  &__timeTooltip {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  &__details > * {
+    display: inline-block;
+    vertical-align: middle;
+
+    &:not(:first-child) {
+      font-size: fn.px-to-em(14);
+    }
+
+    &:not(:last-child)::after {
+      display: inline-block;
+      margin: 0 var(--cp-spacing-md);
+      color: currentColor;
+      content: '•';
+      font-size: fn.px-to-em(10);
+      transform: translateY(-1px);
+    }
+  }
+
+  :is(&__time, &__city) {
+    font-weight: 500;
+  }
+
+  &__time {
+    font-variant: tabular-nums;
+  }
+
+  &__iata {
+    color: var(--cp-text-secondary);
+    font-weight: normal;
+  }
+
+  &__terminal {
+    color: var(--cp-text-secondary);
+    line-height: fn.px-to-rem(12);
+
+    > span {
+      vertical-align: middle;
+    }
+  }
+
+  &__terminalIcon {
+    display: inline-block;
+    min-width: fn.px-to-rem(16);
+    min-height: fn.px-to-rem(16);
+    padding: fn.px-to-rem(1) fn.px-to-rem(3);
+    border: fn.px-to-rem(1.5) solid var(--cp-border-soft);
+    border-radius: fn.px-to-rem(2);
+    margin-right: var(--cp-spacing-md);
+    font-size: fn.px-to-rem(9);
+    text-align: center;
+    vertical-align: middle;
+  }
+}
+</style>

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>