feat(stepindicator): add component classes to step indicator

components/steps/w-step.vue

@@ -1,55 +1,78 @@
 <template>
- <div :class="{
- [c.step]: true,
- [c.stepVertical]: vertical,
- [c.stepVerticalLeft]: vertical && left,
- [c.stepVerticalRight]: vertical && !left,
- [c.stepHorizontal]: !vertical
- }">
- <div v-if="!vertical" :class="{
- [c.stepLine]: true,
- [c.stepLineHorizontal]: !vertical,
- [c.stepLineHorizontalLeft]: true,
- [c.stepLineIncomplete]: !active && !complete,
- [c.stepLineComplete]: active || complete
- }" />
- <div :aria-current="active ? 'step' : undefined" :class="{
- [c.stepDot]: true,
- [c.stepDotVertical]: vertical,
- [c.stepDotVerticalLeft]: vertical && left,
- [c.stepDotVerticalRight]: vertical && !left,
- [c.stepDotHorizontal]: !vertical,
- [c.stepDotIncomplete]: !(active || complete),
- [c.stepDotActive]: active,
- [c.stepDotComplete]: complete
- }">
- <svg role="img" :aria-label="complete ? '✓' : '⍻'" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
- <path fill="currentColor" d="M13.007 4.447a.75.75 0 01.046 1.06l-5.5 6a.75.75 0 01-1.083.023l-3-3a.75.75 0 011.06-1.06l2.446 2.446 4.971-5.423a.75.75 0 011.06-.046z" />
+ <div
+ :class="{
+ [ccStep.step]: true,
+ [ccStep.stepVertical]: vertical,
+ [ccStep.stepVerticalLeft]: vertical && left,
+ [ccStep.stepVerticalRight]: vertical && !left,
+ [ccStep.stepHorizontal]: !vertical,
+ }"
+ >
+ <div
+ v-if="!vertical"
+ :class="{
+ [ccStep.stepLine]: true,
+ [ccStep.stepLineHorizontal]: !vertical,
+ [ccStep.stepLineHorizontalLeft]: true,
+ [ccStep.stepLineIncomplete]: !active && !complete,
+ [ccStep.stepLineComplete]: active || complete,
+ }"
+ />
+ <div
+ :aria-current="active ? 'step' : undefined"
+ :class="{
+ [ccStep.stepDot]: true,
+ [ccStep.stepDotVertical]: vertical,
+ [ccStep.stepDotVerticalLeft]: vertical && left,
+ [ccStep.stepDotVerticalRight]: vertical && !left,
+ [ccStep.stepDotHorizontal]: !vertical,
+ [ccStep.stepDotIncomplete]: !(active || complete),
+ [ccStep.stepDotActive]: active,
+ [ccStep.stepDotComplete]: complete,
+ }"
+ >
+ <svg
+ v-if="complete"
+ role="img"
+ :aria-label="'✓'"
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="16"
+ viewBox="0 0 16 16"
+ >
+ <path
+ fill="currentColor"
+ d="M13.007 4.447a.75.75 0 01.046 1.06l-5.5 6a.75.75 0 01-1.083.023l-3-3a.75.75 0 011.06-1.06l2.446 2.446 4.971-5.423a.75.75 0 011.06-.046z"
+ />
  </svg>
  </div>
- <div :class="{
- [c.stepLine]: true,
- [c.stepLineVertical]: vertical,
- [c.stepLineVerticalLeft]: vertical && left,
- [c.stepLineVerticalRight]: vertical && !left,
- [c.stepLineHorizontal]: !vertical,
- [c.stepLineHorizontalRight]: true,
- [c.stepLineIncomplete]: !complete,
- [c.stepLineComplete]: complete
- }" />
- <div :class="{
- [c.content]: true,
- [c.contentVertical]: vertical,
- [c.contentHorizontal]: !vertical
- }">
+ <div
+ :class="{
+ [ccStep.stepLine]: true,
+ [ccStep.stepLineVertical]: vertical,
+ [ccStep.stepLineVerticalLeft]: vertical && left,
+ [ccStep.stepLineVerticalRight]: vertical && !left,
+ [ccStep.stepLineHorizontal]: !vertical,
+ [ccStep.stepLineHorizontalRight]: true,
+ [ccStep.stepLineIncomplete]: !complete,
+ [ccStep.stepLineComplete]: complete,
+ }"
+ />
+ <div
+ :class="{
+ [ccStep.content]: true,
+ [ccStep.contentVertical]: vertical,
+ [ccStep.contentHorizontal]: !vertical,
+ }"
+ >
  <slot />
  </div>
  </div>
 </template>
 
 <script>
-import { inject } from 'vue'
-import { step as c } from '@fabric-ds/css/component-classes'
+import { inject } from 'vue';
+import { step as ccStep } from '@warp-ds/component-classes';
 
 export default {
  name: 'wStep',
@@ -60,7 +83,7 @@ export default {
  setup: () => ({
  vertical: inject('steps-vertical', true),
  left: inject('steps-left', true),
- c,
- })
-}
+ ccStep,
+ }),
+};
 </script>

package.json

@@ -48,7 +48,7 @@
  "@vue/compiler-sfc": "^3.2.37",
  "@vue/test-utils": "^2.0.2",
  "@warp-ds/core": "^1.0.0",
- "@warp-ds/component-classes": "^1.0.0-alpha.44",
+ "@warp-ds/component-classes": "^1.0.0-alpha.45",
  "@warp-ds/uno": "1.0.0-alpha.8",
  "cleave-lite": "^1.0.0",
  "cz-conventional-changelog": "^3.3.0",