From 68cefb0c52ebe3fde7d8d72fa487b58ae704e29d Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Mon, 6 Feb 2023 12:35:24 -0300 Subject: [PATCH] feat: created styles for large devices --- .gitignore | 3 +- .vtexignore | 4 +- manifest.json | 1 + .../_PixCustomInstallments.module.scss | 0 .../_PixCustomInstallments.ts | 0 .../components/PixCustomInstallments/index.ts | 0 store/blocks/home/home.jsonc | 2 +- store/blocks/newsletter.json | 65 +++++++++++++++++++ store/blocks/pdp/product-shelf.jsonc | 10 ++- .../pdp/product-specifications-table.jsonc | 44 +++++++++++-- store/blocks/pdp/product.jsonc | 25 +++++-- styles/configs/style.json | 9 ++- styles/css/vtex.flex-layout.css | 59 +++++++++++++++++ styles/css/vtex.product-summary.css | 4 ++ styles/css/vtex.rich-text.css | 12 +++- styles/css/vtex.slider-layout.css | 21 ++++++ styles/css/vtex.store-components.css | 10 +++ .../sass/pages/product/vtex.flex-layout.scss | 63 ++++++++++++++++++ .../pages/product/vtex.product-summary.scss | 4 ++ styles/sass/pages/product/vtex.rich-text.scss | 16 ++++- .../pages/product/vtex.slider-layout.scss | 18 +++++ .../pages/product/vtex.store-components.scss | 8 +++ 22 files changed, 358 insertions(+), 20 deletions(-) create mode 100644 react/components/PixCustomInstallments/_PixCustomInstallments.module.scss create mode 100644 react/components/PixCustomInstallments/_PixCustomInstallments.ts create mode 100644 react/components/PixCustomInstallments/index.ts create mode 100644 store/blocks/newsletter.json diff --git a/.gitignore b/.gitignore index cc74553..bf54491 100644 --- a/.gitignore +++ b/.gitignore @@ -37,4 +37,5 @@ lib react/package-lock.json # alternatives -/.workspace \ No newline at end of file +/.workspace +/workspace \ No newline at end of file diff --git a/.vtexignore b/.vtexignore index 18fdddf..73d9402 100644 --- a/.vtexignore +++ b/.vtexignore @@ -13,4 +13,6 @@ service/node_modules/ react/__tests__/** react/.babelrc react/.eslintrc -react/setupTests.js \ No newline at end of file +react/setupTests.js +workspace +.workspace \ No newline at end of file diff --git a/manifest.json b/manifest.json index 8782b94..256da74 100644 --- a/manifest.json +++ b/manifest.json @@ -37,6 +37,7 @@ "vtex.locale-switcher": "0.x", "vtex.product-quantity": "1.x", "vtex.product-identifier": "0.x", + "vtex.store-newsletter": "1.x", "vtex.breadcrumb": "1.x", "vtex.sticky-layout": "0.x", "vtex.product-customizer": "2.x", diff --git a/react/components/PixCustomInstallments/_PixCustomInstallments.module.scss b/react/components/PixCustomInstallments/_PixCustomInstallments.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/react/components/PixCustomInstallments/_PixCustomInstallments.ts b/react/components/PixCustomInstallments/_PixCustomInstallments.ts new file mode 100644 index 0000000..e69de29 diff --git a/react/components/PixCustomInstallments/index.ts b/react/components/PixCustomInstallments/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index df8c1f3..36fbbdf 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -9,7 +9,7 @@ "info-card#home", "rich-text#question", "rich-text#link", - "newsletter" + "flex-layout.row#newsletter" ] }, diff --git a/store/blocks/newsletter.json b/store/blocks/newsletter.json new file mode 100644 index 0000000..f697cef --- /dev/null +++ b/store/blocks/newsletter.json @@ -0,0 +1,65 @@ +{ + "flex-layout.row#newsletter": { + "props": { + "blockClass": "newsletter", + "preserveLayoutOnMobile": true + }, + + "children": ["newsletter-form"] + }, + + "newsletter-form": { + "props": { + "blockClass": "newsletter" + }, + + "children": [ + "rich-text#newsletter-title", + "rich-text#newsletter-subtitle", + "flex-layout.row#newsletter-inputs" + ] + }, + + "flex-layout.row#newsletter-inputs": { + "props": { + "preserveLayoutOnMobile": true, + "blockClass": "newsletterInputs", + "colSizing": "auto" + }, + "children": ["newsletter-input-email", "newsletter-submit"] + }, + + "newsletter-input-email": { + "props": { + "placeholderText": "Digite seu E-mail", + "errorMessage": "E-mail ínvalido" + } + }, + + "newsletter-submit": { + "props": { + "submitButtonLabel": "ENVIAR" + } + }, + + "rich-text#newsletter-title": { + "props": { + "blockClass": "newsletterTitle", + "text": "## Assine nossa newsletter", + "textAlignment": "CENTER", + "textPosition": "CENTER", + "font": "t-body", + "textColor": "c-on-base--inverted" + } + }, + + "rich-text#newsletter-subtitle": { + "props": { + "blockClass": "newsletterSubtitle", + "text": "Receba ofertas e novidades por e-mail", + "textAlignment": "CENTER", + "textPosition": "CENTER", + "textColor": "c-on-base-300" + } + } +} diff --git a/store/blocks/pdp/product-shelf.jsonc b/store/blocks/pdp/product-shelf.jsonc index f300b20..9284ce5 100644 --- a/store/blocks/pdp/product-shelf.jsonc +++ b/store/blocks/pdp/product-shelf.jsonc @@ -27,6 +27,7 @@ "text": "## Você também pode gostar:", "textPosition": "CENTER", "textAlignment": "CENTER", + "textColor": "c-on-base-200", "blockClass": "productShelfTitle" } }, @@ -39,7 +40,6 @@ "(min-width:1025px)": 4, "(min-width:768px)": 3, "tablet": 2, - "phone": 2 }, "fullWidth": true @@ -59,6 +59,14 @@ "showBadge": false, "alabelSellingPricespectRatio": "1:1", "aspectRatio": "1:1", + "maxHeight": { + "(min-width: 1921px)": "434.4px", + "desktop": "314.4px", + "(min-width:1025px)": "314.4px", + "(min-width:768px)": "291.2px", + "tablet": "291.2px", + "phone": "124.8px" + }, "width": { "(min-width: 1921px)": "434.4px", "desktop": "314.4px", diff --git a/store/blocks/pdp/product-specifications-table.jsonc b/store/blocks/pdp/product-specifications-table.jsonc index f3fed0c..8931ee2 100644 --- a/store/blocks/pdp/product-specifications-table.jsonc +++ b/store/blocks/pdp/product-specifications-table.jsonc @@ -109,9 +109,18 @@ "flex-layout.row#product-specification-1": { "props": { "blockClass": "productSpecificationItemContainer", - "colGap": 7, + "colGap": { + "desktop": 7, + "(min-width:1025px)": 7, + "(min-iwdth:769px)": 0, + "tablet": 0, + "phone": 0 + }, "marginTop": 7, - "rowGap": 5 + "marginBottom": 5, + "border": "bottom", + "borderWidth": 1, + "borderColor": "action-third" }, "children": [ @@ -123,9 +132,18 @@ "flex-layout.row#product-specification-2": { "props": { "blockClass": "productSpecificationItemContainer", - "colGap": 7, + "colGap": { + "desktop": 7, + "(min-width:1025px)": 7, + "(min-iwdth:769px)": 0, + "tablet": 0, + "phone": 0 + }, "marginTop": 7, - "rowGap": 5 + "marginBottom": 5, + "border": "bottom", + "borderWidth": 1, + "borderColor": "action-third" }, "children": [ @@ -143,14 +161,28 @@ "flex-layout.row#description-1": { "props": { - "marginBottom": 7 + "marginBottom": 7, + "marginTop": { + "desktop": 0, + "(min-width:1025px)": 0, + "(min-width:769px)": 5, + "tablet": 5, + "phone": 5 + } }, "children": ["product-description#product-specification-1"] }, "flex-layout.row#description-2": { "props": { - "marginBottom": 7 + "marginBottom": 7, + "marginTop": { + "desktop": 0, + "(min-width:1025px)": 0, + "(min-width:769px)": 5, + "tablet": 5, + "phone": 5 + } }, "children": ["product-description#product-specification-2"] }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e31ceb1..e64e78f 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -6,7 +6,7 @@ "flex-layout.row#product-specifications", "html#pdp-slider-shelf-title", "html#list-context-pdp-shelf", - "newsletter", + "flex-layout.row#newsletter", "product-questions-and-answers" ] }, @@ -56,14 +56,18 @@ "flex-layout.row#product-main": { "props": { - "colGap": 7, - "rowGap": 7, + "colGap": { + "desktop": 7, + "(min-width:1025px)": 7, + "tablet": 0, + "phone": 0 + }, "marginTop": 5, "marginBottom": 7, "preserveLayoutOnMobile": false, "blockClass": "productMain" }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": ["flex-layout.col#stack", "flex-layout.row#right-col"] }, "stack-layout": { @@ -105,6 +109,18 @@ "rowGap": 0 } }, + "flex-layout.row#right-col": { + "props": { + "marginTop": { + "desktop": 0, + "(min-width:1025px)": 0, + "(min-width:769px)": 7, + "tablet": 7, + "phone": 7 + } + }, + "children": ["flex-layout.col#right-col"] + }, "flex-layout.col#right-col": { "props": { @@ -169,6 +185,7 @@ "sku-selector": { "props": { + "showValueForVariation": "none", "variationsSpacing": 3, "showValueNameForImageVariation": true } diff --git a/styles/configs/style.json b/styles/configs/style.json index b39aafe..68aab54 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -153,6 +153,7 @@ "border": { "action-primary": "#000000", "action-secondary": "#eef3f7", + "action-third": "#b9b9b9", "emphasis": "#f71963", "disabled": "#e3e4e6", "success": "#8bc34a", @@ -201,6 +202,10 @@ }, "on": { "base": "#B9B9B999", + + "base-100": "#000000", + "base-200": "#575757", + "base-300": "#929292", "base--inverted": "#ffffff", "action-primary": "#ffffff", "action-secondary": "#000000", @@ -263,8 +268,8 @@ }, "heading-2": { "fontFamily": "Open Sans, arial, sans-serif", - "fontWeight": "700", - "fontSize": "2.25rem", + "fontWeight": "400", + "fontSize": "1.5rem", "textTransform": "initial", "letterSpacing": "0" }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index d22f17b..5f4dfba 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -110,10 +110,12 @@ } @media screen and (max-width: 1024px) { + .flexRowContent--productSpecificationItemContainer, .flexRowContent--productAvailability, .flexRowContent--productMain { flex-direction: column !important; } + .flexRowContent--productSpecificationItemContainer .stretchChildrenWidth, .flexRowContent--productAvailability .stretchChildrenWidth, .flexRowContent--productMain .stretchChildrenWidth { width: 100% !important; @@ -172,4 +174,61 @@ .flexRow--productSpecificationItemContainer { padding: 0 32px; } +} + +.flexRowContent--productSpecificationItemContainer { + border-width: 1px !important; +} +@media screen and (min-width: 1025px) { + .flexRowContent--productSpecificationItemContainer { + border: none; + } +} + +.flexRow--newsletter { + background-color: #000; + margin-top: 32px; +} +@media screen and (min-width: 769px) { + .flexRow--newsletter { + margin-top: 64px; + } +} +.flexRow--newsletter .flexRowContent--newsletter { + max-width: 774px; + margin: 0 auto; + padding: 64px 16px 32px; +} +@media screen and (min-width: 1025px) { + .flexRow--newsletter .flexRowContent--newsletter { + padding: 32px 0px 16px; + } +} + +.flexRowContent--newsletterInputs .stretchChildrenWidth:first-child { + flex-grow: 1; +} +.flexRowContent--newsletterInputs .stretchChildrenWidth:first-child :global(.vtex-input-prefix__group) { + border-radius: 0; + border: none; +} +.flexRowContent--newsletterInputs .stretchChildrenWidth:first-child :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + border-radius: 0; + background-color: #000; + padding-left: 0; + border-bottom: 1px solid #fff; +} +.flexRowContent--newsletterInputs :global(.vtex-store-newsletter-1-x-formSubmitContainer) :global(.vtex-button) { + position: relative; + border-radius: 0; + border: none; +} +.flexRowContent--newsletterInputs :global(.vtex-store-newsletter-1-x-formSubmitContainer) :global(.vtex-button)::before { + content: ""; + width: 100%; + height: 2px; + background-color: #fff; + position: absolute; + left: 0; + bottom: 0px; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index d8d05f8..d504530 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -26,6 +26,10 @@ display: none; } } +.element { + padding: 0; +} + .nameContainer { padding-top: 1rem; padding-bottom: 1rem; diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 94c2731..bfc527c 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -14,10 +14,18 @@ font-size: 20px; font-weight: 400; line-height: 38px; - color: #575757; + margin: 0 0 24px; } -@media screen and (min-width: 768px) { +@media screen and (min-width: 769px) { .container--productShelfTitle .heading { font-size: 24px; } +} + +.container--newsletterTitle .heading { + margin: 0; +} + +.container--newsletterSubtitle .paragraph { + margin: 16px; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index b86105f..085dfc7 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -43,9 +43,30 @@ width: 100%; padding: 0 40px; } +@media screen and (min-width: 1921px) { + .sliderLayoutContainer--productShelf { + width: 68.75%; + margin: 0 auto; + } +} + +.sliderTrackContainer--productShelf { + padding-bottom: 33px; +} +@media screen and (min-width: 769px) { + .sliderTrackContainer--productShelf { + padding-bottom: 41px; + } +} +@media screen and (min-width: 1025px) { + .sliderTrackContainer--productShelf { + padding-bottom: 49px; + } +} .paginationDotsContainer--productShelf { align-items: center; + margin: 0; } .paginationDot--productShelf { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5f4b698..049dd48 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -292,4 +292,14 @@ content: "Avise-se"; font-size: 14px; text-transform: uppercase; +} + +.productDescriptionTitle { + font-size: 20px; + line-height: 32px; +} +@media screen and (min-width: 1025px) { + .productDescriptionTitle { + font-size: 24px; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 0206316..4cef7a2 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -102,6 +102,7 @@ padding: 0 40px; } +.flexRowContent--productSpecificationItemContainer, .flexRowContent--productAvailability, .flexRowContent--productMain { @media screen and (max-width: 1024px) { @@ -171,3 +172,65 @@ padding: 0 32px; } } + +.flexRowContent--productSpecificationItemContainer { + border-width: 1px !important; + + @media screen and (min-width: 1025px) { + border: none; + } +} + +.flexRow--newsletter { + background-color: #000; + margin-top: 32px; + @media screen and (min-width: 769px) { + margin-top: 64px; + } + + .flexRowContent--newsletter { + max-width: 774px; + margin: 0 auto; + padding: 64px 16px 32px; + + @media screen and (min-width: 1025px) { + padding: 32px 0px 16px; + } + } +} + +.flexRowContent--newsletterInputs { + .stretchChildrenWidth:first-child { + flex-grow: 1; + + :global(.vtex-input-prefix__group) { + border-radius: 0; + border: none; + + :global(.vtex-styleguide-9-x-input) { + border-radius: 0; + background-color: #000; + padding-left: 0; + border-bottom: 1px solid #fff; + } + } + } + + :global(.vtex-store-newsletter-1-x-formSubmitContainer) { + :global(.vtex-button) { + position: relative; + border-radius: 0; + border: none; + + &::before { + content: ""; + width: 100%; + height: 2px; + background-color: #fff; + position: absolute; + left: 0; + bottom: 0px; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index b973a61..2a7f0e2 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -18,6 +18,10 @@ } } +.element { + padding: 0; +} + .nameContainer { padding-top: 1rem; padding-bottom: 1rem; diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index d2accd7..047614e 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -5,10 +5,22 @@ font-size: 20px; font-weight: 400; line-height: 38px; - color: #575757; + margin: 0 0 24px; - @media screen and (min-width: 768px) { + @media screen and (min-width: 769px) { font-size: 24px; } } } + +.container--newsletterTitle { + .heading { + margin: 0; + } +} + +.container--newsletterSubtitle { + .paragraph { + margin: 16px; + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index e4c1e34..c3ca3f9 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -33,10 +33,28 @@ .sliderLayoutContainer--productShelf { width: 100%; padding: 0 40px; + + @media screen and (min-width: 1921px) { + width: 68.75%; + margin: 0 auto; + } +} + +.sliderTrackContainer--productShelf { + padding-bottom: 33px; + + @media screen and (min-width: 769px) { + padding-bottom: 41px; + } + + @media screen and (min-width: 1025px) { + padding-bottom: 49px; + } } .paginationDotsContainer--productShelf { align-items: center; + margin: 0; } .paginationDot--productShelf { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 6a09377..0b1b735 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -329,3 +329,11 @@ } } } +.productDescriptionTitle { + font-size: 20px; + line-height: 32px; + + @media screen and (min-width: 1025px) { + font-size: 24px; + } +}