feat: adiciona barra de progresso

checkout/src/arquivos/js/components/Header.js

@@ -4,6 +4,8 @@ import { waitElement } from "m3-utils";
 export default class Header {
     constructor() {
         this.init();
+        this.progressBar();
+        this.progressUpdate();
     }
 
     async init() {
@@ -18,4 +20,57 @@ export default class Header {
             interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
         });
     }
+
+    progressBar() {
+
+        const progress = document.querySelector(".progress-bar");
+
+        progress.innerHTML = '';
+
+        let progressBarHtml = `
+        <div class="progress__container">
+        <div class="progress__wrapper">
+            <div class="progress" id="progress"></div>
+            <div class="progress__items"><span>Meu Carrinho</span><div class="progress__circle1"></div></div>
+            <div class="progress__items"><span>Dados Pessoais</span><div class="progress__circle2"></div></div>
+            <div class="progress__items"><span>Pagamento</span><div class="progress__circle3"></div></div>
+        </div>
+        </div>`;
+
+        $(".progress-bar").prepend(progressBarHtml);
+    }
+
+    progressUpdate() {
+        this.caseUpdate();
+
+        window.addEventListener("hashchange", () => {
+            this.caseUpdate();
+        });
+    }
+
+    caseUpdate() {
+        const myCart = document.querySelector(".progress__circle1");
+        const personalData = document.querySelector(".progress__circle2");
+        const payment = document.querySelector(".progress__circle3");
+
+        switch(location.hash) {
+            case "#/cart":
+                myCart.classList.add("active-bar");
+                personalData.classList.remove("active-bar");
+            break
+
+            case "#/email":
+            case "#/profile":
+            case "#/shipping":
+                personalData.classList.add("active-bar");
+                myCart.classList.remove("active-bar");
+                payment.classList.remove("active-bar");
+            break
+
+            case "#/payment":
+                payment.classList.add("active-bar");
+                myCart.classList.remove("active-bar");
+                personalData.classList.remove("active-bar");
+        };
+    }
 }

checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss

@@ -75,7 +75,7 @@
 
 		.emailInfo {
 			padding: 16px;
-			background-color: $color-white;
+			background-color: $color-white-500;
 			border: 1px solid $color-gray4;
 			border-radius: 0;
 
@@ -133,7 +133,7 @@
 					background-color: #303030;
 					border-radius: 8px;
 					border: none;
-					color: $color-white;
+					color: $color-white-500;
 					display: flex;
 					justify-content: center;
 					padding: 6px 5px 6px 8px;
@@ -217,7 +217,7 @@
 						border-radius: 0;
 
 						label {
-							background-color: $color-white;
+							background-color: $color-white-500;
 							box-shadow: none;
 							color: #303030;
 							padding: 8px 12px;

checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss

@@ -32,7 +32,7 @@
         font-family: $font-family;
         width: 100%;
         h2 {
-            background: $color-white;
+            background: $color-white-500;
             border: none;
             color: #303030;
             font-size: 14px;
@@ -70,7 +70,7 @@
 
         .summary-template-holder {
             border-top: none;
-            background: $color-white;
+            background: $color-white-500;
         }
 
         #go-to-cart-button a {
@@ -88,7 +88,7 @@
             background: $color-black-100;
             border: none;
             border-radius: 0;
-            color: $color-white;
+            color: $color-white-500;
             outline: none;
             transition: all 0.2s linear;
             &:hover {
@@ -102,7 +102,7 @@
     }
 
     .lookatme {
-        background-color: $color-white;
+        background-color: $color-white-500;
     }
 
     .cart-items {
@@ -233,7 +233,7 @@
             }
 
             input {
-                background-color: $color-white;
+                background-color: $color-white-500;
                 border: 1px solid $color-gray3;
                 border-radius: 0;
                 border-width: 0 1px;
@@ -326,7 +326,7 @@
 
         .item-unavailable-message {
             background-color: #d8c8ac;
-            color: $color-white;
+            color: $color-white-500;
 
             .icon-warning-sign {
                 color: #bb4f4f;
@@ -408,7 +408,7 @@
                     background-color: $color-black-100;
                     border: none;
                     border-radius: 5px;
-                    color: $color-white;
+                    color: $color-white-500;
                     outline: none;
                     width: 100%;
 
@@ -432,7 +432,7 @@
                 margin: 0 0 34px;
 
                 &__wrapper {
-                    background-color: $color-white;
+                    background-color: $color-white-500;
                     border-radius: 100px;
                     width: 100%;
                     font-family: $font-family;
@@ -488,7 +488,7 @@
                         background-color: $color-black-100;
                         border: none;
                         border-radius: 5px;
-                        color: $color-white;
+                        color: $color-white-500;
                         font-size: 12px;
                         height: 36px;
                         letter-spacing: 1px;
@@ -676,7 +676,7 @@
                         background: $color-black-100;
                         border: none;
                         border-radius: 5px;
-                        color: $color-white;
+                        color: $color-white-500;
                         font-size: 12px;
                         height: 36px;
                         letter-spacing: 1px;
@@ -800,7 +800,7 @@
                     font-weight: 500;
                     font-size: 13px;
                     letter-spacing: 0.05em;
-                    color: $color-white;
+                    color: $color-white-500;
                     text-transform: uppercase;
                     vertical-align: middle;
                     line-height: 19px;

checkout/src/arquivos/sass/checkout/_checkout-vazio.scss

@@ -27,7 +27,7 @@
 			line-height: 16px;
 			text-align: center;
 			letter-spacing: 0.05em;
-			color: $color-white;
+			color: $color-white-500;
 			text-transform: uppercase;
 
 			&:hover {

checkout/src/arquivos/sass/partials/_header.scss

@@ -23,6 +23,75 @@
             @include mq(md, max) {
                 display: none;
             }
+
+            .active {
+                background-color: $color-black-500;
+            }
+
+            .progress__wrapper::before {
+                content: "";
+                background: $color-black-500;
+                position: absolute;
+                top: 31px;
+                left: 14px;
+                height: 1px;
+                width: 83%;
+                z-index: -1;
+                transform: translateY(-50%);
+            }
+
+            .progress__wrapper {
+                display: flex;
+                justify-content: space-between;
+                position: relative;
+                width: 439px;
+
+                .progress__items {
+                    position: relative;
+                }
+
+                span {
+                    display: block;
+                    margin-bottom: 9px;
+                    font-size: 12px;
+                    line-height: 14px;
+                    font-family: $font-family-secundary;
+                    transform: translateX(-40%);
+                }
+            }
+
+            .progress {
+                background: $color-black-500;
+                position: absolute;
+                top: 50%;
+                left: 0;
+                transform: translateY(-50%);
+                height: 4px;
+                width: 0%;
+                z-index: -1;
+                transition: 0.4s ease;
+            }
+
+            .progress__items {
+                position: relative;
+
+                .progress__circle1, .progress__circle2, .progress__circle3 {
+                    background: $color-white-500;
+                    color: $color-black-500;
+                    border-radius: 50%;
+                    height: 12px;
+                    width: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border: 1px solid $color-black-500;
+                    transition: .4s ease;
+                }
+
+                .active-bar {
+                    background: $color-black-500;
+                }
+            }
         }
     }
 

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -8,7 +8,7 @@ $font-family-secundary:"Tenor Sans", sans-serif;
 $color-black-100: #292929;
 $color-black-500: #000000;
 
-$color-white: #fff;
+$color-white-500: #fff;
 
 $color-gray: #6c6c6c;
 $color-gray2: #7d7d7d;