@citizenplane/pimp 18.21.2 → 18.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.21.2",
+  "version": "18.23.0",
   "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/CpBasket.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="cpBasket">
+    <div v-if="hasLeading" class="cpBasket__trip">
+      <slot name="leading" />
+    </div>
+
+    <cp-transition-expand>
+      <div v-if="hasSections">
+        <div class="cpBasket__details">
+          <div v-for="category in visibleCategories" :key="category.id" class="cpBasket__category">
+            <div class="cpBasket__categoryTitle">
+              <p>{{ category.label }}</p>
+              <p>{{ category.subtotal }}</p>
+            </div>
+            <div v-if="category.hasGroups" class="cpBasket__groups">
+              <cp-transition-list-items>
+                <div v-for="group in category.groups" :key="group.id" class="cpBasket__group">
+                  <p v-if="group.label" class="cpBasket__route">{{ group.label }}</p>
+                  <cp-transition-list-items>
+                    <div v-for="row in group.rows" :key="row.key" :class="group.rowClass">
+                      <span>{{ row.label }}</span>
+                      <span>{{ row.value }}</span>
+                    </div>
+                  </cp-transition-list-items>
+                </div>
+              </cp-transition-list-items>
+            </div>
+          </div>
+        </div>
+      </div>
+    </cp-transition-expand>
+
+    <div class="cpBasket__total">
+      <p>{{ totalLabel }}</p>
+      <p class="cpBasket__totalValue">{{ total }}</p>
+    </div>
+
+    <div v-if="hasTrailing" class="cpBasket__trailing">
+      <slot name="trailing" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+import type { CpBasketCategory, CpBasketRow } from '@/constants/CpBasketTypes'
+
+import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
+import CpTransitionListItems from '@/components/CpTransitionListItems.vue'
+
+interface Props {
+  hideDetailsOnCategories?: string[]
+  rows: CpBasketRow[]
+  total: string
+  totalLabel: string
+}
+
+interface ResolvedRow extends CpBasketRow {
+  key: string
+}
+
+interface ResolvedGroup {
+  id: string
+  label: string | null
+  rowClass: string
+  rows: ResolvedRow[]
+}
+
+interface ResolvedCategory {
+  groups: ResolvedGroup[]
+  hasGroups: boolean
+  id: string
+  label: string
+  subtotal: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hideDetailsOnCategories: () => [],
+})
+
+const UNGROUPED_ID = '__cpBasketUngrouped__'
+
+const slots = useSlots()
+
+const hasLeading = computed(() => !!slots.leading)
+
+const hasTrailing = computed(() => !!slots.trailing)
+
+const hideDetailsIds = computed(() => new Set(props.hideDetailsOnCategories))
+
+const dedupeById = <T extends { id: string }>(items: T[]): T[] =>
+  items.filter((item, index) => items.findIndex((other) => other.id === item.id) === index)
+
+const orderedCategories = computed<CpBasketCategory[]>(() => dedupeById(props.rows.map((row) => row.category)))
+
+const withKeys = (rows: CpBasketRow[], categoryId: string): ResolvedRow[] =>
+  rows.map((row) => ({ ...row, key: `${categoryId}-${row.group?.id ?? 'ungrouped'}-${row.label}` }))
+
+const buildResolvedGroup = (id: string, label: string | null, rows: CpBasketRow[], categoryId: string): ResolvedGroup => ({
+  id,
+  label,
+  rowClass: label ? 'cpBasket__row cpBasket__row--isIndented' : 'cpBasket__row',
+  rows: withKeys(rows, categoryId),
+})
+
+const buildResolvedCategory = (category: CpBasketCategory, categoryRows: CpBasketRow[]): ResolvedCategory => {
+  if (hideDetailsIds.value.has(category.id)) {
+    return { groups: [], hasGroups: false, id: category.id, label: category.label, subtotal: category.subtotal }
+  }
+
+  const groupsInCategory = categoryRows.flatMap((row) => (row.group ? [row.group] : []))
+  const uniqueGroups = dedupeById(groupsInCategory)
+  const labelledGroups = uniqueGroups.map((group) =>
+    buildResolvedGroup(
+      group.id,
+      group.label,
+      categoryRows.filter((row) => row.group?.id === group.id),
+      category.id,
+    ),
+  )
+
+  const ungroupedRows = categoryRows.filter((row) => row.group == null)
+  const ungroupedGroup: ResolvedGroup[] =
+    ungroupedRows.length === 0 ? [] : [buildResolvedGroup(UNGROUPED_ID, null, ungroupedRows, category.id)]
+
+  const groups = [...labelledGroups, ...ungroupedGroup]
+
+  return { groups, hasGroups: groups.length > 0, id: category.id, label: category.label, subtotal: category.subtotal }
+}
+
+const visibleCategories = computed<ResolvedCategory[]>(() =>
+  orderedCategories.value.map((category) =>
+    buildResolvedCategory(
+      category,
+      props.rows.filter((row) => row.category.id === category.id),
+    ),
+  ),
+)
+
+const hasSections = computed(() => visibleCategories.value.length > 0)
+</script>
+
+<style lang="scss">
+.cpBasket {
+  display: flex;
+  flex-direction: column;
+  padding: var(--cp-spacing-sm);
+  border-radius: var(--cp-radius-xl);
+  background: var(--cp-background-tertiary);
+  gap: var(--cp-spacing-sm);
+
+  &__trip {
+    display: flex;
+    flex-direction: column;
+    padding: var(--cp-spacing-lg);
+    gap: var(--cp-spacing-md);
+  }
+
+  &__leg {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cp-spacing-sm);
+
+    & + & {
+      padding-top: var(--cp-spacing-md);
+      border-top: fn.px-to-rem(1) solid var(--cp-border-soft);
+    }
+  }
+
+  &__legDate {
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-xs);
+    font-weight: 600;
+    line-height: var(--cp-text-xs-line-height);
+    text-transform: uppercase;
+  }
+
+  &__details {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    padding: var(--cp-spacing-md) var(--cp-spacing-lg);
+    border-radius: var(--cp-radius-lg);
+    background: var(--cp-background-secondary);
+    gap: var(--cp-spacing-sm-md);
+  }
+
+  &__category {
+    display: flex;
+    flex-direction: column;
+
+    & + & {
+      padding-top: var(--cp-spacing-sm-md);
+      border-top: fn.px-to-rem(1) solid var(--cp-border-soft);
+    }
+  }
+
+  &__categoryTitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--cp-text-primary);
+    font-size: var(--cp-text-size-md);
+    font-weight: 600;
+    line-height: var(--cp-text-md-line-height);
+    padding-block: var(--cp-spacing-sm);
+
+    & > :last-child {
+      color: var(--cp-text-secondary);
+    }
+  }
+
+  &__groups {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cp-spacing-md);
+  }
+
+  &__group {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--cp-spacing-sm);
+  }
+
+  &__route {
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-sm);
+    font-weight: 500;
+    line-height: var(--cp-text-sm-line-height);
+  }
+
+  &__row {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-sm);
+    gap: var(--cp-spacing-md);
+    line-height: var(--cp-text-sm-line-height);
+
+    &--isIndented {
+      padding-left: var(--cp-spacing-md);
+    }
+  }
+
+  &__total {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    padding: var(--cp-spacing-lg);
+    color: var(--cp-text-primary);
+    font-size: var(--cp-text-size-lg);
+    font-weight: 600;
+    line-height: var(--cp-text-lg-line-height);
+  }
+
+  &__totalValue {
+    color: var(--cp-text-accent-primary);
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__trailing {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--cp-spacing-sm);
+  }
+}
+</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/index.ts

