From bb3851a35ca9c6e0f745fdef03b661bf542c724b Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 5 Feb 2024 09:34:33 -0800
Subject: [PATCH] feat: Wizard step component to use with onboarding (#8854)

* feat: Wizard step component to use with onboarding

* Update app/javascript/v3/views/onboarding/OnboardingStep.vue

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

* Update app/javascript/v3/views/onboarding/OnboardingStep.vue

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

* Update app/javascript/v3/views/onboarding/OnboardingStep.vue

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

* Review fixes

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
---
 .../v3/views/onboarding/OnboardingStep.vue    | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 app/javascript/v3/views/onboarding/OnboardingStep.vue

diff --git a/app/javascript/v3/views/onboarding/OnboardingStep.vue b/app/javascript/v3/views/onboarding/OnboardingStep.vue
new file mode 100644
index 000000000..2ef6da67d
--- /dev/null
+++ b/app/javascript/v3/views/onboarding/OnboardingStep.vue
@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="flex items-center gap-2 p-2 text-lg font-bold mb-6 relative before:absolute before:h-10 before:w-[1px] before:bg-slate-200 before:-bottom-8 before:left-[24px] hide-before-of-last"
+    :class="{
+      'text-woot-500 ': isActive,
+      'text-slate-400': !isActive || isComplete,
+      'before:bg-woot-500': !isActive && isComplete,
+    }"
+  >
+    <div
+      class="grid w-8 h-8 border border-solid rounded-full place-content-center"
+      :class="{
+        'border-woot-500': !isActive || isComplete,
+        'border-slate-200 dark:border-slate-600': !isActive && !isComplete,
+        'text-woot-500': isComplete,
+      }"
+    >
+      <fluent-icon v-if="isComplete" size="20" icon="checkmark" />
+      <fluent-icon v-else size="20" :icon="icon" />
+    </div>
+    <span>
+      {{ title }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OnboardingStep',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+    isComplete: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+<style scoped>
+.hide-before-of-last:last-child::before {
+  display: none;
+}
+</style>