@citizenplane/pimp 18.21.2 → 18.23.0

package/src/stories/CpBasket.stories.ts

@@ -0,0 +1,323 @@
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import type { CpBasketRow } from '@/constants/CpBasketTypes'
+
+import CpBasket from '@/components/CpBasket.vue'
+import CpButton from '@/components/CpButton.vue'
+import CpIcon from '@/components/CpIcon.vue'
+import CpTrip from '@/components/CpTrip.vue'
+
+const outboundTrip = {
+  arrivalDate: {
+    formatted: 'Tue, 10 Jun 2026',
+    raw: '2026-06-10',
+  },
+  arrivalTime: '10:20',
+  labels: {
+    nonStop: 'Direct',
+  },
+  dayCountAfterDeparture: 0,
+  departureDate: {
+    formatted: 'Tue, 10 Jun 2026',
+    raw: '2026-06-10',
+  },
+  departureTime: '09:00',
+  destination: {
+    iataCode: 'ORY',
+    name: 'Paris Orly Airport',
+  },
+  flightDuration: {
+    formatted: '1h 20m',
+    raw: 'PT1H20M',
+  },
+  airlines: [
+    {
+      iataCode: 'AF',
+      name: 'Air France',
+    },
+  ],
+  origin: {
+    iataCode: 'CDG',
+    name: 'Paris Charles de Gaulle Airport',
+  },
+}
+
+const returnTrip = {
+  arrivalDate: {
+    formatted: 'Fri, 13 Jun 2026',
+    raw: '2026-06-13',
+  },
+  arrivalTime: '19:50',
+  labels: {
+    nonStop: 'Direct',
+  },
+  dayCountAfterDeparture: 0,
+  departureDate: {
+    formatted: 'Fri, 13 Jun 2026',
+    raw: '2026-06-13',
+  },
+  departureTime: '18:30',
+  destination: {
+    iataCode: 'CDG',
+    name: 'Paris Charles de Gaulle Airport',
+  },
+  flightDuration: {
+    formatted: '1h 20m',
+    raw: 'PT1H20M',
+  },
+  airlines: [
+    {
+      iataCode: 'AF',
+      name: 'Air France',
+    },
+  ],
+  origin: {
+    iataCode: 'ORY',
+    name: 'Paris Orly Airport',
+  },
+}
+
+const seatsCategory = { id: 'seats', label: 'Seats', subtotal: '24,00 €' }
+const baggageCategory = { id: 'baggage', label: 'Baggage', subtotal: '20,00 €' }
+const extrasCategory = { id: 'extras', label: 'Extras', subtotal: '3,00 €' }
+
+const outboundGroup = { id: 'CDG-ORY', label: 'CDG → ORY' }
+const returnGroup = { id: 'ORY-CDG', label: 'ORY → CDG' }
+
+const rows: CpBasketRow[] = [
+  { label: 'Seat 12A', value: '12,00 €', category: seatsCategory, group: outboundGroup },
+  { label: 'Seat 14C', value: '12,00 €', category: seatsCategory, group: returnGroup },
+  { label: '2 × Cabin baggage 10kg', value: '20,00 €', category: baggageCategory, group: outboundGroup },
+  { label: 'Carbon offset', value: '3,00 €', category: extrasCategory },
+]
+
+const fakeRowPool: CpBasketRow[] = [
+  { label: 'Extra bag 20kg', value: '15,00 €', category: baggageCategory, group: outboundGroup },
+  { label: 'Seat 15B', value: '10,00 €', category: seatsCategory, group: returnGroup },
+  { label: 'Meal', value: '9,00 €', category: extrasCategory },
+  { label: 'Priority boarding', value: '8,00 €', category: extrasCategory, group: null },
+]
+
+const flightsCategory = { id: 'flights', label: 'Flights', subtotal: '159,80 €' }
+const hiddenSeatsCategory = { id: 'seats', label: 'Seats', subtotal: '99,60 €' }
+const tripExtrasCategory = { id: 'tripExtras', label: 'Trip extras', subtotal: '269,40 €' }
+const taxesCategory = { id: 'taxes', label: 'Taxes & Fees', subtotal: '14,30 €' }
+
+const hiddenDetailsRows: CpBasketRow[] = [
+  { label: 'CDG → MRS', value: '79,90 €', category: flightsCategory, group: outboundGroup },
+  { label: 'MRS → CDG', value: '79,90 €', category: flightsCategory, group: returnGroup },
+  { label: 'Extra legroom', value: '99,60 €', category: hiddenSeatsCategory },
+  { label: 'Priority boarding', value: '269,40 €', category: tripExtrasCategory },
+  { label: 'VAT', value: '14,30 €', category: taxesCategory },
+]
+
+const meta = {
+  title: 'Business/CpBasket',
+  component: CpBasket,
+  argTypes: {
+    hideDetailsOnCategories: {
+      control: 'object',
+      description: 'Category ids rendered as a title-only line, with no groups or rows',
+      table: { defaultValue: { summary: '[]' } },
+    },
+    rows: {
+      control: 'object',
+      description: 'Flat list of basket rows, each carrying its own category and group',
+    },
+    total: {
+      control: 'text',
+      description: 'Preformatted total amount',
+    },
+    totalLabel: {
+      control: 'text',
+      description: 'Label shown next to the total, translated by the consumer',
+    },
+  },
+} satisfies Meta<typeof CpBasket>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const defaultRender = (args: Args) => ({
+  components: { CpBasket, CpTrip },
+  setup() {
+    return { args, outboundTrip, returnTrip }
+  },
+  template: `
+    <CpBasket v-bind="args">
+      <template #leading>
+        <div class="cpBasket__leg">
+          <p class="cpBasket__legDate">{{ outboundTrip.departureDate.formatted }}</p>
+          <CpTrip hide-airlines :trip="outboundTrip" />
+        </div>
+        <div class="cpBasket__leg">
+          <p class="cpBasket__legDate">{{ returnTrip.departureDate.formatted }}</p>
+          <CpTrip hide-airlines :trip="returnTrip" />
+        </div>
+      </template>
+    </CpBasket>
+  `,
+})
+
+const defaultStoryRender = (args: Args) => ({
+  components: { CpBasket, CpButton, CpTrip },
+  setup() {
+    const storyRows = ref<CpBasketRow[]>([...rows])
+    const fakeRowCount = ref(0)
+
+    const addFakeRow = () => {
+      const pick = fakeRowPool[Math.floor(Math.random() * fakeRowPool.length)]
+      fakeRowCount.value += 1
+      storyRows.value = [...storyRows.value, { ...pick, label: `${pick.label} #${fakeRowCount.value}` }]
+    }
+
+    return { addFakeRow, args, outboundTrip, returnTrip, storyRows }
+  },
+  template: `
+    <div style="display: flex; flex-direction: column; gap: 16px; max-width: 415px;">
+      <CpButton @click="addFakeRow">Add fake row</CpButton>
+      <CpBasket v-bind="args" :rows="storyRows">
+        <template #leading>
+          <div class="cpBasket__leg">
+            <p class="cpBasket__legDate">{{ outboundTrip.departureDate.formatted }}</p>
+            <CpTrip hide-airlines :trip="outboundTrip" />
+          </div>
+          <div class="cpBasket__leg">
+            <p class="cpBasket__legDate">{{ returnTrip.departureDate.formatted }}</p>
+            <CpTrip hide-airlines :trip="returnTrip" />
+          </div>
+        </template>
+      </CpBasket>
+    </div>
+  `,
+})
+
+/**
+ * Three categories (seats, baggage, extras) with rows grouped per route in the
+ * `#leading` slot rendering the two `cp-trip` legs. The button above the
+ * basket appends one random fake row per click (sometimes ungrouped) to
+ * eyeball the `cp-transition-list-items` insert animation.
+ */
+export const Default: Story = {
+  args: {
+    rows,
+    total: '47,00 €',
+    totalLabel: 'Total',
+  },
+  render: defaultStoryRender,
+}
+
+/**
+ * No rows: only the `#leading` slot and the total render, the details block
+ * collapses via `cp-transition-expand`.
+ */
+export const EmptyRows: Story = {
+  args: {
+    rows: [],
+    total: '0,00 €',
+    totalLabel: 'Total',
+  },
+  render: defaultRender,
+}
+
+/**
+ * One category mixing a labelled group with ungrouped rows whose `group` is
+ * either omitted or explicitly `null` — both render the same way: no label,
+ * no indentation, after the labelled group.
+ */
+export const GroupedAndUngroupedRows: Story = {
+  args: {
+    rows: [
+      {
+        label: 'Seat 12A',
+        value: '12,00 €',
+        category: { id: 'seats', label: 'Seats', subtotal: '32,00 €' },
+        group: outboundGroup,
+      },
+      { label: 'Seat 14C', value: '12,00 €', category: { id: 'seats', label: 'Seats', subtotal: '32,00 €' } },
+      {
+        label: 'Priority boarding',
+        value: '8,00 €',
+        category: { id: 'seats', label: 'Seats', subtotal: '32,00 €' },
+        group: null,
+      },
+    ],
+    total: '32,00 €',
+    totalLabel: 'Total',
+  },
+  render: defaultRender,
+}
+
+/**
+ * No `#leading` slot content: the leading container is not rendered at all.
+ */
+export const NoLeadingSlot: Story = {
+  args: {
+    rows,
+    total: '47,00 €',
+    totalLabel: 'Total',
+  },
+  render: (args: Args) => ({
+    components: { CpBasket },
+    setup() {
+      return { args }
+    },
+    template: `<CpBasket v-bind="args" />`,
+  }),
+}
+
+/**
+ * `hideDetailsOnCategories` collapses "Seats", "Trip extras" and
+ * "Taxes & Fees" to their title line while "Flights" keeps its grouped rows,
+ * matching the Figma payment-summary reference.
+ */
+export const HiddenDetails: Story = {
+  args: {
+    hideDetailsOnCategories: ['seats', 'tripExtras', 'taxes'],
+    rows: hiddenDetailsRows,
+    total: '543,10 €',
+    totalLabel: 'Total',
+  },
+  render: defaultRender,
+}
+
+/**
+ * `#trailing` slot rendered after the total, with a `var(--cp-spacing-sm)`
+ * gap only appearing because the slot is provided.
+ */
+export const TrailingSlot: Story = {
+  args: {
+    rows,
+    total: '47,00 €',
+    totalLabel: 'Total',
+  },
+  render: (args: Args) => ({
+    components: { CpBasket, CpButton, CpIcon, CpTrip },
+    setup() {
+      return { args, outboundTrip, returnTrip }
+    },
+    template: `
+      <CpBasket v-bind="args">
+        <template #leading>
+          <div class="cpBasket__leg">
+            <p class="cpBasket__legDate">{{ outboundTrip.departureDate.formatted }}</p>
+            <CpTrip hide-airlines :trip="outboundTrip" />
+          </div>
+          <div class="cpBasket__leg">
+            <p class="cpBasket__legDate">{{ returnTrip.departureDate.formatted }}</p>
+            <CpTrip hide-airlines :trip="returnTrip" />
+          </div>
+        </template>
+        <template #trailing>
+          <CpButton appearance="secondary" color="accent" size="lg" style="width: 100%;">
+            <template #leading-icon><CpIcon type="download" /></template>
+            Download your invoice (PDF)
+          </CpButton>
+          <p style="color: var(--cp-text-secondary); font-size: 14px;">Paid on Jul 25, 2026 · card •• 4242</p>
+        </template>
+      </CpBasket>
+    `,
+  }),
+}

