feat(kstepper): component reskin [KHCP-9001]

docs/components/stepper.md

@@ -1,6 +1,6 @@
 # Stepper
 
-**KStepper** - An ordered Stepper component
+KStepper is an ordered step indicator.
 
 <KStepper :steps="defaultItems" />
 
@@ -14,145 +14,65 @@
 
 An array of step objects. Each step object should have a required `label` property, and an optional `state` property.
 
-<div>
-  <KStepper :steps="[
-      { label: 'Step  a long long long long time ago', state: 'completed' },
-      { label: 'in a galaxy far far away', state: 'completed' },
-      { label: 'Kongponents were battling in space and', state: 'pending' },
-      { label: 'fighting robots and space monsters with lots of explosions' }
-    ]"
-  />
-</div>
+`step` property takes one of the following values:
+<ul>
+  <li v-for="state in StepperStateArray" :key="`steps-state-${state}`">
+    <code>{{ state }}</code>
+  </li>
+</ul>
 
-```html
-<KStepper :steps="[
-    { label: 'Step  a long long long long time ago', state: 'completed' },
-    { label: 'in a galaxy far far away', state: 'completed' },
-    { label: 'Kongponents were battling in space and', state: 'pending' },
-    { label: 'fighting robots and space monsters with lots of explosions' }
-  ]"
+<KStepper :steps="stepTypes"
 />
-```
-
-#### Properties
-
-- `label` (required) - the text displayed beneath the step
-- `state` - the state of the step controls the icon, we support: `completed`, `pending`, and `error`. If a state property is not provided, it will show the default grey icon.
-
-#### States
 
-A step with a state of `completed` results in a filled-in divider.
-
-<div>
-  <KStepper :steps="[
-      { label: 'A completed step', state: 'completed' },
-      { label: 'End' }
-    ]"
-  />
-</div>
-
-```js
-[
-  { label: 'A completed step', state: 'completed' },
-  { label: 'End' }
-]
-```
-
-`active`, `pending`, and `error` states will bold the label, because these 3 states indicate the "current" step. `completed` indicates past steps, while `default` indicates future steps.
-
-<div>
-  <KStepper :steps="[
-      { label: 'An active step', state: 'active' },
-      { label: 'End' }
-    ]"
-  />
-</div>
-
-```js
-[
-  { label: 'An active step', state: 'active' },
-  { label: 'End' }
-]
-```
-
-<div>
-  <KStepper :steps="[
-      { label: 'A pending step', state: 'pending' },
-      { label: 'End' }
-    ]"
-  />
-</div>
-
-```js
-[
-  { label: 'A pending step', state: 'pending' },
-  { label: 'End' }
-]
-```
-
-<div>
-  <KStepper :steps="[
-      { label: 'An erroneous step', state: 'error' },
-      { label: 'End' }
-    ]"
-  />
-</div>
-
-```js
-[
-  { label: 'An erroneous step', state: 'error' },
-  { label: 'End' }
-]
-```
-
-The last step will never have a following divider.
-
-<div>
-  <KStepper :steps="[
-      { label: 'A default step' }
-    ]"
-  />
-</div>
-
-```js
-[{ label: 'A default step' }]
+```vue
+<template>
+  <KStepper :steps="steps" />
+</template>
+
+<script setup lang="ts">
+const steps = ref<StepItem[]>([
+  { label: 'Completed step', state: 'completed' },
+  { label: 'Active step', state: 'active' },
+  { label: 'Pending step', state: 'pending' },
+  { label: 'Erroneous step', state: 'error' },
+  { label: 'Default step' }
+])
+</script>
 ```
 
 ### maxLabelWidth
 
 The width of step labels (default is `170px`). We support numbers (will be converted to `px`), `auto`, and percentages (e.g. `25%`) for values.
 
-<KStepper :steps="longSteps" max-label-width="100" />
+<KStepper :steps="longSteps" max-label-width="120" />
 
 ```html
