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/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..4811319 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1 @@ +export { default } from "./components/Pix/Pix"; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..fb857e6 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,41 +1,52 @@ 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..0ee0ee5 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,322 @@ +/* [class*="html--pdp-breadcrumb"] { + background: pink; +} */ + +/* [class*="productNameContainer--quickview"] { + color: pink; +} */ + +[class*="flex flex-grow-1 w-100 flex-column"] { + padding-left: 40px; + padding-right: 40px; +} + +[class*="productNameContainer--quickview"] { + text-align: right; + + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + + color: #575757; +} + +[class*="product-identifier__label"], +[class*="product-identifier__separator"] { + font-size: 0; + text-align: right; +} + +[class*="flexColChild"]:nth-of-type(2) { + text-align: right; + + font-weight: 400; + font-size: 14px; + line-height: 19px; +} + +[class*="flexColChild"]:nth-of-type(2) [class*="c-muted-1"] { + color: rgba(146, 146, 146, 0.48) !important; +} + +[class*="sellingPrice"] { + font-weight: 700; + font-size: 25px !important; + line-height: 38px; + + color: black !important; +} + +[class*="installments"] { + font-weight: 400; + font-size: 16px; + line-height: 22px; +} + +[class*="installmentsNumber"], +[class*="installmentValue"] { + font-weight: 700; +} + +[class*="skuSelectorName"], +[class*="skuSelectorNameSeparator"], +[class*="skuSelectorSelectorImageValue"] { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; +} + +[class*="skuSelectorName"] [class*="c-muted-1"], +[class*="skuSelectorNameSeparator"] [class*="c-muted-1"], +[class*="skuSelectorSelectorImageValue"] [class*="c-muted-1"] { + color: #929292 !important; +} + +[class*="skuSelectorSubcontainer--cor"] [class*="br2"] { + border-radius: 24px; +} + +[class*="skuSelectorSubcontainer--cor"] [class*="frameAround"] [class*="bw1"], +[class*="br3"] { + border-width: 2px; + border-radius: 24px; + border-color: black; +} + +[class*="skuSelectorItem"] [class*="br2"] { + border-radius: 24px; +} + +[class*="skuSelectorItem"] [class*="pr5"] { + padding-right: 11px; +} + +[class*="skuSelectorItem"] [class*="pl5"] { + padding-left: 11px; +} + +[class*="skuSelectorName"] { + font-size: 0; +} + +[class*="skuSelectorSubcontainer--cor"] + [class*="skuSelectorNameContainer"] + [class*="skuSelectorTextContainer"] + [class*="skuSelectorName"]::after { + content: "OUTRAS CORES:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; +} + +[class*="skuSelectorSubcontainer--tamanho"] + [class*="skuSelectorNameContainer"] + [class*="skuSelectorTextContainer "] + [class*="skuSelectorName"]::after { + content: "OUTROS TAMANHOS:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; +} + +[class*="wrapper--shelfTitle"] { + display: flex; + justify-content: center; + width: 100%; +} + +[class*="shelfTitle"] [class*="t-heading-4"] { + font-weight: 400; + text-align: center; + font-style: normal; + font-size: 24px; + line-height: 38px; + color: #575757 !important; + margin: 16px 0 32px 0; +} + +[class*="paginationDotsContainer"] { + bottom: -32px; +} + +[class*="thumbImg"] { + width: auto; + height: 90px; +} + +/*mexer*/ +[class*="productImagesThumb"] [class*="w-20 w-20 w-20"] { + width: 13% !important; +} + +[class*="buttonClicker"] [class*="button"] { + background: black; +} + +[class*="buttonClicker"] [class*="buttonText"] { + font-size: 0; +} + +[class*="buttonClicker"] [class*="buttonText"]::after { + content: "ADICIONAR À SACOLA"; + font-weight: 400; + font-size: 18px; + color: white; + padding: 12px 0; +} + +[class*="listContainer--pdp-decriptions-list"] { + border-bottom: 1px solid #bfbfbf; + justify-content: space-around; +} + +[class*="listItem--pdp-description-button"] [class*="button__label"] { + text-transform: capitalize; + font-weight: 400; + font-size: 18px; + line-height: 38px; +} + +[class*="listItem--pdp-description-button"] [class*="c-action-primary"] { + color: #bfbfbf; +} + +[class*="listItem--pdp-description-button"] [class*="c-on-action-primary"], +[class*="c-on-base--inverted"] { + color: black; + border-bottom: 1px solid black; +} + +[class*="listItem--pdp-description-button"] + [class*="hover-c-on-action-primary"]:hover { + color: black; + border-bottom: 1px solid black; +} + +[class*="listItem--pdp-description-button"] [class*="bg-action-primary"] { + border-top-color: transparent; + border-left-color: transparent; + border-right-color: transparent; + background: transparent; +} + +[class*="listItem--pdp-description-button"] { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +[class*="listItem--pdp-description-button"] { + margin: 0 !important; +} + +[class*="productDescriptionContainer"] [class*="productDescriptionTitle"] { + font-weight: 400; + font-size: 24px !important; + line-height: 32px; + color: #575757; +} + +[class*="productDescriptionContainer"] + [class*="productDescriptionText"] + [class*="content "] { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +[class*="paginationDotsContainer--productPageCarousel"] { + display: flex; + align-items: center; +} + +[class*="paginationDot--productPageCarousel"] { + background-color: black; + width: 10px !important; + height: 10px !important; +} + +[class*="paginationDot--productPageCarousel--isActive"] { + background-color: white; + border: 0.5px solid black; + width: 17px !important; + height: 17px !important; +} + +[class*="vtex-product-summary-2-x-element"] { + display: flex; + align-items: center; + text-align: center; + height: auto; +} + +[class*="vtex-product-summary-2-x-element"] [class*="html--shelfItemBlock"] { + display: flex; + flex-direction: column; + text-align: center; +} + +[class*="vtex-product-summary-2-x-element"] + [class*="html--shelfItemBlock"] + [class*="nameContainer"] { + justify-content: center; +} + +[class*="vtex-product-summary-2-x-element"] + [class*="html--shelfItemBlock"] + [class*="brandName"] { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: black; +} + +[class*="listPriceValue--summary"] + [class*="currencyContainer--summary"]::before { + content: "de "; + text-decoration-line: line-through; +} + +[class*="listPriceValue--summary"] + [class*="currencyContainer--summary"]::after { + content: " por"; + text-decoration-line: line-through; +} + +[class*="sellingPriceValue--summary"] [class*="currencyContainer--summary"] { + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} + +[class*="sliderLeftArrow"] { + left: -16px; +} + +[class*="sliderRightArrow"] { + right: -16px; +} + +[class*="quantitySelectorTitle"] { + font-size: 0; +} + +/* [class*="description-content"] [class*="contentItem"] { + display: flex; + margin-top: 64px; + margin-bottom: 16px; +} + +[class*="productImage"] [class*="productImageTag"] { + max-height: fit-content !important; +} + +[class*="productImagesContainer--carousel"] + [class*="productImagesGallerySlide"] { + margin: 0; +} */ diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..bdeab4f --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; +import "../Pix/styles.css"; + +export default function Pix({ discount = 10 }: { discount: number }) { + const productPriceDiscount = useProduct(); + const productPrice = + productPriceDiscount?.product?.priceRange?.sellingPrice?.lowPrice; + const priceFinal = Math.abs( + Number(productPrice) * (discount / 100) - Number(productPrice) + ).toFixed(2); + + console.log(productPriceDiscount?.product?.priceRange?.sellingPrice); + + return ( +
+
+ Pix +
+ +
+

+ R$ {priceFinal.replace(".", ",")} +

+

+ {discount}% de desconto +

+
+
+ ); +} + +Pix.schema = { + title: "Pix discount", + type: "object", + properties: { + discount: { + type: "number", + }, + }, +}; diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css new file mode 100644 index 0000000..c1a132f --- /dev/null +++ b/react/components/Pix/styles.css @@ -0,0 +1,46 @@ +[class*="__container"] { + width: 100%; + display: flex; + margin-top: 8px; + margin-bottom: 16px; +} + +[class*="__figure"] { + display: flex; + align-self: center; + margin: 0; + margin-right: 26.21px; +} + +[class*="__imgPix"] { + display: block; + + width: 100%; + max-width: fit-content; + /* width: auto; */ + height: 24px; +} + +[class*="__pricePix"] { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + margin: 0; +} + +[class*="__priceNew"] { + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); + margin: 0; +} + +[class*="__priceDiscount"] { + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; + margin: 0; +} diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..ebacd49 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", diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..f9e22eb 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -32,17 +32,13 @@ "props": { "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "flex-layout.col#product-assembly-image": { "props": { "marginRight": 4 }, - "children": [ - "assembly-option-item-image" - ] + "children": ["assembly-option-item-image"] }, "flex-layout.col#product-assembly-middle": { "props": { @@ -96,9 +92,7 @@ "horizontalAlign": "right", "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "assembly-option-item-customize#sec-level": { "props": { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..c79af06 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,20 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + // "flex-layout.row#description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", + "html#product-description", + // "tab-layout#pdp-descriptions", + "flex-layout.row#shelf-title", + // "list-context.product-list#product-shelf", + "flex-layout.row#shelf-product-page", + // "html#product-summary", + // "shelf.relatedProducts", "product-questions-and-answers" ] }, + "html#breadcrumb": { "props": { "tag": "section", @@ -18,6 +25,97 @@ }, "children": ["breadcrumb"] }, + "html#imagens": { + "props": { + "tag": "figure", + "testId": "product-images" + }, + "children": ["product-images"] + }, + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": ["vtex.store-components:product-name"] + }, + "html#codigo": { + "props": { + "testId": "product-code", + "blockClass": "codigo" + }, + "children": ["product-identifier.product"] + }, + "html#selling-price": { + "props": { + "testId": "product-price" + }, + "children": ["product-selling-price"] + }, + "html#product-installments": { + "props": { + "tag": "span", + "testId": "product-installments", + "blockClass": "installments" + }, + "children": ["product-installments"] + }, + "html#pixzap": { + "props": { + "testId": "pix-price", + "blockClass": "pix" + }, + "children": ["pix-component"] + }, + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button" + }, + "children": ["add-to-cart-button"] + }, + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + "html#product-description": { + "props": { + "testId": "product-description", + "blockClass": "description-content" + }, + "children": ["tab-layout#pdp-descriptions"] + }, + "html#slider": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#prateleira"] + }, + "html#prateleira": { + "props": { + "testId": "vtex-product-summary", + "blockClass": "shelfItemBlock" + }, + "children": [ + "product-summary-image#shelf", + "product-summary-name", + "product-list-price#summary", + "product-selling-price#summary" + ] + }, + "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, @@ -26,6 +124,16 @@ "text": "##### Product Specifications" } }, + + "flex-layout.row#shelf-title": { + "children": ["rich-text#shelfTitle"] + }, + "rich-text#shelfTitle": { + "props": { + "text": "#### Você também pode gostar:", + "blockClass": "shelfTitle" + } + }, "flex-layout.row#description": { "props": { "marginBottom": 7 @@ -60,7 +168,8 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#imagens", + // "flex-layout.row#product-image", "product-bookmark", "product-specification-badges" ] @@ -87,11 +196,16 @@ }, "product-images": { "props": { + "showPaginationDots": false, + "showNavigationArrows": false, "aspectRatio": { - "desktop": "auto", - "phone": "16:9" + "desktop": "1:1", + "phone": "1:1" + // "phone": "16:9" }, - "displayThumbnailsArrows": true + "maxHeight": "unset", + "thumbnailsOrientation": "horizontal", + "displayThumbnailsArrows": false } }, "flex-layout.col#right-col": { @@ -101,20 +215,27 @@ }, "children": [ "flex-layout.row#product-name", + "html#codigo", + // "product-identifier.product", "product-rating-summary", - "flex-layout.row#list-price-savings", + // "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", - "product-installments", - "product-separator", - "product-identifier.product", - "sku-selector", - "product-quantity", + "html#product-installments", + // "product-installments", + "html#pixzap", + // "pix-component", + // "product-separator", + "html#sku-selector", + // "sku-selector", + "html#product-quantity", + // "product-quantity", "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "html#shipping-simulator" + // "shipping-simulator" + // "share#default" ] }, @@ -122,22 +243,24 @@ "props": { "marginBottom": 3 }, - "children": ["vtex.store-components:product-name"] + "children": ["html#product-name"] }, "sku-selector": { "props": { + "testId": "sku-selector", "variationsSpacing": 3, - "showValueNameForImageVariation": true + "showValueNameForImageVariation": false } }, "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "buttonClicker" }, - "children": ["add-to-cart-button"] + "children": ["html#add-to-cart-button"] }, "flex-layout.row#product-availability": { @@ -181,5 +304,160 @@ "Pinterest": true } } + }, + + "flex-layout.row#product-image-description": { + "children": ["product-images#description-image"] + }, + + "product-images#description-image": { + "props": { + "aspectRatio": { + "desktop": "1:1", + "phone": "1:1" + }, + "thumbnailVisibility": "hidden", + "showNavigationArrows": false, + "showPaginationDots": false + } + }, + + "tab-layout#pdp-descriptions": { + "props": { + "blockClass": "pdp-descriptions", + "defaultActiveTabId": "pdp-descriptions1" + }, + "children": ["tab-list#pdp-descriptions", "tab-content#pdp-descriptions"] + }, + + "tab-list#pdp-descriptions": { + "children": [ + "tab-list.item#pdp-descriptions1", + "tab-list.item#pdp-descriptions2", + "tab-list.item#pdp-descriptions3", + "tab-list.item#pdp-descriptions4", + "tab-list.item#pdp-descriptions5" + ], + "props": { + "blockClass": "pdp-decriptions-list" + } + }, + "tab-list.item#pdp-descriptions1": { + "props": { + "tabId": "pdp-descriptions1", + "label": "Descrição", + "defaultActiveTab": true, + "blockClass": "pdp-description-button" + } + }, + "tab-list.item#pdp-descriptions2": { + "props": { + "tabId": "pdp-descriptions2", + "label": "Descrição", + "blockClass": "pdp-description-button" + } + }, + "tab-list.item#pdp-descriptions3": { + "props": { + "tabId": "pdp-descriptions3", + "label": "Descrição", + "blockClass": "pdp-description-button" + } + }, + "tab-list.item#pdp-descriptions4": { + "props": { + "tabId": "pdp-descriptions4", + "label": "Descrição", + "blockClass": "pdp-description-button" + } + }, + "tab-list.item#pdp-descriptions5": { + "props": { + "tabId": "pdp-descriptions5", + "label": "Descrição", + "blockClass": "pdp-description-button" + } + }, + + "tab-content#pdp-descriptions": { + "children": [ + "tab-content.item#pdp-descriptions1", + "tab-content.item#pdp-descriptions2", + "tab-content.item#pdp-descriptions3", + "tab-content.item#pdp-descriptions4", + "tab-content.item#pdp-descriptions5" + ] + }, + + "tab-content.item#pdp-descriptions1": { + "children": [ + "flex-layout.row#product-image-description", + "flex-layout.row#description" + ], + "props": { + "tabId": "pdp-descriptions1" + } + }, + "tab-content.item#pdp-descriptions2": { + "children": [ + "flex-layout.row#product-image-description", + "flex-layout.row#description" + ], + "props": { + "tabId": "pdp-descriptions2" + } + }, + "tab-content.item#pdp-descriptions3": { + "children": [ + "flex-layout.row#product-image-description", + "flex-layout.row#description" + ], + "props": { + "tabId": "pdp-descriptions3" + } + }, + "tab-content.item#pdp-descriptions4": { + "children": [ + "flex-layout.row#product-image-description", + "flex-layout.row#description" + ], + "props": { + "tabId": "pdp-descriptions4" + } + }, + "tab-content.item#pdp-descriptions5": { + "children": [ + "flex-layout.row#product-image-description", + "flex-layout.row#description" + ], + "props": { + "tabId": "pdp-descriptions5" + } + }, + + "flex-layout.row#shelf-product-page": { + "children": ["list-context.product-list#product-shelf"] + }, + + "list-context.product-list#product-shelf": { + "blocks": ["product-summary.shelf#summary-shelf"], + "children": ["html#slider"] + }, + + "product-summary.shelf#summary-shelf": { + "children": ["html#prateleira"] + }, + + "slider-layout#prateleira": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "always", + "blockClass": "productPageCarousel" + } } } diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..bdc77b4 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -6,9 +6,7 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": [ - "product-selling-price" - ] + "children": ["html#selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +17,6 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] } } diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc index cfc3226..971cd70 100644 --- a/store/blocks/product-summary/product-summary-list.jsonc +++ b/store/blocks/product-summary/product-summary-list.jsonc @@ -9,14 +9,10 @@ ] }, "responsive-layout.desktop#productSummaryList": { - "children": [ - "flex-layout.row#summaryListDesktop" - ] + "children": ["flex-layout.row#summaryListDesktop"] }, "responsive-layout.mobile#productSummaryList": { - "children": [ - "flex-layout.row#summaryListMobile" - ] + "children": ["flex-layout.row#summaryListMobile"] }, "product-price-savings#summaryPercentage": { "props": { @@ -36,7 +32,7 @@ ] }, "flex-layout.row#summaryListDesktop": { - "props":{ + "props": { "fullWidth": true, "colSizing": "auto", "blockClass": "summaryListDesktop" @@ -69,9 +65,7 @@ ] }, "flex-layout.row#productSpecifications": { - "children": [ - "product-specification-group#summary" - ] + "children": ["product-specification-group#summary"] }, "product-summary-name#summaryListDesktop": { "props": { @@ -100,18 +94,13 @@ "colSizing": "auto", "colGap": 5 }, - "children": [ - "add-to-cart-button", - "flex-layout.row#buyNowButton" - ] + "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"] }, "flex-layout.row#buyNowButton": { "props": { "blockClass": "buyNowButton" }, - "children": [ - "add-to-cart-button#buyNow" - ] + "children": ["add-to-cart-button#buyNow"] }, "add-to-cart-button#buyNow": { @@ -123,10 +112,7 @@ } }, "flex-layout.col#priceSummaryListDesktop": { - "children": [ - "product-selling-price#summary", - "product-list-price#summary" - ] + "children": ["product-selling-price#summary", "product-list-price#summary"] }, "stack-layout#summaryListDesktop": { "children": [ @@ -144,7 +130,7 @@ } }, "flex-layout.row#summaryListMobile": { - "props":{ + "props": { "preserveLayoutOnMobile": true, "colSizing": "auto", "blockClass": "summaryListMobile", diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..e33db97 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -3,12 +3,12 @@ "children": [ "stack-layout#prodsum", "product-summary-name", - "flex-layout.col#productRating", + // "flex-layout.col#productRating", "product-summary-space", "product-list-price#summary", - "flex-layout.row#selling-price-savings", - "product-installments#summary", - "add-to-cart-button" + "flex-layout.row#selling-price-savings" + // "product-installments#summary" + // "add-to-cart-button" ] }, "flex-layout.col#productRating": { @@ -65,8 +65,8 @@ "marginBottom": 4 }, "children": [ - "product-selling-price#summary", - "product-price-savings#summary" + "product-selling-price#summary" + // "product-price-savings#summary" ] }, "product-installments#summary": { @@ -81,9 +81,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..2224337 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,7 +120,7 @@ "blockClass": "quickview" } }, - "product-images#quickview" : { + "product-images#quickview": { "props": { "blockClass": "quickview", "showNavigationArrows": true diff --git a/store/blocks/search.jsonc b/store/blocks/search.jsonc index 22be941..735db90 100644 --- a/store/blocks/search.jsonc +++ b/store/blocks/search.jsonc @@ -108,7 +108,10 @@ } }, "flex-layout.row#searchinfo": { - "children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"] + "children": [ + "flex-layout.col#productCount", + "flex-layout.row#orderByAndSwitcher" + ] }, "flex-layout.row#orderByAndSwitcher": { "children": ["order-by.v2", "gallery-layout-switcher"], @@ -272,29 +275,19 @@ "props": { "name": "grid" }, - "children": [ - "icon-grid", - "responsive-layout.desktop#textOptionGrid" - ] + "children": ["icon-grid", "responsive-layout.desktop#textOptionGrid"] }, "gallery-layout-option#list": { "props": { "name": "list" }, - "children": [ - "icon-inline-grid", - "responsive-layout.desktop#textOptionList" - ] + "children": ["icon-inline-grid", "responsive-layout.desktop#textOptionList"] }, "responsive-layout.desktop#textOptionGrid": { - "children": [ - "rich-text#option-grid" - ] + "children": ["rich-text#option-grid"] }, "responsive-layout.desktop#textOptionList": { - "children": [ - "rich-text#option-list" - ] + "children": ["rich-text#option-list"] }, "rich-text#option-grid": { "props": { diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..7a7dfed 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "pix-component": { + "component": "Pix" } } diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..28326c2 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -1,349 +1,351 @@ { - "typeScale": [ - 3, 2.25, 1.5, 1.25, 1, 0.875, 0.75 - ], - "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], - "customMedia": [ - { "s": 20 }, - { "ns": { - "value": 40, - "minWidth": true - } - }, - { "m": { - "value": 40, - "minWidth": true - } - }, - { "l": { - "value": 64, - "minWidth": true - } - }, - { "xl": { - "value": 80, - "minWidth": true - } - } - ], - "colors": { - "black-90": "rgba(0,0,0,.9)", - "black-80": "rgba(0,0,0,.8)", - "black-70": "rgba(0,0,0,.7)", - "black-60": "rgba(0,0,0,.6)", - "black-50": "rgba(0,0,0,.5)", - "black-40": "rgba(0,0,0,.4)", - "black-30": "rgba(0,0,0,.3)", - "black-20": "rgba(0,0,0,.2)", - "black-10": "rgba(0,0,0,.1)", - "black-05": "rgba(0,0,0,.05)", - "black-025": "rgba(0,0,0,.025)", - "black-0125": "rgba(0,0,0,.0125)", + "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75], + "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], + "customMedia": [ + { "s": 20 }, + { + "ns": { + "value": 40, + "minWidth": true + } + }, + { + "m": { + "value": 40, + "minWidth": true + } + }, + { + "l": { + "value": 64, + "minWidth": true + } + }, + { + "xl": { + "value": 80, + "minWidth": true + } + } + ], + "colors": { + "black-90": "rgba(0,0,0,.9)", + "black-80": "rgba(0,0,0,.8)", + "black-70": "rgba(0,0,0,.7)", + "black-60": "rgba(0,0,0,.6)", + "black-50": "rgba(0,0,0,.5)", + "black-40": "rgba(0,0,0,.4)", + "black-30": "rgba(0,0,0,.3)", + "black-20": "rgba(0,0,0,.2)", + "black-10": "rgba(0,0,0,.1)", + "black-05": "rgba(0,0,0,.05)", + "black-025": "rgba(0,0,0,.025)", + "black-0125": "rgba(0,0,0,.0125)", - "white-90": "rgba(255,255,255,.9)", - "white-80": "rgba(255,255,255,.8)", - "white-70": "rgba(255,255,255,.7)", - "white-60": "rgba(255,255,255,.6)", - "white-50": "rgba(255,255,255,.5)", - "white-40": "rgba(255,255,255,.4)", - "white-30": "rgba(255,255,255,.3)", - "white-20": "rgba(255,255,255,.2)", - "white-10": "rgba(255,255,255,.1)", - "white-05": "rgba(255,255,255,.05)", - "white-025": "rgba(255,255,255,.025)", - "white-0125": "rgba(255,255,255,.0125)" + "white-90": "rgba(255,255,255,.9)", + "white-80": "rgba(255,255,255,.8)", + "white-70": "rgba(255,255,255,.7)", + "white-60": "rgba(255,255,255,.6)", + "white-50": "rgba(255,255,255,.5)", + "white-40": "rgba(255,255,255,.4)", + "white-30": "rgba(255,255,255,.3)", + "white-20": "rgba(255,255,255,.2)", + "white-10": "rgba(255,255,255,.1)", + "white-05": "rgba(255,255,255,.05)", + "white-025": "rgba(255,255,255,.025)", + "white-0125": "rgba(255,255,255,.0125)" + }, + "semanticColors": { + "background": { + "base": "#ffffff", + "base--inverted": "#03044e", + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#f2f4f5", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-background": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-background": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "text": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "link": "#0F3E99", + "emphasis": "#f71963", + "disabled": "#979899", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "visited-text": { + "link": "#0c389f" + }, + "hover-text": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "active-text": { + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "border": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#e3e4e6", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-border": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-border": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "on": { + "base": "#3f3f40", + "base--inverted": "#ffffff", + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "disabled": "#979899", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a", + "muted-1": "#ffffff", + "muted-2": "#ffffff", + "muted-3": "#3f3f40", + "muted-4": "#3f3f40", + "muted-5": "#3f3f40" + }, + "hover-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + }, + "active-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + } + }, + "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], + "borderRadius": [0, 0.125, 0.25, 0.5, 1], + "widths": [1, 2, 4, 8, 16], + "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], + "heights": [1, 2, 4, 8, 16], + "sizes": [ + { "name": "small", "value": 2 }, + { "name": "regular", "value": 2.5 }, + { "name": "large", "value": 3 } + ], + "typography": { + "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", + "fontWeight": "700", + "fontSize": "3rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "semanticColors": { - "background": { - "base": "#ffffff", - "base--inverted": "#03044e", - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#f2f4f5", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-background": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-background": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "text": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "link": "#0F3E99", - "emphasis": "#f71963", - "disabled": "#979899", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "visited-text": { - "link": "#0c389f" - }, - "hover-text": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "active-text": { - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "border": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#e3e4e6", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-border": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-border": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "on": { - "base": "#3f3f40", - "base--inverted": "#ffffff", - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "disabled": "#979899", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a", - "muted-1": "#ffffff", - "muted-2": "#ffffff", - "muted-3": "#3f3f40", - "muted-4": "#3f3f40", - "muted-5": "#3f3f40" - }, - "hover-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - }, - "active-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - } + "heading-2": { + "fontFamily": "Open sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "700", + "fontSize": "2.25rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], - "borderRadius": [0, 0.125, 0.25, 0.5, 1], - "widths": [1, 2, 4, 8, 16], - "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], - "heights": [1, 2, 4, 8, 16], - "sizes": [ - {"name": "small", "value": 2}, - {"name": "regular", "value": 2.5}, - {"name": "large", "value": 3} - ], - "typography":{ - "measure": [30, 34, 20], - "styles": { - "heading-1": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "3rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-2": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "2.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-3": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "1.75rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-4": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.5rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-5": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-6": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "body": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "0.875rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "mini": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "0.75rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "action": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "1rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "action--small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "0.875rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "action--large": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "1.25rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "code": { - "fontFamily": "Consolas, monaco, monospace", - "fontWeight": "normal", - "fontSize": "1rem", - "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", + "fontWeight": "700", + "fontSize": "1.75rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] + "heading-4": { + "fontFamily": "Open sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, 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", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "fontWeight": "500", + "fontSize": "1.25rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "code": { + "fontFamily": "Consolas, monaco, monospace", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + } + } + }, + "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..00098e6 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -12,5 +12,5 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: #fff; } \ 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..1d14edc --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,33 @@ +/* +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 */ +.v-mid { + vertical-align: initial !important; +} + +.container .homeLink, +.container .link--1, +.container .link--2, +.container .term { + color: #929292; + font-weight: 400; + font-size: 14px; + line-height: 19px; + vertical-align: unset !important; +} +.container .homeLink .homeIcon { + display: none; +} +.container .homeLink::after { + content: "Home"; + color: #929292; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} \ 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..b13b88a 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -3,6 +3,5 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: #fff; } - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..cd90db7 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,30 @@ +.v-mid { + vertical-align: initial !important; +} + +.container { + .homeLink, + .link--1, + .link--2, + .term { + color: #929292; + font-weight: 400; + font-size: 14px; + line-height: 19px; + vertical-align: unset !important; + } + + .homeLink { + .homeIcon { + display: none; + } + + &::after { + content: "Home"; + color: #929292; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + } +}