@citizenplane/pimp 18.23.4 → 18.23.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.23.4",
+  "version": "18.23.6",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpBasket.spec.ts

@@ -21,14 +21,14 @@ const promoRows: CpBasketRow[] = [{ label: 'Promo SUMMER25 applied', value: '-10
 const defaultProps = { total: '47,00 €', totalLabel: 'Total' }
 
 describe('CpBasket', () => {
-  it('renders text-only rows as two plain spans', () => {
+  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>Seat 12A</span><span>12,00 €</span>')
-    expect(renderedRows[1].element.innerHTML).toBe('<span>Carbon offset</span><span>3,00 €</span>')
+    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()
   })
 
@@ -41,7 +41,7 @@ describe('CpBasket', () => {
     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.element.children[0].outerHTML).toBe('<span class="">Promo SUMMER25 applied</span>')
     expect(renderedRow.get('.promoValue').text()).toBe('-10,00 €')
   })
 

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">
-                      <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 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'
 
@@ -192,7 +191,6 @@ const hasSections = computed(() => visibleCategories.value.length > 0)
 
     & + & {
       padding-top: var(--cp-spacing-sm-md);
-      border-top: fn.px-to-rem(1) solid var(--cp-border-soft);
     }
   }
 

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

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CpBasket > renders text-only rows as two plain spans 1`] = `
+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">
@@ -15,15 +15,11 @@ exports[`CpBasket > renders text-only rows as two plain spans 1`] = `
             <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 class="cpBasket__row cpBasket__row--isIndented"><span class="">Seat 12A</span><span class="">12,00 €</span></div>
               </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 class="cpBasket__row"><span class="">Carbon offset</span><span class="">3,00 €</span></div>
               </div>
             </transition-group-stub>
           </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,28 @@ 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[] = [
@@ -330,6 +352,40 @@ 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