feat: parte funcional do description

react/components/Html/index.tsx

@@ -1,6 +1,8 @@
 import React, { ReactNode } from "react";
 import { useCssHandles } from "vtex.css-handles";
 
+import "./styles.css";
+
 const CSS_HANDLES = ["html"] as const;
 
 type HtmlProps = {

react/components/Html/styles.css

@@ -0,0 +1,3 @@
+  [class*="html--pdp-breadcrumb"] {
+    background-color: #fff;
+  }

store/blocks/pdp/product.jsonc

@@ -3,9 +3,13 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
-      "flex-layout.row#specifications-title",
-      "product-specification-group#table",
+      "tab-layout#product",
+
+      
+      // "flex-layout.row#description",
+      // "flex-layout.row#specifications-title",
+      // "product-specification-group#table",
+
       "shelf.relatedProducts",
       "product-questions-and-answers"
     ]
@@ -26,12 +30,6 @@
       "text": "##### Product Specifications"
     }
   },
-  "flex-layout.row#description": {
-    "props": {
-      "marginBottom": 7
-    },
-    "children": ["product-description"]
-  },
   "condition-layout.product#availability": {
     "props": {
       "conditions": [
@@ -53,14 +51,9 @@
       "paddingTop": 7,
       "paddingBottom": 7
     },
-    "children": [
-      "flex-layout.col#stack",
-      "flex-layout.col#right-col"
-    ]
+    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
   },
   
-
-
   "stack-layout": {
     "props": {
       "blockClass": "product"
@@ -89,12 +82,8 @@
     }
   },
   
-
-  
   "flex-layout.row#product-image": {
-    "props":{
-
-    },
+    "props": {},
     "children": ["product-images"]
   },
   
@@ -122,8 +111,8 @@
       "flex-layout.row#product-name",
       "flex-layout.row#product-modelo",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
+      "flex-layout.row#list-price-savings",
       "product-installments",
       // "product-separator",
       "sku-selector",
@@ -208,5 +197,90 @@
         "Pinterest": true
       }
     }
+  },
+  
+  "tab-layout#product": {
+    "children": ["tab-list#product", "tab-content#product"],
+    "props": {
+      "blockClass": "product",
+      "defaultActiveTabId": "product1"
+    }
+  },
+  "tab-list#product": {
+    "children": ["tab-list.item#product1", "tab-list.item#product2", "tab-list.item#product3", "tab-list.item#product4"]
+  },
+  "tab-list.item#product1": {
+    "props": {
+      "tabId": "product1",
+      "label": "Descrição 1",
+      "defaultActiveTab": true
+    }
+  },
+  "tab-list.item#product2": {
+    "props": {
+      "tabId": "product2",
+      "label": "Descrição 2"
+    }
+  },
+  "tab-list.item#product3": {
+    "props": {
+      "tabId": "product3",
+      "label": "Descrição 3"
+    }
+  },
+  "tab-list.item#product4": {
+    "props": {
+      "tabId": "product4",
+      "label": "Descrição 4"
+    }
+  },
+  "tab-content#product": {
+    "children": ["tab-content.item#product1", "tab-content.item#product2", "tab-content.item#product3","tab-content.item#product4"]
+  },
+  "tab-content.item#product1": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "product1"
+    }
+  },
+  "tab-content.item#product2": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "product2"
+    }
+  },
+  "tab-content.item#product3": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "product3"
+    }
+  },
+  "tab-content.item#product4": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "product4"
+    }
+  },
+
+  "flex-layout.col#divImgDescription":{
+    "props":{
+      "blockClass":"divImgDescription",
+      "width":"50%"
+    },
+    "children":["image#imgDescription"]
+
+  },
+
+  "image#imgDescription": {
+    "props": {
+      "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-600-auto?v=637781133812700000&width=600&height=auto&aspect=true 600w,https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true 800w,https://agenciamagma.vtexassets.com/arquivos/ids/164491-1200-auto?v=637781133812700000&width=1200&height=auto&aspect=true 1200w",
+      "blockClass":"imgDescription" 
+    }
+  },
+  "flex-layout.row#description": {
+    "props": {
+      "marginBottom": 7
+    },
+    "children": ["flex-layout.col#divImgDescription" , "product-description"]
   }
 }

styles/css/agenciamagma.store-theme.css

@@ -1,16 +0,0 @@
-/*
-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 */
-.html {
-  background-color: red;
-}
-
-.html--pdp-breadcrumb {
-  background-color: #fff;
-}

styles/sass/pages/product/agenciamagma.store-theme.scss

@@ -1,8 +0,0 @@
-.html {
-  background-color: red;
-}
-
-.html--pdp-breadcrumb {
-  background-color: $color-white;
-}
-