feat(project): add buttonlink component

src/components/ButtonLink/ButtonLink.module.scss

@@ -0,0 +1,42 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+@use '../../styles/mixins/responsive';
+@use '../../styles/mixins/utils';
+
+//
+// Navigation Button
+// --------------------------------
+
+.link {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 38px;
+  padding: 0 10px;
+  color: inherit;
+  font-family: theme.$body-alt-font-family;
+  text-align: center;
+  text-decoration: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 700;
+  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: theme.$btn-icon-active-color;
+  opacity: 1;
+}

src/components/ButtonLink/ButtonLink.test.tsx

@@ -0,0 +1,18 @@
+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();
+  });
+});

src/components/ButtonLink/ButtonLink.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+import styles from './ButtonLink.module.scss';
+
+type ButtonLinkProps = {
+  label: string;
+  to: string;
+};
+
+const ButtonLink: React.FC<ButtonLinkProps> = ({
+  label,
+  to,
+}: ButtonLinkProps) => {
+  return (
+    <NavLink
+      className={styles.link}
+      activeClassName={styles.active}
+      to={to}
+      exact
+    >
+      <span className={styles.buttonLabel}>{label}</span>
+    </NavLink>
+  );
+};
+
+export default ButtonLink;

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

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ButtonLink /> renders and matches snapshot 1`] = `
+<div>
+  <a
+    aria-current="page"
+    class="function link() { [native code] } active"
+    href="/"
+  >
+    <span>
+      home
+    </span>
+  </a>
+</div>
+`;