feat: adiciona estrutura da description

This commit is contained in:
Naian Felix dos Santos 2023-02-07 17:43:57 -03:00
parent 129f489430
commit 892cce275b
5 changed files with 296 additions and 8 deletions

View File

@ -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": {

View File

@ -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 */

View File

@ -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"
}
},

View File

@ -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;
}
}
}
}
}