feat: criando o html em javascript para o header

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

@@ -8,14 +8,39 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.events();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        this.progressBar = 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
         });
+        this.document = $(document);
+    }
+    events() {
+        this.document.ready(() => {
+            this.createProgressBar();
+        });
+    }
+
+    createProgressBar() {
+        const progressBar = `
+        <div class="progress-bar__wrapper">
+                <span class="progress-bar__title">Meu Carrinho</span>
+                <span class="progress-bar__status cart"></span>
+            </div>
+            <div class="progress-bar__wrapper">
+                <span class="progress-bar__title">Dados Pessoais</span>
+                <span class="progress-bar__status profile"></span>
+            </div>
+            <div class="progress-bar__wrapper">
+                <span class="progress-bar__title">Pagamento</span>
+                <span class="progress-bar__status payment"></span>
+            </div>
+            `;
+        console.log(this.progressBar);
+        this.progressBar.innerHTML = progressBar;
     }
 }

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

@@ -34,3 +34,27 @@
         }
     }
 }
+
+.progress-bar {
+    display: flex;
+    &__title {
+        margin-bottom: 15px;
+    }
+    &__wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    &__status {
+        width: 24px;
+        height: 24px;
+        border: 1px solid #000000;
+        border-radius: 50%;
+
+        &.cart {
+            padding: 0;
+            margin: 0;
+        }
+    }
+}

checkout/src/template-checkout/checkout-header.html

@@ -6,13 +6,19 @@
         <div class="headerCheckout__wrapper">
             <div class="headerCheckout__logo">
                 <a href="/">
-                        <img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png"
+                        alt="M3 Academy"
+                    />
                 </a>
             </div>
-                <div id="progressBar" class="progress-bar">	Aqui entra a barra de progresso
+            
-                </div>
+            <div id="progressBar" class="progress-bar">Aqui entra a barra de progresso</div>
             <div class="headerCheckout__safeBuy">
-                      <img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
+                <img
+                    src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png"
+                    alt="Cadeado"
+                />
                 <span>Compra segura</span>
             </div>
         </div>

package.json

@@ -35,6 +35,7 @@
     "dependencies": {
         "@commitlint/cli": "^12.0.1",
         "@commitlint/config-conventional": "^12.0.1",
+        "cross-env": "^7.0.3",
         "slick-carousel": "^1.8.1"
     }
 }