From f1399242f44a8c2d3a51dc00fc7d527b58715709 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Wed, 9 Jun 2021 14:33:58 +0200
Subject: [PATCH] feat(project): replace buttonlink with variant text buttons

---
 src/components/Button/Button.module.scss      | 17 ++++--
 src/components/Button/Button.tsx              | 39 ++++++++------
 .../Button/__snapshots__/Button.test.tsx.snap |  2 +-
 .../ButtonLink/ButtonLink.module.scss         | 53 -------------------
 src/components/ButtonLink/ButtonLink.test.tsx | 18 -------
 src/components/ButtonLink/ButtonLink.tsx      | 19 -------
 .../__snapshots__/ButtonLink.test.tsx.snap    | 15 ------
 .../Filter/__snapshots__/Filter.test.tsx.snap |  8 +--
 src/components/Header/Header.module.scss      |  4 --
 src/components/Header/Header.test.tsx         |  6 +--
 .../Header/__snapshots__/Header.test.tsx.snap | 12 ++++-
 src/components/Layout/Layout.tsx              |  8 +--
 .../Layout/__snapshots__/Layout.test.tsx.snap |  4 +-
 .../Root/__snapshots__/Root.test.tsx.snap     |  4 +-
 src/components/Sidebar/Sidebar.test.tsx       | 10 ++--
 .../__snapshots__/SideBar.test.tsx.snap       | 12 ++++-
 .../Video/__snapshots__/Video.test.tsx.snap   |  8 +--
 17 files changed, 86 insertions(+), 153 deletions(-)
 delete mode 100644 src/components/ButtonLink/ButtonLink.module.scss
 delete mode 100644 src/components/ButtonLink/ButtonLink.test.tsx
 delete mode 100644 src/components/ButtonLink/ButtonLink.tsx
 delete mode 100644 src/components/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap

diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index 0d5c1e947..c9551ac92 100644
--- a/src/components/Button/Button.module.scss
+++ b/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);
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 6c1b9d51b..3d0d7107d 100644
--- a/src/components/Button/Button.tsx
+++ b/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;
diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap
index 5faf373f0..c2a6944e5 100644
--- a/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/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
diff --git a/src/components/ButtonLink/ButtonLink.module.scss b/src/components/ButtonLink/ButtonLink.module.scss
deleted file mode 100644
index 80794a25e..000000000
--- a/src/components/ButtonLink/ButtonLink.module.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@use '../../styles/variables';
-@use '../../styles/theme';
-@use '../../styles/mixins/responsive';
-@use '../../styles/mixins/utils';
-
-//
-// Navigation Button
-// --------------------------------
-
-.link {
-  position: relative;
-  display: inline-flex;
-  justify-content: inherit;
-  align-items: center;
-  min-height: 38px;
-  padding: 0 10px;
-  color: variables.$white;
-  font-family: theme.$body-alt-font-family;
-  font-weight: 700;
-  font-size: 18px;
-  text-align: center;
-  text-decoration: none;
-  background: transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  opacity: 0.7;
-  transition: background 0.1s ease, transform 0.1s ease;
-
-  @media (hover: hover) and (pointer: fine) {
-    &:hover,
-    &:active {
-      z-index: 1;
-      background: rgba(variables.$black, 0.7);
-      transform: scale(1.1);
-      opacity: 1;
-    }
-  }
-}
-
-.active {
-  color: variables.$white;
-  opacity: 1;
-}
-
-//
-// mediaQueries
-// --------------------------------
-
-@include responsive.mobile-and-tablet() {
-  .link {
-    padding: 12px;
-  }
-}
diff --git a/src/components/ButtonLink/ButtonLink.test.tsx b/src/components/ButtonLink/ButtonLink.test.tsx
deleted file mode 100644
index 57f5416c2..000000000
--- a/src/components/ButtonLink/ButtonLink.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-
-import { render } from '../../testUtils';
-
-import ButtonLink from './ButtonLink';
-
-describe('<ButtonLink />', () => {
-  test('renders link with route label', () => {
-    const { getByText } = render(<ButtonLink label="home" to="/" />);
-    expect(getByText(/home/i)).toBeTruthy();
-  });
-
-  it('renders and matches snapshot', () => {
-    const { container } = render(<ButtonLink label="home" to="/" />);
-
-    expect(container).toMatchSnapshot();
-  });
-});
diff --git a/src/components/ButtonLink/ButtonLink.tsx b/src/components/ButtonLink/ButtonLink.tsx
deleted file mode 100644
index cb420d865..000000000
--- a/src/components/ButtonLink/ButtonLink.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-
-import styles from './ButtonLink.module.scss';
-
-type Props = {
-  label: string;
-  to: string;
-};
-
-const ButtonLink: React.FC<Props> = ({ label, to }) => {
-  return (
-    <NavLink className={styles.link} activeClassName={styles.active} to={to} exact>
-      <span className={styles.buttonLabel}>{label}</span>
-    </NavLink>
-  );
-};
-
-export default ButtonLink;
diff --git a/src/components/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap b/src/components/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap
deleted file mode 100644
index 18e69171f..000000000
--- a/src/components/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ButtonLink /> renders and matches snapshot 1`] = `
-<div>
-  <a
-    aria-current="page"
-    class="link active"
-    href="/"
-  >
-    <span>
-      home
-    </span>
-  </a>
-</div>
-`;
diff --git a/src/components/Filter/__snapshots__/Filter.test.tsx.snap b/src/components/Filter/__snapshots__/Filter.test.tsx.snap
index 3fd4d846e..69b6fc887 100644
--- a/src/components/Filter/__snapshots__/Filter.test.tsx.snap
+++ b/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
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
index 13d804f68..4d628e5d6 100644
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/Header.module.scss
@@ -52,10 +52,6 @@
 .nav {
   display: inline-block;
   flex: 1;
-
-  > a {
-    margin: 0 6px;
-  }
 }
 
 .search {
diff --git a/src/components/Header/Header.test.tsx b/src/components/Header/Header.test.tsx
index 7fe43233d..a7ea5db7d 100644
--- a/src/components/Header/Header.test.tsx
+++ b/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();
   });
diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
index 2ded72d08..f472497df 100644
--- a/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/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"
       />
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 5c8741479..a864479a5 100644
--- a/src/components/Layout/Layout.tsx
+++ b/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} />
diff --git a/src/components/Layout/__snapshots__/Layout.test.tsx.snap b/src/components/Layout/__snapshots__/Layout.test.tsx.snap
index 077800b59..a55a9ab07 100644
--- a/src/components/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/src/components/Layout/__snapshots__/Layout.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`<Layout /> renders layout 1`] = `
         >
           <a
             aria-current="page"
