@citizenplane/pimp 18.22.0 → 18.23.1

package/package.json

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

package/src/components/CpAncillaryFlightSelection.vue

@@ -6,39 +6,7 @@
     <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>
+          <cp-flight-tabs v-model:active-flight-id="activeFlightId" :flights="tabFlights" />
         </div>
       </div>
     </cp-transition-expand>
@@ -46,7 +14,10 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { CpAncillaryFlightSelectionFlight } from '@/constants/CpAncillaryFlightSelectionTypes'
+import type { CpFlightTabsFlight } from '@/constants/CpFlightTabsTypes'
 
 interface Props {
   flights: CpAncillaryFlightSelectionFlight[]
@@ -64,16 +35,12 @@ const props = withDefaults(defineProps<Props>(), {
 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
-}
+const tabFlights = computed<CpFlightTabsFlight[]>(() =>
+  props.flights.map((flight, index) => ({
+    ...flight,
+    label: index === 0 ? props.outboundLabel : props.returnLabel,
+  })),
+)
 </script>
 
 <style lang="scss">
@@ -84,7 +51,6 @@ const handleSelectFlight = (flight: CpAncillaryFlightSelectionFlight) => {
   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 {
@@ -106,87 +72,5 @@ const handleSelectFlight = (flight: CpAncillaryFlightSelectionFlight) => {
     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/CpFlightTabs.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="cpFlightTabs" role="tablist">
+    <button
+      v-for="flight in flights"
+      :key="flight.id"
+      :aria-selected="isActiveTab(flight.id)"
+      class="cpFlightTabs__tab"
+      :class="getTabDynamicClass(flight.id)"
+      role="tab"
+      type="button"
+      @click="handleSelectFlight(flight)"
+    >
+      <span v-if="flight.label" class="cpFlightTabs__tabLabel">{{ flight.label }}</span>
+      <span class="cpFlightTabs__tabRoute">
+        <span class="cpFlightTabs__tabRouteText cpFlightTabs__tabRouteText--city">{{ flight.originCity }}</span>
+        <span class="cpFlightTabs__tabRouteText cpFlightTabs__tabRouteText--iata">{{ flight.originIata }}</span>
+        <cp-icon class="cpFlightTabs__tabIcon" size="16" type="arrow-right" />
+        <span class="cpFlightTabs__tabRouteText cpFlightTabs__tabRouteText--city">{{ flight.destinationCity }}</span>
+        <span class="cpFlightTabs__tabRouteText cpFlightTabs__tabRouteText--iata">{{ flight.destinationIata }}</span>
+      </span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CpFlightTabsFlight } from '@/constants/CpFlightTabsTypes'
+
+interface Props {
+  flights: CpFlightTabsFlight[]
+}
+
+defineProps<Props>()
+
+const activeFlightId = defineModel<string | undefined>('activeFlightId')
+
+const isActiveTab = (id: string) => id === activeFlightId.value
+
+const getTabDynamicClass = (id: string): string => (isActiveTab(id) ? 'cpFlightTabs__tab--isActive' : '')
+
+const handleSelectFlight = (flight: CpFlightTabsFlight) => {
+  activeFlightId.value = flight.id
+}
+</script>
+
+<style lang="scss">
+.cpFlightTabs {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: var(--cp-spacing-sm);
+  border-radius: var(--cp-radius-md);
+  background: var(--cp-background-quaternary);
+  container-type: inline-size;
+  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) {
+    .cpFlightTabs__tabRouteText {
+      &--city {
+        display: none;
+      }
+
+      &--iata {
+        display: inline;
+      }
+    }
+  }
+}
+</style>

package/src/components/CpStepper.vue

@@ -1,24 +1,30 @@
 <template>
   <div class="cpStepper">
     <div class="cpStepper__wrapper">
-      <div v-for="(step, stepIndex) in steps" :key="step.id" class="cpStepper__stepWrapper">
+      <div v-for="stepItem in stepItems" :key="stepItem.id" class="cpStepper__stepWrapper">
         <button
+          :aria-label="stepItem.label"
           class="cpStepper__step"
-          :class="stepActiveClass(step)"
-          :disabled="isStepDisabled(stepIndex)"
+          :class="stepItem.className"
+          :disabled="stepItem.isDisabled"
           type="button"
-          @click="handleStepClick(step)"
+          @click="handleStepClick(stepItem.id)"
         >
-          <span class="cpStepper__stepNumber">{{ stepIndex + 1 }}</span>
-          <span class="cpStepper__stepTitle">{{ step.label }}</span>
+          <span class="cpStepper__stepNumber">
+            <cp-icon v-if="stepItem.isCompleted" size="12" type="check" />
+            <template v-else>{{ stepItem.number }}</template>
+          </span>
+          <span class="cpStepper__stepTitle">{{ stepItem.label }}</span>
         </button>
-        <cp-icon v-if="isNotLastStep(stepIndex)" class="cpStepper__chevron" size="16" type="chevron-right" />
+        <cp-icon v-if="stepItem.isNotLast" class="cpStepper__chevron" size="16" type="chevron-right" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { CpStepperStep } from '@/constants/CpStepperTypes'
 
 import CpIcon from '@/components/CpIcon.vue'
@@ -36,13 +42,32 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{ select: [id: string] }>()
 
-const isNotLastStep = (stepIndex: number) => stepIndex < props.steps.length - 1
+const activeStepIndex = computed(() => props.steps.findIndex((step) => step.id === props.activeStepId))
+
+const isStepCompleted = (stepIndex: number) => activeStepIndex.value > -1 && stepIndex < activeStepIndex.value
 
-const isStepDisabled = (stepIndex: number) => stepIndex > props.reachedStepIndex
+const stepClassName = (step: CpStepperStep, stepIndex: number) => {
+  return {
+    'cpStepper__step--isActive': step.id === props.activeStepId,
+    'cpStepper__step--isCompleted': isStepCompleted(stepIndex),
+  }
+}
 
-const stepActiveClass = (step: CpStepperStep) => (step.id === props.activeStepId ? 'cpStepper__step--isActive' : '')
+const stepItems = computed(() => {
+  return props.steps.map((step, stepIndex) => {
+    return {
+      className: stepClassName(step, stepIndex),
+      id: step.id,
+      isCompleted: isStepCompleted(stepIndex),
+      isDisabled: stepIndex > props.reachedStepIndex,
+      isNotLast: stepIndex < props.steps.length - 1,
+      label: step.label,
+      number: stepIndex + 1,
+    }
+  })
+})
 
-const handleStepClick = (step: CpStepperStep) => emit('select', step.id)
+const handleStepClick = (stepId: string) => emit('select', stepId)
 </script>
 
 <style lang="scss">
@@ -85,6 +110,12 @@ const handleStepClick = (step: CpStepperStep) => emit('select', step.id)
       color: var(--cp-text-accent-primary);
     }
 
+    &--isCompleted {
+      border-color: transparent;
+      background-color: var(--cp-background-primary);
+      color: var(--cp-text-primary);
+    }
+
     &:not(:disabled) {
       @extend %u-focus-outline;
 
@@ -115,6 +146,11 @@ const handleStepClick = (step: CpStepperStep) => emit('select', step.id)
     color: var(--cp-text-white);
   }
 
+  &__step--isCompleted &__stepNumber {
+    background-color: var(--cp-background-success-primary);
+    color: var(--cp-foreground-success-primary);
+  }
+
   &__stepTitle {
     @extend %u-text-ellipsis;
 

package/src/components/index.ts

@@ -36,6 +36,7 @@ import CpDate from './CpDate.vue'
 import CpDatepicker from './CpDatepicker.vue'
 import CpDialog from './CpDialog.vue'
 import CpDynamicDialog from './CpDynamicDialog.vue'
+import CpFlightTabs from './CpFlightTabs.vue'
 import CpHeading from './CpHeading.vue'
 import CpIcon from './CpIcon.vue'
 import CpInput from './CpInput.vue'
@@ -125,6 +126,7 @@ const Components = {
   CpAncillaryFlightSelection,
   CpAncillaryItem,
   CpBasket,
+  CpFlightTabs,
   CpLoader,
   CpInput,
   CpText,
@@ -201,6 +203,7 @@ const Pimp: Plugin = {
 
 export type { CpAncillaryFlightSelectionFlight } from '@/constants/CpAncillaryFlightSelectionTypes'
 export type { CpBasketCategory, CpBasketGroup, CpBasketRow } from '@/constants/CpBasketTypes'
+export type { CpFlightTabsFlight } from '@/constants/CpFlightTabsTypes'
 export type { CpStepperStep } from '@/constants/CpStepperTypes'
 export type {
   CpSeatMapConfig,
@@ -259,6 +262,7 @@ export {
   CpDatepicker,
   CpDialog,
   CpDynamicDialog,
+  CpFlightTabs,
   CpHeading,
   CpIcon,
   CpInput,

package/src/constants/CpAncillaryFlightSelectionTypes.ts

@@ -1,7 +1 @@
-export interface CpAncillaryFlightSelectionFlight {
-  destinationCity?: string
-  destinationIata?: string
-  id: string
-  originCity?: string
-  originIata?: string
-}
+export type { CpFlightTabsFlight as CpAncillaryFlightSelectionFlight } from '@/constants/CpFlightTabsTypes'

package/src/constants/CpFlightTabsTypes.ts

@@ -0,0 +1,8 @@
+export interface CpFlightTabsFlight {
+  destinationCity?: string
+  destinationIata?: string
+  id: string
+  label?: string
+  originCity?: string
+  originIata?: string
+}

package/src/stories/CpFlightTabs.stories.ts

@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import type { CpFlightTabsFlight } from '@/constants/CpFlightTabsTypes'
+
+import CpFlightTabs from '@/components/CpFlightTabs.vue'
+
+import { docLabelStyle } from '@/stories/documentationStyles'
+
+const sampleFlights: CpFlightTabsFlight[] = [
+  {
+    id: 'outbound',
+    label: 'Outbound',
+    originCity: 'Paris',
+    originIata: 'CDG',
+    destinationCity: 'New York',
+    destinationIata: 'JFK',
+  },
+  {
+    id: 'inbound',
+    label: 'Return',
+    originCity: 'New York',
+    originIata: 'JFK',
+    destinationCity: 'Paris',
+    destinationIata: 'CDG',
+  },
+]
+
+const noLabelFlights: CpFlightTabsFlight[] = sampleFlights.map(({ label: _label, ...flight }) => flight)
+
+const threeFlights: CpFlightTabsFlight[] = [
+  ...sampleFlights,
+  {
+    id: 'connecting',
+    label: 'Connecting',
+    originCity: 'Paris',
+    originIata: 'CDG',
+    destinationCity: 'Lyon',
+    destinationIata: 'LYS',
+  },
+]
+
+const meta = {
+  title: 'Business/CpFlightTabs',
+  component: CpFlightTabs,
+  argTypes: {
+    flights: {
+      control: 'object',
+      description: 'Flights shown as tabs',
+    },
+  },
+} satisfies Meta<typeof CpFlightTabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Two flights, first one selected. The model is wired with a ref to
+ * demonstrate the round trip.
+ */
+export const Default: Story = {
+  args: {
+    flights: sampleFlights,
+  },
+  render: (args) => ({
+    components: { CpFlightTabs },
+    setup() {
+      const activeFlightId = ref(sampleFlights[0].id)
+      return { args, activeFlightId }
+    },
+    template: `
+      <div style="padding: 20px; width: 40rem;">
+        <CpFlightTabs v-bind="args" v-model:active-flight-id="activeFlightId" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Flights without a `label`: only the route line is rendered.
+ */
+export const NoLabels: Story = {
+  args: {
+    flights: noLabelFlights,
+  },
+  render: (args) => ({
+    components: { CpFlightTabs },
+    setup() {
+      const activeFlightId = ref(noLabelFlights[0].id)
+      return { args, activeFlightId }
+    },
+    template: `
+      <div style="padding: 20px; width: 40rem;">
+        <CpFlightTabs v-bind="args" v-model:active-flight-id="activeFlightId" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Three flights sharing the tab strip.
+ */
+export const ThreeFlights: Story = {
+  args: {
+    flights: threeFlights,
+  },
+  render: (args) => ({
+    components: { CpFlightTabs },
+    setup() {
+      const activeFlightId = ref(threeFlights[0].id)
+      return { args, activeFlightId }
+    },
+    template: `
+      <div style="padding: 20px; width: 40rem;">
+        <CpFlightTabs v-bind="args" 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: {
+    flights: sampleFlights,
+  },
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpFlightTabs },
+    setup() {
+      const activeFlightId = ref(sampleFlights[0].id)
+      return { sampleFlights, activeFlightId, docLabelStyle }
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 10px; width: 358px;">
+        <span :style="docLabelStyle">358px</span>
+        <CpFlightTabs :flights="sampleFlights" v-model:active-flight-id="activeFlightId" />
+      </div>
+    `,
+  }),
+}

package/src/stories/CpStepper.stories.ts

@@ -37,6 +37,10 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 /**
+ * Three visual states coexist: steps before the active one render as
+ * completed (white pill, green check badge, dark label), the active one keeps
+ * its accent pill, and the following ones stay upcoming (bordered, grey).
+ *
  * Clicking an enabled step updates the active step locally, the way a
  * consumer would react to `select` by navigating.
  */
@@ -65,10 +69,55 @@ export const Default: Story = {
   }),
 }
 
+/**
+ * Three steps already behind the active one: each renders completed, with the
+ * check badge replacing its number. Completed steps stay clickable.
+ */
+export const Completed: Story = {
+  args: {
+    steps,
+    activeStepId: 'extras',
+    reachedStepIndex: 3,
+  },
+  render: (args) => ({
+    components: { CpStepper },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="width: 70rem;">
+        <CpStepper v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * The funnel's last step is active, so every preceding step is completed.
+ */
+export const LastStep: Story = {
+  args: {
+    steps,
+    activeStepId: 'confirmation',
+    reachedStepIndex: 4,
+  },
+  render: (args) => ({
+    components: { CpStepper },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="width: 70rem;">
+        <CpStepper v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
 /**
  * Below the container width threshold (60.5rem, matching online-checkin's
  * former `$breakpoint-large-tablet`), step titles collapse and only the
- * numbered pills remain.
+ * numbered pills remain, the completed ones showing their check badge.
  */
 export const Narrow: Story = {
   args: { ...Default.args },