@citizenplane/pimp 18.10.2 → 18.11.0

package/package.json

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

package/src/components/CpSeatMap.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="cpSeatMap" :style="seatMapDynamicStyle" :class="seatMapClasses">
+    <cp-seat-map-plane
+      :key="seatMap.aircraft"
+      class="cpSeatMap__plane"
+      :is-large="isLargePlane"
+      :map-key="seatMap.ref_id_segment"
+      :transition-direction="transitionDirection"
+    >
+      <cp-seat-map-zone v-for="zone in zones" :key="zone.id" class="cpSeatMap__zone" :title="zone.title">
+        <cp-seat-map-grid class="cpSeatMap__grid" :layout="zone.layout" :style="getGridDynamicStyle(zone.layout)">
+          <cp-seat-map-row
+            v-for="row in getZoneRows(seatMap, zone.id)"
+            :key="row.number"
+            class="cpSeatMap__row"
+            :config="config"
+            :row="row"
+            :seat-block-size="getSeatBlockSize(zone.layout)"
+          >
+            <cp-seat-map-seat-wrapper
+              v-for="seat in row.seats"
+              :key="seat.id"
+              :config="config"
+              :is-highlighted="highlightedSeatId === seat.id"
+              :is-selection-enabled="isSelectionEnabled"
+              :row-number="row.number"
+              :seat="seat"
+              :selection="getSeatSelection(row.number, seat.column)"
+              :style="getSeatDynamicStyle(seat)"
+              @select="handleSelectSeat"
+            />
+            <template v-if="hasHallway(zone.layout)">
+              <span
+                v-for="hallway in getHallways(zone.layout)"
+                :key="hallway.index"
+                class="cpSeatMap__hallway"
+                :style="getHallwayDynamicStyle(hallway.index)"
+              >
+                {{ row.number }}
+              </span>
+            </template>
+          </cp-seat-map-row>
+        </cp-seat-map-grid>
+      </cp-seat-map-zone>
+    </cp-seat-map-plane>
+
+    <cp-seat-map-emergency-exit-dialog
+      v-model:is-visible="isEmergencyExitDialogVisible"
+      :config="config"
+      @close="handleCloseEmergencyExitDialog"
+      @confirm="handleConfirmEmergencyExit"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import type { CpSeatMapConfig } from '@/constants/seatMap/CpSeatMapConfig'
+import type { CpSeatMapSeatSelection } from '@/constants/seatMap/CpSeatMapSeatSelection'
+import type { Seat } from '@/constants/seatMap/Seat'
+import type { SeatMap } from '@/constants/seatMap/SeatMap'
+
+import { DEFAULT_CP_SEAT_MAP_CONFIG } from '@/constants/seatMap/CpSeatMapConfig'
+import { CpSeatMapTransitionDirections } from '@/constants/seatMap/CpSeatMapTransitionDirections'
+import {
+  displaySeat,
+  getGridTemplateAreas,
+  getGridTemplateColumns,
+  getHallways,
+  getSeatBlockSize,
+  getSeatMapZones,
+  getZoneRows,
+  hasHallway,
+  isLargeSeatMap,
+  type SeatMapLayout,
+} from '@/helpers/seatMap'
+import CpSeatMapEmergencyExitDialog from './CpSeatMapEmergencyExitDialog.vue'
+import CpSeatMapGrid from './CpSeatMapGrid.vue'
+import CpSeatMapPlane from './CpSeatMapPlane.vue'
+import CpSeatMapRow from './CpSeatMapRow.vue'
+import CpSeatMapSeatWrapper from './CpSeatMapSeatWrapper.vue'
+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
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  config: () => DEFAULT_CP_SEAT_MAP_CONFIG,
+  highlightedSeatId: null,
+  isSelectionEnabled: true,
+  selections: () => ({}),
+  transitionDirection: CpSeatMapTransitionDirections.FORWARD,
+})
+
+const emit = defineEmits<{ select: [seat: Seat, rowNumber: number] }>()
+
+const isEmergencyExitDialogVisible = ref(false)
+const pendingExitRowSeat = ref<{ rowNumber: number; seat: Seat } | null>(null)
+
+const zones = computed(() => getSeatMapZones(props.seatMap))
+
+const isLargePlane = computed(() => isLargeSeatMap(zones.value))
+
+const seatMapClasses = computed(() => {
+  return { 'cpSeatMap--isLarge': isLargePlane.value }
+})
+
+const seatMapDynamicStyle = computed(() => {
+  return {
+    '--seat-mobile-width': isLargePlane.value ? '32px' : '40px',
+    '--hallway-mobile-width': isLargePlane.value ? '16px' : '32px',
+  }
+})
+
+const getGridDynamicStyle = (layout: SeatMapLayout) => {
+  return {
+    '--columns-count': layout.length,
+    '--grid-template-areas': `"${getGridTemplateAreas(layout)}"`,
+    '--grid-template-columns': getGridTemplateColumns(layout),
+  }
+}
+
+const getSeatSelection = (rowNumber: number, column: string) => {
+  return props.selections[displaySeat({ row: rowNumber, column })] ?? null
+}
+
+const getSeatDynamicStyle = (seat: Seat) => {
+  return {
+    gridColumn: seat.column,
+  }
+}
+
+const getHallwayDynamicStyle = (hallwayIndex: number) => {
+  return {
+    gridArea: `HALLWAY-${hallwayIndex}`,
+  }
+}
+
+// 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 handleSelectSeat = (seat: Seat, rowNumber: number) => {
+  if (seat.is_exit_row) {
+    pendingExitRowSeat.value = { rowNumber, seat }
+    isEmergencyExitDialogVisible.value = true
+    return
+  }
+
+  emit('select', seat, rowNumber)
+}
+
+const handleCloseEmergencyExitDialog = () => {
+  isEmergencyExitDialogVisible.value = false
+  pendingExitRowSeat.value = null
+}
+
+const handleConfirmEmergencyExit = () => {
+  if (pendingExitRowSeat.value) {
+    const { seat, rowNumber } = pendingExitRowSeat.value
+    emit('select', seat, rowNumber)
+  }
+
+  handleCloseEmergencyExitDialog()
+}
+</script>
+
+<style lang="scss">
+.cpSeatMap {
+  --hallway-width: 32px;
+  --seat-width: 32px;
+
+  position: relative;
+  min-height: 75vh;
+
+  &__grid > div {
+    grid-template-areas: var(--grid-template-areas);
+    grid-template-columns: var(--grid-template-columns);
+  }
+
+  &__hallway {
+    font-size: fn.px-to-em(12);
+    font-weight: 700;
+    letter-spacing: fn.px-to-rem(2);
+    line-height: fn.px-to-rem(24);
+    text-transform: uppercase;
+  }
+
+  &__row:has(.cpSeatMapRowFacility--isTop) .cpSeatMap__hallway {
+    grid-row: 2 !important;
+    place-self: end center;
+  }
+
+  &__zone {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+@include mx.media-query-max(551px) {
+  .cpSeatMap {
+    --seat-width: var(--seat-mobile-width);
+    --hallway-width: var(--hallway-mobile-width);
+
+    &:not(&--isLarge) &__grid > div {
+      gap: var(--cp-spacing-md);
+    }
+
+    &__plane .cpSeatMapPlane__plane {
+      display: none;
+    }
+
+    &__hallway {
+      font-size: fn.px-to-em(10);
+    }
+  }
+}
+</style>

package/src/components/CpSeatMapEmergencyExitDialog.vue

@@ -0,0 +1,87 @@
+<template>
+  <cp-dynamic-dialog
+    v-model:is-visible="isVisible"
+    class="cpSeatMapEmergencyExitDialog"
+    :max-width="450"
+    :title="config.emergencyExit.title"
+    @close="emit('close')"
+  >
+    <div class="cpSeatMapEmergencyExitDialog__content">
+      <p class="cpSeatMapEmergencyExitDialog__description">{{ config.emergencyExit.subtitle }}</p>
+      <cp-alert color="warning" :title="config.emergencyExit.disclaimerTitle">
+        <p>{{ config.emergencyExit.disclaimerContent }}</p>
+      </cp-alert>
+    </div>
+
+    <template #footer>
+      <div class="cpSeatMapEmergencyExitDialog__footer">
+        <cp-button appearance="secondary" class="cpSeatMapEmergencyExitDialog__close" @click="emit('close')">
+          {{ config.emergencyExit.close }}
+        </cp-button>
+        <cp-button color="success" @click="emit('confirm')">
+          {{ config.emergencyExit.confirm }}
+        </cp-button>
+      </div>
+    </template>
+  </cp-dynamic-dialog>
+</template>
+
+<script setup lang="ts">
+import type { CpSeatMapConfig } from '@/constants/seatMap/CpSeatMapConfig'
+
+import { DEFAULT_CP_SEAT_MAP_CONFIG } from '@/constants/seatMap/CpSeatMapConfig'
+import CpAlert from './CpAlert.vue'
+import CpButton from './CpButton.vue'
+import CpDynamicDialog from './CpDynamicDialog.vue'
+
+interface Props {
+  config?: CpSeatMapConfig
+}
+
+withDefaults(defineProps<Props>(), {
+  config: () => DEFAULT_CP_SEAT_MAP_CONFIG,
+})
+
+const emit = defineEmits<{
+  close: []
+  confirm: []
+}>()
+
+const isVisible = defineModel<boolean>('isVisible', { default: false })
+</script>
+
+<style lang="scss">
+html:has([data-vsbs-backdrop], .cpSeatMapEmergencyExitDialog) [data-vsbs-backdrop] {
+  z-index: 1;
+}
+
+[data-vsbs-sheet]:has(.cpSeatMapEmergencyExitDialog) {
+  z-index: 2;
+}
+
+.cpSeatMapEmergencyExitDialog {
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cp-spacing-lg);
+  }
+
+  &__description {
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-sm);
+  }
+
+  &__footer {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--cp-spacing-xl);
+
+    > * {
+      flex: 1;
+    }
+  }
+}
+</style>

