feat: updating progress indicator

bcgov · Sep 1, 2023 · 8a0d271 · 8a0d271
1 parent 02aa296
commit 8a0d271
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 33 deletions.
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -29,6 +29,8 @@
   --light-theme-tag-blue-background: #c2e0ff;
   --light-theme-tag-blue-text:#00478f;
   --light-theme-focus: #0073e6;
+  --light-theme-miscellaneous-interactive:#0073E6;
+
   //Primary button
   --cds-interactive-01: #0073E6;
   --cds-active-primary: #0073E6;
@@ -68,6 +70,18 @@ cds-button span {
   --cds-support-info-inverse: var(--light-theme-notifications-support-info-border);
   --cds-text-inverse: var(--light-theme-text-text-primary);
 }
+.step-active {
+  --cds-border-subtle: var(--light-theme-miscellaneous-interactive);
+}
+.cds--progress-label {
+  overflow: visible !important;
+
+}
+.cds--progress-label:hover {
+  box-shadow: none !important;
+  text-decoration: underline;
+  text-underline-offset: 0.325rem;
+}
 
 * {
   font-family: "BCSans", "Noto Sans", Verdana, Arial, sans-serif;
@@ -92,8 +106,9 @@ hr {
   display: block;
   border: 0;
   border-top: 1px solid var(--border-subtle-02,#dfdfe1);
-  margin: 1em 0;
   padding: 0;
+  align-self: stretch;
+  width: 100%;
 }
 
 .bulleted-list {
@@ -381,12 +396,6 @@ hr {
   letter-spacing: 0.01rem;
 }
 
-.divider {
-  align-self: stretch;
-  width: 100%;
-  background: var(--light-theme-border-border-subtle-02, #dfdfe1);
-}
-
 .content {
   flex-grow: 1;
   align-self: stretch;
@@ -399,6 +408,8 @@ hr {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
+  --cds-icon-primary: var(--light-theme-miscellaneous-interactive);
+  //--cds-border-subtle: var(--light-theme-miscellaneous-interactive); aplica em todos
 }
 .form-header-stretched {
   align-self: stretch;
@@ -466,7 +477,7 @@ hr {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 2.5rem;
+  gap: 1.5rem;
 }
 
 .form-steps-section-01 {

diff --git a/frontend/src/pages/ApplyClientNumberPage.vue b/frontend/src/pages/ApplyClientNumberPage.vue
@@ -2,6 +2,7 @@
 import { reactive, watch, toRef, ref, getCurrentInstance, computed } from 'vue'
 // Carbon
 import '@carbon/web-components/es/components/button/index';
+import '@carbon/web-components/es/components/progress-indicator/index';
 // Composables
 import { useEventBus } from "@vueuse/core";
 import { useRouter } from "vue-router";
@@ -120,10 +121,7 @@ watch([error], () => {
   }
 });
 
-addValidation(
-  "location.contacts.*.locationNames.*.text",
-  isContainedIn(locations)
-);
+addValidation('location.contacts.*.locationNames.*.text', isContainedIn(locations))
 
 // Tab system
 const progressData = reactive([
@@ -205,10 +203,10 @@ const progressData = reactive([
 const currentTab = ref(0);
 
 const stateIcon = (index: number) => {
-  if (currentTab.value == index) return "current";
-  if (currentTab.value > index || progressData[index].valid) return "complete";
-  return "queued";
-};
+  if (currentTab.value == index) return 'current'
+  if (currentTab.value > index || progressData[index].valid) return 'complete'
+  return 'incomplete'
+}
 
 const checkStepValidity = (stepNumber: number): boolean => {
   progressData.forEach((step: any) => {
@@ -308,10 +306,17 @@ generalErrorBus.on((event: string) => (globalErrorMessage.value = event));
       <span class="heading-05" data-scroll="top">New client application</span>
       <p class="body-01">All fields are mandatory</p>
     </div>
-      <wizard-progress-indicator-component
-      :model-value="progressData"
-      @go-to="goToStep"
-    />
+    <cds-progress-indicator space-equally>
+        <cds-progress-step 
+          v-for="item in progressData"
+          :key="item.step"
+          :secondary-label="item.subtitle"
+          :state="item.step <= currentTab ? item.step < currentTab ? 'complete' : 'current' : 'incomplete'"
+          :class="item.step <= currentTab ? 'step-active' : 'step-inactive'"
+          >
+          <span class="cds--progress-label">{{ item.title }}</span>
+        </cds-progress-step>
+      </cds-progress-indicator>
   </div>
 
   <div class="form-steps">
@@ -442,7 +447,7 @@ generalErrorBus.on((event: string) => (globalErrorMessage.value = event));
         </cds-button>
 
         <cds-button
-          v-if="!isLast && !isFormValid && !endAndLogOut && !mailAndLogOut"
+          v-if="!isLast && !endAndLogOut && !mailAndLogOut"
           id="nextBtn"
           kind="primary"
           size="lg"
@@ -468,18 +473,6 @@ generalErrorBus.on((event: string) => (globalErrorMessage.value = event));
           <Check16 slot="icon" />
         </cds-button>
 
-        <cds-button
-          data-test="wizard-save-button"
-          kind="primary"
-          size="lg"
-          :disabled="isNextAvailable"
-          v-if="!isLast && isFormValid && !endAndLogOut && !mailAndLogOut"
-          @click.prevent="saveChange"
-        >
-          <span>Save</span>
-          <Save16 slot="icon" />
-        </cds-button>
-
         <cds-button
           data-test="wizard-logout-button"
           kind="primary"