@citizenplane/pimp 18.17.0 → 18.19.0

package/src/components/index.ts

@@ -19,6 +19,8 @@ import CpAccordion from './CpAccordion.vue'
 import CpAccordionGroup from './CpAccordionGroup.vue'
 import CpAirlineLogo from './CpAirlineLogo.vue'
 import CpAlert from './CpAlert.vue'
+import CpAncillaryCategory from './CpAncillaryCategory.vue'
+import CpAncillaryItem from './CpAncillaryItem.vue'
 import CpBadge from './CpBadge.vue'
 import CpBottomSheet from './CpBottomSheet.vue'
 import CpButton from './CpButton.vue'
@@ -114,6 +116,8 @@ const Components = {
   CpRadioNew,
   CpCalendar,
   CpAlert,
+  CpAncillaryCategory,
+  CpAncillaryItem,
   CpLoader,
   CpInput,
   CpText,
@@ -207,6 +211,8 @@ export type {
   FlightTerminal,
 } from '@/constants/tripDetails'
 
+export { CpAncillaryCategoryTypes, isSwitchCategory } from '@/constants/CpAncillaryCategoryTypes'
+export { CpAncillaryItemTypes } from '@/constants/CpAncillaryItemTypes'
 export {
   CpSeatMapTransitionDirections,
   DEFAULT_CP_SEAT_MAP_CONFIG,
@@ -224,6 +230,8 @@ export {
   CpAccordionGroup,
   CpAirlineLogo,
   CpAlert,
+  CpAncillaryCategory,
+  CpAncillaryItem,
   CpBadge,
   CpBottomSheet,
   CpButton,

package/src/constants/CpAncillaryCategoryTypes.ts

@@ -0,0 +1,14 @@
+export enum CpAncillaryCategoryTypes {
+  AIRPORT_SERVICES = 'airportServices',
+  BAGGAGES = 'baggages',
+  CARBON_OFFSET = 'carbonOffset',
+  INSURANCE = 'insurance',
+  ON_BOARD = 'onBoard',
+  PETS = 'pets',
+  RESTRICTED = 'restricted',
+  SPORT_EQUIPMENTS = 'sportEquipments',
+}
+
+const SWITCH_CATEGORY_TYPES = new Set<CpAncillaryCategoryTypes>([CpAncillaryCategoryTypes.CARBON_OFFSET])
+
+export const isSwitchCategory = (type: CpAncillaryCategoryTypes): boolean => SWITCH_CATEGORY_TYPES.has(type)

package/src/constants/CpAncillaryItemTypes.ts

@@ -0,0 +1,30 @@
+export enum CpAncillaryItemTypes {
+  AIRPORT_TRANSFER = 'airportTransfer',
+  BICYCLE = 'bicycle',
+  CABIN_BAG = 'cabinBag',
+  CANCELLATION_INSURANCE = 'cancellationInsurance',
+  CHECKED_BAG = 'checkedBag',
+  CHECKED_BAG_SIZE_1 = 'checkedBagSize1',
+  CHECKED_BAG_SIZE_2 = 'checkedBagSize2',
+  CHECKED_BAG_SIZE_3 = 'checkedBagSize3',
+  CONNECTIVITY = 'connectivity',
+  DIVING_SET = 'divingSet',
+  EXTRA_WEIGHT = 'extraWeight',
+  FAST_TRACK = 'fastTrack',
+  FIREARM = 'firearm',
+  FISHING_ROD = 'fishingRod',
+  GOLF = 'golf',
+  HAND_BAG = 'handBag',
+  KITE_SURF = 'kiteSurf',
+  LOUNGE_ACCESS = 'loungeAccess',
+  MEET_AND_GREET = 'meetAndGreet',
+  MUSIC = 'music',
+  NAME_CHANGE = 'nameChange',
+  OTHER = 'other',
+  OVERSIZED = 'oversized',
+  PET_IN_CABIN = 'petInCabin',
+  PET_IN_HOLD = 'petInHold',
+  SKIS = 'skis',
+  SPECIAL_MEAL = 'specialMeal',
+  STANDARD_MEAL = 'standardMeal',
+}

package/src/stories/CpAncillaryCategory.stories.ts

@@ -0,0 +1,274 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { onMounted, ref } from 'vue'
+
+import CpAncillaryCategory from '@/components/CpAncillaryCategory.vue'
+import CpAncillaryItem from '@/components/CpAncillaryItem.vue'
+
+import { CpAncillaryCategoryTypes } from '@/constants/CpAncillaryCategoryTypes'
+import { docLabelStyle } from '@/stories/documentationStyles'
+
+const cardGridStyle = 'display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;'
+const galleryListStyle = 'display: flex; flex-direction: column; gap: 24px; width: 100%;'
+const galleryRowStyle = 'display: flex; flex-direction: column; gap: 10px; width: 100%;'
+
+const meta = {
+  title: 'Business/CpAncillaryCategory',
+  component: CpAncillaryCategory,
+  decorators: [
+    (story) => ({
+      components: { story },
+      setup() {
+        onMounted(() => {
+          document.getElementById('storybook-root')?.style.setProperty('width', '100%')
+        })
+      },
+      template: '<story />',
+    }),
+  ],
+  argTypes: {
+    currency: {
+      control: 'text',
+      description: 'ISO currency code used to format the from price',
+    },
+    description: {
+      control: 'text',
+      description: 'Description text for the category',
+    },
+    fromPrice: {
+      control: 'number',
+      description: 'From price in minor units (cents), shown when isExpandable is set',
+    },
+    fromPriceLabel: {
+      control: 'text',
+      description: 'Caption shown before the from price amount',
+    },
+    isDefaultClosed: {
+      control: 'boolean',
+      description: 'Whether an expandable category starts closed',
+    },
+    isExpandable: {
+      control: 'boolean',
+      description: 'Whether the header gets a from-price + chevron toggle collapsing the body',
+    },
+    locale: {
+      control: 'text',
+      description: 'Locale used to format the from price, defaults to the browser locale',
+    },
+    title: {
+      control: 'text',
+      description: 'Title of the category',
+    },
+    type: {
+      control: 'select',
+      options: Object.values(CpAncillaryCategoryTypes),
+      description: 'Picks the visual and, for switch categories, the trailing control',
+    },
+  },
+} satisfies Meta<typeof CpAncillaryCategory>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Expandable category with a from-price. Use the controls to experiment with
+ * each prop in isolation.
+ */
+export const Default: Story = {
+  args: {
+    title: 'Baggages',
+    description: 'Check in your bags for the flight',
+    type: CpAncillaryCategoryTypes.BAGGAGES,
+    isExpandable: true,
+    fromPrice: 2990,
+    fromPriceLabel: 'From',
+    currency: 'EUR',
+  },
+  render: (args) => ({
+    components: { CpAncillaryCategory, CpAncillaryItem },
+    setup() {
+      const quantities = ref({ checkedBag: 0, cabinBag: 0, handBag: 0 })
+      return { args, cardGridStyle, quantities }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryCategory v-bind="args">
+          <div :style="cardGridStyle">
+            <CpAncillaryItem
+              v-model:quantity="quantities.checkedBag"
+              title="Checked bag"
+              description="23kg included"
+              type="checkedBag"
+              :max-quantity="3"
+              max-quantity-label="max. 3"
+              :price="2990"
+              currency="EUR"
+            />
+            <CpAncillaryItem
+              v-model:quantity="quantities.cabinBag"
+              title="Cabin bag"
+              description="10kg included"
+              type="cabinBag"
+              :max-quantity="1"
+              max-quantity-label="max. 1"
+              :price="1990"
+              currency="EUR"
+            />
+            <CpAncillaryItem
+              v-model:quantity="quantities.handBag"
+              title="Hand bag"
+              description="Personal item"
+              type="handBag"
+              :max-quantity="1"
+              max-quantity-label="max. 1"
+              :price="990"
+              currency="EUR"
+            />
+          </div>
+        </CpAncillaryCategory>
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* States                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * isDefaultClosed starts the expandable category collapsed.
+ */
+export const Collapsed: Story = {
+  args: {
+    ...Default.args,
+    isDefaultClosed: true,
+  },
+  render: (args) => ({
+    components: { CpAncillaryCategory, CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, cardGridStyle, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryCategory v-bind="args">
+          <div :style="cardGridStyle">
+            <CpAncillaryItem
+              v-model:quantity="quantity"
+              title="Checked bag"
+              description="23kg included"
+              type="checkedBag"
+              :max-quantity="3"
+              max-quantity-label="max. 3"
+              :price="2990"
+              currency="EUR"
+            />
+          </div>
+        </CpAncillaryCategory>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * isExpandable false: no from-price, no chevron, the body is always rendered.
+ */
+export const NotExpandable: Story = {
+  args: {
+    title: 'Insurance',
+    description: 'Protect your trip against the unexpected',
+    type: CpAncillaryCategoryTypes.INSURANCE,
+    isExpandable: false,
+  },
+  render: (args) => ({
+    components: { CpAncillaryCategory, CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, cardGridStyle, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryCategory v-bind="args">
+          <div :style="cardGridStyle">
+            <CpAncillaryItem
+              v-model:quantity="quantity"
+              title="Cancellation insurance"
+              description="Refund protection for your trip"
+              type="cancellationInsurance"
+              :max-quantity="1"
+              max-quantity-label="max. 1"
+              :price="1490"
+              currency="EUR"
+            />
+          </div>
+        </CpAncillaryCategory>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Switch categories (carbonOffset today) show a formatted price and a switch
+ * instead of a chevron, and are never expandable.
+ */
+export const Switch: Story = {
+  args: {
+    title: 'Carbon offset',
+    description: 'Compensate the CO2 emissions of your flight',
+    type: CpAncillaryCategoryTypes.CARBON_OFFSET,
+    fromPrice: 490,
+    currency: 'EUR',
+  },
+  render: (args) => ({
+    components: { CpAncillaryCategory },
+    setup() {
+      const checked = ref(false)
+      return { args, checked }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryCategory v-bind="args" v-model:checked="checked" />
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* Gallery                                                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Every enum value's header: each real visual, and the fallback icon for the
+ * two art-less types.
+ */
+export const Gallery: Story = {
+  args: {
+    ...Default.args,
+  },
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpAncillaryCategory },
+    setup() {
+      const types = Object.values(CpAncillaryCategoryTypes)
+      const checkedStates = ref(Object.fromEntries(types.map((type) => [type, false])))
+      return { types, checkedStates, galleryListStyle, galleryRowStyle, docLabelStyle }
+    },
+    template: `
+      <div :style="galleryListStyle">
+        <div v-for="type in types" :key="type" :style="galleryRowStyle">
+          <span :style="docLabelStyle">{{ type }}</span>
+          <CpAncillaryCategory
+            v-model:checked="checkedStates[type]"
+            :title="type"
+            description="Sample description"
+            :type="type"
+            is-expandable
+            :from-price="1000"
+            currency="EUR"
+          >
+            <span :style="docLabelStyle">Body content</span>
+          </CpAncillaryCategory>
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpAncillaryItem.stories.ts

@@ -0,0 +1,243 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import CpAncillaryItem from '@/components/CpAncillaryItem.vue'
+
+import { CpAncillaryItemTypes } from '@/constants/CpAncillaryItemTypes'
+import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'
+
+const galleryCellStyle = `${docCellStyle} width: 260px;`
+
+const meta = {
+  title: 'Business/CpAncillaryItem',
+  component: CpAncillaryItem,
+  argTypes: {
+    currency: {
+      control: 'text',
+      description: 'ISO currency code used to format price',
+    },
+    description: {
+      control: 'text',
+      description: 'Description text for the ancillary',
+    },
+    locale: {
+      control: 'text',
+      description: 'Locale used to format price, defaults to the browser locale',
+    },
+    maxQuantity: {
+      control: 'number',
+      description: 'Maximum selectable quantity, null for uncapped',
+    },
+    maxQuantityLabel: {
+      control: 'text',
+      description: 'Caption shown next to the counter when maxQuantity is set',
+    },
+    price: {
+      control: 'number',
+      description: 'Price in minor units (cents), formatted with currency',
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Optional second line rendered under the description',
+    },
+    title: {
+      control: 'text',
+      description: 'Title of the ancillary',
+    },
+    type: {
+      control: 'select',
+      options: Object.values(CpAncillaryItemTypes),
+      description: 'Picks the visual for the ancillary',
+    },
+    vertical: {
+      control: 'boolean',
+      description: 'Whether to use the column layout instead of the row layout',
+    },
+  },
+} satisfies Meta<typeof CpAncillaryItem>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default ancillary card. Use the controls to experiment with each prop in isolation.
+ */
+export const Default: Story = {
+  args: {
+    title: 'Checked bag',
+    description: '23kg included',
+    type: CpAncillaryItemTypes.CHECKED_BAG,
+    quantity: 0,
+    maxQuantity: 3,
+    maxQuantityLabel: 'max. 3',
+    price: 2990,
+    currency: 'EUR',
+    vertical: false,
+  },
+  render: (args) => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryItem v-bind="args" v-model:quantity="quantity" />
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* States                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * quantity > 0 adds the accent ring and swaps the counter background.
+ */
+export const Selected: Story = {
+  args: {
+    ...Default.args,
+    quantity: 1,
+  },
+  render: (args) => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const quantity = ref(1)
+      return { args, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryItem v-bind="args" v-model:quantity="quantity" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * No maxQuantity: the counter has no upper bound and the caption is hidden.
+ */
+export const Uncapped: Story = {
+  args: {
+    title: 'Extra weight',
+    description: 'Additional 5kg allowance',
+    type: CpAncillaryItemTypes.EXTRA_WEIGHT,
+    quantity: 0,
+    maxQuantity: null,
+    price: 990,
+    currency: 'EUR',
+    vertical: false,
+  },
+  render: (args) => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryItem v-bind="args" v-model:quantity="quantity" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * A type with no bundled visual falls back to the shopping-bag icon.
+ */
+export const NoImage: Story = {
+  args: {
+    title: 'Cancellation insurance',
+    description: 'Refund protection for your trip',
+    type: CpAncillaryItemTypes.CANCELLATION_INSURANCE,
+    quantity: 0,
+    maxQuantity: 1,
+    maxQuantityLabel: 'max. 1',
+    price: 1490,
+    currency: 'EUR',
+    vertical: false,
+  },
+  render: (args) => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryItem v-bind="args" v-model:quantity="quantity" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * The column layout, used for baggage grids. subtitle renders a second details
+ * line under the description.
+ */
+export const Vertical: Story = {
+  args: {
+    title: 'Cabin bag',
+    description: '10kg included',
+    subtitle: '9kg • 55 × 36 × 25 cm',
+    type: CpAncillaryItemTypes.CABIN_BAG,
+    quantity: 0,
+    maxQuantity: 1,
+    maxQuantityLabel: 'max. 1',
+    price: 1990,
+    currency: 'EUR',
+    vertical: true,
+  },
+  render: (args) => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryItem v-bind="args" v-model:quantity="quantity" />
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* Gallery                                                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Every enum value rendered at once: each real visual, and the fallback icon
+ * for the three art-less types.
+ */
+export const Gallery: Story = {
+  args: {
+    ...Default.args,
+  },
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const types = Object.values(CpAncillaryItemTypes)
+      const quantities = ref(Object.fromEntries(types.map((type) => [type, 0])))
+      return { types, quantities, galleryCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div v-for="type in types" :key="type" :style="galleryCellStyle">
+          <span :style="docLabelStyle">{{ type }}</span>
+          <CpAncillaryItem
+            v-model:quantity="quantities[type]"
+            :title="type"
+            description="Sample description"
+            :type="type"
+            :max-quantity="5"
+            max-quantity-label="max. 5"
+            :price="1000"
+            currency="EUR"
+          />
+        </div>
+      </div>
+    `,
+  }),
+}