feat(project): add header component

src/components/Header/Header.module.scss

@@ -0,0 +1,97 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+@use '../../styles/mixins/responsive';
+@use '../../styles/mixins/utils';
+
+//
+// Header
+// --------------------------------
+
+.header {
+  height: variables.$header-height;
+  padding: 10px 56px;
+}
+
+//
+// Make header fixed
+//
+.fixed {
+  position: fixed;
+  z-index: variables.$header-z-index;
+  width: 100%;
+}
+
+//
+// Make header static
+//
+.static {
+  position: static;
+  width: 100%;
+}
+
+//
+// Header container
+//
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+
+//
+// Header menu
+//
+.menu {
+  display: none;
+}
+
+//
+// Header navigation
+//
+.nav {
+  display: inherit;
+  flex: 1;
+}
+
+//
+// mediaQueries
+// --------------------------------
+
+@include responsive.mobile-and-tablet() {
+  .header {
+    height: variables.$header-height-mobile;
+    padding: 10px variables.$base-spacing * 2;
+  }
+
+  .menu {
+    display: block;
+  }
+
+  .nav {
+    display: none;
+  }
+}
+
+@include responsive.mobile-only() {
+  .header {
+    padding: 10px variables.$base-spacing-mobile;
+  }
+
+  .menu {
+    width: 90px;
+    transition: opacity 0.2s ease;
+  }
+}
+
+@include responsive.tablet-only() {
+  .menu {
+    width: 180px;
+  }
+}
+
+@include responsive.desktop-only() {
+  .nav {
+    text-align: center;
+  }
+}

src/components/Header/Header.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { render } from '../../testUtils';
+
+import Header from './Header';
+
+describe('<Header />', () => {
+  test('renders headers', () => {
+    const { container } = render(<Header />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Header/Header.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import ButtonLink from '../ButtonLink/ButtonLink';
+import Logo from '../Logo/Logo';
+
+import styles from './Header.module.scss';
+
+type TypeHeader = 'static' | 'fixed';
+
+type HeaderProps = {
+  headerType?: TypeHeader;
+};
+
+const Header: React.FC<HeaderProps> = ({ headerType = 'static' }) => {
+  return (
+    <header className={classNames(styles.header, styles[headerType])}>
+      <div className={styles.container}>
+        <div className={styles.menu}>
+          <span>Placeholder</span>
+        </div>
+        <Logo src="https://cdn.jwplayer.com/images/HXyBCU5N.png" />
+        <nav className={styles.nav}>
+          <ButtonLink label="Home" to="/" />
+          {/* mock */}
+          <ButtonLink label="Playlist" to="/p/:id" />
+          <ButtonLink label="Settings" to="/u" />
+          {/* mock */}
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Header /> renders headers 1`] = `
+<div>
+  <header
+    class=""
+  >
+    <div>
+      <div>
+        <span>
+          menu
+        </span>
+      </div>
+      <div>
+        <img
+          alt="logo"
+          src="https://cdn.jwplayer.com/images/HXyBCU5N.png"
+        />
+      </div>
+      <nav>
+        <a
+          aria-current="page"
+          class="function link() { [native code] } active"
+          href="/"
+        >
+          <span>
+            Home
+          </span>
+        </a>
+        <a
+          href="/one"
+        >
+          <span>
+            One
+          </span>
+        </a>
+        <a
+          href="/two"
+        >
+          <span>
+            Two
+          </span>
+        </a>
+      </nav>
+    </div>
+  </header>
+</div>
+`;