feat: created styles for large devices

2023-02-06 12:35:24 -03:00 · 2023-02-06 12:35:24 -03:00 · 68cefb0c52
commit 68cefb0c52
parent 371c663c97
22 changed files with 358 additions and 20 deletions
--- a/.gitignore
+++ b/.gitignore
@ -38,3 +38,4 @@ react/package-lock.json

 # alternatives
 /.workspace
+/workspace
--- a/.vtexignore
+++ b/.vtexignore
@ -14,3 +14,5 @@ react/__tests__/**
 react/.babelrc
 react/.eslintrc
 react/setupTests.js
+workspace
+.workspace
--- 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",
--- a/react/components/PixCustomInstallments/_PixCustomInstallments.module.scss
+++ b/react/components/PixCustomInstallments/_PixCustomInstallments.module.scss
--- a/react/components/PixCustomInstallments/_PixCustomInstallments.ts
+++ b/react/components/PixCustomInstallments/_PixCustomInstallments.ts
--- a/react/components/PixCustomInstallments/index.ts
+++ b/react/components/PixCustomInstallments/index.ts
--- 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"
    ]
  },

--- a/store/blocks/newsletter.json
+++ 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"
+    }
+  }
+}
--- 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",
--- 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"]
  },
--- 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
    }
--- 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"
      },
--- 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;
@ -173,3 +175,60 @@
    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;
+}
--- 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;
--- 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;
+}
--- 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 {
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@ -293,3 +293,13 @@
  font-size: 14px;
  text-transform: uppercase;
 }
+
+.productDescriptionTitle {
+  font-size: 20px;
+  line-height: 32px;
+}
+@media screen and (min-width: 1025px) {
+  .productDescriptionTitle {
+    font-size: 24px;
+  }
+}
--- 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;
+      }
+    }
+  }
+}
--- 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;
--- 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;
+  }
+}
--- 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 {
--- 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;
+  }
+}