diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index dbf2540..17d9bcc 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,11 +3,8 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", + "tab-layout#description", "flex-layout.row#shelf", - "product-specification-group#table", - "product-questions-and-answers" ] }, @@ -60,11 +57,107 @@ "text": "##### Product Specifications" } }, - "flex-layout.row#description": { + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], "props": { - "marginBottom": 7 - }, - "children": ["product-description"] + "blockClass": "description", + "defaultActiveTabId": "description1" + } + }, + + "tab-list#description": { + "children": [ + "tab-list.item#description1", + "tab-list.item#description2", + "tab-list.item#description3", + "tab-list.item#description4", + "tab-list.item#description5" + ] + }, + + "tab-list.item#description1": { + "props": { + "tabId": "description1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#description2": { + "props": { + "tabId": "description2", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description3": { + "props": { + "tabId": "description3", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description4": { + "props": { + "tabId": "description4", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description5": { + "props": { + "tabId": "description5", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#description1", + "tab-content.item#description2", + "tab-content.item#description3", + "tab-content.item#description4", + "tab-content.item#description5" + ] + }, + + "tab-content.item#description1": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description1" + } + }, + + "tab-content.item#description2": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description2" + } + }, + + "tab-content.item#description3": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description3" + } + }, + + "tab-content.item#description4": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description4" + } + }, + + "tab-content.item#description5": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description5" + } }, "condition-layout.product#availability": { "props": { diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..c1f9f02 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,10 @@ +/* +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@400;500;600;700&display=swap"); +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/iconpacks/description.txt b/styles/iconpacks/description.txt new file mode 100644 index 0000000..b89a32b --- /dev/null +++ b/styles/iconpacks/description.txt @@ -0,0 +1,102 @@ + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description", + "defaultActiveTabId": "description1" + } + }, + + "tab-list#description": { + "children": [ + "tab-list.item#description1", + "tab-list.item#description2", + "tab-list.item#description3", + "tab-list.item#description4", + "tab-list.item#description5" + ] + }, + + "tab-list.item#description1": { + "props": { + "tabId": "description1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#description2": { + "props": { + "tabId": "description2", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description3": { + "props": { + "tabId": "description3", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description4": { + "props": { + "tabId": "description4", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description5": { + "props": { + "tabId": "description5", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#description1", + "tab-content.item#description2", + "tab-content.item#description3", + "tab-content.item#description4", + "tab-content.item#description5" + ] + }, + + "tab-content.item#description1": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description1" + } + }, + + "tab-content.item#description2": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description2" + } + }, + + "tab-content.item#description3": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description3" + } + }, + + "tab-content.item#description4": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description4" + } + }, + + "tab-content.item#description5": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description5" + } + }, \ No newline at end of file diff --git a/styles/iconpacks/tab-layout.txt b/styles/iconpacks/tab-layout.txt new file mode 100644 index 0000000..5078643 --- /dev/null +++ b/styles/iconpacks/tab-layout.txt @@ -0,0 +1,83 @@ +.container--description { + margin: 16px 40px; + + .listContainer { + display: flex; + justify-content: space-around; + border-bottom: 1px solid #bfbfbf; + + .listItem { + padding: 0; + margin: 0; + + :global(.vtex-button) { + background: white; + border: none; + + font-family: "Open Sans", sans-serif; + font-size: 18px; + text-transform: none; + + color: #bfbfbf; + + :global(.vtex-button__label) { + padding: 0; + } + } + } + + .listItemActive { + border-bottom: 2px solid black; + + :global(.vtex-button) { + color: black; + } + } + } + + .contentContainer { + .contentItem { + display: flex; + + :global(.vtex-store-components-3-x-productImagesContainer) { + width: 100%; + height: 100%; + max-width: 632px; + max-height: 632px; + } + + :global(.vtex-store-components-3-x-productImagesGallerySlide) { + margin: 32px 32px 16px 32px; + } + + :global(.vtex-store-components-3-x-carouselGaleryThumbs) { + display: none; + } + + :global(.vtex-store-components-3-x-productDescriptionContainer) { + margin-top: 32px; + margin-left: 32px; + + :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-family: "Open Sans", sans-serif; + font-size: 24px; + line-height: 32px; + + color: #575757; + } + + :global(.vtex-store-components-3-x-productDescriptionText) { + font-family: "Open Sans", sans-serif; + font-size: 16px; + line-height: 22px; + + color: #929292; + } + + :global(.vtex-store-components-3-x-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..e69de29