@citizenplane/pimp 18.14.2 → 18.14.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.14.2",
+  "version": "18.14.3",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -56,8 +56,7 @@
     "primevue": "4.5.5",
     "vue": "3.5.39",
     "vue-bind-once": "0.2.1",
-    "vue-tel-input": "9.5.0",
-    "web-haptics": "0.0.6"
+    "vue-tel-input": "9.5.0"
   },
   "devDependencies": {
     "@biomejs/biome": "2.5.5",

package/src/components/CpButton.vue

@@ -10,7 +10,6 @@
     role="button"
     tabindex="0"
     :type="type"
-    @click="handleClick"
   >
     <span class="cpButton__body">
       <span v-if="isLoading" class="cpButton__loader">
@@ -32,18 +31,15 @@
 <script setup lang="ts">
 import type { Slots } from 'vue'
 import { computed, useSlots } from 'vue'
-import { useWebHaptics } from 'web-haptics/vue'
 
 import CpLoader from '@/components/CpLoader.vue'
 
-import { Haptics } from '@/constants/Hapitcs'
 import { capitalizeFirstLetter } from '@/helpers'
 
 export interface Props {
   appearance?: 'primary' | 'secondary' | 'tertiary'
   color?: 'neutral' | 'accent' | 'error' | 'warning' | 'success'
   disabled?: boolean
-  enableHaptics?: boolean
   href?: string
   isLoading?: boolean
   isSquare?: boolean
@@ -61,12 +57,7 @@ const props = withDefaults(defineProps<Props>(), {
   size: 'md',
 })
 
-const emit = defineEmits<{
-  click: [event: MouseEvent]
-}>()
-
 const slots: Slots = useSlots()
-const { trigger } = useWebHaptics()
 
 const capitalizedAppearance = computed(() => capitalizeFirstLetter(props.appearance))
 
@@ -96,12 +87,6 @@ const dynamicClasses = computed(() => {
   ]
 })
 
-const handleClick = (event: MouseEvent) => {
-  if (props.enableHaptics) {
-    trigger(Haptics.RIGID)
-  }
-  emit('click', event)
-}
 </script>
 
 <style lang="scss">

package/src/components/CpSeatMap.vue

@@ -21,7 +21,7 @@
               v-for="seat in row.seats"
               :key="seat.id"
               :config="config"
-              :is-highlighted="highlightedSeatId === seat.id"
+              :is-highlighted="isSeatHighlighted(seat)"
               :is-selection-enabled="isSelectionEnabled"
               :row-number="row.number"
               :seat="seat"
@@ -84,12 +84,9 @@ import CpSeatMapZone from './CpSeatMapZone.vue'
 
 interface Props {
   config?: CpSeatMapConfig
-  /** Seat id to pulse — the consumer bumps it to draw the eye to a seat. */
   highlightedSeatId?: number | null
-  /** Seats are inert until the consumer has something to seat. */
   isSelectionEnabled?: boolean
   seatMap: SeatMap
-  /** Seats the consumer has assigned, keyed as `12A` (see `displaySeat`). */
   selections?: Record<string, CpSeatMapSeatSelection>
   transitionDirection?: CpSeatMapTransitionDirections
 }
@@ -146,8 +143,8 @@ const getHallwayDynamicStyle = (hallwayIndex: number) => {
   }
 }
 
