@citizenplane/pimp 18.19.10 → 18.21.0

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/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>
+    `,
+  }),
+}