forked from M3-Academy/challenge-vtex-io
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:
commit
3216fabd4e
@ -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",
|
||||
|
@ -1,41 +1,53 @@
|
||||
import React, { ReactNode } from "react";
|
||||
import { useCssHandles } from "vtex.css-handles";
|
||||
import "./styles.css";
|
||||
|
||||
const CSS_HANDLES = ["html"] as const;
|
||||
|
||||
type HtmlProps = {
|
||||
children?: ReactNode,
|
||||
/**
|
||||
* Qual tag Html que deseja que seja usar
|
||||
*
|
||||
* @default div
|
||||
*/
|
||||
tag?: keyof React.ReactHTML
|
||||
/**
|
||||
* Classes CSS extras que deseja adicionar.
|
||||
* Feito para uso de [classes do tachyons](https://tachyons.io/)
|
||||
*/
|
||||
tachyonsClasses?: string
|
||||
/**
|
||||
* Se caso quiser usar esse componente
|
||||
* para adicinar um texto simples
|
||||
*/
|
||||
text?: string
|
||||
/**
|
||||
* Tag ID para
|
||||
*/
|
||||
testId?: string
|
||||
}
|
||||
|
||||
export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
|
||||
const { handles } = useCssHandles(CSS_HANDLES);
|
||||
|
||||
const props = {
|
||||
className: `${handles.html} ${classes}`,
|
||||
"data-testid": testId
|
||||
};
|
||||
const Children = <>{children}{text}</>;
|
||||
const Element = React.createElement(tag, props, Children);
|
||||
|
||||
return <>{Element}</>;
|
||||
children?: ReactNode;
|
||||
/**
|
||||
* Qual tag Html que deseja que seja usar
|
||||
*
|
||||
* @default div
|
||||
*/
|
||||
tag?: keyof React.ReactHTML;
|
||||
/**
|
||||
* Classes CSS extras que deseja adicionar.
|
||||
* Feito para uso de [classes do tachyons](https://tachyons.io/)
|
||||
*/
|
||||
tachyonsClasses?: string;
|
||||
/**
|
||||
* Se caso quiser usar esse componente
|
||||
* para adicinar um texto simples
|
||||
*/
|
||||
text?: string;
|
||||
/**
|
||||
* Tag ID para
|
||||
*/
|
||||
testId?: string;
|
||||
};
|
||||
|
||||
export const Html = ({
|
||||
children = null,
|
||||
tag = "div",
|
||||
text = "",
|
||||
tachyonsClasses: classes = "",
|
||||
testId,
|
||||
}: HtmlProps) => {
|
||||
const { handles } = useCssHandles(CSS_HANDLES);
|
||||
|
||||
const props = {
|
||||
className: `${handles.html} ${classes}`,
|
||||
"data-testid": testId,
|
||||
};
|
||||
const Children = (
|
||||
<>
|
||||
{children}
|
||||
{text}
|
||||
</>
|
||||
);
|
||||
const Element = React.createElement(tag, props, Children);
|
||||
|
||||
return <>{Element}</>;
|
||||
};
|
||||
|
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-rating-summary",
|
||||
"flex-layout.row#selling-price",
|
||||
// "product-installments",
|
||||
"rich-text#product-installments",
|
||||
"product-installments",
|
||||
"sku-selector",
|
||||
"product-gifts",
|
||||
"flex-layout.row#buy-button",
|
||||
@ -141,14 +140,11 @@
|
||||
}
|
||||
},
|
||||
|
||||
// "product-installments": {
|
||||
// "children": ["rich-text#product-installments"]
|
||||
// },
|
||||
|
||||
"rich-text#product-installments": {
|
||||
"product-installments": {
|
||||
"props": {
|
||||
"text": "**36 x** de **R$ 2,17** sem juros",
|
||||
"blockClass": "product-installments"
|
||||
"markers": ["discount"],
|
||||
"blockClass": "m3-custom-installments",
|
||||
"message": "{installmentsNumber} <discount>x</discount> de {installmentValue} sem juros"
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -6,7 +6,14 @@
|
||||
"preventHorizontalStretch": true,
|
||||
"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": {
|
||||
|
@ -7,8 +7,3 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* 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 {
|
||||
color: #727273;
|
||||
margin-bottom: 0.25rem;
|
||||
@ -35,7 +44,6 @@
|
||||
border-radius: 1000px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
@ -77,3 +85,30 @@
|
||||
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: #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;
|
||||
position: absolute;
|
||||
left: 33.4%;
|
||||
top: 32%;
|
||||
top: 33%;
|
||||
background: #292929;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
@ -1,9 +1,3 @@
|
||||
// .html {
|
||||
// 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;
|
||||
position: absolute;
|
||||
left: 33.4%;
|
||||
top: 32%;
|
||||
top: 33%;
|
||||
background: $color-black;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
@ -8,6 +8,7 @@ $color-gray3: #f0f0f0;
|
||||
$color-gray4: #c4c4c4;
|
||||
$color-gray5: #e5e5e5;
|
||||
$color-gray6: #cccccc;
|
||||
$color-gray7: #929292;
|
||||
|
||||
$color-blue: #4267b2;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user