aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/headings/heading.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/atoms/headings/heading.tsx')
-rw-r--r--src/components/atoms/headings/heading.tsx93
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);