54 lines
1.0 KiB
TypeScript
54 lines
1.0 KiB
TypeScript
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}</>;
|
|
};
|