@citizenplane/pimp 18.19.5 → 18.19.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.19.5",
+  "version": "18.19.6",
   "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" :class="cpAncillaryCategoryDynamicClass">
+  <div class="cpAncillaryCategory">
     <component
       :is="headerTag"
       v-bind="headerAttrs"
@@ -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,14 +135,8 @@ 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 cpAncillaryCategoryDynamicClass = computed(() => ({
-  'cpAncillaryCategory--isOpen': isActuallyExpandable.value && isOpen.value,
-}))
-
 const handleHeaderClick = () => {
   if (isActuallyExpandable.value) isOpen.value = !isOpen.value
 }
@@ -187,6 +183,7 @@ const handleHeaderClick = () => {
     @container (width < 30rem) {
       flex-direction: column;
       align-items: stretch;
+      gap: 0;
     }
   }
 
@@ -199,12 +196,16 @@ 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;
 
-      .cpAncillaryCategory--isOpen & {
-        display: none;
+      &:has(+ .cpAncillaryCategory__chevron) {
+        flex: none;
       }
     }
   }
@@ -217,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);
     }
   }
 
@@ -282,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 {