@citizenplane/pimp 18.23.3 → 18.23.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.23.3",
+  "version": "18.23.5",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -11,6 +11,7 @@
     "lint:style:fix": "stylelint \"**/*.{css,scss,vue}\" --fix",
     "format": "biome format --write .",
     "types": "vue-tsc --noEmit",
+    "test": "vitest run",
     "commitlint": "commitlint --edit",
     "prepare": "husky"
   },
@@ -74,6 +75,7 @@
     "@vitest/coverage-v8": "4.1.9",
     "@vue/test-utils": "2.4.11",
     "commitlint-config-gitmoji": "2.3.1",
+    "happy-dom": "20.14.5",
     "husky": "9.1.7",
     "lint-staged": "17.2.0",
     "playwright": "1.62.0",

package/src/components/CpBasket.spec.ts

@@ -0,0 +1,90 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { defineComponent } from 'vue'
+
+import type { CpBasketRow } from '@/constants/CpBasketTypes'
+
+import CpBasket from '@/components/CpBasket.vue'
+
+const seatsCategory = { id: 'seats', label: 'Seats', subtotal: '24,00 €' }
+const promoCategory = { id: 'promo', label: 'Promo code', subtotal: '-10,00 €' }
+
+const outboundGroup = { id: 'CDG-ORY', label: 'CDG → ORY' }
+
+const textOnlyRows: CpBasketRow[] = [
+  { label: 'Seat 12A', value: '12,00 €', category: seatsCategory, group: outboundGroup },
+  { label: 'Carbon offset', value: '3,00 €', category: seatsCategory },
+]
+
+const promoRows: CpBasketRow[] = [{ label: 'Promo SUMMER25 applied', value: '-10,00 €', category: promoCategory }]
+
+const defaultProps = { total: '47,00 €', totalLabel: 'Total' }
+
+describe('CpBasket', () => {
+  it('renders text-only rows as two morphing spans', () => {
+    const wrapper = mount(CpBasket, { props: { ...defaultProps, rows: textOnlyRows } })
+
+    const renderedRows = wrapper.findAll('.cpBasket__row')
+
+    expect(renderedRows).toHaveLength(2)
+    expect(renderedRows[0].element.innerHTML).toBe('<span class="">Seat 12A</span><span class="">12,00 €</span>')
+    expect(renderedRows[1].element.innerHTML).toBe('<span class="">Carbon offset</span><span class="">3,00 €</span>')
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('keeps the row markup untouched when only one cell slot is provided', () => {
+    const wrapper = mount(CpBasket, {
+      props: { ...defaultProps, rows: promoRows },
+      slots: { rowValue: '<span class="promoValue">{{ params.row.value }}</span>' },
+    })
+
+    const renderedRow = wrapper.get('.cpBasket__row')
+
+    expect(renderedRow.element.children).toHaveLength(2)
+    expect(renderedRow.element.children[0].outerHTML).toBe('<span class="">Promo SUMMER25 applied</span>')
+    expect(renderedRow.get('.promoValue').text()).toBe('-10,00 €')
+  })
+
+  it('reaches the consumer handler when a button in the label slot is clicked', async () => {
+    const removePromoCode = vi.fn()
+
+    const host = defineComponent({
+      components: { CpBasket },
+      setup: () => ({ defaultProps, promoRows, removePromoCode }),
+      template: `
+        <CpBasket v-bind="defaultProps" :rows="promoRows">
+          <template #rowLabel="{ row }">
+            <span>{{ row.label }} <button type="button" @click="removePromoCode">Remove</button></span>
+          </template>
+        </CpBasket>
+      `,
+    })
+
+    const wrapper = mount(host)
+
+    const removeButton = wrapper.get('.cpBasket__row button')
+
+    expect(removeButton.element.tagName).toBe('BUTTON')
+    expect(removeButton.element.closest('.cpBasket__row')).toBe(wrapper.get('.cpBasket__row').element)
+
+    await removeButton.trigger('click')
+
+    expect(removePromoCode).toHaveBeenCalledTimes(1)
+  })
+
+  it('right-aligns the value cell filled by the rowValue slot', () => {
+    const wrapper = mount(CpBasket, {
+      props: { ...defaultProps, rows: promoRows },
+      slots: { rowValue: '<span class="promoValue">{{ params.row.value }}</span>' },
+      attachTo: document.body,
+    })
+
+    const valueCell = wrapper.get('.promoValue').element
+    const valueCellStyle = window.getComputedStyle(valueCell)
+
+    expect(valueCellStyle.textAlign).toBe('right')
+    expect(valueCellStyle.fontVariantNumeric).toBe('tabular-nums')
+
+    wrapper.unmount()
+  })
+})

package/src/components/CpBasket.vue

@@ -16,12 +16,10 @@
               <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 v-for="row in group.rows" :key="row.key" :class="group.rowClass">
+                    <slot name="rowLabel" :row="row"><cp-text-morph :text="row.label" as="span" /></slot>
+                    <slot name="rowValue" :row="row"><cp-text-morph :text="row.value" as="span" /></slot>
+                  </div>
                 </div>
               </cp-transition-list-items>
             </div>
@@ -46,6 +44,7 @@ import { computed, useSlots } from 'vue'
 
 import type { CpBasketCategory, CpBasketRow } from '@/constants/CpBasketTypes'
 
+import CpTextMorph from '@/components/CpTextMorph.vue'
 import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
 import CpTransitionListItems from '@/components/CpTransitionListItems.vue'
 
@@ -243,6 +242,11 @@ const hasSections = computed(() => visibleCategories.value.length > 0)
     &--isIndented {
       padding-left: var(--cp-spacing-md);
     }
+
+    & > :last-child {
+      font-variant-numeric: tabular-nums;
+      text-align: right;
+    }
   }
 
   &__total {

package/src/components/CpQuantityCounter.vue

@@ -64,7 +64,7 @@ const increment = () => {
   align-items: center;
   padding: var(--cp-spacing-xs);
   border-radius: var(--cp-radius-md-lg);
-  background: var(--cp-background-accent-primary);
+  background: var(--cp-background-secondary);
   gap: var(--cp-spacing-sm);
 
   &__button {

package/src/components/__snapshots__/CpBasket.spec.ts.snap

@@ -0,0 +1,36 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CpBasket > renders text-only rows as two morphing spans 1`] = `
+"<div class="cpBasket">
+  <!--v-if-->
+  <transition-stub data-v-19d824c7="" name="expand" appear="false" persisted="false" css="true">
+    <div>
+      <div class="cpBasket__details">
+        <div class="cpBasket__category">
+          <div class="cpBasket__categoryTitle">
+            <p>Seats</p>
+            <p>24,00 €</p>
+          </div>
+          <div class="cpBasket__groups">
+            <transition-group-stub name="list-items" appear="false" persisted="false" css="true">
+              <div class="cpBasket__group">
+                <p class="cpBasket__route">CDG → ORY</p>
+                <div class="cpBasket__row cpBasket__row--isIndented"><span class="">Seat 12A</span><span class="">12,00 €</span></div>
+              </div>
+              <div class="cpBasket__group">
+                <!--v-if-->
+                <div class="cpBasket__row"><span class="">Carbon offset</span><span class="">3,00 €</span></div>
+              </div>
+            </transition-group-stub>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition-stub>
+  <div class="cpBasket__total">
+    <p>Total</p>
+    <p class="cpBasket__totalValue">47,00 €</p>
+  </div>
+  <!--v-if-->
+</div>"
+`;

package/src/stories/CpBasket.stories.ts

@@ -1,5 +1,5 @@
 import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import type { CpBasketRow } from '@/constants/CpBasketTypes'
 
@@ -99,6 +99,36 @@ const fakeRowPool: CpBasketRow[] = [
   { label: 'Priority boarding', value: '8,00 €', category: extrasCategory, group: null },
 ]
 
+const morphBaseRows: CpBasketRow[] = [
+  { label: 'Seat 12A', value: '12,00 €', category: { ...seatsCategory, subtotal: '12,00 €' }, group: outboundGroup },
+  {
+    label: 'Cabin baggage 10kg',
+    value: '20,00 €',
+    category: { ...baggageCategory, subtotal: '20,00 €' },
+    group: outboundGroup,
+  },
+  { label: 'Carbon offset', value: '3,00 €', category: { ...extrasCategory, subtotal: '3,00 €' } },
+]
+
+const morphDoubledRows: CpBasketRow[] = [
+  { label: 'Seat 12A', value: '24,00 €', category: { ...seatsCategory, subtotal: '24,00 €' }, group: outboundGroup },
+  {
+    label: 'Cabin baggage 10kg',
+    value: '40,00 €',
+    category: { ...baggageCategory, subtotal: '40,00 €' },
+    group: outboundGroup,
+  },
+  { label: 'Carbon offset', value: '6,00 €', category: { ...extrasCategory, subtotal: '6,00 €' } },
+]
+
+const promoCategory = { id: 'promo', label: 'Promo code', subtotal: '-10,00 €' }
+
+const promoRows: CpBasketRow[] = [
+  { label: 'Seat 12A', value: '12,00 €', category: seatsCategory, group: outboundGroup },
+  { label: '2 × Cabin baggage 10kg', value: '20,00 €', category: baggageCategory, group: outboundGroup },
+  { label: 'Promo SUMMER25 applied', value: '-10,00 €', category: promoCategory },
+]
+
 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 €' }
@@ -321,3 +351,82 @@ export const TrailingSlot: Story = {
     `,
   }),
 }
+
+/**
+ * The rows keep their identity while their amounts change: clicking "Double
+ * the quantities" only swaps `row.value`, so each value morphs in place
+ * through `cp-text-morph` instead of the row re-entering the list.
+ */
+export const MorphingRowValues: Story = {
+  args: {
+    rows: morphBaseRows,
+    total: '35,00 €',
+    totalLabel: 'Total',
+  },
+  render: (args: Args) => ({
+    components: { CpBasket, CpButton },
+    setup() {
+      const isDoubled = ref(false)
+
+      const storyRows = computed<CpBasketRow[]>(() => (isDoubled.value ? morphDoubledRows : morphBaseRows))
+      const storyTotal = computed<string>(() => (isDoubled.value ? '70,00 €' : '35,00 €'))
+
+      const toggleQuantities = () => {
+        isDoubled.value = !isDoubled.value
+      }
+
+      return { args, storyRows, storyTotal, toggleQuantities }
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px; max-width: 415px;">
+        <CpButton @click="toggleQuantities">Double the quantities</CpButton>
+        <CpBasket v-bind="args" :rows="storyRows" :total="storyTotal" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * `#rowLabel` and `#rowValue` let the consumer own one cell of a row while the
+ * rest of the basket keeps its default text rendering. Here the promo row
+ * carries a real `cp-button` next to its label and a success-toned negative
+ * amount, and clicking "Remove" drops the row from the list.
+ */
+export const PromoCodeRow: Story = {
+  args: {
+    rows: promoRows,
+    total: '22,00 €',
+    totalLabel: 'Total',
+  },
+  render: (args: Args) => ({
+    components: { CpBasket, CpButton },
+    setup() {
+      const storyRows = ref<CpBasketRow[]>([...promoRows])
+
+      const removePromoCode = () => {
+        storyRows.value = storyRows.value.filter((row) => row.category.id !== promoCategory.id)
+      }
+
+      return { args, promoCategoryId: promoCategory.id, removePromoCode, storyRows }
+    },
+    template: `
+      <div style="max-width: 415px;">
+        <CpBasket v-bind="args" :rows="storyRows">
+          <template #rowLabel="{ row }">
+            <span v-if="row.category.id === promoCategoryId">
+              {{ row.label }}
+              <CpButton appearance="tertiary" color="accent" size="2xs" @click="removePromoCode">Remove</CpButton>
+            </span>
+            <span v-else>{{ row.label }}</span>
+          </template>
+          <template #rowValue="{ row }">
+            <span v-if="row.category.id === promoCategoryId" style="color: var(--cp-text-success-primary);">
+              {{ row.value }}
+            </span>
+            <span v-else>{{ row.value }}</span>
+          </template>
+        </CpBasket>
+      </div>
+    `,
+  }),
+}

package/tsconfig.build.json

@@ -10,5 +10,14 @@
     "skipLibCheck": true
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.d.ts"],
-  "exclude": ["node_modules", "dist", "src/stories", "**/*.stories.ts", "**/*.stories.vue", "**/*.stories.tsx", "tests"]
+  "exclude": [
+    "node_modules",
+    "dist",
+    "src/stories",
+    "**/*.spec.ts",
+    "**/*.stories.ts",
+    "**/*.stories.vue",
+    "**/*.stories.tsx",
+    "tests"
+  ]
 }

package/vitest.config.js

@@ -0,0 +1,32 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vitest/config'
+
+const dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(dirname, 'src'),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+        @use "sass:math";
+        @use '@/assets/styles/helpers/functions' as fn;
+        @use '@/assets/styles/helpers/mixins' as mx;
+        @use '@/assets/styles/utilities';`,
+        api: 'modern-compiler',
+      },
+    },
+  },
+  test: {
+    css: true,
+    environment: 'happy-dom',
+    include: ['src/**/*.spec.ts'],
+  },
+})