From 2f5ba952f4d7a1d77661f83520a3d5dc92a58b10 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 11 Dec 2023 17:36:31 +0530
Subject: [PATCH] feat: add steps UI to modal

---
 .../auth/start/components/ModalLayout.vue     | 51 +++++++++++-----
 .../views/auth/start/components/ModalStep.vue | 58 +++++++++++++++++++
 2 files changed, 94 insertions(+), 15 deletions(-)
 create mode 100644 app/javascript/v3/views/auth/start/components/ModalStep.vue

diff --git a/app/javascript/v3/views/auth/start/components/ModalLayout.vue b/app/javascript/v3/views/auth/start/components/ModalLayout.vue
index bd2fd8cab..2a54336a2 100644
--- a/app/javascript/v3/views/auth/start/components/ModalLayout.vue
+++ b/app/javascript/v3/views/auth/start/components/ModalLayout.vue
@@ -1,29 +1,50 @@
 <template>
   <section
-    class="min-h-screen px-8 py-24 dark:text-white bg-woot-25 dark:bg-slate-900"
+    class="min-h-screen px-8 py-20 dark:text-white bg-woot-25 dark:bg-slate-900"
   >
-    <div
-      class="max-w-lg rounded-md dark:shadow-[#000] p-9 mx-auto border shadow border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900"
-    >
-      <h2 class="text-lg font-bold tracking-tight">
-        <slot name="title">
-          {{ title }}
+    <div class="relative max-w-lg mx-auto">
+      <div
+        id="steps"
+        class="rounded-md w-48 -left-52 dark:shadow-[#000] p-1 border shadow-sm border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 absolute grid gap-1"
+      >
+        <h6
+          class="px-2 pt-1 font-bold tracking-widest uppercase text-xxs text-slate-500"
+        >
+          Get Started
+        </h6>
+        <modal-step is-active title="Setup Profile" :step-number="1" />
+        <modal-step title="Setup Company" :step-number="2" />
+        <modal-step title="Invite your team" :step-number="3" />
+      </div>
+      <div
+        id="modal-body"
+        class="dark:shadow-[#000] rounded-md mx-auto p-9 border shadow border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900"
+      >
+        <h2 class="text-lg font-bold tracking-tight">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </h2>
+        <slot name="body">
+          <p class="mt-2 text-sm dark:text-slate-200">
+            {{ body }}
+          </p>
         </slot>
-      </h2>
-      <slot name="body">
-        <p class="mt-2 text-sm dark:text-slate-200">
-          {{ body }}
-        </p>
-      </slot>
-      <div class="mt-8">
-        <slot />
+        <div class="mt-8">
+          <slot />
+        </div>
       </div>
     </div>
   </section>
 </template>
 
 <script>
+import ModalStep from './ModalStep.vue';
+
 export default {
+  components: {
+    ModalStep,
+  },
   props: {
     title: {
       type: String,
diff --git a/app/javascript/v3/views/auth/start/components/ModalStep.vue b/app/javascript/v3/views/auth/start/components/ModalStep.vue
new file mode 100644
index 000000000..82f43f1d2
--- /dev/null
+++ b/app/javascript/v3/views/auth/start/components/ModalStep.vue
@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="flex items-center gap-2 p-2 text-sm"
+    :class="{
+      'text-slate-100 bg-slate-800 rounded': isActive,
+      'opacity-50': !isActive && !isComplete,
+    }"
+  >
+    <div
+      class="grid w-4 h-4 font-bold rounded-full text-xxs place-content-center"
+      :class="{
+        'bg-slate-600': !isComplete,
+        'bg-green-500': isComplete,
+      }"
+    >
+      <fluent-icon
+        v-if="isComplete"
+        size="13"
+        class="text-white"
+        icon="checkmark"
+      />
+      <template v-else>
+        {{ stepNumber }}
+      </template>
+    </div>
+    <span
+      :class="{
+        'line-through': isComplete,
+      }"
+    >
+      {{ title }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ModalStep',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    stepNumber: {
+      type: Number,
+      required: true,
+    },
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+    isComplete: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>