fix(header): corrige alinhamento da progressBar e ajusta responsividade do header

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

@@ -8,33 +8,39 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        this.progressBarStructure();
+        await this.progressBarStructure();
         await this.progressBarMove();
     }
 
     async selectors() {
-        // this.header = await waitElement(".headerCheckout");
         this.progressBar = await waitElement("#progressBar");
     }
 
-    progressBarStructure() {
+    async progressBarStructure() {
         if (this.progressBar && window.innerWidth > 1024) {
             this.progressBar.innerHTML = `
                 <ul class="progress-bar__container">
-                    <li class="progress-bar__stage">
+                    <div class="progress-bar__stage-wrapper">
-                            <p class="progress-bar__stage--text">Meu carrinho</p>
+                        <li class="progress-bar__stage">
-                            <div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
+                                <p class="progress-bar__stage--text">Meu carrinho</p>
-                    </li>
+                                <div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
+                        </li>
+                    </div>
 
-                    <li class="progress-bar__stage">
+                    <div class="progress-bar__stage-wrapper">
-                            <p class="progress-bar__stage--text">Dados Pessoais</p>
+                        <li class="progress-bar__stage">
-                            <div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div>
+                                <p class="progress-bar__stage--text">Dados Pessoais</p>
-                    </li>
+                                <div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div>
+                        </li>
+                    </div>
+
+                    <div class="progress-bar__stage-wrapper">
+                        <li class="progress-bar__stage">
+                                <p class="progress-bar__stage--text">Pagamento</p>
+                                <div class="progress-bar__stage--circle" id="progress-bar__payment"></div>
+                        </li>
+                </div>
 
-                    <li class="progress-bar__stage">
-                            <p class="progress-bar__stage--text">Pagamento</p>
-                            <div class="progress-bar__stage--circle" id="progress-bar__payment"></div>
-                    </li>
                 </ul>
             `
         }
@@ -48,7 +54,7 @@ export default class Header {
 
         if (this.progressBar && window.innerWidth > 1024) {
 
-            const progressBarStages = document.querySelectorAll((".progress-bar__stage"));
+            const progressBarStages = document.querySelectorAll(".progress-bar__stage");
 
             progressBarStages.forEach((stage) => {
 

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

@@ -12,8 +12,7 @@ footer .footerCheckout__wrapper {
     width: 94.9734%;
     margin: auto auto 0 auto;
 }
-footer .footerCheckout__prateleira,
+footer .footerCheckout__prateleira {
-header {
     width: 79.53125%;
     margin: 0 auto;
 }

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

@@ -1,52 +1,136 @@
 /* _header.scss */
 .headerCheckout {
-    // position: relative;
     margin: 0;
-    padding: 30px 131px;
+    padding: 29px 131px;
     border-bottom: 1px solid $black-500;
 
+    @include mq(xl, min) {
+        padding: 29px 256px;
+    }
+
+    @include mq(lg, max) {
+        padding: 16px 16px;
+    }
+
     .container {
         width: auto !important;
     }
 
     &__wrapper {
+        width: 100%;
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: 1fr 43.22% 1fr;
-        // display: flex;
-        // justify-content: space-between;
         align-items: center;
+        justify-content: center;
+
+        @include mq(xl, min) {
+            grid-template-columns: 1fr 54.22% 1fr;
+        }
+
+        @include mq(lg, max) {
+            display: flex;
+            justify-content: space-between;
+        }
     }
 
     &__logo {
         img {
             height: 37.14px;
-            width: auto;
+            width: 155.58px;
+
+            @include mq(xl, min) {
+                height: 91.2px;
+                width: 382.07px;
+            }
+
+            @include mq(lg, max) {
+                height: 33px;
+            }
+
+            @include mq(xs, max) {
+                width: 114px;
+                height: auto;
+            }
         }
     }
 
     .progress-bar {
-        // position: absolute;
-        // top: 50%;
-        // left: 50%;
-        // transform: translate(-50%, -50%);
-        width: 440px;
 
         &__container {
-            // position:relative;
-
             margin: 0;
             width: 100%;
             display: grid;
             grid-template-columns: repeat(3, 1fr);
-            // display: flex;
-            // align-items: center;
-            // justify-content: space-between;
             list-style: none;
         }
 
-        &__stage {
+        &__stage-wrapper {
             position: relative;
             display: flex;
+
+            &::before,
+            &::after {
+                content: "";
+                position: absolute;
+                bottom: 6.5px;
+                height: 1px;
+                background: $black-500;
+
+                @include mq(xl, min) {
+                    bottom: 12.5px;
+                }
+            }
+
+            &:nth-child(1) {
+                justify-content: flex-start;
+
+                &::after{
+                    width: calc(100% - 45.23px);//68.81%;
+                    right: 0;
+
+                    @include mq(xl, min) {
+                        width: calc(100% - 89.965px);//77.63%;
+                    }
+                }
+            };
+
+            &:nth-child(2) {
+                justify-content: center;
+
+                &::before,
+                &::after {
+                    width: calc(50% - 7px);
+
+                    @include mq(xl, min) {
+                        width: calc(50% - 13px);
+                    }
+                }
+
+                &::before {
+                    left: 0;
+                }
+
+                &::after{
+                    right: 0;
+                }
+            };
+
+            &:nth-child(3) {
+                justify-content: flex-end;
+
+                &::before{
+                    width: calc(100% - 38.315px);//73.54%;
+                    left: 0;
+
+                    @include mq(xl, min) {
+                        width: calc(100% - 76.125px); //81.05%;
+                    }
+                }
+            };
+        };
+
+        &__stage {
+            display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
@@ -58,6 +142,12 @@
                 font-family: $font-family-secundary;
                 font-size: 12px;
                 color: $black-500;
+
+                @include mq(xl, min) {
+                    margin-bottom: 15px;
+                    line-height: 28px;
+                    font-size: 24px;
+                }
             }
 
             &--circle {
@@ -69,29 +159,11 @@
                 &.active {
                     background: $black-500;
                 }
-            }
 
-            &::before,
+                @include mq(xl, min) {
-            &::after {
+                    width: 24px;
-                content: '';
+                    height: 24px;
-                position: absolute;
+                }
-                bottom: 6.5px;
-                width: calc(50% - 7px);
-                height: 1px;
-                background: $black-500;
-            }
-
-            &::before {
-                left: 0;
-            }
-
-            &::after{
-                left: calc(50% + 7px);
-            }
-
-            &:first-child::before,
-            &:last-child::after {
-                display: none;
             }
         }
     }
@@ -105,6 +177,15 @@
         img {
             width: 12px;
             height: 15px;
+
+            @include mq(xl, min) {
+                width: 29.47px;
+                height: 41.46px;
+            }
+
+            @include mq(lg, max) {
+                height: 13.33px;
+            }
         }
 
         span {
@@ -113,6 +194,11 @@
             font-size: 12px;
             text-transform: uppercase;
             color: $black-300;
+
+            @include mq(xl, min) {
+                line-height: 33px;
+                font-size: 24px;
+            }
         }
     }
 }

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

@@ -22,12 +22,12 @@ $color-green: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
+	xs: 375px,
 	cstm: 400,
 	sm: 576px,
 	md: 768px,
-	lg: 992px,
+	lg: 1025px,
-	xl: 1200px
+	xl: 2500px
 ) !default;
 
 $z-index: (

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

@@ -9,7 +9,33 @@
                         <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 id="progressBar" class="progress-bar">
+                    Aqui entra a barra de progresso
+
+                    <ul class="progress-bar__container">
+                        <div class="progress-bar__stage-wrapper">
+                            <li class="progress-bar__stage">
+                                    <p class="progress-bar__stage--text">Meu carrinho</p>
+                                    <div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
+                            </li>
+                        </div>
+                        
+                        <div class="progress-bar__stage-wrapper">
+                            <li class="progress-bar__stage">
+                                    <p class="progress-bar__stage--text">Dados Pessoais</p>
+                                    <div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div>
+                            </li>
+                        </div>
+
+                        <div class="progress-bar__stage-wrapper">
+                            <li class="progress-bar__stage">
+                                    <p class="progress-bar__stage--text">Pagamento</p>
+                                    <div class="progress-bar__stage--circle" id="progress-bar__payment"></div>
+                            </li>
+                       </div>
+
+                    </ul>
+
                 </div>
                 <div class="headerCheckout__safeBuy">
                       <img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>