forked from M3-Academy/challenge-vtex-io
feat: adiciona css product installments 1440px
This commit is contained in:
parent
7e83852429
commit
cf4b91539d
@ -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",
|
||||||
|
@ -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}</>;
|
||||||
|
5
react/components/Html/styles.css
Normal file
5
react/components/Html/styles.css
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
[class*="html--pdp-breadcrumb"] {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
@ -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"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -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": {
|
||||||
|
@ -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;
|
|
||||||
}
|
|
@ -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;
|
||||||
|
}
|
@ -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;
|
||||||
|
@ -1,9 +1,3 @@
|
|||||||
// .html {
|
// .html {
|
||||||
// background-color: red;
|
// background-color: red;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
.html--pdp-breadcrumb {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 40px;
|
|
||||||
}
|
|
||||||
|
106
styles/sass/pages/product/vtex.product-price.scss
Normal file
106
styles/sass/pages/product/vtex.product-price.scss
Normal 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;
|
||||||
|
}
|
@ -1,3 +0,0 @@
|
|||||||
.paragraph--product-installments {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user