From 0aa0ee0f1440c5fe17d80a5752005c648276b80a Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Thu, 26 Jan 2023 11:21:37 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20customiza=C3=A7=C3=A3o=20do=20Breadcump?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/LogoM3Academy.png | Bin 0 -> 2501 bytes manifest.json | 1 - react/components/Html/index.tsx | 79 +++++++------ store/blocks/home/home.jsonc | 8 +- store/blocks/pdp/product.jsonc | 11 +- store/blocks/product-summary/quickview.json | 30 ++--- styles/css/agenciamagma.store-theme.css | 4 +- styles/css/vtex.breadcrumb.css | 29 +++++ styles/css/vtex.flex-layout.css | 111 ++---------------- styles/css/vtex.product-identifier.css | 26 +++- styles/css/vtex.store-components.css | 17 +++ .../product/agenciamagma.store-theme.scss | 5 +- .../sass/pages/product/vtex.breadcrumb.scss | 28 +++++ .../sass/pages/product/vtex.flex-layout.scss | 4 + .../product/vtex.product-identifier.scss | 19 +++ .../pages/product/vtex.store-components.scss | 25 +++- styles/sass/utils/_vars.scss | 23 ++-- 17 files changed, 236 insertions(+), 184 deletions(-) create mode 100644 assets/LogoM3Academy.png create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss diff --git a/assets/LogoM3Academy.png b/assets/LogoM3Academy.png new file mode 100644 index 0000000000000000000000000000000000000000..7f904e8ee717a94e1ab827f4b6d799acf3bc058d GIT binary patch literal 2501 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 { - 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/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..ec4a516 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", @@ -40,7 +40,7 @@ "phone": 1 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "never", "blockClass": "carousel" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..d7f0c05 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": "54%", "rowGap": 0 } }, @@ -91,7 +91,10 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "thumbnailsOrientation": "horizontal", + "displayThumbnailsArrows": false, + "showNavigationArrows": false, + "showPaginationDots": false } }, "flex-layout.col#right-col": { @@ -101,12 +104,12 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", + "flex-layout.row#list-price-savings", "product-separator", - "product-identifier.product", "sku-selector", "product-quantity", "product-assembly-options", diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..7cab0ea 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -1,9 +1,6 @@ { "modal-trigger#quickview": { - "children": [ - "icon-expand", - "modal-layout#quickview" - ], + "children": ["icon-expand", "modal-layout#quickview"], "props": { "blockClass": "quickview" } @@ -63,9 +60,7 @@ }, "flex-layout.col#quickview-product-quantity": { - "children": [ - "product-summary-quantity#quickview" - ] + "children": ["product-summary-quantity#quickview"] }, "product-summary-quantity#quickview": { "props": { @@ -74,18 +69,14 @@ } }, "flex-layout.col#quickview-add-to-card-button": { - "children": [ - "add-to-cart-button" - ], + "children": ["add-to-cart-button"], "props": { "width": "grow" } }, "flex-layout.row#quickview-actions-2": { - "children": [ - "link.product#button-pdp" - ] + "children": ["link.product#button-pdp"] }, "link.product#button-pdp": { "props": { @@ -107,15 +98,10 @@ } }, "flex-layout.col#quickview-images": { - "children": [ - "product-images#quickview" - ] + "children": ["product-images#quickview"] }, "flex-layout.col#quickview-product-details": { - "children": [ - "modal-content#quickview", - "modal-actions#quickview" - ], + "children": ["modal-content#quickview", "modal-actions#quickview"], "props": { "preventVerticalStretch": true, "blockClass": "quickviewDetails" @@ -134,10 +120,10 @@ "blockClass": "quickview" } }, - "product-images#quickview" : { + "product-images#quickview": { "props": { "blockClass": "quickview", - "showNavigationArrows": true + "showNavigationArrows": "never" } } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..c16a50b 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -8,9 +8,9 @@ /* Media Query M3 */ /* Grid breakpoints */ .html { - background-color: red; + background-color: blueviolet; } .html--pdp-breadcrumb { - background-color: green; + background-color: black; } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..95cb97c --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,29 @@ +/* +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 */ +.container { + padding-left: 40px; + display: flex; + align-items: center; + color: #929292; +} +.container .homeLink .homeIcon { + display: none; +} +.container .homeLink::before { + content: "Home"; + font-size: 16px; +} +.container .arrow--1 .link { + font-size: 0; +} +.container .arrow--1 .link::before { + content: "Sapatos"; + font-size: 16px; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..4b400f1 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,13 @@ -.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 */ +.stretchChildrenWidth { + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..c752b47 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,25 @@ -.product-identifier--productReference { - margin-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 */ +.product-identifier { + display: flex; + justify-content: flex-end; + margin-right: 40px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + color: rgba(146, 146, 146, 0.48); } +.product-identifier .product-identifier__label, +.product-identifier .product-identifier__separator { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..cb71014 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,21 @@ /* Grid breakpoints */ .newsletter { background: red; +} + +.carouselGaleryThumbs { + width: 59.24%; + padding-left: 40px; +} + +.productBrand { + display: flex; + justify-content: flex-end; + margin-right: 37px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; } \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..4e15541 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,7 @@ .html { - background-color: red; + background-color: blueviolet; } .html--pdp-breadcrumb { - background-color: green; + background-color: black; } - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..3780c30 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,28 @@ +@import "/styles/sass/utils/vars"; + +.container { + padding-left: 40px; + display: flex; + align-items: center; + + .homeLink { + .homeIcon { + display: none; + } + } + .homeLink::before { + content: "Home"; + font-size: 16px; + color: $color-gray6; + } + .arrow--1 { + .link { + font-size: 0; + } + .link::before { + content: "Sapatos"; + font-size: 16px; + color: $color-gray6; + } + } +} 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..b0a9d90 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,4 @@ +.stretchChildrenWidth { + margin: 0; + padding: 0; +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..cc3986e --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,19 @@ +.product-identifier { + display: flex; + justify-content: flex-end; + margin-right: 40px; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + + color: rgba(146, 146, 146, 0.48); + + .product-identifier__label, + .product-identifier__separator { + display: none; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..e2d6654 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,22 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: red; +} + +.carouselGaleryThumbs { + width: 59.24%; + padding-left: 40px; +} + +.productBrand { + display: flex; + justify-content: flex-end; + margin-right: 37px; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + + color: #575757; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..e0173bb 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -7,6 +7,7 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; +$color-gray6: #929292; $color-blue: #4267b2; @@ -14,18 +15,18 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default;