-            class="link active"
+            class="button text active"
             href="/"
           >
             <span>
@@ -51,7 +51,7 @@ exports[`<Layout /> renders layout 1`] = `
             </span>
           </a>
           <a
-            class="link"
+            class="button text"
             href="/u"
           >
             <span>
diff --git a/src/components/Root/__snapshots__/Root.test.tsx.snap b/src/components/Root/__snapshots__/Root.test.tsx.snap
index c6349cb63..05ffb4d64 100644
--- a/src/components/Root/__snapshots__/Root.test.tsx.snap
+++ b/src/components/Root/__snapshots__/Root.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`<Root /> renders and matches snapshot 1`] = `
           class="nav"
         >
           <a
-            class="link"
+            class="button text"
             href="/"
           >
             <span>
@@ -50,7 +50,7 @@ exports[`<Root /> renders and matches snapshot 1`] = `
             </span>
           </a>
           <a
-            class="link"
+            class="button text"
             href="/u"
           >
             <span>
diff --git a/src/components/Sidebar/Sidebar.test.tsx b/src/components/Sidebar/Sidebar.test.tsx
index 66c2d004a..2a0a9f622 100644
--- a/src/components/Sidebar/Sidebar.test.tsx
+++ b/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();
   });
diff --git a/src/components/Sidebar/__snapshots__/SideBar.test.tsx.snap b/src/components/Sidebar/__snapshots__/SideBar.test.tsx.snap
index 3afee7888..75201ca98 100644
--- a/src/components/Sidebar/__snapshots__/SideBar.test.tsx.snap
+++ b/src/components/Sidebar/__snapshots__/SideBar.test.tsx.snap
@@ -38,7 +38,17 @@ exports[`<SideBar /> renders sideBar 1`] = `
     </div>
     <nav
       class="group"
-    />
+    >
+      <a
+        aria-current="page"
+        class="button outlined active"
+        href="/"
+      >
+        <span>
+          Home
+        </span>
+      </a>
+    </nav>
   </div>
 </div>
 `;
diff --git a/src/components/Video/__snapshots__/Video.test.tsx.snap b/src/components/Video/__snapshots__/Video.test.tsx.snap
index a86730292..810260fa4 100644
--- a/src/components/Video/__snapshots__/Video.test.tsx.snap
+++ b/src/components/Video/__snapshots__/Video.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`<Video> renders and matches snapshot 1`] = `
           class="playButton"
         >
           <button
-            class="button active primary undefined fullWidth"
+            class="button primary active fullWidth"
           >
             <div
               class="startIcon"
@@ -63,7 +63,7 @@ exports[`<Video> renders and matches snapshot 1`] = `
           class="otherButtons"
         >
           <button
-            class="button undefined outlined"
+            class="button outlined"
           >
             <div
               class="startIcon"
@@ -87,7 +87,7 @@ exports[`<Video> renders and matches snapshot 1`] = `
             </span>
           </button>
           <button
-            class="button undefined outlined"
+            class="button outlined"
           >
             <div
               class="startIcon"
@@ -111,7 +111,7 @@ exports[`<Video> renders and matches snapshot 1`] = `
             </span>
           </button>
           <button
-            class="button undefined outlined"
+            class="button outlined"
           >
             <div
               class="startIcon"