import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; import "./style.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}; };