refactor: use named export for everything except pages

Next expect a default export for pages so only those components should
use default exports. Everything else should use named exports to
reduce the number of import statements.

1 files changed, 15 insertions, 19 deletions

diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx
index b1e4c5f..b1b6164 100644
--- a/src/components/atoms/headings/heading.tsx
+++ b/src/components/atoms/headings/heading.tsx
@@ -3,13 +3,14 @@ import {
   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 = {
+export type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
   /**
    * The title alignment. Default: left;
    */
@@ -19,14 +20,6 @@ export type HeadingProps = {
    */
   children: ReactNode;
   /**
-   * Set additional classnames.
-   */
-  className?: string;
-  /**
-   * The heading id.
-   */
-  id?: string;
-  /**
    * Use an heading element or only its styles. Default: false.
    */
   isFake?: boolean;
@@ -57,23 +50,19 @@ const TitleTag = forwardRef<
 );
 TitleTag.displayName = 'TitleTag';
 
-/**
- * Heading component.
- *
- * Render an HTML heading element or a paragraph with heading styles.
- */
-const Heading: ForwardRefRenderFunction<
+const HeadingWithRef: ForwardRefRenderFunction<
   HTMLHeadingElement | HTMLParagraphElement,
   HeadingProps
 > = (
   {
     alignment = 'left',
     children,
-    className,
+    className = '',
     id,
     isFake = false,
     level,
     withMargin = true,
+    ...props
   },
   ref: ForwardedRef<HTMLHeadingElement | HTMLParagraphElement>
 ) => {
@@ -81,17 +70,24 @@ const Heading: ForwardRefRenderFunction<
   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
-      tagName={tagName}
-      className={`${styles.heading} ${styles[levelClass]} ${styles[alignmentClass]} ${styles[marginClass]} ${className}`}
+      {...props}
+      className={headingClass}
       id={id}
       ref={ref}
+      tagName={tagName}
     >
       {children}
     </TitleTag>
   );
 };
 
-export default forwardRef(Heading);
+/**
+ * Heading component.
+ *
+ * Render an HTML heading element or a paragraph with heading styles.
+ */
+export const Heading = forwardRef(HeadingWithRef);