cainamilech/challenge-vtex-io-caina
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(pdp): Adiciona tab layout

Browse Source
This commit is contained in:
Cainã Milech 2023-01-24 17:51:49 -03:00
parent f8f8ca89ad
commit 7044a3e32b
4 changed files with 172 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
react/components/Html/styles.css
View File

@ -8,8 +8,8 @@
[class*="html--description-container"] { [class*="html--description-container"] {
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
margin-left: 40px; margin-left: 72px;
margin-right: 40px; margin-right: 72px;
gap: 32px; gap: 32px;
} }

61
store/blocks/pdp/product.jsonc
View File

@ -4,7 +4,8 @@
/*"html#breadcrumb",*/ /*"html#breadcrumb",*/
"breadcrumb#teste1", "breadcrumb#teste1",
"condition-layout.product#availability", "condition-layout.product#availability",
"html#description", "tab-layout#details",
/*"html#description",*/
/*"flex-layout.row#description",*/ /*"flex-layout.row#description",*/
"flex-layout.row#specifications-title", "flex-layout.row#specifications-title",
"product-specification-group#table", "product-specification-group#table",
@ -13,6 +14,64 @@
] ]
}, },
"tab-layout#details": {
"children": ["tab-list#details", "tab-content#details"],
"props": {
"blockClass": "details",
"defaultActiveTabId": "details1"
}
},
"tab-list#details": {
"children": [
"tab-list.item#details1",
"tab-list.item#details2",
"tab-list.item#details3",
"tab-list.item#details4",
"tab-list.item#details5"
]
},
"tab-list.item#details1": {
"props": {
"tabId": "details1",
"label": "Descrição",
"blockClass": "descricao",
"defaultActiveTab": true
}
},
"tab-list.item#details2": {
"props": {
"tabId": "details2",
"label": "Descrição"
}
},
"tab-list.item#details3": {
"props": {
"tabId": "details3",
"label": "Descrição"
}
},
"tab-list.item#details4": {
"props": {
"tabId": "details4",
"label": "Descrição"
}
},
"tab-list.item#details5": {
"props": {
"tabId": "details5",
"label": "Descrição"
}
},
"tab-content#details": {
"children": ["tab-content.item#details1"]
},
"tab-content.item#details1": {
"children": ["html#description"],
"props": {
"tabId": "details1"
}
},
"html#description": { "html#description": {
"props": { "props": {
"tag": "section", "tag": "section",

57
styles/css/vtex.tab-layout.css Normal file
View File

@ -0,0 +1,57 @@
/*
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 */
.listContainer {
border-bottom: 1px solid gray;
margin-bottom: 32px;
padding-left: 64px;
padding-right: 64px;
margin-left: 40px;
margin-right: 40px;
display: flex;
justify-content: space-between;
align-items: end;
}
.listItem {
background-color: transparent;
padding: 0;
margin: 0;
height: 42px;
}
.listItem :global(.vtex-button) {
background-color: transparent;
cursor: pointer;
}
.listItem :global(.vtex-button) {
background-color: transparent;
}
.listItem :global(.vtex-button__label) {
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #bfbfbf;
text-transform: capitalize;
margin: 0;
padding: 0;
}
.listItemActive {
border-bottom: 2px solid #000000;
}
.listItemActive--descricao :global(.vtex-button) {
border: none;
border-radius: 0%;
}
.listItemActive--descricao :global(.vtex-button__label) {
color: #000000;
margin: 0;
padding: 0;
}

53
styles/sass/pages/product/vtex.tab-layout.scss Normal file
View File

@ -0,0 +1,53 @@
.listContainer {
border-bottom: 1px solid gray;
margin-bottom: 32px;
padding-left: 64px;
padding-right: 64px;
margin-left: 40px;
margin-right: 40px;
display: flex;
justify-content: space-between;
align-items: end;
}
.listItem {
background-color: transparent;
padding: 0;
margin: 0;
height: 42px;
:global(.vtex-button) {
background-color: transparent;
cursor: pointer;
}
:global(.vtex-button) {
background-color: transparent;
}
:global(.vtex-button__label) {
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #bfbfbf;
text-transform: capitalize;
margin: 0;
padding: 0;
}
}
.listItemActive {
border-bottom: 2px solid $color-black-100;
}
.listItemActive--descricao {
:global(.vtex-button) {
border: none;
border-radius: 0%;
}
:global(.vtex-button__label) {
color: $color-black-100;
margin: 0;
padding: 0;
}
}