ManuelaLuanaSchumackerTavares/challenge-vtex-io-manuela-luana-schumacker-tavares
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(pdp): estiliza titulo e identificador de produto

Browse Source
This commit is contained in:
Manuela Luana Schumacker Tavares 2023-02-01 15:10:34 -03:00
parent 6d7fb6e65c
commit 10249e6893
7 changed files with 140 additions and 66 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",

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

@ -1,41 +1,52 @@
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}</>;
};

73
react/components/Html/styles.css Normal file
View File

@ -0,0 +1,73 @@
/* [class*="html--pdp-breadcrumb"] {
background: pink;
} */
/* [class*="productNameContainer--quickview"] {
color: pink;
} */
[class*="flex flex-grow-1 w-100 flex-column"] {
padding-left: 40px;
padding-right: 40px;
}
[class*="productNameContainer--quickview"] {
text-align: right;
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
}
[class*="product-identifier__label"],
[class*="product-identifier__separator"] {
font-size: 0;
text-align: right;
}
[class*="flexColChild"]:nth-of-type(2) {
text-align: right;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
[class*="flexColChild"]:nth-of-type(2) [class*="c-muted-1"] {
color: rgba(146, 146, 146, 0.48) !important;
}
[class*="sellingPrice"] {
font-weight: 700;
font-size: 25px !important;
line-height: 38px;
color: black !important;
}
[class*="installments"] {
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
[class*="installmentsNumber"],
[class*="installmentValue"] {
font-weight: 700;
}
[class*="skuSelectorName"],
[class*="skuSelectorNameSeparator"],
[class*="skuSelectorSelectorImageValue"] {
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
}
/* [class*="skuSelectorTextContainer"] [class*="c-muted-1"] {
color: #929292;
} */

6
store/blocks/home/home.jsonc
View File

@ -2,9 +2,9 @@
"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",
"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",
"flex-layout.row#shelf",

12
store/blocks/pdp/product-assembly.jsonc
View File

@ -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": {

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

@ -87,11 +87,15 @@
},
"product-images": {
"props": {
"showPaginationDots": false,
"showNavigationArrows": false,
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
},
"displayThumbnailsArrows": true
"maxHeight": "unset",
"thumbnailsOrientation": "horizontal",
"displayThumbnailsArrows": false
}
},
"flex-layout.col#right-col": {
@ -101,12 +105,12 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"product-rating-summary",
"flex-layout.row#list-price-savings",
// "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",

23
store/blocks/search.jsonc
View File

@ -108,7 +108,10 @@
}
},
"flex-layout.row#searchinfo": {
"children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"]
"children": [
"flex-layout.col#productCount",
"flex-layout.row#orderByAndSwitcher"
]
},
"flex-layout.row#orderByAndSwitcher": {
"children": ["order-by.v2", "gallery-layout-switcher"],
@ -272,29 +275,19 @@
"props": {
"name": "grid"
},
"children": [
"icon-grid",
"responsive-layout.desktop#textOptionGrid"
]
"children": ["icon-grid", "responsive-layout.desktop#textOptionGrid"]
},
"gallery-layout-option#list": {
"props": {
"name": "list"
},
"children": [
"icon-inline-grid",
"responsive-layout.desktop#textOptionList"
]
"children": ["icon-inline-grid", "responsive-layout.desktop#textOptionList"]
},
"responsive-layout.desktop#textOptionGrid": {
"children": [
"rich-text#option-grid"
]
"children": ["rich-text#option-grid"]
},
"responsive-layout.desktop#textOptionList": {
"children": [
"rich-text#option-list"
]
"children": ["rich-text#option-list"]
},
"rich-text#option-grid": {
"props": {