Merge pull request 'refactor(pdp): Separa componente placeholder e remove paddings default' (#4) from feature/product-page into master

Reviewed-on: #4

react/SetPlaceholder.ts

@@ -0,0 +1,3 @@
+import SetPlaceholder from "./components/SetPlaceholder/SetPlaceholder";
+
+export default SetPlaceholder;

react/components/Pix/Pix.tsx

@@ -3,11 +3,6 @@ import { useProduct } from "vtex.product-context";
 import styles from "./Pix.module.css";
 
 const Pix = () => {
-  if (typeof document !== "undefined") {
-    const input = document.querySelector(".vtex-address-form-4-x-input");
-    input?.setAttribute("placeholder", "Digite seu CEP");
-  }
-
   const price = useProduct()?.product?.priceRange?.sellingPrice?.highPrice;
   const discount = (Number(price) * 10) / 100;
   const priceWithDiscount = Number(price) - Number(discount);

react/components/SetPlaceholder/SetPlaceholder.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const SetPlaceholder = () => {
+  setTimeout(() => {
+    if (typeof document !== "undefined") {
+      setTimeout(() => {
+        const input = document.querySelector(".vtex-address-form-4-x-input");
+        input?.setAttribute("placeholder", "Digite seu CEP");
+      }, 100);
+    }
+  }, 100);
+
+  return <></>;
+};
+
+export default SetPlaceholder;

store/blocks/pdp/product.jsonc

@@ -162,7 +162,8 @@
       "html#skus",
       "html#qtd-btn",
       "availability-subscriber",
-      "html#shipping-simulator"
+      "html#shipping-simulator",
+      "SetPlaceholder"
     ]
   },
 

store/interfaces.json

@@ -8,5 +8,8 @@
   },
   "Pix": {
     "component": "Pix"
+  },
+  "SetPlaceholder": {
+    "component": "SetPlaceholder"
   }
 }

styles/css/vtex.breadcrumb.css

@@ -6,10 +6,11 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .container--breadcrumb {
-  margin-left: 40px;
+  padding: 0;
-  margin-right: 40px;
+  margin: 16px 40px;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
@@ -30,6 +31,7 @@
 }
 .container--breadcrumb .homeLink--breadcrumb {
   vertical-align: top;
+  padding: 0;
   padding-left: 0;
 }
 .container--breadcrumb .homeLink--breadcrumb::after {
@@ -42,6 +44,9 @@
 }
 .container--breadcrumb .link--breadcrumb--1 {
   padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  line-height: 0;
   font-size: 0;
   color: #929292;
 }
@@ -57,6 +62,8 @@
   font-size: 14px;
   line-height: 19px;
   color: #929292;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 .container--breadcrumb .termArrow--breadcrumb,
 .container--breadcrumb .term--breadcrumb {

styles/css/vtex.flex-layout.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 /*NOME PRODUTO*/
 .flexRowContent--name {

styles/css/vtex.product-identifier.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .product-identifier--productReference .product-identifier__label {
   display: none;

styles/css/vtex.product-price.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .installments--parcelamentos {
   font-style: normal;

styles/css/vtex.product-quantity.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .quantitySelectorStepper {
   display: flex;

styles/css/vtex.product-summary.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .nameContainer {
   text-align: center;

styles/css/vtex.rich-text.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .container--title-prateleira {
   margin-top: 16px;

styles/css/vtex.slider-layout.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .sliderLayoutContainer--prateleira {
   padding-left: 40px;

styles/css/vtex.tab-layout.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .container--details {
   padding-left: 40px;
@@ -28,8 +29,7 @@
 @media screen and (max-width: 1024px) {
   .listContainer {
     margin-top: 16px;
-    padding-bottom: 8px;
+    padding-bottom: 16px;
-    padding-top: 5px;
     border-bottom: 1px solid #b9b9b9;
     border-top: 1px solid #b9b9b9;
     flex-direction: column;
@@ -40,19 +40,27 @@
 
 .listItem {
   background-color: transparent;
-  padding: 0 14px 0 14px;
+  padding: 0 16px 0 16px;
   margin: 0;
-  height: 42px;
+  height: 38px;
+  width: 114px;
+}
+@media screen and (min-width: 1921px) {
+  .listItem {
+    width: 142px;
+  }
 }
 @media screen and (max-width: 1024px) {
   .listItem {
-    margin: 5px 0;
+    margin-top: 16px;
     padding: 0;
+    width: unset;
   }
 }
 .listItem :global(.vtex-button) {
   background-color: transparent;
   cursor: pointer;
+  border: none;
 }
 @media screen and (max-width: 1024px) {
   .listItem :global(.vtex-button) {
@@ -60,10 +68,6 @@
     display: flex;
   }
 }
-.listItem :global(.vtex-button) {
-  background-color: transparent;
-  border: none;
-}
 .listItem :global(.vtex-button__label) {
   font-weight: 400;
   font-size: 18px;
@@ -71,7 +75,7 @@
   color: #bfbfbf;
   text-transform: capitalize;
   margin: 0;
-  padding: 0;
+  padding: 0 !important;
 }
 @media screen and (min-width: 1921px) {
   .listItem :global(.vtex-button__label) {

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -1,6 +1,6 @@
 .container--breadcrumb {
-  margin-left: 40px;
+  padding: 0;
-  margin-right: 40px;
+  margin: 16px 40px;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
@@ -20,6 +20,7 @@
 
   .homeLink--breadcrumb {
     vertical-align: top;
+    padding: 0;
     padding-left: 0;
     &::after {
       content: "Home";
@@ -33,6 +34,9 @@
 
   .link--breadcrumb--1 {
     padding-right: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: 0;
     font-size: 0;
     color: $color-gray6;
 
@@ -50,6 +54,8 @@
     font-size: 14px;
     line-height: 19px;
     color: $color-gray6;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 
   .termArrow--breadcrumb,

styles/sass/pages/product/vtex.tab-layout.scss

@@ -16,8 +16,7 @@
 
   @media screen and (max-width: 1024px) {
     margin-top: 16px;
-    padding-bottom: 8px;
+    padding-bottom: 16px;
-    padding-top: 5px;
     border-bottom: 1px solid $color-gray12;
     border-top: 1px solid $color-gray12;
     flex-direction: column;
@@ -28,28 +27,30 @@
 
 .listItem {
   background-color: transparent;
-  padding: 0 14px 0 14px;
+  padding: 0 16px 0 16px;
   margin: 0;
-  height: 42px;
+  height: 38px;
+  width: 114px;
+  @media screen and (min-width: 1921px) {
+    width: 142px;
+  }
   @media screen and (max-width: 1024px) {
-    margin: 5px 0;
+    margin-top: 16px;
     padding: 0;
+    width: unset;
   }
 
   :global(.vtex-button) {
     background-color: transparent;
     cursor: pointer;
+    border: none;
+
     @media screen and (max-width: 1024px) {
       width: 100%;
       display: flex;
     }
   }
 
-  :global(.vtex-button) {
-    background-color: transparent;
-    border: none;
-  }
-
   :global(.vtex-button__label) {
     font-weight: 400;
     font-size: 18px;
@@ -57,7 +58,7 @@
     color: $color-gray9;
     text-transform: capitalize;
     margin: 0;
-    padding: 0;
+    padding: 0 !important;
     @media screen and (min-width: 1921px) {
       font-size: 24px;
     }