diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 274237e..6eccf6d 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -65,6 +65,10 @@ } } @media screen and (max-width: 1024px) { + .html--pdp-descriptions :global(.vtex-store-components-3-x-container){ + border-bottom: 1px solid rgba(185, 185, 185, 1); + padding-bottom: 16px; + } .html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){ min-width: 296px; } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 21ea3bf..53f28ec 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,7 +10,11 @@ "tab-layout#pdp": { "children":[ "tab-list#pdp", - "tab-content#pdp" + "tab-content#pdp", + "tab-content#pdp2", + "tab-content#pdp3", + "tab-content#pdp4", + "tab-content#pdp5" ], "props": { "blockClass": "pdp-tabLayout", @@ -29,40 +33,102 @@ "blockClass": "pdp-tabSections" } }, - "tab-content#pdp":{ - + "tab-list.item#pdpsection1": { + "props": { + "tabId": "descrição1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#pdpsection2": { + "props": { + "tabId": "descrição2", + "label": "Descrição" + } + }, + "tab-list.item#pdpsection3": { + "props": { + "tabId": "descrição3", + "label": "Descrição" + } + }, + "tab-list.item#pdpsection4": { + "props": { + "tabId": "descrição4", + "label": "Descrição" + } + }, + "tab-list.item#pdpsection5": { + "props": { + "tabId": "descrição5", + "label": "Descrição" + } + }, + "tab-content.item#descriptionpdp":{ + "children":[ + "html#description" + ], + "props": { + "tabId": "descrição1" + } + }, + "tab-content#pdp":{ + "children":[ + "tab-content.item#descriptionpdp" + ] + }, + "tab-content.item#descriptionpdp2":{ + "children":[ + "html#description" + ], + "props": { + "tabId": "descrição2" + } + }, + "tab-content#pdp2":{ + "children":[ + "tab-content.item#descriptionpdp2" + ] + }, + "tab-content.item#descriptionpdp3":{ + "children":[ + "html#description" + ], + "props": { + "tabId": "descrição3" + } + }, + "tab-content#pdp3":{ + "children":[ + "tab-content.item#descriptionpdp3" + ] + }, + "tab-content.item#descriptionpdp4":{ + "children":[ + "html#description" + ], + "props": { + "tabId": "descrição4" + } + }, + "tab-content#pdp4":{ + "children":[ + "tab-content.item#descriptionpdp4" + ] + }, + "tab-content.item#descriptionpdp5":{ + "children":[ + "html#description" + ], + "props": { + "tabId": "descrição5" + } + }, + "tab-content#pdp5":{ + "children":[ + "tab-content.item#descriptionpdp5" + ] }, -"tab-list.item#pdpsection1": { - "props": { - "tabId": "descrição1", - "label": "Descrição", - "defaultActiveTab": true - } -}, -"tab-list.item#pdpsection2": { - "props": { - "tabId": "descrição2", - "label": "Descrição" - } -}, -"tab-list.item#pdpsection3": { - "props": { - "tabId": "descrição3", - "label": "Descrição" - } -}, -"tab-list.item#pdpsection4": { - "props": { - "tabId": "descrição4", - "label": "Descrição" - } -}, -"tab-list.item#pdpsection5": { - "props": { - "tabId": "descrição5", - "label": "Descrição" - } -}, "html#prateleira": { "props": { "testId": "vtex-product-sumary" @@ -154,14 +220,7 @@ }, "children": ["breadcrumb"] }, - "html#example-component": { - "props": { - "tag": "nav", - "testId": "breadcrumbs", - "blockClass": "pdp-exemplo" - }, - "children": ["example-component"] - }, + "html#Sections": { "props": { "tag": "nav", diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index efe7a82..dfea842 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -24,6 +24,7 @@ } .listContainer--pdp-tabSections { + margin-bottom: 32px; justify-content: space-evenly; align-items: end; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 5083fec..8765e56 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -175,3 +175,4 @@ } } + diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 2dfd92e..86f9383 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -14,6 +14,7 @@ } }; .listContainer--pdp-tabSections{ + margin-bottom: 32px; justify-content: space-evenly; align-items: end; @media screen and (max-width: 1024px){