feat(components): create new tab-styled vertical nav bar

components/src/index.js

@@ -21,6 +21,7 @@ export * from './interaction-enhancers'
 export * from './lists'
 export * from './modals'
 export * from './nav'
+export * from './tabbedNav'
 export * from './structure'
 export * from './tooltips'
 

components/src/tabbedNav/NavTab.js

@@ -0,0 +1,73 @@
+// @flow
+import * as React from 'react'
+import {NavLink} from 'react-router-dom'
+import classnames from 'classnames'
+
+import styles from './navbar.css'
+import {Button} from '../buttons'
+import {NotificationIcon, type IconName} from '../icons'
+
+type NavTabProps= {
+  /** optional click event for nav button */
+  onClick?: (event: SyntheticEvent<>) => void,
+  /** optional url for nav button route */
+  url?: string,
+  /** position a single button on the bottom of the page */
+  isBottom?: boolean,
+  /** classes to apply */
+  className?: string,
+  /** disabled attribute (setting disabled removes onClick) */
+  disabled?: boolean,
+  /** optional title to display below the icon */
+  title?: string,
+  /** Icon name for button's icon */
+  iconName: IconName,
+  /** Display a notification dot */
+  notification?: boolean,
+  /** selected styling (can also use react-router & `activeClassName`) */
+  selected?: boolean,
+}
+
+export default function NavTab (props: NavTabProps) {
+  const {url} = props
+  const className = classnames(
+    props.className,
+    styles.tab,
+    {
+      [styles.disabled]: props.disabled,
+      [styles.bottom]: props.isBottom,
+      [styles.selected]: props.selected,
+    }
+  )
+
+  let buttonProps = {
+    className: className,
+    disabled: props.disabled,
+    onClick: props.onClick,
+  }
+
+  if (url) {
+    buttonProps = {
+      ...buttonProps,
+      Component: NavLink,
+      to: url,
+      activeClassName: styles.selected,
+    }
+  }
+
+  return (
+    <Button {...buttonProps}>
+      <NotificationIcon
+        name={props.iconName}
+        childName={props.notification ? 'circle' : null}
+        className={styles.icon}
+        childClassName={styles.notification}
+      />
+      {props.title && (
+        <span className={styles.title}>
+          {props.title}
+        </span>
+      )}
+    </Button>
+  )
+}

components/src/tabbedNav/NavTab.md

@@ -0,0 +1,46 @@
+Basic Usage:
+
+```js
+<div style={{width: '5rem'}}>
+  <NavTab
+    onClick={() => alert('you clicked me')}
+    iconName='ot-connect'
+  />
+</div>
+```
+Disabled:
+
+```js
+<div style={{width: '5rem'}}>
+  <NavTab
+    onClick={() => alert('you clicked me')}
+    iconName='ot-connect'
+    disabled
+  />
+</div>
+```
+
+Currently Selected:
+
+```js
+<div style={{width: '5rem'}}>
+  <NavTab
+    onClick={() => alert('you clicked me')}
+    iconName='ot-connect'
+    selected
+  />
+</div>
+```
+
+Optional Title:
+
+```js
+<div style={{width: '5rem'}}>
+  <NavTab
+    onClick={() => alert('you clicked me')}
+    title='connect'
+    iconName='ot-connect'
+    title='connect'
+  />
+</div>
+```

components/src/tabbedNav/OutsideLinkTab.js

