feat(layout): add button component

src/components/Button/Button.module.scss

@@ -0,0 +1,50 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+@use "../../styles/mixins/responsive";
+
+.button {
+  @include responsive.mobile-only() {
+    padding: 12px 16px;
+  }
+
+  @include responsive.tablet-and-larger() {
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        z-index: 1;
+        background: rgba(var(--background-color), 0.7);
+        box-shadow: 0 0 0 3px var(--highlight-color),
+          0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%),
+          0 4px 5px rgb(0 0 0 / 20%);
+        opacity: 1;
+      }
+    }
+  }
+  position: relative;
+  display: inline-flex;
+  display: flex;
+  justify-content: inherit;
+  align-items: center;
+  align-items: baseline;
+  min-height: 38px;
+  margin: 0 5px;
+  padding: 9px 16px;
+  color: variables.$white;
+  font-family: theme.$body-alt-font-family;
+  font-weight: 700;
+  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;
+
+  &.active {
+    color: variables.$white;
+    background: rgba(variables.$black, 0.7);
+    opacity: 1;
+  }
+  > h2 {
+    font-size: 24px;
+  }
+}

src/components/Button/Button.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Button from './Button';
+
+describe('<Button>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<Button />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Button/Button.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import styles from './Button.module.scss';
+
+type Props = {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+};
+
+const Button: React.FC<Props> = ({ label, active, onClick }: Props) => {
+  return (
+    <button
+      className={classNames(styles.button, {
+        [styles.active]: active,
+      })}
+      onClick={onClick}
+    >
+      <span className={styles.buttonLabel}>{label}</span>
+    </button>
+  );
+};
+
+export default Button;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button> renders and matches snapshot 1`] = `
+<div>
+  <button
+    class="button"
+  >
+    <span />
+  </button>
+</div>
+`;