@citizenplane/pimp 18.21.0 → 18.21.2

package/package.json

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

package/src/components/CpQuantityCounter.vue

@@ -80,6 +80,12 @@ const increment = () => {
     @include mx.square-sizing(28);
     @extend %u-focus-outline;
 
+    .cpIcon {
+      flex-shrink: 0;
+
+      @include mx.square-sizing(16);
+    }
+
     &:disabled {
       border-color: transparent;
       background: var(--cp-background-secondary);

package/src/components/CpStepperMobile.vue

@@ -5,9 +5,7 @@
     </button>
     <div class="cpStepperMobile__wrapper">
       <cp-heading class="cpStepperMobile__title" heading-level="h3" :size="600">
-        <transition mode="out-in" :name="titleTransitionName">
-          <span :key="activeStepLabel" class="cpStepperMobile__titleInner">{{ activeStepLabel }}</span>
-        </transition>
+        <cp-text-morph :text="activeStepLabel ?? ''" class="cpStepperMobile__titleInner" />
       </cp-heading>
       <div class="cpStepperMobile__steps">
         <div v-for="step in steps" :key="step.id" class="cpStepperMobile__step" :class="stepActiveClass(step)" />
@@ -17,12 +15,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed } from 'vue'
+
+import type { CpStepperStep } from '@/constants/CpStepperTypes'
 
 import CpHeading from '@/components/CpHeading.vue'
 import CpIcon from '@/components/CpIcon.vue'
-
-import { type CpStepperStep, CpStepperTransitionDirections } from '@/constants/CpStepperTypes'
+import CpTextMorph from '@/components/CpTextMorph.vue'
 
 interface Props {
   activeStepId?: string
@@ -40,24 +39,8 @@ const emit = defineEmits<{ previous: [] }>()
 const activeStep = computed(() => props.steps.find((step) => step.id === props.activeStepId))
 const activeStepLabel = computed(() => activeStep.value?.label)
 
-const titleTransitionDirection = ref<CpStepperTransitionDirections>(CpStepperTransitionDirections.FORWARD)
-const titleTransitionName = computed(() => `slide-${titleTransitionDirection.value}`)
-
 const stepActiveClass = (step: CpStepperStep) =>
   step.id === props.activeStepId ? 'cpStepperMobile__step--isActive' : ''
-
-watch(
-  () => props.activeStepId,
-  (newStepId, oldStepId) => {
-    if (!newStepId || !oldStepId) return
-
-    const newIndex = props.steps.findIndex((step) => step.id === newStepId)
-    const oldIndex = props.steps.findIndex((step) => step.id === oldStepId)
-
-    titleTransitionDirection.value =
-      newIndex > oldIndex ? CpStepperTransitionDirections.BACKWARD : CpStepperTransitionDirections.FORWARD
-  },
-)
 </script>
 
 <style lang="scss">
@@ -122,43 +105,4 @@ watch(
     }
   }
 }
-
-.slide-backward,
-.slide-forward {
-  &-enter-active,
-  &-leave-active {
-    transition:
-      transform 200ms ease,
-      opacity 200ms ease;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.slide-forward {
-  &-enter-from {
-    transform: translate3d(3vw, 0, 0);
-  }
-
-  &-leave-to {
-    transform: translate3d(-3vw, 0, 0);
-  }
-}
-
-.slide-backward {
-  &-enter-from {
-    transform: translate3d(-3vw, 0, 0);
-  }
-
-  &-leave-to {
-    transform: translate3d(3vw, 0, 0);
-  }
-}
 </style>

package/src/components/index.ts

@@ -222,7 +222,6 @@ export type {
 
 export { CpAncillaryCategoryTypes, isSwitchCategory } from '@/constants/CpAncillaryCategoryTypes'
 export { CpAncillaryItemTypes } from '@/constants/CpAncillaryItemTypes'
-export { CpStepperTransitionDirections } from '@/constants/CpStepperTypes'
 export {
   CpSeatMapTransitionDirections,
   DEFAULT_CP_SEAT_MAP_CONFIG,

package/src/constants/CpStepperTypes.ts

@@ -2,8 +2,3 @@ export interface CpStepperStep {
   id: string
   label: string
 }
-
-export enum CpStepperTransitionDirections {
-  BACKWARD = 'backward',
-  FORWARD = 'forward',
-}

package/src/stories/CpStepperMobile.stories.ts

@@ -53,8 +53,8 @@ export const Default: Story = {
 }
 
 /**
- * Previous/Next move the active step index so the title's
- * slide-forward / slide-backward transition plays in each direction.
+ * Previous/Next move the active step index so the title morphs
+ * from the previous step name to the new one.
  */
 export const Interactive: Story = {
   args: { ...Default.args },