d0546926a9
fix(SW-3691): Setup one prettier config for whole repo * Setup prettierrc in root and remove other configs Approved-by: Joakim Jäderberg Approved-by: Linus Flood
65 lines
1.3 KiB
TypeScript
65 lines
1.3 KiB
TypeScript
import { Children, ReactNode } from "react"
|
|
import { headingVariants } from "./variants"
|
|
|
|
import type { VariantProps } from "class-variance-authority"
|
|
|
|
type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5"
|
|
|
|
export interface HeadingProps
|
|
extends
|
|
Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
|
|
VariantProps<typeof headingVariants> {
|
|
as?: HeadingLevel
|
|
level?: HeadingLevel
|
|
}
|
|
|
|
/**
|
|
* @deprecated Use `Typography` instead.
|
|
*/
|
|
export default function Title({
|
|
/**
|
|
* What styling to use, based on heading level. If not provided `level`
|
|
* will determine the styling.
|
|
*/
|
|
as,
|
|
children,
|
|
className = "",
|
|
color,
|
|
/**
|
|
* What HTML tag to use. Defaults to h1.
|
|
*/
|
|
level = "h1",
|
|
textAlign,
|
|
textTransform,
|
|
...rest
|
|
}: HeadingProps) {
|
|
if (checkForEmptyChildren(children) === 0) {
|
|
return null
|
|
}
|
|
const Hx = level
|
|
const classNames = headingVariants({
|
|
className,
|
|
color,
|
|
textAlign,
|
|
textTransform,
|
|
type: as ?? level,
|
|
})
|
|
return (
|
|
<Hx {...rest} className={classNames}>
|
|
{children}
|
|
</Hx>
|
|
)
|
|
}
|
|
|
|
function checkForEmptyChildren(children: ReactNode) {
|
|
return Children.toArray(children).filter((child) => {
|
|
if (child === "") {
|
|
return false
|
|
} else if (child == null) {
|
|
return false
|
|
} else {
|
|
return true
|
|
}
|
|
}).length
|
|
}
|