From 279b673fbb517475d46aecab40b24b180381f03b Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 8 Feb 2023 01:00:20 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20cria=20e=20estiliza=20os=20blocos=20da?= =?UTF-8?q?=20descri=C3=A7=C3=A3o=20do=20produto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 47 ++++- store/blocks/pdp/product.jsonc | 163 ++++++++++++++++-- styles/css/vtex.breadcrumb.css | 2 +- styles/css/vtex.store-components.css | 42 +++-- styles/css/vtex.tab-layout.css | 80 +++++++++ .../sass/pages/product/vtex.breadcrumb.scss | 2 +- .../pages/product/vtex.store-components.scss | 44 +++-- .../sass/pages/product/vtex.tab-layout.scss | 69 ++++++++ 8 files changed, 402 insertions(+), 47 deletions(-) create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index f6dd5d4..f1004bc 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -13,8 +13,8 @@ @media screen and (min-width: 1920px) { [class*="html--product-main"], [class*="html--product-availability"] { - width: 71.2%; - grid-template-columns: 50.5% 49.5%; + width: 71.875%; + grid-template-columns: 50% 50%; } } @media screen and (max-width: 1024px) { @@ -165,6 +165,45 @@ } [class*="html--description"] { - position: relative; - top: 9px; + width: 100%; + margin-left: 32px; +} + +[class*="html--product-description"] { + display: flex; +} + +[class*="html--product-description"] .contentItem{ + display: flex; + flex-direction: row; +} + +[class*="html--product-description"] button { + font-weight: 400; + font-size: 18px; + line-height: 38px; + background-color: transparent; + border: transparent; + color: #BFBFBF; + height: 38px; +} +[class*="html--product-description"] button:hover { + border: transparent; + background-color: transparent; + color: #929292; + + transform: translateY(1px); +} + +[class*="html--description2"] h2::after { + content: " 2"; +} +[class*="html--description3"] h2::after { + content: " 3"; +} +[class*="html--description4"] h2::after { + content: " 4"; +} +[class*="html--description5"] h2::after { + content: " 5"; } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 81ea377..d6657d4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "html#description", + "html#product-description", //"html#specifications-title", //"product-specification-group#table", "shelf.relatedProducts", @@ -20,17 +20,25 @@ "children": ["breadcrumb"] }, - "html#specifications-title": { - "props": { - "tag": "div", - "blockClass": "specifications-title" - }, - "children": ["rich-text#specifications"] - }, + //"html#specifications-title": { + // "props": { + // "tag": "div", + // "blockClass": "specifications-title" + // }, + // "children": ["rich-text#specifications"] + //}, - "rich-text#specifications": { + //"rich-text#specifications": { + // "props": { + // "text": "##### Product Specifications" + // } + //}, + + "product-images#description": { "props": { - "text": "##### Product Specifications" + "blockClass": "image-description", + "aspectRatio": "1:1", + "displayMode": "first-image" } }, @@ -41,6 +49,34 @@ }, "children": ["product-description"] }, + "html#description2": { + "props": { + "tag": "div", + "blockClass": "description2" + }, + "children": ["product-description"] + }, + "html#description3": { + "props": { + "tag": "div", + "blockClass": "description3" + }, + "children": ["product-description"] + }, + "html#description4": { + "props": { + "tag": "div", + "blockClass": "description4" + }, + "children": ["product-description"] + }, + "html#description5": { + "props": { + "tag": "div", + "blockClass": "description5" + }, + "children": ["product-description"] + }, "condition-layout.product#availability": { "props": { @@ -269,5 +305,112 @@ "Pinterest": true } } + }, + + "html#product-description": { + "props": { + "blockClass": "product-description", + "tag": "section", + "testId": "product-description" + }, + "children": ["tab-layout#product"] + }, + + "tab-layout#product": { + "props": { + "defaultActiveTabId": "product1", + "blockClass": "product" + }, + "children": ["tab-list#product", "tab-content#product"] + }, + + "tab-list#product": { + "props": { + "blockClass": "list-product" + }, + "children": [ + "tab-list.item#product1", + "tab-list.item#product2", + "tab-list.item#product3", + "tab-list.item#product4", + "tab-list.item#product5" + ] + }, + + "tab-list.item#product1": { + "props": { + "tabId": "product1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#product2": { + "props": { + "tabId": "product2", + "label": "Descrição 2" + } + }, + "tab-list.item#product3": { + "props": { + "tabId": "product3", + "label": "Descrição 3" + } + }, + "tab-list.item#product4": { + "props": { + "tabId": "product4", + "label": "Descrição 4" + } + }, + "tab-list.item#product5": { + "props": { + "tabId": "product5", + "label": "Descrição 5" + } + }, + + "tab-content#product": { + "props": { + "blockClass": "content-product" + }, + "children": [ + "tab-content.item#product1", + "tab-content.item#product2", + "tab-content.item#product3", + "tab-content.item#product4", + "tab-content.item#product5" + ] + }, + + "tab-content.item#product1": { + "props": { + "tabId": "product1" + }, + "children": ["product-images#description", "html#description"] + }, + "tab-content.item#product2": { + "props": { + "tabId": "product2" + }, + "children": ["product-images#description", "html#description2"] + }, + "tab-content.item#product3": { + "props": { + "tabId": "product3" + }, + "children": ["product-images#description", "html#description3"] + }, + "tab-content.item#product4": { + "props": { + "tabId": "product4" + }, + "children": ["product-images#description", "html#description4"] + }, + "tab-content.item#product5": { + "props": { + "tabId": "product5" + }, + "children": ["product-images#description", "html#description5"] } + } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index c46f445..51d64b7 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -14,7 +14,7 @@ } @media screen and (min-width: 1920px) { .container { - width: 71.2%; + width: 71.875%; } } @media screen and ((min-width: 769) and (max-width: 1024px)) { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 1fef91d..98c95e7 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -64,21 +64,6 @@ } } -/* -.productDescriptionTitle { - font-weight: 400; - font-size: 24px; - line-height: 32px; - color: #575757; -} - -.productDescriptionText { - font-weight: 400; - font-size: 16px; - line-height: 22px; - color: #929292; -} -*/ .skuSelectorNameContainer { margin: 0; } @@ -423,4 +408,31 @@ .subscriberContainer { width: 60.07%; +} + +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + height: 40px; + margin-bottom: 8px; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.listContainer--list-product { + display: flex; + justify-content: space-between; +} + +.productImageTag--image-description--main { + width: 100% !important; + margin: 0; + display: inline-block; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..c6007ff --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,80 @@ +/* +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 */ +/* Grid breakpoints */ +.contentItem { + display: flex; +} + +.listContainer--list-product { + width: 94.4444%; + justify-content: space-around; + margin-left: auto; + margin-right: auto; + border-bottom: 1px solid #BFBFBF; +} +@media screen and (min-width: 1920px) { + .listContainer--list-product { + width: 71.875%; + } +} +@media screen and ((min-width: 769) and (max-width: 1024px)) { + .listContainer--list-product { + width: 92.1875%; + } +} +@media screen and (max-width: 768px) { + .listContainer--list-product { + width: 79%; + } +} + +.contentContainer--content-product { + width: 90%; + margin-left: auto; + margin-right: auto; + padding-top: 32px; +} +@media screen and (min-width: 1920px) { + .contentContainer--content-product { + width: 69.375%; + } +} +@media screen and ((min-width: 769) and (max-width: 1024px)) { + .contentContainer--content-product { + width: 92.1875%; + } +} +@media screen and (max-width: 768px) { + .contentContainer--content-product { + width: 79%; + } +} + +.listItem { + margin: 0; + padding: 0; +} + +.listItemActive { + border-bottom: 2px solid #000000; +} +.listItemActive :last-child { + background-color: transparent; + color: #000000; + font-weight: 400; + font-size: 18px; + line-height: 38px; + padding-top: 0 !important; + padding-bottom: 0 !important; +} +.listItemActive :last-child:hover { + border-bottom: none; + color: #000000; + transform: none; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 9653a40..d9edce3 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -4,7 +4,7 @@ padding: 0 0 16px 0; @media screen and (min-width: 1920px) { - width: 71.2%; + width: 71.875%; } @media screen and ((min-width: 769) and (max-width: 1024px)) { width: 92.1875%; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7a85604..c5bd2de 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -52,22 +52,6 @@ } } -/* -.productDescriptionTitle { - font-weight: 400; - font-size: 24px; - line-height: 32px; - color: #575757; -} - -.productDescriptionText { - font-weight: 400; - font-size: 16px; - line-height: 22px; - color: #929292; -} -*/ - .skuSelectorNameContainer { margin: 0; } @@ -444,3 +428,31 @@ .subscriberContainer { width: 60.07%; } + +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + height: 40px; + margin-bottom: 8px; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + + + .listContainer--list-product { + display: flex; + justify-content: space-between; + } + + .productImageTag--image-description--main { + width: 100% !important; + margin: 0; + display: inline-block; + } 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..3f25a22 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,69 @@ +.contentItem { + display: flex; +} + +.listContainer--list-product{ + width: 94.4444%; + justify-content: space-around; + margin-left: auto; + margin-right: auto; + + border-bottom: 1px solid #BFBFBF; + + @media screen and (min-width: 1920px) { + width: 71.875%; + } + + @media screen and ((min-width: 769) and (max-width: 1024px)) { + width: 92.1875%; + } + + @media screen and (max-width: 768px) { + width: 79%; + } +} + +.contentContainer--content-product { + width: 90%; + margin-left: auto; + margin-right: auto; + + padding-top: 32px; + + @media screen and (min-width: 1920px) { + width: 69.375%; + } + + @media screen and ((min-width: 769) and (max-width: 1024px)) { + width: 92.1875%; + } + + @media screen and (max-width: 768px) { + width: 79%; + } +} + +.listItem { + margin: 0; + padding: 0; +} + +.listItemActive { + border-bottom: 2px solid #000000; + + :last-child { + background-color: transparent; + color: #000000; + font-weight: 400; + font-size: 18px; + line-height: 38px; + padding-top: 0 !important; + padding-bottom: 0 !important; + + &:hover { + border-bottom: none; + color: #000000; + transform: none; + } + } +}