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..7319e12 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 "./style.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/style.css b/react/components/Html/style.css new file mode 100644 index 0000000..5f7e589 --- /dev/null +++ b/react/components/Html/style.css @@ -0,0 +1,104 @@ +[class*="vtex-store-components-3-x-productImageTag--main"] { + max-height: 900px !important; +} + +.html--pdp-breadcrumb { + margin: 0 40px; +} + + +/*buy-button*/ +/* [class*="flexRowContent--btn-product"] button { + background-color: black; + border-color: black; + max-width: 526px; + width: 100%; + height: 49px; + display: flex; + border-radius: 0px; + +} + +[class*="flexRowContent--btn-product"] button:hover { + background-color: rgb(41, 41, 41); + border-color: black; +} + +[class*="flexRowContent--btn-product"] button span { + font-size: 0px; +} + +[class*="flexRowContent--btn-product"] button span::after { + content: "ADICIONAR À SACOLA"; + font-size: 14px; + font-family: "Open Sans", sans-serif; +} */ + +[class*="pix-container"] { + display: flex; + align-items: center; + margin: 10px 0; +} + +[class*="pix_price-container"] { + display: flex; + flex-direction: column; + margin-left: 20px; + color: gray; + font-weight: bold; +} + +[class*="pix_discount-container"] { + font-weight: normal; +} + +/*Cep-link*/ + +[class*="vtex-address-form__postalCode-forgottenURL"] a { + color: black; +} + +[class*="vtex-address-form__postalCode-forgottenURL"] a:hover { + color: black; +} + +[class*="vtex-address-form__postalCode-forgottenURL"] span { + display: none; +} + +/*Description*/ +[class*="vtex-tab-layout-0-x-listItem"] { + margin: 0; + padding: 0; +} + +[class*="vtex-tab-layout-0-x-listItem"] button { + color: gray; + text-transform: capitalize; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + +} + +[class*="vtex-tab-layout-0-x-listItem"] button:hover { + color: black; + border-bottom: 2px solid black; + background-color: white; + border-radius: 0; +} + +[class*="vtex-tab-layout-0-x-listItemActive"] button { + color: black; + background-color: white; + border: none; + border-bottom: 2px solid black; + border-radius: 0; +} + +[class*="vtex-tab-layout-0-x-listItemActive"] button:hover { + background-color: white; + border-bottom: 4px solid black; + color: black; +} \ No newline at end of file