@citizenplane/pimp 18.19.4 → 18.19.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.19.4",
+  "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"
@@ -137,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
 }
@@ -198,6 +202,10 @@ const handleHeaderClick = () => {
     @container (width < 30rem) {
       justify-content: flex-start;
       padding: 0;
+
+      .cpAncillaryCategory--isOpen & {
+        display: none;
+      }
     }
   }
 

package/src/components/CpAncillaryItem.vue

@@ -216,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/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                                                                    */
 /* -------------------------------------------------------------------------- */