Merge pull request 'feat: adiciona css product installments 1440px' (#8) from feature/adiciona-css-product-installments-1440px into development

Reviewed-on: #8
This commit is contained in:
Rafael Sampaio de Oliveira 2023-01-26 23:58:14 +00:00
commit 3216fabd4e
13 changed files with 210 additions and 63 deletions

View File

@ -15,7 +15,6 @@
"postreleasy": "vtex publish --verbose" "postreleasy": "vtex publish --verbose"
}, },
"dependencies": { "dependencies": {
"agenciamagma.store-theme": "5.x",
"vtex.store": "2.x", "vtex.store": "2.x",
"vtex.store-header": "2.x", "vtex.store-header": "2.x",
"vtex.product-summary": "2.x", "vtex.product-summary": "2.x",

View File

@ -1,40 +1,52 @@
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles"; import { useCssHandles } from "vtex.css-handles";
import "./styles.css";
const CSS_HANDLES = ["html"] as const; const CSS_HANDLES = ["html"] as const;
type HtmlProps = { type HtmlProps = {
children?: ReactNode, children?: ReactNode;
/** /**
* Qual tag Html que deseja que seja usar * Qual tag Html que deseja que seja usar
* *
* @default div * @default div
*/ */
tag?: keyof React.ReactHTML tag?: keyof React.ReactHTML;
/** /**
* Classes CSS extras que deseja adicionar. * Classes CSS extras que deseja adicionar.
* Feito para uso de [classes do tachyons](https://tachyons.io/) * Feito para uso de [classes do tachyons](https://tachyons.io/)
*/ */
tachyonsClasses?: string tachyonsClasses?: string;
/** /**
* Se caso quiser usar esse componente * Se caso quiser usar esse componente
* para adicinar um texto simples * para adicinar um texto simples
*/ */
text?: string text?: string;
/** /**
* Tag ID para * Tag ID para
*/ */
testId?: string testId?: string;
} };
export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => { export const Html = ({
children = null,
tag = "div",
text = "",
tachyonsClasses: classes = "",
testId,
}: HtmlProps) => {
const { handles } = useCssHandles(CSS_HANDLES); const { handles } = useCssHandles(CSS_HANDLES);
const props = { const props = {
className: `${handles.html} ${classes}`, className: `${handles.html} ${classes}`,
"data-testid": testId "data-testid": testId,
}; };
const Children = <>{children}{text}</>; const Children = (
<>
{children}
{text}
</>
);
const Element = React.createElement(tag, props, Children); const Element = React.createElement(tag, props, Children);
return <>{Element}</>; return <>{Element}</>;

View File

@ -0,0 +1,5 @@
[class*="html--pdp-breadcrumb"] {
display: flex;
justify-content: center;
padding: 0 40px;
}

View File

@ -116,8 +116,7 @@
"product-identifier.product", "product-identifier.product",
"product-rating-summary", "product-rating-summary",
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
// "product-installments", "product-installments",
"rich-text#product-installments",
"sku-selector", "sku-selector",
"product-gifts", "product-gifts",
"flex-layout.row#buy-button", "flex-layout.row#buy-button",
@ -141,14 +140,11 @@
} }
}, },
// "product-installments": { "product-installments": {
// "children": ["rich-text#product-installments"]
// },
"rich-text#product-installments": {
"props": { "props": {
"text": "**36 x** de **R$ 2,17** sem juros", "markers": ["discount"],
"blockClass": "product-installments" "blockClass": "m3-custom-installments",
"message": "{installmentsNumber} <discount>x</discount> de {installmentValue} sem juros"
} }
}, },

View File

@ -6,7 +6,14 @@
"preventHorizontalStretch": true, "preventHorizontalStretch": true,
"marginBottom": 4 "marginBottom": 4
}, },
"children": ["product-selling-price"] "children": ["product-selling-price#summary"]
},
"product-selling-price#summary": {
"props": {
"blockClass": "summary",
"message": "{sellingPriceValue}"
}
}, },
"flex-layout.row#list-price-savings": { "flex-layout.row#list-price-savings": {

View File

@ -7,8 +7,3 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.html--pdp-breadcrumb {
display: flex;
justify-content: center;
padding: 0 40px;
}

View File

@ -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 */
.listPrice { .listPrice {
color: #727273; color: #727273;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
@ -35,7 +44,6 @@
border-radius: 1000px; border-radius: 1000px;
align-items: center; align-items: center;
display: flex; display: flex;
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
@ -77,3 +85,30 @@
color: #ffffff; color: #ffffff;
padding: 0.25rem 0.5rem 0.25rem 0.5rem; padding: 0.25rem 0.5rem 0.25rem 0.5rem;
} }
.installments--m3-custom-installments {
font-style: normal;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.installmentsNumber--m3-custom-installments--36,
.installments-discount--m3-custom-installments,
.currencyCode--m3-custom-installments,
.currencyInteger--m3-custom-installments,
.currencyDecimal--m3-custom-installments,
.currencyFraction--m3-custom-installments {
font-weight: 700;
}
.currencyCode--summary,
.currencyInteger--summary,
.currencyDecimal--summary,
.currencyFraction--summary {
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #292929;
}

View File

@ -127,7 +127,7 @@
height: 49px; height: 49px;
position: absolute; position: absolute;
left: 33.4%; left: 33.4%;
top: 32%; top: 33%;
background: #292929; background: #292929;
border: none; border: none;
border-radius: 0; border-radius: 0;

View File

@ -1,9 +1,3 @@
// .html { // .html {
// background-color: red; // background-color: red;
// } // }
.html--pdp-breadcrumb {
display: flex;
justify-content: center;
padding: 0 40px;
}

View File

@ -0,0 +1,106 @@
.listPrice {
color: #727273;
margin-bottom: 0.25rem;
font-size: 1rem;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
}
.sellingPriceValue {
font-size: 2.25rem;
font-weight: 700;
}
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings {
font-weight: 500;
color: #79b03a;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
color: #2e2e2e;
}
.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;
}
.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;
}
.installments--m3-custom-installments {
font-style: normal;
font-size: 16px;
line-height: 22px;
color: $color-gray7;
}
.installmentsNumber--m3-custom-installments--36,
.installments-discount--m3-custom-installments,
.currencyCode--m3-custom-installments,
.currencyInteger--m3-custom-installments,
.currencyDecimal--m3-custom-installments,
.currencyFraction--m3-custom-installments {
font-weight: 700;
}
.currencyCode--summary,
.currencyInteger--summary,
.currencyDecimal--summary,
.currencyFraction--summary {
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: $color-black;
}

View File

@ -1,3 +0,0 @@
.paragraph--product-installments {
margin: 0;
}

View File

@ -130,7 +130,7 @@
height: 49px; height: 49px;
position: absolute; position: absolute;
left: 33.4%; left: 33.4%;
top: 32%; top: 33%;
background: $color-black; background: $color-black;
border: none; border: none;
border-radius: 0; border-radius: 0;

View File

@ -8,6 +8,7 @@ $color-gray3: #f0f0f0;
$color-gray4: #c4c4c4; $color-gray4: #c4c4c4;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-gray6: #cccccc; $color-gray6: #cccccc;
$color-gray7: #929292;
$color-blue: #4267b2; $color-blue: #4267b2;