feat: adiciona o header da pagina desktop

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

@@ -4,18 +4,38 @@ import { waitElement } from "m3-utils";
 export default class Header {
     constructor() {
         this.init();
+        this.progressBarHTML();
     }
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.progressBarHTML();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        this.header = await waitElement(".headerCheckout");
-            //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
+        this.progressBar = await waitElement("#progressBar")
-            timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
-            interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
-        });
     }
+
+    progressBarHTML() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            this.progressBar.innerHTML = `
+            <div class="progress-bar__container-text">
+                <p class="text-carrinho">Meu carrinho</p>
+                <p class="text-dados">Dados Pessoais</p>
+                <p class="text-pagamento">Pagamento</p>
+            </div>
+                <ul class="progressbar-ul">
+                    <li class="active"></li>
+                    <li></li>
+                    <li></li>
+                </ul>
+
+            `
+        }
+        if (this.progressBar && window.innerWidth <= 1024) {
+            this.progressBar.innerHTML = ``;
+        }
+    }
+
 }

checkout/src/arquivos/sass/checkout.scss

@@ -3,3 +3,120 @@
 @import "./partials/header";
 @import "./partials/footer";
 @import "./checkout/checkout.scss";
+
+html {
+    height: 100%;
+    min-height: 100%;
+}
+
+footer .footerCheckout__wrapper {
+    width: 94.9734%;
+    margin: auto auto 0 auto;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100% !important;
+    padding-top: 0 !important;
+
+    @include mq(md, max) {
+        padding-left: 0;
+    }
+
+    &.body-cart {
+        font-family: $font-family;
+    }
+
+    &.body-cart,
+    &.body-order-form {
+        @include mq(xl, min) {
+            padding-top: 0;
+        }
+
+        @include mq(lg, max) {
+            padding-bottom: 0 !important;
+        }
+
+        @include mq(md, max) {
+            padding-right: 0;
+            padding-left: 0;
+        }
+    }
+    .container-order-form,
+    .container-cart {
+        width: 80%;
+    }
+}
+
+.btn-success {
+    background: $color-black;
+    text-shadow: none;
+
+    &:hover {
+        background: lighten($color-black, 15%);
+    }
+}
+
+.emailInfo h3 {
+    color: $color-black !important;
+}
+
+#cart-title,
+#orderform-title {
+    color: $color-gray2;
+    font-family: $font-family;
+    font-weight: 500;
+    font-size: 36px;
+    line-height: 42px;
+    margin: 40px 0 30px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+
+    @include mq(md, max) {
+        margin-left: 30px;
+    }
+}
+
+.dropdown {
+    &__content {
+        &--closed {
+            display: none;
+        }
+    }
+
+    &__title {
+        cursor: pointer;
+        user-select: none;
+
+        &::before,
+        &::after {
+            content: "";
+            background: $color-gray2;
+            display: block;
+            float: right;
+            height: 2px;
+            width: 8px;
+            margin-top: 8px;
+        }
+
+        &::before {
+            transform: rotate(0deg);
+            transition: 0.3s;
+        }
+
+        &::after {
+            transform: rotate(90deg);
+            transition: 0.3s;
+            margin-right: -8px;
+        }
+
+        &.closed::before {
+            transform: rotate(180deg);
+        }
+
+        &.closed::after {
+            transform: rotate(0);
+        }
+    }
+}

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

