From 990b517aeba43525527bdc5c0191671c1a876ab1 Mon Sep 17 00:00:00 2001 From: carloswinter Date: Wed, 25 Jan 2023 17:47:56 -0300 Subject: [PATCH] feat(pix): adiciona logica pix) --- react/Pix.tsx | 3 + react/components/Pix/Pix.tsx | 14 +++ react/components/Pix/styles.css | 5 + react/index.d.ts | 7 ++ store/blocks/pdp/product.jsonc | 9 +- store/interfaces.json | 3 + styles/css/vtex.flex-layout.css | 107 ++---------------- styles/css/vtex.product-quantity.css | 16 +++ styles/css/vtex.store-components.css | 14 +++ .../sass/pages/product/vtex.flex-layout.scss | 4 + .../pages/product/vtex.product-quantity.scss | 8 ++ .../pages/product/vtex.store-components.scss | 19 +++- 12 files changed, 107 insertions(+), 102 deletions(-) create mode 100644 react/Pix.tsx create mode 100644 react/components/Pix/Pix.tsx create mode 100644 react/components/Pix/styles.css create mode 100644 react/index.d.ts create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..236fa9e --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,3 @@ +import Pix from "./components/Example/Pix"; + +export default Pix; diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..360c9be --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; +// import styles from "./styles.css"; + +const Pix = () => { + const product = useProduct(); + console.log(product); + + return Pixxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx; + + // return ; +}; + +export default Pix; diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css new file mode 100644 index 0000000..35ed200 --- /dev/null +++ b/react/components/Pix/styles.css @@ -0,0 +1,5 @@ +.PixButton { + width: 40px; + height: 40px; + background: black; +} diff --git a/react/index.d.ts b/react/index.d.ts new file mode 100644 index 0000000..1fb927a --- /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/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0381446..150e5ba 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -78,7 +78,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "50%", "rowGap": 0 } }, @@ -108,6 +108,7 @@ "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", + "html#pix-component", "product-separator", "product-identifier.product", "sku-selector", @@ -120,6 +121,12 @@ "share#default" ] }, + "html#pix-component": { + "props": { + "testId": "pix-price" + }, + "children": ["pix-component"] + }, "flex-layout.row#product-name": { "props": { diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..c55366c 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -2,6 +2,9 @@ "example-component": { "component": "Example" }, + "pix-component": { + "component": "Pix" + }, "html": { "component": "html", "composition": "children" diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..34c4328 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,9 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; -} - -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { - display: flex; - max-height: 100%; -} - -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +/* +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 */ \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..dc2d5e3 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,16 @@ +/* +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 */ +.quantitySelectorContainer { + width: max-content; +} +.quantitySelectorContainer .quantitySelectorStepper, +.quantitySelectorContainer .quantitySelectorTitle { + width: max-content; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..2384943 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,18 @@ /* Grid breakpoints */ .newsletter { background: red; +} + +.productImageTag { + width: 664px !important; + height: 664px !important; + max-height: none !important; +} + +.productImagesThumb, +.carouselThumbBorder, +.figure, +.thumbImg { + width: 90px !important; + height: 90px !important; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..33a0e3a --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,4 @@ +// .flexRow { +// width: auto; +// padding: 0 40px; +// } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..3c7761d --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,8 @@ +.quantitySelectorContainer { + width: max-content; + + .quantitySelectorStepper, + .quantitySelectorTitle { + width: max-content; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..35b299a 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,16 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: red; +} +.productImageTag { + width: 664px !important; + height: 664px !important; + max-height: none !important; +} + +.productImagesThumb, +.carouselThumbBorder, +.figure, +.thumbImg { + width: 90px !important; + height: 90px !important; +}