diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index b88f85c..8b2419e 100644
--- a/react/components/Html/styles.css
+++ b/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;
}
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 1a76247..cf25548 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -1,10 +1,10 @@
{
"store.product": {
- "children": ["html#example-component",
- "html#breadcrumb",
- "condition-layout.product#availability",
- "html#departaments"
- ]
+ "children": [
+ "html#breadcrumb",
+ "condition-layout.product#availability",
+ "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,
- "thumbnailsOrientation": "horizontal"
+ "thumbnailVisibility": "hiden",
+ "displayMode": "first-image",
+ "zoomMode":"disabled"
}
},
"flex-layout.col#right-col": {
@@ -243,10 +255,10 @@
"share#default": {
"props": {
"social": {
- "Facebook": true,
- "WhatsApp": true,
+ "Facebook": false,
+ "WhatsApp": false,
"Twitter": false,
- "Pinterest": true
+ "Pinterest": false
}
}
}
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"