@citizenplane/pimp 18.19.0 → 18.19.2

package/package.json

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

package/src/components/CpAncillaryCategory.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="cpAncillaryCategory">
-    <div class="cpAncillaryCategory__header">
-      <button class="cpAncillaryCategory__lead" type="button" @click="handleToggle">
+    <component
+      :is="headerTag"
+      v-bind="headerAttrs"
+      class="cpAncillaryCategory__header"
+      @click="handleHeaderClick"
+    >
+      <div class="cpAncillaryCategory__lead">
         <div class="cpAncillaryCategory__visual">
           <img
             v-if="visual"
@@ -12,34 +17,32 @@
           />
           <cp-icon v-else class="cpAncillaryCategory__fallbackIcon" size="40" type="shopping-bag" />
         </div>
-        <div class="cpAncillaryCategory__texts">
-          <span :id="titleId" class="cpAncillaryCategory__title">{{ title }}</span>
-          <span class="cpAncillaryCategory__description">{{ description }}</span>
+        <div class="cpAncillaryCategory__content">
+          <div class="cpAncillaryCategory__texts">
+            <span :id="titleId" class="cpAncillaryCategory__title">{{ title }}</span>
+            <span class="cpAncillaryCategory__description">{{ description }}</span>
+          </div>
+          <div v-if="isSwitch" class="cpAncillaryCategory__trailing">
+            <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>
+            <cp-icon
+              class="cpAncillaryCategory__chevron"
+              :class="chevronDynamicClass"
+              size="24"
+              type="chevron-down"
+            />
+          </div>
         </div>
-      </button>
-      <div v-if="isSwitch" class="cpAncillaryCategory__trailing">
-        <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>
-        <button
-          :aria-controls="bodyId"
-          :aria-expanded="isOpen"
-          :aria-labelledby="titleId"
-          class="cpAncillaryCategory__toggle"
-          type="button"
-          @click="handleToggle"
-        >
-          <cp-icon class="cpAncillaryCategory__chevron" :class="chevronDynamicClass" size="24" type="chevron-down" />
-        </button>
-      </div>
-    </div>
+    </component>
     <cp-transition-expand v-if="isActuallyExpandable">
       <div v-if="isOpen">
         <div :id="bodyId" class="cpAncillaryCategory__body">
@@ -98,6 +101,12 @@ const toggleId = useId()
 const titleId = computed(() => `${toggleId}-title`)
 const bodyId = computed(() => `${toggleId}-body`)
 
