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.
author: Armand Philippot <git@armandphilippot.com> 2023-09-20 16:38:54 +0200
committer: Armand Philippot <git@armandphilippot.com> 2023-09-20 16:38:54 +0200
commit: f861e6a269ba9f62700776d3cd13b644a9e836d4 (patch)
tree: a5a107e7a6e4ff8b4261fe04349357bc00b783ee /src/components/atoms
parent: 03331c44276ec56e9f235e4d5ee75030455a753f (diff)
130 files changed, 413 insertions, 636 deletions
diff --git a/src/components/atoms/buttons/button-link.stories.tsx b/src/components/atoms/buttons/button-link.stories.tsx
index ff0a67f..32c2a7f 100644
--- a/src/components/atoms/buttons/button-link.stories.tsx
+++ b/src/components/atoms/buttons/button-link.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ButtonLink from './button-link';
+import { ButtonLink } from './button-link';
 
 /**
  * ButtonLink - Storybook Meta
diff --git a/src/components/atoms/buttons/button-link.test.tsx b/src/components/atoms/buttons/button-link.test.tsx
index a5aa7b1..8fabacf 100644
--- a/src/components/atoms/buttons/button-link.test.tsx
+++ b/src/components/atoms/buttons/button-link.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import ButtonLink from './button-link';
+import { ButtonLink } from './button-link';
 
 describe('ButtonLink', () => {
   it('renders a ButtonLink component', () => {
diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx
index 7182d94..c8180c9 100644
--- a/src/components/atoms/buttons/button-link.tsx
+++ b/src/components/atoms/buttons/button-link.tsx
@@ -1,25 +1,13 @@
 import Link from 'next/link';
-import { FC, ReactNode } from 'react';
+import { AnchorHTMLAttributes, FC, ReactNode } from 'react';
 import styles from './buttons.module.scss';
 
-export type ButtonLinkProps = {
-  /**
-   * ButtonLink accessible label.
-   */
-  'aria-label'?: string;
-  /**
-   * One or more ids that refer to the accessible label.
-   */
-  'aria-labelledby'?: string;
+export type ButtonLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
   /**
    * The button link body.
    */
   children: ReactNode;
   /**
-   * Set additional classnames to the button link.
-   */
-  className?: string;
-  /**
    * True if it is an external link. Default: false.
    */
   external?: boolean;
