@citizenplane/pimp 18.19.10 → 18.21.0

package/package.json

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

package/src/components/CpAncillaryFlightSelection.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="cpAncillaryFlightSelection">
+    <div class="cpAncillaryFlightSelection__toggle">
+      <cp-switch v-model="applyToAllFlights" color="accent" :label="label" reverse-label />
+    </div>
+    <cp-transition-expand>
+      <div v-if="!applyToAllFlights">
+        <div class="cpAncillaryFlightSelection__tabsWrapper">
+          <div class="cpAncillaryFlightSelection__tabs" role="tablist">
+            <button
+              v-for="(flight, index) in flights"
+              :key="flight.id"
+              :aria-selected="isActiveTab(flight.id)"
+              class="cpAncillaryFlightSelection__tab"
+              :class="getTabDynamicClass(flight.id)"
+              role="tab"
+              type="button"
+              @click="handleSelectFlight(flight)"
+            >
+              <span class="cpAncillaryFlightSelection__tabLabel">{{ getTabLabel(index) }}</span>
+              <span class="cpAncillaryFlightSelection__tabRoute">
+                <span
+                  class="cpAncillaryFlightSelection__tabRouteText cpAncillaryFlightSelection__tabRouteText--city"
+                  >{{ flight.originCity }}</span
+                >
+                <span
+                  class="cpAncillaryFlightSelection__tabRouteText cpAncillaryFlightSelection__tabRouteText--iata"
+                  >{{ flight.originIata }}</span
+                >
+                <cp-icon class="cpAncillaryFlightSelection__tabIcon" size="16" type="arrow-right" />
+                <span
+                  class="cpAncillaryFlightSelection__tabRouteText cpAncillaryFlightSelection__tabRouteText--city"
+                  >{{ flight.destinationCity }}</span
+                >
+                <span
+                  class="cpAncillaryFlightSelection__tabRouteText cpAncillaryFlightSelection__tabRouteText--iata"
+                  >{{ flight.destinationIata }}</span
+                >
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </cp-transition-expand>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CpAncillaryFlightSelectionFlight } from '@/constants/CpAncillaryFlightSelectionTypes'
+
+interface Props {
+  flights: CpAncillaryFlightSelectionFlight[]
+  label?: string
+  outboundLabel?: string
+  returnLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Apply to all flights',
+  outboundLabel: 'Outbound',
+  returnLabel: 'Return',
+})
+
+const applyToAllFlights = defineModel<boolean>('applyToAllFlights', { default: false })
+const activeFlightId = defineModel<string | undefined>('activeFlightId')
+
+const isActiveTab = (id: string) => id === activeFlightId.value
+
+const getTabDynamicClass = (id: string): string =>
+  isActiveTab(id) ? 'cpAncillaryFlightSelection__tab--isActive' : ''
+
+const getTabLabel = (index: number): string => (index === 0 ? props.outboundLabel : props.returnLabel)
+
+const handleSelectFlight = (flight: CpAncillaryFlightSelectionFlight) => {
+  activeFlightId.value = flight.id
+}
+</script>
+
+<style lang="scss">
+.cpAncillaryFlightSelection {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: var(--cp-spacing-sm);
+  border-radius: var(--cp-radius-xl);
+  background: var(--cp-background-tertiary);
+  container-type: inline-size;
+  gap: var(--cp-spacing-sm);
+
+  &__toggle {
+    padding: var(--cp-spacing-lg) var(--cp-spacing-xl) var(--cp-spacing-lg) var(--cp-spacing-lg);
+    border-radius: var(--cp-radius-lg);
+    background: var(--cp-background-primary);
+
+    .cpSwitch__label {
+      color: var(--cp-text-secondary);
+      font-size: var(--cp-text-size-md);
+      font-weight: 500;
+      line-height: var(--cp-text-md-line-height);
+    }
+  }
+
+  &__tabsWrapper {
+    display: flex;
+    align-items: center;
+    padding: var(--cp-spacing-lg);
+    gap: var(--cp-spacing-md);
+  }
+
+  &__tabs {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding: var(--cp-spacing-sm);
+    border-radius: var(--cp-radius-md);
+    background: var(--cp-background-quaternary);
+    gap: var(--cp-spacing-sm);
+  }
+
+  &__tab {
+    @extend %u-focus-outline;
+
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
+    border-radius: var(--cp-radius-sm);
+    gap: var(--cp-spacing-sm-md);
+
+    &--isActive {
+      background: var(--cp-background-primary);
+      box-shadow: var(--cp-shadows-xs);
+    }
+  }
+
+  &__tabLabel {
+    color: var(--cp-text-tertiary);
+    font-size: var(--cp-text-size-xs);
+    font-weight: 600;
+    letter-spacing: 1px;
+    line-height: var(--cp-text-xs-line-height);
+    padding-inline: var(--cp-spacing-xs);
+    text-transform: uppercase;
+  }
+
+  &__tabRoute {
+    display: flex;
+    align-items: center;
+    gap: var(--cp-spacing-sm);
+  }
+
+  &__tabRouteText {
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-md);
+    font-weight: 500;
+    line-height: var(--cp-text-md-line-height);
+
+    &--iata {
+      display: none;
+    }
+  }
+
+  &__tabIcon {
+    color: var(--cp-text-tertiary);
+  }
+
+  &__tab--isActive &__tabLabel {
+    color: var(--cp-text-primary);
+  }
+
+  &__tab--isActive &__tabRouteText {
+    color: var(--cp-text-accent-primary);
+  }
+
+  &__tab--isActive &__tabIcon {
+    color: var(--cp-foreground-accent-secondary);
+  }
+
+  @container (width < 30rem) {
+    .cpAncillaryFlightSelection__tabRouteText {
+      &--city {
+        display: none;
+      }
+
+      &--iata {
+        display: inline;
+      }
+    }
+  }
+}
+</style>

