55 lines
1.0 KiB
TypeScript
55 lines
1.0 KiB
TypeScript
import React, { ReactNode } from 'react'
|
|
import { useCssHandles } from 'vtex.css-handles'
|
|
|
|
const CSS_HANDLES = ['html'] as const
|
|
|
|
import './style.css'
|
|
|
|
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}</>
|
|
}
|