@citizenplane/pimp 18.6.2 → 18.8.0

package/src/stories/CpDate.stories.ts

@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
 
 import CpDate from '@/components/CpDate.vue'
 

package/src/stories/CpDatepicker.stories.ts

@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
 
 import CpDatepicker from '@/components/CpDatepicker.vue'
 

package/src/stories/CpDialog.stories.ts

@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
 
 import CpDialog from '@/components/CpDialog.vue'
 

package/src/stories/CpInput.stories.ts

@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
 import type { ComponentPropsAndSlots, Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
 
 import CpIcon from '@/components/CpIcon.vue'
 import CpInput from '@/components/CpInput.vue'

package/src/stories/CpItemActions.stories.ts

@@ -1,7 +1,6 @@
-import { ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import type { MenuItem } from 'primevue/menuitem'
+import { ref } from 'vue'
 
 import CpItemActions from '@/components/CpItemActions.vue'
 
@@ -13,6 +12,11 @@ const meta = {
       control: 'object',
       description: 'The actions to display',
     },
+    iconPosition: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'The position of the icon',
+    },
   },
 } satisfies Meta<typeof CpItemActions>
 
@@ -27,8 +31,9 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     actions: [],
+    iconPosition: 'horizontal',
   },
-  render: () => ({
+  render: (args) => ({
     components: { CpItemActions },
     setup() {
       const actions = ref<MenuItem[]>([
@@ -61,7 +66,7 @@ export const Default: Story = {
 
       const parentClick = () => alert('Parent clicked')
 
-      return { actions, listItemStyle, listItems, parentClick }
+      return { actions, listItemStyle, listItems, parentClick, args }
     },
     template: `
       <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 400px;">
@@ -74,7 +79,7 @@ export const Default: Story = {
             @click="parentClick"
           >
             <p>Item {{ index + 1 }}</p>
-            <CpItemActions size="xs" :actions="actions" />
+            <CpItemActions size="xs" :actions="actions" :icon-position="args.iconPosition" />
           </li>
         </ul>
       </div>

package/src/stories/CpMenu.stories.ts

@@ -1,6 +1,5 @@
-import { computed, ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, ref } from 'vue'
 
 import CpButton from '@/components/CpButton.vue'
 import CpMenu from '@/components/CpMenu.vue'

package/src/stories/CpMenuItem.stories.ts

@@ -1,6 +1,5 @@
-import { ref, computed } from 'vue'
-
 import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, ref } from 'vue'
 
 import CpButton from '@/components/CpButton.vue'
 import CpIcon from '@/components/CpIcon.vue'

package/src/stories/CpMultiselect.stories.ts

@@ -1,6 +1,5 @@
-import { ref, toValue } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref, toValue } from 'vue'
 
 import CpMultiselect from '@/components/CpMultiselect.vue'
 

package/src/stories/CpRadio.stories.ts

@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
 
 import CpRadio from '@/components/CpRadio.vue'
 

package/src/stories/CpRadioGroup.stories.ts

@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
 
 import CpRadioGroup from '@/components/CpRadioGroup.vue'
 

package/src/stories/CpSelect.stories.ts

@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
 
 import CpInput from '@/components/CpInput.vue'
 import CpSelect from '@/components/CpSelect.vue'

package/src/stories/CpSelectMenu.stories.ts

@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
 
 import CpSelectMenu from '@/components/CpSelectMenu.vue'
 

package/src/stories/CpSwitch.stories.ts

@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
 
 import CpSwitch from '@/components/CpSwitch.vue'
 

package/src/stories/CpTable.stories.ts

@@ -1,7 +1,6 @@
-import { action } from 'storybook/actions'
-import { ref, computed } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { action } from 'storybook/actions'
+import { computed, ref } from 'vue'
 
 import CpTable from '@/components/CpTable.vue'
 

package/src/stories/CpTabs.stories.ts

@@ -1,8 +1,7 @@
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 import { action } from 'storybook/actions'
 import { ref } from 'vue'
 
-import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
-
 import CpTabs from '@/components/CpTabs.vue'
 
 const meta = {

package/src/stories/CpText.stories.ts

@@ -1,8 +1,9 @@
 import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 
-import CpText from '@/components/CpText.vue'
 import type { CpTextSize, CpTextWeight } from '@/components/CpText.vue'
 
+import CpText from '@/components/CpText.vue'
+
 import { docLabelStyle } from '@/stories/documentationStyles'
 
 const textSizes = [

package/src/stories/CpTextarea.stories.ts

@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
 import type { ComponentPropsAndSlots, Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
 
 import CpTextarea from '@/components/CpTextarea.vue'
 

package/src/stories/CpToast.stories.ts

@@ -1,12 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { useToast } from 'primevue/usetoast'
 import { ref } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import CpToast from '@/components/CpToast.vue'
 
 import { CpToastTypes } from '@/constants/CpToastTypes'
 
-import CpToast from '@/components/CpToast.vue'
-
 type CpToastPosition =
   | 'bottom-center'
   | 'bottom-left'

package/src/stories/CpTransitionCounter.stories.ts

@@ -1,6 +1,5 @@
-import { computed, ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, ref } from 'vue'
 
 import CpButton from '@/components/CpButton.vue'
 import CpIcon from '@/components/CpIcon.vue'

package/src/stories/CpTransitionExpand.stories.ts

@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
 
 import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
 

package/src/stories/CpTransitionListItems.stories.ts

@@ -1,7 +1,6 @@
-import { ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import type { MenuItem } from 'primevue/menuitem'
+import { ref } from 'vue'
 
 import CpButton from '@/components/CpButton.vue'
 import CpIcon from '@/components/CpIcon.vue'

package/src/stories/CpTransitionSize.stories.ts

@@ -1,6 +1,5 @@
-import { computed, ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, ref } from 'vue'
 
 import CpButton from '@/components/CpButton.vue'
 import CpTransitionSize from '@/components/CpTransitionSize.vue'

package/src/stories/CpTransitionSlide.stories.ts

@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
 
 import CpButton from '@/components/CpButton.vue'
 import CpTransitionSlide from '@/components/CpTransitionSlide.vue'

package/src/stories/CpTransitionTabContent.stories.ts

@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
 
 import CpTabs from '@/components/CpTabs.vue'
 import CpTransitionTabContent from '@/components/CpTransitionTabContent.vue'

package/src/stories/CpTrip.stories.ts

@@ -0,0 +1,323 @@
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
+
+import CpTrip from '@/components/CpTrip.vue'
+
+const directTrip = {
+  arrivalDate: {
+    formatted: 'Tue, 10 Jun 2026',
+    raw: '2026-06-10',
+  },
+  arrivalTime: '11:40',
+  labels: {
+    nonStop: 'Direct',
+  },
+  dayCountAfterDeparture: 0,
+  departureDate: {
+    formatted: 'Tue, 10 Jun 2026',
+    raw: '2026-06-10',
+  },
+  departureTime: '09:00',
+  destination: {
+    iataCode: 'JFK',
+    name: 'John F. Kennedy International Airport',
+  },
+  flightDuration: {
+    formatted: '8h 40m',
+    raw: 'PT8H40M',
+  },
+  airlines: [
+    {
+      iataCode: 'AF',
+      name: 'Air France',
+    },
+  ],
+  origin: {
+    iataCode: 'CDG',
+    name: 'Paris Charles de Gaulle Airport',
+  },
+}
+
+const sampleTrip = {
+  arrivalDate: {
+    formatted: 'Wed, 11 Jun 2026',
+    raw: '2026-06-11',
+  },
+  arrivalTime: '14:25',
+  dayCountAfterDeparture: 1,
+  departureDate: {
+    formatted: 'Tue, 10 Jun 2026',
+    raw: '2026-06-10',
+  },
+  labels: {
+    stopCount: '1 stop',
+    layover: 'layover',
+    transfer: 'airport change',
+  },
+  hasSelfTransfer: true,
+  stops: [
+    {
+      duration: '2h 10m',
+      iata: 'MUC',
+      name: 'Munich',
+      selfTransferLabel: 'Self-transfer from Franz Josef Strauss (MUC) to Augsburg - Muehlhausen (AGB)',
+    },
+  ],
+  departureTime: '08:15',
+  destination: {
+    iataCode: 'JFK',
+    name: 'John F. Kennedy International Airport',
+  },
+  flightDuration: {
+    formatted: '12h 35m',
+    raw: 'PT12H35M',
+  },
+  airlines: [
+    {
+      iataCode: 'AF',
+      name: 'Air France',
+    },
+    {
+      iataCode: 'KL',
+      name: 'KLM',
+    },
+  ],
+  origin: {
+    iataCode: 'CDG',
+    name: 'Paris Charles de Gaulle Airport',
+  },
+}
+
+const oneStopTrip = {
+  arrivalDate: {
+    formatted: 'Tue, 10 Jun 2026',
+    raw: '2026-06-10',
+  },
+  arrivalTime: '11:40',
+  labels: {
+    stopCount: '1 stop',
+    layover: 'layover',
+  },
+  dayCountAfterDeparture: 0,
+  departureDate: {
+    formatted: 'Tue, 10 Jun 2026',
+    raw: '2026-06-10',
+  },
+  departureTime: '09:00',
+  destination: {
+    iataCode: 'JFK',
+    name: 'John F. Kennedy International Airport',
+  },
+  flightDuration: {
+    formatted: '8h 40m',
+    raw: 'PT8H40M',
+  },
+  airlines: [
+    {
+      iataCode: 'AF',
+      name: 'Air France',
+    },
+  ],
+  stops: [
+    {
+      duration: '4h 35m',
+      iata: 'AMS',
+      name: 'Amsterdam',
+    },
+  ],
+  origin: {
+    iataCode: 'CDG',
+    name: 'Paris Charles de Gaulle Airport',
+  },
+}
+
+const twoStopTrip = {
+  arrivalDate: {
+    formatted: 'Thu, 12 Jun 2026',
+    raw: '2026-06-12',
+  },
+  labels: {
+    stopCount: '2 stops',
+    layover: 'layover',
+    transfer: 'airport change',
+  },
+  arrivalTime: '18:50',
+  dayCountAfterDeparture: 2,
+  departureDate: {
+    formatted: 'Tue, 10 Jun 2026',
+    raw: '2026-06-10',
+  },
+  departureTime: '06:30',
+  destination: {
+    iataCode: 'LAX',
+    name: 'Los Angeles International Airport',
+  },
+  flightDuration: {
+    formatted: '22h 20m',
+    raw: 'PT22H20M',
+  },
+  hasSelfTransfer: true,
+  origin: {
+    iataCode: 'CDG',
+    name: 'Paris Charles de Gaulle Airport',
+  },
+  stops: [
+    {
+      duration: '4h 35m',
+      iata: 'AMS',
+      name: 'Amsterdam',
+    },
+    {
+      duration: '2h 10m',
+      iata: 'MUC',
+      name: 'Munich',
+      selfTransferLabel: 'Self-transfer from Franz Josef Strauss (MUC) to Augsburg - Muehlhausen (AGB)',
+    },
+  ],
+  airlines: [
+    {
+      iataCode: 'AF',
+      name: 'Air France',
+    },
+    {
+      iataCode: 'KL',
+      name: 'KLM',
+    },
+    {
+      iataCode: 'DL',
+      name: 'Delta Airlines',
+    },
+  ],
+}
+
+const fourStopTrip = {
+  ...twoStopTrip,
+  labels: {
+    ...twoStopTrip.labels,
+    stopCount: '4 stops',
+  },
+  stops: [
+    ...twoStopTrip.stops,
+    {
+      duration: '4h 35m',
+      iata: 'AMS',
+      name: 'Amsterdam',
+    },
+    {
+      duration: '4h 35m',
+      iata: 'AMS',
+      name: 'Amsterdam',
+    },
+  ],
+  airlines: [
+    ...twoStopTrip.airlines,
+    {
+      iataCode: '1L',
+      name: 'CitizenPlane',
+    },
+    {
+      iataCode: 'UA',
+      name: 'United Airlines',
+    },
+  ],
+}
+
+const meta = {
+  title: 'Business/CpTrip',
+  component: CpTrip,
+  argTypes: {
+    trip: {
+      control: 'object',
+      description: 'Flight trip data displayed in the row',
+    },
+    hideAirlines: {
+      control: 'boolean',
+      description: 'Hides airline logos in the timeline',
+    },
+  },
+} satisfies Meta<typeof CpTrip>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const defaultRender = (args: Args) => ({
+  components: { CpTrip },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div>
+      <CpTrip v-bind="args">
+      <template #header-trailing><CpBadge size="sm">Test</CpBadge></template>
+      <template #link><a href="#">Flight details</a></template>
+      </CpTrip>
+    </div>
+  `,
+})
+
+/**
+ * Default trip row with all route fields populated. Use the controls to
+ * experiment with each prop in isolation.
+ */
+export const Default: Story = {
+  args: {
+    trip: sampleTrip,
+  },
+  render: defaultRender,
+}
+
+/**
+ * Direct flight with no stops. The timeline shows "Direct" and a single
+ * flight number in the footer.
+ */
+export const DirectFlight: Story = {
+  args: {
+    trip: directTrip,
+  },
+  render: defaultRender,
+}
+
+/**
+ * One-stop itinerary with a single layover. The timeline shows "1 stop" with
+ * the stop IATA and a single flight number in the footer.
+ */
+export const OneStop: Story = {
+  args: {
+    trip: oneStopTrip,
+  },
+  render: defaultRender,
+}
+
+/**
+ * Multi-stop itinerary with two layovers. The timeline shows "2 stop" with
+ * both stop IATAs and three flight numbers in the footer.
+ */
+export const TwoStops: Story = {
+  args: {
+    trip: twoStopTrip,
+  },
+  render: defaultRender,
+}
+
+/**
+ * Multi-stop itinerary with four layovers. The timeline shows "4 stops" with
+ * all stop IATAs and flight numbers in the footer.
+ */
+export const FourStops: Story = {
+  args: {
+    trip: fourStopTrip,
+  },
+  render: defaultRender,
+}
+
+/**
+ * Trip row with airline logos hidden in the timeline. Useful when airline
+ * branding is shown elsewhere on the page.
+ */
+export const HideAirlines: Story = {
+  args: {
+    trip: twoStopTrip,
+    hideAirlines: true,
+  },
+  render: defaultRender,
+}

package/src/stories/Dimensions.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import type { Token } from '@/stories/tokenUtils'
+
 import {
   copyableClass,
   copyableCopiedClass,

package/src/stories/Shadows.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import type { Token } from '@/stories/tokenUtils'
+
 import {
   copyableClass,
   copyableCopiedClass,

package/src/stories/Typography.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import type { ProbeProperty, Token } from '@/stories/tokenUtils'
+
 import {
   copyableClass,
   copyableCopiedClass,

package/src/vendors/ff-polyfill.ts

@@ -30,7 +30,7 @@ export default function ffPolyfill(): void {
       d.removeEventListener('focusin', removePolyfill as EventListener, true)
       d.removeEventListener('focusout', removePolyfill as EventListener, true)
     }
-    setTimeout(function () {
+    setTimeout(() => {
       d.removeEventListener('focusin', removePolyfill as EventListener, true)
       d.removeEventListener('focusout', removePolyfill as EventListener, true)
     })

package/vitest.workspace.js

@@ -1,6 +1,6 @@
-import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'
 import { defineWorkspace } from 'vitest/config'
 
 const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url))

package/src/components/Pimp.vue

@@ -1,10 +0,0 @@
-<template>
-  <svg fill="none" height="88" viewBox="0 0 88 88" width="88" xmlns="http://www.w3.org/2000/svg">
-    <path
-      clip-rule="evenodd"
-      d="M23.3155 1.33384C11.7696 2.66096 2.66096 11.7696 1.33384 23.3155L0.981172 26.3838C-0.327057 37.7654 -0.327057 49.2594 0.981172 60.641L1.33384 63.7092C2.36493 72.6797 8.09325 80.179 16.0124 83.7006L16.0124 43.6567C16.0238 28.586 28.2869 16.328 43.3608 16.328C58.4408 16.328 70.7092 28.5963 70.7092 43.6764C70.7092 54.5957 64.276 64.0389 55.0001 68.4197L55.0094 68.3815L54.5074 68.6469C51.1007 70.1736 47.3284 71.0238 43.3608 71.0238C43.3406 71.0238 43.3205 71.0235 43.3004 71.0232C43.2802 71.023 43.2601 71.0227 43.2399 71.0227L38.9718 71.0217L38.9955 66.3765L43.2399 66.3455C43.2601 66.3455 43.2802 66.3458 43.3004 66.346C43.3205 66.3463 43.3406 66.3465 43.3608 66.3465C55.8616 66.3465 66.032 56.1761 66.032 43.6764C66.032 31.1756 55.8616 21.0052 43.3608 21.0052C30.8662 21.0052 20.701 31.1653 20.6906 43.6567V85.2476C21.5495 85.44 22.4253 85.5886 23.3155 85.6909L26.3838 86.0436C27.6029 86.1837 28.8234 86.3088 30.0449 86.4189V43.6575H30.0428C30.0532 36.3225 36.0236 30.3583 43.3607 30.3583C50.7039 30.3583 56.6785 36.3329 56.6785 43.6771C56.6785 51.0204 50.7039 56.995 43.3607 56.995C43.3528 56.995 43.3449 56.9947 43.3371 56.9944C43.3297 56.9942 43.3223 56.9939 43.3152 56.9939H38.9995V52.3167L43.3152 52.3157C43.3223 52.3157 43.3297 52.3162 43.3372 52.3167C43.3399 52.3169 43.3427 52.3171 43.3455 52.3172C43.3505 52.3175 43.3556 52.3178 43.3607 52.3178C48.1246 52.3178 52.0013 48.4411 52.0013 43.6771C52.0013 38.9121 48.1246 35.0355 43.3607 35.0355C38.6029 35.0355 34.7314 38.9018 34.72 43.6575H34.7221V86.767C43.3612 87.2741 52.0332 87.033 60.641 86.0436L63.7092 85.6909C75.2551 84.3638 84.3638 75.2551 85.6909 63.7092L86.0436 60.641C87.3518 49.2594 87.3518 37.7654 86.0436 26.3838L85.6909 23.3155C84.3638 11.7696 75.2551 2.66096 63.7092 1.33384L60.641 0.981172C49.2594 -0.327057 37.7654 -0.327057 26.3838 0.981172L23.3155 1.33384Z"
-      fill="#3E3E5B"
-      fill-rule="evenodd"
-    />
-  </svg>
-</template>