Merge pull request 'feat: adiciona a prateleira de produtos e footer responsivo em todas as telas' (#4) from feature/prateleira-style into main

Reviewed-on: #4

checkout/src/arquivos/js/components/Footer.js

@@ -3,8 +3,6 @@ import { waitElement } from "m3-utils";
 export default class Footer {
     constructor() {
         this.init();
-
-
     }
 
     async init() {
@@ -50,14 +48,15 @@ export default class Footer {
                     <img src="${product.items[0].images[0].imageUrl}" alt="Imagem ${product.productName}" />
                     <figcaption>${product.productName}</figcaption>
                 </figure>
-                <div>
+                <div class="container-tamanho-cores">${product.items.map((nameProduct) => {
-                    <label name="tamanho">
+                        return ` <input name="tamanho" type="radio"/>
-                        ${product.items.name}
+                            <label name="tamanho">
-                    </label>
+                                ${nameProduct.name}
-                    <input name="tamanho" type="radio"/>
+                            </label>`
+                    }).join("")}
                 </div>
-                <div>
+                <div class="container-button-prateleira">
-                    <button> </button>
+                    <a href=""><button>Ver produto</button></a>
                 </div>
             `
                     footerPrat.children[1].appendChild(li)
@@ -70,15 +69,15 @@ export default class Footer {
         `
 
         iconCard.innerHTML = `
-        <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Imagem Master Card"/></li>
+            <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Imagem Master Card"/></li>
-        <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Imagem Visa Card"/></li>
+            <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Imagem Visa Card"/></li>
-        <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Imagem American Express"/></li>
+            <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Imagem American Express"/></li>
-        <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Imagem Elo Card"/></li>
+            <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Imagem Elo Card"/></li>
-        <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Imagem Hiper Card"/></li>
+            <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Imagem Hiper Card"/></li>
-        <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Imagem PayPal"/></li>
+            <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Imagem PayPal"/></li>
-        <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Imagem Boleto"/></li>
+            <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Imagem Boleto"/></li>
-        <li><span class="footerCheckout__stamps__divider"> </span></li>
+            <li><span class="footerCheckout__stamps__divider"> </span></li>
-        <li class="footerCheckout__stamps__item"><img class="iconVtex" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Imagem Vtex" /></li>
+            <li class="footerCheckout__stamps__item"><img class="iconVtex" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Imagem Vtex" /></li>
         `
         developedBy.innerHTML = `
             <li class="footerCheckout__developedBy__item-Vtex"><p>Powered By</p><img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="Imagem VTEX"/> </li>
@@ -108,6 +107,24 @@ export default class Footer {
             slidesToShow: 4,
             slidesToScroll: 1,
             arrows: true,
+            responsive: [
+                {
+                    breakpoint: 376,
+                    settings: {
+                        slidesToShow: 2,
+                        slidesToScroll: 1,
+                        arrows: true,
+                    }
+                },
+                {
+                    breakpoint: 1025,
+                    settings: {
+                        slidesToShow: 3,
+                        slidesToScroll: 1,
+                        arrows: true,
+                    }
+                }
+            ]
         });
     }
 }

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

@@ -14,7 +14,7 @@ export default class Header {
 
     async selectors() {
         this.header = await waitElement(".headerCheckout");
-        this.progressBar = await waitElement("#progressBar")
+        this.progressBar = await waitElement("#progressBar");
     }
 
     progressBarHTML() {
@@ -31,7 +31,7 @@ export default class Header {
                     <li></li>
                 </ul>
             `
-        }
+        };
         if (this.progressBar && window.innerWidth <= 1024) {
             this.progressBar.innerHTML = ``;
         }

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

@@ -2,24 +2,277 @@
     padding: 0 16px;
     position: relative;
 
+    &__prateleira {
+        margin-bottom: 123px;
+
+        @media screen and (min-width: 2500px) {
+            margin-bottom: 156px;
+        }
+
+        @media screen and (max-width: 1024px) {
+            margin-bottom: 188px;
+        }
+
+        h2 {
+            display: flex;
+            margin: 0 0 20px;
+            font-weight: 400;
+            line-height: 38px;
+            font-size: 24px;
+            justify-content: center;
+            font-family: $font-family-secundary;
+
+            @media screen and (min-width: 2500px) {
+                font-size: 48px;
+                line-height: 76px;
+            }
+        }
+
+        .container-carousel-item {
+            display: flex;
+            margin: 0;
+            padding: 0 116px;
+            list-style: none;
+
+            @media screen and (min-width: 2500px) {
+                padding: 0 237px;
+            }
+
+            @media screen and (max-width: 1024px) {
+                padding: 0;
+            }
+
+            li {
+                width: 96.1% !important;
+
+                @media screen and (min-width: 1280px) and (max-width: 1281px) {
+                    width: 242px !important;
+                    margin-right: 16px;
+                }
+
+                @media screen and (min-width: 2500px) and (max-width: 2501px) {
+                    width: 485.07px !important;
+                    margin-right: 16.93px;
+                }
+
+                @media screen and (min-width: 1023px) and (max-width: 1024px) {
+                    width: 320px !important;
+                    margin-right: 15px;
+                }
+
+                figure {
+                    margin: 0;
+
+                    img {
+                        width: 100%;
+                        background: $color-gray-100;
+                    }
+
+                    figcaption {
+                        display: flex;
+                        margin-top: 20px;
+                        justify-content: center;
+                        font-weight: 400;
+                        font-size: 13px;
+                        align-items: center;
+                        text-align: center;
+                        line-height: 18px;
+                        font-family: $font-family;
+
+                        @media screen and (min-width: 2500px) {
+                            font-size: 26px;
+                            line-height: 35px;
+                        }
+
+                        @media screen and (min-width: 726px) and (max-width: 1024px) {
+                            margin: 20px 0;
+                        }
+
+                        @media screen and (min-width: 376px) and (max-width: 725px) {
+                            margin-top: 11px;
+                            min-height: 36px;
+                        }
+
+                        @media screen and (min-width: 1025px) and (max-width: 1188px) {
+                            min-height: 36px;
+                        }
+                    }
+                }
+                .container-tamanho-cores {
+                    display: flex;
+                    margin-top: 20px;
+                    gap: 5px;
+                    align-items: center;
+                    justify-content: center;
+                    flex-wrap: wrap;
+
+                    @media screen and (max-width: 725px) {
+                        min-height: 61px;
+                    }
+
+                    @media screen and (min-width: 1025px) and (max-width: 1188px) {
+                        min-height: 61px;
+                    }
+
+                    input {
+                        display: none;
+                    }
+
+                    label {
+                        display: flex;
+                        padding: 5px;
+                        border-radius: 8px;
+                        font-weight: 700;
+                        font-size: 13px;
+                        line-height: 18px;
+                        align-items: center;
+                        text-align: center;
+                        text-transform: uppercase;
+                        background: $color-blue-100;
+                        letter-spacing: 0.05em;
+                        color: $color-white;
+                        justify-content: center;
+
+                        @media screen and (min-width: 2500px) {
+                            padding: 6.1px;
+                            font-size: 26px;
+                            line-height: 35px;
+                        }
+                    }
+
+                    label:last-child {
+                        margin-right: 0;
+                    }
+                }
+
+                .container-button-prateleira {
+                    margin-top: 20px;
+
+                    @media screen and (min-width: 726px) and (max-width: 1024px) {
+                        margin-top: 20px;
+                    }
+
+                    a {
+                        text-decoration: none;
+                    }
+
+                    button {
+                        width: 100%;
+                        height: 42px;
+                        font-weight: 700;
+                        font-size: 13px;
+                        line-height: 13px;
+                        border: none;
+                        border-radius: 8px;
+                        color: $color-white;
+                        background: $color-blue-100;
+                        letter-spacing: 0.05em;
+                        text-transform: uppercase;
+                        font-family: $font-family;
+
+                        @media screen and (min-width: 2500px) {
+                            height: 59px;
+                            font-size: 26px;
+                            line-height: 35px;
+                            letter-spacing: 0.05em;
+                        }
+                    }
+                }
+            }
+        }
+
+        .slick-prev {
+            width: 13px;
+            height: 29.5px;
+            border: none;
+            background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg)
+                no-repeat center center;
+            z-index: 4;
+            left: 125px;
+            top: 43%;
+
+            @media screen and (min-width: 2500px) {
+                width: 26px;
+                height: 58px;
+                background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg)
+                    no-repeat center center;
+                left: 255px;
+                top: 45%;
+            }
+
+            @media screen and (max-width: 1024px) {
+                width: 13.65px;
+                height: 29.47px;
+                left: 10px;
+                top: 48%;
+            }
+        }
+
+        .slick-next {
+            width: 13px;
+            height: 29.5px;
+            border: none;
+            background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg)
+                no-repeat center center;
+            z-index: 4;
+            top: 43%;
+            right: 137px;
+
+            @media screen and (min-width: 2500px) {
+                width: 26px;
+                height: 58px;
+                background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg)
+                    no-repeat center center;
+                top: 45%;
+                right: 265px;
+            }
+
+            @media screen and (max-width: 1024px) {
+                width: 13.65px;
+                height: 29.47px;
+                top: 48%;
+                right: 20px;
+            }
+        }
+    }
+
     .container {
         display: flex;
         margin: 16px 0;
         width: 100% !important;
+
+        @media screen and (max-width: 1024px) {
+            display: grid;
+        }
     }
 
     &__wrapper {
         width: 100% !important;
         border-top: solid 1px $black-padrao;
-        position: fixed;
+        position: absolute;
         bottom: 0;
         left: 0;
+
+        @media screen and (min-width: 2500px) {
+            height: 80px;
+            margin: 0 0 16px !important;
+        }
     }
 
     &__address {
         display: flex;
         align-items: center;
         padding-left: 16px;
+
+        @media screen and (min-width: 2500px) {
+            padding-left: 63px;
+        }
+
+        @media screen and (max-width: 1024px) {
+            padding-left: 16px;
+            margin: 16px 0;
+        }
+
         p {
             margin: 0;
             height: 14px;
@@ -29,28 +282,62 @@
             text-transform: capitalize;
             color: $color-black;
             font-family: $font-family;
+
+            @media screen and (min-width: 2500px) {
+                font-size: 20px;
+                line-height: 27px;
+            }
         }
     }
 
     &__stamps {
         margin: 0 auto;
         display: flex;
+        width: 32.4%;
         align-items: center;
         list-style: none;
-        width: 32.4%;
+        justify-content: center;
+
+        @media screen and (max-width: 1024px) {
+            order: -1;
+            margin: 0;
+            width: 100%;
+            padding-left: 8px;
+            justify-content: flex-start;
+        }
 
         &__item {
             margin-right: 13px;
 
+            @media screen and (max-width: 1024px) {
+                margin-right: 5px;
+            }
+
             img {
-                width: 100%;
+                width: 35.65px;
                 height: 20px;
                 object-fit: cover;
-            }
-        }
 
-        .iconVtex {
+                @media screen and (min-width: 2500px) {
-            height: 33px;
+                    width: 69.65px;
+                    height: 39px;
+                }
+            }
+
+            .iconVtex {
+                width: 53px;
+                height: 33px;
+
+                @media screen and (min-width: 2500px) {
+                    width: 103.5px;
+                    height: 64.45px;
+                }
+
+                @media screen and (max-width: 1024px) {
+                    width: 53px;
+                    margin-right: 5px;
+                }
+            }
         }
 
         &__divider {
@@ -58,6 +345,11 @@
             height: 24px;
             margin: 0 10px 0 0;
             border: 1px solid $color-gray-100;
+
+            @media screen and (min-width: 2500px) {
+                display: flex;
+                height: 43px !important;
+            }
         }
     }
 
