@citizenplane/pimp 18.6.2 → 18.8.0

package/src/components/CpTooltip.vue

@@ -1,12 +1,11 @@
 <template>
   <v-tooltip
     :aria-id="ariaId"
-    class="cpTooltip"
-    :class="dynamicTooltipClasses"
-    :container="false"
+    :popper-class="dynamicTooltipClasses"
     :disabled
     :distance
     :placement
+    :container="dynamicContainer"
   >
     <slot />
     <template #popper>
@@ -34,10 +33,10 @@
 </template>
 
 <script setup lang="ts">
+// biome-ignore lint: required for floating-vue
 import { Tooltip as VTooltip } from 'floating-vue'
-import { useId, useSlots, computed } from 'vue'
-
 import type { Slots } from 'vue'
+import { computed, useId, useSlots } from 'vue'
 
 import { Colors } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
@@ -46,6 +45,7 @@ type TooltipColors = Extract<Colors, 'accent' | 'neutral'>
 type Placement = 'top' | 'right' | 'bottom' | 'left'
 
 interface Props {
+  allowOutsideContainer?: boolean
   color?: TooltipColors
   content?: string
   disabled?: boolean
@@ -60,6 +60,7 @@ const props = withDefaults(defineProps<Props>(), {
   color: 'accent',
   placement: undefined,
   subcontent: '',
+  allowOutsideContainer: false,
 })
 
 const ariaId = useId()
@@ -67,7 +68,8 @@ const slots: Slots = useSlots()
 
 const hasSubcontent = computed(() => !!(props.subcontent || slots.subcontent))
 
-const dynamicTooltipClasses = computed(() => [`cpTooltip--is${capitalizeFirstLetter(props.color)}`])
+const dynamicTooltipClasses = computed(() => ['cpTooltip', `cpTooltip--is${capitalizeFirstLetter(props.color)}`])
+const dynamicContainer = computed(() => props.allowOutsideContainer ? undefined : false)
 </script>
 
 <style lang="scss">
@@ -76,14 +78,14 @@ const dynamicTooltipClasses = computed(() => [`cpTooltip--is${capitalizeFirstLet
   white-space: pre-wrap;
 
   .v-popper__inner {
+    max-width: fn.px-to-rem(300);
     padding: var(--cp-spacing-md) var(--cp-spacing-lg);
     border-radius: var(--cp-radius-md);
     background-color: var(--cp-tooltip-bg);
     font-size: var(--cp-text-size-xs);
+    font-weight: 400;
     line-height: var(--cp-line-height-xs);
-    max-width: fn.px-to-rem(300);
     text-align: left;
-    font-weight: 400;
   }
 
   .cpTooltip__content {
@@ -97,16 +99,16 @@ const dynamicTooltipClasses = computed(() => [`cpTooltip--is${capitalizeFirstLet
   }
 
   .cpTooltip__separator {
+    width: 100%;
     border: none;
     border-top: 1px solid var(--cp-colors-white);
-    opacity: 0.5;
-    width: 100%;
     margin: var(--cp-spacing-md) 0;
+    opacity: 0.5;
   }
 
   .cpTooltip__subcontent {
-    font-style: italic;
     color: var(--cp-tooltip-subcontent-text);
+    font-style: italic;
   }
 
   .v-popper__arrow-outer {
@@ -120,9 +122,9 @@ const dynamicTooltipClasses = computed(() => [`cpTooltip--is${capitalizeFirstLet
   }
 
   &.cpTooltip--isNeutral {
-    --cp-tooltip-bg: color-mix(in srgb, var(--cp-background-black) 80%, transparent);
+    --cp-tooltip-bg: color-mix(in sRGB, var(--cp-background-black) 80%, transparent);
     --cp-tooltip-content-text: var(--cp-foreground-white);
-    --cp-tooltip-subcontent-text: color-mix(in srgb, var(--cp-foreground-white) 70%, transparent);
+    --cp-tooltip-subcontent-text: color-mix(in sRGB, var(--cp-foreground-white) 70%, transparent);
   }
 }
 </style>

package/src/components/CpTransitionCounter.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 interface Props {
   counterNumber?: number

package/src/components/CpTransitionExpand.vue

@@ -29,7 +29,7 @@ const enter = (element: Element) => {
   // Force repaint to make sure the
   // animation is triggered correctly.
 
-  // @typescript-eslint/no-unused-expressions
+  // Intentional expression statement to force layout recalculation before animating.
   void getComputedStyle(el).height
 
   requestAnimationFrame(() => (el.style.height = height))
@@ -51,20 +51,20 @@ const leave = (element: Element): void => {
 
 <style scoped>
 * {
-  will-change: height;
-  transform: translateZ(0);
   backface-visibility: hidden;
   perspective: 1000px;
+  transform: translateZ(0);
+  will-change: height;
 }
 </style>
 
 <style lang="scss">
 .expand-enter-active,
 .expand-leave-active {
-  transition-property: opacity, height;
+  overflow: hidden;
   transition-duration: 0.2s;
+  transition-property: opacity, height;
   transition-timing-function: ease-out;
-  overflow: hidden;
 }
 
 .expand-enter-from,

package/src/components/CpTransitionSize.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount, useId, nextTick } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId } from 'vue'
 
 interface Props {
   type?: 'width' | 'height'

package/src/components/CpTrip.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="cpTrip">
+    <div class="cpTrip__content">
+      <div class="cpTrip__routePoint">
+        <time class="cpTrip__time" :datetime="trip.departureDate.raw">{{ trip.departureTime }}</time>
+        <span class="cpTrip__iata">{{ trip.origin.iataCode }}</span>
+      </div>
+      <cp-trip-timeline
+        :airlines="uniqueAirlines"
+        :hide-airlines="hideAirlines"
+        class="cpTrip__timeline"
+        :flight-duration="trip.flightDuration.formatted"
+        :has-self-transfer="trip.hasSelfTransfer"
+        :labels="trip.labels"
+        :stops="trip.stops"
+      />
+      <div class="cpTrip__routePoint">
+        <time class="cpTrip__time" :datetime="trip.arrivalDate.raw">{{ trip.arrivalTime }}</time>
+        <span class="cpTrip__iata">
+          {{ trip.destination.iataCode }}
+          <span v-if="trip.dayCountAfterDeparture" class="cpTrip__plus">+{{ trip.dayCountAfterDeparture }}</span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import CpTripTimeline from '@/components/CpTripTimeline.vue'
+
+type Trip = {
+  airlines: {
+    iataCode: string
+    name: string
+  }[];
+  arrivalDate: {
+    formatted: string
+    raw: string
+  }
+  arrivalTime: string
+  dayCountAfterDeparture?: number
+  departureDate: {
+    formatted: string
+    raw: string
+  }
+  departureTime: string
+  destination: {
+    iataCode: string
+    name: string
+  }
+  flightDuration: {
+    formatted: string
+    raw: string
+  }
+  hasSelfTransfer?: boolean
+  labels?: {
+    layover?: string
+    nonStop?: string
+    stopCount?: string
+    transfer?: string
+  }
+  origin: {
+    iataCode: string
+    name: string
+  }
+  stops?: {
+    duration: string
+    iata: string
+    name: string
+  }[]
+}
+
+interface Props {
+  hideAirlines?: boolean
+  trip: Trip
+}
+
+const props = defineProps<Props>()
+
+const uniqueAirlines = computed(() => {
+  const allAirlinesIataCodes = props.trip.airlines.map((airline) => airline.iataCode)
+  const uniqueAirlineIatas: string[] = Array.from(new Set(allAirlinesIataCodes))
+
+  const allUniqueAirlines = uniqueAirlineIatas.map((uniqueIataCode: string) => {
+    return props.trip.airlines.find((airline) => airline.iataCode === uniqueIataCode)
+  })
+
+  return allUniqueAirlines as {
+    iataCode: string
+    name: string
+  }[]
+})
+</script>
+
+<style lang="scss">
+.cpTrip {
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__title {
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-xs);
+    font-weight: 600;
+    line-height: var(--cp-line-height-xs);
+    padding-block: var(--cp-spacing-sm);
+    text-transform: uppercase;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: var(--cp-spacing-2xl);
+  }
+
+  &__timeline {
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__routePoint {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &:last-child {
+      align-items: flex-end;
+    }
+  }
+
+  &__plus {
+    position: absolute;
+    top: fn.px-to-rem(-2);
+    right: fn.px-to-rem(-12);
+    color: var(--cp-text-error-primary);
+    font-size: fn.px-to-rem(10);
+    line-height: fn.px-to-rem(14);
+  }
+
+  &__time {
+    font-size: var(--cp-text-size-xl);
+    font-weight: 600;
+    line-height: var(--cp-line-height-xl);
+  }
+
+  &__iata {
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-md);
+    font-weight: 500;
+    line-height: var(--cp-line-height-md);
+  }
+}
+
+@include mx.media-query-max(370px) {
+  .cpTrip {
+    &__content {
+      gap: var(--cp-spacing-md);
+    }
+  }
+}
+
+@include mx.media-query-max(300px) {
+  .cpTrip {
+    &__content {
+      justify-content: center;
+      gap: var(--cp-spacing-sm);
+    }
+
+    &__time {
+      font-size: var(--cp-text-size-lg);
+      line-height: var(--cp-line-height-sm);
+    }
+
+    &__iata {
+      font-size: var(--cp-text-size-sm);
+      line-height: var(--cp-line-height-sm);
+    }
+
+    &__plus {
+      font-size: fn.px-to-rem(8);
+      line-height: fn.px-to-rem(10);
+    }
+  }
+}
+</style>

package/src/components/CpTripTimeline.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="cpTripTimeline">
+    <div class="cpTripTimeline__information">
+      <div class="cpTripTimeline__dotWrapper">
+        <span class="cpTripTimeline__dot" />
+      </div>
+      <cp-badge :size="badgeDynamicSize">
+        {{ flightDuration }}
+      </cp-badge>
+      <cp-tooltip v-if="!hideAirlines" allow-outside-container>
+        <div class="cpTripTimeline__airlines">
+          <div
+            v-for="(airline, index) in firstAirlines"
+            :key="airline.iataCode"
+            class="cpTripTimeline__airlineLogo"
+          >
+            <span v-if="displayRemainingAirlinesCount(index)" class="cpTripTimeline__remaining">+{{ remainingAirlinesCount }}</span>
+            <cp-airline-logo v-else :iata-code="airline.iataCode" :size="logoDynamicSize" />
+          </div>
+        </div>
+        <template #content>
+          <ul class="cpTripTimeline__airlinesList">
+            <li v-for="airline in airlines" :key="airline.iataCode">{{ airline.name }}</li>
+          </ul>
+        </template>
+      </cp-tooltip>
+      <div class="cpTripTimeline__dotWrapper">
+        <span class="cpTripTimeline__dot" />
+      </div>
+    </div>
+    <cp-tooltip class="cpTripTimeline__tooltip" :disabled="!hasStops" allow-outside-container>
+      <p class="cpTripTimeline__summary">
+        <template v-if="hasStops">
+          <span class="cpTripTimeline__stop">{{ stopLabel }}</span>
+          <span v-if="hasSelfTransfer" class="cpTripTimeline__transfer">
+            {{ transferLabel }}
+          </span>
+          <span>{{ formattedStops }}</span>
+        </template>
+        <span v-else>{{ nonStopLabel }}</span>
+      </p>
+      <template #content>
+        <ul class="cpTripTimeline__stops">
+          <li v-for="stop in stops" :key="stop.iata">
+            {{ stop.duration }} {{ layoverLabel }} •
+            <template v-if="stop.selfTransferLabel">
+              {{ stop.selfTransferLabel }}
+            </template>
+            <template v-else> {{ stop.name }} ({{ stop.iata }})</template>
+
+            <hr />
+          </li>
+        </ul>
+      </template>
+    </cp-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useDynamicSize } from '@/composables/useDynamicSize'
+
+interface Props {
+  airlines: {
+    iataCode: string;
+    name: string;
+  }[];
+  flightDuration: string;
+  hasSelfTransfer?: boolean;
+  hideAirlines?: boolean;
+  labels?: {
+    layover?: string;
+    nonStop?: string;
+    stopCount?: string;
+    transfer?: string;
+  };
+  stops?: {
+    duration: string;
+    iata: string;
+    name: string;
+    selfTransferLabel?: string;
+  }[];
+}
+
+const props = defineProps<Props>()
+
+const stopLabel = computed(() => props.labels?.stopCount)
+const layoverLabel = computed(() => props.labels?.layover)
+const nonStopLabel = computed(() => props.labels?.nonStop)
+const transferLabel = computed(() => props.labels?.transfer)
+
+const badgeDynamicSize = useDynamicSize({ default: 'sm', 300: 'xs' })
+const logoDynamicSize = useDynamicSize({ default: 24, 300: 20 })
+
+const hasStops = computed(() => !!props.stops?.length)
+
+const AIRLINES_LIMIT = 3
+const firstAirlines = computed(() => props.airlines.slice(0, AIRLINES_LIMIT))
+const hasMoreAirlinesThanLimit = computed(() => props.airlines.length > (AIRLINES_LIMIT + 1))
+
+const formattedStops = computed(() => {
+  if (!hasStops.value) return ''
+  return props.stops!.map(({ name }) => name).join(', ')
+})
+
+const remainingAirlinesCount = computed(() => props.airlines.length - firstAirlines.value.length)
+
+const displayRemainingAirlinesCount = (index: number) => {
+  const isLastItem = index === firstAirlines.value.length - 1
+  return hasMoreAirlinesThanLimit.value && isLastItem
+}
+</script>
+
+<style lang="scss">
+.cpTripTimeline {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__information {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cp-spacing-md);
+    padding-block: fn.px-to-rem(3);
+
+    &::before,
+    &::after {
+      display: block;
+      width: 100%;
+      min-width: 0;
+      height: fn.px-to-rem(2);
+      flex: 1 1 fn.px-to-rem(32);
+      border-radius: var(--cp-radius-xs);
+      background-color: var(--cp-border-soft);
+      content: "";
+      transform-origin: right;
+      transition: transform 300ms var(--cp-easing-elastic);
+    }
+  }
+
+  &__dotWrapper {
+    display: flex;
+    width: fn.px-to-rem(16);
+    height: fn.px-to-rem(16);
+    align-items: center;
+    justify-content: center;
+
+    &:first-child {
+      order: -1;
+    }
+
+    &:last-child {
+      order: 1;
+    }
+  }
+
+  &__dot {
+    width: fn.px-to-rem(6);
+    height: fn.px-to-rem(6);
+    border-radius: var(--cp-radius-full);
+    background-color: var(--cp-foreground-quaternary);
+  }
+
+  &__airlines {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--cp-spacing-xs);
+
+    > *:not(:first-child) {
+      margin-left: calc(var(--cp-spacing-md) * -1);
+    }
+  }
+
+  &__remaining {
+    display: flex;
+    width: fn.px-to-rem(24);
+    height: fn.px-to-rem(24);
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--cp-radius-sm);
+    background: var(--cp-background-tertiary);
+    font-size: var(--cp-text-size-xs);
+    font-weight: 600;
+    line-height: var(--cp-line-height-xs);
+  }
+
+  &__tooltip {
+    display: inline-flex;
+    width: 100%;
+    justify-content: center;
+    padding-block: var(--cp-spacing-sm);
+  }
+
+  &__summary {
+    @extend %u-text-ellipsis;
+
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-xs);
+    line-height: var(--cp-line-height-xs);
+
+    &:has(.cpTripTimeline__stop) {
+      border-bottom: 1px dashed var(--cp-border-strong);
+      cursor: help;
+    }
+
+    span:not(:first-child)::before {
+      color: var(--cp-text-secondary);
+      content: "•";
+      font-size: var(--cp-text-size-xs);
+      letter-spacing: var(--cp-letter-spacing-xs);
+      line-height: var(--cp-line-height-xs);
+      margin-inline: var(--cp-spacing-xs);
+    }
+  }
+
+  &__transfer {
+    color: var(--cp-text-error-primary);
+    text-transform: capitalize;
+  }
+
+  &__stops {
+    max-width: fn.px-to-rem(300);
+  }
+
+  &__stops li hr {
+    border-radius: var(--cp-radius-md);
+    margin-block: var(--cp-spacing-md);
+  }
+
+  &__stops li:last-child hr {
+    display: none;
+  }
+}
+
+@include mx.media-query-max(370px) {
+  .cpTripTimeline {
+    &__dotWrapper {
+      display: none;
+    }
+  }
+}
+
+@include mx.media-query-max(300px) {
+  .cpTripTimeline {
+    &__information {
+      padding-block: 0;
+
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+
+    &__remaining {
+      width: fn.px-to-rem(20);
+      height: fn.px-to-rem(20);
+      font-size: fn.px-to-rem(10);
+    }
+
+    &__tooltip {
+      padding-block: var(--cp-spacing-xs);
+    }
+  }
+}
+</style>