refactor: aplica mudanças no código

react/components/Html/styles.css

@@ -2,24 +2,48 @@
   background-color: #FFFFFF;
 }
 
+[class*="html--product-main"] {
+  width: 94.4444%;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 48.8% 51.2%;
+}
+
+[class*="html--stack"] {
+  grid-area: 1/1;
+}
+
+[class*="html--right-col"] {
+  grid-area: 1/2;
+  margin-left: 32px;
+}
+
+[class*="html--buy-button"] {
+  width: 100%;
+}
 
 [class*="html--add-to-cart-button"] button {
   background-color: #000000 !important;
   border: none;
-  width: 526px;
+  width: 100%;
   height: 49px;
-  padding: 12px 64px;
+  padding-top: 12px;
+  padding-bottom: 12px;
 }
 
 [class*="html--product-quantity-cart-button"] {
   display: flex;
   flex-direction: row;
-  gap: 10px;
   margin-bottom: 16px;
+  gap: 10px;
+
+  width: 100%;
+  height: 49px;
 }
 
 [class*="html--product-quantity-cart-button"] input{
   height: 49px;
+  width: 32px;
 
   font-weight: 400;
   font-size: 16px;

store/blocks/pdp/product-assembly.jsonc

@@ -3,7 +3,7 @@
     "props": {
       "position": "bottom"
     },
-    "children": ["flex-layout.row#buy-button"]
+    "children": ["html#buy-button"]
   },
   "product-assembly-options": {
     "children": [

store/blocks/pdp/product.jsonc

@@ -3,8 +3,8 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
+      "html#description",
-      "flex-layout.row#specifications-title",
+      "html#specifications-title",
       "product-specification-group#table",
       "shelf.relatedProducts",
       "product-questions-and-answers"
@@ -20,7 +20,11 @@
     "children": ["breadcrumb"]
   },
 
-  "flex-layout.row#specifications-title": {
+  "html#specifications-title": {
+    "props": {
+      "tag": "div",
+      "blockClass": "specifications-title"
+    },
     "children": ["rich-text#specifications"]
   },
 
@@ -30,9 +34,10 @@
     }
   },
 
-  "flex-layout.row#description": {
+  "html#description": {
     "props": {
-      "marginBottom": 7
+      "tag": "div",
+      "blockClass": "description"
     },
     "children": ["product-description"]
   },
@@ -44,21 +49,17 @@
           "subject": "isProductAvailable"
         }
       ],
-      "Then": "flex-layout.row#product-main",
+      "Then": "html#product-main",
-      "Else": "flex-layout.row#product-availability"
+      "Else": "html#product-availability"
     }
   },
 
-  "flex-layout.row#product-main": {
+  "html#product-main": {
     "props": {
-      "colGap": 7,
+      "tag": "section",
-      "rowGap": 7,
+      "blockClass": "product-main"
-      "marginTop": 4,
-      "marginBottom": 7,
-      "paddingTop": 7,
-      "paddingBottom": 7
     },
-    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
+    "children": ["html#stack", "html#right-col"]
   },
 
   "stack-layout": {
@@ -81,11 +82,12 @@
     }
   },
 
-  "flex-layout.col#stack": {
+  "html#stack": {
-    "children": ["stack-layout"],
     "props": {
-      "rowGap": 0
+      "tag": "section",
-    }
+      "blockClass": "stack"
+    },
+    "children": ["stack-layout"]
   },
 
   "html#product-image": {
@@ -124,28 +126,25 @@
     },
     "children": [
       "html#product-quantity",
-      "flex-layout.row#buy-button"
+      "html#buy-button"
     ]
   },
 
