Rafael_Sampaio_de_Oliveira/challenge-vtex-io-rafael-sampaio
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona css product installments 1440px

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2023-01-26 20:57:16 -03:00
parent 7e83852429
commit cf4b91539d
13 changed files with 210 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
manifest.json
View File

@ -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",

80
react/components/Html/index.tsx
View File

@ -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
View File

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

14
store/blocks/pdp/product.jsonc
View File

@ -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"
}
},

9
store/blocks/product-price.jsonc
View File

@ -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
styles/css/agenciamagma.store-theme.css
View File

@ -6,9 +6,4 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.html--pdp-breadcrumb {
display: flex;
justify-content: center;
padding: 0 40px;
}
/* Grid breakpoints */

37
styles/css/vtex.product-price.css
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 {
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;
}

2
styles/css/vtex.store-components.css
View File

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

6
styles/sass/pages/product/agenciamagma.store-theme.scss
View File

@ -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
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;
}

3
styles/sass/pages/product/vtex.rich-text.scss
View File

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

2
styles/sass/pages/product/vtex.store-components.scss
View File

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

1
styles/sass/utils/_vars.scss
View File

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