feat(nav-link): migrates to mui components

Migrates that NavLink to use Mui Components

re #143

src/components/navigation/NavLink/NavLink.stories.tsx → src/components/atoms/NavLink/NavLink.stories.tsx

@@ -1,16 +1,13 @@
 import { Story } from '@storybook/react';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import NavLink, { NavLinkProps } from './NavLink';
 
 export default {
-  title: 'components/navigation/NavLink',
+  title: 'Atoms/NavLink',
   component: NavLink,
   argTypes: {
     onClick: { action: 'clicked' },
-    variant: {
-      options: ['default', 'transparent'],
-      control: { type: 'select' },
-    },
   },
 };
 
@@ -20,5 +17,5 @@ export const Default = Template.bind({});
 Default.args = {
   label: 'Home',
   href: '#',
-  icon: faBars,
+  icon: <FontAwesomeIcon icon={faBars} />,
 };

src/components/atoms/NavLink/NavLink.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { NextRouter } from 'next/router';
+import NavLink from './NavLink';
+
+jest.mock<typeof import('next/router')>('next/router', () => ({
+  ...jest.requireActual<typeof import('next/router')>('next/router'),
+  useRouter: () =>
+    ({
+      asPath: '/',
+    } as NextRouter),
+}));
+
+describe('<NavLink />', () => {
+  const setupNavLink = (props: object = { label: 'Link' }) => {
+    return render(<NavLink {...props} />);
+  };
+
+  it('renders the NavLink', () => {
+    expect.assertions(1);
+
+    setupNavLink();
+
+    expect(screen.getByRole('link')).toBeInTheDocument();
+  });
+
+  it('renders the NavLink with the correct href', () => {
+    expect.assertions(1);
+
+    setupNavLink({ href: '/' });
+
+    expect(screen.getByRole('link')).toHaveAttribute('href', '/');
+  });
+
+  it('should render the label', () => {
+    expect.assertions(1);
+
+    setupNavLink({ label: 'Home' });
+
+    expect(screen.getByRole('link', { name: 'Home' })).toBeInTheDocument();
+  });
+
+  it('should render the children', () => {
+    expect.assertions(1);
+
+    setupNavLink({ children: 'Home' });
+
+    expect(screen.getByText('Home')).toBeInTheDocument();
+  });
+
+  it('should render the children over the label', () => {
+    expect.assertions(2);
+
+    setupNavLink({ children: 'Home', label: 'Nope' });
+
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.queryByText('Nope')).toBeNull();
+  });
+
+  it('should display an icon', () => {
+    expect.assertions(2);
+
+    const icon = <FontAwesomeIcon icon={faBars} data-testid="icon" />;
+
+    setupNavLink({ icon });
+
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+    expect(screen.getByTestId('icon')).toHaveAttribute('data-icon', 'bars');
+  });
+
+  it('should use the default style', () => {
+    expect.assertions(1);
+
+    setupNavLink({ href: '/test' });
+
+    expect(screen.getByRole('link')).toHaveStyle('background: var(--chakra-colors-blue-700);');
+  });
+
+  it('should use the transparent color scheme', () => {
+    expect.assertions(1);
+
+    setupNavLink({ href: '/test', variant: 'transparent' });
+
+    expect(screen.getByRole('link')).toHaveStyle('background-color: transparent');
+  });
+});

src/components/atoms/NavLink/NavLink.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import NextLink from 'next/link';
+import { Button, ButtonProps } from '@mui/material';
+
+export interface NavLinkProps extends ButtonProps {
+  href?: string;
+  label?: React.ReactNode;
+  children?: React.ReactNode;
+
+  icon?: React.ReactNode;
+
+  component?: React.ElementType;
+}
+
+function NavLink({ href = '#', label, children, icon, ...props }: NavLinkProps) {
+  return (
+    <Button component={NextLink} href={href} startIcon={icon} {...props}>
+      {children || label}
+    </Button>
+  );
+}
+
+NavLink.defaultProps = {
+  href: '#',
+  label: '',
+  children: null,
+  icon: null,
+};
+
+export default NavLink;