Added Section Header (#175)

package.json

@@ -80,7 +80,7 @@
     "react-helmet": "^5.2.0",
     "react-plyr": "^2.1.1",
     "slugify": "^1.3.3",
-    "typescript": "3.2.2",
+    "typescript": "3.4.4",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
@@ -105,9 +105,10 @@
     "semantic-release": "15.13.2",
     "travis-deploy-once": "5.0.11",
     "ts-jest": "23.10.5",
-    "tslint": "5.12.0",
+    "tslint": "5.16.0",
     "tslint-config-prettier": "1.17.0",
     "tslint-eslint-rules": "5.4.0",
-    "tslint-react": "3.6.0"
+    "tslint-react": "3.6.0",
+    "webpack": "^4.28.4"
   }
 }

src/components/SectionHeader/ExpandingMenu.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+import { css } from 'react-emotion'
+
+import ExpandingTabs from './ExpandingTabs'
+
+export default class ExpandingMenu extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      menuExpanded: false,
+    }
+    this.expandMenu = this.expandMenu.bind(this)
+  }
+  public expandMenu() {
+    const header = document.getElementById('SectionHeaderBlock')
+    const tabs = document.getElementById('SectionHeaderExpandingTabs')
+    const height = tabs.clientHeight + 99
+    this.state.menuExpanded
+      ? (header.style.height = '100px')
+      : (header.style.height = height + 'px')
+    this.state.menuExpanded = !this.state.menuExpanded
+  }
+  public render() {
+    function expandMenuAux() {
+      this.expandMenu()
+    }
+    return (
+      <div
+        className={css`
+          display: block;
+          background-color: #000000;
+          width: 100%;
+        `}
+        id="menu"
+      >
+        <div
+          className={css`
+            box-sizing: border-box;
+            display: block;
+            background-color: #000000;
+            height: 38px;
+            width: 100%;
+
+            padding: 7px 0px;
+
+            font-family: Source Sans Pro;
+            font-style: normal;
+            font-weight: 900;
+            line-height: normal;
+            font-size: 18px;
+
+            text-transform: uppercase;
+            color: #ffffff;
+
+            cursor: pointer;
+          `}
+          onClick={this.expandMenu}
+        >
+          Sections ▾
+          <ExpandingTabs sectionList={this.props.sectionList} />
+        </div>
+      </div>
+    )
+  }
+}

src/components/SectionHeader/ExpandingTab.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { css } from 'react-emotion'
+
+export default class ExpandingTab extends React.Component<ExpandingTabProps> {
+  constructor(props: ExpandingTabProps) {
+    super(props)
+    this.state = {
+      underlined: 'none',
+    }
+    this.underlineHovered = this.underlineHovered.bind(this)
+    this.underlineClear = this.underlineClear.bind(this)
+  }
+  public underlineHovered() {
+    this.setState({ underlined: 'underline' })
+  }
+  public underlineClear() {
+    this.setState({ underlined: 'none' })
+  }
+  public render() {
+    return (
+      <a
+        href={this.props.section.link}
+        className={css`
+          text-decoration: none;
+          color: #ffffff;
+        `}
+        style={{ textDecoration: this.state.underlined }}
+      >
+        <li
+          className={css`
+            display: inline-flex;
+            padding: 7px 20px;
+            margin: 0;
+
+            width: 100%;
+
+            font-family: Source Sans Pro;
+            font-style: normal;
+            font-weight: 900;
+            line-height: normal;
+            font-size: 18px;
+
+            text-transform: uppercase;
+
+            color: #ffffff;
+            justify-content: left;
+          `}
+          onMouseEnter={this.underlineHovered}
+          onMouseLeave={this.underlineClear}
+        >
+          {this.props.section.title}
+        </li>
+      </a>
+    )
+  }
+}

