feat(header): progrress bar adicionada

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

@@ -4,19 +4,42 @@ import { waitElement } from "m3-utils";
 export default class Header {
     constructor() {
         this.init();
+        console.log("header.js funcionando")
     }
 
     async init() {
         await this.selectors();
+        await this.event();
+        await this.progress();
         console.log(this.item);
-        console.log("estou funcionando")
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        this.item = await waitElement("#progressBar", {
             //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
             timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
             interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
         });
     }
+    async event(){
+
+    }
+    async progress(){
+        this.item.innerHTML =`
+            <div class="stepProgressBar">
+                <div class="step">
+                    <p class="step-text"> Meu Carrinho</p>
+                    <div class="step-bullet completed "></div>
+                </div>
+                <div class="step">
+                    <p class="step-text">Dados Pessoais</p>
+                    <div class="step-bullet"></div>
+                </div>
+                <div class="step">
+                    <p class="step-text">Pagamento</p>
+                    <div class="step-bullet"></div>
+                </div>
+            </div>
+        `
+    }
 }

checkout/src/arquivos/js/components/app.js

@@ -9,12 +9,23 @@ export default class Footer {
     async init() {
         await this.selectors();
         await this.event();
+        await this.TextBtn()();
     }
 
     async selectors() {
+        this.buttonText = await waitElement("#cart-choose-products", {
+            //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
+            timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
+            interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
+        });
 
     }
     async event() {
 
     }
+    async TextBtn(){
+        this.buttonText.innerHTML =`
+            CONTINUAR COMPRANDO
+        `
+    }
 }

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

@@ -1,6 +1,18 @@
+#cart-choose-products{
+    width: 326px;
+    height: 48px;
+    border-radius: 0 !important;
+    display: grid;
+    align-content: center;
+    padding: 0 0 0 0;
+}
 .empty-cart {
 	font-family: $font-family;
 	&-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
         color: $color-black;
 		text-align: center;
 

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

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
 /* _header.scss */
 .headerCheckout {
     // position: relative;
@@ -19,6 +20,60 @@
             margin: 16px 0 16px 0;
         }
         .progress-bar{
+            position: relative;
+            width:440px;
+            height: 35px;
+            .stepProgressBar{
+                position: absolute;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                align-content: center;
+                top: 0;
+                left: -25%;
+                &::after{
+                    content: "";
+                    position: absolute;
+                    right: 222px;
+                    bottom: 27px;
+                    width: 67%;
+                    border-bottom: 1px solid $color-black;
+                }
+                .step{
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    border: 0px;
+                    margin-right: 180px;
+                    &-text{
+                        width: 78px;
+                        height: 14px;
+                        font-family: 'Tenor Sans', sans-serif;
+                        font-weight: 400;
+                        font-size: 12px;
+                        line-height: 14px;
+                        margin-bottom: 10px;
+                        color: $color-black;
+                        white-space: nowrap;
+                    }
+                    &-bullet{
+                        height: 12px;
+                        width: 12px;
+                        border-radius: 50%;
+                        border: 1px solid ;
+                        background-color: white;
+                        position: relative;
+                        z-index: map-get($map:$z-index, $key: level1);
+                        display: inline-block;
+                        transition: background-color 500ms;
+                        line-height: 20px;
+                        &.completed {
+                            color: black;
+                            background-color: $color-black;
+                        }
+                    }
+                }
+            }
             @include mq(desc,max){
                 display: none;
             }