@citizenplane/pimp 18.23.0 → 18.23.2

package/package.json

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

package/src/components/CpAncillaryItem.vue

@@ -3,16 +3,31 @@
     <div class="cpAncillaryItem__wrap">
       <div class="cpAncillaryItem__visual">
         <img v-if="ancillaryImage" alt="" class="cpAncillaryItem__image" :src="ancillaryImage" />
-        <cp-icon v-else class="cpAncillaryItem__fallbackIcon" size="40" type="shopping-bag" />
+        <cp-icon v-else class="cpAncillaryItem__fallbackIcon" :size="fallbackIconSize" type="shopping-bag" />
       </div>
       <div class="cpAncillaryItem__content">
         <div class="cpAncillaryItem__name">
-          <p class="cpAncillaryItem__title">{{ title }}</p>
+          <div class="cpAncillaryItem__heading">
+            <p class="cpAncillaryItem__title">{{ title }}</p>
+            <p v-if="hasInlinePrice" class="cpAncillaryItem__bullet">•</p>
+            <p v-if="hasInlinePrice" class="cpAncillaryItem__inlinePrice">{{ formattedPrice }}</p>
+          </div>
           <p class="cpAncillaryItem__description">{{ description }}</p>
           <p v-if="subtitle" class="cpAncillaryItem__subtitle">{{ subtitle }}</p>
         </div>
         <div class="cpAncillaryItem__quantity">
+          <cp-button
+            v-if="isAddButtonVisible"
+            appearance="secondary"
+            class="cpAncillaryItem__addButton"
+            color="accent"
+            size="sm"
+            @click="selectFirstQuantity"
+          >
+            {{ addLabel }}
+          </cp-button>
           <cp-quantity-counter
+            v-else
             v-model="quantity"
             class="cpAncillaryItem__counter"
             :decrease-label="decreaseLabel"
@@ -20,9 +35,9 @@
             :increase-label="increaseLabel"
             :max="maxQuantity"
           />
-          <span v-if="hasMaxQuantity" class="cpAncillaryItem__maxQuantity">{{ maxQuantityLabel }}</span>
+          <span v-if="hasMaxQuantityCaption" class="cpAncillaryItem__maxQuantity">{{ maxQuantityLabel }}</span>
         </div>
-        <p v-if="formattedPrice" class="cpAncillaryItem__price">{{ formattedPrice }}</p>
+        <p v-if="hasStackedPrice" class="cpAncillaryItem__price">{{ formattedPrice }}</p>
       </div>
     </div>
   </div>
@@ -31,6 +46,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import CpButton from '@/components/CpButton.vue'
 import CpIcon from '@/components/CpIcon.vue'
 import CpQuantityCounter from '@/components/CpQuantityCounter.vue'
 
