react/components/Html/styles.css

@@ -16,9 +16,38 @@
 }
 .html--pdp-section_descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
   gap: 32px;
-  margin-top: 32px;
-  margin-bottom: 16px;
 }
 .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

@@ -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"]
@@ -86,7 +94,7 @@
       "testId": "description",
       "blockClass": "pdp-section_descriptions"
     },
-    "children": ["html#example-component","html#description"]
+    "children": ["html#Sections","html#description"]
   },
   "html#description": {
     "props": {
@@ -102,9 +110,10 @@
   "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": {

store/interfaces.json

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