@@ -0,0 +1,65 @@
+// @flow
+import * as React from 'react'
+import cx from 'classnames'
+
+import styles from './navbar.css'
+import {Button} from '../buttons'
+import {NotificationIcon, type IconName} from '../icons'
+
+type Props = {
+  /** optional click event for nav button */
+  onClick?: (event: SyntheticEvent<>) => mixed,
+  /** link to outside URL */
+  to: string,
+  /** position a single button on the bottom of the page */
+  isBottom?: boolean,
+  /** classes to apply */
+  className?: string,
+  /** disabled attribute (setting disabled removes onClick) */
+  disabled?: boolean,
+  /** optional title to display below the icon */
+  title?: string,
+  /** Icon name for button's icon */
+  iconName: IconName,
+  /** Display a notification dot */
+  notification?: boolean,
+  /** selected styling (can also use react-router & `activeClassName`) */
+  selected?: boolean,
+}
+
+/** Very much like NavTab, but used for opening external links in a new tab/window */
+export default function OutsideLinkTab (props: Props) {
+  const className = cx(
+    props.className,
+    styles.tab,
+    styles.no_link,
+    {
+      [styles.disabled]: props.disabled,
+      [styles.bottom]: props.isBottom,
+      [styles.selected]: props.selected,
+    }
+  )
+  return (
+    <Button
+      className={className}
+      disabled={props.disabled}
+      onClick={props.onClick}
+      Component='a'
+      href={props.disabled ? '' : props.to}
+      target='_blank'
+      rel='noopener noreferrer'
+    >
+      <NotificationIcon
+        name={props.iconName}
+        childName={props.notification ? 'circle' : null}
+        className={styles.icon}
+        childClassName={styles.notification}
+      />
+      {props.title && (
+        <span className={styles.title}>
+          {props.title}
+        </span>
+      )}
+    </Button>
+  )
+}

components/src/tabbedNav/TabbedNavBar.js

@@ -0,0 +1,27 @@
+// @flow
+import * as React from 'react'
+import cx from 'classnames'
+import styles from './navbar.css'
+
+type Props= {
+  className?: string,
+  topChildren?: React.Node,
+  bottomChildren?: React.Node,
+}
+
+export default function TabbedNavBar (props: Props) {
+  const className = cx(styles.navbar, props.className)
+  return (
+    <nav className={className}>
+      <div className={styles.top_section}>
+        {props.topChildren}
+      </div>
+
+      <div className={styles.filler} />
+
+      <div className={styles.bottom_section}>
+        {props.bottomChildren}
+      </div>
+    </nav>
+  )
+}

components/src/tabbedNav/index.js

@@ -0,0 +1,11 @@
+// @flow
+// navigational components
+import TabbedNavBar from './TabbedNavBar'
+import NavTab from './NavTab'
+import OutsideLinkTab from './OutsideLinkTab'
+
+export {
+  TabbedNavBar,
+  NavTab,
+  OutsideLinkTab,
+}

components/src/tabbedNav/navbar.css

@@ -0,0 +1,83 @@
+@import '..';
+
+.navbar {
+  flex: none;
+  width: 4rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.navbar > * {
+  flex: 1;
+}
+
+/* TODO(mc, 2018-03-21): @apply --button-default? */
+.tab {
+  display: inline-block;
+  cursor: pointer;
+  background-color: var(--c-white);
+  color: var(--c-med-gray);
+  outline: none; /* button reset? */
+  border: none; /* button reset >:( */
+  border-right: var(--bd-light);
+}
+
+.top_section > *,
+.bottom_section > *,
+.filler {
+  width: 100%;
+  border-right: var(--bd-light);
+}
+
+.top_section > .tab {
+  border-bottom: var(--bd-light);
+}
+
+.bottom_section > .tab {
+  border-top: var(--bd-light);
+}
+
+.filler {
+  flex-grow: 9999;
+}
+
+.title {
+  display: block;
+  color: var(--c-font-dark);
+  font-size: var(--fs-caption);
+  font-weight: var(--fw-semibold);
+  text-transform: uppercase;
+  text-align: center;
+  padding-bottom: 0.5rem;
+}
+
+.disabled {
+  cursor: default;
+  pointer-events: none;
+  opacity: 0.75;
+}
+
+.selected {
+  background-color: var(--c-bg-light);
+  border-right-color: transparent;
+
+  & > svg {
+    fill: var(--c-dark-gray);
+  }
+}
+
+.icon {
+  height: 100%;
+  width: 100%;
+  padding: 0.5rem 0.5rem 0;
+  color: var(--c-charcoal);
+}
+
+.notification {
+  color: var(--c-orange);
+}
+
+.no_link {
+  text-decoration: none;
+  color: inherit;
+}

components/styleguide.config.js

@@ -36,9 +36,13 @@ module.exports = {
       components: 'src/alerts/[A-Z]*.js',
     },
     {
-      name: 'Nav',
+      name: 'Nav (buttons)',
       components: 'src/nav/[A-Z]*.js',
     },
+    {
+      name: 'Tabbed Nav',
+      components: 'src/tabbedNav/[A-Z]*.js',
+    },
     {
       name: 'Buttons',
       components: 'src/buttons/[A-Z]*.js',