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"