From c153da595f84387356529778e63144d5487dd10f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Wed, 8 Feb 2023 17:35:13 -0300 Subject: [PATCH] refactor(pdp): Separa componente placeholder e remove paddings default --- react/SetPlaceholder.ts | 3 +++ react/components/Pix/Pix.tsx | 5 ---- .../SetPlaceholder/SetPlaceholder.tsx | 16 +++++++++++++ store/blocks/pdp/product.jsonc | 3 ++- store/interfaces.json | 3 +++ styles/css/vtex.breadcrumb.css | 11 +++++++-- styles/css/vtex.flex-layout.css | 1 + styles/css/vtex.product-identifier.css | 1 + styles/css/vtex.product-price.css | 1 + styles/css/vtex.product-quantity.css | 1 + styles/css/vtex.product-summary.css | 1 + styles/css/vtex.rich-text.css | 1 + styles/css/vtex.slider-layout.css | 1 + styles/css/vtex.tab-layout.css | 24 +++++++++++-------- .../sass/pages/product/vtex.breadcrumb.scss | 10 ++++++-- .../sass/pages/product/vtex.tab-layout.scss | 23 +++++++++--------- 16 files changed, 74 insertions(+), 31 deletions(-) create mode 100644 react/SetPlaceholder.ts create mode 100644 react/components/SetPlaceholder/SetPlaceholder.tsx diff --git a/react/SetPlaceholder.ts b/react/SetPlaceholder.ts new file mode 100644 index 0000000..b133f9e --- /dev/null +++ b/react/SetPlaceholder.ts @@ -0,0 +1,3 @@ +import SetPlaceholder from "./components/SetPlaceholder/SetPlaceholder"; + +export default SetPlaceholder; diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index 2a87d86..8df3d45 100644 --- a/react/components/Pix/Pix.tsx +++ b/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); diff --git a/react/components/SetPlaceholder/SetPlaceholder.tsx b/react/components/SetPlaceholder/SetPlaceholder.tsx new file mode 100644 index 0000000..2ca67e6 --- /dev/null +++ b/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; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 76044a2..ead6415 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -162,7 +162,8 @@ "html#skus", "html#qtd-btn", "availability-subscriber", - "html#shipping-simulator" + "html#shipping-simulator", + "SetPlaceholder" ] }, diff --git a/store/interfaces.json b/store/interfaces.json index 2d07e38..4f88c2e 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -8,5 +8,8 @@ }, "Pix": { "component": "Pix" + }, + "SetPlaceholder": { + "component": "SetPlaceholder" } } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index eb7b5fa..5b9b91c 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/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; - margin-right: 40px; + padding: 0; + 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 { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 5d9f863..65a4f73 100644 --- a/styles/css/vtex.flex-layout.css +++ b/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 { diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index bd638c2..f0c04f9 100644 --- a/styles/css/vtex.product-identifier.css +++ b/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; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 00361d0..6f24c9e 100644 --- a/styles/css/vtex.product-price.css +++ b/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; diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index f45e06d..6c05d02 100644 --- a/styles/css/vtex.product-quantity.css +++ b/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; diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 715afef..d4cede0 100644 --- a/styles/css/vtex.product-summary.css +++ b/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; diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index f53c460..0ae3ef5 100644 --- a/styles/css/vtex.rich-text.css +++ b/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; diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 0f374f9..ce44ec5 100644 --- a/styles/css/vtex.slider-layout.css +++ b/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; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 2381b34..d113108 100644 --- a/styles/css/vtex.tab-layout.css +++ b/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-top: 5px; + padding-bottom: 16px; 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) { diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 79b728a..98d48b7 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,6 +1,6 @@ .container--breadcrumb { - margin-left: 40px; - margin-right: 40px; + padding: 0; + 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, diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index c113bec..97c707d 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/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-top: 5px; + padding-bottom: 16px; 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; }