feature/UIDS-185 move Header, SidebarNav, SidebarView into DS (#186)

* moves original header and sidebar_nav into DS

* fix PropTypes & scss imports in components

* update scss theme imports

* add NavLink, react-router-dom dependency

* moves original sidebar_view into DS

* adds timing.scss variables to theme

* updates scss import on SidebarView component

* adds react-modal, keyCodes, fix PropTypes in SidebarView

* create anchors.scss

* move Header, SidebarNav, SidebarView into Layout

Author: jasonbasuil

package.json

@@ -2,6 +2,7 @@
   "name": "@user-interviews/ui-design-system",
   "version": "1.14.1",
   "dependencies": {
+    "react-router-dom": "^5.2.0",
     "react-select": "^3.0.8",
     "react-transition-group": "^4.3.0",
     "uuid": "^7.0.2"
@@ -94,6 +95,7 @@
     "react": "^16.12.0",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.12.0",
+    "react-modal": "^3.12.1",
     "react-popper": "^2.2.3",
     "react-test-renderer": "^16.12.0",
     "react-tracking": "^7.3.0",

scss/anchors.scss

@@ -0,0 +1,10 @@
+// This should be included directly on the a element
+@mixin ui-remove-anchor-styles($color: inherit) {
+  color: $color;
+
+  &:active, &:focus, &:hover {
+    color: $color;
+    outline: none;
+    text-decoration: none;
+  }
+}

scss/navbar.scss

@@ -1,2 +1,3 @@
+$ui-header-height: 4.5rem;
 $ui-navbar-height: 3rem;
 $ui-navbar-height-mobile: $ui-navbar-height;

scss/theme.scss

@@ -1,3 +1,4 @@
+@import './anchors';
 @import './borders';
 @import './box_shadow';
 @import './buttons';
@@ -7,6 +8,7 @@
 @import './lists';
 @import './navbar';
 @import './spacing';
+@import './timing.scss';
 @import './typography';
 @import './z_stack';
 

scss/timing.scss

@@ -0,0 +1,10 @@
+// Timing functions
+
+$ux-ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+$ux-ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+
+// Durations 
+
+$ux-duration-brief: 80ms;
+$ux-duration-short: 160ms;
+$ux-duration-long: 240ms;

src/Layout/Header/Controls.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Controls = props => (
+  <div className="Header__controls">
+    {props.children}
+  </div>
+);
+
+export default Controls;

src/Layout/Header/Header.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Controls from './Controls';
+
+import './Header.scss';
+
+const Header = ({
+  controls,
+  isMobileView,
+  isSidebarOpen,
+  titleComponent,
+  onToggleSidebarRequest,
+}) => (
+  <div className="Header">
+    {titleComponent}
+    <Controls>
+      {!isMobileView && controls}
+      {isMobileView && (
+        <button
+          className="btn btn-primary btn-outline-neutral"
+          type="button"
+          onClick={onToggleSidebarRequest}
+        >
+          {isSidebarOpen ? 'Close' : 'Menu'}
+        </button>
+      )}
+    </Controls>
+  </div>
+);
+
+Header.propTypes = {
+  controls: PropTypes.arrayOf(PropTypes.node),
+  isMobileView: PropTypes.bool.isRequired,
+  isSidebarOpen: PropTypes.bool.isRequired,
+  titleComponent: PropTypes.node,
+  onToggleSidebarRequest: PropTypes.func.isRequired,
+};
+
+Header.defaultProps = {
+  controls: undefined,
+  titleComponent: undefined,
+};
+
+export default Header;

src/Layout/Header/Header.scss

@@ -0,0 +1,21 @@
+@import '../../scss/theme.scss';
+
+.Header {
+  align-items: center;
+  background: $ux-gray-900;
+  color: $ux-white;
+  display: flex;
+  height: $ui-header-height;
+  padding: $ux-spacing-40;
+
+  > div:first-child {
+    @include font-type-60--bold;
+    flex-grow: 1;
+  }
+
+  &__controls {
+    > :not(:last-child) {
+      margin-right: $ux-spacing-20;
+    }
+  }
+}

src/Layout/Header/index.js

@@ -0,0 +1 @@
+export { default } from './Header';

src/Layout/SidebarNav/SidebarNav.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './SidebarNav.scss';
+
+const SidebarNav = ({ controls, isMobileView, content }) => (
+  <div className="Layout__sidebar-nav">
+    {content}
+
+    {controls && isMobileView && (
+      <div className="Layout__sidebar-nav__mobile-controls">
+        {controls}
+      </div>
+    )}
+  </div>
+);
+
+SidebarNav.propTypes = {
+  content: PropTypes.node.isRequired,
+  controls: PropTypes.arrayOf(PropTypes.node),
+  isMobileView: PropTypes.bool.isRequired,
+};
+
+SidebarNav.defaultProps = {
+  controls: undefined,
+};
+
+export default SidebarNav;