feat(pdp): Adiciona conteudos tablayout

react/components/Html/styles.css

@@ -6,13 +6,16 @@
 }
 
 [class*="html--description-container"] {
-  display: grid;
+  display: flex;
-  grid-auto-flow: column;
+  margin-left: 32px;
-  margin-left: 72px;
+  margin-right: 32px;
-  margin-right: 72px;
   gap: 32px;
 }
 
+[class*="html--image-container"] {
+  width: 50.18%;
+}
+
 [class*="html--qtd-btn"] {
   display: flex;
   height: 49px;

store/blocks/pdp/product.jsonc

@@ -90,7 +90,13 @@
     }
   },
   "tab-content#details": {
-    "children": ["tab-content.item#details1"]
+    "children": [
+      "tab-content.item#details1",
+      "tab-content.item#details2",
+      "tab-content.item#details3",
+      "tab-content.item#details4",
+      "tab-content.item#details5"
+    ]
   },
   "tab-content.item#details1": {
     "children": ["html#description"],
@@ -98,6 +104,30 @@
       "tabId": "details1"
     }
   },
+  "tab-content.item#details2": {
+    "children": ["html#description"],
+    "props": {
+      "tabId": "details2"
+    }
+  },
+  "tab-content.item#details3": {
+    "children": ["html#description"],
+    "props": {
+      "tabId": "details3"
+    }
+  },
+  "tab-content.item#details4": {
+    "children": ["html#description"],
+    "props": {
+      "tabId": "details4"
+    }
+  },
+  "tab-content.item#details5": {
+    "children": ["html#description"],
+    "props": {
+      "tabId": "details5"
+    }
+  },
 
   "html#description": {
     "props": {
@@ -108,6 +138,7 @@
     "children": ["html#description-image", "product-description"]
   },
   "html#description-image": {
+    "props": { "blockClass": "image-container" },
     "children": ["product-images#description"]
   },
   "product-images#description": {
@@ -161,10 +192,11 @@
   "flex-layout.row#product-main": {
     "props": {
       "colGap": 7,
-      "rowGap": 7,
+      /*"rowGap": 7,
       "marginTop": 5,
       "marginBottom": 7,
-      "paddingBottom": 7
+      "paddingBottom": 7*/
+      "blockClass": "containerteste"
     },
     "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
   },
@@ -192,7 +224,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "46%",
+      "width": "51%",
       "rowGap": 0
     }
   },
@@ -228,8 +260,8 @@
       /*"product-separator",*/
       "sku-selector",
       /*"product-quantity",*/
-      "product-assembly-options",
+      /*"product-assembly-options",*/
-      "product-gifts",
+      /*"product-gifts",*/
       /*"flex-layout.row#buy-button",*/
       "html#qtd-btn",
       "availability-subscriber",
