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

@@ -4,18 +4,75 @@ import { waitElement } from "m3-utils";
 export default class Header {
     constructor() {
         this.init();
+        this.criaBarraProgresso();
     }
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.monitoraBarraProgresso();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        this.barraProgresso = document.querySelector(".progress-bar");
-            //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
+        this.circulo1 = await waitElement(".progress-bar__circle1");
-            timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
+        this.circulo2 = await waitElement(".progress-bar__circle2");
-            interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
+        this.circulo3 = await waitElement(".progress-bar__circle3");
-        });
+    }
+
+    criaBarraProgresso() {
+        this.barraProgresso.innerHTML = `
+            <ul class="progress-bar__container">
+                <li class="progress-bar__container-items">
+                    <div class="progress-bar__wrapper">
+                        <div class="progress-bar__container-item">
+                            <p class="progress-bar__text">Meu Carrinho</p>
+                            <p class="progress-bar__circle1 active"></p>
+                            <p class="progress-bar__line1"></p>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+
+            <ul class="progress-bar__container">
+                <li class="progress-bar__container-items">
+                    <div class="progress-bar__wrapper">
+                        <div class="progress-bar__container-item">
+                            <p class="progress-bar__text">Dados Pessoais</p>
+                            <p class="progress-bar__circle2"></p>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+
+            <ul class="progress-bar__container">
+                <li class="progress-bar__container-items">
+                    <div class="progress-bar__wrapper">
+                        <div class="progress-bar__container-item">
+                            <p class="progress-bar__text">Pagamento</p>
+                            <p class="progress-bar__circle3"></p>
+                            <p class="progress-bar__line2"></p>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        `;
+    }
+
+    monitoraBarraProgresso() {
+        setInterval(() => {
+            if (window.location.hash == "#/cart") {
+                this.circulo1.classList.add("active");
+                this.circulo2.classList.remove("active");
+                this.circulo3.classList.remove("active");
+            } else if (window.location.hash != "#/cart" && window.location.hash != "#/payment") {
+                this.circulo1.classList.remove("active");
+                this.circulo2.classList.add("active");
+                this.circulo3.classList.remove("active");
+            } else if (window.location.hash == "#/payment") {
+                this.circulo1.classList.remove("active");
+                this.circulo2.classList.remove("active");
+                this.circulo3.classList.add("active");
+            }
+        }, 100);
     }
 }

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

@@ -1,8 +1,18 @@
 /* _header.scss */
 .headerCheckout {
+    width: 100%;
+    border-bottom: 1px solid $color-black2;
+
     .container {
         width: auto !important;
+        margin: 0;
+        padding: 24px 131px;
+
+        @include mq(xl, min) {
+            padding: 29px 256px;
         }
+    }
+
     &__wrapper {
         align-items: center;
         display: flex;
@@ -11,26 +21,127 @@
 
     &__logo {
         img {
-            height: 52px;
+            width: 155px;
-            width: auto;
+            height: 37px;
+
+            @include mq(xl, min) {
+                width: 382px;
+                height: 91px;
+            }
         }
     }
 
     &__safeBuy {
-        span {
-            align-items: center;
         display: flex;
+        align-items: center;
+
+        span {
+            font-weight: 400;
+            line-height: 16px;
             text-transform: uppercase;
             font-family: $font-family;
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
-            line-height: 14px;
+            color: $color-black1;
-            color: $color-gray;
+
+            @include mq(xl, min) {
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
 
-        i {
+        img {
+            width: 12px;
+            height: 14px;
             margin-right: 8px;
+
+            @include mq(xl, min) {
+                width: 29px;
+                height: 41px;
+            }
+        }
+    }
+
+    .progress-bar {
+        display: flex;
+        width: 439px;
+        height: 35px;
+        justify-content: space-between;
+
+        @include mq(xl, min) {
+            width: 1078px;
+            height: 67px;
+        }
+
+        &__container-items {
+            list-style: none;
+        }
+
+        &__container-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            position: relative;
+        }
+
+        &__circle1,
+        &__circle2,
+        &__circle3 {
+            height: 12px;
+            width: 12px;
+            border-radius: 50%;
+            border: 1px solid $color-black2;
+
+            @include mq(xl, min) {
+                height: 24px;
+                width: 24px;
+            }
+        }
+
+        &__line1,
+        &__line2 {
+            position: absolute;
+            background-color: $color-black2;
+            height: 1px;
+            bottom: 6px;
+
+            @include mq(xl, min) {
+                bottom: 12px;
+            }
+        }
+
+        &__line1 {
+            left: 59%;
+            width: 162px;
+
+            @include mq(xl, min) {
+                width: 437px;
+            }
+        }
+
+        &__line2 {
+            right: 60%;
+            width: 155px;
+
+            @include mq(xl, min) {
+                width: 420px;
+            }
+        }
+
+        .active {
+            background-color: $color-black2;
+        }
+
+        &__text {
+            font-family: $font-family-secundary;
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 14px;
+            color: $color-black2;
+
+            @include mq(xl, min) {
+                font-size: 24px;
+                line-height: 28px;
+            }
         }
     }
 }