@citizenplane/pimp 18.23.0 → 18.23.1

package/package.json

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

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;
 

package/src/stories/CpStepper.stories.ts

@@ -37,6 +37,10 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 /**
+ * Three visual states coexist: steps before the active one render as
+ * completed (white pill, green check badge, dark label), the active one keeps
+ * its accent pill, and the following ones stay upcoming (bordered, grey).
+ *
  * Clicking an enabled step updates the active step locally, the way a
  * consumer would react to `select` by navigating.
  */
@@ -65,10 +69,55 @@ export const Default: Story = {
   }),
 }
 
+/**
+ * Three steps already behind the active one: each renders completed, with the
+ * check badge replacing its number. Completed steps stay clickable.
+ */
+export const Completed: Story = {
+  args: {
+    steps,
+    activeStepId: 'extras',
+    reachedStepIndex: 3,
+  },
+  render: (args) => ({
+    components: { CpStepper },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="width: 70rem;">
+        <CpStepper v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * The funnel's last step is active, so every preceding step is completed.
+ */
+export const LastStep: Story = {
+  args: {
+    steps,
+    activeStepId: 'confirmation',
+    reachedStepIndex: 4,
+  },
+  render: (args) => ({
+    components: { CpStepper },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="width: 70rem;">
+        <CpStepper v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
 /**
  * Below the container width threshold (60.5rem, matching online-checkin's
  * former `$breakpoint-large-tablet`), step titles collapse and only the
- * numbered pills remain.
+ * numbered pills remain, the completed ones showing their check badge.
  */
 export const Narrow: Story = {
   args: { ...Default.args },