package/src/stories/CpFlightTabs.stories.ts

@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import type { CpFlightTabsFlight } from '@/constants/CpFlightTabsTypes'
+
+import CpFlightTabs from '@/components/CpFlightTabs.vue'
+
+import { docLabelStyle } from '@/stories/documentationStyles'
+
+const sampleFlights: CpFlightTabsFlight[] = [
+  {
+    id: 'outbound',
+    label: 'Outbound',
+    originCity: 'Paris',
+    originIata: 'CDG',
+    destinationCity: 'New York',
+    destinationIata: 'JFK',
+  },
+  {
+    id: 'inbound',
+    label: 'Return',
+    originCity: 'New York',
+    originIata: 'JFK',
+    destinationCity: 'Paris',
+    destinationIata: 'CDG',
+  },
+]
+
+const noLabelFlights: CpFlightTabsFlight[] = sampleFlights.map(({ label: _label, ...flight }) => flight)
+
+const threeFlights: CpFlightTabsFlight[] = [
+  ...sampleFlights,
+  {
+    id: 'connecting',
+    label: 'Connecting',
+    originCity: 'Paris',
+    originIata: 'CDG',
+    destinationCity: 'Lyon',
+    destinationIata: 'LYS',
+  },
+]
+
+const meta = {
+  title: 'Business/CpFlightTabs',
+  component: CpFlightTabs,
+  argTypes: {
+    flights: {
+      control: 'object',
+      description: 'Flights shown as tabs',
+    },
+  },
+} satisfies Meta<typeof CpFlightTabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Two flights, first one selected. The model is wired with a ref to
+ * demonstrate the round trip.
+ */
+export const Default: Story = {
+  args: {
+    flights: sampleFlights,
+  },
+  render: (args) => ({
+    components: { CpFlightTabs },
+    setup() {
+      const activeFlightId = ref(sampleFlights[0].id)
+      return { args, activeFlightId }
+    },
+    template: `
+      <div style="padding: 20px; width: 40rem;">
+        <CpFlightTabs v-bind="args" v-model:active-flight-id="activeFlightId" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Flights without a `label`: only the route line is rendered.
+ */
+export const NoLabels: Story = {
+  args: {
+    flights: noLabelFlights,
+  },
+  render: (args) => ({
+    components: { CpFlightTabs },
+    setup() {
+      const activeFlightId = ref(noLabelFlights[0].id)
+      return { args, activeFlightId }
+    },
+    template: `
+      <div style="padding: 20px; width: 40rem;">
+        <CpFlightTabs v-bind="args" v-model:active-flight-id="activeFlightId" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Three flights sharing the tab strip.
+ */
+export const ThreeFlights: Story = {
+  args: {
+    flights: threeFlights,
+  },
+  render: (args) => ({
+    components: { CpFlightTabs },
+    setup() {
+      const activeFlightId = ref(threeFlights[0].id)
+      return { args, activeFlightId }
+    },
+    template: `
+      <div style="padding: 20px; width: 40rem;">
+        <CpFlightTabs v-bind="args" v-model:active-flight-id="activeFlightId" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * At a 358px container width the tabs swap city names for IATA codes.
+ */
+export const Mobile: Story = {
+  args: {
+    flights: sampleFlights,
+  },
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpFlightTabs },
+    setup() {
+      const activeFlightId = ref(sampleFlights[0].id)
+      return { sampleFlights, activeFlightId, docLabelStyle }
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 10px; width: 358px;">
+        <span :style="docLabelStyle">358px</span>
+        <CpFlightTabs :flights="sampleFlights" v-model:active-flight-id="activeFlightId" />
+      </div>
+    `,
+  }),
+}