Merge branch 'feature/description-departament' into desenvolvimento

react/components/Html/styles.css

@@ -1,3 +1,53 @@
-[class*=container--m3-product-breadcrumb]{
+/* [class*=html--pdp-breadcrumb]{
   background: blue;
+} */
+/* .html {
+  background-color: red;
+}
+
+.html--pdp-breadcrumb {
+  background-color: green;
+} */
+.html--pdp-section_descriptions{
+  display: flex;
+  flex-direction: column;
+  gap: 32;
+  padding: 0px 40px 0px 40px;
+}
+.html--pdp-section_descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
+  gap: 32px;
+}
+.html--pdp-descriptions{
+  display: flex;
+}
+.html--pdp-departamens{
+  background: transparent;
+  margin-top: 32px;
+  margin-bottom: 16px;
+}
+.html--pdp-departamens ul{
+  display: flex;
+  border-bottom: 1px solid rgba(185, 185, 185, 1);
+}
+.html--pdp-departamens div ul{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  list-style: none;
+  margin: 0;
+}
+.html--pdp-departamens div ul li button{
+  outline: none;
+  border: none;
+  background: transparent;
+  color: rgba(191, 191, 191, 1);
+  font-family: 'Open Sans',sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+}
+.html--pdp-departamens div ul li  :global(button.open){
+  color: #000000;
+  border-bottom: 1px solid #000000;
 }

react/components/descriptions/Sections.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+
+const Sections = () => {
+
+  const [activeSection, setActiveSection] = useState("descrição1");
+  const handleClick = (section:string) => {
+    setActiveSection(section);
+}
+  console.log(activeSection)
+  return (
+    <div>
+      <ul>
+        <li>
+          <button onClick={() => handleClick("descrição1")}
+          className={activeSection === "descrição1" ? "open" : "close"}
+          >
+            Descrição
+          </button>
+        </li>
+        <li>
+        <button onClick={() => handleClick("descrição2")}
+          className={activeSection === "descrição2" ? "open" : "close"}
+          >
+            Descrição
+          </button>
+        </li>
+        <li>
+        <button onClick={() => handleClick("descrição3")}
+          className={activeSection === "descrição3" ? "open" : "close"}
+          >
+            Descrição
+          </button>
+        </li>
+        <li>
+        <button onClick={() => handleClick("descrição4")}
+          className={activeSection === "descrição4" ? "open" : "close"}
+          >
+            Descrição
+          </button>
+        </li>
+        <li>
+        <button onClick={() => handleClick("descrição5")}
+          className={activeSection === "descrição5" ? "open" : "close"}
+          >
+            Descrição
+          </button>
+        </li>
+      </ul>
+    </div>
+  )
+}
+
+export default Sections

react/departaments.tsx

@@ -0,0 +1,3 @@
+import Section from "./components/descriptions/Sections";
+
+export default Section;

store/blocks/pdp/product.jsonc

@@ -1,10 +1,10 @@
 {
   "store.product": {
-    "children": ["html#example-component",
+    "children": [
-                  "html#breadcrumb",
+      "html#breadcrumb",
-                  "condition-layout.product#availability",
+      "condition-layout.product#availability",
-                  "html#departaments"
+      "html#departaments"
-                  ]
+    ]
   },
   "html#breadcrumb": {
     "props": {
@@ -22,6 +22,14 @@
     },
     "children": ["example-component"]
   },
+  "html#Sections": {
+    "props": {
+      "tag": "nav",
+      "testId": "departaments",
+      "blockClass": "pdp-departamens"
+    },
+    "children": ["departaments"]
+  },
 
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
@@ -33,9 +41,9 @@
   },
   "flex-layout.row#description": {
     "props": {
-      "marginBottom": 7
+      "width": "50%"
     },
-    "children": ["product-description"]
+    "children": ["product-images#description","product-description"]
   },
   "condition-layout.product#availability": {
     "props": {
@@ -86,23 +94,26 @@
       "testId": "description",
       "blockClass": "pdp-section_descriptions"
     },
-    "children": ["example-component","html#description"]
+    "children": ["html#Sections","html#description"]
   },
   "html#description": {
     "props": {
       "tag": "div",
       "testId": "description",
-      "blockClass": "pdp-section_descriptions"
+      "blockClass": "pdp-descriptions"
     },
-    "children": ["product-images#description","flex-layout.row#description"]
+    "children": [
+      "flex-layout.row#description"
+    ]
   },
 
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "46%",
       "rowGap": 10,
-      "blockClass": "StackLayout"
+      "width":"46%",
+      "blockClass": "StackLayout",
+      "htmlId":"teste"
     }
   },
   "flex-layout.row#product-image": {
@@ -125,13 +136,14 @@
     "props": {
       "testid": "product-images",
       "aspectRatio": {
-        "desktop": "auto",
+        "desktop": "1:1",
         "phone": "auto"
       },
       "showNavigationArrows": false,
       "showPaginationDots": false,
-      "displayThumbnailsArrows": false,
+      "thumbnailVisibility": "hiden",
-      "thumbnailsOrientation": "horizontal"
+      "displayMode": "first-image",
+      "zoomMode":"disabled"
     }
   },
   "flex-layout.col#right-col": {
@@ -243,10 +255,10 @@
   "share#default": {
     "props": {
       "social": {
-        "Facebook": true,
+        "Facebook": false,
-        "WhatsApp": true,
+        "WhatsApp": false,
         "Twitter": false,
-        "Pinterest": true
+        "Pinterest": false
       }
     }
   }

store/interfaces.json

@@ -2,7 +2,10 @@
   "example-component": {
     "component": "Example"
   },
-  
+  "departaments": {
+    "component": "departaments"
+  },
+
   "html": {
     "component": "html",
     "composition": "children"