diff --git a/.gitignore b/.gitignore index 30eb490..bf54491 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,7 @@ npm-debug.log lib *.orig react/package-lock.json + +# alternatives +/.workspace +/workspace \ No newline at end of file diff --git a/.vtexignore b/.vtexignore index 18fdddf..73d9402 100644 --- a/.vtexignore +++ b/.vtexignore @@ -13,4 +13,6 @@ service/node_modules/ react/__tests__/** react/.babelrc react/.eslintrc -react/setupTests.js \ No newline at end of file +react/setupTests.js +workspace +.workspace \ No newline at end of file diff --git a/assets/fonts/OpenSans-Bold.ttf b/assets/fonts/OpenSans-Bold.ttf new file mode 100644 index 0000000..a1398b3 Binary files /dev/null and b/assets/fonts/OpenSans-Bold.ttf differ diff --git a/assets/fonts/OpenSans-BoldItalic.ttf b/assets/fonts/OpenSans-BoldItalic.ttf new file mode 100644 index 0000000..307122c Binary files /dev/null and b/assets/fonts/OpenSans-BoldItalic.ttf differ diff --git a/assets/fonts/OpenSans-ExtraBold.ttf b/assets/fonts/OpenSans-ExtraBold.ttf new file mode 100644 index 0000000..08d7185 Binary files /dev/null and b/assets/fonts/OpenSans-ExtraBold.ttf differ diff --git a/assets/fonts/OpenSans-ExtraBoldItalic.ttf b/assets/fonts/OpenSans-ExtraBoldItalic.ttf new file mode 100644 index 0000000..c35f57f Binary files /dev/null and b/assets/fonts/OpenSans-ExtraBoldItalic.ttf differ diff --git a/assets/fonts/OpenSans-Italic.ttf b/assets/fonts/OpenSans-Italic.ttf new file mode 100644 index 0000000..790286f Binary files /dev/null and b/assets/fonts/OpenSans-Italic.ttf differ diff --git a/assets/fonts/OpenSans-Light.ttf b/assets/fonts/OpenSans-Light.ttf new file mode 100644 index 0000000..d9a9e27 Binary files /dev/null and b/assets/fonts/OpenSans-Light.ttf differ diff --git a/assets/fonts/OpenSans-LightItalic.ttf b/assets/fonts/OpenSans-LightItalic.ttf new file mode 100644 index 0000000..77f2e6c Binary files /dev/null and b/assets/fonts/OpenSans-LightItalic.ttf differ diff --git a/assets/fonts/OpenSans-Medium.ttf b/assets/fonts/OpenSans-Medium.ttf new file mode 100644 index 0000000..ba6db9b Binary files /dev/null and b/assets/fonts/OpenSans-Medium.ttf differ diff --git a/assets/fonts/OpenSans-MediumItalic.ttf b/assets/fonts/OpenSans-MediumItalic.ttf new file mode 100644 index 0000000..980ac25 Binary files /dev/null and b/assets/fonts/OpenSans-MediumItalic.ttf differ diff --git a/assets/fonts/OpenSans-Regular.ttf b/assets/fonts/OpenSans-Regular.ttf new file mode 100644 index 0000000..1dc226d Binary files /dev/null and b/assets/fonts/OpenSans-Regular.ttf differ diff --git a/assets/fonts/OpenSans-SemiBold.ttf b/assets/fonts/OpenSans-SemiBold.ttf new file mode 100644 index 0000000..66acb20 Binary files /dev/null and b/assets/fonts/OpenSans-SemiBold.ttf differ diff --git a/assets/fonts/OpenSans-SemiBoldItalic.ttf b/assets/fonts/OpenSans-SemiBoldItalic.ttf new file mode 100644 index 0000000..f8c39f9 Binary files /dev/null and b/assets/fonts/OpenSans-SemiBoldItalic.ttf differ diff --git a/assets/fonts/Roboto-Black.ttf b/assets/fonts/Roboto-Black.ttf new file mode 100644 index 0000000..0112e7d Binary files /dev/null and b/assets/fonts/Roboto-Black.ttf differ diff --git a/assets/fonts/Roboto-BlackItalic.ttf b/assets/fonts/Roboto-BlackItalic.ttf new file mode 100644 index 0000000..b2c6aca Binary files /dev/null and b/assets/fonts/Roboto-BlackItalic.ttf differ diff --git a/assets/fonts/Roboto-Bold.ttf b/assets/fonts/Roboto-Bold.ttf new file mode 100644 index 0000000..43da14d Binary files /dev/null and b/assets/fonts/Roboto-Bold.ttf differ diff --git a/assets/fonts/Roboto-BoldItalic.ttf b/assets/fonts/Roboto-BoldItalic.ttf new file mode 100644 index 0000000..bcfdab4 Binary files /dev/null and b/assets/fonts/Roboto-BoldItalic.ttf differ diff --git a/assets/fonts/Roboto-Italic.ttf b/assets/fonts/Roboto-Italic.ttf new file mode 100644 index 0000000..1b5eaa3 Binary files /dev/null and b/assets/fonts/Roboto-Italic.ttf differ diff --git a/assets/fonts/Roboto-Light.ttf b/assets/fonts/Roboto-Light.ttf new file mode 100644 index 0000000..e7307e7 Binary files /dev/null and b/assets/fonts/Roboto-Light.ttf differ diff --git a/assets/fonts/Roboto-LightItalic.ttf b/assets/fonts/Roboto-LightItalic.ttf new file mode 100644 index 0000000..2d277af Binary files /dev/null and b/assets/fonts/Roboto-LightItalic.ttf differ diff --git a/assets/fonts/Roboto-Medium.ttf b/assets/fonts/Roboto-Medium.ttf new file mode 100644 index 0000000..ac0f908 Binary files /dev/null and b/assets/fonts/Roboto-Medium.ttf differ diff --git a/assets/fonts/Roboto-MediumItalic.ttf b/assets/fonts/Roboto-MediumItalic.ttf new file mode 100644 index 0000000..fc36a47 Binary files /dev/null and b/assets/fonts/Roboto-MediumItalic.ttf differ diff --git a/assets/fonts/Roboto-Regular.ttf b/assets/fonts/Roboto-Regular.ttf new file mode 100644 index 0000000..ddf4bfa Binary files /dev/null and b/assets/fonts/Roboto-Regular.ttf differ diff --git a/assets/fonts/Roboto-Thin.ttf b/assets/fonts/Roboto-Thin.ttf new file mode 100644 index 0000000..2e0dee6 Binary files /dev/null and b/assets/fonts/Roboto-Thin.ttf differ diff --git a/assets/fonts/Roboto-ThinItalic.ttf b/assets/fonts/Roboto-ThinItalic.ttf new file mode 100644 index 0000000..084f9c0 Binary files /dev/null and b/assets/fonts/Roboto-ThinItalic.ttf differ diff --git a/manifest.json b/manifest.json index 9ee3cc5..256da74 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", @@ -38,6 +37,7 @@ "vtex.locale-switcher": "0.x", "vtex.product-quantity": "1.x", "vtex.product-identifier": "0.x", + "vtex.store-newsletter": "1.x", "vtex.breadcrumb": "1.x", "vtex.sticky-layout": "0.x", "vtex.product-customizer": "2.x", @@ -49,6 +49,7 @@ "vtex.checkout-summary": "0.x", "vtex.product-list": "0.x", "vtex.add-to-cart-button": "0.x", + "vtex.responsive-values": "0.x", "vtex.product-bookmark-interfaces": "1.x", "vtex.responsive-layout": "0.x", "vtex.slider-layout": "0.x", diff --git a/react/Example.tsx b/react/Example.tsx deleted file mode 100644 index 7d550e5..0000000 --- a/react/Example.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Example from "./components/Example/Example"; - -export default Example; \ No newline at end of file diff --git a/react/PixCustomInstallments.ts b/react/PixCustomInstallments.ts new file mode 100644 index 0000000..5932fd9 --- /dev/null +++ b/react/PixCustomInstallments.ts @@ -0,0 +1 @@ +export { PixCustomInstallments as default } from "./components/PixCustomInstallments"; diff --git a/react/components/Example/Example.tsx b/react/components/Example/Example.tsx deleted file mode 100644 index d195271..0000000 --- a/react/components/Example/Example.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const Example = () => { - return ( -
Example
- ) -} - -export default Example \ No newline at end of file diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..847f910 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -4,38 +4,49 @@ import { useCssHandles } from "vtex.css-handles"; 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/PixCustomInstallments/_ComponentsFunctions.ts b/react/components/PixCustomInstallments/_ComponentsFunctions.ts new file mode 100644 index 0000000..c43b6ba --- /dev/null +++ b/react/components/PixCustomInstallments/_ComponentsFunctions.ts @@ -0,0 +1,30 @@ +export const calculationPercent = ( + percent: number | undefined, + value: number | undefined +) => { + if (value && percent) { + const newPercent = percent / 100; + + const discount = value * newPercent; + + const newValue = value - discount; + + return newValue.toFixed(2).toString().replace(".", ","); + } + + return ""; +}; + +export const sanatizeColor = (color: string) => { + if (color) { + const [first] = color.split(" "); + + if (first.indexOf("c-") === 0) { + return first; + } + + return "c-on-base"; + } + + return "c-on-base"; +}; diff --git a/react/components/PixCustomInstallments/_PixCustomInstallments.module.css b/react/components/PixCustomInstallments/_PixCustomInstallments.module.css new file mode 100644 index 0000000..852104e --- /dev/null +++ b/react/components/PixCustomInstallments/_PixCustomInstallments.module.css @@ -0,0 +1,27 @@ +.pix { + gap: 26px; + align-items: center; + max-width: 197px; +} + +.pix img { + height: 26px; + width: 66px; +} + +.pix p { + margin: 0; + flex-grow: 2; +} + +.pix .pix__priceValue { + font-weight: 700; + font-size: 18px; + line-height: 24.51px; + color: #00000094; +} + +.pix .pix__label { + font-size: 13px; + line-height: 17.7px; +} diff --git a/react/components/PixCustomInstallments/_PixCustomInstallments.tsx b/react/components/PixCustomInstallments/_PixCustomInstallments.tsx new file mode 100644 index 0000000..510ffa8 --- /dev/null +++ b/react/components/PixCustomInstallments/_PixCustomInstallments.tsx @@ -0,0 +1,57 @@ +import React from "react"; + +import styles from "./_PixCustomInstallments.module.css"; + +import { useProduct } from "vtex.product-context"; +import { calculationPercent, sanatizeColor } from "./_ComponentsFunctions"; + +interface IPixCustomInstallmentsProps { + label: string; + percent: number; + color: string; +} + +export function PixCustomInstallments({ + label = "de desconto", + percent = 10, + color = "c-on-base", +}: IPixCustomInstallmentsProps) { + const data = useProduct(); + + return ( +
+ Promoção de pagamento com o PIX +
+

+ {`R$ ${calculationPercent( + percent, + data?.product?.priceRange.sellingPrice.highPrice + )}`} +

+

+ {`${percent}% ${label}`} +

+
+
+ ); +} + +PixCustomInstallments.schema = { + title: "Promoção de pagamento com o PIX", + type: "object", + properties: { + label: { + type: "string", + }, + percent: { + type: "number", + }, + + color: { + type: "string", + }, + }, +}; diff --git a/react/components/PixCustomInstallments/index.ts b/react/components/PixCustomInstallments/index.ts new file mode 100644 index 0000000..5c72fa3 --- /dev/null +++ b/react/components/PixCustomInstallments/index.ts @@ -0,0 +1 @@ +export { PixCustomInstallments } from "./_PixCustomInstallments"; diff --git a/react/components/Placeholder/_Placeholder.tsx b/react/components/Placeholder/_Placeholder.tsx new file mode 100644 index 0000000..6f3dce5 --- /dev/null +++ b/react/components/Placeholder/_Placeholder.tsx @@ -0,0 +1,53 @@ +import React, { useEffect } from "react"; + +interface IPlaceholderProps { + text: string; +} + +export function Placeholder({ text = "Digite seu CEP" }: IPlaceholderProps) { + function waitForElm(selector: any) { + return new Promise((resolve) => { + if (document.querySelector(selector)) { + return resolve(document.querySelector(selector)); + } + + const observer = new MutationObserver(() => { + if (document.querySelector(selector)) { + resolve(document.querySelector(selector)); + observer.disconnect(); + } + }); + + observer.observe(document.body, { + childList: true, + subtree: true, + }); + }); + } + + async function ShippingSimulatorPlaceholder(): Promise { + const shippingSimulatorInput = (await waitForElm( + ".vtex-store-components-3-x-shippingContainer .vtex-address-form-4-x-input" + )) as any; + + if (shippingSimulatorInput !== null || shippingSimulatorInput) { + shippingSimulatorInput.placeholder = text; + } + } + + useEffect(() => { + ShippingSimulatorPlaceholder(); + }, []); + + return <>; +} + +Placeholder.schema = { + title: "Placeholder do shipping-simulation", + type: "object", + properties: { + text: { + type: "string", + }, + }, +}; diff --git a/react/components/Placeholder/index.ts b/react/components/Placeholder/index.ts new file mode 100644 index 0000000..6e61fb4 --- /dev/null +++ b/react/components/Placeholder/index.ts @@ -0,0 +1 @@ +export { Placeholder } from "./_Placeholder"; diff --git a/react/global.d.ts b/react/global.d.ts new file mode 100644 index 0000000..1eabbb4 --- /dev/null +++ b/react/global.d.ts @@ -0,0 +1 @@ +declare module "*.module.css"; diff --git a/react/package.json b/react/package.json index aa90575..45352bb 100644 --- a/react/package.json +++ b/react/package.json @@ -24,11 +24,11 @@ "@vtex/tsconfig": "^0.4.4", "graphql": "^14.6.0", "typescript": "3.9.7", + "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles", + "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context", "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime", "vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout", "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text", - "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide", - "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context", - "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles" + "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide" } } diff --git a/react/placeholder.ts b/react/placeholder.ts new file mode 100644 index 0000000..b1a7ed3 --- /dev/null +++ b/react/placeholder.ts @@ -0,0 +1 @@ +export {Placeholder as default} from "./components/Placeholder" \ No newline at end of file diff --git a/react/tsconfig.json b/react/tsconfig.json index a26a540..9d83892 100644 --- a/react/tsconfig.json +++ b/react/tsconfig.json @@ -8,4 +8,4 @@ "target": "es2017" }, "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"] -} \ No newline at end of file +} diff --git a/react/yarn-error.log b/react/yarn-error.log index d9a21eb..dd0ebde 100644 --- a/react/yarn-error.log +++ b/react/yarn-error.log @@ -1,30 +1,30 @@ Arguments: - C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\yarn\bin\yarn.js + /home/usuario/.nvm/versions/node/v18.12.1/bin/node /usr/bin/yarn add @types/m3-utils PATH: - C:\Program Files\Common Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Users\victo\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Program Files\Git\cmd;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\vtex\bin;C:\Program Files\MySQL\MySQL Server 8.0\bin;C:\Python27;C:\Program Files\mingw-w64\x86_64-8.1.0-posix-seh-rt_v6-rev0\mingw64\bin;C:\Program Files\Oracle\VirtualBox;C:\Users\victo\Documents\flutter\bin;C:\Program Files\Android\Android Studio\bin;C:\Users\victo\AppData\Local\Programs\Python\Python310\Scripts\;C:\Users\victo\AppData\Local\Programs\Python\Python310\;C:\Users\victo\AppData\Local\Microsoft\WindowsApps;C:\Users\victo\AppData\Local\Programs\Microsoft VS Code\bin;C:\Program Files\heroku\bin;C:\Users\victo\AppData\Local\Programs\Hyper\resources\bin + /home/usuario/.cache/activestate/bin:/home/usuario/.local/ActiveState/StateTool/release/bin:/home/usuario/.nvm/versions/node/v18.12.1/bin:/home/usuario/.cache/activestate/bin:/home/usuario/.local/ActiveState/StateTool/release/bin:/home/usuario/bin:/home/usuario/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin Yarn version: - 1.22.17 + 1.22.19 Node version: - 14.18.1 + 18.12.1 Platform: - win32 x64 + linux x64 Trace: - Error: http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-contex@0.10.0/public/@types/vtex.product-context: Request failed "500 Internal Server Error" - at ResponseError.ExtendableBuiltin (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:696:66) - at new ResponseError (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:802:124) - at Request. (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:67099:16) - at Request.emit (events.js:400:28) - at Request.module.exports.Request.onRequestResponse (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:141760:10) - at ClientRequest.emit (events.js:400:28) - at HTTPParser.parserOnIncomingClient (_http_client.js:647:27) - at HTTPParser.parserOnHeadersComplete (_http_common.js:127:17) - at Socket.socketOnData (_http_client.js:515:22) - at Socket.emit (events.js:400:28) + Error: https://registry.yarnpkg.com/@types%2fm3-utils: Not found + at params.callback [as _callback] (/usr/lib/node_modules/yarn/lib/cli.js:66145:18) + at self.callback (/usr/lib/node_modules/yarn/lib/cli.js:140890:22) + at Request.emit (node:events:513:28) + at Request. (/usr/lib/node_modules/yarn/lib/cli.js:141862:10) + at Request.emit (node:events:513:28) + at IncomingMessage. (/usr/lib/node_modules/yarn/lib/cli.js:141784:12) + at Object.onceWrapper (node:events:627:28) + at IncomingMessage.emit (node:events:525:35) + at endReadableNT (node:internal/streams/readable:1359:12) + at process.processTicksAndRejections (node:internal/process/task_queues:82:21) npm manifest: { @@ -34,6 +34,7 @@ npm manifest: "dependencies": { "apollo-client": "^2.6.8", "jquery": "^3.6.0", + "m3-utils": "^0.1.0", "react": "^16.12.0", "react-apollo": "^3.1.3", "react-dom": "^16.12.0", @@ -53,11 +54,12 @@ npm manifest: "@vtex/tsconfig": "^0.4.4", "graphql": "^14.6.0", "typescript": "3.9.7", + "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles", + "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context", "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime", "vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout", "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text", - "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide", - "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-contex@0.10.0/public/@types/vtex.product-context" + "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide" } } @@ -631,6 +633,11 @@ Lockfile: dependencies: js-tokens "^3.0.0 || ^4.0.0" + m3-utils@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/m3-utils/-/m3-utils-0.1.0.tgz#0e0ebe1a108263ab23ce53bdee8beab5a1a0e4a8" + integrity sha512-N8bdQwPBeiTnOIzWKweN4rI683Lmm/xbXpfy1PqQLjqIZZcgh1eidq9Spab1RogK3DPQ9hlmvAyl4wGW6rmJmQ== + memoize-one@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045" @@ -841,6 +848,14 @@ Lockfile: resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb" integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA== + "vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles": + version "1.0.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles#336b23ef3a9bcb2b809529ba736783acd405d081" + + "vtex.product-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context": + version "0.10.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context#c5e2a97b404004681ee12f4fff7e6b62157786cc" + "vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime": version "8.130.0" resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime#6958e1017c423c0906eae3500bad70d3fb353a98" diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..36fbbdf 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,8 +2,6 @@ "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", "__fold__", "rich-text#shelf-title", @@ -11,7 +9,7 @@ "info-card#home", "rich-text#question", "rich-text#link", - "newsletter" + "flex-layout.row#newsletter" ] }, diff --git a/store/blocks/newsletter.json b/store/blocks/newsletter.json new file mode 100644 index 0000000..f697cef --- /dev/null +++ b/store/blocks/newsletter.json @@ -0,0 +1,65 @@ +{ + "flex-layout.row#newsletter": { + "props": { + "blockClass": "newsletter", + "preserveLayoutOnMobile": true + }, + + "children": ["newsletter-form"] + }, + + "newsletter-form": { + "props": { + "blockClass": "newsletter" + }, + + "children": [ + "rich-text#newsletter-title", + "rich-text#newsletter-subtitle", + "flex-layout.row#newsletter-inputs" + ] + }, + + "flex-layout.row#newsletter-inputs": { + "props": { + "preserveLayoutOnMobile": true, + "blockClass": "newsletterInputs", + "colSizing": "auto" + }, + "children": ["newsletter-input-email", "newsletter-submit"] + }, + + "newsletter-input-email": { + "props": { + "placeholderText": "Digite seu E-mail", + "errorMessage": "E-mail ínvalido" + } + }, + + "newsletter-submit": { + "props": { + "submitButtonLabel": "ENVIAR" + } + }, + + "rich-text#newsletter-title": { + "props": { + "blockClass": "newsletterTitle", + "text": "## Assine nossa newsletter", + "textAlignment": "CENTER", + "textPosition": "CENTER", + "font": "t-body", + "textColor": "c-on-base--inverted" + } + }, + + "rich-text#newsletter-subtitle": { + "props": { + "blockClass": "newsletterSubtitle", + "text": "Receba ofertas e novidades por e-mail", + "textAlignment": "CENTER", + "textPosition": "CENTER", + "textColor": "c-on-base-300" + } + } +} 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-shelf.jsonc b/store/blocks/pdp/product-shelf.jsonc new file mode 100644 index 0000000..f6f438c --- /dev/null +++ b/store/blocks/pdp/product-shelf.jsonc @@ -0,0 +1,102 @@ +{ + "html#pdp-slider-shelf-title": { + "children": ["rich-text#pdp-shelf-title"] + }, + + "html#pdp-slider-shelf": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#pdp-shelf"] + }, + + "html#list-context-pdp-shelf": { + "props": { + "testId": "product-summary-list" + }, + "children": ["list-context.product-list#pdp-shelf"] + }, + + "list-context.product-list#pdp-shelf": { + "blocks": ["product-summary.shelf#pdp-shelf"], + "children": ["html#pdp-slider-shelf"] + }, + + "rich-text#pdp-shelf-title": { + "props": { + "text": "## Você também pode gostar:", + "textPosition": "CENTER", + "textAlignment": "CENTER", + "textColor": "c-on-base-200", + "blockClass": "productShelfTitle" + } + }, + + "slider-layout#pdp-shelf": { + "props": { + "blockClass": "productShelf", + "itemsPerPage": { + "desktop": 4, + "(min-width:1025px)": 4, + "(min-width:769px)": 3, + "tablet": 2, + "phone": 2 + }, + "fullWidth": true + } + }, + + "html#product-summary": { + "props": { + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image#pdp-shelf", + "product-summary-name", + "product-list-price#product-summary", + "product-selling-price#product-summary" + ] + }, + + "product-list-price#product-summary": { + "props": { + "blockClass": "productSummary", + "markers": ["highlight"], + "message": "de {listPriceValue} por" + } + }, + + "product-selling-price#product-summary": { + "props": { + "blockClass": "productSummary" + } + }, + + "product-summary.shelf#pdp-shelf": { + "children": ["html#product-summary"] + }, + + "product-summary-image#pdp-shelf": { + "props": { + "showBadge": false, + "alabelSellingPricespectRatio": "1:1", + "aspectRatio": "1:1", + "maxHeight": { + "(min-width: 1921px)": "434.4px", + "desktop": "314.4px", + "(min-width:1025px)": "314.4px", + "(min-width:769px)": "291.2px", + "tablet": "291.2px", + "phone": "124.8px" + }, + "width": { + "(min-width: 1921px)": "434.4px", + "desktop": "314.4px", + "(min-width:1025px)": "314.4px", + "(min-width:769px)": "291.2px", + "tablet": "291.2px", + "phone": "124.8px" + } + } + } +} diff --git a/store/blocks/pdp/product-specifications-table.jsonc b/store/blocks/pdp/product-specifications-table.jsonc index add3a64..b235d6b 100644 --- a/store/blocks/pdp/product-specifications-table.jsonc +++ b/store/blocks/pdp/product-specifications-table.jsonc @@ -1,83 +1,210 @@ { - "product-specification-group#table": { - "children": [ - "flex-layout.row#spec-group" - ] - }, - "flex-layout.row#spec-group": { + "flex-layout.row#product-specifications": { "props": { - "blockClass": "productSpecificationGroup" + "blockClass": "productSpecifications" }, - "children": [ - "flex-layout.col#spec-group" - ] + + "children": ["html#product-description"] }, - "flex-layout.col#spec-group": { - "children": [ - "flex-layout.row#spec-group-name", - "product-specification" - ] - }, - "flex-layout.row#spec-group-name": { + + "html#product-description": { "props": { - "blockClass": "productSpecificationGroupName" + "testId": "product-description" }, + "children": ["tab-layout#product-specification"] + }, + + "tab-layout#product-specification": { "children": [ - "product-specification-text#group" + "tab-list#product-specification", + "tab-content#product-specification" ] }, - "product-specification": { - "children": [ - "flex-layout.row#spec-item" - ] - }, - "flex-layout.row#spec-item": { + + "tab-list#product-specification": { "props": { - "blockClass": "productSpecification" + "blockClass": "ProductSpecificationTabList" }, + "children": [ - "flex-layout.col#spec-name", - "flex-layout.col#spec-value" + "tab-list.item#specification-1", + "tab-list.item#specification-2", + "tab-list.item#specification-3", + "tab-list.item#specification-4", + "tab-list.item#specification-5" ] }, - "flex-layout.col#spec-name": { + + "tab-list.item#specification-1": { "props": { - "blockClass": "productSpecificationName", - "width": { - "mobile": "50%", - "desktop": "25%" + "tabId": "descriptionSpecificationsId", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#specification-2": { + "props": { + "tabId": "productTableSpecificationsId", + "label": "Especificações" + } + }, + + "tab-list.item#specification-3": { + "props": { + "tabId": "productVendorId", + "label": "Vendedor" + } + }, + + "tab-list.item#specification-4": { + "props": { + "tabId": "productLocationId", + "label": "Localização" + } + }, + + "tab-list.item#specification-5": { + "props": { + "tabId": "productFAQsId", + "label": "FAQs" + } + }, + + "tab-content#product-specification": { + "children": [ + "tab-content.item#specification-1", + "tab-content.item#specification-2", + "tab-content.item#specification-3", + "tab-content.item#specification-4", + "tab-content.item#specification-5" + ] + }, + "tab-content.item#specification-1": { + "children": ["flex-layout.row#product-specification-1"], + "props": { + "tabId": "descriptionSpecificationsId" + } + }, + "tab-content.item#specification-2": { + "children": ["flex-layout.row#product-specification-2"], + "props": { + "tabId": "productTableSpecificationsId" + } + }, + + "tab-content.item#specification-3": { + "children": ["flex-layout.row#product-specification-1"], + "props": { + "tabId": "productVendorId" + } + }, + + "tab-content.item#specification-4": { + "children": ["flex-layout.row#product-specification-2"], + "props": { + "tabId": "productLocationId" + } + }, + + "tab-content.item#specification-5": { + "children": ["flex-layout.row#product-specification-1"], + "props": { + "tabId": "productFAQsId" + } + }, + + "flex-layout.row#product-specification-1": { + "props": { + "blockClass": "productSpecificationItemContainer", + "colGap": { + "desktop": 7, + "(min-width:1025px)": 7, + "(min-iwdth:769px)": 0, + "tablet": 0, + "phone": 0 + }, + "marginTop": 7, + "marginBottom": 5, + "border": "bottom", + "borderWidth": 1, + "borderColor": "action-third" + }, + + "children": [ + "product-images#product-specification", + "flex-layout.row#description-1" + ] + }, + + "flex-layout.row#product-specification-2": { + "props": { + "blockClass": "productSpecificationItemContainer", + "colGap": { + "desktop": 7, + "(min-width:1025px)": 7, + "(min-iwdth:769px)": 0, + "tablet": 0, + "phone": 0 + }, + "marginTop": 7, + "marginBottom": 5, + "border": "bottom", + "borderWidth": 1, + "borderColor": "action-third" + }, + + "children": [ + "product-images#product-specification", + "flex-layout.row#description-2" + ] + }, + + "product-images#product-specification": { + "props": { + "aspectRatio": "1:1", + "displayMode": "first-image", + "zoomMode": "disabled" + } + }, + + "flex-layout.row#description-1": { + "props": { + "marginBottom": 7, + "marginTop": { + "desktop": 0, + "(min-width:1025px)": 0, + "(min-width:769px)": 5, + "tablet": 5, + "phone": 5 } }, - "children": [ - "product-specification-text#specification" - ] + "children": ["product-description#product-specification-1"] }, - "flex-layout.col#spec-value": { + + "flex-layout.row#description-2": { "props": { - "blockClass": "productSpecificationValue" + "marginBottom": 7, + "marginTop": { + "desktop": 0, + "(min-width:1025px)": 0, + "(min-width:769px)": 5, + "tablet": 5, + "phone": 5 + } }, - "children": [ - "product-specification-values" - ] + "children": ["product-description#product-specification-2"] }, - "product-specification-values": { - "children": [ - "product-specification-text#value" - ] - }, - "product-specification-text#group": { + + "product-description#product-specification-1": { "props": { - "message": "{groupName}" + "collapseContent": false } }, - "product-specification-text#specification": { + + "product-description#product-specification-2": { "props": { - "message": "{specificationName}" - } - }, - "product-specification-text#value": { - "props": { - "message": "{specificationValue}" + "collapseContent": false, + "title": "Descrição" } } } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..500a8fa 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,35 +3,91 @@ "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#product-specifications", + "html#pdp-slider-shelf-title", + "flex-layout.row#list-context-pdp-shelf", + "flex-layout.row#newsletter", "product-questions-and-answers" ] }, + + "flex-layout.row#list-context-pdp-shelf": { + "props": { + "blockClass": "productShelf" + }, + "children": ["html#list-context-pdp-shelf"] + }, + "html#breadcrumb": { "props": { "tag": "section", "testId": "breadcrumbs", "blockClass": "pdp-breadcrumb" }, - "children": ["breadcrumb"] + "children": ["breadcrumb#pdp-breadcrumb"] }, - "flex-layout.row#specifications-title": { - "children": ["rich-text#specifications"] - }, - "rich-text#specifications": { + + "breadcrumb#pdp-breadcrumb": { "props": { - "text": "##### Product Specifications" + "homeIconSize": 0, + "showOnMobile": true } }, - "flex-layout.row#description": { + + "html#product-images": { "props": { - "marginBottom": 7 + "blockClass": "productImages", + "testId": "product-images" }, - "children": ["product-description"] + "children": ["flex-layout.row#product-image"] }, + + "flex-layout.row#product-image": { + "title": "LAYOUT: exibição do carossel de images do produto", + "children": ["product-images"] + }, + + "product-images": { + "title": "BLOCO: exibição do carossel de imagens do produto", + "props": { + "aspectRatio": "1:1", + "thumbnailAspectRatio": "1:1", + "thumbnailsOrientation": "horizontal", + "displayThumbnailsArrows": false, + "thumbnailVisibility": "visible", + "showNavigationArrows": false, + "showPaginationDots": false, + "thumbnailMaxHeight": 90 + } + }, + + "flex-layout.row#product-main": { + "props": { + "colGap": { + "desktop": 7, + "(min-width:1025px)": 7, + "tablet": 0, + "phone": 0 + }, + "marginTop": 5, + "marginBottom": 7, + "preserveLayoutOnMobile": false, + "blockClass": "productMain" + }, + "children": ["flex-layout.col#stack", "flex-layout.row#right-col"] + }, + + "stack-layout": { + "props": { + "blockClass": "product" + }, + "children": [ + "html#product-images", + "product-bookmark", + "product-specification-badges" + ] + }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -43,28 +99,6 @@ "Else": "flex-layout.row#product-availability" } }, - "flex-layout.row#product-main": { - "props": { - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 - }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] - }, - - "stack-layout": { - "props": { - "blockClass": "product" - }, - "children": [ - "flex-layout.row#product-image", - "product-bookmark", - "product-specification-badges" - ] - }, "product-specification-badges": { "props": { @@ -78,74 +112,211 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": { + "(min-width:1921px)": "49.130434783%", + "(min-width:1025px)": "48.823529412%", + "(min-width:769px)": "100%", + "desktop": "48.823529412%", + "tablet": "100%", + "phone": "100%" + }, "rowGap": 0 } }, - "flex-layout.row#product-image": { - "children": ["product-images"] - }, - "product-images": { + "flex-layout.row#right-col": { "props": { - "aspectRatio": { - "desktop": "auto", - "phone": "16:9" - }, - "displayThumbnailsArrows": true - } + "marginTop": { + "desktop": 0, + "(min-width:1025px)": 0, + "(min-width:769px)": 7, + "tablet": 7, + "phone": 7 + } + }, + "children": ["flex-layout.col#right-col"] }, + "flex-layout.col#right-col": { "props": { + "blockClass": "productInformations", "preventVerticalStretch": true, "rowGap": 0 }, "children": [ "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", - "product-installments", - "product-separator", - "product-identifier.product", - "sku-selector", - "product-quantity", - "product-assembly-options", + "html#product-installments", + "flex-layout.row#pix-custom-installments", + "html#sku-selector", "product-gifts", - "flex-layout.row#buy-button", + "flex-layout.row#pdp-buy-actions", "availability-subscriber", - "shipping-simulator", - "share#default" + "html#shipping-simulator" ] }, + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator" + }, + "children": [ + "shipping-placeholder", + "shipping-simulator#pdp-shipping-simulator" + ] + }, + + "shipping-simulator#pdp-shipping-simulator": { + "props": { + "placeholder": "OKOKOKOKO" + } + }, + + "flex-layout.row#pix-custom-installments": { + "props": { + "marginBottom": 5 + }, + "children": ["html#pix-custom-installments"] + }, + + "html#pix-custom-installments": { + "props": { + "testId": "pix-price" + }, + + "children": ["pix-custom-installments"] + }, + + "pix-custom-installments": { + "props": { + "text": "de desconto" + } + }, + + "html#product-installments": { + "props": { + "testId": "product-installments" + }, + + "children": ["product-installments"] + }, + + "product-installments": { + "props": { + "markers": ["discount"], + "message": "{installmentsNumber}x {installmentValue}{hasInterest, select, true { {interestRate} de juros} false { sem juros}}" + } + }, + "flex-layout.row#product-name": { "props": { - "marginBottom": 3 + "marginBottom": 5, + "preserveLayoutOnMobile": true }, + + "children": ["flex-layout.col#product-name"] + }, + + "flex-layout.col#product-name": { + "props": { + "blockClass": "productName", + "rowGap": 3 + }, + + "children": ["html#product-name", "html#pdp-identifier"] + }, + + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": ["vtex.store-components:product-name"] }, + "html#pdp-identifier": { + "props": { + "testId": "product-code" + }, + "children": ["product-identifier.product#pdp-identifier"] + }, + + "product-identifier.product#pdp-identifier": { + "props": { + "label": "hide" + } + }, + + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + + "children": ["sku-selector"] + }, + "sku-selector": { "props": { + "showValueForVariation": "none", "variationsSpacing": 3, "showValueNameForImageVariation": true } }, + "flex-layout.row#pdp-buy-actions": { + "props": { + "marginTop": 5, + "marginBottom": 5, + "colSizing": "auto", + "colGap": 5, + "rowGap": 5, + "blockClass": "productActions" + }, + "children": ["html#pdp-product-quantity", "html#add-to-cart-button"] + }, + "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "productAddToCart" }, - "children": ["add-to-cart-button"] + "children": ["html#add-to-cart-button"] + }, + + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button" + }, + "children": ["add-to-cart-button#pdp-add-to-cart-button"] + }, + + "html#pdp-product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, + + "product-quantity": { + "props": { + "showLabel": false + } + }, + + "add-to-cart-button#pdp-add-to-cart-button": { + "props": { + "text": "Adicionar à sacola", + "blockClass": "productAddToCartButton" + } }, "flex-layout.row#product-availability": { "props": { "colGap": 7, - "marginTop": 4, + "rowGap": 7, + "marginTop": 5, "marginBottom": 7, - "paddingTop": 7 + "blockClass": "productAvailability" }, "children": [ "flex-layout.col#stack", @@ -160,26 +331,15 @@ }, "children": [ "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, + "flex-layout.row#availability": { "props": { "blockClass": "message-availability" }, "children": ["availability-subscriber"] - }, - - "share#default": { - "props": { - "social": { - "Facebook": true, - "WhatsApp": true, - "Twitter": false, - "Pinterest": true - } - } } } diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..8199041 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -1,4 +1,12 @@ { + "html#product-selling-price": { + "props": { + "testId": "product-price" + }, + + "children": ["product-selling-price"] + }, + "flex-layout.row#selling-price": { "props": { "colGap": 2, @@ -6,9 +14,7 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": [ - "product-selling-price" - ] + "children": ["html#product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +25,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.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..5b440b6 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -1,14 +1,11 @@ { - "product-summary.shelf": { + "product-summary.shelf#pdp-product-summary": { "children": [ "stack-layout#prodsum", "product-summary-name", - "flex-layout.col#productRating", - "product-summary-space", "product-list-price#summary", "flex-layout.row#selling-price-savings", - "product-installments#summary", - "add-to-cart-button" + "product-installments#summary" ] }, "flex-layout.col#productRating": { @@ -19,11 +16,7 @@ }, "stack-layout#prodsum": { - "children": [ - "product-summary-image#shelf", - "vtex.product-highlights@2.x:product-highlights#collection", - "modal-trigger#quickview" // Check quickview.jsonc - ] + "children": ["product-summary-image#shelf"] }, "product-summary-image#shelf": { @@ -64,10 +57,7 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": [ - "product-selling-price#summary", - "product-price-savings#summary" - ] + "children": ["product-selling-price#summary"] }, "product-installments#summary": { "props": { @@ -81,9 +71,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..b9655d6 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -1,9 +1,14 @@ { - "example-component": { - "component": "Example" - }, "html": { "component": "html", "composition": "children" + }, + + "pix-custom-installments": { + "component": "PixCustomInstallments" + }, + + "shipping-placeholder": { + "component": "placeholder" } } diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..a7eb941 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,17 @@ +@font-face { + font-family: "Open Sans"; + src: url(assets/fonts/OpenSans-Bold.ttf); + font-weight: 700; +} + +@font-face { + font-family: "Open Sans"; + src: url(assets/fonts/OpenSans-Regular.ttf); + font-weight: 400; +} + +@font-face { + font-family: "Open Sans"; + src: url(assets/fonts/OpenSans-Light.ttf); + font-weight: 300; +} diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..68aab54 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -1,349 +1,356 @@ { - "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": "#000000", + "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": "#000000", + "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": "#000000", + "action-secondary": "#eef3f7", + "link": "#000000", + "emphasis": "#f71963", + "disabled": "#979899", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#9292927a", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "visited-text": { + "link": "#000000" + }, + "hover-text": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "link": "#000000", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "active-text": { + "link": "#000000", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "border": { + "action-primary": "#000000", + "action-secondary": "#eef3f7", + "action-third": "#b9b9b9", + "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": "#000000", + "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": "#B9B9B999", + + "base-100": "#000000", + "base-200": "#575757", + "base-300": "#929292", + "base--inverted": "#ffffff", + "action-primary": "#ffffff", + "action-secondary": "#000000", + "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": "#000000", + "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, 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, arial, sans-serif", + "fontWeight": "400", + "fontSize": "1.5rem", + "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, arial, sans-serif", + "fontWeight": "400", + "fontSize": "0.875rem", + "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, arial, sans-serif", + "fontWeight": "300", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-5": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-6": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "body": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "small": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "0.875rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "mini": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "0.75rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "action": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "500", + "fontSize": "1rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--small": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "500", + "fontSize": "0.875rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--large": { + "fontFamily": "Open Sans, 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/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..3ca5032 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,54 @@ +/* +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 { + width: 100%; + display: inline-flex; + padding: 0 40px; + margin-top: 16px; + flex-wrap: wrap; + flex-basis: 100%; + align-items: baseline; +} +@media screen and (min-width: 1921px) { + .container { + width: 75%; + margin: 0 auto; + } +} + +.termArrow { + padding: 0; +} +.termArrow .caretIcon { + display: none; +} + +.term { + font-size: 0; +} + +.homeLink { + padding-left: 0; +} +.homeLink::before { + content: "Home"; + font-size: 14px; + line-height: 20.12px; +} + +.arrow--1 .link { + font-size: 14px; + line-height: 20.12px; +} + +.arrow--2 .link { + font-size: 14px; + line-height: 20.12px; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..64a2c4c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +1,12 @@ +/* +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 */ .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.5rem; @@ -9,14 +18,12 @@ 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; @@ -43,7 +50,7 @@ } .flexRow--deals { - background-color: #0F3E99; + background-color: #0f3e99; padding: 14px 0px; } @@ -96,3 +103,162 @@ .flexRow--addToCartRow { padding-bottom: 1rem; } + +.flexRow--productAvailability, +.flexRow--productMain { + padding: 0 40px; +} +@media screen and (min-width: 1921px) { + .flexRow--productAvailability, + .flexRow--productMain { + width: 75%; + margin: 0 auto; + } +} + +@media screen and (max-width: 1024px) { + .flexRowContent--productSpecificationItemContainer, + .flexRowContent--productAvailability, + .flexRowContent--productMain { + flex-direction: column !important; + } + .flexRowContent--productSpecificationItemContainer .stretchChildrenWidth, + .flexRowContent--productAvailability .stretchChildrenWidth, + .flexRowContent--productMain .stretchChildrenWidth { + width: 100% !important; + } +} + +@media screen and (min-width: 1025px) { + .flexCol--productName { + align-items: flex-end; + } +} + +.flexRowContent--productActions .stretchChildrenWidth { + width: auto !important; +} +@media screen and (min-width: 768px) { + .flexRowContent--productActions .stretchChildrenWidth:last-child { + flex-grow: 1; + } +} + +.flexRowContent--productActions { + flex-direction: column; +} +@media screen and (min-width: 768px) { + .flexRowContent--productActions { + flex-direction: row; + } +} +.flexRowContent--productActions :global(.vtex-button) { + height: 72px; + line-height: 24.51px; + border: 0; + border-radius: 0; +} +@media screen and (min-width: 768px) { + .flexRowContent--productActions :global(.vtex-button) { + height: 49px; + } +} +.flexRowContent--productActions :global(.vtex-button) :global(.vtex-button__label) { + justify-content: stretch; + padding: 12px 64px; +} +.flexRowContent--productActions :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + flex-grow: 1; + width: 100%; +} +.flexRowContent--productActions :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonText) { + width: 96%; +} + +.flexRow--productSpecifications { + padding: 0 40px; +} +@media screen and (min-width: 1921px) { + .flexRow--productSpecifications { + width: 75%; + margin: 0 auto; + } +} + +@media screen and (min-width: 1025px) { + .flexRow--productSpecificationItemContainer { + padding: 0 32px; + } +} + +.flexRowContent--productSpecificationItemContainer { + border-width: 1px !important; +} +@media screen and (min-width: 1025px) { + .flexRowContent--productSpecificationItemContainer { + border: none; + } +} +@media screen and (min-width: 1921px) { + .flexRowContent--productSpecificationItemContainer { + margin-top: 64px; + } +} + +.flexRow--productShelf { + padding: 0 40px; +} +@media screen and (min-width: 1921px) { + .flexRow--productShelf { + width: 75%; + margin: 0 auto; + } +} + +.flexRow--newsletter { + background-color: #000; + margin-top: 32px; +} +@media screen and (min-width: 769px) { + .flexRow--newsletter { + margin-top: 64px; + } +} +.flexRow--newsletter .flexRowContent--newsletter { + max-width: 774px; + margin: 0 auto; + padding: 64px 16px 32px; +} +@media screen and (min-width: 1025px) { + .flexRow--newsletter .flexRowContent--newsletter { + padding: 32px 0px 16px; + } +} + +.flexRowContent--newsletterInputs .stretchChildrenWidth:first-child { + flex-grow: 1; +} +.flexRowContent--newsletterInputs .stretchChildrenWidth:first-child :global(.vtex-input-prefix__group) { + border-radius: 0; + border: none; +} +.flexRowContent--newsletterInputs .stretchChildrenWidth:first-child :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + border-radius: 0; + background-color: #000; + padding-left: 0; + border-bottom: 1px solid #fff; +} +.flexRowContent--newsletterInputs :global(.vtex-store-newsletter-1-x-formSubmitContainer) :global(.vtex-button) { + position: relative; + border-radius: 0; + border: none; +} +.flexRowContent--newsletterInputs :global(.vtex-store-newsletter-1-x-formSubmitContainer) :global(.vtex-button)::before { + content: ""; + width: 100%; + height: 2px; + background-color: #fff; + position: absolute; + left: 0; + bottom: 0px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..40cfb7e 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,61 +1,94 @@ +/* +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 */ .listPrice { color: #727273; - margin-bottom: .25rem; - font-size: 1rem; + margin-bottom: 0.25rem; + font-size: 0.75rem; + line-height: 16.34px; +} +@media screen and (min-width: 1025px) { + .listPrice { + font-size: 0.875rem; + line-height: 19.07px; + } } .sellingPrice { - color: #3f3f40; + color: #000000; font-size: 1.25rem; } .sellingPriceValue { - font-size: 2.25rem; + font-size: 1.125rem; + line-height: 24.51px; font-weight: 700; } +@media screen and (min-width: 1025px) { + .sellingPriceValue { + font-size: 1.5rem; + line-height: 32.68px; + } +} .installments { + display: inline-block; color: #727273; margin-bottom: 1rem; } .savings { font-weight: 500; - color: #79B03A; + color: #79b03a; } .sellingPriceValue--summary { font-size: 1.25rem; font-weight: 600; - color: #2E2E2E; + color: #2e2e2e; +} + +.sellingPriceValue--productSummary { + display: block; } .savings--summary { - background: #8BC34A; + background: #8bc34a; border-radius: 1000px; align-items: center; display: flex; - padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; } .savings-discount--summary { font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding-left: 0.5rem; padding-right: 0.5rem; } .listPrice--summary { margin-bottom: 0.25rem; - font-size: .875rem; + font-size: 0.875rem; +} + +.listPrice--productSummary { + display: block; + text-decoration: line-through; + margin-bottom: 8px; } .installments--summary { @@ -74,6 +107,6 @@ font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} +} \ 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..47487ee --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,32 @@ +/* +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 :global(.vtex-numeric-stepper-wrapper) { + width: 128px; + min-height: 49px; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper-container) { + height: 49px; + border: 1px solid #cccccc; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper__input) { + width: 100%; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper__input), +.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button), +.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) { + height: 100%; + border: none; + background-color: transparent; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button__text), +.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button__text) { + font-size: 16px; + line-height: 21.79px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..b9927e0 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,4 +1,14 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { +/* +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 */ +.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, +.skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { border-radius: 50%; } @@ -16,21 +26,50 @@ display: none; } } +.element { + padding: 0; +} .nameContainer { - justify-content: start; padding-top: 1rem; - padding-bottom: 1rem; + padding-bottom: 8px; } .brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; + color: #000000; + font-size: 0.875rem; + line-height: 19.07px; +} +@media screen and (min-width: 1025px) { + .brandName { + font-size: 1.125rem; + line-height: 24.51px; + } } .container { - text-align: start; + text-align: center; + max-width: none !important; + margin: 0 4px; +} +@media screen and (min-width: 769px) { + .container { + max-width: 291.2px !important; + } +} +@media screen and (min-width: 1025px) { + .container { + max-width: 314.4px !important; + } +} +@media screen and (min-width: 1921px) { + .container { + max-width: 434.4px !important; + } +} + +.priceContainer { + padding-top: 0; } .imageContainer { @@ -40,3 +79,16 @@ .image { border-radius: 0.25rem; } + +.sellingPriceContainer .currencyContainer { + font-weight: 700; + color: #000; + font-size: 1.125rem; + line-height: normal; +} +@media screen and (min-width: 1025px) { + .sellingPriceContainer .currencyContainer { + font-size: 1.5rem; + line-height: normal; + } +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..bfc527c 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,26 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--productShelfTitle { + padding: 0 40px; +} +.container--productShelfTitle .heading { + font-size: 20px; + font-weight: 400; + line-height: 38px; + margin: 0 0 24px; +} +@media screen and (min-width: 769px) { + .container--productShelfTitle .heading { + font-size: 24px; + } +} + +.container--newsletterTitle .heading { + margin: 0; +} + +.container--newsletterSubtitle .paragraph { + margin: 16px; +} \ No newline at end of file diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/vtex.shelf.css similarity index 60% rename from styles/css/agenciamagma.store-theme.css rename to styles/css/vtex.shelf.css index 5e37ba5..34c4328 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/vtex.shelf.css @@ -6,11 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..95e9eaa 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,9 +1,18 @@ +/* +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 */ .sliderLayoutContainer { justify-content: center; } .sliderLayoutContainer--carousel { - background-color: #F0F0F0; + background-color: #f0f0f0; min-height: 450px; } @@ -12,8 +21,8 @@ } .paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; } .layoutContainer--shelf { @@ -25,7 +34,73 @@ .slide--shelf { margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; + padding-left: 0.5rem; + padding-right: 0.5rem; min-height: 550px; } + +.sliderLayoutContainer--productShelf { + width: 100%; + padding: 0 19.2px; +} +@media screen and (min-width: 769px) { + .sliderLayoutContainer--productShelf { + padding: 23.2px; + } +} +@media screen and (min-width: 1025px) { + .sliderLayoutContainer--productShelf { + padding: 0 27.2px; + } +} + +.sliderArrows--productShelf { + width: 12.2px; + height: 29.6px; + padding: 0; + margin: 0; +} +.sliderArrows--productShelf .caretIcon { + display: none; +} + +.sliderLeftArrow--productShelf { + background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-henriquesantos.svg) !important; +} + +.sliderRightArrow--productShelf { + background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-henriquesantos.svg) !important; +} + +.sliderTrackContainer--productShelf { + padding-bottom: 33px; +} +@media screen and (min-width: 769px) { + .sliderTrackContainer--productShelf { + padding-bottom: 41px; + } +} +@media screen and (min-width: 1025px) { + .sliderTrackContainer--productShelf { + padding-bottom: 49px; + } +} + +.paginationDotsContainer--productShelf { + align-items: center; + margin: 0; +} + +.paginationDot--productShelf { + background-color: #000; + width: 10px !important; + height: 10px !important; + transition: 300ms ease; +} + +.paginationDot--productShelf--isActive { + border: 1px solid #000; + background-color: #fff; + width: 17px !important; + height: 17px !important; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..ac3a7ce 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -7,6 +8,325 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; +.container { + padding: 0; +} +@media screen and (min-width: 1025px) { + .container { + min-width: 100%; + } +} + +.productImageTag { + object-fit: fill !important; +} +@media screen and (min-width: 769px) { + .productImageTag { + max-height: 944px !important; + } +} +@media screen and (min-width: 1025px) { + .productImageTag { + max-height: 664px !important; + } +} +@media screen and (min-width: 1921px) { + .productImageTag { + max-height: 904px !important; + } +} + +.carouselGaleryThumbs { + display: block !important; + margin-top: 16px; +} + +.productImagesThumb { + width: 90px !important; + margin-left: 16px; + margin-bottom: 0; +} +.productImagesThumb .thumbImg { + border-radius: 8px; +} +.productImagesThumb:first-child { + margin-left: 0; +} + +.productNameContainer { + color: #575757; + line-height: 34px; +} +@media screen and (max-width: 768px) and (min-width: 375px) { + .productNameContainer { + width: 70.9459459459%; + margin-right: auto; + } +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} + +.skuSelectorSubcontainer--cor .skuSelectorName, +.skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorName::before, +.skuSelectorSubcontainer--tamanho .skuSelectorName::before { + font-size: 14px; + text-transform: uppercase; +} + +.skuSelectorSubcontainer--cor { + order: 1; +} +.skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue { + font-size: 0; + width: 0; + height: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorName::before { + content: "Outros Cores:"; +} + +.skuSelectorSubcontainer--tamanho { + order: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorName::before { + content: "Outros Tamanhos:"; +} + +.skuSelectorOptionsList, +.skuSelectorOptionsList .skuSelectorItem, +.skuSelectorNameContainer { + margin: 0; +} + +.skuSelectorOptionsList { + gap: 16px; +} + +.skuSelectorItem { + width: 40px; + height: 40px; +} +.skuSelectorItem .frameAround, +.skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; +} +.skuSelectorItem .skuSelectorInternalBox { + z-index: unset; +} +.skuSelectorItem .frameAround { + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.diagonalCross { + width: 100%; + background: transparent; +} +.diagonalCross::before { + content: ""; + position: absolute; + left: 50%; + top: 50%; + width: 100%; + height: 1px; + border-top: 1px solid #d5d5d5; + transform: translate(-50%, -50%) rotateZ(-45deg); + z-index: 2; +} + +.skuSelectorItem--selected .skuSelectorItemTextValue { + color: #292929; +} +.skuSelectorItem--selected .diagonalCross { + width: 100%; + background: transparent; +} +.skuSelectorItem--selected .diagonalCross::before { + border-top: 1px solid #292929; +} + +.skuSelectorItemTextValue { + width: 100%; + padding: 0; + display: flex; + justify-content: center; + align-items: center; +} + +.skuSelectorSubcontainer--cor { + margin: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorItem { + width: 48px; + height: 48px; +} + +.shippingContainer { + position: relative; +} +@media screen and (min-width: 769px) { + .shippingContainer { + width: 280px; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) { + position: relative; + width: 100%; + padding: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) { + height: 49px; + border: 1px solid #cccccc; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + display: none; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + text-align: right; +} +@media screen and (min-width: 769px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + text-align: unset; + position: absolute; + right: -56.65%; + top: 70%; + margin-left: 32px; + padding: 0; + transform: translateY(-50%); + } +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input__label)::before { + content: "Calcular frete:"; + font-size: 14px; + line-height: 19.07px; + text-transform: uppercase; + color: inherit; +} +.shippingContainer :global(.vtex-button) { + background-color: #292929; + position: absolute; + top: 27px; + right: 0; + color: #fff; + height: 49px; + width: 49px; + margin: 0; + border: 0; + border-radius: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before { + content: "OK"; + font-size: 14px; +} + +.shippingTable { + border: 0; + margin: 0; + padding: 16px 0 0; + max-width: 326px; + width: 326px; + overflow: auto; +} + +.shippingTableHead { + display: table-header-group !important; +} +.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, +.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, +.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + width: auto; + text-align: left; + color: #292929; + font-weight: 400; + font-size: 14px; + line-height: 19.07px; + text-transform: uppercase; +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableCell { + padding: 15px 0; +} + +.subscriberContainer .title { + font-size: 0; +} +.subscriberContainer .title::before { + content: "Produto indisponível"; + font-size: 14px; + font-weight: 700; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::before { + content: "Deseja saber quando estiver disponível?"; + font-size: 14px; + font-weight: 400; + color: #868686; +} +.subscriberContainer .form .content { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 40px 48px; + gap: 16px 8px; +} +.subscriberContainer .form .input { + margin: 0; + width: 100%; + height: 100%; +} +.subscriberContainer .form .input :global(.vtex-input-prefix__group) { + border: 1px solid #989898; + border-radius: 0; +} +.subscriberContainer .submit { + grid-column: 1/2 span; + margin: 0; +} +.subscriberContainer .submit :global(.vtex-button) { + width: 100%; + height: 100%; + background-color: #000; + color: #fff; + border: 0; + border-radius: 0; +} +.subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label)::before { + content: "Avise-se"; + font-size: 14px; + text-transform: uppercase; +} + +.productDescriptionTitle { + font-size: 20px; + line-height: 32px; + color: #575757; +} +@media screen and (min-width: 1025px) { + .productDescriptionTitle { + font-size: 24px; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..236b36e --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,71 @@ +/* +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 */ +.listContainer--ProductSpecificationTabList { + justify-content: space-between; + border-bottom: 1px solid #b9b9b9; +} +@media screen and (max-width: 1024px) { + .listContainer--ProductSpecificationTabList { + border-top: 1px solid #b9b9b9; + } +} +@media screen and (min-width: 1025px) { + .listContainer--ProductSpecificationTabList { + padding: 0 64px; + } +} +.listContainer--ProductSpecificationTabList .listItem { + position: relative; + padding: 0; + margin: 0; +} +.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) { + border-radius: 0; + color: #bfbfbf; +} +.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) :global(.vtex-button__label) { + padding: 0 16px !important; +} +.listContainer--ProductSpecificationTabList .listItem.listItemActive :global(.vtex-button) { + background-color: transparent; + color: #000; + border: none; +} +@media screen and (min-width: 1025px) { + .listContainer--ProductSpecificationTabList .listItem.listItemActive::before { + content: ""; + width: 100%; + height: 2px; + position: absolute; + left: 0; + bottom: -1px; + background-color: #000; + } +} +@media screen and (max-width: 1024px) { + .listContainer--ProductSpecificationTabList { + width: 100%; + flex-direction: column; + flex-wrap: nowrap; + gap: 16px; + padding: 16px 0; + } + .listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) { + width: 100%; + height: 38px; + } + .listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) :global(.vtex-button__label) { + justify-content: start; + padding: 0 !important; + } +} +.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) { + text-transform: capitalize !important; +} \ 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 deleted file mode 100644 index ea7d5b9..0000000 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ /dev/null @@ -1,8 +0,0 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..3948941 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,51 @@ +.container { + width: 100%; + display: inline-flex; + padding: 0 40px; + margin-top: 16px; + flex-wrap: wrap; + flex-basis: 100%; + align-items: baseline; + + @media screen and (min-width: 1921px) { + width: 75%; + margin: 0 auto; + } +} + +.termArrow { + padding: 0; + + .caretIcon { + display: none; + } +} + +.term { + font-size: 0; +} + +// manipulation fonts with before +.homeLink { + padding-left: 0; + + &::before { + content: "Home"; + font-size: 14px; + line-height: 20.12px; + } +} + +.arrow--1 { + .link { + font-size: 14px; + line-height: 20.12px; + } +} + +.arrow--2 { + .link { + font-size: 14px; + line-height: 20.12px; + } +} 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..2cb2706 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,261 @@ +.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; +} + +.flexRow--productAvailability, +.flexRow--productMain { + padding: 0 40px; + + @media screen and (min-width: 1921px) { + width: 75%; + margin: 0 auto; + } +} + +.flexRowContent--productSpecificationItemContainer, +.flexRowContent--productAvailability, +.flexRowContent--productMain { + @media screen and (max-width: 1024px) { + flex-direction: column !important; + + .stretchChildrenWidth { + width: 100% !important; + } + } +} + +.flexCol--productName { + @media screen and (min-width: 1025px) { + align-items: flex-end; + } +} + +.flexRowContent--productActions { + .stretchChildrenWidth { + width: auto !important; + + &:last-child { + @media screen and (min-width: 768px) { + flex-grow: 1; + } + } + } +} + +.flexRowContent--productActions { + flex-direction: column; + + @media screen and (min-width: 768px) { + flex-direction: row; + } + + :global(.vtex-button) { + height: 72px; + line-height: 24.51px; + border: 0; + border-radius: 0; + + @media screen and (min-width: 768px) { + height: 49px; + } + + :global(.vtex-button__label) { + justify-content: stretch; + padding: 12px 64px; + } + + :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + flex-grow: 1; + width: 100%; + } + + :global(.vtex-add-to-cart-button-0-x-buttonText) { + width: 96%; + } + } +} + +.flexRow--productSpecifications { + padding: 0 40px; + + @media screen and (min-width: 1921px) { + width: 75%; + margin: 0 auto; + } +} + +.flexRow--productSpecificationItemContainer { + @media screen and (min-width: 1025px) { + padding: 0 32px; + } +} + +.flexRowContent--productSpecificationItemContainer { + border-width: 1px !important; + + @media screen and (min-width: 1025px) { + border: none; + } + + @media screen and (min-width: 1921px) { + margin-top: 64px; + } +} + +.flexRow--productShelf { + padding: 0 40px; + + @media screen and (min-width: 1921px) { + width: 75%; + margin: 0 auto; + } +} + +.flexRow--newsletter { + background-color: #000; + margin-top: 32px; + @media screen and (min-width: 769px) { + margin-top: 64px; + } + + .flexRowContent--newsletter { + max-width: 774px; + margin: 0 auto; + padding: 64px 16px 32px; + + @media screen and (min-width: 1025px) { + padding: 32px 0px 16px; + } + } +} + +.flexRowContent--newsletterInputs { + .stretchChildrenWidth:first-child { + flex-grow: 1; + + :global(.vtex-input-prefix__group) { + border-radius: 0; + border: none; + + :global(.vtex-styleguide-9-x-input) { + border-radius: 0; + background-color: #000; + padding-left: 0; + border-bottom: 1px solid #fff; + } + } + } + + :global(.vtex-store-newsletter-1-x-formSubmitContainer) { + :global(.vtex-button) { + position: relative; + border-radius: 0; + border: none; + + &::before { + content: ""; + width: 100%; + height: 2px; + background-color: #fff; + position: absolute; + left: 0; + bottom: 0px; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..20cf57d --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,102 @@ +.listPrice { + color: #727273; + margin-bottom: 0.25rem; + font-size: 0.75rem; + line-height: 16.34px; + + @media screen and (min-width: 1025px) { + font-size: 0.875rem; + line-height: 19.07px; + } +} + +.sellingPrice { + color: #000000; + font-size: 1.25rem; +} + +.sellingPriceValue { + font-size: 1.125rem; + line-height: 24.51px; + font-weight: 700; + + @media screen and (min-width: 1025px) { + font-size: 1.5rem; + line-height: 32.68px; + } +} + +.installments { + display: inline-block; + color: #727273; + margin-bottom: 1rem; +} + +.savings { + font-weight: 500; + color: #79b03a; +} + +.sellingPriceValue--summary { + font-size: 1.25rem; + font-weight: 600; + color: #2e2e2e; +} + +.sellingPriceValue--productSummary { + display: block; +} + +.savings--summary { + background: #8bc34a; + border-radius: 1000px; + align-items: center; + display: flex; + + padding-left: 0.5rem; + padding-right: 0.5rem; + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #ffffff; +} + +.savings-discount--summary { + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #ffffff; + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.listPrice--summary { + margin-bottom: 0.25rem; + font-size: 0.875rem; +} + +.listPrice--productSummary { + display: block; + text-decoration: line-through; + margin-bottom: 8px; +} + +.installments--summary { + margin-bottom: 2rem; + font-size: 0.875rem; +} + +.savings--summaryPercentage { + background: #0f3e99; + border-radius: 1000px; + align-items: center; + display: flex; +} + +.savingsPercentage--summaryPercentage { + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #ffffff; + padding: 0.25rem 0.5rem 0.25rem 0.5rem; +} 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..b1a02d4 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,28 @@ +.quantitySelectorStepper { + :global(.vtex-numeric-stepper-wrapper) { + width: 128px; + min-height: 49px; + } + + :global(.vtex-numeric-stepper-container) { + height: 49px; + border: 1px solid #cccccc; + } + + :global(.vtex-numeric-stepper__input) { + width: 100%; + } + + :global(.vtex-numeric-stepper__input), + :global(.vtex-numeric-stepper__plus-button), + :global(.vtex-numeric-stepper__minus-button) { + height: 100%; + border: none; + background-color: transparent; + } + :global(.vtex-numeric-stepper__minus-button__text), + :global(.vtex-numeric-stepper__plus-button__text) { + font-size: 16px; + line-height: 21.79px; + } +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..b183d03 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,86 @@ +.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, +.skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { + border-radius: 50%; +} + +.container :global(.vtex-modal-layout-0-x-triggerContainer) { + opacity: 0; + transition: opacity 200ms ease-in-out; +} + +.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { + opacity: 1; +} + +@media screen and (max-width: 40em) { + .container :global(.vtex-modal-layout-0-x-triggerContainer) { + display: none; + } +} + +.element { + padding: 0; +} + +.nameContainer { + padding-top: 1rem; + padding-bottom: 8px; +} + +.brandName { + color: #000000; + + font-size: 0.875rem; + line-height: 19.07px; + + @media screen and (min-width: 1025px) { + font-size: 1.125rem; + line-height: 24.51px; + } +} + +.container { + text-align: center; + + max-width: none !important; + + margin: 0 4px; + + @media screen and (min-width: 769px) { + max-width: 291.2px !important; + } + + @media screen and (min-width: 1025px) { + max-width: 314.4px !important; + } + + @media screen and (min-width: 1921px) { + max-width: 434.4px !important; + } +} + +.priceContainer { + padding-top: 0; +} + +.imageContainer { + text-align: center; +} + +.image { + border-radius: 0.25rem; +} + +.sellingPriceContainer { + .currencyContainer { + font-weight: 700; + color: #000; + font-size: 1.125rem; + line-height: normal; + + @media screen and (min-width: 1025px) { + font-size: 1.5rem; + line-height: normal; + } + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..047614e 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,26 @@ +.container--productShelfTitle { + padding: 0 40px; + + .heading { + font-size: 20px; + font-weight: 400; + line-height: 38px; + margin: 0 0 24px; + + @media screen and (min-width: 769px) { + font-size: 24px; + } + } +} + +.container--newsletterTitle { + .heading { + margin: 0; + } +} + +.container--newsletterSubtitle { + .paragraph { + margin: 16px; + } +} diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss new file mode 100644 index 0000000..e69de29 diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..7eec2b1 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,95 @@ +.sliderLayoutContainer { + justify-content: center; +} + +.sliderLayoutContainer--carousel { + background-color: #f0f0f0; + min-height: 450px; +} + +.sliderTrackContainer { + max-width: 100%; +} + +.paginationDotsContainer { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.layoutContainer--shelf { + margin-top: 20px; + margin-bottom: 20px; + max-width: 96rem; + min-height: 550px; +} + +.slide--shelf { + margin-bottom: 25px; + padding-left: 0.5rem; + padding-right: 0.5rem; + min-height: 550px; +} + +.sliderLayoutContainer--productShelf { + width: 100%; + + padding: 0 19.2px; + + @media screen and (min-width: 769px) { + padding: 23.2px; + } + + @media screen and (min-width: 1025px) { + padding: 0 27.2px; + } +} + +.sliderArrows--productShelf { + width: 12.2px; + height: 29.6px; + padding: 0; + margin: 0; + + .caretIcon { + display: none; + } +} + +.sliderLeftArrow--productShelf { + background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-henriquesantos.svg) !important; +} + +.sliderRightArrow--productShelf { + background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-henriquesantos.svg) !important; +} + +.sliderTrackContainer--productShelf { + padding-bottom: 33px; + + @media screen and (min-width: 769px) { + padding-bottom: 41px; + } + + @media screen and (min-width: 1025px) { + padding-bottom: 49px; + } +} + +.paginationDotsContainer--productShelf { + align-items: center; + margin: 0; +} + +.paginationDot--productShelf { + background-color: #000; + width: 10px !important; + height: 10px !important; + transition: 300ms ease; +} + +.paginationDot--productShelf--isActive { + border: 1px solid #000; + background-color: #fff; + width: 17px !important; + height: 17px !important; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..284f5cc 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,363 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.container { + padding: 0; + + @media screen and (min-width: 1025px) { + min-width: 100%; + } +} + +.productImageTag { + object-fit: fill !important; + + @media screen and (min-width: 769px) { + max-height: 944px !important; + } + + @media screen and (min-width: 1025px) { + max-height: 664px !important; + } + + @media screen and (min-width: 1921px) { + max-height: 904px !important; + } +} + +.carouselGaleryThumbs { + display: block !important; + margin-top: 16px; +} + +.productImagesThumb { + width: 90px !important; + margin-left: 16px; + margin-bottom: 0; + + .thumbImg { + border-radius: 8px; + } + + &:first-child { + margin-left: 0; + } +} + +.productNameContainer { + color: #575757; + line-height: 34px; + + @media screen and (max-width: 768px) and (min-width: 375px) { + width: 70.94594594594594%; + margin-right: auto; + } +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} + +.skuSelectorSubcontainer--cor, +.skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0; + + &::before { + font-size: 14px; + text-transform: uppercase; + } + } +} + +.skuSelectorSubcontainer--cor { + order: 1; + + .skuSelectorSelectorImageValue { + font-size: 0; + width: 0; + height: 0; + } + + .skuSelectorName { + &::before { + content: "Outros Cores:"; + } + } +} + +.skuSelectorSubcontainer--tamanho { + order: 0; + + .skuSelectorName { + &::before { + content: "Outros Tamanhos:"; + } + } +} + +.skuSelectorOptionsList, +.skuSelectorOptionsList .skuSelectorItem, +.skuSelectorNameContainer { + margin: 0; +} + +.skuSelectorOptionsList { + gap: 16px; +} + +.skuSelectorItem { + width: 40px; + height: 40px; + + .frameAround, + .skuSelectorInternalBox { + border-radius: 100%; + } + + .skuSelectorInternalBox { + z-index: unset; + } + + .frameAround { + top: 0; + left: 0; + right: 0; + bottom: 0; + } +} + +.diagonalCross { + width: 100%; + background: transparent; + + &::before { + content: ""; + position: absolute; + left: 50%; + top: 50%; + width: 100%; + height: 1px; + border-top: 1px solid #d5d5d5; + transform: translate(-50%, -50%) rotateZ(-45deg); + z-index: 2; + } +} + +.skuSelectorItem--selected { + .skuSelectorItemTextValue { + color: $color-black; + } + + .diagonalCross { + width: 100%; + background: transparent; + + &::before { + border-top: 1px solid $color-black; + } + } +} + +.skuSelectorItemTextValue { + width: 100%; + padding: 0; + + display: flex; + justify-content: center; + align-items: center; +} + +.skuSelectorSubcontainer--cor { + margin: 0; + + .skuSelectorItem { + width: 48px; + height: 48px; + } +} + +.shippingContainer { + position: relative; + + @media screen and (min-width: 769px) { + width: 280px; + } + + :global(.vtex-address-form__postalCode) { + position: relative; + width: 100%; + padding: 0; + + :global(.vtex-input-prefix__group) { + height: 49px; + border: 1px solid #cccccc; + border-radius: 0; + + :global(.vtex-input__suffix) { + display: none; + } + } + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + text-align: right; + + @media screen and (min-width: 769px) { + text-align: unset; + + position: absolute; + right: -56.65%; + top: 70%; + margin-left: 32px; + padding: 0; + transform: translateY(-50%); + } + } + + :global(.vtex-input__label) { + font-size: 0; + + &::before { + content: "Calcular frete:"; + font-size: 14px; + line-height: 19.07px; + text-transform: uppercase; + color: inherit; + } + } + + :global(.vtex-button) { + background-color: $color-black; + position: absolute; + top: 27px; + right: 0; + color: $color-white; + height: 49px; + width: 49px; + margin: 0; + border: 0; + border-radius: 0; + + :global(.vtex-button__label) { + font-size: 0; + + &::before { + content: "OK"; + font-size: 14px; + } + } + } +} + +.shippingTable { + border: 0; + margin: 0; + padding: 16px 0 0; + max-width: 326px; + width: 326px; + overflow: auto; +} + +.shippingTableHead { + display: table-header-group !important; + + .shippingTableRow { + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate, + .shippingTableHeadDeliveryPrice { + width: auto; + text-align: left; + color: $color-black; + + font-weight: 400; + font-size: 14px; + line-height: 19.07px; + text-transform: uppercase; + } + } +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableCell { + padding: 15px 0; +} + +.subscriberContainer { + .title { + font-size: 0; + + &::before { + content: "Produto indisponível"; + font-size: 14px; + font-weight: 700; + color: #868686; + } + } + + .subscribeLabel { + font-size: 0; + + &::before { + content: "Deseja saber quando estiver disponível?"; + font-size: 14px; + font-weight: 400; + color: #868686; + } + } + + .form { + .content { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 40px 48px; + gap: 16px 8px; + } + + .input { + margin: 0; + width: 100%; + height: 100%; + + :global(.vtex-input-prefix__group) { + border: 1px solid #989898; + border-radius: 0; + } + } + } + + .submit { + grid-column: 1 / 2 span; + margin: 0; + + :global(.vtex-button) { + width: 100%; + height: 100%; + background-color: #000; + color: #fff; + border: 0; + border-radius: 0; + + :global(.vtex-button__label) { + font-size: 0; + + &::before { + content: "Avise-se"; + font-size: 14px; + text-transform: uppercase; + } + } + } + } +} + +.productDescriptionTitle { + font-size: 20px; + line-height: 32px; + color: #575757; + + @media screen and (min-width: 1025px) { + font-size: 24px; + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..f6b2ad0 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,72 @@ +.listContainer--ProductSpecificationTabList { + justify-content: space-between; + border-bottom: 1px solid #b9b9b9; + + @media screen and (max-width: 1024px) { + border-top: 1px solid #b9b9b9; + } + + @media screen and (min-width: 1025px) { + padding: 0 64px; + } + + .listItem { + position: relative; + padding: 0; + margin: 0; + + :global(.vtex-button) { + border-radius: 0; + color: #bfbfbf; + :global(.vtex-button__label) { + padding: 0 16px !important; + } + } + + &.listItemActive { + :global(.vtex-button) { + background-color: transparent; + color: #000; + border: none; + } + + @media screen and (min-width: 1025px) { + &::before { + content: ""; + width: 100%; + height: 2px; + position: absolute; + left: 0; + bottom: -1px; + background-color: #000; + } + } + } + } + + @media screen and (max-width: 1024px) { + width: 100%; + flex-direction: column; + flex-wrap: nowrap; + gap: 16px; + padding: 16px 0; + + .listItem { + :global(.vtex-button) { + width: 100%; + height: 38px; + + :global(.vtex-button__label) { + justify-content: start; + padding: 0 !important; + } + } + } + } + + .listItem { + :global(.vtex-button) { + text-transform: capitalize !important; + } + } +}