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

@@ -1,6 +1,70 @@
 // import waitForEl from "../helpers/waitForEl";
 import { waitElement } from "m3-utils";
 
+/**
+ * @param {Object} options
+ * @param {HTMLAllElement} target
+ * @return {Object}
+ */
+
+function OnProgress(target) {
+    if (!target) {
+        return;
+    }
+
+    const innerElement = () => {
+        target.innerHTML = `<ul class="progress-list">
+    <li class="progress-item progress-item--left">
+
+        <div class="progress-container">
+            <div class="progress-content">
+                <p>Meu Carrinho</p>
+                <span class="progress-bullet"></span>
+                <span class="progress-line"></span>
+            </div>
+        </div>
+    </li>
+    <li class="progress-item progress-item--center">
+        <div class="progress-container">
+            <div class="progress-content">
+                <p>Dados Pessoais</p>
+                <span class="progress-bullet"></span>
+                <span class="progress-line"></span>
+            </div>
+        </div>
+    </li>
+    <li class="progress-item progress-item--right">
+        <div class="progress-container">
+            <div class="progress-content">
+                <p>Pagamento</p>
+                <span class="progress-bullet"></span>
+                <span class="progress-line"></span>
+            </div>
+        </div>
+    </li>
+</ul>`;
+    };
+
+    const verifyCurrentRoute = () => {
+        console.log(options);
+    };
+
+    const init = () => {
+        innerElement();
+        verifyCurrentRoute(options);
+    };
+
+    const remove = () => {
+        target.innerHTML = "";
+    };
+
+    return {
+        ref: target,
+        init,
+        remove,
+    };
+}
+
 export default class Header {
     constructor() {
         this.init();
@@ -8,14 +72,19 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.innerToProgressBar();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
-            //#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.progressBar = await waitElement("#progressBar", {
+            timeout: 5000,
+            interval: 1000,
         });
     }
+
+    innerToProgressBar() {
+        let progress = OnProgress(this.progressBar);
+
+        progress.init();
+    }
 }

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

@@ -108,3 +108,85 @@
         }
     }
 }
+
+.headerCheckout {
+    .progress-bar {
+        width: 439px;
+
+        .progress-list {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin: 0;
+        }
+
+        .progress-item {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            font-size: 12px;
+        }
+
+        .progress-content,
+        .progress-container {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        .progress-container {
+            position: relative;
+            justify-content: center;
+            width: 100%;
+        }
+
+        .progress-item {
+            &--left,
+            &--right {
+                width: 39.9183%;
+
+                .progress-line {
+                    position: absolute;
+                    bottom: 6px;
+                    width: 100%;
+                    height: 1px;
+                    border-bottom: 1px solid #000;
+                }
+            }
+
+            &--left {
+                .progress-container {
+                    align-items: flex-start;
+                }
+
+                .progress-line {
+                    left: 75%;
+                    transform: translateX(-50%);
+                }
+            }
+
+            &--right {
+                .progress-container {
+                    align-items: flex-end;
+                }
+
+                .progress-line {
+                    left: 29%;
+                    transform: translateX(-50%);
+                }
+            }
+        }
+
+        .progress-bullet {
+            width: 12px;
+            height: 12px;
+            background-color: $clr-common-white;
+            position: relative;
+            border: 1px solid $clr-common-black;
+            z-index: 10;
+            border-radius: 100%;
+        }
+    }
+}