Merge pull request 'feat:#1 BreadCrumb alterado' (#1) from feature/BreadCrumb into master

Reviewed-on: #1
This commit is contained in:
ThiagoDutraSampaioLeite 2023-01-22 20:33:08 +00:00
commit b292fba5ac
15 changed files with 245 additions and 70 deletions

BIN
assets/salto-azul.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 216 KiB

View File

@ -4,37 +4,48 @@ import { useCssHandles } from "vtex.css-handles";
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

@ -101,12 +101,12 @@
}, },
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
"product-identifier.product",
"product-rating-summary", "product-rating-summary",
"flex-layout.row#list-price-savings", "flex-layout.row#list-price-savings",
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
"product-installments", "product-installments",
"product-separator", "product-separator",
"product-identifier.product",
"sku-selector", "sku-selector",
"product-quantity", "product-quantity",
"product-assembly-options", "product-assembly-options",

View File

@ -0,0 +1,4 @@
@font-face {
font-family: "Open Sans", sans-serif;
src: url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
}

View File

@ -253,84 +253,84 @@
"measure": [30, 34, 20], "measure": [30, 34, 20],
"styles": { "styles": {
"heading-1": { "heading-1": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontFamily": "Open Sans sans-serif",
"fontWeight": "700", "fontWeight": "700",
"fontSize": "3rem", "fontSize": "3rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"heading-2": { "heading-2": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontFamily": "Open Sans sans-serif",
"fontWeight": "700", "fontWeight": "700",
"fontSize": "2.25rem", "fontSize": "2.25rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"heading-3": { "heading-3": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontFamily": "Open Sans sans-serif",
"fontWeight": "700", "fontWeight": "700",
"fontSize": "1.75rem", "fontSize": "1.75rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"heading-4": { "heading-4": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontFamily": "Open Sans sans-serif",
"fontWeight": "normal", "fontWeight": "normal",
"fontSize": "1.5rem", "fontSize": "1.5rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"heading-5": { "heading-5": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontFamily": "Open Sans sans-serif",
"fontWeight": "normal", "fontWeight": "normal",
"fontSize": "1.25rem", "fontSize": "1.25rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"heading-6": { "heading-6": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontFamily": "Open Sans sans-serif",
"fontWeight": "normal", "fontWeight": "normal",
"fontSize": "1.25rem", "fontSize": "1.25rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"body": { "body": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontFamily": "Open Sans sans-serif",
"fontWeight": "normal", "fontWeight": "normal",
"fontSize": "1rem", "fontSize": "1rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"small": { "small": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontFamily": "Open Sans sans-serif",
"fontWeight": "normal", "fontWeight": "normal",
"fontSize": "0.875rem", "fontSize": "0.875rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"mini": { "mini": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontFamily": "Open Sans sans-serif",
"fontWeight": "normal", "fontWeight": "normal",
"fontSize": "0.75rem", "fontSize": "0.75rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"action": { "action": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontFamily": "Open Sans sans-serif",
"fontWeight": "500", "fontWeight": "500",
"fontSize": "1rem", "fontSize": "1rem",
"textTransform": "uppercase", "textTransform": "uppercase",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"action--small": { "action--small": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontFamily": "Open Sans sans-serif",
"fontWeight": "500", "fontWeight": "500",
"fontSize": "0.875rem", "fontSize": "0.875rem",
"textTransform": "uppercase", "textTransform": "uppercase",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"action--large": { "action--large": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontFamily": "Open Sans sans-serif",
"fontWeight": "500", "fontWeight": "500",
"fontSize": "1.25rem", "fontSize": "1.25rem",
"textTransform": "uppercase", "textTransform": "uppercase",

View File

@ -7,10 +7,3 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.html {
background-color: red;
}
.html--pdp-breadcrumb {
background-color: green;
}

View File

@ -0,0 +1,51 @@
@charset "UTF-8";
/*
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 */
.container {
font-size: 14px;
color: #929292;
margin: 0 15px;
}
.container .homeIcon {
height: 0;
}
.container .homeLink::after {
content: "Home";
font-family: "Open sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.container .arrow--1::after {
content: "Sapatos";
font-family: "Open sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
margin-left: 7px;
}
.container .link--1 {
display: none;
}
.container .arrow--2::after {
content: "Sandália";
font-family: "Open sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
margin-left: 7px;
}
.container .link--2 {
display: none;
}
.container .termArrow,
.container .term {
display: none;
}

View File

@ -43,7 +43,7 @@
} }
.flexRow--deals { .flexRow--deals {
background-color: #0F3E99; background-color: #0f3e99;
padding: 14px 0px; padding: 14px 0px;
} }

View File

@ -1,3 +1,19 @@
.product-identifier--productReference { /*
margin-bottom: 1rem; 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 */
.product-identifier__label,
.product-identifier__separator {
display: none;
}
.product-identifier__value {
display: flex;
justify-content: flex-end;
color: rgba(146, 146, 146, 0.4784313725);
} }

View File

@ -0,0 +1,13 @@
/*
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 */
.product-identifier__label,
.product-identifier__separator {
display: none;
}

View File

@ -7,6 +7,20 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.newsletter { .container .productBrand {
background: red; display: flex;
justify-content: flex-end;
}
.container .productBrand--quickview {
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-size: 20px;
line-height: 34px;
margin-top: 0px;
color: #575757;
}
.product-identifier__label,
.product-identifier__separator {
display: none;
} }

View File

@ -1,8 +1,7 @@
.html { // .html {
background-color: red; // background-color: red;
} // }
.html--pdp-breadcrumb {
background-color: green;
}
// .html--pdp-breadcrumb {
// background-color: green;
// }

View File

@ -0,0 +1,48 @@
.container {
font-size: 14px;
color: #929292;
margin: 0 15px;
.homeIcon {
height: 0;
}
.homeLink::after {
content: "Home";
font-family: "Open sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.arrow--1::after {
content: "Sapatos";
font-family: "Open sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
margin-left: 7px;
}
.link--1 {
display: none;
}
.arrow--2::after {
content: "Sandália";
font-family: "Open sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
margin-left: 7px;
}
.link--2 {
display: none;
}
.termArrow,
.term {
display: none;
}
}

View File

@ -0,0 +1,10 @@
.product-identifier__label,
.product-identifier__separator {
display: none;
}
.product-identifier__value {
display: flex;
justify-content: flex-end;
color: #9292927a;
}

View File

@ -1,3 +1,19 @@
.newsletter{ .container {
background: red; .productBrand {
display: flex;
justify-content: flex-end;
}
.productBrand--quickview {
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-size: 20px;
line-height: 34px;
margin-top: 0px;
color: #575757;
}
}
.product-identifier__label,
.product-identifier__separator {
display: none;
} }