package/src/components/CpSeatMapGrid.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="cpSeatMapGrid">
+    <div class="cpSeatMapGrid__columns">
+      <span v-for="(column, index) in layout" :key="index" class="cpSeatMapGrid__column">
+        {{ column }}
+      </span>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SeatMapLayout } from '@/helpers/seatMap'
+
+interface Props {
+  layout: SeatMapLayout
+}
+
+defineProps<Props>()
+</script>
+
+<style lang="scss">
+.cpSeatMapGrid {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cp-spacing-md);
+
+  &__columns {
+    display: grid;
+    font-size: fn.px-to-em(12);
+    font-weight: 700;
+    gap: var(--cp-spacing-md);
+    letter-spacing: fn.px-to-rem(2);
+    line-height: fn.px-to-rem(24);
+    text-align: center;
+    text-transform: uppercase;
+  }
+}
+</style>

package/src/components/CpSeatMapPlane.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="cpSeatMapPlane" :class="planeDynamicClass">
+    <div class="cpSeatMapPlane__plane">
+      <icon-plane-nose class="cpSeatMapPlane__nose" />
+      <icon-plane-wing class="cpSeatMapPlane__wing cpSeatMapPlane__wing--isLeft" />
+      <icon-plane-wing class="cpSeatMapPlane__wing cpSeatMapPlane__wing--isRight" />
+    </div>
+
+    <div class="cpSeatMapPlane__body">
+      <div class="cpSeatMapPlane__cabin">
+        <transition mode="out-in" :name="dynamicTransitionName">
+          <div :key="mapKey" class="cpSeatMapPlane__content">
+            <slot />
+          </div>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useIsBreakpoint } from '@/composables/useIsBreakpoint'
+
+import { CpSeatMapTransitionDirections } from '@/constants/seatMap/CpSeatMapTransitionDirections'
+import IconPlaneNose from './icons/IconPlaneNose.vue'
+import IconPlaneWing from './icons/IconPlaneWing.vue'
+
+interface Props {
+  isLarge?: boolean
+  /** Changing this replays the cabin transition — pass the current segment id. */
+  mapKey?: string
+  transitionDirection?: CpSeatMapTransitionDirections
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isLarge: false,
+  mapKey: '',
+  transitionDirection: CpSeatMapTransitionDirections.FORWARD,
+})
+
+const isMobile = useIsBreakpoint()
+
+const planeDynamicClass = computed(() => {
+  return {
+    'cpSeatMapPlane--isLarge': props.isLarge,
+  }
+})
+
+const dynamicTransitionName = computed(() => {
+  if (isMobile.value) return `cpSeatMapSlide-${props.transitionDirection}`
+  return 'cpSeatMapFade'
+})
+</script>
+
+<style lang="scss">
+.cpSeatMapFade-enter-active,
+.cpSeatMapFade-leave-active {
+  transition: opacity 300ms ease;
+}
+
+.cpSeatMapFade-enter-from,
+.cpSeatMapFade-leave-to {
+  opacity: 0;
+}
+
+.cpSeatMapSlide-backward,
+.cpSeatMapSlide-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);
+  }
+}
+
+.cpSeatMapSlide-forward {
+  &-enter-from {
+    transform: translate3d(3vw, 0, 0);
+  }
+
+  &-leave-to {
+    transform: translate3d(-3vw, 0, 0);
+  }
+}
+
+.cpSeatMapSlide-backward {
+  &-enter-from {
+    transform: translate3d(-3vw, 0, 0);
+  }
+
+  &-leave-to {
+    transform: translate3d(3vw, 0, 0);
+  }
+}
+
+.cpSeatMapPlane {
+  position: relative;
+  height: 100%;
+  animation: cp-seat-map-plane-reveal 1000ms ease forwards;
+
+  $plane-shadow:
+    inset 20px 0 20px -20px #eaecff,
+    inset -20px 0 20px -20px #eaecff;
+
+  @keyframes cp-seat-map-plane-reveal {
+    from {
+      opacity: 0;
+      transform: translateY(100%) scale(2);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes cp-seat-map-cabin-reveal {
+    to {
+      opacity: 1;
+    }
+  }
+
+  &__nose {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    width: 100%;
+    transform: translateY(calc(-100% + fn.px-to-rem(35)));
+
+    path {
+      box-shadow: $plane-shadow;
+      stroke-width: fn.px-to-rem(2);
+    }
+  }
+
+  &__plane {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  &__wing {
+    position: absolute;
+    top: max(60%, fn.px-to-rem(500));
+    width: fn.px-to-rem(180);
+    height: max(30%, fn.px-to-rem(265));
+    transform: translateY(-60%);
+
+    &--isLeft {
+      left: fn.px-to-rem(-180);
+    }
+
+    &--isRight {
+      right: fn.px-to-rem(-180);
+      transform: translateY(-60%) scaleX(-1);
+    }
+  }
+
+  &__body {
+    position: relative;
+    z-index: 1;
+    min-height: 100%;
+    padding: fn.px-to-rem(40) var(--cp-spacing-2xl);
+    border-right: 1px solid var(--cp-border-soft);
+    border-left: 1px solid var(--cp-border-soft);
+    background-color: var(--cp-background-primary);
+    box-shadow: $plane-shadow;
+  }
+
+  &--isLarge .cpSeatMapPlane__body {
+    padding-inline: var(--cp-spacing-md);
+  }
+
+  &__cabin {
+    animation: cp-seat-map-cabin-reveal 1000ms ease forwards 1000ms;
+    opacity: 0;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cp-spacing-2xl);
+    transition-timing-function: ease-in-out;
+  }
+}
+
+@include mx.media-query-max(551px) {
+  .cpSeatMapPlane {
+    animation: none;
+
+    &__body {
+      padding: 0;
+      border: none;
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    &__cabin {
+      animation-delay: 200ms;
+    }
+
+    &__content {
+      gap: var(--cp-spacing-xl);
+    }
+  }
+}
+</style>