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}; };