@citizenplane/pimp 18.19.4 → 18.19.6

package/package.json

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

package/src/components/CpAncillaryCategory.vue

@@ -26,20 +26,22 @@
             <span v-if="hasFromPrice" class="cpAncillaryCategory__price">{{ formattedPrice }}</span>
             <cp-switch v-model="checked" color="accent" />
           </div>
-          <div v-else-if="isActuallyExpandable" class="cpAncillaryCategory__trailing">
-            <span v-if="hasFromPrice" class="cpAncillaryCategory__fromPriceClip">
-              <span :aria-hidden="isOpen" class="cpAncillaryCategory__fromPrice" :class="fromPriceDynamicClass">
-                <span class="cpAncillaryCategory__fromPriceLabel">{{ fromPriceLabel }}</span>
-                <span class="cpAncillaryCategory__fromPriceAmount">{{ formattedPrice }}</span>
-              </span>
-            </span>
+          <template v-else-if="isActuallyExpandable">
+            <div class="cpAncillaryCategory__trailing">
+              <cp-transition-expand>
+                <span v-if="!isOpen && hasFromPrice" class="cpAncillaryCategory__fromPrice">
+                  <span class="cpAncillaryCategory__fromPriceLabel">{{ fromPriceLabel }}</span>
+                  <span class="cpAncillaryCategory__fromPriceAmount">{{ formattedPrice }}</span>
+                </span>
+              </cp-transition-expand>
+            </div>
             <cp-icon
               class="cpAncillaryCategory__chevron"
               :class="chevronDynamicClass"
               size="24"
               type="chevron-down"
             />
-          </div>
+          </template>
         </div>
       </div>
     </component>
@@ -133,8 +135,6 @@ const formattedPrice = computed(() => {
 
 const hasFromPrice = computed(() => formattedPrice.value !== null)
 
-const fromPriceDynamicClass = computed(() => ({ 'cpAncillaryCategory__fromPrice--isHidden': isOpen.value }))
-
 const chevronDynamicClass = computed(() => ({ 'cpAncillaryCategory__chevron--isRotated': isOpen.value }))
 
 const handleHeaderClick = () => {
@@ -183,6 +183,7 @@ const handleHeaderClick = () => {
     @container (width < 30rem) {
       flex-direction: column;
       align-items: stretch;
+      gap: 0;
     }
   }
 
@@ -195,9 +196,17 @@ const handleHeaderClick = () => {
     border-radius: var(--cp-radius-lg);
     gap: var(--cp-spacing-lg);
 
+    &:has(+ .cpAncillaryCategory__chevron) {
+      flex: 0 0 fn.px-to-rem(180);
+    }
+
     @container (width < 30rem) {
       justify-content: flex-start;
       padding: 0;
+
+      &:has(+ .cpAncillaryCategory__chevron) {
+        flex: none;
+      }
     }
   }
 
@@ -209,24 +218,13 @@ const handleHeaderClick = () => {
     line-height: var(--cp-text-lg-line-height);
   }
 
-  &__fromPriceClip {
-    overflow: hidden;
-  }
-
   &__fromPrice {
     display: flex;
     align-items: center;
     gap: var(--cp-spacing-sm);
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-    transition:
-      opacity 200ms ease,
-      transform 200ms ease;
-
-    &--isHidden {
-      opacity: 0;
-      pointer-events: none;
-      transform: translate3d(0, 20px, 0);
+
+    @container (width < 30rem) {
+      margin-block-start: var(--cp-spacing-lg);
     }
   }
 
@@ -274,6 +272,11 @@ const handleHeaderClick = () => {
     min-width: 0;
     flex: auto;
     flex-direction: column;
+
+    .cpAncillaryCategory__content:has(.cpAncillaryCategory__chevron) & {
+      min-width: 0;
+      flex: 1 1 0;
+    }
   }
 
   &__title {

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                                                                    */
 /* -------------------------------------------------------------------------- */