feat: created styles for large devices

.gitignore

@@ -38,3 +38,4 @@ react/package-lock.json
 
 # alternatives
 /.workspace
+/workspace

.vtexignore

@@ -14,3 +14,5 @@ react/__tests__/**
 react/.babelrc
 react/.eslintrc
 react/setupTests.js
+workspace
+.workspace

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",

store/blocks/home/home.jsonc

@@ -9,7 +9,7 @@
       "info-card#home",
       "rich-text#question",
       "rich-text#link",
-      "newsletter"
+      "flex-layout.row#newsletter"
     ]
   },
 

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"
+    }
+  }
+}

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",

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"]
   },

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,
+      "colGap": {
-      "rowGap": 7,
+        "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
     }

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",
+        "fontWeight": "400",
-        "fontSize": "2.25rem",
+        "fontSize": "1.5rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },

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;
+}

styles/css/vtex.product-summary.css

@@ -26,6 +26,10 @@
     display: none;
   }
 }
+.element {
+  padding: 0;
+}
+
 .nameContainer {
   padding-top: 1rem;
   padding-bottom: 1rem;

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;
+}

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 {

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;
+  }
+}

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;
+      }
+    }
+  }
+}

styles/sass/pages/product/vtex.product-summary.scss

@@ -18,6 +18,10 @@
   }
 }
 
+.element {
+  padding: 0;
+}
+
 .nameContainer {
   padding-top: 1rem;
   padding-bottom: 1rem;

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;
+  }
+}

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 {

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;
+  }
+}