src/components/SectionHeader/ExpandingTabs.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { css } from 'react-emotion'
+
+import ExpandingTab from './ExpandingTab'
+
+export default class ExpandingTabs extends React.Component<ExpandingTabsProps> {
+  constructor(props: ExpandingTabsProps) {
+    super(props)
+  }
+  public underlineHovered(idTitle: string) {
+    document.getElementById(
+      'SectionHeaderExpandingTab' + idTitle
+    ).style.textDecoration = 'underline'
+  }
+  public underlineClear(idTitle: string) {
+    document.getElementById(
+      'SectionHeaderExpandingTab' + idTitle
+    ).style.textDecoration = 'none'
+  }
+  public render() {
+    const sections = this.props.sectionList
+    const sectionTabList = []
+    for (const i of sections) {
+      sectionTabList.push(<ExpandingTab section={i} />)
+    }
+    return (
+      <ul
+        className={css`
+          width: 100%;
+          height: auto;
+
+          margin: 7px 0 0;
+          padding: 0 0 7px;
+
+          background: #000000;
+
+          list-style-type: none;
+          @media (min-width: 940px) {
+            display: none;
+          }
+        `}
+        id="SectionHeaderExpandingTabs"
+      >
+        {sectionTabList}
+      </ul>
+    )
+  }
+}

src/components/SectionHeader/SectionTab.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { css } from 'react-emotion'
+
+export default class SectionTab extends React.Component<SectionTabProps> {
+  constructor(props: SectionTabProps) {
+    super(props)
+    this.state = {
+      underlined: 'none',
+    }
+    this.underlineHovered = this.underlineHovered.bind(this)
+    this.underlineClear = this.underlineClear.bind(this)
+  }
+  public underlineHovered() {
+    this.setState({ underlined: 'underline' })
+  }
+  public underlineClear() {
+    this.setState({ underlined: 'none' })
+  }
+  public render() {
+    const { underlineState = 'underline' } = this.state.underlined
+    return (
+      <a
+        href={this.props.section.link}
+        className={css`
+          text-decoration: none;
+          color: #ffffff;
+        `}
+        style={{ textDecoration: this.state.underlined }}
+      >
+        <li
+          className={css`
+            display: inline-flex;
+            background-color: #000000;
+            height: 38px;
+
+            padding: 7px 10px;
+            margin: auto;
+
+            font-family: Source Sans Pro;
+            font-style: normal;
+            font-weight: 900;
+            line-height: normal;
+            font-size: 18px;
+
+            text-transform: uppercase;
+            color: #ffffff;
+          `}
+          onMouseEnter={this.underlineHovered}
+          onMouseLeave={this.underlineClear}
+        >
+          {this.props.section.title}
+        </li>
+      </a>
+    )
+  }
+}

src/components/SectionHeader/SectionTabs.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import { css } from 'react-emotion'
+
+import SectionTab from './SectionTab'
+
+export default class SectionTabs extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+  public render() {
+    const sections = this.props.sectionList
+    const sectionTabList = []
+    for (const i of sections) {
+      sectionTabList.push(<SectionTab section={i} />)
+    }
+    return (
+      <ul
+        className={css`
+          width: 100%;
+          height: 62px;
+          margin: 0;
+          padding: 0;
+          line-height: normal;
+          font-size: 18px;
+
+          background: #000000;
+
+          list-style-type: none;
+
+          overflow: hidden;
+          @media (max-width: 940px) {
+            display: none;
+          }
+        `}
+        id="SectionHeaderTabs"
+      >
+        {sectionTabList}
+      </ul>
+    )
+  }
+}

src/components/SectionHeader/index.mdx

@@ -0,0 +1,31 @@
+---
+name: Section Header
+route: /section-header
+---
+
+import { Playground, PropsTable } from 'docz'
+import SectionHeader from '.'
+
+# Section Header
+
+A header to describe the current section the viewer is in
+
+Note that `SectionHeader` expects an array of `SectionLink` objects which include `title` and `link` values.
+
+<PropsTable of={SectionHeader} />
+
+<Playground>
+  <SectionHeader
+    title={'NEWS'}
+    sectionList={[
+      { title: 'NEWS', link: '' },
+      { title: 'SPORTS', link: '' },
+      { title: 'ARTS', link: '' },
+      { title: 'OPINION', link: '' },
+      { title: 'PHOTO', link: '' },
+      { title: 'VIDEO', link: '' },
+      { title: 'ILLUSTRATIONS', link: '' },
+      { title: 'GRAPHICS', link: '' },
+    ]}
+  />
+</Playground>