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.

11 files changed, 48 insertions, 55 deletions

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;