feat(pdp): Adiciona container de descricao

This commit is contained in:
Cainã Milech 2023-01-24 12:24:59 -03:00
parent 16f747874c
commit ef381b2880
7 changed files with 162 additions and 78 deletions

View File

@ -15,7 +15,6 @@
"postreleasy": "vtex publish --verbose"
},
"dependencies": {
"agenciamagma.store-theme": "5.x",
"vtex.store": "2.x",
"vtex.store-header": "2.x",
"vtex.product-summary": "2.x",

View File

@ -1,41 +1,54 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
import "./styles.css";
const CSS_HANDLES = ["html"] as const;
type HtmlProps = {
children?: ReactNode,
/**
* Qual tag Html que deseja que seja usar
*
* @default div
*/
tag?: keyof React.ReactHTML
/**
* Classes CSS extras que deseja adicionar.
* Feito para uso de [classes do tachyons](https://tachyons.io/)
*/
tachyonsClasses?: string
/**
* Se caso quiser usar esse componente
* para adicinar um texto simples
*/
text?: string
/**
* Tag ID para
*/
testId?: string
}
export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
const { handles } = useCssHandles(CSS_HANDLES);
const props = {
className: `${handles.html} ${classes}`,
"data-testid": testId
};
const Children = <>{children}{text}</>;
const Element = React.createElement(tag, props, Children);
return <>{Element}</>;
children?: ReactNode;
/**
* Qual tag Html que deseja que seja usar
*
* @default div
*/
tag?: keyof React.ReactHTML;
/**
* Classes CSS extras que deseja adicionar.
* Feito para uso de [classes do tachyons](https://tachyons.io/)
*/
tachyonsClasses?: string;
/**
* Se caso quiser usar esse componente
* para adicinar um texto simples
*/
text?: string;
/**
* Tag ID para
*/
testId?: string;
};
export const Html = ({
children = null,
tag = "div",
text = "",
tachyonsClasses: classes = "",
testId,
}: HtmlProps) => {
const { handles } = useCssHandles(CSS_HANDLES);
const props = {
className: `${handles.html} ${classes}`,
"data-testid": testId,
};
const Children = (
<>
{children}
{text}
</>
);
const Element = React.createElement(tag, props, Children);
return <>{Element}</>;
};

View File

@ -1,24 +1,24 @@
/*
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 */
.html--codigo {
[class*="html--codigo"] {
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: end;
}
.html--qtd-btn {
[class*="html--description-container"] {
display: grid;
grid-auto-flow: column;
margin-left: 40px;
margin-right: 40px;
gap: 32px;
}
[class*="html--qtd-btn"] {
display: flex;
height: 49px;
}
.html--qtd-btn :global(.vtex-button) {
[class*="html--qtd-btn"] :global(.vtex-button) {
background-color: #000000;
border: none;
font-style: normal;

View File

@ -4,7 +4,8 @@
/*"html#breadcrumb",*/
"breadcrumb#teste1",
"condition-layout.product#availability",
"flex-layout.row#description",
"html#description",
/*"flex-layout.row#description",*/
"flex-layout.row#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
@ -12,6 +13,24 @@
]
},
"html#description": {
"props": {
"tag": "section",
"testId": "description",
"blockClass": "description-container"
},
"children": ["html#description-image", "product-description"]
},
"html#description-image": {
"children": ["product-images#description"]
},
"product-images#description": {
"props": {
"displayMode": "first-image",
"blockClass": "description-imagem"
}
},
"breadcrumb#teste1": {
"props": {
"blockClass": "testebread",
@ -35,11 +54,11 @@
"text": "##### Product Specifications"
}
},
"flex-layout.row#description": {
"product-description": {
"props": {
"marginBottom": 7
},
"children": ["product-description"]
"marginBottom": 7,
"blockClass": "descricao"
}
},
"condition-layout.product#availability": {
"props": {
@ -101,7 +120,7 @@
"thumbnailMaxHeight": 90,
"thumbnailsOrientation": "horizontal",
"aspectRatio": {
"desktop": "auto",
"desktop": "1:1",
"phone": "16:9"
},
"displayThumbnailsArrows": false

View File

@ -28,6 +28,7 @@
.thumbImg {
height: 90px;
max-width: 90px;
border-radius: 8px;
}
.carouselThumbBorder {
@ -140,7 +141,12 @@
}
.diagonalCross--skus {
height: 20px;
transform: rotate(80deg);
background-image: linear-gradient(to top right, transparent 44%, #d5d5d5 48%, transparent 52%);
max-width: 28px;
max-height: 30px;
left: 6px;
top: 3px;
}
.skuSelectorSelectorImageValue {
@ -205,3 +211,32 @@
line-height: 19px;
color: #fff;
}
.productDescriptionContainer--descricao {
display: flex;
justify-content: left;
flex-direction: column;
}
.container--descricao {
margin: 0;
}
.productDescriptionTitle--descricao {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
margin-bottom: 8px;
}
.content--descricao {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.content--description-imagem {
border: 1px solid red;
}

View File

@ -1,22 +0,0 @@
.html--codigo {
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: end;
}
.html--qtd-btn {
display: flex;
height: 49px;
:global(.vtex-button) {
background-color: $color-black-100;
border: none;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #ffffff;
border-radius: 0%;
}
}

View File

@ -20,6 +20,7 @@
.thumbImg {
height: 90px;
max-width: 90px;
border-radius: 8px;
}
.carouselThumbBorder {
@ -146,7 +147,17 @@
}
.diagonalCross--skus {
height: 20px;
transform: rotate(80deg);
background-image: linear-gradient(
to top right,
transparent 44%,
#d5d5d5 48%,
transparent 52%
);
max-width: 28px;
max-height: 30px;
left: 6px;
top: 3px;
}
.skuSelectorSelectorImageValue {
@ -223,3 +234,32 @@
}
}
}
//DESCRIÇÃO
.productDescriptionContainer--descricao {
display: flex;
justify-content: left;
flex-direction: column;
}
.container--descricao {
margin: 0;
}
.productDescriptionTitle--descricao {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: $color-gray8;
margin-bottom: 8px;
}
.content--descricao {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $color-gray6;
}
.content--description-imagem {
border: 1px solid red;
}