forked from M3-Academy/challenge-vtex-io
feat: add html block
This commit is contained in:
parent
7215f9c893
commit
236775c03b
@ -1,25 +0,0 @@
|
||||
{
|
||||
"projectName": "store-theme",
|
||||
"projectOwner": "vtex-apps",
|
||||
"repoType": "github",
|
||||
"repoHost": "https://github.com",
|
||||
"files": [
|
||||
"docs/README.md"
|
||||
],
|
||||
"imageSize": 100,
|
||||
"commit": true,
|
||||
"commitConvention": "none",
|
||||
"contributors": [
|
||||
{
|
||||
"login": "hugocostadev",
|
||||
"name": "Hugo Costa",
|
||||
"avatar_url": "https://avatars2.githubusercontent.com/u/20212776?v=4",
|
||||
"profile": "http://www.hugoccosta.com",
|
||||
"contributions": [
|
||||
"doc"
|
||||
]
|
||||
}
|
||||
],
|
||||
"contributorsPerLine": 7,
|
||||
"skipCi": true
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"vendor": "agenciamagma",
|
||||
"vendor": "agenciam3",
|
||||
"name": "store-theme",
|
||||
"version": "5.1.0",
|
||||
"builders": {
|
||||
|
||||
41
react/components/Html/index.tsx
Normal file
41
react/components/Html/index.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import React, { ReactNode } from "react";
|
||||
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}</>;
|
||||
};
|
||||
45
react/components/Html/readme.md
Normal file
45
react/components/Html/readme.md
Normal file
@ -0,0 +1,45 @@
|
||||
# HTML
|
||||
|
||||
## Descrição
|
||||
|
||||
Uma componente que permite que possamos adicionar tags html direto do JSON. Para podermos estar estruturando o projeto de nossa maneira.
|
||||
Basicamente esse componente
|
||||
|
||||
|
||||
## Característica
|
||||
|
||||
- ✔ Compatível com CSS Handles
|
||||
- ✔ Menos linha de código renderizada no HTML em comparado ao Flex.layout
|
||||
- ✔ Tag HTML dinâmica para cada caso. Podendo adicionar semântica
|
||||
- ✔ Possibilidade adicionar Textos
|
||||
|
||||
|
||||
## Estrutura
|
||||
```html
|
||||
<{qualquerTagHtml} class="{acountName}-{appName}-1-x-html {acountName}-{appName}-new-theme-1-x-html--{suaBlockClass} {qualquer classe extra }">
|
||||
{children}
|
||||
</{qualquerTagHtml}>
|
||||
```
|
||||
|
||||
|
||||
## HTML vs FLEX.LAYOUT
|
||||
|
||||
### html
|
||||
```html
|
||||
<div class="ckm3sintese-ckm3sintese-new-theme-1-x-html">
|
||||
{children}
|
||||
<div>
|
||||
```
|
||||
|
||||
### flex
|
||||
```html
|
||||
<div class="vtex-flex-layout-0-x-flexRow">
|
||||
<section class="vtex-store-components ph3 ph5-m ph2-xl mw9 center">
|
||||
<div class="vtex-flex-layout-0-x-flexRowContent pr7">
|
||||
<div class="stretchChildrenWidth flex pr7 items-stretch" style="width: 50%;">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
```
|
||||
1
react/html.ts
Normal file
1
react/html.ts
Normal file
@ -0,0 +1 @@
|
||||
export { Html as default } from "./components/Html"
|
||||
@ -28,6 +28,7 @@
|
||||
"vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout",
|
||||
"vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text",
|
||||
"vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide",
|
||||
"vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context"
|
||||
"vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
|
||||
"vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles"
|
||||
}
|
||||
}
|
||||
|
||||
@ -774,6 +774,10 @@ use-isomorphic-layout-effect@^1.1.2:
|
||||
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
|
||||
integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
|
||||
|
||||
"vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles":
|
||||
version "1.0.0"
|
||||
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles#336b23ef3a9bcb2b809529ba736783acd405d081"
|
||||
|
||||
"vtex.product-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context":
|
||||
version "0.10.0"
|
||||
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context#c5e2a97b404004681ee12f4fff7e6b62157786cc"
|
||||
|
||||
@ -5,14 +5,12 @@
|
||||
"video#about-us"
|
||||
]
|
||||
},
|
||||
|
||||
"flex-layout.row#about-us": {
|
||||
"children": [
|
||||
"image#mobile-phone",
|
||||
"flex-layout.col#text-about-us"
|
||||
]
|
||||
},
|
||||
|
||||
"flex-layout.col#text-about-us": {
|
||||
"children": [
|
||||
"rich-text#title-about-us",
|
||||
@ -23,15 +21,12 @@
|
||||
"preventVerticalStretch": true
|
||||
}
|
||||
},
|
||||
|
||||
"rich-text#title-about-us": {
|
||||
"props": {
|
||||
"text":
|
||||
"# Create meaningful and relevant experiences.",
|
||||
"text": "# Create meaningful and relevant experiences.",
|
||||
"blockClass": "title"
|
||||
}
|
||||
},
|
||||
|
||||
"image#mobile-phone": {
|
||||
"props": {
|
||||
"src": "https://storecomponents.vteximg.com.br/arquivos/mobile-phone.png",
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
{
|
||||
"example-component": {
|
||||
"component": "Example"
|
||||
},
|
||||
"html": {
|
||||
"component": "html"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user