From 07e48330d94433bf0af7dfd57be3fb016a6f3161 Mon Sep 17 00:00:00 2001 From: Izabela Balizardo Date: Sun, 29 Jan 2023 22:14:52 -0300 Subject: [PATCH] feat: Cria arquivo styles.css dentro do html --- manifest.json | 1 - react/components/Html/index.tsx | 80 +++++++++++++++----------- react/components/Html/styles.css | 26 +++++++++ store/blocks/home/deals.json | 20 ++----- store/blocks/home/home.jsonc | 5 +- store/blocks/pdp/product.jsonc | 2 +- styles/css/vtex.product-identifier.css | 15 +++++ styles/css/vtex.product-price.css | 2 + 8 files changed, 97 insertions(+), 54 deletions(-) create mode 100644 react/components/Html/styles.css 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..082c0f0 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,41 +1,53 @@ 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/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..b62b66c --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,26 @@ +* +{ + margin:0; +} + + +[class*="productNameContainer--quickview"] { + color: gray; + text-align: right; +} + +[class*="shareContainer"] { + display: none; +} + +[class*="shippingContainer"] { + display: flex; +} + +[class*="shippingContainer"] button { + margin-top: 20px; + width: 50px; + height: 50px; + background-color: black; + color: white; +} diff --git a/store/blocks/home/deals.json b/store/blocks/home/deals.json index 2473f98..a1e0292 100644 --- a/store/blocks/home/deals.json +++ b/store/blocks/home/deals.json @@ -12,10 +12,7 @@ }, "flex-layout.col#deals1": { - "children": [ - "image#deal1", - "rich-text#deal1" - ] + "children": ["image#deal1", "rich-text#deal1"] }, "image#deal1": { "props": { @@ -30,10 +27,7 @@ } }, "flex-layout.col#deals2": { - "children": [ - "image#deal2", - "rich-text#deal2" - ] + "children": ["image#deal2", "rich-text#deal2"] }, "image#deal2": { "props": { @@ -48,10 +42,7 @@ } }, "flex-layout.col#deals3": { - "children": [ - "image#deal3", - "rich-text#deal3" - ] + "children": ["image#deal3", "rich-text#deal3"] }, "image#deal3": { "props": { @@ -66,10 +57,7 @@ } }, "flex-layout.col#deals4": { - "children": [ - "image#deal4", - "rich-text#deal4" - ] + "children": ["image#deal4", "rich-text#deal4"] }, "image#deal4": { "props": { diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..e18de24 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,8 +2,9 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ + "example-component" + /* You can make references to blocks defined in other files. + * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */, "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..aa8e6d4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -101,12 +101,12 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", "product-separator", - "product-identifier.product", "sku-selector", "product-quantity", "product-assembly-options", diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..87de235 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,18 @@ .product-identifier--productReference { margin-bottom: 1rem; } + +.product-identifier--productReference { + margin-bottom: 1rem; + display: flex; + justify-content: right; + color: gray; +} + +.product-identifier__label { + display: none; +} + +.product-identifier__separator { + display: none; +} diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..36f2850 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -2,6 +2,7 @@ color: #727273; margin-bottom: .25rem; font-size: 1rem; + display: none; } .sellingPrice { @@ -22,6 +23,7 @@ .savings { font-weight: 500; color: #79B03A; + display:none; } .sellingPriceValue--summary {