@citizenplane/pimp 18.14.4 → 18.16.1

package/src/stories/CpTrip.stories.ts

@@ -1,6 +1,10 @@
 import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 
+import type { Flight } from '@/constants/tripDetails/Flight'
+
+import CpAccordion from '@/components/CpAccordion.vue'
 import CpTrip from '@/components/CpTrip.vue'
+import CpTripDetails from '@/components/CpTripDetails.vue'
 
 const directTrip = {
   arrivalDate: {
@@ -221,6 +225,104 @@ const fourStopTrip = {
   ],
 }
 
+/**
+ * Summary and segments below describe the same one-stop CDG → MUC → JFK
+ * itinerary: 09:00 Paris → 10:40 Munich, 2h 10m layover, 12:50 Munich →
+ * 16:15 New York, for 13h 15m of total travel time on 10 Jun 2026.
+ */
+const fullTrip = {
+  arrivalDate: {
+    formatted: 'Wed, 10 Jun 2026',
+    raw: '2026-06-10',
+  },
+  arrivalTime: '16:15',
+  dayCountAfterDeparture: 0,
+  departureDate: {
+    formatted: 'Wed, 10 Jun 2026',
+    raw: '2026-06-10',
+  },
+  departureTime: '09:00',
+  destination: {
+    iataCode: 'JFK',
+    name: 'John F. Kennedy International Airport',
+  },
+  flightDuration: {
+    formatted: '13h 15m',
+    raw: 'PT13H15M',
+  },
+  labels: {
+    layover: 'layover',
+    stopCount: '1 stop',
+  },
+  airlines: [
+    {
+      iataCode: 'AF',
+      name: 'Air France',
+    },
+    {
+      iataCode: 'LH',
+      name: 'Lufthansa',
+    },
+  ],
+  origin: {
+    iataCode: 'CDG',
+    name: 'Paris Charles de Gaulle Airport',
+  },
+  stops: [
+    {
+      duration: '2h 10m',
+      iata: 'MUC',
+      name: 'Munich',
+    },
+  ],
+}
+
+/** Segment dates are GMT — `CpTripDetails` converts them to each airport's timezone. */
+const fullTripFlight: Flight = {
+  segments: [
+    {
+      airline: { iata_code: 'AF', name: 'Air France' },
+      arrival_date: '2026-06-10T08:40:00',
+      departure_date: '2026-06-10T07:00:00',
+      destination: {
+        city_name: 'Munich',
+        iata_code: 'MUC',
+        name: 'Franz Josef Strauss Airport',
+        timezone: 'Europe/Berlin',
+      },
+      destination_terminal: { label: 'Terminal 2', terminal_code: '2' },
+      flight_number: 'AF1122',
+      origin: {
+        city_name: 'Paris',
+        iata_code: 'CDG',
+        name: 'Paris Charles de Gaulle Airport',
+        timezone: 'Europe/Paris',
+      },
+      origin_terminal: { label: 'Terminal 2E', terminal_code: '2E' },
+    },
+    {
+      airline: { iata_code: 'LH', name: 'Lufthansa' },
+      arrival_date: '2026-06-10T20:15:00',
+      departure_date: '2026-06-10T10:50:00',
+      destination: {
+        city_name: 'New York',
+        iata_code: 'JFK',
+        name: 'John F. Kennedy International Airport',
+        timezone: 'America/New_York',
+      },
+      destination_terminal: { label: 'Terminal 1', terminal_code: '1' },
+      flight_number: 'LH410',
+      origin: {
+        city_name: 'Munich',
+        iata_code: 'MUC',
+        name: 'Franz Josef Strauss Airport',
+        timezone: 'Europe/Berlin',
+      },
+      origin_terminal: { label: 'Terminal 2', terminal_code: '2' },
+    },
+  ],
+}
+
 const meta = {
   title: 'Business/CpTrip',
   component: CpTrip,
@@ -321,3 +423,48 @@ export const HideAirlines: Story = {
   },
   render: defaultRender,
 }
+
+/**
+ * A complete itinerary: `CpTrip` acts as the always-visible summary in the
+ * accordion header, and `CpTripDetails` renders the leg-by-leg breakdown in
+ * the expandable content. The rounded corners come from the wrapper, since
+ * `CpAccordion` is square by design so it can be stacked in a group.
+ */
+export const FullTrip: Story = {
+  args: {
+    trip: fullTrip,
+  },
+  render: (args: Args) => ({
+    components: { CpAccordion, CpTrip, CpTripDetails },
+    setup() {
+      const wrapperStyle = [
+        'box-sizing: border-box',
+        'width: 640px',
+        'max-width: 100%',
+        'overflow: hidden',
+        'border: 1px solid var(--cp-border-soft)',
+        'border-radius: var(--cp-radius-xl)',
+        'box-shadow: var(--cp-shadows-xs)',
+      ].join('; ')
+
+      const summaryStyle = 'padding-top: var(--cp-spacing-md);'
+      const detailsStyle = 'border-top: 1px solid var(--cp-border-soft);'
+
+      return { args, detailsStyle, fullTripFlight, summaryStyle, wrapperStyle }
+    },
+    template: `
+      <div :style="wrapperStyle">
+        <CpAccordion :default-open-state="true" icon-position="trailing" title="Outbound · Wed, 10 Jun 2026">
+          <template #leading-slot>
+            <div :style="summaryStyle">
+              <CpTrip v-bind="args" />
+            </div>
+          </template>
+          <div :style="detailsStyle">
+            <CpTripDetails :flight="fullTripFlight" />
+          </div>
+        </CpAccordion>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpTripDetails.stories.ts

@@ -0,0 +1,134 @@
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { Flight } from '@/constants/tripDetails/Flight'
+
+import CpTripDetails from '@/components/CpTripDetails.vue'
+
+const parisAirport = {
+  city_name: 'Paris',
+  iata_code: 'CDG',
+  name: 'Paris Charles de Gaulle Airport',
+  timezone: 'Europe/Paris',
+}
+
+const munichAirport = {
+  city_name: 'Munich',
+  iata_code: 'MUC',
+  name: 'Franz Josef Strauss Airport',
+  timezone: 'Europe/Berlin',
+}
+
+const newYorkAirport = {
+  city_name: 'New York',
+  iata_code: 'JFK',
+  name: 'John F. Kennedy International Airport',
+  timezone: 'America/New_York',
+}
+
+const directFlight: Flight = {
+  segments: [
+    {
+      airline: { iata_code: 'AF', name: 'Air France' },
+      arrival_date: '2026-06-10T17:40:00',
+      departure_date: '2026-06-10T09:00:00',
+      destination: newYorkAirport,
+      destination_terminal: { label: 'Terminal 1', terminal_code: '1' },
+      flight_number: 'AF008',
+      origin: parisAirport,
+      origin_terminal: { label: 'Terminal 2E', terminal_code: '2E' },
+    },
+  ],
+}
+
+const oneStopFlight: Flight = {
+  segments: [
+    {
+      airline: { iata_code: 'AF', name: 'Air France' },
+      arrival_date: '2026-06-10T11:10:00',
+      departure_date: '2026-06-10T09:00:00',
+      destination: munichAirport,
+      flight_number: 'AF1234',
+      origin: parisAirport,
+      origin_terminal: { label: 'Terminal 2E', terminal_code: '2E' },
+      via_airport: { city_name: 'Munich', iata_code: 'MUC' },
+    },
+    {
+      airline: { iata_code: 'KL', name: 'KLM' },
+      arrival_date: '2026-06-10T20:25:00',
+      departure_date: '2026-06-10T13:20:00',
+      destination: newYorkAirport,
+      destination_terminal: { label: 'Terminal 4', terminal_code: '4' },
+      flight_number: 'KL5678',
+      origin: munichAirport,
+    },
+  ],
+}
+
+/** Luxon formats times and durations through `Intl`, so any BCP 47 tag works. */
+const localeOptions = ['en', 'fr', 'de', 'es', 'it', 'nl', 'pt']
+
+const localeLabels: Record<string, string> = {
+  de: 'Deutsch (de)',
+  en: 'English (en)',
+  es: 'Español (es)',
+  fr: 'Français (fr)',
+  it: 'Italiano (it)',
+  nl: 'Nederlands (nl)',
+  pt: 'Português (pt)',
+}
+
+const meta = {
+  title: 'Business/CpTripDetails',
+  component: CpTripDetails,
+  argTypes: {
+    flight: {
+      control: 'object',
+      description: 'Raw flight data (segments) the leg-by-leg route detail is built from',
+    },
+    config: {
+      control: 'object',
+      description: 'Static label overrides — Pimp has no i18n, so the consumer supplies its own translations',
+    },
+    locale: {
+      control: { type: 'select', labels: localeLabels },
+      options: localeOptions,
+      description: 'Locale used to format durations and the date tooltips. Does not translate the `config` labels.',
+      table: { defaultValue: { summary: 'en' } },
+    },
+  },
+} satisfies Meta<typeof CpTripDetails>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const defaultRender = (args: Args) => ({
+  components: { CpTripDetails },
+  setup() {
+    return { args }
+  },
+  template: `<CpTripDetails v-bind="args" />`,
+})
+
+/**
+ * Direct flight: a single segment, no layover section.
+ */
+export const DirectFlight: Story = {
+  args: {
+    flight: directFlight,
+    locale: 'en',
+  },
+  render: defaultRender,
+}
+
+/**
+ * One-stop itinerary: the layover section appears between the two segments,
+ * and the technical-stop row is visible in the connection details.
+ */
+export const OneStop: Story = {
+  args: {
+    flight: oneStopFlight,
+    locale: 'en',
+  },
+  render: defaultRender,
+}