From 45a071299f135253a70830748dce7550a077f296 Mon Sep 17 00:00:00 2001 From: Saulo Klein Nery Date: Wed, 8 Feb 2023 22:26:59 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Cria=20descri=C3=A7=C3=A3o=20do=20produ?= =?UTF-8?q?to=20desktop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 114 ++++++++++++++++-- styles/css/vtex.store-components.css | 14 +++ styles/css/vtex.tab-layout.css | 44 +++++++ .../pages/product/vtex.store-components.scss | 17 +++ .../sass/pages/product/vtex.tab-layout.scss | 43 +++++++ styles/sass/utils/_vars.scss | 2 + 6 files changed, 226 insertions(+), 8 deletions(-) create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e04e728..cafa064 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,7 +4,7 @@ "html#breadcrumb", //"example-component", "condition-layout.product#availability", - "flex-layout.row#description", + "tab-layout", "flex-layout.row#specifications-title", "product-specification-group#table", "shelf.relatedProducts", @@ -27,12 +27,6 @@ "text": "##### Product Specifications" } }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["product-description"] - }, "condition-layout.product#availability": { "props": { "conditions": [ @@ -206,7 +200,7 @@ "blockClass": "message-availability" }, "children": ["availability-subscriber"] - } + }, // "share#default": { // "props": { @@ -218,4 +212,108 @@ // } // } // } + + "product-images#2": { + "props": { + "aspectRatio": { + "desktop": "auto", + "phone": "16:9" + }, + "displayMode": "first-image" + } + }, + + "tab-layout": { + "props": { + "blockClass": "tabLayout" + }, + "children": ["tab-list", "tab-content"] + }, + + "tab-list": { + "children": [ + "tab-list.item#1", + "tab-list.item#2", + "tab-list.item#3", + "tab-list.item#4", + "tab-list.item#5" + ] + }, + + "tab-content": { + "children": [ + "tab-content.item#1", + "tab-content.item#2", + "tab-content.item#3", + "tab-content.item#4", + "tab-content.item#5" + ] + }, + + "tab-list.item#1": { + "props": { + "tabId": "Desc1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#2": { + "props": { + "tabId": "Desc2", + "label": "Descrição" + } + }, + "tab-list.item#3": { + "props": { + "tabId": "Desc3", + "label": "Descrição" + } + }, + "tab-list.item#4": { + "props": { + "tabId": "Desc4", + "label": "Descrição" + } + }, + "tab-list.item#5": { + "props": { + "tabId": "Desc5", + "label": "Descrição" + } + }, + + "tab-content.item#1": { + "children": ["product-images#2", "product-description"], + "props": { + "tabId": "Desc1" + } + }, + + "tab-content.item#2": { + "children": ["product-images#2", "product-description"], + "props": { + "tabId": "Desc2" + } + }, + + "tab-content.item#3": { + "children": ["product-images#2", "product-description"], + "props": { + "tabId": "Desc3" + } + }, + + "tab-content.item#4": { + "children": ["product-images#2", "product-description"], + "props": { + "tabId": "Desc4" + } + }, + + "tab-content.item#5": { + "children": ["product-images#2", "product-description"], + "props": { + "tabId": "Desc5" + } + } } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 83caf62..237295e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,6 +9,20 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); /* Grid breakpoints */ +.productDescriptionContainer .productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + margin: 0 0 8px; +} +.productDescriptionContainer .productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + .container { padding: 0; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..a56aee7 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,44 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); +/* Grid breakpoints */ +.container--tabLayout { + padding: 0 40px; +} +.container--tabLayout .listContainer { + border-bottom: 1px solid #b9b9b9; + justify-content: space-evenly; +} +.container--tabLayout .listContainer .listItem { + margin: 0; + padding: 0; +} +.container--tabLayout .listContainer .listItem :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #bfbfbf; + text-transform: capitalize; +} +.container--tabLayout .listContainer .listItemActive { + border-bottom: 2px solid #000; +} +.container--tabLayout .listContainer .listItemActive :global(.vtex-button) { + background-color: transparent; + border: none; +} +.container--tabLayout .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + color: #000; +} +.container--tabLayout .contentContainer .contentItem { + display: grid; + grid-template-columns: repeat(2, 50%); + gap: 32px; + padding: 32px 32px 0; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 139ad93..9145579 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,20 @@ +.productDescriptionContainer { + .productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: $color-gray7; + margin: 0 0 8px; + } + + .productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: $color-gray6; + } +} + .container { padding: 0; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..3d4aa82 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,43 @@ +.container--tabLayout { + padding: 0 40px; + + .listContainer { + border-bottom: 1px solid $color-gray13; + justify-content: space-evenly; + + .listItem { + margin: 0; + padding: 0; + + :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: $color-gray14; + text-transform: capitalize; + } + } + + .listItemActive { + border-bottom: 2px solid $color-black2; + + :global(.vtex-button) { + background-color: transparent; + border: none; + + :global(.vtex-button__label) { + color: $color-black2; + } + } + } + } + + .contentContainer { + .contentItem { + display: grid; + grid-template-columns: repeat(2, 50%); + gap: 32px; + padding: 32px 32px 0; + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 3c4a196..c426205 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -18,6 +18,8 @@ $color-gray9: #989898; $color-gray10: #afafaf; $color-gray11: #d5d5d5; $color-gray12: #868686; +$color-gray13: #b9b9b9; +$color-gray14: #bfbfbf; $color-blue: #4267b2;