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.

13 files changed, 30 insertions, 42 deletions

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;