@citizenplane/pimp 18.23.3 → 18.23.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.23.3",
+  "version": "18.23.4",
   "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 plain 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>Seat 12A</span><span>12,00 €</span>')
+    expect(renderedRows[1].element.innerHTML).toBe('<span>Carbon offset</span><span>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>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

@@ -18,8 +18,8 @@
                   <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>
+                      <slot name="rowLabel" :row="row"><span>{{ row.label }}</span></slot>
+                      <slot name="rowValue" :row="row"><span>{{ row.value }}</span></slot>
                     </div>
                   </cp-transition-list-items>
                 </div>
@@ -243,6 +243,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/__snapshots__/CpBasket.spec.ts.snap

@@ -0,0 +1,40 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CpBasket > renders text-only rows as two plain 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>
+                <transition-group-stub name="list-items" appear="false" persisted="false" css="true">
+                  <div class="cpBasket__row cpBasket__row--isIndented"><span>Seat 12A</span><span>12,00 €</span></div>
+                </transition-group-stub>
+              </div>
+              <div class="cpBasket__group">
+                <!--v-if-->
+                <transition-group-stub name="list-items" appear="false" persisted="false" css="true">
+                  <div class="cpBasket__row"><span>Carbon offset</span><span>3,00 €</span></div>
+                </transition-group-stub>
+              </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

@@ -99,6 +99,14 @@ const fakeRowPool: CpBasketRow[] = [
   { label: 'Priority boarding', value: '8,00 €', category: extrasCategory, group: null },
 ]
 
+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 +329,48 @@ export const TrailingSlot: Story = {
     `,
   }),
 }
+
+/**
+ * `#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'],
+  },
+})