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){