From 98436c3a5dfa45e25da8f66de7f85654943e6dba Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Sun, 5 Feb 2023 02:03:45 -0300
Subject: [PATCH] feat(description):finalizando description

---
 react/components/Html/styles.css           | 33 +++++++++++++-
 react/components/descriptions/Sections.tsx | 53 ++++++++++++++++++++++
 react/departaments.tsx                     |  3 ++
 store/blocks/pdp/product.jsonc             | 15 ++++--
 store/interfaces.json                      |  5 +-
 5 files changed, 103 insertions(+), 6 deletions(-)
 create mode 100644 react/components/descriptions/Sections.tsx
 create mode 100644 react/departaments.tsx

diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index a1efd0f..8b2419e 100644
--- a/react/components/Html/styles.css
+++ b/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;
+}
diff --git a/react/components/descriptions/Sections.tsx b/react/components/descriptions/Sections.tsx
new file mode 100644
index 0000000..df6f731
--- /dev/null
+++ b/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
diff --git a/react/departaments.tsx b/react/departaments.tsx
new file mode 100644
index 0000000..f740ed4
--- /dev/null
+++ b/react/departaments.tsx
@@ -0,0 +1,3 @@
+import Section from "./components/descriptions/Sections";
+
+export default Section;
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 05c822c..cf25548 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/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": {
diff --git a/store/interfaces.json b/store/interfaces.json
index 75f4496..a3fbe3f 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -2,7 +2,10 @@
   "example-component": {
     "component": "Example"
   },
-  
+  "departaments": {
+    "component": "departaments"
+  },
+
   "html": {
     "component": "html",
     "composition": "children"