diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..c44dc53 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,41 +1,41 @@ 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 + 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 */ - 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 + testId?: string } export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => { - const { handles } = useCssHandles(CSS_HANDLES); + 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); + const props = { + className: `${handles.html} ${classes}`, + "data-testid": testId + }; + const Children = <>{children}{text}; + const Element = React.createElement(tag, props, Children); - return <>{Element}; + return <>{Element}; }; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 131fa3b..73c5731 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -3,6 +3,8 @@ column-gap: 10px; } + + /* Tablet */ @media (max-width: 1024px) { [class*="html--container__buyButton"] { @@ -97,3 +99,7 @@ max-width:314.4px; width: unset; max-width: 291.2px; }} + +[class*="html--quantity"] { + max-width: 128px!important; + } diff --git a/store/blocks/pdp/tab-layout-product.jsonc b/store/blocks/pdp/tab-layout-product.jsonc index a8ce6a3..0ed0ac0 100644 --- a/store/blocks/pdp/tab-layout-product.jsonc +++ b/store/blocks/pdp/tab-layout-product.jsonc @@ -101,6 +101,11 @@ }, "children": ["product-images#imageDescription", "product-description"] }, + "product-description": { + "props": { + "collapseContent": false + } + }, "flex-layout.row#wrapperImageDescription": { "props": { "blockClass": "imageDescription", diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css deleted file mode 100644 index 5e37ba5..0000000 --- a/styles/css/agenciamagma.store-theme.css +++ /dev/null @@ -1,16 +0,0 @@ -/* -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 */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index e2913d7..b040f82 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -10,7 +10,6 @@ .flexRowContent--product-main { padding: 0 40px; margin: 0; - border: 1px solid red; column-gap: 32px; } @media (max-width: 1024px) { diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index bc1fe06..8da6e20 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -15,6 +15,7 @@ .product-identifier--productReference { display: block; padding-right: 0; + padding-bottom: 24px; } } .product-identifier--productReference .product-identifier__label, @@ -27,7 +28,6 @@ font-weight: 400; font-size: 14px; line-height: 19px; - /* identical to box height */ text-align: right; color: rgba(146, 146, 146, 0.4784313725); } \ 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..a547762 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,27 @@ +/* +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 */ +.quantitySelectorStepper { + border: 1px solid #989898; + max-width: 128px; + padding: 3.5px 0; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { + border: none; + width: 28px; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button), +.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) { + border: none; + background-color: #fff; +} + +.quantitySelectorContainer--quantity__wrapper { + width: 128px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 59a84aa..ebff6ce 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -119,6 +119,196 @@ padding-left: 0 !important; padding-right: 0 !important; } +:global(.vtex-store-components-3-x-container) .productNameContainer--quickview { + text-align: end; + padding-bottom: 8px; +} +@media (max-width: 1024px) { + :global(.vtex-store-components-3-x-container) .productNameContainer--quickview { + text-align: initial; + } +} + +.shippingContainer { + display: flex; + flex-direction: row; + position: relative; + width: 100%; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; +} +@media (max-width: 1024px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + flex-direction: column; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + left: 312px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + color: #000; +} +@media (max-width: 1024px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + position: initial; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { + display: none; +} +.shippingContainer :global(.vtex-input__label) { + display: none; +} +.shippingContainer :global(.vtex-input-prefix__group) { + border: 1px solid #cccccc; + border-radius: 0; + max-width: 231px; + height: 49px; +} +.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input), +.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} +.shippingContainer :global(.vtex-button) { + background: none; + border: none; + width: 49px; + height: 49px; + border-radius: 0; + background-color: #000; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { + content: "OK"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + /* identical to box height */ + display: flex; + align-items: center; + color: #ffffff; +} + +.shippingTable { + width: 100%; + max-width: 326px; + margin: 0; + padding: 0; + border: 0; +} +.shippingTable .shippingTableHead { + display: table-header-group; +} +.shippingTable .shippingTableHead .shippingTableRow { + display: flex; + column-gap: 32px; + padding-bottom: 15px; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + display: flex; + width: 100%; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + /* identical to box height */ + color: #202020; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + width: 100%; + max-width: 78px; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + order: 3; + width: 100%; + max-width: 136px; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + width: 100%; + max-width: 48px; + display: flex; + order: 2; + width: 100%; + font-size: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after { + content: "Frete"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + /* identical to box height */ + color: #202020; +} +.shippingTable .shippingTableBody { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 15px; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: flex; + justify-content: space-between; + width: 100%; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName, +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice, +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + display: flex; + flex: 1; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; + padding: 0; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + width: 100%; + max-width: 78px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + order: 3; + width: 100%; + max-width: 136px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + order: 2; + width: 100%; + max-width: 48px; +} @media (max-width: 1024px) { .subscriberContainer { diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss deleted file mode 100644 index f94fd95..0000000 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ /dev/null @@ -1,7 +0,0 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} \ 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 index c7004da..b3f9d94 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -2,7 +2,6 @@ .flexRowContent--product-main { padding: 0 40px; margin: 0; - border: 1px solid red; column-gap: 32px; @media (max-width:1024px) { diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 8fe7da2..75a970f 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -6,6 +6,7 @@ @media (max-width:1024px) { display: block; padding-right: 0; + padding-bottom: 24px; } .product-identifier__label, @@ -14,15 +15,12 @@ } .product-identifier__value { - font-family: 'Open Sans'; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; - /* identical to box height */ - text-align: right; - color: #9292927a; } } \ No newline at end of file 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..1ac41e1 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,26 @@ +.quantitySelectorStepper { + border: 1px solid #989898; + max-width: 128px; + padding: 3.5px 0; + + + + :global(.vtex-numeric-stepper-wrapper) { + :global(.vtex-numeric-stepper-container) { + :global(.vtex-numeric-stepper__input) { + border: none; + width: 28px; + } + + :global(.vtex-numeric-stepper__plus-button), + :global(.vtex-numeric-stepper__minus-button) { + border: none; + background-color: #fff; + } + } + } +} + +.quantitySelectorContainer--quantity__wrapper { + width: 128px; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 3d0c7db..2f65724 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -118,13 +118,240 @@ } // FIM NEWSLETTER + // INICIO MAIN :global(.vtex-store-components-3-x-container) { padding-left: 0 !important; padding-right: 0 !important; + + .productNameContainer--quickview { + text-align: end; + padding-bottom: 8px; + + @media (max-width:1024px) { + text-align: initial; + } + } } +// Area de formulario do cep +.shippingContainer { + display: flex; + flex-direction: row; + position: relative; + width: 100%; + + :global(.vtex-address-form__postalCode) { + display: flex; + + @media (max-width:1024px) { + flex-direction: column; + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + left: 312px; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; + + :last-child { + color: #000; + } + + @media (max-width:1024px) { + position: initial; + } + + :global(.vtex__icon-external-link) { + display: none; + } + } + } + + :global(.vtex-input__label) { + display: none; + } + + :global(.vtex-input-prefix__group) { + border: 1px solid #cccccc; + border-radius: 0; + max-width: 231px; + height: 49px; + + + + :global(.vtex-address-form-4-x-input), + :global(.vtex-address-form-4-x-input)::placeholder { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + + color: #afafaf; + } + + + } + + :global(.vtex-button) { + background: none; + border: none; + width: 49px; + height: 49px; + border-radius: 0; + background-color: #000; + + :global(.vtex-button__label) { + font-size: 0; + + &::after { + content: "OK"; + font-family: $font-family; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + /* identical to box height */ + + display: flex; + align-items: center; + + color: #ffffff; + } + } + } +} + +// Area de opcoes de entrega +.shippingTable { + width: 100%; + max-width: 326px; + margin: 0; + padding: 0; + border: 0; + + .shippingTableHead { + display: table-header-group; + + .shippingTableRow { + display: flex; + column-gap: 32px; + padding-bottom: 15px; + + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate { + display: flex; + width: 100%; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + /* identical to box height */ + color: #202020; + } + + .shippingTableHeadDeliveryName { + width: 100%; + max-width: 78px; + } + + .shippingTableHeadDeliveryEstimate { + order: 3; + width: 100%; + max-width: 136px; + } + + .shippingTableHeadDeliveryPrice { + width: 100%; + max-width: 48px; + display: flex; + order: 2; + width: 100%; + font-size: 0; + + &::after { + content: "Frete"; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + /* identical to box height */ + + color: #202020; + } + } + } + } + + .shippingTableBody { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 15px; + + .shippingTableRow { + display: flex; + justify-content: space-between; + width: 100%; + + .shippingTableCellDeliveryName, + .shippingTableCellDeliveryPrice, + .shippingTableCellDeliveryEstimate { + display: flex; + flex: 1; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + + color: #afafaf; + padding: 0; + } + + .shippingTableCellDeliveryName { + .shippingTableLabel { + .shippingTableRadioBtn { + display: none; + } + } + } + + .shippingTableCellDeliveryName { + width: 100%; + max-width: 78px; + } + + .shippingTableCellDeliveryEstimate { + order: 3; + width: 100%; + max-width: 136px; + } + + .shippingTableCellDeliveryPrice { + order: 2; + width: 100%; + max-width: 48px; + } + } + } +} // FIM MAIN @@ -144,7 +371,7 @@ &::after { content: "Produto indisponível"; - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; font-weight: 700; font-size: 14px; @@ -162,7 +389,7 @@ &::after { content: "Deseja saber quando estiver disponível?"; - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 14px; @@ -265,7 +492,7 @@ &::after { content: "avise-me"; - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; font-weight: 600; font-size: 14px; @@ -447,7 +674,7 @@ .skuSelectorItemTextValue { padding: 0; margin: auto; - font-family: 'Open Sans'; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 14px; diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index a1585b1..d7f6b0b 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,4 +1,4 @@ -$font-family : "Open Sans"; +$font-family : $font-family; $color-black: #000000; $color-black2: #292929; $color-black3: #575757;