@@ -62,9 +78,11 @@ import StandardMealImage from '@/assets/images/ancillaries/standard-meal.png'
 import { CpAncillaryItemTypes } from '@/constants/CpAncillaryItemTypes'
 
 interface Props {
+  addLabel?: string
   currency?: string
   description: string
   disableAnimation?: boolean
+  layout?: 'card' | 'list'
   locale?: string
   maxQuantity?: number | null
   maxQuantityLabel?: string
@@ -76,6 +94,8 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  addLabel: 'Add',
+  layout: 'card',
   locale: () => (typeof navigator === 'undefined' ? 'en' : navigator.language),
   maxQuantity: null,
   vertical: false,
@@ -116,16 +136,40 @@ const ancillaryImages: Partial<Record<CpAncillaryItemTypes, string>> = {
 
 const ancillaryImage = computed(() => ancillaryImages[props.type] ?? null)
 
+const isListLayout = computed(() => props.layout === 'list')
+
+const fallbackIconSize = computed(() => {
+  if (isListLayout.value) return '28'
+  return '40'
+})
+
 const hasMaxQuantity = computed(() => props.maxQuantity !== null)
 
+const hasMaxQuantityCaption = computed(() => hasMaxQuantity.value && !isListLayout.value)
+
+const isAddButtonVisible = computed(() => quantity.value < 1)
+
+const selectFirstQuantity = (): void => {
+  quantity.value = 1
+}
+
 const formattedPrice = computed(() => {
   if (props.price === undefined || !props.currency) return null
   return new Intl.NumberFormat(props.locale, { style: 'currency', currency: props.currency }).format(props.price / 100)
 })
 
+const hasPrice = computed(() => formattedPrice.value !== null)
+
+const hasInlinePrice = computed(() => hasPrice.value && isListLayout.value)
+
+const hasStackedPrice = computed(() => hasPrice.value && !isListLayout.value)
+
+const isVerticalCard = computed(() => props.vertical && !isListLayout.value)
+
 const isSelected = computed(() => quantity.value > 0)
 const cpAncillaryItemDynamicClass = computed(() => ({
-  'cpAncillaryItem--isVertical': props.vertical,
+  'cpAncillaryItem--isList': isListLayout.value,
+  'cpAncillaryItem--isVertical': isVerticalCard.value,
   'cpAncillaryItem--isSelected': isSelected.value,
 }))
 </script>
@@ -256,7 +300,7 @@ const cpAncillaryItemDynamicClass = computed(() => ({
     }
   }
 
-  &--isSelected {
+  &--isSelected:not(#{&}--isList) {
     border-color: var(--cp-border-accent-solid);
     outline: fn.px-to-rem(1) solid var(--cp-border-accent-solid);
     outline-offset: fn.px-to-rem(-2);
@@ -270,8 +314,122 @@ const cpAncillaryItemDynamicClass = computed(() => ({
     }
   }
 
+  &--isList {
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: none;
+    container-type: inline-size;
+
+    .cpAncillaryItem__wrap {
+      align-items: center;
+      padding: var(--cp-spacing-lg) 0;
+      border-radius: 0;
+      border-bottom: fn.px-to-rem(1) solid var(--cp-border-soft);
+    }
+
+    .cpAncillaryItem__visual {
+      width: fn.px-to-rem(44);
+      height: fn.px-to-rem(44);
+      border-radius: 0;
+      background: none;
+    }
+
+    .cpAncillaryItem__image {
+      width: fn.px-to-rem(28);
+      height: fn.px-to-rem(28);
+    }
+
+    .cpAncillaryItem__content {
+      flex-direction: row;
+      align-items: center;
+      padding: 0;
+    }
+
+    .cpAncillaryItem__name {
+      flex: auto;
+    }
+
+    .cpAncillaryItem__heading {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .cpAncillaryItem__title {
+      font-weight: 500;
+    }
+
+    .cpAncillaryItem__bullet,
+    .cpAncillaryItem__inlinePrice {
+      color: var(--cp-text-secondary);
+      font-size: var(--cp-text-size-md);
+      font-weight: 500;
+      line-height: var(--cp-text-md-line-height);
+    }
+
+    .cpAncillaryItem__bullet {
+      display: none;
+    }
+
+    .cpAncillaryItem__quantity {
+      flex: none;
+    }
+
+    &:last-child .cpAncillaryItem__wrap {
+      border-bottom: none;
+    }
+
+    @include mx.media-query-min(48rem) {
+      .cpAncillaryItem__heading {
+        flex-direction: row;
+        gap: var(--cp-spacing-sm);
+      }
+
+      .cpAncillaryItem__bullet {
+        display: block;
+      }
+    }
+
+    @container (width < 22rem) {
+      .cpAncillaryItem__wrap {
+        gap: var(--cp-spacing-sm);
+      }
+
+      .cpAncillaryItem__visual {
+        width: fn.px-to-rem(40);
+        height: fn.px-to-rem(40);
+      }
+
+      .cpAncillaryItem__image {
+        width: fn.px-to-rem(24);
+        height: fn.px-to-rem(24);
+      }
+
+      .cpAncillaryItem__content {
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--cp-spacing-md);
+      }
+
+      .cpAncillaryItem__heading {
+        flex-direction: column;
+        gap: 0;
+      }
+
+      .cpAncillaryItem__bullet {
+        display: none;
+      }
+
+      .cpAncillaryItem__description,
+      .cpAncillaryItem__subtitle {
+        font-size: var(--cp-text-size-xs);
+        line-height: var(--cp-text-xs-line-height);
+      }
+    }
+  }
+
   @media (hover: hover) {
-    &:hover .cpAncillaryItem__image {
+    &:not(#{&}--isList):hover .cpAncillaryItem__image {
       transform: scale3d(1.1, 1.1, 1);
     }
   }

package/src/components/CpStepper.vue

@@ -1,24 +1,30 @@
 <template>
   <div class="cpStepper">
     <div class="cpStepper__wrapper">
-      <div v-for="(step, stepIndex) in steps" :key="step.id" class="cpStepper__stepWrapper">
+      <div v-for="stepItem in stepItems" :key="stepItem.id" class="cpStepper__stepWrapper">
         <button
+          :aria-label="stepItem.label"
           class="cpStepper__step"
-          :class="stepActiveClass(step)"
-          :disabled="isStepDisabled(stepIndex)"
+          :class="stepItem.className"
+          :disabled="stepItem.isDisabled"
           type="button"
-          @click="handleStepClick(step)"
+          @click="handleStepClick(stepItem.id)"
         >
-          <span class="cpStepper__stepNumber">{{ stepIndex + 1 }}</span>
-          <span class="cpStepper__stepTitle">{{ step.label }}</span>
+          <span class="cpStepper__stepNumber">
+            <cp-icon v-if="stepItem.isCompleted" size="12" type="check" />
+            <template v-else>{{ stepItem.number }}</template>
+          </span>
+          <span class="cpStepper__stepTitle">{{ stepItem.label }}</span>
         </button>
-        <cp-icon v-if="isNotLastStep(stepIndex)" class="cpStepper__chevron" size="16" type="chevron-right" />
+        <cp-icon v-if="stepItem.isNotLast" class="cpStepper__chevron" size="16" type="chevron-right" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { CpStepperStep } from '@/constants/CpStepperTypes'
 
 import CpIcon from '@/components/CpIcon.vue'
@@ -36,13 +42,32 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{ select: [id: string] }>()
 
-const isNotLastStep = (stepIndex: number) => stepIndex < props.steps.length - 1
+const activeStepIndex = computed(() => props.steps.findIndex((step) => step.id === props.activeStepId))
+
+const isStepCompleted = (stepIndex: number) => activeStepIndex.value > -1 && stepIndex < activeStepIndex.value
 
-const isStepDisabled = (stepIndex: number) => stepIndex > props.reachedStepIndex
+const stepClassName = (step: CpStepperStep, stepIndex: number) => {
+  return {
+    'cpStepper__step--isActive': step.id === props.activeStepId,
+    'cpStepper__step--isCompleted': isStepCompleted(stepIndex),
+  }
+}
 
-const stepActiveClass = (step: CpStepperStep) => (step.id === props.activeStepId ? 'cpStepper__step--isActive' : '')
+const stepItems = computed(() => {
+  return props.steps.map((step, stepIndex) => {
+    return {
+      className: stepClassName(step, stepIndex),
+      id: step.id,
+      isCompleted: isStepCompleted(stepIndex),
+      isDisabled: stepIndex > props.reachedStepIndex,
+      isNotLast: stepIndex < props.steps.length - 1,
+      label: step.label,
+      number: stepIndex + 1,
+    }
+  })
+})
 
-const handleStepClick = (step: CpStepperStep) => emit('select', step.id)
+const handleStepClick = (stepId: string) => emit('select', stepId)
 </script>
 
 <style lang="scss">
@@ -85,6 +110,12 @@ const handleStepClick = (step: CpStepperStep) => emit('select', step.id)
       color: var(--cp-text-accent-primary);
     }
 
+    &--isCompleted {
+      border-color: transparent;
+      background-color: var(--cp-background-primary);
+      color: var(--cp-text-primary);
+    }
+
     &:not(:disabled) {
       @extend %u-focus-outline;
 
@@ -115,6 +146,11 @@ const handleStepClick = (step: CpStepperStep) => emit('select', step.id)
     color: var(--cp-text-white);
   }
 
+  &__step--isCompleted &__stepNumber {
+    background-color: var(--cp-background-success-primary);
+    color: var(--cp-foreground-success-primary);
+  }
+
   &__stepTitle {
     @extend %u-text-ellipsis;