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, 5 insertions, 18 deletions

diff --git a/src/components/atoms/forms/label.tsx b/src/components/atoms/forms/label.tsx
index 2ec614f..6764579 100644
--- a/src/components/atoms/forms/label.tsx
+++ b/src/components/atoms/forms/label.tsx
@@ -1,24 +1,12 @@
-import { FC, ReactNode } from 'react';
+import { FC, LabelHTMLAttributes, ReactNode } from 'react';
 import styles from './label.module.scss';
 
-export type LabelProps = {
-  /**
-   * An accessible name for the label.
-   */
-  'aria-label'?: string;
+export type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
   /**
    * The label body.
    */
   children: ReactNode;
   /**
-   * Add classnames to the label.
-   */
-  className?: string;
-  /**
-   * The field id.
-   */
-  htmlFor?: string;
-  /**
    * Is the field required? Default: false.
    */
   required?: boolean;
@@ -33,7 +21,7 @@ export type LabelProps = {
  *
  * Render a HTML label element.
  */
-const Label: FC<LabelProps> = ({
+export const Label: FC<LabelProps> = ({
   children,
   className = '',
   required = false,
@@ -41,13 +29,12 @@ const Label: FC<LabelProps> = ({
   ...props
 }) => {
   const sizeClass = styles[`label--${size}`];
+  const labelClass = `${styles.label} ${sizeClass} ${className}`;
 
   return (
-    <label className={`${styles.label} ${sizeClass} ${className}`} {...props}>
+    <label {...props} className={labelClass}>
       {children}
       {required && <span className={styles.required}> *</span>}
     </label>
   );
 };
-
-export default Label;