forked from M3-Academy/challenge-vtex-io
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
|
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}</>;
|
||
|
|
};
|