@citizenplane/pimp 18.19.9 → 18.20.0

package/package.json

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

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

@@ -12,6 +12,7 @@ import type { App, Plugin } from 'vue'
 import { BindOnceDirective } from 'vue-bind-once'
 import VueTelInput from 'vue-tel-input'
 
+import { useIsBreakpoint } from '../composables/useIsBreakpoint'
 import { useReducedMotion } from '../composables/useReducedMotion'
 import ClickOutside from '../directives/ClickOutside'
 import CpCoreDatepicker from '../libs/CoreDatepicker.vue'
@@ -59,6 +60,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'
@@ -130,6 +133,8 @@ const Components = {
   CpRadio,
   CpRadioGroup,
   CpSelectableButton,
+  CpStepper,
+  CpStepperMobile,
   CpSwitch,
   CpSegmentedControl,
   CpTable,
@@ -190,6 +195,7 @@ const Pimp: Plugin = {
   },
 }
 
+export type { CpStepperStep } from '@/constants/CpStepperTypes'
 export type {
   CpSeatMapConfig,
   CpSeatMapSeatSelection,
@@ -213,6 +219,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,
@@ -271,6 +278,8 @@ export {
   CpSelect,
   CpSelectableButton,
   CpSelectMenu,
+  CpStepper,
+  CpStepperMobile,
   CpSwitch,
   CpTable,
   CpTableColumnEditor,
@@ -303,6 +312,7 @@ export {
   IconSupplier,
   IconThirdParty,
   IconTooltip,
+  useIsBreakpoint,
   useReducedMotion,
 }
 

package/src/constants/CpStepperTypes.ts

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

package/src/stories/CpStepper.stories.ts

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import type { CpStepperStep } from '@/constants/CpStepperTypes'
+
+import CpStepper from '@/components/CpStepper.vue'
+
+import { docLabelStyle } from '@/stories/documentationStyles'
+
+const galleryRowStyle = 'display: flex; flex-direction: column; gap: 10px; width: 100%;'
+
+const steps: CpStepperStep[] = [
+  { id: 'passengers', label: 'Passengers' },
+  { id: 'safetyChecks', label: 'Safety checks' },
+  { id: 'seats', label: 'Seats' },
+  { id: 'extras', label: 'Extras' },
+  { id: 'confirmation', label: 'Confirmation' },
+]
+
+const meta = {
+  title: 'Business/CpStepper',
+  component: CpStepper,
+  argTypes: {
+    activeStepId: {
+      control: 'select',
+      options: steps.map((step) => step.id),
+      description: 'id of the step to render as active',
+    },
+    reachedStepIndex: {
+      control: 'number',
+      description: 'Highest reached step index; steps beyond it render disabled',
+    },
+  },
+} satisfies Meta<typeof CpStepper>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Clicking an enabled step updates the active step locally, the way a
+ * consumer would react to `select` by navigating.
+ */
+export const Default: Story = {
+  args: {
+    steps,
+    activeStepId: 'seats',
+    reachedStepIndex: 2,
+  },
+  render: (args) => ({
+    components: { CpStepper },
+    setup() {
+      const activeStepId = ref(args.activeStepId)
+
+      const handleSelect = (id: string) => {
+        activeStepId.value = id
+      }
+
+      return { args, activeStepId, handleSelect }
+    },
+    template: `
+      <div style="width: 70rem;">
+        <CpStepper v-bind="args" :active-step-id="activeStepId" @select="handleSelect" />
+      </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.
+ */
+export const Narrow: Story = {
+  args: { ...Default.args },
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpStepper },
+    setup() {
+      return { steps, galleryRowStyle, docLabelStyle }
+    },
+    template: `
+      <div :style="galleryRowStyle">
+        <span :style="docLabelStyle">Container width: 28rem</span>
+        <div style="width: 28rem;">
+          <CpStepper :steps="steps" active-step-id="seats" :reached-step-index="2" />
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpStepperMobile.stories.ts

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, ref } from 'vue'
+
+import type { CpStepperStep } from '@/constants/CpStepperTypes'
+
+import CpButton from '@/components/CpButton.vue'
+import CpStepperMobile from '@/components/CpStepperMobile.vue'
+
+const steps: CpStepperStep[] = [
+  { id: 'passengers', label: 'Passengers' },
+  { id: 'safetyChecks', label: 'Safety checks' },
+  { id: 'seats', label: 'Seats' },
+  { id: 'extras', label: 'Extras' },
+  { id: 'confirmation', label: 'Confirmation' },
+]
+
+const meta = {
+  title: 'Business/CpStepperMobile',
+  component: CpStepperMobile,
+  argTypes: {
+    activeStepId: {
+      control: 'select',
+      options: steps.map((step) => step.id),
+      description: 'id of the step to render as active',
+    },
+    hasPreviousButton: {
+      control: 'boolean',
+      description: 'Whether the back chevron button is rendered',
+    },
+  },
+} satisfies Meta<typeof CpStepperMobile>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    steps,
+    activeStepId: 'seats',
+    hasPreviousButton: true,
+  },
+  render: (args) => ({
+    components: { CpStepperMobile },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="width: 24rem;">
+        <CpStepperMobile v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Previous/Next move the active step index so the title's
+ * slide-forward / slide-backward transition plays in each direction.
+ */
+export const Interactive: Story = {
+  args: { ...Default.args },
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpStepperMobile, CpButton },
+    setup() {
+      const activeIndex = ref(2)
+      const activeStepId = computed(() => steps[activeIndex.value].id)
+      const hasPreviousButton = computed(() => activeIndex.value > 0)
+      const isLastStep = computed(() => activeIndex.value === steps.length - 1)
+
+      const handlePrevious = () => {
+        activeIndex.value -= 1
+      }
+
+      const handleNext = () => {
+        activeIndex.value += 1
+      }
+
+      return { steps, activeStepId, hasPreviousButton, isLastStep, handlePrevious, handleNext }
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px; width: 24rem;">
+        <CpStepperMobile
+          :steps="steps"
+          :active-step-id="activeStepId"
+          :has-previous-button="hasPreviousButton"
+          @previous="handlePrevious"
+        />
+        <CpButton :disabled="isLastStep" @click="handleNext">Next</CpButton>
+      </div>
+    `,
+  }),
+}