@citizenplane/pimp 18.19.3 → 18.19.5

package/package.json

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

package/src/components/CpAncillaryCategory.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="cpAncillaryCategory">
+  <div class="cpAncillaryCategory" :class="cpAncillaryCategoryDynamicClass">
     <component
       :is="headerTag"
       v-bind="headerAttrs"
@@ -66,6 +66,7 @@ import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
 import BaggagesVisual from '@/assets/images/ancillary-categories/baggages.png'
 import CarbonOffsetVisual from '@/assets/images/ancillary-categories/carbon-offset.png'
 import InsuranceVisual from '@/assets/images/ancillary-categories/insurance.png'
+import NameChangeVisual from '@/assets/images/ancillary-categories/name-change.png'
 import PetsVisual from '@/assets/images/ancillary-categories/pets.png'
 import RestrictedVisual from '@/assets/images/ancillary-categories/restricted.png'
 import SportEquipmentsVisual from '@/assets/images/ancillary-categories/sport-equipments.png'
@@ -111,6 +112,7 @@ const categoryVisuals: Partial<Record<CpAncillaryCategoryTypes, string>> = {
   [CpAncillaryCategoryTypes.BAGGAGES]: BaggagesVisual,
   [CpAncillaryCategoryTypes.CARBON_OFFSET]: CarbonOffsetVisual,
   [CpAncillaryCategoryTypes.INSURANCE]: InsuranceVisual,
+  [CpAncillaryCategoryTypes.NAME_CHANGE]: NameChangeVisual,
   [CpAncillaryCategoryTypes.PETS]: PetsVisual,
   [CpAncillaryCategoryTypes.RESTRICTED]: RestrictedVisual,
   [CpAncillaryCategoryTypes.SPORT_EQUIPMENTS]: SportEquipmentsVisual,
@@ -135,6 +137,10 @@ const fromPriceDynamicClass = computed(() => ({ 'cpAncillaryCategory__fromPrice-
 
 const chevronDynamicClass = computed(() => ({ 'cpAncillaryCategory__chevron--isRotated': isOpen.value }))
 
+const cpAncillaryCategoryDynamicClass = computed(() => ({
+  'cpAncillaryCategory--isOpen': isActuallyExpandable.value && isOpen.value,
+}))
+
 const handleHeaderClick = () => {
   if (isActuallyExpandable.value) isOpen.value = !isOpen.value
 }
@@ -196,6 +202,10 @@ const handleHeaderClick = () => {
     @container (width < 30rem) {
       justify-content: flex-start;
       padding: 0;
+
+      .cpAncillaryCategory--isOpen & {
+        display: none;
+      }
     }
   }
 

package/src/components/CpAncillaryItem.vue

@@ -16,6 +16,7 @@
             v-model="quantity"
             class="cpAncillaryItem__counter"
             :decrease-label="decreaseLabel"
+            :disable-animation="disableAnimation"
             :increase-label="increaseLabel"
             :max="maxQuantity"
           />
@@ -63,6 +64,7 @@ import { CpAncillaryItemTypes } from '@/constants/CpAncillaryItemTypes'
 interface Props {
   currency?: string
   description: string
+  disableAnimation?: boolean
   locale?: string
   maxQuantity?: number | null
   maxQuantityLabel?: string
@@ -214,41 +216,43 @@ const cpAncillaryItemDynamicClass = computed(() => ({
     line-height: var(--cp-text-md-line-height);
   }
 
-  &--isVertical {
-    .cpAncillaryItem__wrap {
-      flex-direction: column;
-      align-items: center;
-      padding-bottom: var(--cp-spacing-lg);
-    }
-
-    .cpAncillaryItem__visual {
-      width: 100%;
-      height: fn.px-to-rem(128);
-    }
-
-    .cpAncillaryItem__image {
-      width: fn.px-to-rem(80);
-      height: fn.px-to-rem(80);
-    }
-
-    .cpAncillaryItem__content {
-      width: 100%;
-      align-items: center;
-    }
-
-    .cpAncillaryItem__name {
-      padding: 0 var(--cp-spacing-lg);
-    }
-
-    .cpAncillaryItem__title,
-    .cpAncillaryItem__description,
-    .cpAncillaryItem__subtitle {
-      text-align: center;
-    }
-
-    .cpAncillaryItem__quantity {
-      flex-direction: column;
-      gap: var(--cp-spacing-sm);
+  @include mx.media-query-min(48rem) {
+    &--isVertical {
+      .cpAncillaryItem__wrap {
+        flex-direction: column;
+        align-items: center;
+        padding-bottom: var(--cp-spacing-lg);
+      }
+
+      .cpAncillaryItem__visual {
+        width: 100%;
+        height: fn.px-to-rem(128);
+      }
+
+      .cpAncillaryItem__image {
+        width: fn.px-to-rem(80);
+        height: fn.px-to-rem(80);
+      }
+
+      .cpAncillaryItem__content {
+        width: 100%;
+        align-items: center;
+      }
+
+      .cpAncillaryItem__name {
+        padding: 0 var(--cp-spacing-lg);
+      }
+
+      .cpAncillaryItem__title,
+      .cpAncillaryItem__description,
+      .cpAncillaryItem__subtitle {
+        text-align: center;
+      }
+
+      .cpAncillaryItem__quantity {
+        flex-direction: column;
+        gap: var(--cp-spacing-sm);
+      }
     }
   }
 

package/src/constants/CpAncillaryCategoryTypes.ts

@@ -3,6 +3,7 @@ export enum CpAncillaryCategoryTypes {
   BAGGAGES = 'baggages',
   CARBON_OFFSET = 'carbonOffset',
   INSURANCE = 'insurance',
+  NAME_CHANGE = 'nameChange',
   ON_BOARD = 'onBoard',
   PETS = 'pets',
   RESTRICTED = 'restricted',

package/src/stories/CpAncillaryCategory.stories.ts

@@ -240,7 +240,7 @@ export const Mobile: Story = {
     template: `
       <div :style="galleryListStyle">
         <div :style="galleryRowStyle">
-          <span :style="docLabelStyle">Expandable</span>
+          <span :style="docLabelStyle">Expandable (closed)</span>
           <div style="width: 358px;">
             <CpAncillaryCategory
               title="Sport Equipments"
@@ -253,6 +253,21 @@ export const Mobile: Story = {
             />
           </div>
         </div>
+        <div :style="galleryRowStyle">
+          <span :style="docLabelStyle">Expandable (open, no trailing)</span>
+          <div style="width: 358px;">
+            <CpAncillaryCategory
+              title="Sport Equipments"
+              description="Travel with special or oversized items you need to bring along."
+              type="sportEquipments"
+              is-expandable
+              :from-price="5990"
+              currency="EUR"
+            >
+              <span :style="docLabelStyle">Body content</span>
+            </CpAncillaryCategory>
+          </div>
+        </div>
         <div :style="galleryRowStyle">
           <span :style="docLabelStyle">Switch</span>
           <div style="width: 358px;">

package/src/stories/CpAncillaryItem.stories.ts

@@ -202,6 +202,31 @@ export const Vertical: Story = {
   }),
 }
 
+/**
+ * Below the tablet breakpoint the card is always horizontal, even when
+ * vertical is true: `vertical` only takes effect from tablet width up.
+ */
+export const VerticalOnMobile: Story = {
+  args: {
+    ...Vertical.args,
+  },
+  globals: {
+    viewport: { value: '390-844', isRotated: false },
+  },
+  render: (args) => ({
+    components: { CpAncillaryItem },
+    setup() {
+      const quantity = ref(0)
+      return { args, quantity }
+    },
+    template: `
+      <div style="padding: 20px; min-width: 15rem;">
+        <CpAncillaryItem v-bind="args" v-model:quantity="quantity" />
+      </div>
+    `,
+  }),
+}
+
 /* -------------------------------------------------------------------------- */
 /* Gallery                                                                    */
 /* -------------------------------------------------------------------------- */