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..7e71311 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,5 @@ +[class*="html--pdp-breadcrumb"] { + display: flex; + justify-content: center; + padding: 0 40px; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b0cdd95..8129c5d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -116,8 +116,7 @@ "product-identifier.product", "product-rating-summary", "flex-layout.row#selling-price", - // "product-installments", - "rich-text#product-installments", + "product-installments", "sku-selector", "product-gifts", "flex-layout.row#buy-button", @@ -141,14 +140,11 @@ } }, - // "product-installments": { - // "children": ["rich-text#product-installments"] - // }, - - "rich-text#product-installments": { + "product-installments": { "props": { - "text": "**36 x** de **R$ 2,17** sem juros", - "blockClass": "product-installments" + "markers": ["discount"], + "blockClass": "m3-custom-installments", + "message": "{installmentsNumber} x de {installmentValue} sem juros" } }, diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 779175f..be7bc35 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -6,7 +6,14 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": ["product-selling-price"] + "children": ["product-selling-price#summary"] + }, + + "product-selling-price#summary": { + "props": { + "blockClass": "summary", + "message": "{sellingPriceValue}" + } }, "flex-layout.row#list-price-savings": { diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 8a18de0..34c4328 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,9 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.html--pdp-breadcrumb { - display: flex; - justify-content: center; - padding: 0 40px; -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 6b5431c..1d6ef7b 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,3 +1,12 @@ +/* +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 */ .listPrice { color: #727273; margin-bottom: 0.25rem; @@ -35,7 +44,6 @@ border-radius: 1000px; align-items: center; display: flex; - padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.875rem; @@ -77,3 +85,30 @@ color: #ffffff; padding: 0.25rem 0.5rem 0.25rem 0.5rem; } + +.installments--m3-custom-installments { + font-style: normal; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.installmentsNumber--m3-custom-installments--36, +.installments-discount--m3-custom-installments, +.currencyCode--m3-custom-installments, +.currencyInteger--m3-custom-installments, +.currencyDecimal--m3-custom-installments, +.currencyFraction--m3-custom-installments { + font-weight: 700; +} + +.currencyCode--summary, +.currencyInteger--summary, +.currencyDecimal--summary, +.currencyFraction--summary { + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #292929; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3d3a2bf..385e033 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -127,7 +127,7 @@ height: 49px; position: absolute; left: 33.4%; - top: 32%; + top: 33%; background: #292929; border: none; border-radius: 0; diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index 235cd8b..fa44192 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,9 +1,3 @@ // .html { // background-color: red; // } - -.html--pdp-breadcrumb { - display: flex; - justify-content: center; - padding: 0 40px; -} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..7804407 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,106 @@ +.listPrice { + color: #727273; + margin-bottom: 0.25rem; + font-size: 1rem; +} + +.sellingPrice { + color: #3f3f40; + font-size: 1.25rem; +} + +.sellingPriceValue { + font-size: 2.25rem; + font-weight: 700; +} + +.installments { + color: #727273; + margin-bottom: 1rem; +} + +.savings { + font-weight: 500; + color: #79b03a; +} + +.sellingPriceValue--summary { + font-size: 1.25rem; + font-weight: 600; + color: #2e2e2e; +} + +.savings--summary { + background: #8bc34a; + border-radius: 1000px; + align-items: center; + display: flex; + + padding-left: 0.5rem; + padding-right: 0.5rem; + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #ffffff; +} + +.savings-discount--summary { + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #ffffff; + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.listPrice--summary { + margin-bottom: 0.25rem; + font-size: 0.875rem; +} + +.installments--summary { + margin-bottom: 2rem; + font-size: 0.875rem; +} + +.savings--summaryPercentage { + background: #0f3e99; + border-radius: 1000px; + align-items: center; + display: flex; +} + +.savingsPercentage--summaryPercentage { + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #ffffff; + padding: 0.25rem 0.5rem 0.25rem 0.5rem; +} + +.installments--m3-custom-installments { + font-style: normal; + font-size: 16px; + line-height: 22px; + color: $color-gray7; +} + +.installmentsNumber--m3-custom-installments--36, +.installments-discount--m3-custom-installments, +.currencyCode--m3-custom-installments, +.currencyInteger--m3-custom-installments, +.currencyDecimal--m3-custom-installments, +.currencyFraction--m3-custom-installments { + font-weight: 700; +} + +.currencyCode--summary, +.currencyInteger--summary, +.currencyDecimal--summary, +.currencyFraction--summary { + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: $color-black; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss deleted file mode 100644 index 4debf76..0000000 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ /dev/null @@ -1,3 +0,0 @@ -.paragraph--product-installments { - margin: 0; -} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 2c49b0b..f1559ba 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -130,7 +130,7 @@ height: 49px; position: absolute; left: 33.4%; - top: 32%; + top: 33%; background: $color-black; border: none; border-radius: 0; diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 033dd14..4632a04 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -8,6 +8,7 @@ $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; $color-gray6: #cccccc; +$color-gray7: #929292; $color-blue: #4267b2;