@@ -2,125 +2,3 @@
 @import "./checkout-carrinho";
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
-
-html {
-    height: 100%;
-    min-height: 100%;
-}
-
-footer .footerCheckout__wrapper {
-    width: 94.9734%;
-    margin: auto auto 0 auto;
-}
-footer .footerCheckout__prateleira,
-header {
-    width: 79.53125%;
-    margin: 0 auto;
-}
-
-body {
-    display: flex;
-    flex-direction: column;
-    min-height: 100% !important;
-    padding-top: 0 !important;
-
-    @include mq(md, max) {
-        padding-left: 0;
-    }
-
-    &.body-cart {
-        font-family: $font-family;
-    }
-
-    &.body-cart,
-    &.body-order-form {
-        @include mq(xl, min) {
-            padding-top: 0;
-        }
-
-        @include mq(lg, max) {
-            padding-bottom: 0 !important;
-        }
-
-        @include mq(md, max) {
-            padding-right: 0;
-            padding-left: 0;
-        }
-    }
-    .container-order-form,
-    .container-cart {
-        width: 80%;
-    }
-}
-
-.btn-success {
-    background: $color-black;
-    text-shadow: none;
-
-    &:hover {
-        background: lighten($color-black, 15%);
-    }
-}
-
-.emailInfo h3 {
-    color: $color-black !important;
-}
-
-#cart-title,
-#orderform-title {
-    color: $color-gray2;
-    font-family: $font-family;
-    font-weight: 500;
-    font-size: 36px;
-    line-height: 42px;
-    margin: 40px 0 30px;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-
-    @include mq(md, max) {
-        margin-left: 30px;
-    }
-}
-
-.dropdown {
-    &__content {
-        &--closed {
-            display: none;
-        }
-    }
-
-    &__title {
-        cursor: pointer;
-        user-select: none;
-
-        &::before,
-        &::after {
-            content: "";
-            background: $color-gray2;
-            display: block;
-            float: right;
-            height: 2px;
-            width: 8px;
-            margin-top: 8px;
-        }
-
-        &::before {
-            transform: rotate(0deg);
-            transition: 0.3s;
-        }
-
-        &::after {
-            transform: rotate(90deg);
-            transition: 0.3s;
-            margin-right: -8px;
-        }
-
-        &.closed::before {
-            transform: rotate(180deg);
-        }
-
-        &.closed::after {
-            transform: rotate(0);
-        }
-    }
-}

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