@@ -42,7 +30,7 @@ export type ButtonLinkProps = {
  *
  * Use a button-like link as call to action.
  */
-const ButtonLink: FC<ButtonLinkProps> = ({
+export const ButtonLink: FC<ButtonLinkProps> = ({
   children,
   className,
   target,
@@ -53,24 +41,15 @@ const ButtonLink: FC<ButtonLinkProps> = ({
 }) => {
   const kindClass = styles[`btn--${kind}`];
   const shapeClass = styles[`btn--${shape}`];
+  const btnClass = `${styles.btn} ${kindClass} ${shapeClass} ${className}`;
 
   return external ? (
-    <a
-      href={target}
-      className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`}
-      {...props}
-    >
+    <a {...props} className={btnClass} href={target}>
       {children}
     </a>
   ) : (
-    <Link
-      {...props}
-      className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`}
-      href={target}
-    >
+    <Link {...props} className={btnClass} href={target}>
       {children}
     </Link>
   );
 };
-
-export default ButtonLink;
diff --git a/src/components/atoms/buttons/button.stories.tsx b/src/components/atoms/buttons/button.stories.tsx
index 6803706..ba09a0d 100644
--- a/src/components/atoms/buttons/button.stories.tsx
+++ b/src/components/atoms/buttons/button.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Button from './button';
+import { Button } from './button';
 
 /**
  * Button - Storybook Meta
diff --git a/src/components/atoms/buttons/button.test.tsx b/src/components/atoms/buttons/button.test.tsx
index 90fca02..1162b2b 100644
--- a/src/components/atoms/buttons/button.test.tsx
+++ b/src/components/atoms/buttons/button.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Button from './button';
+import { Button } from './button';
 
 describe('Button', () => {
   it('renders the Button component', () => {
diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx
index fecbcfd..6ef5775 100644
--- a/src/components/atoms/buttons/button.tsx
+++ b/src/components/atoms/buttons/button.tsx
@@ -1,56 +1,46 @@
 import {
+  ButtonHTMLAttributes,
   forwardRef,
   ForwardRefRenderFunction,
-  MouseEventHandler,
   ReactNode,
 } from 'react';
 import styles from './buttons.module.scss';
 
-export type ButtonProps = {
-  /**
-   * Button accessible label.
-   */
-  'aria-label'?: string;
-  /**
-   * Indicates the current "pressed" state of a toggle button.
-   */
-  'aria-pressed'?: boolean | 'mixed';
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   /**
    * The button body.
    */
   children: ReactNode;
   /**
-   * Set additional classnames to the button wrapper.
-   */
-  className?: string;
-  /**
-   * Button state. Default: false.
+   * Button state.
+   *
+   * @default false
    */
   disabled?: boolean;
   /**
-   * Button kind. Default: secondary.
+   * Button kind.
+   *
+   * @default 'secondary'
    */
   kind?: 'primary' | 'secondary' | 'tertiary' | 'neutral';
   /**
-   * A callback function to handle click.
-   */
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  /**
-   * Button shape. Default: rectangle.
+   * Button shape.
+   *
+   * @default 'rectangle'
    */
   shape?: 'circle' | 'rectangle' | 'square' | 'initial';
   /**
-   * Button type attribute. Default: button.
+   * Button type attribute.
+   *
+   * @default 'button'
    */
   type?: 'button' | 'reset' | 'submit';
 };
 
-/**
- * Button component
- *
- * Use a button as call to action.
- */
-const Button: ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (
+const ButtonWithRef: ForwardRefRenderFunction<
+  HTMLButtonElement,
+  ButtonProps
+> = (
   {
     className = '',
     children,
@@ -64,18 +54,24 @@ const Button: ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (
 ) => {
   const kindClass = styles[`btn--${kind}`];
   const shapeClass = styles[`btn--${shape}`];
+  const btnClass = `${styles.btn} ${kindClass} ${shapeClass} ${className}`;
 
   return (
     <button
-      className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`}
+      {...props}
+      className={btnClass}
       disabled={disabled}
       ref={ref}
       type={type}
-      {...props}
     >
       {children}
     </button>
   );
 };
 
-export default forwardRef(Button);
+/**
+ * Button component
+ *
+ * Use a button as call to action.
+ */
+export const Button = forwardRef(ButtonWithRef);
diff --git a/src/components/atoms/buttons/index.ts b/src/components/atoms/buttons/index.ts
new file mode 100644
index 0000000..486e485
--- /dev/null
+++ b/src/components/atoms/buttons/index.ts
@@ -0,0 +1,2 @@
+export * from './button';
+export * from './button-link';
diff --git a/src/components/atoms/forms/boolean-field.stories.tsx b/src/components/atoms/forms/boolean-field.stories.tsx
index 8b6136b..3d6f8c3 100644
--- a/src/components/atoms/forms/boolean-field.stories.tsx
+++ b/src/components/atoms/forms/boolean-field.stories.tsx
@@ -1,13 +1,13 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import BooleanFieldComponent from './boolean-field';
+import { BooleanField } from './boolean-field';
 
 /**
  * BooleanField - Storybook Meta
  */
 export default {
   title: 'Atoms/Forms',
-  component: BooleanFieldComponent,
+  component: BooleanField,
   args: {
     hidden: false,
   },
@@ -130,9 +130,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof BooleanFieldComponent>;
+} as ComponentMeta<typeof BooleanField>;
 
-const Template: ComponentStory<typeof BooleanFieldComponent> = ({
+const Template: ComponentStory<typeof BooleanField> = ({
   checked,
   onChange: _onChange,
   ...args
@@ -140,7 +140,7 @@ const Template: ComponentStory<typeof BooleanFieldComponent> = ({
   const [isChecked, setIsChecked] = useState<boolean>(checked);
 
   return (
-    <BooleanFieldComponent
+    <BooleanField
       checked={isChecked}
       onChange={() => {
         setIsChecked(!isChecked);
diff --git a/src/components/atoms/forms/boolean-field.test.tsx b/src/components/atoms/forms/boolean-field.test.tsx
index b6fa625..503d1ce 100644
--- a/src/components/atoms/forms/boolean-field.test.tsx
+++ b/src/components/atoms/forms/boolean-field.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import BooleanField from './boolean-field';
+import { BooleanField } from './boolean-field';
 
 describe('BooleanField', () => {
   it('renders an unchecked checkbox', () => {
diff --git a/src/components/atoms/forms/boolean-field.tsx b/src/components/atoms/forms/boolean-field.tsx
index 946e375..8f33a42 100644
--- a/src/components/atoms/forms/boolean-field.tsx
+++ b/src/components/atoms/forms/boolean-field.tsx
@@ -1,24 +1,15 @@
-import { ChangeEventHandler, FC, MouseEventHandler } from 'react';
+import { FC, InputHTMLAttributes } from 'react';
 import styles from './boolean-field.module.scss';
 
-export type BooleanFieldProps = {
-  /**
-   * One or more ids that refers to the checkbox name.
-   */
-  'aria-labelledby'?: string;
+export type BooleanFieldProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'checked' | 'hidden' | 'name' | 'type' | 'value'
+> & {
   /**
    * True if the field should be checked.
    */
   checked: boolean;
   /**
-   * Add classnames to the checkbox.
-   */
-  className?: string;
-  /**
-   * Field id attribute.
-   */
-  id: string;
-  /**
    * True if the field should be visually hidden. Default: false.
    */
   hidden?: boolean;
@@ -27,14 +18,6 @@ export type BooleanFieldProps = {
    */
   name: string;
   /**
-   * Callback function to handle state change.
-   */
-  onChange: ChangeEventHandler<HTMLInputElement>;
-  /**
-   * A callback function to handle click.
-   */
-  onClick?: MouseEventHandler<HTMLInputElement>;
-  /**
    * The input type.
    */
   type: 'checkbox' | 'radio';
@@ -49,14 +32,13 @@ export type BooleanFieldProps = {
  *
  * Render a checkbox or a radio input type.
  */
-const BooleanField: FC<BooleanFieldProps> = ({
+export const BooleanField: FC<BooleanFieldProps> = ({
   className = '',
   hidden = false,
   ...props
 }) => {
   const modifier = hidden ? 'hidden' : '';
+  const inputClass = `${styles[modifier]} ${className}`;
 
-  return <input className={`${styles[modifier]} ${className}`} {...props} />;
+  return <input {...props} className={inputClass} />;
 };
-
-export default BooleanField;
diff --git a/src/components/atoms/forms/field.stories.tsx b/src/components/atoms/forms/field.stories.tsx
index 00a183d..27fd3be 100644
--- a/src/components/atoms/forms/field.stories.tsx
+++ b/src/components/atoms/forms/field.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import Field from './field';
+import { Field } from './field';
 
 /**
  * Field - Storybook Meta
diff --git a/src/components/atoms/forms/field.test.tsx b/src/components/atoms/forms/field.test.tsx
index 26ad764..492aa48 100644
--- a/src/components/atoms/forms/field.test.tsx
+++ b/src/components/atoms/forms/field.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Field from './field';
+import { Field } from './field';
 
 describe('Field', () => {
   it('renders a text input', () => {
diff --git a/src/components/atoms/forms/field.tsx b/src/components/atoms/forms/field.tsx
index 377e1b0..a4553e3 100644
--- a/src/components/atoms/forms/field.tsx
+++ b/src/components/atoms/forms/field.tsx
@@ -72,12 +72,7 @@ export type FieldProps = {
   value: string;
 };
 
-/**
- * Field component.
- *
- * Render either an input or a textarea.
- */
-const Field: ForwardRefRenderFunction<HTMLInputElement, FieldProps> = (
+const FieldWithRef: ForwardRefRenderFunction<HTMLInputElement, FieldProps> = (
   { className = '', setValue, type, ...props },
   ref
 ) => {
@@ -93,19 +88,24 @@ const Field: ForwardRefRenderFunction<HTMLInputElement, FieldProps> = (
 
   return type === 'textarea' ? (
     <textarea
-      onChange={updateValue}
-      className={`${styles.field} ${styles['field--textarea']} ${className}`}
       {...props}
+      className={`${styles.field} ${styles['field--textarea']} ${className}`}
+      onChange={updateValue}
     />
   ) : (
     <input
+      {...props}
       className={`${styles.field} ${className}`}
       onChange={updateValue}
       ref={ref}
       type={type}
-      {...props}
     />
   );
 };
 
-export default forwardRef(Field);
+/**
+ * Field component.
+ *
+ * Render either an input or a textarea.
+ */
+export const Field = forwardRef(FieldWithRef);
diff --git a/src/components/atoms/forms/form.test.tsx b/src/components/atoms/forms/form.test.tsx
index 3a055ed..b040665 100644
--- a/src/components/atoms/forms/form.test.tsx
+++ b/src/components/atoms/forms/form.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Form from './form';
+import { Form } from './form';
 
 describe('Form', () => {
   it('renders a form', () => {
diff --git a/src/components/atoms/forms/form.tsx b/src/components/atoms/forms/form.tsx
index 3307153..85ff8fd 100644
--- a/src/components/atoms/forms/form.tsx
+++ b/src/components/atoms/forms/form.tsx
@@ -1,24 +1,22 @@
-import { Children, FC, FormEvent, Fragment, ReactNode } from 'react';
+import {
+  Children,
+  FC,
+  FormEvent,
+  FormHTMLAttributes,
+  Fragment,
+  ReactNode,
+} from 'react';
 import styles from './forms.module.scss';
 
-export type FormProps = {
-  /**
-   * An accessible name.
-   */
-  'aria-label'?: string;
-  /**
-   * One or more ids that refers to the form name.
-   */
-  'aria-labelledby'?: string;
+export type FormProps = Omit<
+  FormHTMLAttributes<HTMLFormElement>,
+  'onSubmit'
+> & {
   /**
    * The form body.
    */
   children: ReactNode;
   /**
-   * Set additional classnames to the form wrapper.
-   */
-  className?: string;
-  /**
    * Wrap each items with a div. Default: true.
    */
   grouped?: boolean;
@@ -37,7 +35,7 @@ export type FormProps = {
  *
  * Render children wrapped in a form element.
  */
-const Form: FC<FormProps> = ({
+export const Form: FC<FormProps> = ({
   children,
   grouped = true,
   itemsClassName = '',
@@ -75,10 +73,8 @@ const Form: FC<FormProps> = ({
   };
 
   return (
-    <form onSubmit={handleSubmit} {...props}>
+    <form {...props} onSubmit={handleSubmit}>
       {getFormItems()}
     </form>
   );
 };
-
-export default Form;
diff --git a/src/components/atoms/forms/index.ts b/src/components/atoms/forms/index.ts
new file mode 100644
index 0000000..0af138f
--- /dev/null
+++ b/src/components/atoms/forms/index.ts
@@ -0,0 +1,5 @@
+export * from './boolean-field';
+export * from './field';
+export * from './form';
+export * from './label';
+export * from './select';
diff --git a/src/components/atoms/forms/label.stories.tsx b/src/components/atoms/forms/label.stories.tsx
index f66aa13..3adc92a 100644
--- a/src/components/atoms/forms/label.stories.tsx
+++ b/src/components/atoms/forms/label.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import LabelComponent from './label';
+import { Label as LabelComponent } from './label';
 
 /**
  * Label - Storybook Meta
diff --git a/src/components/atoms/forms/label.test.tsx b/src/components/atoms/forms/label.test.tsx
index 761d3b4..091737b 100644
--- a/src/components/atoms/forms/label.test.tsx
+++ b/src/components/atoms/forms/label.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Label from './label';
+import { Label } from './label';
 
 describe('Label', () => {
   it('renders a field label', () => {
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;
diff --git a/src/components/atoms/forms/select.stories.tsx b/src/components/atoms/forms/select.stories.tsx
index 7127597..b98ebed 100644
--- a/src/components/atoms/forms/select.stories.tsx
+++ b/src/components/atoms/forms/select.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import SelectComponent from './select';
+import { Select as SelectComponent } from './select';
 
 const selectOptions = [
   { id: 'option1', name: 'Option 1', value: 'option1' },
diff --git a/src/components/atoms/forms/select.test.tsx b/src/components/atoms/forms/select.test.tsx
index ca9f6d3..53d9b1f 100644
--- a/src/components/atoms/forms/select.test.tsx
+++ b/src/components/atoms/forms/select.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Select from './select';
+import { Select } from './select';
 
 const selectOptions = [
   { id: 'option1', name: 'Option 1', value: 'option1' },
diff --git a/src/components/atoms/forms/select.tsx b/src/components/atoms/forms/select.tsx
index dbe9b37..14f85dc 100644
--- a/src/components/atoms/forms/select.tsx
+++ b/src/components/atoms/forms/select.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, SetStateAction } from 'react';
+import { ChangeEvent, FC, SelectHTMLAttributes, SetStateAction } from 'react';
 import styles from './forms.module.scss';
 
 export type SelectOptions = {
@@ -16,19 +16,7 @@ export type SelectOptions = {
   value: string;
 };
 
-export type SelectProps = {
-  /**
-   * One or more ids that refers to the select field name.
-   */
-  'aria-labelledby'?: string;
-  /**
-   * Add classnames to the select field.
-   */
-  className?: string;
-  /**
-   * Field state. Either enabled (false) or disabled (true).
-   */
-  disabled?: boolean;
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
   /**
    * Field id attribute.
    */
@@ -42,10 +30,6 @@ export type SelectProps = {
    */
   options: SelectOptions[];
   /**
-   * True if the field is required. Default: false.
-   */
-  required?: boolean;
-  /**
    * Callback function to set field value.
    */
   setValue: (value: SetStateAction<string>) => void;
@@ -60,12 +44,14 @@ export type SelectProps = {
  *
  * Render a HTML select element.
  */
-const Select: FC<SelectProps> = ({
+export const Select: FC<SelectProps> = ({
   className = '',
   options,
   setValue,
   ...props
 }) => {
+  const selectClass = `${styles.field} ${styles['field--select']} ${className}`;
+
   /**
    * Update select value when an option is selected.
    * @param e - The option change event.
@@ -86,14 +72,8 @@ const Select: FC<SelectProps> = ({
     ));
 
   return (
-    <select
-      className={`${styles.field} ${styles['field--select']} ${className}`}
-      onChange={updateValue}
-      {...props}
-    >
+    <select {...props} className={selectClass} onChange={updateValue}>
       {getOptions()}
     </select>
   );
 };
-
-export default Select;
diff --git a/src/components/atoms/headings/heading.stories.tsx b/src/components/atoms/headings/heading.stories.tsx
index 0e3885d..4aa79c2 100644
--- a/src/components/atoms/headings/heading.stories.tsx
+++ b/src/components/atoms/headings/heading.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Heading from './heading';
+import { Heading } from './heading';
 
 /**
  * Heading - Storybook Meta
diff --git a/src/components/atoms/headings/heading.test.tsx b/src/components/atoms/headings/heading.test.tsx
index e1eef77..636fae0 100644
--- a/src/components/atoms/headings/heading.test.tsx
+++ b/src/components/atoms/headings/heading.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Heading from './heading';
+import { Heading } from './heading';
 
 describe('Heading', () => {
   it('renders a h1', () => {
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);
diff --git a/src/components/atoms/headings/index.ts b/src/components/atoms/headings/index.ts
new file mode 100644
index 0000000..3de265c
--- /dev/null
+++ b/src/components/atoms/headings/index.ts
@@ -0,0 +1 @@
+export * from './heading';
diff --git a/src/components/atoms/icons/arrow.stories.tsx b/src/components/atoms/icons/arrow.stories.tsx
index 9234886..a49be55 100644
--- a/src/components/atoms/icons/arrow.stories.tsx
+++ b/src/components/atoms/icons/arrow.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ArrowIcon from './arrow';
+import { Arrow as ArrowIcon } from './arrow';
 
 /**
  * Arrow icon - Storybook Meta
diff --git a/src/components/atoms/icons/arrow.test.tsx b/src/components/atoms/icons/arrow.test.tsx
index 9985717..ed1d1e2 100644
--- a/src/components/atoms/icons/arrow.test.tsx
+++ b/src/components/atoms/icons/arrow.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Arrow from './arrow';
+import { Arrow } from './arrow';
 
 describe('Arrow', () => {
   it('renders an arrow icon oriented to the right', () => {
diff --git a/src/components/atoms/icons/arrow.tsx b/src/components/atoms/icons/arrow.tsx
index 8aec5a1..2ef0185 100644
--- a/src/components/atoms/icons/arrow.tsx
+++ b/src/components/atoms/icons/arrow.tsx
@@ -1,17 +1,9 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './arrow.module.scss';
 
 export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left';
 
-export type ArrowProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
+export type ArrowProps = SVGAttributes<SVGElement> & {
   /**
    * The arrow direction. Default: right.
    */
@@ -23,17 +15,21 @@ export type ArrowProps = {
  *
  * Render a svg arrow icon.
  */
-const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
+export const Arrow: FC<ArrowProps> = ({
+  className = '',
+  direction,
+  ...props
+}) => {
   const directionClass = styles[`icon--${direction}`];
   const classes = `${styles.icon} ${directionClass} ${className}`;
 
   if (direction === 'top') {
     return (
       <svg
+        {...props}
         className={classes}
         viewBox="0 0 23.476 64.644995"
         xmlns="http://www.w3.org/2000/svg"
-        {...props}
       >
         <path
           className="arrow-head"
@@ -50,10 +46,10 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
   if (direction === 'bottom') {
     return (
       <svg
+        {...props}
         className={classes}
         viewBox="0 0 23.476 64.644995"
         xmlns="http://www.w3.org/2000/svg"
-        {...props}
       >
         <path
           className="arrow-head"
@@ -70,10 +66,10 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
   if (direction === 'left') {
     return (
       <svg
+        {...props}
         className={classes}
         viewBox="0 0 64.644997 23.476001"
         xmlns="http://www.w3.org/2000/svg"
-        {...props}
       >
         <path
           className="arrow-head"
@@ -89,10 +85,10 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
 
   return (
     <svg
+      {...props}
       className={classes}
       viewBox="0 0 64.644997 23.476001"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
     >
       <path
         className="arrow-head"
@@ -105,5 +101,3 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
     </svg>
   );
 };
-
-export default Arrow;
diff --git a/src/components/atoms/icons/career.stories.tsx b/src/components/atoms/icons/career.stories.tsx
index 400ed21..5c3ae12 100644
--- a/src/components/atoms/icons/career.stories.tsx
+++ b/src/components/atoms/icons/career.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CareerIcon from './career';
+import { Career as CareerIcon } from './career';
 
 /**
  * Career icon - Storybook Meta
diff --git a/src/components/atoms/icons/career.test.tsx b/src/components/atoms/icons/career.test.tsx
index 0c47262..7e53f6e 100644
--- a/src/components/atoms/icons/career.test.tsx
+++ b/src/components/atoms/icons/career.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Career from './career';
+import { Career } from './career';
 
 describe('Career', () => {
   it('renders a Career icon', () => {
diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx
index 009c2b4..6456d40 100644
--- a/src/components/atoms/icons/career.tsx
+++ b/src/components/atoms/icons/career.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './career.module.scss';
 
-export type CareerProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type CareerProps = SVGAttributes<SVGElement>;
 
 /**
  * Career Component
  *
  * Render a career svg icon.
  */
-const Career: FC<CareerProps> = ({ className = '', ...props }) => {
+export const Career: FC<CareerProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.bottom}
@@ -72,5 +63,3 @@ const Career: FC<CareerProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Career;
diff --git a/src/components/atoms/icons/cc-by-sa.stories.tsx b/src/components/atoms/icons/cc-by-sa.stories.tsx
index 4229725..2a29ee3 100644
--- a/src/components/atoms/icons/cc-by-sa.stories.tsx
+++ b/src/components/atoms/icons/cc-by-sa.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CCBySAIcon from './cc-by-sa';
+import { CCBySA as CCBySAIcon } from './cc-by-sa';
 
 /**
  * CC BY SA icon - Storybook Meta
diff --git a/src/components/atoms/icons/cc-by-sa.test.tsx b/src/components/atoms/icons/cc-by-sa.test.tsx
index 2bcb437..a23059d 100644
--- a/src/components/atoms/icons/cc-by-sa.test.tsx
+++ b/src/components/atoms/icons/cc-by-sa.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import CCBySA from './cc-by-sa';
+import { CCBySA } from './cc-by-sa';
 
 describe('CCBySA', () => {
   it('renders a CC BY SA icon', () => {
diff --git a/src/components/atoms/icons/cc-by-sa.tsx b/src/components/atoms/icons/cc-by-sa.tsx
index 8239154..ba6d278 100644
--- a/src/components/atoms/icons/cc-by-sa.tsx
+++ b/src/components/atoms/icons/cc-by-sa.tsx
@@ -1,24 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './cc-by-sa.module.scss';
 
-export type CCBySAProps = {
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type CCBySAProps = SVGAttributes<SVGElement>;
 
 /**
  * CCBySA component
  *
  * Render a CC BY SA svg icon.
  */
-const CCBySA: FC<CCBySAProps> = ({ className = '' }) => {
+export const CCBySA: FC<CCBySAProps> = ({ className = '', ...props }) => {
   const intl = useIntl();
 
   return (
     <svg
+      {...props}
       className={`${styles.icon} ${className}`}
       viewBox="0 0 211.99811 63.999996"
       xmlns="http://www.w3.org/2000/svg"
@@ -41,5 +37,3 @@ const CCBySA: FC<CCBySAProps> = ({ className = '' }) => {
     </svg>
   );
 };
-
-export default CCBySA;
diff --git a/src/components/atoms/icons/close.stories.tsx b/src/components/atoms/icons/close.stories.tsx
index 05251c5..d075141 100644
--- a/src/components/atoms/icons/close.stories.tsx
+++ b/src/components/atoms/icons/close.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CloseIcon from './close';
+import { Close as CloseIcon } from './close';
 
 /**
  * Close icon - Storybook Meta
diff --git a/src/components/atoms/icons/close.test.tsx b/src/components/atoms/icons/close.test.tsx
index dc82a2d..058b793 100644
--- a/src/components/atoms/icons/close.test.tsx
+++ b/src/components/atoms/icons/close.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Close from './close';
+import { Close } from './close';
 
 describe('Close', () => {
   it('renders a Close icon', () => {
diff --git a/src/components/atoms/icons/close.tsx b/src/components/atoms/icons/close.tsx
index 14239a1..5db8620 100644
--- a/src/components/atoms/icons/close.tsx
+++ b/src/components/atoms/icons/close.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './close.module.scss';
 
-export type CloseProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type CloseProps = SVGAttributes<SVGElement>;
 
 /**
  * Close component
  *
  * Render a close svg icon.
  */
-const Close: FC<CloseProps> = ({ className = '', ...props }) => {
+export const Close: FC<CloseProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.line}
@@ -36,5 +27,3 @@ const Close: FC<CloseProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Close;
diff --git a/src/components/atoms/icons/cog.stories.tsx b/src/components/atoms/icons/cog.stories.tsx
index 74228ca..1b6d440 100644
--- a/src/components/atoms/icons/cog.stories.tsx
+++ b/src/components/atoms/icons/cog.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CogIcon from './cog';
+import { Cog as CogIcon } from './cog';
 
 /**
  * Cogs icon - Storybook Meta
diff --git a/src/components/atoms/icons/cog.test.tsx b/src/components/atoms/icons/cog.test.tsx
index 9d201b1..016ef15 100644
--- a/src/components/atoms/icons/cog.test.tsx
+++ b/src/components/atoms/icons/cog.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Cog from './cog';
+import { Cog } from './cog';
 
 describe('Cog', () => {
   it('renders a Cog icon', () => {
diff --git a/src/components/atoms/icons/cog.tsx b/src/components/atoms/icons/cog.tsx
index 5431f9e..6e44708 100644
--- a/src/components/atoms/icons/cog.tsx
+++ b/src/components/atoms/icons/cog.tsx
@@ -1,34 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './cog.module.scss';
 
-export type CogProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type CogProps = SVGAttributes<SVGElement>;
 
 /**
  * Cog component
  *
  * Render a cog svg icon.
  */
-const Cog: FC<CogProps> = ({ className = '', ...props }) => {
+export const Cog: FC<CogProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path d="m 71.782287,3.1230469 c -1.164356,0 -2.3107,0.076326 -3.435131,0.2227895 L 66.33766,9.1021499 C 64.651951,9.5517047 63.049493,10.204637 61.558109,11.033725 L 56.112383,8.2889128 c -1.970928,1.4609237 -3.730521,3.1910632 -5.22513,5.1351362 l 2.648234,5.494014 c -0.855644,1.477262 -1.537042,3.067161 -2.016082,4.743334 l -5.791433,1.911821 c -0.188001,1.269731 -0.286444,2.568579 -0.286444,3.890587 0,1.164355 0.07633,2.310701 0.222789,3.435131 l 5.756315,2.009497 c 0.449555,1.685708 1.102486,3.288168 1.931575,4.779551 l -2.744813,5.445725 c 1.460924,1.970927 3.191063,3.730521 5.135137,5.22513 l 5.494014,-2.648233 c 1.477261,0.85564 3.067161,1.537039 4.743334,2.016081 L 67.8917,55.51812 c 1.26973,0.188002 2.568578,0.286444 3.890587,0.286444 1.16565,0 2.313889,-0.07601 3.43952,-0.222789 l 2.008399,-5.756314 c 1.684332,-0.449523 3.285984,-1.103103 4.776259,-1.931575 l 5.445725,2.744812 c 1.970928,-1.460924 3.730521,-3.191061 5.22513,-5.135136 l -2.648233,-5.494015 c 0.85564,-1.477262 1.537039,-3.067161 2.016082,-4.743334 l 5.79253,-1.91182 c 0.187995,-1.269731 0.285346,-2.56858 0.285346,-3.890588 0,-1.16565 -0.07601,-2.313889 -0.222789,-3.439521 L 92.143942,24.015886 C 91.694419,22.331554 91.04084,20.729903 90.212367,19.239628 l 2.744812,-5.445726 C 91.496255,11.822973 89.766118,10.063381 87.822043,8.5687715 L 82.328028,11.217006 C 80.850766,10.361361 79.260867,9.6799641 77.584694,9.2009234 L 75.672874,3.4094907 C 74.403143,3.2214898 73.104295,3.1230469 71.782287,3.1230469 Z m 0,15.0520191 a 11.288679,11.288679 0 0 1 11.288739,11.288739 11.288679,11.288679 0 0 1 -11.288739,11.28874 11.288679,11.288679 0 0 1 -11.28874,-11.28874 11.288679,11.288679 0 0 1 11.28874,-11.288739 z" />
       <path d="m 38.326115,25.84777 c -1.583642,0 -3.142788,0.103807 -4.672127,0.303016 l -2.73312,7.829173 c -2.292736,0.611441 -4.472242,1.499494 -6.500676,2.627139 L 17.01345,32.873874 c -2.680664,1.987004 -5.073889,4.340169 -7.1067095,6.984309 l 3.6018685,7.472418 c -1.163764,2.009226 -2.090533,4.171652 -2.742078,6.451418 l -7.8769382,2.60027 C 2.6338924,58.109252 2.5,59.875819 2.5,61.673885 c 0,1.583642 0.1038125,3.142788 0.3030165,4.672128 l 7.8291725,2.73312 c 0.611441,2.292734 1.499494,4.472243 2.627139,6.500673 L 9.5261037,82.98655 c 1.9870063,2.680661 4.3401703,5.07389 6.9843093,7.106709 l 7.472419,-3.601867 c 2.009226,1.16376 4.171651,2.090533 6.451418,2.742079 l 2.60027,7.876932 C 34.761483,97.366114 36.528049,97.5 38.326115,97.5 c 1.585404,0 3.147126,-0.103373 4.678099,-0.303015 l 2.731628,-7.829178 c 2.290862,-0.611397 4.469272,-1.500329 6.496197,-2.627132 l 7.406741,3.733224 c 2.680664,-1.987007 5.07389,-4.340171 7.10671,-6.984313 l -3.601866,-7.472415 c 1.163756,-2.00923 2.090529,-4.171655 2.742076,-6.45142 l 7.878431,-2.60027 c 0.255691,-1.726964 0.3881,-3.49353 0.3881,-5.291596 0,-1.585404 -0.103373,-3.147127 -0.303016,-4.678099 L 66.020041,54.264159 C 65.408645,51.973296 64.51971,49.794888 63.392903,47.767962 l 3.733224,-7.406742 c -1.987006,-2.680664 -4.340168,-5.073889 -6.984309,-7.10671 l -7.472419,3.601867 c -2.009228,-1.163762 -4.171651,-2.090533 -6.451418,-2.742076 l -2.60027,-7.876939 C 41.890748,25.981661 40.124181,25.84777 38.326115,25.84777 Z m 0,20.472278 A 15.353754,15.353754 0 0 1 53.679952,61.673885 15.353754,15.353754 0 0 1 38.326115,77.027724 15.353754,15.353754 0 0 1 22.972279,61.673885 15.353754,15.353754 0 0 1 38.326115,46.320048 Z" />
     </svg>
   );
 };
-
-export default Cog;
diff --git a/src/components/atoms/icons/computer-screen.stories.tsx b/src/components/atoms/icons/computer-screen.stories.tsx
index ad457a9..d4b257b 100644
--- a/src/components/atoms/icons/computer-screen.stories.tsx
+++ b/src/components/atoms/icons/computer-screen.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ComputerScreenIcon from './computer-screen';
+import { ComputerScreen as ComputerScreenIcon } from './computer-screen';
 
 /**
  * Computer Screen icon - Storybook Meta
diff --git a/src/components/atoms/icons/computer-screen.test.tsx b/src/components/atoms/icons/computer-screen.test.tsx
index baa2c78..d74933a 100644
--- a/src/components/atoms/icons/computer-screen.test.tsx
+++ b/src/components/atoms/icons/computer-screen.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import ComputerScreen from './computer-screen';
+import { ComputerScreen } from './computer-screen';
 
 describe('ComputerScreen', () => {
   it('renders a computer screen icon', () => {
diff --git a/src/components/atoms/icons/computer-screen.tsx b/src/components/atoms/icons/computer-screen.tsx
index 9293316..32f41a0 100644
--- a/src/components/atoms/icons/computer-screen.tsx
+++ b/src/components/atoms/icons/computer-screen.tsx
@@ -1,32 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './computer-screen.module.scss';
 
-export type ComputerScreenProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type ComputerScreenProps = SVGAttributes<SVGElement>;
 
 /**
  * ComputerScreen component
  *
  * Render a computer screen svg icon.
  */
-const ComputerScreen: FC<ComputerScreenProps> = ({
+export const ComputerScreen: FC<ComputerScreenProps> = ({
   className = '',
   ...props
 }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z"
@@ -83,5 +74,3 @@ const ComputerScreen: FC<ComputerScreenProps> = ({
     </svg>
   );
 };
-
-export default ComputerScreen;
diff --git a/src/components/atoms/icons/envelop.stories.tsx b/src/components/atoms/icons/envelop.stories.tsx
index 3d24d2e..666cd86 100644
--- a/src/components/atoms/icons/envelop.stories.tsx
+++ b/src/components/atoms/icons/envelop.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import EnvelopIcon from './envelop';
+import { Envelop as EnvelopIcon } from './envelop';
 
 /**
  * Envelop icon - Storybook Meta
diff --git a/src/components/atoms/icons/envelop.test.tsx b/src/components/atoms/icons/envelop.test.tsx
index c040134..1829fe2 100644
--- a/src/components/atoms/icons/envelop.test.tsx
+++ b/src/components/atoms/icons/envelop.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Envelop from './envelop';
+import { Envelop } from './envelop';
 
 describe('Envelop', () => {
   it('renders an envelop icon', () => {
diff --git a/src/components/atoms/icons/envelop.tsx b/src/components/atoms/icons/envelop.tsx
index 99a003b..968c51f 100644
--- a/src/components/atoms/icons/envelop.tsx
+++ b/src/components/atoms/icons/envelop.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './envelop.module.scss';
 
-export type EnvelopProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type EnvelopProps = SVGAttributes<SVGElement>;
 
 /**
  * Envelop Component
  *
  * Render an envelop svg icon.
  */
-const Envelop: FC<EnvelopProps> = ({ className = '', ...props }) => {
+export const Envelop: FC<EnvelopProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.background}
@@ -68,5 +59,3 @@ const Envelop: FC<EnvelopProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Envelop;
diff --git a/src/components/atoms/icons/feed.stories.tsx b/src/components/atoms/icons/feed.stories.tsx
index 5e4615f..1a297e9 100644
--- a/src/components/atoms/icons/feed.stories.tsx
+++ b/src/components/atoms/icons/feed.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import FeedIcon from './feed';
+import { Feed as FeedIcon } from './feed';
 
 /**
  * Feed icon - Storybook Meta
diff --git a/src/components/atoms/icons/feed.test.tsx b/src/components/atoms/icons/feed.test.tsx
index 630089d..ca6f331 100644
--- a/src/components/atoms/icons/feed.test.tsx
+++ b/src/components/atoms/icons/feed.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Feed from './feed';
+import { Feed } from './feed';
 
 describe('Feed', () => {
   it('renders a feed icon', () => {
diff --git a/src/components/atoms/icons/feed.tsx b/src/components/atoms/icons/feed.tsx
index 4428eb9..40b3156 100644
--- a/src/components/atoms/icons/feed.tsx
+++ b/src/components/atoms/icons/feed.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './feed.module.scss';
 
-export type FeedProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type FeedProps = SVGAttributes<SVGElement>;
 
 /**
  * Feed Component
  *
  * Render a feed svg icon.
  */
-const Feed: FC<FeedProps> = ({ className = '', ...props }) => {
+export const Feed: FC<FeedProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 256 256"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <defs>
         <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
@@ -75,5 +66,3 @@ const Feed: FC<FeedProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Feed;
diff --git a/src/components/atoms/icons/hamburger.stories.tsx b/src/components/atoms/icons/hamburger.stories.tsx
index 0a8a8cc..b2416c6 100644
--- a/src/components/atoms/icons/hamburger.stories.tsx
+++ b/src/components/atoms/icons/hamburger.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import HamburgerIcon from './hamburger';
+import { Hamburger as HamburgerIcon } from './hamburger';
 
 /**
  * Hamburger icon - Storybook Meta
diff --git a/src/components/atoms/icons/hamburger.test.tsx b/src/components/atoms/icons/hamburger.test.tsx
index 4f6a457..b208a42 100644
--- a/src/components/atoms/icons/hamburger.test.tsx
+++ b/src/components/atoms/icons/hamburger.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Hamburger from './hamburger';
+import { Hamburger } from './hamburger';
 
 describe('Hamburger', () => {
   it('renders a Hamburger icon', () => {
diff --git a/src/components/atoms/icons/hamburger.tsx b/src/components/atoms/icons/hamburger.tsx
index 93aed2a..cc4e7b9 100644
--- a/src/components/atoms/icons/hamburger.tsx
+++ b/src/components/atoms/icons/hamburger.tsx
@@ -6,7 +6,6 @@ export type HamburgerProps = {
    * Set additional classnames to the icon wrapper.
    */
   className?: string;
-
   /**
    * Set additional classnames to the icon.
    */
@@ -18,7 +17,7 @@ export type HamburgerProps = {
  *
  * Render a Hamburger icon.
  */
-const Hamburger: FC<HamburgerProps> = ({
+export const Hamburger: FC<HamburgerProps> = ({
   className = '',
   iconClassName = '',
 }) => {
@@ -28,5 +27,3 @@ const Hamburger: FC<HamburgerProps> = ({
     </span>
   );
 };
-
-export default Hamburger;
diff --git a/src/components/atoms/icons/home.stories.tsx b/src/components/atoms/icons/home.stories.tsx
index 90650fc..7492af7 100644
--- a/src/components/atoms/icons/home.stories.tsx
+++ b/src/components/atoms/icons/home.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import HomeIcon from './home';
+import { Home as HomeIcon } from './home';
 
 /**
  * Home icon - Storybook Meta
diff --git a/src/components/atoms/icons/home.test.tsx b/src/components/atoms/icons/home.test.tsx
index 0473d0b..2fbe42f 100644
--- a/src/components/atoms/icons/home.test.tsx
+++ b/src/components/atoms/icons/home.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Home from './home';
+import { Home } from './home';
 
 describe('Home', () => {
   it('renders a home icon', () => {
diff --git a/src/components/atoms/icons/home.tsx b/src/components/atoms/icons/home.tsx
index dd39b15..0081f37 100644
--- a/src/components/atoms/icons/home.tsx
+++ b/src/components/atoms/icons/home.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './home.module.scss';
 
-export type HomeProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type HomeProps = SVGAttributes<SVGElement>;
 
 /**
  * Home component.
  *
  * Render a home svg icon.
  */
-const Home: FC<HomeProps> = ({ className = '', ...props }) => {
+export const Home: FC<HomeProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.wall}
@@ -56,5 +47,3 @@ const Home: FC<HomeProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Home;
diff --git a/src/components/atoms/icons/index.ts b/src/components/atoms/icons/index.ts
new file mode 100644
index 0000000..1b413ba
--- /dev/null
+++ b/src/components/atoms/icons/index.ts
@@ -0,0 +1,15 @@
+export * from './arrow';
+export * from './career';
+export * from './cc-by-sa';
+export * from './close';
+export * from './cog';
+export * from './computer-screen';
+export * from './envelop';
+export * from './feed';
+export * from './hamburger';
+export * from './home';
+export * from './magnifying-glass';
+export * from './moon';
+export * from './plus-minus';
+export * from './posts-stack';
+export * from './sun';
diff --git a/src/components/atoms/icons/magnifying-glass.stories.tsx b/src/components/atoms/icons/magnifying-glass.stories.tsx
index 0715a11..7dec505 100644
--- a/src/components/atoms/icons/magnifying-glass.stories.tsx
+++ b/src/components/atoms/icons/magnifying-glass.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import MagnifyingGlassIcon from './magnifying-glass';
+import { MagnifyingGlass as MagnifyingGlassIcon } from './magnifying-glass';
 
 /**
  * Magnifying Glass icon - Storybook Meta
diff --git a/src/components/atoms/icons/magnifying-glass.test.tsx b/src/components/atoms/icons/magnifying-glass.test.tsx
index c6ddb18..4e2f449 100644
--- a/src/components/atoms/icons/magnifying-glass.test.tsx
+++ b/src/components/atoms/icons/magnifying-glass.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import MagnifyingGlass from './magnifying-glass';
+import { MagnifyingGlass } from './magnifying-glass';
 
 describe('MagnifyingGlass', () => {
   it('renders a magnifying glass icon', () => {
diff --git a/src/components/atoms/icons/magnifying-glass.tsx b/src/components/atoms/icons/magnifying-glass.tsx
index ad8da39..619adef 100644
--- a/src/components/atoms/icons/magnifying-glass.tsx
+++ b/src/components/atoms/icons/magnifying-glass.tsx
@@ -1,32 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './magnifying-glass.module.scss';
 
-export type MagnifyingGlassProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type MagnifyingGlassProps = SVGAttributes<SVGElement>;
 
 /**
  * MagnifyingGlass component
  *
  * Render a magnifying glass svg icon.
  */
-const MagnifyingGlass: FC<MagnifyingGlassProps> = ({
+export const MagnifyingGlass: FC<MagnifyingGlassProps> = ({
   className = '',
   ...props
 }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles['small-handle']}
@@ -47,5 +38,3 @@ const MagnifyingGlass: FC<MagnifyingGlassProps> = ({
     </svg>
   );
 };
-
-export default MagnifyingGlass;
diff --git a/src/components/atoms/icons/moon.stories.tsx b/src/components/atoms/icons/moon.stories.tsx
index 9584e47..a8faf03 100644
--- a/src/components/atoms/icons/moon.stories.tsx
+++ b/src/components/atoms/icons/moon.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import MoonIcon from './moon';
+import { Moon as MoonIcon } from './moon';
 
 /**
  * Moon icon - Storybook Meta
diff --git a/src/components/atoms/icons/moon.test.tsx b/src/components/atoms/icons/moon.test.tsx
index 09415a9..3c1021a 100644
--- a/src/components/atoms/icons/moon.test.tsx
+++ b/src/components/atoms/icons/moon.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Moon from './moon';
+import { Moon } from './moon';
 
 describe('Moon', () => {
   it('renders a moon icon', () => {
diff --git a/src/components/atoms/icons/moon.tsx b/src/components/atoms/icons/moon.tsx
index d04605a..2139ce1 100644
--- a/src/components/atoms/icons/moon.tsx
+++ b/src/components/atoms/icons/moon.tsx
@@ -1,33 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './moon.module.scss';
 
-export type MoonProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
+export type MoonProps = SVGAttributes<SVGElement> & {
   /**
    * The SVG title.
    */
   title?: string;
 };
 
-const Moon: FC<MoonProps> = ({ className = '', title, ...props }) => {
+export const Moon: FC<MoonProps> = ({ className = '', title, ...props }) => {
   return (
     <svg
+      {...props}
       className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
     >
-      {title !== 'undefined' && <title>{title}</title>}
+      {title ? <title>{title}</title> : null}
       <path d="M 51.077315,1.9893942 A 43.319985,43.319985 0 0 1 72.840039,39.563145 43.319985,43.319985 0 0 1 29.520053,82.88313 43.319985,43.319985 0 0 1 5.4309911,75.569042 48.132997,48.132997 0 0 0 46.126047,98 48.132997,48.132997 0 0 0 94.260004,49.867002 48.132997,48.132997 0 0 0 51.077315,1.9893942 Z" />
     </svg>
   );
 };
-
-export default Moon;
diff --git a/src/components/atoms/icons/plus-minus.stories.tsx b/src/components/atoms/icons/plus-minus.stories.tsx
index eebf1e5..c556076 100644
--- a/src/components/atoms/icons/plus-minus.stories.tsx
+++ b/src/components/atoms/icons/plus-minus.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import PlusMinusIcon from './plus-minus';
+import { PlusMinus as PlusMinusIcon } from './plus-minus';
 
 /**
  * Plus/Minus icon - Storybook Meta
diff --git a/src/components/atoms/icons/plus-minus.test.tsx b/src/components/atoms/icons/plus-minus.test.tsx
index 5105403..174f8e1 100644
--- a/src/components/atoms/icons/plus-minus.test.tsx
+++ b/src/components/atoms/icons/plus-minus.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import PlusMinus from './plus-minus';
+import { PlusMinus } from './plus-minus';
 
 describe('PlusMinus', () => {
   it('renders a plus/minus icon', () => {
diff --git a/src/components/atoms/icons/plus-minus.tsx b/src/components/atoms/icons/plus-minus.tsx
index e8897b7..e2eb55e 100644
--- a/src/components/atoms/icons/plus-minus.tsx
+++ b/src/components/atoms/icons/plus-minus.tsx
@@ -17,15 +17,13 @@ export type PlusMinusProps = {
  *
  * Render a plus or a minus icon.
  */
-const PlusMinus: FC<PlusMinusProps> = ({ className, state }) => {
+export const PlusMinus: FC<PlusMinusProps> = ({ className = '', state }) => {
   const stateClass = `icon--${state}`;
 
   return (
     <div
-      className={`${styles.icon} ${styles[stateClass]} ${className}`}
       aria-hidden={true}
-    ></div>
+      className={`${styles.icon} ${styles[stateClass]} ${className}`}
+    />
   );
 };
-
-export default PlusMinus;
diff --git a/src/components/atoms/icons/posts-stack.stories.tsx b/src/components/atoms/icons/posts-stack.stories.tsx
index f11b13b..7daeecf 100644
--- a/src/components/atoms/icons/posts-stack.stories.tsx
+++ b/src/components/atoms/icons/posts-stack.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import PostsStackIcon from './posts-stack';
+import { PostsStack as PostsStackIcon } from './posts-stack';
 
 /**
  * Posts Stack icon - Storybook Meta
diff --git a/src/components/atoms/icons/posts-stack.test.tsx b/src/components/atoms/icons/posts-stack.test.tsx
index 65e0d3b..3728d1e 100644
--- a/src/components/atoms/icons/posts-stack.test.tsx
+++ b/src/components/atoms/icons/posts-stack.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import PostsStack from './posts-stack';
+import { PostsStack } from './posts-stack';
 
 describe('PostsStack', () => {
   it('renders a posts stack icon', () => {
diff --git a/src/components/atoms/icons/posts-stack.tsx b/src/components/atoms/icons/posts-stack.tsx
index af070de..c783892 100644
--- a/src/components/atoms/icons/posts-stack.tsx
+++ b/src/components/atoms/icons/posts-stack.tsx
@@ -1,29 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './posts-stack.module.scss';
 
-export type PostsStackProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type PostsStackProps = SVGAttributes<SVGElement>;
 
 /**
  * Posts stack component.
  *
  * Render a posts stack svg icon.
  */
-const PostsStack: FC<PostsStackProps> = ({ className = '', ...props }) => {
+export const PostsStack: FC<PostsStackProps> = ({
+  className = '',
+  ...props
+}) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.background}
@@ -76,5 +70,3 @@ const PostsStack: FC<PostsStackProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default PostsStack;
diff --git a/src/components/atoms/icons/sun.stories.tsx b/src/components/atoms/icons/sun.stories.tsx
index dabda66..a332bcd 100644
--- a/src/components/atoms/icons/sun.stories.tsx
+++ b/src/components/atoms/icons/sun.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SunIcon from './sun';
+import { Sun as SunIcon } from './sun';
 
 /**
  * Sun icon - Storybook Meta
diff --git a/src/components/atoms/icons/sun.test.tsx b/src/components/atoms/icons/sun.test.tsx
index af52a5f..8a43221 100644
--- a/src/components/atoms/icons/sun.test.tsx
+++ b/src/components/atoms/icons/sun.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Sun from './sun';
+import { Sun } from './sun';
 
 describe('Sun', () => {
   it('renders a sun icon', () => {
diff --git a/src/components/atoms/icons/sun.tsx b/src/components/atoms/icons/sun.tsx
index 1d29ff4..69a3044 100644
--- a/src/components/atoms/icons/sun.tsx
+++ b/src/components/atoms/icons/sun.tsx
@@ -1,15 +1,7 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './sun.module.scss';
 
-export type SunProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
+export type SunProps = SVGAttributes<SVGElement> & {
   /**
    * The SVG title.
    */
@@ -21,18 +13,16 @@ export type SunProps = {
  *
  * Render a svg sun icon.
  */
-const Sun: FC<SunProps> = ({ className = '', title, ...props }) => {
+export const Sun: FC<SunProps> = ({ className = '', title, ...props }) => {
   return (
     <svg
+      {...props}
       className={`${styles.sun} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
     >
       {title !== 'undefined' && <title>{title}</title>}
       <path d="M 69.398043,50.000437 A 19.399259,19.399204 0 0 1 49.998784,69.399641 19.399259,19.399204 0 0 1 30.599525,50.000437 19.399259,19.399204 0 0 1 49.998784,30.601234 19.399259,19.399204 0 0 1 69.398043,50.000437 Z m 27.699233,1.125154 c 2.657696,0.0679 1.156196,12.061455 -1.435545,11.463959 L 80.113224,59.000697 c -2.589801,-0.597494 -1.625657,-8.345536 1.032041,-8.278609 z m -18.06653,37.251321 c 1.644087,2.091234 -9.030355,8.610337 -10.126414,6.188346 L 62.331863,80.024585 c -1.096058,-2.423931 5.197062,-6.285342 6.839209,-4.194107 z M 38.611418,97.594444 C 38.02653,100.18909 26.24148,95.916413 27.436475,93.54001 l 7.168026,-14.256474 c 1.194024,-2.376403 8.102101,0.151313 7.517214,2.744986 z M 6.1661563,71.834242 C 3.7916868,73.028262 -0.25499873,61.16274 2.3386824,60.577853 L 17.905618,57.067567 c 2.593681,-0.584886 4.894434,6.403678 2.518995,7.598668 z M 6.146757,30.055146 c -2.3764094,-1.194991 4.46571,-11.714209 6.479353,-9.97798 l 12.090589,10.414462 c 2.014613,1.736229 -1.937017,7.926514 -4.314396,6.731524 z M 38.56777,4.2639045 C 37.982883,1.6682911 50.480855,0.41801247 50.415868,3.0766733 L 50.020123,19.028638 c -0.06596,2.657691 -7.357169,3.394862 -7.943027,0.800218 z m 40.403808,9.1622435 c 1.635357,-2.098023 10.437771,6.872168 8.339742,8.506552 l -12.58818,9.805327 c -2.099,1.634383 -7.192276,-3.626682 -5.557888,-5.724706 z M 97.096306,50.69105 c 2.657696,-0.06596 1.164926,12.462047 -1.425846,11.863582 L 80.122924,58.96578 c -2.590771,-0.597496 -1.636327,-7.814 1.021371,-7.879957 z" />
     </svg>
   );
 };
-
-export default Sun;
diff --git a/src/components/atoms/images/index.ts b/src/components/atoms/images/index.ts
new file mode 100644
index 0000000..cb6151d
--- /dev/null
+++ b/src/components/atoms/images/index.ts
@@ -0,0 +1 @@
+export * from './logo';
diff --git a/src/components/atoms/images/logo.stories.tsx b/src/components/atoms/images/logo.stories.tsx
index 458ec08..bf19b34 100644
--- a/src/components/atoms/images/logo.stories.tsx
+++ b/src/components/atoms/images/logo.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import LogoComponent from './logo';
+import { Logo as LogoComponent } from './logo';
 
 /**
  * Logo - Storybook Meta
diff --git a/src/components/atoms/images/logo.test.tsx b/src/components/atoms/images/logo.test.tsx
index e56a737..81aec3a 100644
--- a/src/components/atoms/images/logo.test.tsx
+++ b/src/components/atoms/images/logo.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Logo from './logo';
+import { Logo } from './logo';
 
 describe('Logo', () => {
   it('renders a logo with a title', () => {
diff --git a/src/components/atoms/images/logo.tsx b/src/components/atoms/images/logo.tsx
index 3978882..491539d 100644
--- a/src/components/atoms/images/logo.tsx
+++ b/src/components/atoms/images/logo.tsx
@@ -1,7 +1,7 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './logo.module.scss';
 
-export type LogoProps = {
+export type LogoProps = SVGAttributes<SVGElement> & {
   /**
    * SVG Image title.
    */
@@ -13,14 +13,15 @@ export type LogoProps = {
  *
  * Render a SVG logo.
  */
-const Logo: FC<LogoProps> = ({ title }) => {
+export const Logo: FC<LogoProps> = ({ title, ...props }) => {
   return (
     <svg
+      {...props}
+      className={styles.wrapper}
       viewBox="0 0 512 512"
       xmlns="http://www.w3.org/2000/svg"
-      className={styles.wrapper}
     >
-      {title && <title>{title}</title>}
+      {title ? <title>{title}</title> : null}
       <path className={styles['bg-left']} d="M 0,0 H 506 L 0,506 Z" />
       <path className={styles['bg-right']} d="M 512,512 H 6 L 512,6 Z" />
       <path
@@ -42,5 +43,3 @@ const Logo: FC<LogoProps> = ({ title }) => {
     </svg>
   );
 };
-
-export default Logo;
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
new file mode 100644
index 0000000..72b5598
--- /dev/null
+++ b/src/components/atoms/index.ts
@@ -0,0 +1,9 @@
+export * from './buttons';
+export * from './forms';
+export * from './headings';
+export * from './icons';
+export * from './images';
+export * from './layout';
+export * from './links';
+export * from './lists';
+export * from './loaders';
diff --git a/src/components/atoms/layout/column.stories.tsx b/src/components/atoms/layout/column.stories.tsx
index a03c462..a8d43bf 100644
--- a/src/components/atoms/layout/column.stories.tsx
+++ b/src/components/atoms/layout/column.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ColumnComponent from './column';
+import { Column as ColumnComponent } from './column';
 
 export default {
   title: 'Atoms/Layout/Column',
diff --git a/src/components/atoms/layout/column.test.tsx b/src/components/atoms/layout/column.test.tsx
index c722082..fd3c9e7 100644
--- a/src/components/atoms/layout/column.test.tsx
+++ b/src/components/atoms/layout/column.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Column from './column';
+import { Column } from './column';
 
 const body =
   'Non praesentium voluptas quisquam ex est. Distinctio accusamus facilis libero in aut. Et veritatis quo impedit fugit amet sit accusantium. Ut est rerum asperiores sint libero eveniet. Molestias placeat recusandae suscipit eligendi sunt hic.';
diff --git a/src/components/atoms/layout/column.tsx b/src/components/atoms/layout/column.tsx
index ec6440d..632799c 100644
--- a/src/components/atoms/layout/column.tsx
+++ b/src/components/atoms/layout/column.tsx
@@ -1,7 +1,7 @@
-import { FC, ReactNode } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 
-export type ColumnProps = {
-  children: ReactNode | ReactNode[];
+export type ColumnProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
 };
 
 /**
@@ -9,8 +9,6 @@ export type ColumnProps = {
  *
  * Render the body as a column.
  */
-const Column: FC<ColumnProps> = ({ children }) => {
-  return <div>{children}</div>;
+export const Column: FC<ColumnProps> = ({ children, ...props }) => {
+  return <div {...props}>{children}</div>;
 };
-
-export default Column;
diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx
index 25d54b0..fa79d32 100644
--- a/src/components/atoms/layout/copyright.stories.tsx
+++ b/src/components/atoms/layout/copyright.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CCBySA from '../icons/cc-by-sa';
-import CopyrightComponent from './copyright';
+import { CCBySA } from '../icons';
+import { Copyright as CopyrightComponent } from './copyright';
 
 /**
  * Copyright - Storybook Meta
diff --git a/src/components/atoms/layout/copyright.test.tsx b/src/components/atoms/layout/copyright.test.tsx
index c3eef67..3631545 100644
--- a/src/components/atoms/layout/copyright.test.tsx
+++ b/src/components/atoms/layout/copyright.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '../../../../tests/utils';
-import CCBySA from '../icons/cc-by-sa';
-import Copyright from './copyright';
+import { CCBySA } from '../icons';
+import { Copyright } from './copyright';
 
 const dates = {
   start: '2012',
diff --git a/src/components/atoms/layout/copyright.tsx b/src/components/atoms/layout/copyright.tsx
index f70695d..1e4af5e 100644
--- a/src/components/atoms/layout/copyright.tsx
+++ b/src/components/atoms/layout/copyright.tsx
@@ -32,7 +32,7 @@ export type CopyrightProps = {
  *
  * Renders a copyright information (owner, dates, license icon).
  */
-const Copyright: FC<CopyrightProps> = ({ owner, dates, icon }) => {
+export const Copyright: FC<CopyrightProps> = ({ owner, dates, icon }) => {
   const getFormattedDate = (date: string) => {
     const datetime = new Date(date).toISOString();
 
@@ -55,5 +55,3 @@ const Copyright: FC<CopyrightProps> = ({ owner, dates, icon }) => {
     </div>
   );
 };
-
-export default Copyright;
diff --git a/src/components/atoms/layout/index.ts b/src/components/atoms/layout/index.ts
new file mode 100644
index 0000000..8cbc597
--- /dev/null
+++ b/src/components/atoms/layout/index.ts
@@ -0,0 +1,7 @@
+export * from './column';
+export * from './copyright';
+export * from './main';
+export * from './no-script';
+export * from './notice';
+export * from './section';
+export * from './sidebar';
diff --git a/src/components/atoms/layout/main.stories.tsx b/src/components/atoms/layout/main.stories.tsx
index 5bde475..ef4d728 100644
--- a/src/components/atoms/layout/main.stories.tsx
+++ b/src/components/atoms/layout/main.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import MainComponent from './main';
+import { Main as MainComponent } from './main';
 
 /**
  * Main - Storybook Meta
diff --git a/src/components/atoms/layout/main.test.tsx b/src/components/atoms/layout/main.test.tsx
index d9b9e57..f6b8064 100644
--- a/src/components/atoms/layout/main.test.tsx
+++ b/src/components/atoms/layout/main.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Main from './main';
+import { Main } from './main';
 
 const id = 'main';
 const children = 'The main content.';
diff --git a/src/components/atoms/layout/main.tsx b/src/components/atoms/layout/main.tsx
index d92a5c7..919b25a 100644
--- a/src/components/atoms/layout/main.tsx
+++ b/src/components/atoms/layout/main.tsx
@@ -1,18 +1,10 @@
-import { FC, ReactNode } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 
-export type MainProps = {
+export type MainProps = HTMLAttributes<HTMLElement> & {
   /**
    * The main body.
    */
   children: ReactNode;
-  /**
-   * Set additional classnames to the main element.
-   */
-  className?: string;
-  /**
-   * The main wrapper id.
-   */
-  id: string;
 };
 
 /**
@@ -20,8 +12,6 @@ export type MainProps = {
  *
  * Render a main element.
  */
-const Main: FC<MainProps> = ({ children, ...props }) => {
+export const Main: FC<MainProps> = ({ children, ...props }) => {
   return <main {...props}>{children}</main>;
 };
-
-export default Main;
diff --git a/src/components/atoms/layout/no-script.stories.tsx b/src/components/atoms/layout/no-script.stories.tsx
index 22d2fea..79548a1 100644
--- a/src/components/atoms/layout/no-script.stories.tsx
+++ b/src/components/atoms/layout/no-script.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import NoScript from './no-script';
+import { NoScript } from './no-script';
 
 /**
  * NoScript - Storybook Meta
diff --git a/src/components/atoms/layout/no-script.test.tsx b/src/components/atoms/layout/no-script.test.tsx
index 4c62879..3f6b79c 100644
--- a/src/components/atoms/layout/no-script.test.tsx
+++ b/src/components/atoms/layout/no-script.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import NoScript from './no-script';
+import { NoScript } from './no-script';
 
 const message = 'A noscript message.';
 
diff --git a/src/components/atoms/layout/no-script.tsx b/src/components/atoms/layout/no-script.tsx
index a503e0c..a79feaf 100644
--- a/src/components/atoms/layout/no-script.tsx
+++ b/src/components/atoms/layout/no-script.tsx
@@ -12,10 +12,11 @@ export type NoScriptProps = {
   position?: 'initial' | 'top';
 };
 
-const NoScript: FC<NoScriptProps> = ({ message, position = 'initial' }) => {
+export const NoScript: FC<NoScriptProps> = ({
+  message,
+  position = 'initial',
+}) => {
   const positionClass = styles[`noscript--${position}`];
 
   return <div className={`${styles.noscript} ${positionClass}`}>{message}</div>;
 };
-
-export default NoScript;
diff --git a/src/components/atoms/layout/notice.stories.tsx b/src/components/atoms/layout/notice.stories.tsx
index dedf834..57dddb3 100644
--- a/src/components/atoms/layout/notice.stories.tsx
+++ b/src/components/atoms/layout/notice.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import NoticeComponent from './notice';
+import { Notice as NoticeComponent } from './notice';
 
 /**
  * Notice - Storybook Meta
diff --git a/src/components/atoms/layout/notice.test.tsx b/src/components/atoms/layout/notice.test.tsx
index 56b5f85..16c530d 100644
--- a/src/components/atoms/layout/notice.test.tsx
+++ b/src/components/atoms/layout/notice.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Notice from './notice';
+import { Notice } from './notice';
 
 const message = 'Tenetur consequuntur tempore.';
 
diff --git a/src/components/atoms/layout/notice.tsx b/src/components/atoms/layout/notice.tsx
index a0d1d3e..9f69af2 100644
--- a/src/components/atoms/layout/notice.tsx
+++ b/src/components/atoms/layout/notice.tsx
@@ -1,13 +1,9 @@
-import { FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 import styles from './notice.module.scss';
 
 export type NoticeKind = 'error' | 'info' | 'success' | 'warning';
 
-export type NoticeProps = {
-  /**
-   * Set additional classnames to the notice wrapper.
-   */
-  className?: string;
+export type NoticeProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
   /**
    * The notice kind.
    */
@@ -23,16 +19,18 @@ export type NoticeProps = {
  *
  * Render a colored message depending on notice kind.
  */
-const Notice: FC<NoticeProps> = ({ className = '', kind, message }) => {
+export const Notice: FC<NoticeProps> = ({
+  className = '',
+  kind,
+  message,
+  ...props
+}) => {
   const kindClass = `wrapper--${kind}`;
+  const noticeClass = `${styles.wrapper} ${styles[kindClass]} ${className}`;
 
-  return message ? (
-    <div className={`${styles.wrapper} ${styles[kindClass]} ${className}`}>
+  return (
+    <div {...props} className={noticeClass}>
       {message}
     </div>
-  ) : (
-    <></>
   );
 };
-
-export default Notice;
diff --git a/src/components/atoms/layout/section.stories.tsx b/src/components/atoms/layout/section.stories.tsx
index 530b2a0..8ab2729 100644
--- a/src/components/atoms/layout/section.stories.tsx
+++ b/src/components/atoms/layout/section.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Section from './section';
+import { Section } from './section';
 
 /**
  * Section - Storybook Meta
diff --git a/src/components/atoms/layout/section.test.tsx b/src/components/atoms/layout/section.test.tsx
index e31dc32..c81a0a0 100644
--- a/src/components/atoms/layout/section.test.tsx
+++ b/src/components/atoms/layout/section.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Section from './section';
+import { Section } from './section';
 
 const title = 'Section title';
 const content = 'Section content.';
diff --git a/src/components/atoms/layout/section.tsx b/src/components/atoms/layout/section.tsx
index cb727ff..107e80a 100644
--- a/src/components/atoms/layout/section.tsx
+++ b/src/components/atoms/layout/section.tsx
@@ -1,18 +1,17 @@
-import { FC, ReactNode } from 'react';
-import Heading from '../headings/heading';
+import { FC, HTMLAttributes, ReactNode } from 'react';
+import { Heading } from '../headings';
 import styles from './section.module.scss';
 
 export type SectionVariant = 'dark' | 'light';
 
-export type SectionProps = {
-  /**
-   * Set additional classnames to the section element.
-   */
-  className?: string;
+export type SectionProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  'children' | 'content'
+> & {
   /**
    * The section content.
    */
-  content: ReactNode;
+  content: ReactNode | ReactNode[];
   /**
    * The section title.
    */
@@ -32,20 +31,20 @@ export type SectionProps = {
  *
  * Render a section element.
  */
-const Section: FC<SectionProps> = ({
+export const Section: FC<SectionProps> = ({
   className = '',
   content,
   title,
   variant = 'dark',
   withBorder = true,
+  ...props
 }) => {
   const borderClass = withBorder ? styles[`wrapper--borders`] : '';
   const variantClass = styles[`wrapper--${variant}`];
+  const sectionClass = `${styles.wrapper} ${borderClass} ${variantClass} ${className}`;
 
   return (
-    <section
-      className={`${styles.wrapper} ${borderClass} ${variantClass} ${className}`}
-    >
+    <section {...props} className={sectionClass}>
       <Heading level={2} className={styles.title}>
         {title}
       </Heading>
@@ -53,5 +52,3 @@ const Section: FC<SectionProps> = ({
     </section>
   );
 };
-
-export default Section;
diff --git a/src/components/atoms/layout/sidebar.stories.tsx b/src/components/atoms/layout/sidebar.stories.tsx
index 6876f95..f85e468 100644
--- a/src/components/atoms/layout/sidebar.stories.tsx
+++ b/src/components/atoms/layout/sidebar.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SidebarComponent from './sidebar';
+import { Sidebar as SidebarComponent } from './sidebar';
 
 /**
  * Sidebar - Storybook Meta
diff --git a/src/components/atoms/layout/sidebar.test.tsx b/src/components/atoms/layout/sidebar.test.tsx
index c23c551..e2c15c3 100644
--- a/src/components/atoms/layout/sidebar.test.tsx
+++ b/src/components/atoms/layout/sidebar.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Sidebar from './sidebar';
+import { Sidebar } from './sidebar';
 
 const children = 'A widget';
 
diff --git a/src/components/atoms/layout/sidebar.tsx b/src/components/atoms/layout/sidebar.tsx
index d86af37..d290069 100644
--- a/src/components/atoms/layout/sidebar.tsx
+++ b/src/components/atoms/layout/sidebar.tsx
@@ -1,19 +1,11 @@
-import { FC, ReactNode } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 import styles from './sidebar.module.scss';
 
-export type SidebarProps = {
-  /**
-   * An accessible name for the sidebar.
-   */
-  'aria-label'?: string;
+export type SidebarProps = HTMLAttributes<HTMLElement> & {
   /**
    * The sidebar body.
    */
   children: ReactNode;
-  /**
-   * Set additional classnames to the aside element.
-   */
-  className?: string;
 };
 
 /**
@@ -21,12 +13,14 @@ export type SidebarProps = {
  *
  * Render an aside element.
  */
-const Sidebar: FC<SidebarProps> = ({ children, className = '', ...props }) => {
+export const Sidebar: FC<SidebarProps> = ({
+  children,
+  className = '',
+  ...props
+}) => {
   return (
-    <aside className={`${styles.wrapper} ${className}`} {...props}>
+    <aside {...props} className={`${styles.wrapper} ${className}`}>
       <div className={styles.body}>{children}</div>
     </aside>
   );
 };
-
-export default Sidebar;
diff --git a/src/components/atoms/links/index.ts b/src/components/atoms/links/index.ts
new file mode 100644
index 0000000..ad8824e
--- /dev/null
+++ b/src/components/atoms/links/index.ts
@@ -0,0 +1,4 @@
+export * from './link';
+export * from './nav-link';
+export * from './sharing-link';
+export * from './social-link';
diff --git a/src/components/atoms/links/link.stories.tsx b/src/components/atoms/links/link.stories.tsx
index 4baabe5..8351de7 100644
--- a/src/components/atoms/links/link.stories.tsx
+++ b/src/components/atoms/links/link.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Link from './link';
+import { Link } from './link';
 
 /**
  * Link - Storybook Meta
diff --git a/src/components/atoms/links/link.test.tsx b/src/components/atoms/links/link.test.tsx
index ef74821..e3c005f 100644
--- a/src/components/atoms/links/link.test.tsx
+++ b/src/components/atoms/links/link.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Link from './link';
+import { Link } from './link';
 
 describe('Link', () => {
   it('render a link', () => {
diff --git a/src/components/atoms/links/link.tsx b/src/components/atoms/links/link.tsx
index 8991f38..1765bb5 100644
--- a/src/components/atoms/links/link.tsx
+++ b/src/components/atoms/links/link.tsx
@@ -1,17 +1,13 @@
 import NextLink from 'next/link';
-import { FC, ReactNode } from 'react';
+import { AnchorHTMLAttributes, FC, ReactNode } from 'react';
 import styles from './link.module.scss';
 
-export type LinkProps = {
+export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
   /**
    * The link body.
    */
   children: ReactNode;
   /**
-   * Set additional classnames to the link.
-   */
-  className?: string;
-  /**
    * True if it is a download link. Default: false.
    */
   download?: boolean;
@@ -34,33 +30,26 @@ export type LinkProps = {
  *
  * Render a link.
  */
-const Link: FC<LinkProps> = ({
+export const Link: FC<LinkProps> = ({
   children,
   className = '',
   download = false,
   external = false,
   href,
   lang,
+  ...props
 }) => {
   const downloadClass = download ? styles['link--download'] : '';
+  const linkClass = `${styles.link} ${downloadClass} ${className}`;
+  const externalLinkClass = `${linkClass} ${styles['link--external']}`;
 
   return external ? (
-    <a
-      href={href}
-      hrefLang={lang}
-      className={`${styles.link} ${styles['link--external']} ${downloadClass} ${className}`}
-    >
+    <a {...props} className={externalLinkClass} href={href} hrefLang={lang}>
       {children}
     </a>
   ) : (
-    <NextLink
-      className={`${styles.link} ${downloadClass} ${className}`}
-      href={href}
-      hrefLang={lang}
-    >
+    <NextLink {...props} className={linkClass} href={href} hrefLang={lang}>
       {children}
     </NextLink>
   );
 };
-
-export default Link;
diff --git a/src/components/atoms/links/nav-link.stories.tsx b/src/components/atoms/links/nav-link.stories.tsx
index 7f7a334..7fca926 100644
--- a/src/components/atoms/links/nav-link.stories.tsx
+++ b/src/components/atoms/links/nav-link.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import NavLinkComponent from './nav-link';
+import { NavLink as NavLinkComponent } from './nav-link';
 
 /**
  * NavLink - Storybook Meta
diff --git a/src/components/atoms/links/nav-link.test.tsx b/src/components/atoms/links/nav-link.test.tsx
index a5f5b5f..be0cd50 100644
--- a/src/components/atoms/links/nav-link.test.tsx
+++ b/src/components/atoms/links/nav-link.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import NavLink from './nav-link';
+import { NavLink } from './nav-link';
 
 describe('NavLink', () => {
   it('renders a nav link to blog page', () => {
diff --git a/src/components/atoms/links/nav-link.tsx b/src/components/atoms/links/nav-link.tsx
index 66ee570..109529c 100644
--- a/src/components/atoms/links/nav-link.tsx
+++ b/src/components/atoms/links/nav-link.tsx
@@ -22,7 +22,7 @@ export type NavLinkProps = {
  *
  * Render a navigation link.
  */
-const NavLink: FC<NavLinkProps> = ({ href, label, logo }) => {
+export const NavLink: FC<NavLinkProps> = ({ href, label, logo }) => {
   return (
     <Link className={styles.link} href={href}>
       {logo}
@@ -30,5 +30,3 @@ const NavLink: FC<NavLinkProps> = ({ href, label, logo }) => {
     </Link>
   );
 };
-
-export default NavLink;
diff --git a/src/components/atoms/links/sharing-link.stories.tsx b/src/components/atoms/links/sharing-link.stories.tsx
index e6bd11b..7ab5caf 100644
--- a/src/components/atoms/links/sharing-link.stories.tsx
+++ b/src/components/atoms/links/sharing-link.stories.tsx
@@ -1,12 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SharingLinkComponent from './sharing-link';
+import { SharingLink } from './sharing-link';
 
 /**
  * SharingLink - Storybook Meta
  */
 export default {
   title: 'Atoms/Buttons/Sharing',
-  component: SharingLinkComponent,
+  component: SharingLink,
   argTypes: {
     medium: {
       control: {
@@ -37,10 +37,10 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof SharingLinkComponent>;
+} as ComponentMeta<typeof SharingLink>;
 
-const Template: ComponentStory<typeof SharingLinkComponent> = (args) => (
-  <SharingLinkComponent {...args} />
+const Template: ComponentStory<typeof SharingLink> = (args) => (
+  <SharingLink {...args} />
 );
 
 /**
diff --git a/src/components/atoms/links/sharing-link.test.tsx b/src/components/atoms/links/sharing-link.test.tsx
index 0a8b87c..63fb4f5 100644
--- a/src/components/atoms/links/sharing-link.test.tsx
+++ b/src/components/atoms/links/sharing-link.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import SharingLink from './sharing-link';
+import { SharingLink } from './sharing-link';
 
 describe('SharingLink', () => {
   it('render a Diaspora sharing link', () => {
diff --git a/src/components/atoms/links/sharing-link.tsx b/src/components/atoms/links/sharing-link.tsx
index ca53ef9..0b9d5fb 100644
--- a/src/components/atoms/links/sharing-link.tsx
+++ b/src/components/atoms/links/sharing-link.tsx
@@ -26,7 +26,7 @@ export type SharingLinkProps = {
  *
  * Render a sharing link.
  */
-const SharingLink: FC<SharingLinkProps> = ({ medium, url }) => {
+export const SharingLink: FC<SharingLinkProps> = ({ medium, url }) => {
   const intl = useIntl();
   const text = intl.formatMessage(
     {
@@ -37,12 +37,11 @@ const SharingLink: FC<SharingLinkProps> = ({ medium, url }) => {
     { name: medium }
   );
   const mediumClass = `link--${medium}`;
+  const linkClass = `${styles.link} ${styles[mediumClass]}`;
 
   return (
-    <a href={url} className={`${styles.link} ${styles[mediumClass]}`}>
+    <a className={linkClass} href={url}>
       <span className="screen-reader-text">{text}</span>
     </a>
   );
 };
-
-export default SharingLink;
diff --git a/src/components/atoms/links/social-link.stories.tsx b/src/components/atoms/links/social-link.stories.tsx
index 977ae6b..b627e9f 100644
--- a/src/components/atoms/links/social-link.stories.tsx
+++ b/src/components/atoms/links/social-link.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SocialLink from './social-link';
+import { SocialLink } from './social-link';
 
 /**
  * SocialLink - Storybook Meta
diff --git a/src/components/atoms/links/social-link.test.tsx b/src/components/atoms/links/social-link.test.tsx
index b55dbcc..1aca4e3 100644
--- a/src/components/atoms/links/social-link.test.tsx
+++ b/src/components/atoms/links/social-link.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import SocialLink from './social-link';
+import { SocialLink } from './social-link';
 
 /**
  * Next.js mock images to use next/image component. So for now, I need to mock
diff --git a/src/components/atoms/links/social-link.tsx b/src/components/atoms/links/social-link.tsx
index d0719a3..9f8feb6 100644
--- a/src/components/atoms/links/social-link.tsx
+++ b/src/components/atoms/links/social-link.tsx
@@ -23,7 +23,7 @@ export type SocialLinkProps = {
  *
  * Render a social icon link.
  */
-const SocialLink: FC<SocialLinkProps> = ({ name, url }) => {
+export const SocialLink: FC<SocialLinkProps> = ({ name, url }) => {
   /**
    * Retrieve a social link icon by id.
    * @param {string} id - The social website id.
@@ -44,10 +44,8 @@ const SocialLink: FC<SocialLinkProps> = ({ name, url }) => {
   };
 
   return (
-    <a href={url} className={styles.link} aria-label={name}>
+    <a aria-label={name} className={styles.link} href={url}>
       {getIcon(name)}
     </a>
   );
 };
-
-export default SocialLink;
diff --git a/src/components/atoms/lists/description-list-item.module.scss b/src/components/atoms/lists/description-list-group.module.scss
index aba90ce..aba90ce 100644
--- a/src/components/atoms/lists/description-list-item.module.scss
+++ b/src/components/atoms/lists/description-list-group.module.scss
diff --git a/src/components/atoms/lists/description-list-item.stories.tsx b/src/components/atoms/lists/description-list-group.stories.tsx
index c7beb0d..e6766a3 100644
--- a/src/components/atoms/lists/description-list-item.stories.tsx
+++ b/src/components/atoms/lists/description-list-group.stories.tsx
@@ -1,9 +1,9 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import DescriptionListItemComponent from './description-list-item';
+import { DescriptionListGroup } from './description-list-group';
 
 export default {
   title: 'Atoms/Typography/Lists/DescriptionList/Item',
-  component: DescriptionListItemComponent,
+  component: DescriptionListGroup,
   args: {
     layout: 'stacked',
     withSeparator: false,
@@ -96,11 +96,11 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof DescriptionListItemComponent>;
+} as ComponentMeta<typeof DescriptionListGroup>;
 
-const Template: ComponentStory<typeof DescriptionListItemComponent> = (
-  args
-) => <DescriptionListItemComponent {...args} />;
+const Template: ComponentStory<typeof DescriptionListGroup> = (args) => (
+  <DescriptionListGroup {...args} />
+);
 
 export const SingleValueStacked = Template.bind({});
 SingleValueStacked.args = {
diff --git a/src/components/atoms/lists/description-list-item.test.tsx b/src/components/atoms/lists/description-list-group.test.tsx
index 07632a6..4e665e0 100644
--- a/src/components/atoms/lists/description-list-item.test.tsx
+++ b/src/components/atoms/lists/description-list-group.test.tsx
@@ -1,17 +1,17 @@
 import { render, screen } from '../../../../tests/utils';
-import DescriptionListItem from './description-list-item';
+import { DescriptionListGroup } from './description-list-group';
 
 const itemLabel = 'Repellendus corporis facilis';
 const itemValue = ['quos', 'eum'];
 
-describe('DescriptionListItem', () => {
+describe('DescriptionListGroup', () => {
   it('renders a couple of label', () => {
-    render(<DescriptionListItem label={itemLabel} value={itemValue} />);
+    render(<DescriptionListGroup label={itemLabel} value={itemValue} />);
     expect(screen.getByRole('term')).toHaveTextContent(itemLabel);
   });
 
   it('renders the right number of values', () => {
-    render(<DescriptionListItem label={itemLabel} value={itemValue} />);
+    render(<DescriptionListGroup label={itemLabel} value={itemValue} />);
     expect(screen.getAllByRole('definition')).toHaveLength(itemValue.length);
   });
 });
diff --git a/src/components/atoms/lists/description-list-item.tsx b/src/components/atoms/lists/description-list-group.tsx
index 9505d01..63ae541 100644
--- a/src/components/atoms/lists/description-list-item.tsx
+++ b/src/components/atoms/lists/description-list-group.tsx
@@ -1,9 +1,9 @@
 import { FC, ReactNode, useId } from 'react';
-import styles from './description-list-item.module.scss';
+import styles from './description-list-group.module.scss';
 
 export type ItemLayout = 'inline' | 'inline-values' | 'stacked';
 
-export type DescriptionListItemProps = {
+export type DescriptionListGroupProps = {
   /**
    * Set additional classnames to the list item wrapper.
    */
@@ -39,7 +39,7 @@ export type DescriptionListItemProps = {
  *
  * Render a couple of dt/dd wrapped in a div.
  */
-const DescriptionListItem: FC<DescriptionListItemProps> = ({
+export const DescriptionListGroup: FC<DescriptionListGroupProps> = ({
   className = '',
   descriptionClassName = '',
   label,
@@ -52,16 +52,15 @@ const DescriptionListItem: FC<DescriptionListItemProps> = ({
   const layoutStyles = styles[`wrapper--${layout}`];
   const separatorStyles = withSeparator ? styles['wrapper--has-separator'] : '';
   const itemValues = Array.isArray(value) ? value : [value];
+  const groupClass = `${styles.wrapper} ${layoutStyles} ${separatorStyles} ${className}`;
 
   return (
-    <div
-      className={`${styles.wrapper} ${layoutStyles} ${separatorStyles} ${className}`}
-    >
+    <div className={groupClass}>
       <dt className={`${styles.term} ${termClassName}`}>{label}</dt>
       {itemValues.map((currentValue, index) => (
         <dd
-          key={`${id}-${index}`}
           className={`${styles.description} ${descriptionClassName}`}
+          key={`${id}-${index}`}
         >
           {currentValue}
         </dd>
@@ -69,5 +68,3 @@ const DescriptionListItem: FC<DescriptionListItemProps> = ({
     </div>
   );
 };
-
-export default DescriptionListItem;
diff --git a/src/components/atoms/lists/description-list.stories.tsx b/src/components/atoms/lists/description-list.stories.tsx
index 347fd78..0194817 100644
--- a/src/components/atoms/lists/description-list.stories.tsx
+++ b/src/components/atoms/lists/description-list.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import DescriptionList, { DescriptionListItem } from './description-list';
+import { DescriptionList, DescriptionListItem } from './description-list';
 
 /**
  * DescriptionList - Storybook Meta
diff --git a/src/components/atoms/lists/description-list.test.tsx b/src/components/atoms/lists/description-list.test.tsx
index 11b4965..6190c5c 100644
--- a/src/components/atoms/lists/description-list.test.tsx
+++ b/src/components/atoms/lists/description-list.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import DescriptionList, { DescriptionListItem } from './description-list';
+import { DescriptionList, DescriptionListItem } from './description-list';
 
 const items: DescriptionListItem[] = [
   { id: 'term-1', label: 'Term 1:', value: ['Value for term 1'] },
diff --git a/src/components/atoms/lists/description-list.tsx b/src/components/atoms/lists/description-list.tsx
index a8e2d53..d97e505 100644
--- a/src/components/atoms/lists/description-list.tsx
+++ b/src/components/atoms/lists/description-list.tsx
@@ -1,7 +1,8 @@
-import { FC } from 'react';
-import DescriptionListItem, {
-  type DescriptionListItemProps,
-} from './description-list-item';
+import { FC, HTMLAttributes } from 'react';
+import {
+  DescriptionListGroup,
+  type DescriptionListGroupProps,
+} from './description-list-group';
 import styles from './description-list.module.scss';
 
 export type DescriptionListItem = {
@@ -12,22 +13,21 @@ export type DescriptionListItem = {
   /**
    * The list item layout.
    */
-  layout?: DescriptionListItemProps['layout'];
+  layout?: DescriptionListGroupProps['layout'];
   /**
    * A list label.
    */
-  label: DescriptionListItemProps['label'];
+  label: DescriptionListGroupProps['label'];
   /**
    * An array of values for the list item.
    */
-  value: DescriptionListItemProps['value'];
+  value: DescriptionListGroupProps['value'];
 };
 
-export type DescriptionListProps = {
-  /**
-   * Set additional classnames to the list wrapper.
-   */
-  className?: string;
+export type DescriptionListProps = Omit<
+  HTMLAttributes<HTMLDListElement>,
+  'children'
+> & {
   /**
    * Set additional classnames to the `dt`/`dd` couple wrapper.
    */
@@ -51,7 +51,7 @@ export type DescriptionListProps = {
   /**
    * If true, use a slash to delimitate multiple values.
    */
-  withSeparator?: DescriptionListItemProps['withSeparator'];
+  withSeparator?: DescriptionListGroupProps['withSeparator'];
 };
 
 /**
@@ -59,7 +59,7 @@ export type DescriptionListProps = {
  *
  * Render a description list.
  */
-const DescriptionList: FC<DescriptionListProps> = ({
+export const DescriptionList: FC<DescriptionListProps> = ({
   className = '',
   groupClassName = '',
   items,
@@ -67,19 +67,21 @@ const DescriptionList: FC<DescriptionListProps> = ({
   layout = 'column',
   valueClassName = '',
   withSeparator,
+  ...props
 }) => {
   const layoutModifier = `list--${layout}`;
+  const listClass = `${styles.list} ${styles[layoutModifier]} ${className}`;
 
   /**
    * Retrieve the description list items.
    *
-   * @param {DescriptionListItem[]} listItems - An array of items.
+   * @param {DescriptionListGroup[]} listItems - An array of items.
    * @returns {JSX.Element[]} The description list items.
    */
   const getItems = (listItems: DescriptionListItem[]): JSX.Element[] => {
     return listItems.map(({ id, layout: itemLayout, label, value }) => {
       return (
-        <DescriptionListItem
+        <DescriptionListGroup
           key={id}
           label={label}
           value={value}
@@ -94,10 +96,8 @@ const DescriptionList: FC<DescriptionListProps> = ({
   };
 
   return (
-    <dl className={`${styles.list} ${styles[layoutModifier]} ${className}`}>
+    <dl {...props} className={listClass}>
       {getItems(items)}
     </dl>
   );
 };
-
-export default DescriptionList;
diff --git a/src/components/atoms/lists/index.ts b/src/components/atoms/lists/index.ts
new file mode 100644
index 0000000..d16fb34
--- /dev/null
+++ b/src/components/atoms/lists/index.ts
@@ -0,0 +1,3 @@
+export * from './description-list';
+export * from './description-list-group';
+export * from './list';
diff --git a/src/components/atoms/lists/list.stories.tsx b/src/components/atoms/lists/list.stories.tsx
index eac3cd3..c4f3c3b 100644
--- a/src/components/atoms/lists/list.stories.tsx
+++ b/src/components/atoms/lists/list.stories.tsx
@@ -1,12 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ListComponent, { type ListItem } from './list';
+import { List, type ListItem } from './list';
 
 /**
  * List - Storybook Meta
  */
 export default {
   title: 'Atoms/Typography/Lists',
-  component: ListComponent,
+  component: List,
   args: {
     kind: 'unordered',
   },
@@ -64,11 +64,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ListComponent>;
+} as ComponentMeta<typeof List>;
 
-const Template: ComponentStory<typeof ListComponent> = (args) => (
-  <ListComponent {...args} />
-);
+const Template: ComponentStory<typeof List> = (args) => <List {...args} />;
 
 const items: ListItem[] = [
   { id: 'item-1', value: 'Item 1' },
diff --git a/src/components/atoms/lists/list.test.tsx b/src/components/atoms/lists/list.test.tsx
index fbe56a4..18ffed2 100644
--- a/src/components/atoms/lists/list.test.tsx
+++ b/src/components/atoms/lists/list.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import List, { type ListItem } from './list';
+import { List, type ListItem } from './list';
 
 const items: ListItem[] = [
   { id: 'item-1', value: 'Item 1' },
diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx
index aa0a241..8fc9672 100644
--- a/src/components/atoms/lists/list.tsx
+++ b/src/components/atoms/lists/list.tsx
@@ -40,7 +40,7 @@ export type ListProps = {
  *
  * Render either an ordered or an unordered list.
  */
-const List: FC<ListProps> = ({
+export const List: FC<ListProps> = ({
   className = '',
   items,
   itemsClassName = '',
@@ -48,6 +48,7 @@ const List: FC<ListProps> = ({
 }) => {
   const ListTag = kind === 'ordered' ? 'ol' : 'ul';
   const kindClass = `list--${kind}`;
+  const listClass = `${styles.list} ${styles[kindClass]} ${className}`;
 
   /**
    * Retrieve the list items.
@@ -69,11 +70,5 @@ const List: FC<ListProps> = ({
     ));
   };
 
-  return (
-    <ListTag className={`${styles.list} ${styles[kindClass]} ${className}`}>
-      {getItems(items)}
-    </ListTag>
-  );
+  return <ListTag className={listClass}>{getItems(items)}</ListTag>;
 };
-
-export default List;
diff --git a/src/components/atoms/loaders/index.ts b/src/components/atoms/loaders/index.ts
new file mode 100644
index 0000000..20c1500
--- /dev/null
+++ b/src/components/atoms/loaders/index.ts
@@ -0,0 +1,2 @@
+export * from './progress-bar';
+export * from './spinner';
diff --git a/src/components/atoms/loaders/progress-bar.stories.tsx b/src/components/atoms/loaders/progress-bar.stories.tsx
index 1eead64..799aacb 100644
--- a/src/components/atoms/loaders/progress-bar.stories.tsx
+++ b/src/components/atoms/loaders/progress-bar.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ProgressBarComponent from './progress-bar';
+import { ProgressBar as ProgressBarComponent } from './progress-bar';
 import { current, id, label, max, min } from './progress-bar.fixture';
 
 /**
diff --git a/src/components/atoms/loaders/progress-bar.test.tsx b/src/components/atoms/loaders/progress-bar.test.tsx
index 0310aec..be4d2c1 100644
--- a/src/components/atoms/loaders/progress-bar.test.tsx
+++ b/src/components/atoms/loaders/progress-bar.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import ProgressBar from './progress-bar';
+import { ProgressBar } from './progress-bar';
 import { current, id, label, max, min } from './progress-bar.fixture';
 
 describe('ProgressBar', () => {
diff --git a/src/components/atoms/loaders/progress-bar.tsx b/src/components/atoms/loaders/progress-bar.tsx
index 60c585a..195bb21 100644
--- a/src/components/atoms/loaders/progress-bar.tsx
+++ b/src/components/atoms/loaders/progress-bar.tsx
@@ -29,7 +29,7 @@ export type ProgressBarProps = {
  *
  * Render a progress bar.
  */
-const ProgressBar: FC<ProgressBarProps> = ({
+export const ProgressBar: FC<ProgressBarProps> = ({
   current,
   id,
   label,
@@ -42,18 +42,16 @@ const ProgressBar: FC<ProgressBarProps> = ({
         {label}
       </label>
       <progress
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={current}
         className={styles.progress__bar}
         id={id}
         max={max}
         value={current}
-        aria-valuemin={min}
-        aria-valuemax={max}
-        aria-valuenow={current}
       >
         {current}/{max}
       </progress>
     </div>
   );
 };
-
-export default ProgressBar;
diff --git a/src/components/atoms/loaders/spinner.stories.tsx b/src/components/atoms/loaders/spinner.stories.tsx
index 1792c6c..197d06c 100644
--- a/src/components/atoms/loaders/spinner.stories.tsx
+++ b/src/components/atoms/loaders/spinner.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SpinnerComponent from './spinner';
+import { Spinner as SpinnerComponent } from './spinner';
 
 /**
  * Spinner - Storybook Meta
diff --git a/src/components/atoms/loaders/spinner.test.tsx b/src/components/atoms/loaders/spinner.test.tsx
index 0bcc189..cb0d8e2 100644
--- a/src/components/atoms/loaders/spinner.test.tsx
+++ b/src/components/atoms/loaders/spinner.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Spinner from './spinner';
+import { Spinner } from './spinner';
 
 describe('Spinner', () => {
   it('renders a spinner loader', () => {
diff --git a/src/components/atoms/loaders/spinner.tsx b/src/components/atoms/loaders/spinner.tsx
index 6655141..968290b 100644
--- a/src/components/atoms/loaders/spinner.tsx
+++ b/src/components/atoms/loaders/spinner.tsx
@@ -14,7 +14,7 @@ export type SpinnerProps = {
  *
  * Render a loading message with animation.
  */
-const Spinner: FC<SpinnerProps> = ({ message }) => {
+export const Spinner: FC<SpinnerProps> = ({ message }) => {
   const intl = useIntl();
 
   return (
@@ -23,7 +23,7 @@ const Spinner: FC<SpinnerProps> = ({ message }) => {
       <div className={styles.ball}></div>
       <div className={styles.ball}></div>
       <div className={styles.text}>
-        {message ||
+        {message ??
           intl.formatMessage({
             defaultMessage: 'Loading...',
             description: 'Spinner: loading text',
@@ -33,5 +33,3 @@ const Spinner: FC<SpinnerProps> = ({ message }) => {
     </div>
   );
 };
-
-export default Spinner;
author	Armand Philippot <git@armandphilippot.com>	2023-09-20 16:38:54 +0200
committer	Armand Philippot <git@armandphilippot.com>	2023-09-20 16:38:54 +0200
commit	f861e6a269ba9f62700776d3cd13b644a9e836d4 (patch)
tree	a5a107e7a6e4ff8b4261fe04349357bc00b783ee /src/components/atoms
parent	03331c44276ec56e9f235e4d5ee75030455a753f (diff)