From e88c2ab0b24650cb20b9f916c87f74b2d4aa9d0a Mon Sep 17 00:00:00 2001 From: Rallenson Date: Fri, 3 Feb 2023 18:38:36 -0300 Subject: [PATCH 1/3] feat(description):removendo thumnails da image-description --- store/blocks/pdp/product.jsonc | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 1a76247..f010fb8 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -131,7 +131,8 @@ "showNavigationArrows": false, "showPaginationDots": false, "displayThumbnailsArrows": false, - "thumbnailsOrientation": "horizontal" + "thumbnailVisibility":"hiden", + "displayMode": "first-image" } }, "flex-layout.col#right-col": { From d4670e2e112f76758fd7c41c2d406ba2b881ddb4 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sat, 4 Feb 2023 01:23:11 -0300 Subject: [PATCH 2/3] feat(Tab_layout):section description desktop feita --- react/components/Html/styles.css | 23 +++++++++++++++++++- store/blocks/pdp/product.jsonc | 36 +++++++++++++++++--------------- 2 files changed, 41 insertions(+), 18 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index b88f85c..a1efd0f 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,3 +1,24 @@ -[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; + margin-top: 32px; + margin-bottom: 16px; +} +.html--pdp-descriptions{ + display: flex; } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index f010fb8..05c822c 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": { @@ -33,9 +33,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,15 +86,17 @@ "testId": "description", "blockClass": "pdp-section_descriptions" }, - "children": ["example-component","html#description"] + "children": ["html#example-component","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": { @@ -125,14 +127,14 @@ "props": { "testid": "product-images", "aspectRatio": { - "desktop": "auto", + "desktop": "1:1", "phone": "auto" }, "showNavigationArrows": false, "showPaginationDots": false, - "displayThumbnailsArrows": false, - "thumbnailVisibility":"hiden", - "displayMode": "first-image" + "thumbnailVisibility": "hiden", + "displayMode": "first-image", + "zoomMode":"disabled" } }, "flex-layout.col#right-col": { @@ -244,10 +246,10 @@ "share#default": { "props": { "social": { - "Facebook": true, - "WhatsApp": true, + "Facebook": false, + "WhatsApp": false, "Twitter": false, - "Pinterest": true + "Pinterest": false } } } From 98436c3a5dfa45e25da8f66de7f85654943e6dba Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sun, 5 Feb 2023 02:03:45 -0300 Subject: [PATCH 3/3] 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 ( +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ ) +} + +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"