From ef381b2880e32df61327e81cd63eb31428a07db7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Tue, 24 Jan 2023 12:24:59 -0300 Subject: [PATCH] feat(pdp): Adiciona container de descricao --- manifest.json | 1 - react/components/Html/index.tsx | 81 +++++++++++-------- .../components/Html/styles.css | 26 +++--- store/blocks/pdp/product.jsonc | 31 +++++-- styles/css/vtex.store-components.css | 37 ++++++++- .../product/agenciamagma.store-theme.scss | 22 ----- .../pages/product/vtex.store-components.scss | 42 +++++++++- 7 files changed, 162 insertions(+), 78 deletions(-) rename styles/css/agenciamagma.store-theme.css => react/components/Html/styles.css (51%) delete mode 100644 styles/sass/pages/product/agenciamagma.store-theme.scss diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -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", diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..aa1a2ae 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -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}; }; diff --git a/styles/css/agenciamagma.store-theme.css b/react/components/Html/styles.css similarity index 51% rename from styles/css/agenciamagma.store-theme.css rename to react/components/Html/styles.css index 1d39b4b..153ac53 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/react/components/Html/styles.css @@ -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; @@ -27,4 +27,4 @@ line-height: 25px; color: #ffffff; border-radius: 0%; -} \ No newline at end of file +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b5be430..7ee68be 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -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 diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index dbc6bc1..f366abf 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -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 { @@ -204,4 +210,33 @@ font-size: 14px; 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; } \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss deleted file mode 100644 index 22a2421..0000000 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ /dev/null @@ -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%; - } -} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7a8d7e8..38bc6fd 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -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; +}