@@ -24,6 +24,7 @@ import CpAncillaryCategory from './CpAncillaryCategory.vue'
 import CpAncillaryFlightSelection from './CpAncillaryFlightSelection.vue'
 import CpAncillaryItem from './CpAncillaryItem.vue'
 import CpBadge from './CpBadge.vue'
+import CpBasket from './CpBasket.vue'
 import CpBottomSheet from './CpBottomSheet.vue'
 import CpButton from './CpButton.vue'
 import CpButtonGroup from './CpButtonGroup.vue'
@@ -35,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'
@@ -123,6 +125,8 @@ const Components = {
   CpAncillaryCategory,
   CpAncillaryFlightSelection,
   CpAncillaryItem,
+  CpBasket,
+  CpFlightTabs,
   CpLoader,
   CpInput,
   CpText,
@@ -198,6 +202,8 @@ 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,
@@ -243,6 +249,7 @@ export {
   CpAncillaryFlightSelection,
   CpAncillaryItem,
   CpBadge,
+  CpBasket,
   CpBottomSheet,
   CpButton,
   CpButtonGroup,
@@ -255,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/CpBasketTypes.ts

@@ -0,0 +1,17 @@
+export interface CpBasketCategory {
+  id: string
+  label: string
+  subtotal: string
+}
+
+export interface CpBasketGroup {
+  id: string
+  label: string
+}
+
+export interface CpBasketRow {
+  category: CpBasketCategory
+  group?: CpBasketGroup | null
+  label: string
+  value: string
+}

package/src/constants/CpFlightTabsTypes.ts

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