-// Exit rows need an acknowledgement before the seat leaves this component; every
-// other seat is emitted straight away. No selection state is held here.
+const isSeatHighlighted = (seat: Seat) => props.highlightedSeatId === seat.id
+
 const handleSelectSeat = (seat: Seat, rowNumber: number) => {
   if (seat.is_exit_row) {
     pendingExitRowSeat.value = { rowNumber, seat }

package/src/components/CpSeatMapSeatWrapper.vue

@@ -69,10 +69,14 @@ const isSeatUnavailable = computed(() => isSeatBlocked.value || isSeatOccupied.v
 const isSeatPayable = computed(() => props.seat.status === SeatStatuses.PAYABLE)
 
 const highlightSeat = () => {
-  seatWrapperRef.value?.classList.add('cpSeatMapSeatWrapper--isHighlighted')
+  if (!seatWrapperRef.value) return
+
+  seatWrapperRef.value.classList.add('cpSeatMapSeatWrapper--isHighlighted')
+  seatWrapperRef.value.scrollIntoView({ behavior: 'smooth', block: 'center' })
 
   setTimeout(() => {
-    seatWrapperRef.value?.classList.remove('cpSeatMapSeatWrapper--isHighlighted')
+    if (!seatWrapperRef.value) return
+    seatWrapperRef.value.classList.remove('cpSeatMapSeatWrapper--isHighlighted')
   }, HIGHLIGHT_DURATION)
 }
 

package/src/components/CpSwitch.vue

@@ -30,19 +30,16 @@
 
 <script setup lang="ts">
 import { computed, useId } from 'vue'
-import { useWebHaptics } from 'web-haptics/vue'
 
 import CpTooltip from '@/components/CpTooltip.vue'
 
 import { ToggleColors } from '@/constants'
-import { Haptics } from '@/constants/Hapitcs'
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Props {
   autofocus?: boolean
   color?: ToggleColors
   disabled?: boolean
-  enableHaptics?: boolean
   groupName?: string
   helper?: string
   inert?: boolean
@@ -73,8 +70,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
-const { trigger } = useWebHaptics()
-
 const switchUniqueId = useId()
 
 const capitalizedColor = computed(() => {
@@ -104,10 +99,6 @@ const computedClasses = computed(() => {
 })
 
 const handleClick = (value: boolean): void => {
-  if (props.enableHaptics) {
-    trigger(Haptics.SOFT)
-  }
-
   emit('update:modelValue', !value)
 }
 </script>

package/src/components/CpToast.vue

@@ -62,17 +62,12 @@
 
 <script setup lang="ts">
 import Toast from 'primevue/toast'
-import ToastEventBus from 'primevue/toasteventbus'
-import { onMounted } from 'vue'
-import { useWebHaptics } from 'web-haptics/vue'
 
 import { CpToastTypes } from '@/constants/CpToastTypes'
-import { Haptics } from '@/constants/Hapitcs'
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Message {
   detail?: string
-  enableHaptics?: boolean
   life?: number
   primaryAction?: {
     label: string
@@ -91,8 +86,6 @@ interface Message {
   summary: string
 }
 
-onMounted(() => ToastEventBus.on('add', (payload: unknown) => handleToastAdded(payload as Message)))
-
 const displayTimer = (message: Message) => message.showTimer && message.life !== undefined
 
 const getDynamicClass = (severity: string) => `cpToast--is${capitalizeFirstLetter(severity)}`
@@ -135,28 +128,6 @@ const handleActionClick = (onClick: VoidFunction, closeCallback: VoidFunction) =
 }
 
 const handleMouse = () => true
-
-const { trigger } = useWebHaptics()
-
-const resolveHapticLevel = (severity: CpToastTypes) => {
-  switch (severity) {
-    case CpToastTypes.SUCCESS:
-      return Haptics.SUCCESS
-    case CpToastTypes.WARNING:
-      return Haptics.WARNING
-    case CpToastTypes.ERROR:
-      return Haptics.ERROR
-    case CpToastTypes.INFO:
-    default:
-      return Haptics.SOFT
-  }
-}
-
-const handleToastAdded = (message: Message) => {
-  if (message.enableHaptics) {
-    trigger(resolveHapticLevel(message.severity))
-  }
-}
 </script>
 
 <style lang="scss">

package/src/stories/CpButton.stories.ts

@@ -50,10 +50,6 @@ const meta = {
       control: 'boolean',
       description: 'Whether the button has square corners',
     },
-    enableHaptics: {
-      control: 'boolean',
-      description: 'Trigger haptic feedback on click (supported devices only)',
-    },
   },
 } satisfies Meta<typeof CpButton>
 
@@ -61,12 +57,15 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-const defaultTemplate = '<CpButton v-bind="args">Button</CpButton>'
+const defaultTemplate = '<CpButton v-bind="args" @click="handleClick">Button</CpButton>'
 
 const defaultRender = (args: Args) => ({
   components: { CpButton },
   setup() {
-    return { args }
+    const handleClick = (event: MouseEvent) => {
+      console.log('Button clicked', event)
+    }
+    return { args, handleClick }
   },
   template: defaultTemplate,
 })
@@ -338,22 +337,3 @@ export const ResetType: Story = {
     `,
   }),
 }
-
-/* -------------------------------------------------------------------------- */
-/* Interaction                                                                */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Triggers a haptic feedback on supported devices on click.
- */
-export const WithHaptics: Story = {
-  args: { ...Default.args, enableHaptics: true, color: 'accent' },
-  render: (args: Args) => ({
-    components: { CpButton },
-    setup() {
-      const onClick = () => console.log('Button clicked')
-      return { args, onClick }
-    },
-    template: `<CpButton v-bind="args" @click="onClick">Button with haptics</CpButton>`,
-  }),
-}

package/src/stories/CpSeatMap.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { action } from 'storybook/actions'
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import type { ComponentProps } from 'vue-component-type-helpers'
 
 import type { CpSeatMapSeatSelection } from '@/constants/seatMap/CpSeatMapSeatSelection'
@@ -10,6 +10,8 @@ import type { SeatMapZone } from '@/constants/seatMap/SeatMapZone'
 import type { SeatRow } from '@/constants/seatMap/SeatRow'
 import type { SeatRowFacilityFlags } from '@/constants/seatMap/SeatRowFacilityFlags'
 
+import { useIsBreakpoint } from '@/composables/useIsBreakpoint'
+
 import CpSeatMap from '@/components/CpSeatMap.vue'
 
 import { IataTravelerTypes } from '@/constants/seatMap/IataTravelerTypes'
@@ -50,11 +52,27 @@ const meta = {
     },
     seatMap: { control: false, table: { disable: true } },
   },
-  // The plane wings sit 180px outside the cabin, so the story needs side room.
+  // The plane wings sit 180px outside the cabin, so the story needs side room. The
+  // grey backdrop is what makes the white fuselage and wings readable; mobile hides
+  // the plane altogether, so it goes back to a plain background there.
   decorators: [
     () => ({
-      template:
-        '<div style="display: flex; justify-content: center;margin: 0 auto; padding: 40px; border-radius: 8px; background-color: #fff;"><story/></div>',
+      setup() {
+        const isMobile = useIsBreakpoint()
+
+        const backdropStyle = computed(() => ({
+          display: 'flex',
+          margin: '0 auto',
+          justifyContent: 'center',
+          padding: '40px',
+          borderRadius: '8px',
+          backgroundColor: isMobile.value ? 'transparent' : 'var(--cp-background-tertiary)',
+          overflow: 'hidden',
+        }))
+
+        return { backdropStyle }
+      },
+      template: '<div :style="backdropStyle"><story/></div>',
     }),
   ],
 } satisfies Meta<CpSeatMapArgs>
@@ -342,19 +360,252 @@ export const Default: Story = {
   render: withAircraftControl(true),
 }
 
+interface StoryTraveler {
+  id: number
+  initials: string
+  name: string
+  /** Seat label such as `7B`, `null` while the traveler has no seat. */
+  seat: null | string
+}
+
+/**
+ * Rebuilt on demand: switching aircraft has to start the seating over, and `7B`
+ * and `8C` are the two seats every map in this file keeps free.
+ */
+const makeTravelers = (): StoryTraveler[] => [
+  { id: 1, initials: 'JD', name: 'Jane Doe', seat: '7B' },
+  { id: 2, initials: 'AM', name: 'Alex Moore', seat: '8C' },
+  { id: 3, initials: 'SR', name: 'Sam Reed', seat: null },
+]
+
+const travelerSelections = (travelers: StoryTraveler[]) => {
+  return travelers.reduce<Record<string, CpSeatMapSeatSelection>>((accumulator, traveler) => {
+    if (traveler.seat) accumulator[traveler.seat] = { initials: traveler.initials }
+    return accumulator
+  }, {})
+}
+
+const getLayoutStyle = (isMobile: boolean) => ({
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'center',
+  // The panel floats over the bottom of the screen, the last rows would sit under it.
+  paddingBottom: isMobile ? '180px' : '0',
+})
+
 /**
- * The consumer has seated two travelers and hands their initials back through
- * `selections`, keyed by seat (`7B`).
+ * Fixed on both sizes: it follows the scroll and stays out of the flow, so the plane
+ * keeps the middle of the story. Mobile pins it to the bottom of the screen, desktop
+ * to the right-hand side.
+ */
+const getPanelStyle = (isMobile: boolean) => ({
+  position: 'fixed',
+  zIndex: 2,
+  ...(isMobile
+    ? { right: 'var(--cp-spacing-lg)', bottom: 'var(--cp-spacing-lg)', left: 'var(--cp-spacing-lg)' }
+    : { top: 'var(--cp-spacing-2xl)', right: 'var(--cp-spacing-2xl)', width: '232px' }),
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 'var(--cp-spacing-xs)',
+  padding: isMobile ? 'var(--cp-spacing-md)' : 'var(--cp-spacing-lg)',
+  border: '1px solid var(--cp-border-soft)',
+  borderRadius: 'var(--cp-radius-lg)',
+  backgroundColor: 'var(--cp-background-primary)',
+  boxShadow: 'var(--cp-shadows-overlay)',
+})
+
+/**
+ * The seating, the active traveler and the seat to highlight all live in the
+ * story: the map reports a click and renders `selections` and `highlightedSeatId`,
+ * it remembers nothing. `isSelectionEnabled` follows the active traveler, so the
+ * seats stay disabled — and tooltipped "Select a traveler first" — until one is
+ * picked.
+ */
+const withTravelerPanel = (args: CpSeatMapArgs) => ({
+  components: { CpSeatMap },
+  setup() {
+    const seatMap = computed(() => AIRCRAFT[args.aircraft])
+
+    const isMobile = useIsBreakpoint()
+
+    const travelers = ref(makeTravelers())
+    const activeTravelerId = ref<null | number>(null)
+    const highlightedSeatId = ref<null | number>(null)
+
+    const componentArgs = computed(() => {
+      const { aircraft, seatMap: _, ...rest } = args
+      return rest
+    })
+
+    const selections = computed(() => travelerSelections(travelers.value))
+
+    const activeTraveler = computed(() => {
+      return travelers.value.find((traveler) => traveler.id === activeTravelerId.value) ?? null
+    })
+
+    // The panel works in seat labels, `highlightedSeatId` expects the seat id.
+    const seatIds = computed(() => {
+      const entries = seatMap.value.rows.flatMap((row) =>
+        Object.values(row.seats).map(
+          (seat) => [displaySeat({ row: row.number, column: seat.column }), seat.id] as const,
+        ),
+      )
+
+      return new Map(entries)
+    })
+
+    watch(
+      () => args.aircraft,
+      () => {
+        travelers.value = makeTravelers()
+        activeTravelerId.value = null
+        highlightedSeatId.value = null
+      },
+    )
+
+    /** The map only plays the highlight when the seat flips to highlighted, hence the reset. */
+    const highlight = async (seatLabel: null | string) => {
+      highlightedSeatId.value = null
+      await nextTick()
+      highlightedSeatId.value = seatLabel ? (seatIds.value.get(seatLabel) ?? null) : null
+    }
+
+    const handleSelectTraveler = (traveler: StoryTraveler) => {
+      activeTravelerId.value = traveler.id
+      highlight(traveler.seat)
+    }
+
+    const handleSelect = (seat: Seat, rowNumber: number) => {
+      action('select')(seat, rowNumber)
+
+      const traveler = activeTraveler.value
+      if (!traveler) return
+
+      const seatLabel = displaySeat({ row: rowNumber, column: seat.column })
+      const occupant = travelers.value.find((other) => other.seat === seatLabel)
+
+      // Their own seat frees it, a seat held by another traveler swaps the two.
+      if (occupant === traveler) {
+        traveler.seat = null
+      } else {
+        if (occupant) occupant.seat = traveler.seat
+        traveler.seat = seatLabel
+      }
+
+      highlight(traveler.seat)
+    }
+
+    const hint = computed(() => {
+      if (!activeTraveler.value) return 'Select a traveler to assign a seat.'
+      return `Pick a seat for ${activeTraveler.value.name}.`
+    })
+
+    const travelerStyle = (traveler: StoryTraveler) => {
+      const isActive = traveler.id === activeTravelerId.value
+
+      return {
+        display: 'flex',
+        width: '100%',
+        alignItems: 'center',
+        gap: 'var(--cp-spacing-sm)',
+        padding: 'var(--cp-spacing-sm)',
+        border: `1px solid ${isActive ? 'var(--cp-border-accent-primary)' : 'transparent'}`,
+        borderRadius: 'var(--cp-radius-md)',
+        backgroundColor: isActive ? 'var(--cp-background-accent-primary)' : 'transparent',
+        cursor: 'pointer',
+        textAlign: 'left',
+      }
+    }
+
+    const initialsStyle = (traveler: StoryTraveler) => ({
+      display: 'flex',
+      width: '28px',
+      height: '28px',
+      flex: '0 0 auto',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 'var(--cp-radius-full)',
+      backgroundColor: traveler.seat ? 'var(--cp-background-accent-solid)' : 'var(--cp-background-secondary)',
+      color: traveler.seat ? 'var(--cp-text-white)' : 'var(--cp-text-tertiary)',
+      fontSize: '11px',
+      fontWeight: '700',
+    })
+
+    const seatStyle = (traveler: StoryTraveler) => ({
+      marginLeft: 'auto',
+      color: traveler.seat ? 'var(--cp-text-primary)' : 'var(--cp-text-tertiary)',
+      fontWeight: '600',
+    })
+
+    const layoutStyle = computed(() => getLayoutStyle(isMobile.value))
+    const panelStyle = computed(() => getPanelStyle(isMobile.value))
+
+    return {
+      activeTravelerId,
+      componentArgs,
+      handleSelect,
+      handleSelectTraveler,
+      highlightedSeatId,
+      hint,
+      initialsStyle,
+      isMobile,
+      layoutStyle,
+      panelStyle,
+      seatMap,
+      seatStyle,
+      selections,
+      travelerStyle,
+      travelers,
+    }
+  },
+  template: `
+    <div :style="layoutStyle">
+      <cp-seat-map
+        v-bind="componentArgs"
+        :highlighted-seat-id="highlightedSeatId"
+        :is-selection-enabled="activeTravelerId !== null"
+        :seat-map="seatMap"
+        :selections="selections"
+        @select="handleSelect"
+      />
+
+      <aside :style="panelStyle">
+        <p
+          v-if="!isMobile"
+          style="margin: 0 0 var(--cp-spacing-sm); color: var(--cp-text-secondary); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;"
+        >
+          Travelers
+        </p>
+        <button
+          v-for="traveler in travelers"
+          :key="traveler.id"
+          :style="travelerStyle(traveler)"
+          type="button"
+          @click="handleSelectTraveler(traveler)"
+        >
+          <span :style="initialsStyle(traveler)">{{ traveler.initials }}</span>
+          <span style="font-size: 13px;">{{ traveler.name }}</span>
+          <span :style="seatStyle(traveler)">{{ traveler.seat || '—' }}</span>
+        </button>
+        <p style="margin: var(--cp-spacing-sm) 0 0; color: var(--cp-text-tertiary); font-size: 12px;">{{ hint }}</p>
+      </aside>
+    </div>
+  `,
+})
+
+/**
+ * Three travelers, two of them already seated, listed in a panel that leaves the
+ * plane centered and follows the scroll — pinned to the right of the screen on
+ * desktop, to the bottom of it on mobile. Clicking one makes it the
+ * active traveler, scrolls its seat into view and highlights it; clicking a seat then
+ * moves that traveler over, clicking its own seat frees it, and clicking a seat
+ * another traveler holds swaps the two.
  */
 export const WithSelection: Story = {
   args: {
-    selections: {
-      ...selection(7, 'B', { initials: 'JD' }),
-      ...selection(8, 'C', { initials: 'AM' }),
-    },
     onSelect: action('select'),
   },
-  render: withAircraftControl(),
+  render: withTravelerPanel,
 }
 
 /**

package/src/stories/CpSwitch.stories.ts

@@ -245,28 +245,6 @@ export const HelpAndTooltip: Story = {
   }),
 }
 
-/**
- * Triggers a haptic feedback on supported devices when toggled.
- */
-export const WithHaptics: Story = {
-  args: {
-    ...Default.args,
-    enableHaptics: true,
-  },
-  render: (args) => ({
-    components: { CpSwitch },
-    setup() {
-      const value = ref(false)
-      return { args, value }
-    },
-    template: `
-      <div style="padding: 20px;">
-        <CpSwitch v-model="value" v-bind="args" />
-      </div>
-    `,
-  }),
-}
-
 /* -------------------------------------------------------------------------- */
 /* Group                                                                      */
 /* -------------------------------------------------------------------------- */

package/src/stories/CpToast.stories.ts

@@ -17,7 +17,6 @@ type CpToastPosition =
 
 /** `CpToast` has no `defineProps`; layout props are passed through to PrimeVue `Toast`. */
 type CpToastStoryArgs = {
-  enableHaptics?: boolean
   group?: string
   position?: CpToastPosition
 }
@@ -45,7 +44,6 @@ const meta = {
   args: {
     position: 'top-right',
     group: undefined,
-    enableHaptics: false,
   },
 } satisfies Meta<CpToastStoryArgs>
 
@@ -67,7 +65,6 @@ export const Severities: Story = {
         severity: CpToastTypes.SECONDARY,
         summary: "Hello i'm a cpToast!",
         detail: 'This is a cpToast description.',
-        enableHaptics: true,
       }
 
       const notify = (severity: string) => toast.add({ ...baseOptions, severity })

package/dist/constants/Hapitcs.d.ts

@@ -1,14 +0,0 @@
-export declare const Haptics: {
-    SUCCESS: string;
-    WARNING: string;
-    ERROR: string;
-    LIGHT: string;
-    MEDIUM: string;
-    HEAVY: string;
-    SOFT: string;
-    RIGID: string;
-    SELECTION: string;
-    NUDGE: string;
-    BUZZ: string;
-};
-//# sourceMappingURL=Hapitcs.d.ts.map

package/dist/constants/Hapitcs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Hapitcs.d.ts","sourceRoot":"","sources":["../../src/constants/Hapitcs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYnB,CAAA"}

package/src/constants/Hapitcs.ts

@@ -1,13 +0,0 @@
-export const Haptics = {
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  ERROR: 'error',
-  LIGHT: 'light',
-  MEDIUM: 'medium',
-  HEAVY: 'heavy',
-  SOFT: 'soft',
-  RIGID: 'rigid',
-  SELECTION: 'selection',
-  NUDGE: 'nudge',
-  BUZZ: 'buzz',
-}