feat(project): replace buttonlink with variant text buttons

src/components/Button/Button.module.scss

@@ -35,21 +35,30 @@
   }
 
   &.primary,
-  &.active {
+  &.active:not(.text) {
     color: var(--highlight-contrast-color, white);
     background-color: var(--highlight-color, black);
     &.outlined {
       border-color: var(--highlight-color, white);
     }
   }
-  &.text:not(:hover):not(.active) {
-    background: none;
+  &.text {
+    font-size: 18px;
+    font-weight: 700;
     opacity: 0.7;
+    &:not(:hover) {
+      background: none;
+    }
+    &.active {
+      opacity: 1;
+    }
   }
 
   @media (hover: hover) and (pointer: fine) {
     &:hover:not(.active),
     &:focus:not(.active),
+    &:hover:is(.text),
+    &:focus:is(.text),
     &:active {
       z-index: 1;
       opacity: 1;
@@ -61,7 +70,7 @@
         border-color: white;
       }
     }
-    &:focus.active {
+    &:hover &:focus.active {
       transform: scale(1.1);
       &.fullWidth {
         transform: scale(1.04);

src/components/Button/Button.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import { NavLink } from 'react-router-dom';
 
 import styles from './Button.module.scss';
 
@@ -14,7 +15,8 @@ type Props = {
   fullWidth?: boolean;
   startIcon?: JSX.Element;
   variant?: Variant;
-  onClick: () => void;
+  onClick?: () => void;
+  to?: string;
 };
 const Button: React.FC<Props> = ({
   label,
@@ -23,20 +25,27 @@ const Button: React.FC<Props> = ({
   fullWidth = false,
   active = false,
   variant = 'outlined',
+  to,
   onClick,
-}: Props) => (
-  <button
-    className={classNames(styles.button, {
-      [styles.active]: active,
-      [styles[color]]: true,
-      [styles[variant]]: true,
-      [styles.fullWidth]: fullWidth,
-    })}
-    onClick={onClick}
-  >
-    {startIcon ? <div className={styles.startIcon}>{startIcon}</div> : null}
-    <span className={styles.buttonLabel}>{label}</span>
-  </button>
-);
+}: Props) => {
+  const className = classNames(styles.button, [styles[color]], [styles[variant]], {
+    [styles.active]: active,
+    [styles.fullWidth]: fullWidth,
+  });
 
+  const icon = startIcon ? <div className={styles.startIcon}>{startIcon}</div> : null;
+  const span = <span className={styles.buttonLabel}>{label}</span>;
+
+  return to ? (
+    <NavLink className={className} to={to} activeClassName={styles.active} exact>
+      {icon}
+      {span}
+    </NavLink>
+  ) : (
+    <button className={className} onClick={onClick}>
+      {icon}
+      {span}
+    </button>
+  );
+};
 export default Button;

src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<Button> renders and matches snapshot 1`] = `
 <div>
   <button
-    class="button active undefined outlined"
+    class="button outlined active"
   >
     <span>
       aa

src/components/Filter/__snapshots__/Filter.test.tsx.snap

@@ -80,28 +80,28 @@ exports[`<Filter> renders Filter 1`] = `
     class="filterRow"
   >
     <button
-      class="button undefined outlined"
+      class="button outlined"
     >
       <span>
         x
       </span>
     </button>
     <button
-      class="button undefined outlined"
+      class="button outlined"
     >
       <span>
         y
       </span>
     </button>
     <button
-      class="button undefined outlined"
+      class="button outlined"
     >
       <span>
         z
       </span>
     </button>
     <button
-      class="button undefined outlined"
+      class="button outlined"
     >
       <span>
         bb

src/components/Header/Header.module.scss

@@ -52,10 +52,6 @@
 .nav {
   display: inline-block;
   flex: 1;
-
-  > a {
-    margin: 0 6px;
-  }
 }
 
 .search {

src/components/Header/Header.test.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
+import Button from '../Button/Button';
 import { render } from '../../testUtils';
-import ButtonLink from '../ButtonLink/ButtonLink';
 
 import Header from './Header';
 
 describe('<Header />', () => {
   test('renders header', () => {
-    const playlistMenuItems = [<ButtonLink key="key" label="Home" to="/" />];
-    const { container } = render(<Header onMenuButtonClick={jest.fn()} playlistMenuItems={playlistMenuItems} />);
+    const playlistMenuItems = [<Button key="key" label="Home" to="/" />];
+    const { container } = render(<Header onMenuButtonClick={jest.fn()}>{playlistMenuItems}</Header>);
 
     expect(container).toMatchSnapshot();
   });

src/components/Header/__snapshots__/Header.test.tsx.snap

@@ -39,7 +39,17 @@ exports[`<Header /> renders header 1`] = `
       <nav
         aria-label="menu"
         class="nav"
-      />
+      >
+        <a
+          aria-current="page"
+          class="button outlined active"
+          href="/"
+        >
+          <span>
+            Home
+          </span>
+        </a>
+      </nav>
       <div
         class="search"
       />

src/components/Layout/Layout.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, FC, useState, useContext } from 'react';
 
-import ButtonLink from '../ButtonLink/ButtonLink';
+import Button from '../Button/Button';
 import Header from '../Header/Header';
 import Sidebar from '../Sidebar/Sidebar';
 import DynamicBlur from '../DynamicBlur/DynamicBlur';
@@ -24,11 +24,11 @@ const Layout: FC<LayoutProps> = ({ children }) => {
     <div className={styles.layout}>
       {hasDynamicBlur && blurImage && <DynamicBlur url={blurImage} transitionTime={1} debounceTime={350} />}
       <Header onMenuButtonClick={() => setSideBarOpen(true)} logoSrc={assets.banner}>
-        <ButtonLink label="Home" to="/" />
+        <Button label="Home" to="/" variant="text" />
         {menu.map((item) => (
-          <ButtonLink key={item.playlistId} label={item.label} to={`/p/${item.playlistId}`} />
+          <Button key={item.playlistId} label={item.label} to={`/p/${item.playlistId}`} variant="text" />
         ))}
-        <ButtonLink label="Settings" to="/u" />
+        <Button label="Settings" to="/u" variant="text" />
       </Header>
       <Sidebar isOpen={sideBarOpen} onClose={() => setSideBarOpen(false)}>
         <MenuButton label="Home" to="/" tabIndex={sideBarOpen ? 0 : -1} />

src/components/Layout/__snapshots__/Layout.test.tsx.snap

@@ -43,15 +43,15 @@ exports[`<Layout /> renders layout 1`] = `
         >
           <a
             aria-current="page"
-            class="link active"
+            class="button text active"
             href="/"
           >
             <span>
               Home
             </span>
           </a>
           <a
-            class="link"
+            class="button text"
             href="/u"
           >
             <span>

src/components/Root/__snapshots__/Root.test.tsx.snap

@@ -42,15 +42,15 @@ exports[`<Root /> renders and matches snapshot 1`] = `
           class="nav"
         >
           <a
-            class="link"
+            class="button text"
             href="/"
           >
             <span>
               Home
             </span>
           </a>
           <a
-            class="link"
+            class="button text"
             href="/u"
           >
             <span>

src/components/Sidebar/Sidebar.test.tsx

@@ -1,14 +1,18 @@
 import React from 'react';
 
+import Button from '../Button/Button';
 import { render } from '../../testUtils';
-import ButtonLink from '../ButtonLink/ButtonLink';
 
 import Sidebar from './Sidebar';
 
 describe('<SideBar />', () => {
-  const playlistMenuItems = [<ButtonLink key="key" label="Home" to="/" />];
+  const playlistMenuItems = [<Button key="key" label="Home" to="/" />];
   test('renders sideBar', () => {
-    const { container } = render(<Sidebar isOpen={true} onClose={jest.fn()} playlistMenuItems={playlistMenuItems} />);
+    const { container } = render(
+      <Sidebar isOpen={true} onClose={jest.fn()}>
+        {playlistMenuItems}
+      </Sidebar>,
+    );
 
     expect(container).toMatchSnapshot();
   });