923206ee4c
chore(SW-3145): Move Title and Subtitle to design-system * Move Title and Subtitle to design-system * Fix export Approved-by: Linus Flood
51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import { Slot } from '@radix-ui/react-slot'
|
|
|
|
import { subtitleVariants } from './variants'
|
|
|
|
import type { VariantProps } from 'class-variance-authority'
|
|
import { Children, ReactNode } from 'react'
|
|
|
|
interface SubtitleProps
|
|
extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,
|
|
VariantProps<typeof subtitleVariants> {
|
|
asChild?: boolean
|
|
}
|
|
|
|
/**
|
|
* @deprecated Use `Typography` instead.
|
|
*/
|
|
export default function Subtitle({
|
|
asChild = false,
|
|
className = '',
|
|
color,
|
|
textAlign,
|
|
textTransform,
|
|
type,
|
|
...props
|
|
}: SubtitleProps) {
|
|
if (checkForEmptyChildren(props.children) === 0) {
|
|
return null
|
|
}
|
|
const Comp = asChild ? Slot : 'p'
|
|
const classNames = subtitleVariants({
|
|
className,
|
|
color,
|
|
textAlign,
|
|
textTransform,
|
|
type,
|
|
})
|
|
return <Comp className={classNames} {...props} />
|
|
}
|
|
|
|
function checkForEmptyChildren(children: ReactNode) {
|
|
return Children.toArray(children).filter((child) => {
|
|
if (child === '') {
|
|
return false
|
|
} else if (child == null) {
|
|
return false
|
|
} else {
|
|
return true
|
|
}
|
|
}).length
|
|
}
|