@@ -1,36 +1,161 @@
-/* _header.scss */
 .headerCheckout {
+    border-bottom: 1px solid $black-padrao;
+    padding: 0 130px;
+
     .container {
-        width: auto !important;
+        margin: 0;
+        width: 100%;
     }
     &__wrapper {
+        display: grid;
+        grid-template-columns: 1fr 2fr 1fr;
         align-items: center;
-        display: flex;
+    }
-        justify-content: space-between;
+
+    .progress-bar {
+        width: 100%;
+        position: relative;
+
+        &__container-text {
+            display: flex;
+
+            .text-carrinho {
+                width: 33%;
+                margin: 0 0 15px 22px;
+                display: flex;
+                justify-content: center;
+                font-family: $font-family-secundary;
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 14px;
+                @media screen and (min-width: 2500px) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
+            }
+
+            .text-dados {
+                margin: 0 auto;
+                display: flex;
+                justify-content: center;
+                font-family: $font-family-secundary;
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 14px;
+                @media screen and (min-width: 2500px) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
+            }
+
+            .text-pagamento {
+                width: 33%;
+                margin-bottom: 15px;
+                display: flex;
+                justify-content: center;
+                font-family: $font-family-secundary;
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 14px;
+                @media screen and (min-width: 2500px) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
+            }
+        }
+
+        .progressbar-ul {
+            li {
+                list-style-type: none;
+                float: left;
+                width: 33%;
+                position: relative;
+                text-align: center;
+            }
+
+            li::before {
+                content: "";
+                width: 12px;
+                height: 12px;
+                border: 1px solid $black-padrao;
+                display: block;
+                text-align: center;
+                margin: 0 auto auto;
+                border-radius: 50%;
+                background-color: white;
+                @media screen and (min-width: 2500px) {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+
+            li::after {
+                content: "";
+                position: absolute;
+                width: 100%;
+                height: 1px;
+                background-color: $black-padrao;
+                top: 6px;
+                left: -50%;
+                z-index: -1;
+                @media screen and (min-width: 2500px) {
+                    top: 12px;
+                }
+            }
+
+            li:first-child::after {
+                content: none;
+            }
+
+            li.active::before {
+                background-color: $black-padrao;
+            }
+        }
     }
 
     &__logo {
+        display: flex;
+        align-items: center;
+        padding: 29px 0;
+        width: 60.8%;
+        @media screen and (min-width: 2500px) {
+            width: 68.2%;
+        }
         img {
-            height: 52px;
+            width: 100%;
-            width: auto;
+            height: 37.15px;
+            @media screen and (min-width: 2500px) {
+                width: 100%;
+                height: 91px;
+            }
         }
     }
 
     &__safeBuy {
-        span {
+        display: flex;
-            align-items: center;
+        justify-content: end;
-            display: flex;
+        img {
-            text-transform: uppercase;
+            width: 12px;
-            font-family: $font-family;
+            height: 15px;
-            font-style: normal;
+            margin-right: 8px;
-            font-weight: normal;
+            @media screen and (min-width: 2500px) {
-            font-size: 12px;
+                width: 29.5px;
-            line-height: 14px;
+                height: 41.45px;
-            color: $color-gray;
+            }
         }
 
-        i {
+        span {
-            margin-right: 8px;
+            text-transform: uppercase;
+            font-family: $font-family;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 16px;
+            color: $color-black;
+            @media screen and (min-width: 2500px) {
+                font-size: 24px;
+                line-height: 33px;
+                align-self: baseline;
+            }
         }
     }
 }

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

@@ -2,13 +2,16 @@
 @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
 $font-family: "Open Sans", sans-serif;
-$font-family-secundary:"Tenor Sans", sans-serif;
+$font-family-secundary: "Tenor Sans", sans-serif;
 
 /* Colors */
+$black-padrao: #000000;
 $color-black: #292929;
 
 $color-white: #fff;
 
+$color-gray-100: #c4c4c4;
+
 $color-gray: #6c6c6c;
 $color-gray2: #7d7d7d;
 $color-gray3: #f0f0f0;
@@ -21,18 +24,18 @@ $color-green: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
+    xs: 0,
-	cstm: 400,
+    cstm: 400,
-	sm: 576px,
+    sm: 576px,
-	md: 768px,
+    md: 768px,
-	lg: 992px,
+    lg: 992px,
-	xl: 1200px
+    xl: 1200px,
 ) !default;
 
 $z-index: (
-	level1: 5,
+    level1: 5,
-	level2: 10,
+    level2: 10,
-	level3: 15,
+    level3: 15,
-	level4: 20,
+    level4: 20,
-	level5: 25
+    level5: 25,
 ) !default;

package-lock.json

@@ -23,7 +23,8 @@
                 "concurrently": "^6.0.0",
                 "husky": "^5.2.0",
                 "lerna": "^4.0.0",
-                "lint-staged": "^10.5.4"
+                "lint-staged": "^10.5.4",
+                "yarn": "^1.22.19"
             }
         },
         "checkout": {
@@ -45,6 +46,7 @@
                 "jquery": "^3.6.0",
                 "m3-utils": "^0.1.0",
                 "sass": "^1.38.1",
+                "slick-carousel": "^1.8.1",
                 "terser-webpack-plugin": "^5.1.4"
             },
             "devDependencies": {
@@ -17668,6 +17670,20 @@
                 "node": ">=10"
             }
         },
+        "node_modules/yarn": {
+            "version": "1.22.19",
+            "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz",
+            "integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==",
+            "dev": true,
+            "hasInstallScript": true,
+            "bin": {
+                "yarn": "bin/yarn.js",
+                "yarnpkg": "bin/yarn.js"
+            },
+            "engines": {
+                "node": ">=4.0.0"
+            }
+        },
         "node_modules/yocto-queue": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -19345,6 +19361,7 @@
                 "m3-utils": "^0.1.0",
                 "prettier": "^2.3.2",
                 "sass": "^1.38.1",
+                "slick-carousel": "^1.8.1",
                 "terser-webpack-plugin": "^5.1.4",
                 "webpack": "^5.51.1",
                 "webpack-merge": "^5.8.0"
@@ -30672,6 +30689,12 @@
             "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
             "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA=="
         },
+        "yarn": {
+            "version": "1.22.19",
+            "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz",
+            "integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==",
+            "dev": true
+        },
         "yocto-queue": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

package.json

@@ -30,7 +30,8 @@
         "concurrently": "^6.0.0",
         "husky": "^5.2.0",
         "lerna": "^4.0.0",
-        "lint-staged": "^10.5.4"
+        "lint-staged": "^10.5.4",
+        "yarn": "^1.22.19"
     },
     "dependencies": {
         "@commitlint/cli": "^12.0.1",