From 7dd01fcb4f649b9e338315afb57cffd3ac473701 Mon Sep 17 00:00:00 2001
From: vitorsoaresdev <dev.vitors@gmail.com>
Date: Wed, 14 Dec 2022 09:38:59 -0300
Subject: [PATCH] feat: adiciona responsividade e funcionalidade na barra de
 progresso

---
 checkout/src/arquivos/js/components/Header.js |  19 +-
 .../src/arquivos/sass/partials/_header.scss   | 168 ++++++++++--------
 2 files changed, 103 insertions(+), 84 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 36de169..1d7f304 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -28,12 +28,12 @@ export default class Header {
         progress.innerHTML = '';
 
         let progressBarHtml = `
-        <div class="progress__container">
-        <div class="progress__wrapper">
-            <div class="progress" id="progress"></div>
-            <div class="progress__items"><span>Meu Carrinho</span><div class="progress__circle1"></div></div>
-            <div class="progress__items"><span>Dados Pessoais</span><div class="progress__circle2"></div></div>
-            <div class="progress__items"><span>Pagamento</span><div class="progress__circle3"></div></div>
+        <div class="progress-bar__container">
+        <div class="progress-bar__wrapper">
+            <div class="progress-bar__div" id="progress"></div>
+            <div class="progress-bar__items"><span>Meu Carrinho</span><div class="progress-bar__circle1"></div></div>
+            <div class="progress-bar__items"><span>Dados Pessoais</span><div class="progress-bar__circle2"></div></div>
+            <div class="progress-bar__items"><span>Pagamento</span><div class="progress-bar__circle3"></div></div>
         </div>
         </div>`;
 
@@ -49,14 +49,15 @@ export default class Header {
     }
 
     caseUpdate() {
-        const myCart = document.querySelector(".progress__circle1");
-        const personalData = document.querySelector(".progress__circle2");
-        const payment = document.querySelector(".progress__circle3");
+        const myCart = document.querySelector(".progress-bar__circle1");
+        const personalData = document.querySelector(".progress-bar__circle2");
+        const payment = document.querySelector(".progress-bar__circle3");
 
         switch(location.hash) {
             case "#/cart":
                 myCart.classList.add("active-bar");
                 personalData.classList.remove("active-bar");
+                payment.classList.remove("active-bar");
             break
 
             case "#/email":
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 4350a94..4014f97 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -9,6 +9,7 @@
             width: 100%;
         }
     }
+
     &__wrapper {
         align-items: center;
         display: flex;
@@ -18,84 +19,10 @@
         @include mq(md, max) {
             padding: 16px;
         }
-
-        .progress-bar {
-            @include mq(md, max) {
-                display: none;
-            }
-
-            .active {
-                background-color: $color-black-500;
-            }
-
-            .progress__wrapper::before {
-                content: "";
-                background: $color-black-500;
-                position: absolute;
-                top: 31px;
-                left: 14px;
-                height: 1px;
-                width: 83%;
-                z-index: -1;
-                transform: translateY(-50%);
-            }
-
-            .progress__wrapper {
-                display: flex;
-                justify-content: space-between;
-                position: relative;
-                width: 439px;
-
-                .progress__items {
-                    position: relative;
-                }
-
-                span {
-                    display: block;
-                    margin-bottom: 9px;
-                    font-size: 12px;
-                    line-height: 14px;
-                    font-family: $font-family-secundary;
-                    transform: translateX(-40%);
-                }
-            }
-
-            .progress {
-                background: $color-black-500;
-                position: absolute;
-                top: 50%;
-                left: 0;
-                transform: translateY(-50%);
-                height: 4px;
-                width: 0%;
-                z-index: -1;
-                transition: 0.4s ease;
-            }
-
-            .progress__items {
-                position: relative;
-
-                .progress__circle1, .progress__circle2, .progress__circle3 {
-                    background: $color-white-500;
-                    color: $color-black-500;
-                    border-radius: 50%;
-                    height: 12px;
-                    width: 12px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    border: 1px solid $color-black-500;
-                    transition: .4s ease;
-                }
-
-                .active-bar {
-                    background: $color-black-500;
-                }
-            }
-        }
     }
 
     &__logo {
+
         img {
             height: 37px;
             width: auto;
@@ -145,3 +72,94 @@
         }
     }
 }
+
+.progress-bar {
+    @include mq(md, max) {
+        display: none;
+    }
+
+    &__wrapper::before {
+        content: "";
+        background: $color-black-500;
+        position: absolute;
+        top: 31px;
+        left: 14px;
+        height: 1px;
+        width: 83%;
+        z-index: -1;
+        transform: translateY(-50%);
+
+        @include mq(xl, min) {
+            top: 55px;
+            width: 87%;
+        }
+    }
+
+    &__wrapper {
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+        width: 439px;
+
+        @include mq(xl, min) {
+            width: 1078px;
+        }
+
+        &__items {
+            position: relative;
+        }
+
+        span {
+            display: block;
+            margin-bottom: 9px;
+            font-size: 12px;
+            line-height: 14px;
+            font-family: $font-family-secundary;
+            transform: translateX(-40%);
+
+            @include mq(xl, min) {
+                font-size: 24px;
+                line-height: 28px;
+                margin-bottom: 13px;
+            }
+        }
+    }
+
+    &__div {
+        background: $color-black-500;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        height: 4px;
+        width: 0%;
+        z-index: -1;
+        transition: 0.4s ease;
+    }
+
+    &__items {
+        position: relative;
+
+        .progress-bar__circle1, .progress-bar__circle2, .progress-bar__circle3 {
+            background: $color-white-500;
+            color: $color-black-500;
+            border-radius: 50%;
+            height: 12px;
+            width: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid $color-black-500;
+            transition: .4s ease;
+
+            @include mq(xl, min) {
+                height: 24px;
+                width: 24px;
+            }
+        }
+
+        .active-bar {
+            background: $color-black-500;
+        }
+    }
+}