-<KStepper :steps="steps" max-label-width="100" />
+<KStepper max-label-width="120" :steps="steps" />
 ```
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  data () {
-    return {
-      defaultItems: [
-        { label: 'And a 1', state: 'completed' },
-        { label: 'And a 2', state: 'active' },
-        { label: 'And a 1 2 3 4' }
-      ],
-      stepTypes: [
-        { label: 'Completed step', state: 'completed' },
-        { label: 'Active step', state: 'active' },
-        { label: 'Pending step', state: 'pending' },
-        { label: 'Erroneous step', state: 'error' },
-        { label: 'Default step' }
-      ],
-      longSteps: [
-        { label: 'Step  a long long long long time ago', state: 'completed' },
-        { label: 'in a galaxy far far away', state: 'completed' },
-        { label: 'Kongponents were battling in space and', state: 'pending' },
-        { label: 'fighting robots and space monsters with lots of explosions' }
-      ]
-    }
-  }
-})
+<script setup lang="ts">
+import { ref } from 'vue'
+import { StepperStateArray } from '@/types'
+
+const defaultItems = ref<StepItem[]>([
+  { label: 'Personal Information', state: 'completed' },
+  { label: 'Billing Details', state: 'active' },
+  { label: 'Shipping Information' }
+])
+
+const stepTypes = ref<StepItem[]>([
+  { label: 'Completed step', state: 'completed' },
+  { label: 'Active step', state: 'active' },
+  { label: 'Pending step', state: 'pending' },
+  { label: 'Erroneous step', state: 'error' },
+  { label: 'Default step' }
+])
+
+const longSteps = ref<StepItem[]>([
+  { label: 'Step  a long long long long time ago', state: 'completed' },
+  { label: 'in a galaxy far far away', state: 'completed' },
+  { label: 'Kongponents were battling in space and', state: 'pending' },
+  { label: 'fighting robots and space monsters with lots of explosions' }
+])
 </script>
+

docs/guide/migrating-to-version-9.md

@@ -667,6 +667,11 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 ### KStepper
 
+#### Structure
+
+* `k-step-container` class has been replaced with `step-container`
+* `k-step` class has been replaced with `step`
+* `k-step-label` class has been replaced with `step-label`
 
 ### KTable
 

sandbox/index.ts

@@ -38,6 +38,7 @@ const sandboxAppLinks: SandboxNavigationItem[] = ([
   { name: 'KSelect', to: { name: 'select' } },
   { name: 'KSkeleton', to: { name: 'skeleton' } },
   { name: 'KSlideout', to: { name: 'slideout' } },
+  { name: 'KStepper', to: { name: 'stepper' } },
   { name: 'KTable', to: { name: 'table' } },
   { name: 'KTabs', to: { name: 'tabs' } },
   { name: 'KTextarea', to: { name: 'textarea' } },

sandbox/pages/SandboxStepper.vue

@@ -0,0 +1,50 @@
+<template>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KStepper"
+  >
+    <div class="kstepper-sandbox">
+      <SandboxSectionComponent>
+        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2760%3A12829&mode=dev&t=m6UqtRoz81rfy7Vk-1">
+          Figma
+        </KExternalLink>
+      </SandboxSectionComponent>
+
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="steps">
+        <KStepper :steps="steps" />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="maxLabelWidth">
+        <KStepper
+          max-label-width="150"
+          :steps="longLabelSteps"
+        />
+      </SandboxSectionComponent>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+import type { StepItem } from '@/types'
+
+const steps: StepItem[] = [
+  { label: 'Completed', state: 'completed' },
+  { label: 'Active', state: 'active' },
+  { label: 'Default', state: 'default' },
+  { label: 'Pending', state: 'pending' },
+  { label: 'Error', state: 'error' },
+]
+
+const longLabelSteps: StepItem[] = [
+  { label: 'Completed. Lorem ipsum dolor sit amet.', state: 'completed' },
+  { label: 'Active. Lorem ipsum dolor sit amet.', state: 'active' },
+  { label: 'Default. Lorem ipsum dolor sit amet.', state: 'default' },
+]
+</script>

sandbox/router/sandbox-routes.ts

@@ -146,6 +146,12 @@ const componentRoutes: RouteRecordRaw[] = [
     meta: { title: 'Slideout Sandbox' },
     component: () => import('../pages/SandboxSlideout.vue'),
   },
+  {
+    path: '/stepper',
+    name: 'stepper',
+    meta: { title: 'Stepper Sandbox' },
+    component: () => import('../pages/SandboxStepper.vue'),
+  },
   {
     path: '/table',
     name: 'table',

src/components/KMultiselect/KMultiselect.vue

@@ -84,7 +84,7 @@
             >
               <KBadge
                 v-for="item, idx in visibleSelectedItems"
-                :key="`${item.key ? item.key : idx}-badge-${key}`"
+                :key="`${multiselectId}-${item.key ? item.key : idx}-badge-${key}`"
                 :appearance="getBadgeAppearance(item)"
                 class="multiselect-selection-badge"
                 :icon-before="false"
@@ -98,7 +98,7 @@
                   #icon
                 >
                   <button
-                    aria-label="Dismiss"
+                    :aria-label="`Unselect ${item.label}`"
                     class="badge-dismiss-button"
                     data-testid="badge-dismiss-button"
                     type="button"
@@ -256,7 +256,7 @@
       >
         <KBadge
           v-for="item, idx in visibleSelectedItemsStaging"
-          :key="`${item.key ? item.key : idx}-badge`"
+          :key="`${multiselectId}-${item.key ? item.key : idx}-badge`"
           aria-hidden="true"
           class="multiselect-selection-badge"
           :icon-before="false"