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"