@@ -67,6 +359,14 @@
         list-style: none;
         padding-right: 16px;
 
+        @media screen and (min-width: 2500px) {
+            padding-right: 62px;
+        }
+
+        @media screen and (max-width: 1024px) {
+            padding-left: 16px;
+        }
+
         &__item-Vtex {
             display: flex;
             align-items: center;
@@ -78,10 +378,19 @@
                 line-height: 12px;
                 color: $color-black;
                 font-family: $font-family;
+
+                @media screen and (min-width: 2500px) {
+                    font-size: 18px;
+                    line-height: 25px;
+                }
             }
 
             img {
                 height: 16px;
+                @media screen and (min-width: 2500px) {
+                    width: 87.75px;
+                    height: 31.25px;
+                }
             }
         }
 
@@ -90,11 +399,20 @@
             align-items: center;
             p {
                 margin: 0 11px 0 0;
+                font-weight: 400;
                 font-size: 9px;
+                @media screen and (min-width: 2500px) {
+                    font-size: 18px;
+                    line-height: 25px;
+                }
             }
 
             img {
                 height: 16px;
+                @media screen and (min-width: 2500px) {
+                    width: 56px;
+                    height: 30.55px;
+                }
             }
         }
     }

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

@@ -10,7 +10,7 @@ $color-black: #292929;
 
 $color-white: #fff;
 
-$color-gray-100: #c4c4c4;
+$color-gray-100: #eee;
 
 $color-gray: #6c6c6c;
 $color-gray2: #7d7d7d;
@@ -19,6 +19,7 @@ $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
 
 $color-blue: #4267b2;
+$color-blue-100: #00c8ff;
 
 $color-green: #4caf50;