From 10249e689351d43bf96dc831392a370a7dc9effd Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Wed, 1 Feb 2023 15:10:34 -0300 Subject: [PATCH] feat(pdp): estiliza titulo e identificador de produto --- manifest.json | 1 - react/components/Html/index.tsx | 81 ++++++++++++++----------- react/components/Html/styles.css | 73 ++++++++++++++++++++++ store/blocks/home/home.jsonc | 6 +- store/blocks/pdp/product-assembly.jsonc | 12 +--- store/blocks/pdp/product.jsonc | 10 ++- store/blocks/search.jsonc | 23 +++---- 7 files changed, 140 insertions(+), 66 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..fb857e6 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,41 +1,52 @@ 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..e9118a1 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,73 @@ +/* [class*="html--pdp-breadcrumb"] { + background: pink; +} */ + +/* [class*="productNameContainer--quickview"] { + color: pink; +} */ + +[class*="flex flex-grow-1 w-100 flex-column"] { + padding-left: 40px; + padding-right: 40px; +} + +[class*="productNameContainer--quickview"] { + text-align: right; + + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + + color: #575757; +} + +[class*="product-identifier__label"], +[class*="product-identifier__separator"] { + font-size: 0; + text-align: right; +} + +[class*="flexColChild"]:nth-of-type(2) { + text-align: right; + + font-weight: 400; + font-size: 14px; + line-height: 19px; +} + +[class*="flexColChild"]:nth-of-type(2) [class*="c-muted-1"] { + color: rgba(146, 146, 146, 0.48) !important; +} + +[class*="sellingPrice"] { + font-weight: 700; + font-size: 25px !important; + line-height: 38px; + + color: black !important; +} + +[class*="installments"] { + font-weight: 400; + font-size: 16px; + line-height: 22px; +} + +[class*="installmentsNumber"], +[class*="installmentValue"] { + font-weight: 700; +} + +[class*="skuSelectorName"], +[class*="skuSelectorNameSeparator"], +[class*="skuSelectorSelectorImageValue"] { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; +} + +/* [class*="skuSelectorTextContainer"] [class*="c-muted-1"] { + color: #929292; +} */ diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..ebacd49 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,9 +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. */ - "flex-layout.row#deals", + "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", "flex-layout.row#shelf", diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..f9e22eb 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -32,17 +32,13 @@ "props": { "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "flex-layout.col#product-assembly-image": { "props": { "marginRight": 4 }, - "children": [ - "assembly-option-item-image" - ] + "children": ["assembly-option-item-image"] }, "flex-layout.col#product-assembly-middle": { "props": { @@ -96,9 +92,7 @@ "horizontalAlign": "right", "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "assembly-option-item-customize#sec-level": { "props": { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..3bdfda4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -87,11 +87,15 @@ }, "product-images": { "props": { + "showPaginationDots": false, + "showNavigationArrows": false, "aspectRatio": { "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "maxHeight": "unset", + "thumbnailsOrientation": "horizontal", + "displayThumbnailsArrows": false } }, "flex-layout.col#right-col": { @@ -101,12 +105,12 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", - "flex-layout.row#list-price-savings", + // "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/store/blocks/search.jsonc b/store/blocks/search.jsonc index 22be941..735db90 100644 --- a/store/blocks/search.jsonc +++ b/store/blocks/search.jsonc @@ -108,7 +108,10 @@ } }, "flex-layout.row#searchinfo": { - "children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"] + "children": [ + "flex-layout.col#productCount", + "flex-layout.row#orderByAndSwitcher" + ] }, "flex-layout.row#orderByAndSwitcher": { "children": ["order-by.v2", "gallery-layout-switcher"], @@ -272,29 +275,19 @@ "props": { "name": "grid" }, - "children": [ - "icon-grid", - "responsive-layout.desktop#textOptionGrid" - ] + "children": ["icon-grid", "responsive-layout.desktop#textOptionGrid"] }, "gallery-layout-option#list": { "props": { "name": "list" }, - "children": [ - "icon-inline-grid", - "responsive-layout.desktop#textOptionList" - ] + "children": ["icon-inline-grid", "responsive-layout.desktop#textOptionList"] }, "responsive-layout.desktop#textOptionGrid": { - "children": [ - "rich-text#option-grid" - ] + "children": ["rich-text#option-grid"] }, "responsive-layout.desktop#textOptionList": { - "children": [ - "rich-text#option-list" - ] + "children": ["rich-text#option-list"] }, "rich-text#option-grid": { "props": {