From 8191a31e48e7deca1381eb86e42809b20bfd9c8d Mon Sep 17 00:00:00 2001 From: MateusLopes Date: Fri, 3 Feb 2023 23:15:51 -0300 Subject: [PATCH] feat: add newsletter --- react/Newsletter.tsx | 3 ++ react/components/Newsletter/Newsletter.tsx | 17 +++++++ react/components/Newsletter/styles.css | 45 +++++++++++++++++++ react/index.d.ts | 7 +++ react/tsconfig.json | 12 +++-- store/blocks/pdp/product.jsonc | 15 +++++-- store/blocks/product-price.jsonc | 9 ++-- store/interfaces.json | 3 ++ styles/configs/style.json | 26 +++++------ styles/css/vtex.breadcrumb.css | 1 + styles/css/vtex.flex-layout.css | 2 +- styles/css/vtex.product-identifier.css | 7 +++ styles/css/vtex.store-components.css | 40 ++++++++++++++++- .../pages/product/vtex.store-components.scss | 6 +-- 14 files changed, 165 insertions(+), 28 deletions(-) create mode 100644 react/Newsletter.tsx create mode 100644 react/components/Newsletter/Newsletter.tsx create mode 100644 react/components/Newsletter/styles.css create mode 100644 react/index.d.ts diff --git a/react/Newsletter.tsx b/react/Newsletter.tsx new file mode 100644 index 0000000..a5771bd --- /dev/null +++ b/react/Newsletter.tsx @@ -0,0 +1,3 @@ +import Newsletter from './components/Newsletter/Newsletter'; + +export default Newsletter; diff --git a/react/components/Newsletter/Newsletter.tsx b/react/components/Newsletter/Newsletter.tsx new file mode 100644 index 0000000..b829a2a --- /dev/null +++ b/react/components/Newsletter/Newsletter.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import styles from './styles.css' + +const Newsletter = () => { + return ( +
+

Assine nossa newsletter

+

Receba ofertas e novidades por e-mail

+
+ + +
+
+ ) +} + +export default Newsletter; diff --git a/react/components/Newsletter/styles.css b/react/components/Newsletter/styles.css new file mode 100644 index 0000000..e2e84af --- /dev/null +++ b/react/components/Newsletter/styles.css @@ -0,0 +1,45 @@ +.newsletter { + display: flex; + flex-direction: column; + align-items: center; + background-color: #000; + color: #fff; + padding: 32px 0 15px 0; +} + +.newsletter-title { + font-weight: 400; + font-size: 24px; + line-height: 38px; +} + +.newsletter-description { + font-weight: 400; + font-size: 18px; + line-height: 25px; +} + +.newsletter-input { + background-color: #000; + color: #929292; + border-top: none; + border-left: none; + border-right: none; + border-bottom: solid 1px #929292; + font-weight: 400; + font-size: 18px; + line-height: 25px; +} + +.newsletter-btn { + border-top: none; + border-left: none; + border-right: none; + border-bottom: 3px solid #bfbfbf; + background-color: #000; + color: #fff; + text-transform: uppercase; + font-weight: 700; + font-size: 14px; + line-height: 19px; +} diff --git a/react/index.d.ts b/react/index.d.ts new file mode 100644 index 0000000..0e304d2 --- /dev/null +++ b/react/index.d.ts @@ -0,0 +1,7 @@ +declare module "*.css" { + interface IClassNames{ + [className: string]: string; + } + const classNames: IClassNames; + export = classNames; +} diff --git a/react/tsconfig.json b/react/tsconfig.json index a26a540..5c9a527 100644 --- a/react/tsconfig.json +++ b/react/tsconfig.json @@ -2,10 +2,16 @@ "extends": "@vtex/tsconfig", "compilerOptions": { "noEmitOnError": false, - "lib": ["dom"], + "lib": [ + "dom" + ], "module": "esnext", "moduleResolution": "node", "target": "es2017" }, - "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"] -} \ No newline at end of file + "include": [ + "./typings/*.d.ts", + "./**/*.tsx", + "./**/*.ts" + ] +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6e28988..848fa4f 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,7 +7,8 @@ "flex-layout.row#specifications-title", "product-specification-group#table", "shelf.relatedProducts", - "product-questions-and-answers" + "product-questions-and-answers", + "custom-newsletter" ] }, "html#breadcrumb": { @@ -91,6 +92,16 @@ } }, "flex-layout.row#product-image": { + "children": [ + "html#product-image" + ] + }, + "html#product-image": { + "props": { + "tag": "section", + "testId": "product-image", + "blockClass": "product-image" + }, "children": [ "product-images" ] @@ -116,7 +127,6 @@ "flex-layout.row#selling-price", "product-installments", "product-separator", - "product-identifier.product", "sku-selector", "product-quantity", "product-assembly-options", @@ -170,7 +180,6 @@ }, "children": [ "flex-layout.row#product-name", - "product-identifier.product", "sku-selector", "flex-layout.row#availability" ] diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..6adb024 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -10,7 +10,6 @@ "product-selling-price" ] }, - "flex-layout.row#list-price-savings": { "props": { "colGap": 2, @@ -20,8 +19,12 @@ "marginTop": 5 }, "children": [ - "product-list-price", - "product-price-savings" + "product-identifier.product" ] + }, + "product-identifier.product": { + "props": { + "label": "hide" + } } } diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..80695ac 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "custom-newsletter": { + "component": "Newsletter" } } diff --git a/styles/configs/style.json b/styles/configs/style.json index ee3264d..addb2a5 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -253,91 +253,91 @@ "measure": [30, 34, 20], "styles": { "heading-1": { - "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "700", "fontSize": "3rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-2": { - "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "700", "fontSize": "2.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-3": { - "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "700", "fontSize": "1.75rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-4": { - "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.5rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-5": { - "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-6": { - "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "body": { - "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1rem", "textTransform": "initial", "letterSpacing": "0" }, "small": { - "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "0.875rem", "textTransform": "initial", "letterSpacing": "0" }, "mini": { - "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "0.75rem", "textTransform": "initial", "letterSpacing": "0" }, "action": { - "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "1rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--small": { - "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "0.875rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--large": { - "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "1.25rem", "textTransform": "uppercase", "letterSpacing": "0" }, "code": { - "fontFamily": "Consolas, monaco, monospace", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1rem", "textTransform": "initial", diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 1d449d8..adbeda5 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -5,6 +5,7 @@ line-height: 19px; font-weight: 400; color: #929292 !important; + padding: 0 40px; } .homeIcon { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..8edbfc4 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -43,7 +43,7 @@ } .flexRow--deals { - background-color: #0F3E99; + background-color: #0f3e99; padding: 14px 0px; } diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..8b6103c 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,10 @@ .product-identifier--productReference { margin-bottom: 1rem; } + +.product-identifier__value { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..19752ec 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,5 +8,41 @@ /* Media Query M3 */ /* Grid breakpoints */ .newsletter { - background: red; -} \ No newline at end of file + background: rgb(0, 0, 0); + color: #ffff; +} + +.swiperCaret { + display: none; +} + +.swiper-pagination { + display: none; +} + +.thumbImg, +.carouselThumbBorder, +.productImagesThumb, +.productImagesThumbActive, +.figure { + width: 90px !important; + height: 90px !important; + margin-bottom: 0 !important; +} + +.carouselGaleryThumbs :first-child { + display: flex; + gap: 16px; +} + +.productImageTag { + width: 664px !important; +} + +.productNameContainer { + text-align: right; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..b9aa284 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,3 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: red; +}