@@ -296,9 +328,11 @@
   "flex-layout.row#product-availability": {
     "props": {
       "colGap": 7,
-      "marginTop": 4,
+      /*"rowGap": 7,
+      "marginTop": 5,
       "marginBottom": 7,
-      "paddingTop": 7
+      "paddingBottom": 7*/
+      "blockClass": "containerteste"
     },
     "children": [
       "flex-layout.col#stack",

styles/css/vtex.breadcrumb.css

@@ -29,10 +29,10 @@
   font-size: 14px;
   line-height: 19px;
 }
-.container--testebread .arrow--testebread--1 {
+.container--testebread .link--testebread--1 {
   font-size: 0;
 }
-.container--testebread .arrow--testebread--1::after {
+.container--testebread .link--testebread--1::after {
   content: "Sapatos";
   font-weight: 400;
   font-size: 14px;

styles/css/vtex.flex-layout.css

@@ -20,3 +20,8 @@
   color: #000000;
   margin: 0;
 }
+
+.flexRow--containerteste {
+  padding-left: 40px;
+  padding-right: 40px;
+}

styles/css/vtex.product-summary.css

@@ -11,6 +11,7 @@
   text-align: center;
   padding-top: 8px;
   padding-bottom: 8px;
+  min-height: 66px;
 }
 .nameContainer .productBrand {
   font-weight: 400;

styles/css/vtex.store-components.css

@@ -9,8 +9,7 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .container {
-  margin-left: 40px;
+  margin: 0;
-  margin-right: 40px;
   padding: 0;
 }
 
@@ -48,6 +47,10 @@
   margin-right: 16px;
 }
 
+.productImagesGallerySlide {
+  width: 100%;
+}
+
 /*:global(.vtex-store-components-3-x-productImageTag) {
   width: 664px;
   height: 664px;
@@ -302,6 +305,7 @@
   display: flex;
   justify-content: left;
   flex-direction: column;
+  width: 49.82%;
 }
 
 .container--descricao {
@@ -323,10 +327,6 @@
   color: #929292;
 }
 
-.content--description-imagem {
-  border: 1px solid red;
-}
-
 .subscriberContainer {
   position: relative;
 }

styles/css/vtex.tab-layout.css

@@ -7,15 +7,16 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.container--details {
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
 .listContainer {
   border-bottom: 1px solid #bfbfbf;
   margin-bottom: 32px;
-  padding-left: 64px;
-  padding-right: 64px;
-  margin-left: 40px;
-  margin-right: 40px;
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   align-items: end;
 }
 
@@ -31,6 +32,7 @@
 }
 .listItem :global(.vtex-button) {
   background-color: transparent;
+  border: none;
 }
 .listItem :global(.vtex-button__label) {
   font-weight: 400;
@@ -46,6 +48,9 @@
   border-bottom: 2px solid #000000;
 }
 
+.listItemActive--descricao {
+  border-bottom: 2px solid #000000;
+}
 .listItemActive--descricao :global(.vtex-button) {
   border: none;
   border-radius: 0%;

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

@@ -22,7 +22,7 @@
     }
   }
 
-  .arrow--testebread--1 {
+  .link--testebread--1 {
     font-size: 0;
 
     &::after {

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

@@ -11,3 +11,8 @@
   color: #000000;
   margin: 0;
 }
+
+.flexRow--containerteste {
+  padding-left: 40px;
+  padding-right: 40px;
+}

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

@@ -2,6 +2,7 @@
   text-align: center;
   padding-top: 8px;
   padding-bottom: 8px;
+  min-height: 66px;
 
   .productBrand {
     font-weight: 400;

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

@@ -1,6 +1,5 @@
 .container {
-  margin-left: 40px;
+  margin: 0;
-  margin-right: 40px;
   padding: 0;
 }
 
@@ -39,6 +38,10 @@
   margin-right: 16px;
 }
 
+.productImagesGallerySlide {
+  width: 100%;
+}
+
 /*:global(.vtex-store-components-3-x-productImageTag) {
   width: 664px;
   height: 664px;
@@ -349,6 +352,7 @@
   display: flex;
   justify-content: left;
   flex-direction: column;
+  width: 49.82%;
 }
 
 .container--descricao {
@@ -368,10 +372,6 @@
   color: $color-gray6;
 }
 
-.content--description-imagem {
-  border: 1px solid red;
-}
-
 //PRODUTO INDISPONIVEL
 .subscriberContainer {
   position: relative;

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

@@ -1,12 +1,14 @@
+.container--details {
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
 .listContainer {
   border-bottom: 1px solid $color-gray9;
   margin-bottom: 32px;
-  padding-left: 64px;
+
-  padding-right: 64px;
-  margin-left: 40px;
-  margin-right: 40px;
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   align-items: end;
 }
 
@@ -23,6 +25,7 @@
 
   :global(.vtex-button) {
     background-color: transparent;
+    border: none;
   }
 
   :global(.vtex-button__label) {
@@ -41,6 +44,7 @@
 }
 
 .listItemActive--descricao {
+  border-bottom: 2px solid $color-black-100;
   :global(.vtex-button) {
     border: none;
     border-radius: 0%;