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 (
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+ )
+}
+
+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"