+const headerTag = computed(() => (isActuallyExpandable.value ? 'button' : 'div'))
+
+const headerAttrs = computed(() =>
+  isActuallyExpandable.value ? { type: 'button', 'aria-expanded': isOpen.value, 'aria-controls': bodyId.value } : {},
+)
+
 const categoryVisuals: Partial<Record<CpAncillaryCategoryTypes, string>> = {
   [CpAncillaryCategoryTypes.BAGGAGES]: BaggagesVisual,
   [CpAncillaryCategoryTypes.CARBON_OFFSET]: CarbonOffsetVisual,
@@ -126,8 +135,8 @@ const fromPriceDynamicClass = computed(() => ({ 'cpAncillaryCategory__fromPrice-
 
 const chevronDynamicClass = computed(() => ({ 'cpAncillaryCategory__chevron--isRotated': isOpen.value }))
 
-const handleToggle = () => {
-  isOpen.value = !isOpen.value
+const handleHeaderClick = () => {
+  if (isActuallyExpandable.value) isOpen.value = !isOpen.value
 }
 </script>
 
@@ -141,15 +150,38 @@ const handleToggle = () => {
   border-radius: var(--cp-radius-xl);
   background: var(--cp-background-primary);
   box-shadow: var(--cp-shadows-xs);
+  container-type: inline-size;
   gap: var(--cp-spacing-sm);
 
   &__header {
+    @extend %u-focus-outline;
+
     display: flex;
     width: 100%;
-    align-items: center;
     padding: var(--cp-spacing-lg);
     border-radius: var(--cp-radius-lg);
+    text-align: left;
+  }
+
+  &__lead {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    align-items: center;
+    gap: var(--cp-spacing-xl);
+  }
+
+  &__content {
+    display: flex;
+    min-width: 0;
+    flex: auto;
+    align-items: center;
     gap: var(--cp-spacing-lg);
+
+    @container (width < 30rem) {
+      flex-direction: column;
+      align-items: stretch;
+    }
   }
 
   &__trailing {
@@ -160,6 +192,11 @@ const handleToggle = () => {
     padding: 0 var(--cp-spacing-xl);
     border-radius: var(--cp-radius-lg);
     gap: var(--cp-spacing-lg);
+
+    @container (width < 30rem) {
+      justify-content: flex-start;
+      padding: 0;
+    }
   }
 
   &__price {
@@ -177,7 +214,7 @@ const handleToggle = () => {
   &__fromPrice {
     display: flex;
     align-items: center;
-    gap: var(--cp-spacing-md);
+    gap: var(--cp-spacing-sm);
     opacity: 1;
     transform: translate3d(0, 0, 0);
     transition:
@@ -206,46 +243,6 @@ const handleToggle = () => {
     line-height: var(--cp-text-lg-line-height);
   }
 
-  &__toggle {
-    display: flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    padding: var(--cp-spacing-xs);
-    border: 0;
-    border-radius: 50%;
-    appearance: none;
-    background: transparent;
-    color: inherit;
-    cursor: pointer;
-    transition: background-color 200ms ease;
-
-    @media (hover: hover) {
-      &:hover {
-        background: var(--cp-background-secondary-hover);
-      }
-    }
-
-    &:focus-visible {
-      border-radius: 50%;
-      background: var(--cp-background-secondary-hover);
-
-      @extend %u-focus-outline;
-    }
-  }
-
-  &__lead {
-    @extend %u-focus-outline;
-
-    display: flex;
-    width: 100%;
-    min-width: 0;
-    flex: auto;
-    align-items: center;
-    gap: var(--cp-spacing-xl);
-    text-align: left;
-  }
-
   &__visual {
     display: flex;
     width: fn.px-to-rem(96);
@@ -273,6 +270,7 @@ const handleToggle = () => {
   &__texts {
     display: flex;
     min-width: 0;
+    flex: auto;
     flex-direction: column;
   }
 
@@ -297,6 +295,10 @@ const handleToggle = () => {
     &--isRotated {
       rotate: 180deg;
     }
+
+    @container (width < 30rem) {
+      display: none;
+    }
   }
 
   &__body {
@@ -305,7 +307,6 @@ const handleToggle = () => {
     padding: var(--cp-spacing-lg);
     border-radius: var(--cp-radius-lg);
     background: var(--cp-background-primary);
-    gap: var(--cp-spacing-lg);
   }
 }
 </style>

package/src/stories/CpAncillaryCategory.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 
 import CpAncillaryCategory from '@/components/CpAncillaryCategory.vue'
 import CpAncillaryItem from '@/components/CpAncillaryItem.vue'
@@ -14,17 +14,6 @@ const galleryRowStyle = 'display: flex; flex-direction: column; gap: 10px; width
 const meta = {
   title: 'Business/CpAncillaryCategory',
   component: CpAncillaryCategory,
-  decorators: [
-    (story) => ({
-      components: { story },
-      setup() {
-        onMounted(() => {
-          document.getElementById('storybook-root')?.style.setProperty('width', '100%')
-        })
-      },
-      template: '<story />',
-    }),
-  ],
   argTypes: {
     currency: {
       control: 'text',
@@ -232,6 +221,56 @@ export const Switch: Story = {
   }),
 }
 
+/**
+ * Same expandable and switch cards at a 358px container width: the
+ * container query on the root stacks the from-price under the texts
+ * instead of beside them.
+ */
+export const Mobile: Story = {
+  args: {
+    ...Default.args,
+  },
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpAncillaryCategory },
+    setup() {
+      const switchChecked = ref(false)
+      return { galleryListStyle, galleryRowStyle, docLabelStyle, switchChecked }
+    },
+    template: `
+      <div :style="galleryListStyle">
+        <div :style="galleryRowStyle">
+          <span :style="docLabelStyle">Expandable</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
+              is-default-closed
+              :from-price="5990"
+              currency="EUR"
+            />
+          </div>
+        </div>
+        <div :style="galleryRowStyle">
+          <span :style="docLabelStyle">Switch</span>
+          <div style="width: 358px;">
+            <CpAncillaryCategory
+              v-model:checked="switchChecked"
+              title="Carbon offset"
+              description="Compensate the CO2 emissions of your flight"
+              type="carbonOffset"
+              :from-price="490"
+              currency="EUR"
+            />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+}
+
 /* -------------------------------------------------------------------------- */
 /* Gallery                                                                    */
 /* -------------------------------------------------------------------------- */