@citizenplane/pimp 18.20.0 → 18.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.20.0",
+  "version": "18.21.1",
   "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/CpStepperMobile.vue

@@ -5,9 +5,7 @@
     </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-text-morph :text="activeStepLabel ?? ''" class="cpStepperMobile__titleInner" />
       </cp-heading>
       <div class="cpStepperMobile__steps">
         <div v-for="step in steps" :key="step.id" class="cpStepperMobile__step" :class="stepActiveClass(step)" />
@@ -17,12 +15,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed } from 'vue'
+
+import type { CpStepperStep } from '@/constants/CpStepperTypes'
 
 import CpHeading from '@/components/CpHeading.vue'
 import CpIcon from '@/components/CpIcon.vue'
-
-import { type CpStepperStep, CpStepperTransitionDirections } from '@/constants/CpStepperTypes'
+import CpTextMorph from '@/components/CpTextMorph.vue'
 
 interface Props {
   activeStepId?: string
@@ -40,24 +39,8 @@ 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">
@@ -122,43 +105,4 @@ watch(
     }
   }
 }
-
-.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'
@@ -120,6 +121,7 @@ const Components = {
   CpCalendar,
   CpAlert,
   CpAncillaryCategory,
+  CpAncillaryFlightSelection,
   CpAncillaryItem,
   CpLoader,
   CpInput,
@@ -195,6 +197,7 @@ const Pimp: Plugin = {
   },
 }
 
+export type { CpAncillaryFlightSelectionFlight } from '@/constants/CpAncillaryFlightSelectionTypes'
 export type { CpStepperStep } from '@/constants/CpStepperTypes'
 export type {
   CpSeatMapConfig,
@@ -219,7 +222,6 @@ 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,
@@ -238,6 +240,7 @@ export {
   CpAirlineLogo,
   CpAlert,
   CpAncillaryCategory,
+  CpAncillaryFlightSelection,
   CpAncillaryItem,
   CpBadge,
   CpBottomSheet,

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

@@ -2,8 +2,3 @@ export interface CpStepperStep {
   id: string
   label: string
 }
-
-export enum CpStepperTransitionDirections {
-  BACKWARD = 'backward',
-  FORWARD = 'forward',
-}

package/src/stories/CpAncillaryFlightSelection.stories.ts

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import type { CpAncillaryFlightSelectionFlight } from '@/constants/CpAncillaryFlightSelectionTypes'
+
+import CpAncillaryFlightSelection from '@/components/CpAncillaryFlightSelection.vue'
+
+import { docLabelStyle } from '@/stories/documentationStyles'
+
+const sampleFlights: CpAncillaryFlightSelectionFlight[] = [
+  {
+    id: 'outbound',
+    originCity: 'Paris',
+    originIata: 'CDG',
+    destinationCity: 'New York',
+    destinationIata: 'JFK',
+  },
+  {
+    id: 'inbound',
+    originCity: 'New York',
+    originIata: 'JFK',
+    destinationCity: 'Paris',
+    destinationIata: 'CDG',
+  },
+]
+
+const meta = {
+  title: 'Business/CpAncillaryFlightSelection',
+  component: CpAncillaryFlightSelection,
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label of the "apply to all flights" switch',
+    },
+    outboundLabel: {
+      control: 'text',
+      description: 'Label of the first flight tab',
+    },
+    returnLabel: {
+      control: 'text',
+      description: 'Label of the second flight tab',
+    },
+    flights: {
+      control: 'object',
+      description: 'Flights shown as tabs when the switch is off',
+    },
+  },
+} satisfies Meta<typeof CpAncillaryFlightSelection>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Switch off, tab strip visible, first flight selected. The models are wired
+ * with refs to demonstrate the round trip.
+ */
+export const Default: Story = {
+  args: {
+    flights: sampleFlights,
+    label: 'Apply to all flights',
+    outboundLabel: 'Outbound',
+    returnLabel: 'Return',
+  },
+  render: (args) => ({
+    components: { CpAncillaryFlightSelection },
+    setup() {
+      const applyToAllFlights = ref(false)
+      const activeFlightId = ref(sampleFlights[0].id)
+      return { args, applyToAllFlights, activeFlightId }
+    },
+    template: `
+      <div style="padding: 20px; width: 40rem;">
+        <CpAncillaryFlightSelection
+          v-bind="args"
+          v-model:apply-to-all-flights="applyToAllFlights"
+          v-model:active-flight-id="activeFlightId"
+        />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Switch on: the tab strip collapses away.
+ */
+export const ApplyToAllFlights: Story = {
+  args: {
+    ...Default.args,
+  },
+  render: (args) => ({
+    components: { CpAncillaryFlightSelection },
+    setup() {
+      const applyToAllFlights = ref(true)
+      const activeFlightId = ref(sampleFlights[0].id)
+      return { args, applyToAllFlights, activeFlightId }
+    },
+    template: `
+      <div style="padding: 20px; width: 40rem;">
+        <CpAncillaryFlightSelection
+          v-bind="args"
+          v-model:apply-to-all-flights="applyToAllFlights"
+          v-model:active-flight-id="activeFlightId"
+        />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * At a 358px container width the tabs swap city names for IATA codes.
+ */
+export const Mobile: Story = {
+  args: {
+    ...Default.args,
+  },
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpAncillaryFlightSelection },
+    setup() {
+      const applyToAllFlights = ref(false)
+      const activeFlightId = ref(sampleFlights[0].id)
+      return { sampleFlights, applyToAllFlights, activeFlightId, docLabelStyle }
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 10px; width: 358px;">
+        <span :style="docLabelStyle">358px</span>
+        <CpAncillaryFlightSelection
+          :flights="sampleFlights"
+          v-model:apply-to-all-flights="applyToAllFlights"
+          v-model:active-flight-id="activeFlightId"
+        />
+      </div>
+    `,
+  }),
+}

package/src/stories/CpStepperMobile.stories.ts

@@ -53,8 +53,8 @@ export const Default: Story = {
 }
 
 /**
- * Previous/Next move the active step index so the title's
- * slide-forward / slide-backward transition plays in each direction.
+ * Previous/Next move the active step index so the title morphs
+ * from the previous step name to the new one.
  */
 export const Interactive: Story = {
   args: { ...Default.args },