package/src/components/CpStepper.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="cpStepper">
+    <div class="cpStepper__wrapper">
+      <div v-for="(step, stepIndex) in steps" :key="step.id" class="cpStepper__stepWrapper">
+        <button
+          class="cpStepper__step"
+          :class="stepActiveClass(step)"
+          :disabled="isStepDisabled(stepIndex)"
+          type="button"
+          @click="handleStepClick(step)"
+        >
+          <span class="cpStepper__stepNumber">{{ stepIndex + 1 }}</span>
+          <span class="cpStepper__stepTitle">{{ step.label }}</span>
+        </button>
+        <cp-icon v-if="isNotLastStep(stepIndex)" class="cpStepper__chevron" size="16" type="chevron-right" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CpStepperStep } from '@/constants/CpStepperTypes'
+
+import CpIcon from '@/components/CpIcon.vue'
+
+interface Props {
+  activeStepId?: string
+  reachedStepIndex?: number
+  steps: CpStepperStep[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  activeStepId: undefined,
+  reachedStepIndex: 0,
+})
+
+const emit = defineEmits<{ select: [id: string] }>()
+
+const isNotLastStep = (stepIndex: number) => stepIndex < props.steps.length - 1
+
+const isStepDisabled = (stepIndex: number) => stepIndex > props.reachedStepIndex
+
+const stepActiveClass = (step: CpStepperStep) => (step.id === props.activeStepId ? 'cpStepper__step--isActive' : '')
+
+const handleStepClick = (step: CpStepperStep) => emit('select', step.id)
+</script>
+
+<style lang="scss">
+.cpStepper {
+  min-width: 0;
+  flex: 1;
+  container-type: inline-size;
+
+  &__wrapper,
+  &__stepWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cp-spacing-md);
+  }
+
+  &__stepWrapper {
+    @extend %u-text-ellipsis;
+  }
+
+  &__step {
+    @extend %u-text-ellipsis;
+
+    display: flex;
+    align-items: center;
+    padding: fn.px-to-rem(6);
+    border: fn.px-to-rem(1) solid var(--cp-border-soft);
+    border-radius: fn.px-to-rem(50);
+    color: var(--cp-text-secondary);
+    gap: var(--cp-spacing-sm);
+    outline-offset: fn.px-to-rem(-2);
+
+    @container (width < 60.5rem) {
+      padding: var(--cp-spacing-sm);
+    }
+
+    &--isActive {
+      border-color: transparent;
+      background-color: var(--cp-background-accent-secondary);
+      color: var(--cp-text-accent-primary);
+    }
+
+    &:not(:disabled) {
+      @extend %u-focus-outline;
+
+      border-radius: fn.px-to-rem(50);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__stepNumber {
+    @include mx.square-sizing(20);
+
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: var(--cp-background-secondary);
+    font-size: var(--cp-text-size-xs);
+    font-weight: 500;
+    line-height: var(--cp-text-xs-line-height);
+  }
+
+  &__step--isActive &__stepNumber {
+    background-color: var(--cp-background-accent-solid);
+    color: var(--cp-text-white);
+  }
+
+  &__stepTitle {
+    @extend %u-text-ellipsis;
+
+    font-size: var(--cp-text-size-sm);
+    font-weight: 500;
+    line-height: var(--cp-text-sm-line-height);
+    padding-inline: var(--cp-spacing-sm);
+
+    @container (width < 60.5rem) {
+      display: none;
+    }
+  }
+
+  &__chevron {
+    flex-shrink: 0;
+    color: var(--cp-foreground-quaternary);
+  }
+}
+</style>

package/src/components/CpStepperMobile.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="cpStepperMobile">
+    <button v-if="hasPreviousButton" class="cpStepperMobile__back" type="button" @click="emit('previous')">
+      <cp-icon size="24" type="chevron-left" />
+    </button>
+    <div class="cpStepperMobile__wrapper">
+      <cp-heading class="cpStepperMobile__title" heading-level="h3" :size="600">
+        <transition mode="out-in" :name="titleTransitionName">
+          <span :key="activeStepLabel" class="cpStepperMobile__titleInner">{{ activeStepLabel }}</span>
+        </transition>
+      </cp-heading>
+      <div class="cpStepperMobile__steps">
+        <div v-for="step in steps" :key="step.id" class="cpStepperMobile__step" :class="stepActiveClass(step)" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+import CpHeading from '@/components/CpHeading.vue'
+import CpIcon from '@/components/CpIcon.vue'
+
+import { type CpStepperStep, CpStepperTransitionDirections } from '@/constants/CpStepperTypes'
+
+interface Props {
+  activeStepId?: string
+  hasPreviousButton?: boolean
+  steps: CpStepperStep[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  activeStepId: undefined,
+  hasPreviousButton: false,
+})
+
+const emit = defineEmits<{ previous: [] }>()
+
+const activeStep = computed(() => props.steps.find((step) => step.id === props.activeStepId))
+const activeStepLabel = computed(() => activeStep.value?.label)
+
+const titleTransitionDirection = ref<CpStepperTransitionDirections>(CpStepperTransitionDirections.FORWARD)
+const titleTransitionName = computed(() => `slide-${titleTransitionDirection.value}`)
+
+const stepActiveClass = (step: CpStepperStep) =>
+  step.id === props.activeStepId ? 'cpStepperMobile__step--isActive' : ''
+
+watch(
+  () => props.activeStepId,
+  (newStepId, oldStepId) => {
+    if (!newStepId || !oldStepId) return
+
+    const newIndex = props.steps.findIndex((step) => step.id === newStepId)
+    const oldIndex = props.steps.findIndex((step) => step.id === oldStepId)
+
+    titleTransitionDirection.value =
+      newIndex > oldIndex ? CpStepperTransitionDirections.BACKWARD : CpStepperTransitionDirections.FORWARD
+  },
+)
+</script>
+
+<style lang="scss">
+.cpStepperMobile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__back {
+    @extend %u-focus-outline;
+
+    position: relative;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--cp-foreground-accent-secondary);
+  }
+
+  &__wrapper {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--cp-spacing-sm) var(--cp-spacing-xl);
+  }
+
+  &__title {
+    overflow: hidden;
+    font-size: var(--cp-text-size-lg);
+    font-weight: 600;
+    line-height: var(--cp-text-lg-line-height);
+  }
+
+  &__titleInner {
+    display: flex;
+  }
+
+  &__steps {
+    display: flex;
+    width: 100%;
+    max-width: fn.px-to-rem(192);
+    min-height: fn.px-to-rem(20);
+    align-items: center;
+    justify-content: center;
+    gap: var(--cp-spacing-md);
+  }
+
+  &__step {
+    height: fn.px-to-rem(4);
+    flex: 0 0 fn.px-to-rem(24);
+    border-radius: fn.px-to-rem(4);
+    background-color: var(--cp-utility-accent-100);
+    transition:
+      flex-basis 500ms var(--cp-easing-elastic),
+      background-color 500ms ease;
+
+    &--isActive {
+      flex-basis: fn.px-to-rem(48);
+      background-color: var(--cp-background-accent-solid);
+    }
+  }
+}
+
+.slide-backward,
+.slide-forward {
+  &-enter-active,
+  &-leave-active {
+    transition:
+      transform 200ms ease,
+      opacity 200ms ease;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slide-forward {
+  &-enter-from {
+    transform: translate3d(3vw, 0, 0);
+  }
+
+  &-leave-to {
+    transform: translate3d(-3vw, 0, 0);
+  }
+}
+
+.slide-backward {
+  &-enter-from {
+    transform: translate3d(-3vw, 0, 0);
+  }
+
+  &-leave-to {
+    transform: translate3d(3vw, 0, 0);
+  }
+}
+</style>

package/src/components/index.ts

@@ -21,6 +21,7 @@ import CpAccordionGroup from './CpAccordionGroup.vue'
 import CpAirlineLogo from './CpAirlineLogo.vue'
 import CpAlert from './CpAlert.vue'
 import CpAncillaryCategory from './CpAncillaryCategory.vue'
+import CpAncillaryFlightSelection from './CpAncillaryFlightSelection.vue'
 import CpAncillaryItem from './CpAncillaryItem.vue'
 import CpBadge from './CpBadge.vue'
 import CpBottomSheet from './CpBottomSheet.vue'
@@ -60,6 +61,8 @@ import CpSegmentedControl from './CpSegmentedControl.vue'
 import CpSelect from './CpSelect.vue'
 import CpSelectableButton from './CpSelectableButton.vue'
 import CpSelectMenu from './CpSelectMenu.vue'
+import CpStepper from './CpStepper.vue'
+import CpStepperMobile from './CpStepperMobile.vue'
 import CpSwitch from './CpSwitch.vue'
 import CpTable from './CpTable.vue'
 import CpTableColumnEditor from './CpTableColumnEditor.vue'
@@ -118,6 +121,7 @@ const Components = {
   CpCalendar,
   CpAlert,
   CpAncillaryCategory,
+  CpAncillaryFlightSelection,
   CpAncillaryItem,
   CpLoader,
   CpInput,
@@ -131,6 +135,8 @@ const Components = {
   CpRadio,
   CpRadioGroup,
   CpSelectableButton,
+  CpStepper,
+  CpStepperMobile,
   CpSwitch,
   CpSegmentedControl,
   CpTable,
@@ -191,6 +197,8 @@ const Pimp: Plugin = {
   },
 }
 
+export type { CpAncillaryFlightSelectionFlight } from '@/constants/CpAncillaryFlightSelectionTypes'
+export type { CpStepperStep } from '@/constants/CpStepperTypes'
 export type {
   CpSeatMapConfig,
   CpSeatMapSeatSelection,
@@ -214,6 +222,7 @@ export type {
 
 export { CpAncillaryCategoryTypes, isSwitchCategory } from '@/constants/CpAncillaryCategoryTypes'
 export { CpAncillaryItemTypes } from '@/constants/CpAncillaryItemTypes'
+export { CpStepperTransitionDirections } from '@/constants/CpStepperTypes'
 export {
   CpSeatMapTransitionDirections,
   DEFAULT_CP_SEAT_MAP_CONFIG,
@@ -232,6 +241,7 @@ export {
   CpAirlineLogo,
   CpAlert,
   CpAncillaryCategory,
+  CpAncillaryFlightSelection,
   CpAncillaryItem,
   CpBadge,
   CpBottomSheet,
@@ -272,6 +282,8 @@ export {
   CpSelect,
   CpSelectableButton,
   CpSelectMenu,
+  CpStepper,
+  CpStepperMobile,
   CpSwitch,
   CpTable,
   CpTableColumnEditor,

package/src/constants/CpAncillaryFlightSelectionTypes.ts

@@ -0,0 +1,7 @@
+export interface CpAncillaryFlightSelectionFlight {
+  destinationCity?: string
+  destinationIata?: string
+  id: string
+  originCity?: string
+  originIata?: string
+}

package/src/constants/CpStepperTypes.ts

@@ -0,0 +1,9 @@
+export interface CpStepperStep {
+  id: string
+  label: string
+}
+
+export enum CpStepperTransitionDirections {
+  BACKWARD = 'backward',
+  FORWARD = 'forward',
+}