ThiagoDutraSampaioLeite/challenge-vtex-io-thiago-dutra
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:#1 BreadCrumb alterado

Browse Source
This commit is contained in:
ThiagoDuutra 2023-01-22 17:32:36 -03:00
parent c9a06914fb
commit f0e7ff8c28
15 changed files with 245 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/salto-azul.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 KiB

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

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

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

@ -101,12 +101,12 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"product-rating-summary",
"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",

4
styles/configs/font-face.css Normal file
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");
}

24
styles/configs/style.json
View File

@ -253,84 +253,84 @@
"measure": [30, 34, 20],
"styles": {
"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",
"fontSize": "3rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"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",
"fontSize": "2.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"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",
"fontSize": "1.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"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",
"fontSize": "1.5rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"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",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"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",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"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",
"fontSize": "1rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"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",
"fontSize": "0.875rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"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",
"fontSize": "0.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"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",
"fontSize": "1rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"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",
"fontSize": "0.875rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"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",
"fontSize": "1.25rem",
"textTransform": "uppercase",

9
styles/css/agenciamagma.store-theme.css
View File

@ -6,11 +6,4 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.html {
background-color: red;
}
.html--pdp-breadcrumb {
background-color: green;
}
/* Grid breakpoints */

51
styles/css/vtex.breadcrumb.css Normal file
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;
}

2
styles/css/vtex.flex-layout.css
View File

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

20
styles/css/vtex.product-identifier.css
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);
}

13
styles/css/vtex.products-identifier.css Normal file
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;
}

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

@ -7,6 +7,20 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.newsletter {
background: red;
.container .productBrand {
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;
}

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

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

48
styles/sass/pages/product/vtex.breadcrumb.scss Normal file
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;
}
}

10
styles/sass/pages/product/vtex.product-identifier.scss Normal file
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;
}

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

@ -1,3 +1,19 @@
.newsletter{
background: red;
}
.container {
.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;
}