From 97f3b4dddc417d11a829705777a46cdf03a03950 Mon Sep 17 00:00:00 2001
From: CarolineGard <caroline.gard@mpyadigital.com>
Date: Wed, 3 May 2023 10:16:01 +0200
Subject: [PATCH] fix(steps): update to computed classes

---
 components/steps/w-step.vue  | 141 ++++++++++++++++++-----------------
 components/steps/w-steps.vue |  40 +++++-----
 2 files changed, 96 insertions(+), 85 deletions(-)

diff --git a/components/steps/w-step.vue b/components/steps/w-step.vue
index dd6ac0cc..afedd80d 100644
--- a/components/steps/w-step.vue
+++ b/components/steps/w-step.vue
@@ -1,41 +1,79 @@
+<script setup>
+import { computed, inject } from 'vue';
+import { step as ccStep } from '@warp-ds/component-classes';
+
+const vertical = inject('steps-vertical', true);
+const left = inject('steps-left', true);
+
+const props = defineProps({
+  active: Boolean,
+  complete: Boolean,
+});
+
+const stepClasses = computed(() => [
+  ccStep.step,
+  {
+    [ccStep.stepVertical]: vertical.value,
+    [ccStep.stepVerticalLeft]: vertical.value && left.value,
+    [ccStep.stepVerticalRight]: vertical.value && !left.value,
+    [ccStep.stepHorizontal]: !vertical.value,
+  },
+]);
+
+const horizontalClasses = computed(() => [
+  ccStep.stepLine,
+  ccStep.stepLineHorizontalLeft,
+  {
+    [ccStep.stepLineHorizontal]: !vertical.value,
+    [ccStep.stepLineIncomplete]: !props.active && !props.complete,
+    [ccStep.stepLineComplete]: props.active || props.complete,
+  },
+]);
+
+const stepDotClasses = computed(() => [
+  ccStep.stepDot,
+  {
+    [ccStep.stepDotVertical]: vertical.value,
+    [ccStep.stepDotVerticalLeft]: vertical.value && left.value,
+    [ccStep.stepDotVerticalRight]: vertical.value && !left.value,
+    [ccStep.stepDotHorizontal]: !vertical.value,
+    [ccStep.stepDotIncomplete]: !(props.active || props.complete),
+    [ccStep.stepDotActive]: props.active,
+    [ccStep.stepDotComplete]: props.complete,
+  },
+]);
+
+const stepLineClasses = computed(() => [
+  ccStep.stepLine,
+  ccStep.stepLineHorizontalRight,
+  {
+    [ccStep.stepLineVertical]: vertical.value,
+    [ccStep.stepLineVerticalLeft]: vertical.value && left.value,
+    [ccStep.stepLineVerticalRight]: vertical.value && !left.value,
+    [ccStep.stepLineHorizontal]: !vertical.value,
+    [ccStep.stepLineIncomplete]: !props.complete,
+    [ccStep.stepLineComplete]: props.complete,
+  },
+]);
+
+const contentClasses = computed(() => [
+  ccStep.content,
+  {
+    [ccStep.contentVertical]: vertical.value,
+    [ccStep.contentHorizontal]: !vertical.value,
+  },
+]);
+</script>
+
 <template>
-  <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,
-      }"
-    >
+  <div :class="stepClasses">
+    <div v-if="!vertical" :class="horizontalClasses" />
+    <div :aria-current="active ? 'step' : undefined" :class="stepDotClasses">
       <svg
         v-if="complete"
         role="img"
         :aria-label="'✓'"
-        xmlns="http://www.w3.org/2000/svg"
+        xmlns="http:www.w3.org/2000/svg"
         width="16"
         height="16"
         viewBox="0 0 16 16"
@@ -46,44 +84,13 @@
         />
       </svg>
     </div>
-    <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,
-      }"
-    >
+    <div :class="stepLineClasses" />
+    <div :class="contentClasses">
       <slot />
     </div>
   </div>
 </template>
 
 <script>
-import { inject } from 'vue';
-import { step as ccStep } from '@warp-ds/component-classes';
-
-export default {
-  name: 'wStep',
-  props: {
-    active: Boolean,
-    complete: Boolean,
-  },
-  setup: () => ({
-    vertical: inject('steps-vertical', true),
-    left: inject('steps-left', true),
-    ccStep,
-  }),
-};
+export default { name: 'wStep' };
 </script>
diff --git a/components/steps/w-steps.vue b/components/steps/w-steps.vue
index 32758452..969b449e 100644
--- a/components/steps/w-steps.vue
+++ b/components/steps/w-steps.vue
@@ -1,25 +1,29 @@
+<script setup>
+import { ref, provide, watchEffect } from 'vue';
+
+const props = defineProps({
+  horizontal: Boolean,
+  right: Boolean,
+});
+
+const vertical = ref(!props.horizontal);
+const left = ref(!props.right);
+
+provide('steps-vertical', vertical);
+provide('steps-left', left);
+
+watchEffect(() => {
+  vertical.value = !props.horizontal;
+  left.value = !props.right;
+});
+</script>
+
 <template>
-  <div class="w-full" :class="{ 'flex': horizontal }">
+  <div class="w-full" :class="{ flex: horizontal }">
     <slot />
   </div>
 </template>
 
 <script>
-import { ref, provide, watchEffect } from 'vue'
-
-export default {
-  name: 'wSteps',
-  props: {
-    horizontal: Boolean,
-    right: Boolean
-  },
-  setup(props) {
-    const vertical = ref(!props.horizontal)
-    const left = ref(!props.right)
-    provide('steps-vertical', vertical)
-    provide('steps-left', left)
-    watchEffect(() => vertical.value = !props.horizontal)
-    watchEffect(() => left.value = !props.right)
-  }
-}
+export default { name: 'wSteps' };
 </script>