-  "flex-layout.col#right-col": {
+  "html#right-col": {
     "props": {
-      "preventVerticalStretch": true,
+      "tag": "section",
-      "rowGap": 0,
       "blockClass": "right-col"
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
       "product-identifier.product",
       "product-rating-summary",
       "flex-layout.row#selling-price",
       "product-installments#m3",
       "html#sku-selector-m3",
       "html#product-quantity-cart-button",
-      /*"html#product-quantity",*/
       "product-assembly-options",
       "product-gifts",
-      /*"flex-layout.row#buy-button",*/
       "availability-subscriber",
       "shipping-simulator",
       "share#default"
@@ -161,9 +160,10 @@
     }
   },
 
-  "flex-layout.row#product-name": {
+  "html#product-name": {
     "props": {
-      "marginBottom": 3
+      "tag": "div",
+      "blockClass": "product-name"
     },
     "children": ["vtex.store-components:product-name"]
   },
@@ -186,44 +186,42 @@
     "children": ["sku-selector"]
   },
 
-  "flex-layout.row#buy-button": {
+  "html#buy-button": {
     "props": {
-      "marginTop": 4,
+      "tag": "div",
-      "marginBottom": 7
+      "blockClass": "buy-button"
     },
     "children": ["html#add-to-cart-button"]
   },
 
-  "flex-layout.row#product-availability": {
+  "html#product-availability": {
     "props": {
-      "colGap": 7,
+      "tag": "div",
-      "marginTop": 4,
+      "blockClass": "product-availability"
-      "marginBottom": 7,
-      "paddingTop": 7
     },
     "children": [
-      "flex-layout.col#stack",
+      "html#stack",
-      "flex-layout.col#right-col-availability"
+      "html#right-col-availability"
     ]
   },
 
-  "flex-layout.col#right-col-availability": {
+  "html#right-col-availability": {
     "props": {
-      "preventVerticalStretch": true,
+      "blockClass": "info-availability",
-      "rowGap": 0,
+      "tag": "div"
-      "blockClass": "info-availability"
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
       "product-identifier.product",
       "html#sku-selector-m3",
-      "flex-layout.row#availability"
+      "html#availability"
     ]
   },
 
-  "flex-layout.row#availability": {
+  "html#availability": {
     "props": {
-      "blockClass": "message-availability"
+      "blockClass": "message-availability",
+      "tag": "div"
     },
     "children": ["availability-subscriber"]
   },

styles/css/vtex.breadcrumb.css

@@ -8,8 +8,9 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .container {
-  padding: 0 40px;
+  width: 94.4444%;
-  margin-bottom: 16px;
+  margin: 0 auto 16px;
+  padding: 0;
 }
 .container .homeIcon {
   display: none;

styles/css/vtex.flex-layout.css

@@ -12,7 +12,3 @@
   padding-bottom: 0;
   margin: 0;
 }
-
-.stretchChildrenWidth {
-  width: 100% !important;
-}

styles/css/vtex.store-components.css

@@ -11,10 +11,6 @@
   background: red;
 }
 
-.container {
-  padding: 0 40px;
-}
-
 .thumbImg,
 .figure,
 .carouselThumbBorder {
@@ -28,6 +24,10 @@
   margin: 0 16px 0 0;
 }
 
+.carouselGaleryThumbs {
+  margin: 0 !important;
+}
+
 .productImageTag,
 .productImageTag--main {
   max-width: 100%;
@@ -35,36 +35,6 @@
   margin-bottom: 16px;
 }
 
-.carouselGaleryThumbs,
-.carouselGaleryCursor,
-.carouselContainer,
-.productImagesContainer,
-.productImagesContainer--carousel,
-.content {
-  max-width: 664px;
-  margin: 0;
-}
-@media screen and (min-width: 1920px) {
-  .carouselGaleryThumbs,
-  .carouselGaleryCursor,
-  .carouselContainer,
-  .productImagesContainer,
-  .productImagesContainer--carousel,
-  .content {
-    max-width: 904px;
-  }
-}
-@media screen and ((min-width: 1025px) and (max-width: 1200px)) {
-  .carouselGaleryThumbs,
-  .carouselGaleryCursor,
-  .carouselContainer,
-  .productImagesContainer,
-  .productImagesContainer--carousel,
-  .content {
-    max-width: 500px;
-  }
-}
-
 .productBrand--quickview {
   font-weight: 300;
   font-size: 20px;

styles/css/vtex.styleguide.css

@@ -0,0 +1,13 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.hideDecorators {
+  border-left: none;
+  border-right: none;
+}

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

@@ -1,6 +1,7 @@
 .container {
-  padding: 0 40px;
+  width: 94.4444%;
-  margin-bottom: 16px;
+  margin: 0 auto 16px;
+  padding: 0;
 
   .homeIcon {
     display: none;

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

@@ -3,7 +3,3 @@
   padding-bottom: 0;
   margin: 0;
 }
-
-.stretchChildrenWidth {
-  width: 100% !important;
-}

styles/sass/pages/product/vtex.store-components.scss

@@ -2,10 +2,6 @@
     background: red;
 }
 
-.container {
-  padding: 0 40px;
-}
-
 .thumbImg,
 .figure,
 .carouselThumbBorder {
@@ -19,6 +15,10 @@
   margin: 0 16px 0 0;
 }
 
+.carouselGaleryThumbs {
+  margin: 0 !important;
+}
+
 .productImageTag,
 .productImageTag--main {
   max-width: 100%;
@@ -26,24 +26,6 @@
   margin-bottom: 16px;
 }
 
-.carouselGaleryThumbs,
-.carouselGaleryCursor,
-.carouselContainer,
-.productImagesContainer,
-.productImagesContainer--carousel,
-.content {
-  max-width: 664px;
-  margin: 0;
-
-  @media screen and (min-width: 1920px) {
-    max-width: 904px;
-  }
-
-  @media screen and ((min-width: 1025px) and (max-width: 1200px)) {
-    max-width: 500px;
-  }
-}
-
 .productBrand--quickview {
   font-weight: 300;
   font-size: 20px;

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

@@ -0,0 +1,4 @@
+.hideDecorators {
+  border-left: none;
+  border-right: none;
+}