diff options
Diffstat (limited to 'src/components/atoms/headings/heading.tsx')
| -rw-r--r-- | src/components/atoms/headings/heading.tsx | 93 |
1 files changed, 0 insertions, 93 deletions
diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx deleted file mode 100644 index b1b6164..0000000 --- a/src/components/atoms/headings/heading.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { - createElement, - ForwardedRef, - forwardRef, - ForwardRefRenderFunction, - HTMLAttributes, - ReactNode, -} from 'react'; -import styles from './heading.module.scss'; - -export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6; - -export type HeadingProps = HTMLAttributes<HTMLHeadingElement> & { - /** - * The title alignment. Default: left; - */ - alignment?: 'center' | 'left'; - /** - * The heading body. - */ - children: ReactNode; - /** - * Use an heading element or only its styles. Default: false. - */ - isFake?: boolean; - /** - * HTML heading level. - */ - level: HeadingLevel; - /** - * Adds margin. Default: true. - */ - withMargin?: boolean; -}; - -type TitleTagProps = Pick<HeadingProps, 'children' | 'className' | 'id'> & { - tagName: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'; -}; - -const TitleTag = forwardRef< - HTMLHeadingElement | HTMLParagraphElement, - TitleTagProps ->( - ( - { children, tagName, ...props }, - ref: ForwardedRef<HTMLHeadingElement | HTMLParagraphElement> - ) => { - return createElement(tagName, { ...props, ref }, children); - } -); -TitleTag.displayName = 'TitleTag'; - -const HeadingWithRef: ForwardRefRenderFunction< - HTMLHeadingElement | HTMLParagraphElement, - HeadingProps -> = ( - { - alignment = 'left', - children, - className = '', - id, - isFake = false, - level, - withMargin = true, - ...props - }, - ref: ForwardedRef<HTMLHeadingElement | HTMLParagraphElement> -) => { - const tagName = isFake ? 'p' : (`h${level}` as TitleTagProps['tagName']); - const levelClass = `heading--${level}`; - const alignmentClass = `heading--${alignment}`; - const marginClass = withMargin ? 'heading--margin' : 'heading--regular'; - const headingClass = `${styles.heading} ${styles[levelClass]} ${styles[alignmentClass]} ${styles[marginClass]} ${className}`; - - return ( - <TitleTag - {...props} - className={headingClass} - id={id} - ref={ref} - tagName={tagName} - > - {children} - </TitleTag> - ); -}; - -/** - * Heading component. - * - * Render an HTML heading element or a paragraph with heading styles. - */ -export const Heading = forwardRef(HeadingWithRef); |
