Feature/subnav component

.gitignore

@@ -7,4 +7,5 @@ coverage
 .idea
 .env
 npm-debug.log
-.DS_Store
+.DS_Store
+dist

.travis.yml

@@ -1,22 +1,33 @@
 language: node_js
 node_js:
-- 5.2.0
+- 5.5.0
 install:
 - npm install
 script:
-- npm run lint
+- npm run lint && npm run build-navbar
 sudo: false
-before_deploy:
-- npm-prepublish --verbose
 deploy:
-- provider: npm
-  email: "$NPM_EMAIL"
-  api_key: "$NPM_API_KEY"
+- provider: s3
+  cache_control: private, no-store, no-cache, must-revalidate, max-age=0
+  detect_encoding: true
+  access_key_id: $AWS_KEY
+  secret_access_key: $AWS_SECRET
+  bucket: components.topcoder-dev.com
+  skip_cleanup: true
+  local_dir: dist
   on:
-    tags: true
+    branch: dev
 env:
+  matrix:
+    - CXX=g++-4.8
   global:
-  # NPM_EMAIL
-  - secure: "kmo0afPY5HwJ5SryNY0XRRRekxd1teBR6lSiw2jtjU64sOdpjN7ZhGWy9q0lReGk6hloPfXewXRlpCbcDRFoxvJUdAbQoAN8gq/BxrwGmWlBepgUew1O6WLkpvqXCMe6lUmPEznjil2anjLHfm/cKiqwaY1n8MI+PSna6eNwAlffx72uPL1TzrijJjb7kKqTtjTHZzNiiUn2jZrc35G+MeryZmnd5xXV7cXgYb+flEMC5sDqhcO2aewYiCGMK2b3f7QDJFbGD4+v+HjN1XispJgCxDLTRLJ0HD8HPj87w/7s7PHqCuRUwga1Z2HTRDniqM7mb7TZ5RK990Olp4d1Fw/ApXhUEe4fwgTdN9PSwOzOrY4VGNyytYvJuMVqSVGIHx6Y2BuCt3gzPeM0ev8bjhE9PItYmDTr5FhNI1XLT7PKu+Ktp72bmdEVqNfnv7jXRKba9AeSBQVk70jKMpYAuGI/d/xXeaD2vImBhCflc0UArYfXf+JYMEwzhiMZQfq6csvg0UV/nlD9xidgBLt8QUGdFaQTjsQLt9CWbwcKM7/yFcfkOKEHrM5By1Do4gtSDxmK5F+81210YMO30OVwllHk/f+jOspti9EJv6r0vAZOkKXXL15VsyKQSrF/p6k+brVf0cQcnUMiSiNsl/aEftNW2ys5VCIRJcEol5bHt90="
-  # NPM_API_KEY
-  - secure: "OoRE9rbEzfAomE1h+PRDHJb0SgcyManma54qs72nwlBA3N4D+hV2Swy0xAidnVqdNvBlA4p9QmcrE0km+ZGVacFEhvleUGFDn5weWde2bukzkkdHtbaYQjyhxbrqfLA9G9vzs1BlHjhrR7Arl2TQuT21XnfagFBQ/LCgCRRu9yHHkZ4TejhuYu/9Fgdq08wnBpLZn7wllUq0OtrDgEgjK7avZ+yv5ob6zccxr3NAAchbdPJ2yUo82VvD+YdQaWbLq9ac5cwa0I6f/RuQUiZcLZItk/H3NuQqg32746QdwIqKpw5dh9wzddbckIK3WVsoJmE+7WpGAOgUU/TxmPijH6j1YwQ9uqcBGsax8RUFR+mG7imlS4YpL67K438JPUG7NCPgnN19zN/c+4WkVoKlLYEncyPp0C3sBbmauR0uuuVBWWUJL/1xBCuPyhT9JGXaocms/Ldshxr+TYf1tfQQ3uzs6wO3cniw3wIgXbgMF6NBwQdQpgUlSh++XJKgIG2I228GI3qMq8zJu/N/1oEKVkKkO8Z9Y3Vd5uo2VMbkp0KJJEfXnE8GZBBaajD+F8jONRQqYEDhK8EMYuqKhsQZMw3RgPtvOZNG+bhcnbElNnMjhd8CTKioKXAslkTP6Esi4Ce2PS6YR4CskjZaO7IT9KRqHvVZN42vlIVbhb2J0RI="
+    # DEV_AWS_KEY
+    - secure: a5X4QlY2JD/sJnEBkT5WwwfWjYKq3ldRf/+Dh5x2oHB0swGzYyFxzVlezddPF8xDML+CcVoLHkd8WNM2F7qcxHZTDC5spH/ym2gX6YlRwFRTTFBRCJehgYs8Vit/s14f8gkuVV8fe2ubMiV+fpAw80tb3E+t+nCckmXwe8gDqDbHto5VIozTiqDOV/WvkPzaRQofTeNzSqjrAH/iRq8hJUx16shCO2ccdiLu7rnOuys+UwjWFRyjdLP01UZXd5u6a5XK3vigLGPBAqsEwSMgScATJjNIHwYofE5Q3ztD85jz/JoQatQf7LCnQUqkLT+xldMkOZuTlTHvzmVUOl2WYpVxWV9hXwBemvyuRPPtzIrZkKXi6OUgvpYwGgWn8eS1qulB1DYPrUWBtIYGQoxEchfNlmcrCIJ7BrbL9xiNUM8J+ZCWtNS01eSapMHdhAIUMLEsAjxBY+ArLuYAD+URB0d+JZrr9cORGnrGDB+1wI12Z/Qu5LEDp/TMOisK2PXEsaqzlaazr9lj2FXTYJQyyFMMWzq1v1o5lZ5mEJ5ea36eGApV1iQNmPrg7omhDHwKtBpMDFQWZ0Y1SrkIk3QTX6JfzsrehwAhAK2fZ25EaC6zcppAo0ia5/VZoWzxHFQyhkC47hRrM7C6nCriQPDc9kKsmTSX5rp5e/DNpiZ67qM=
+    # DEV_AWS_SECRET
+    - secure: p+od0xD/9vpMbR2AI6gZWknNAtvvIfq6jXIF98DEsDlqrrMFv4SwtuXLlCmX5PBnB/cWOkwgRhymI7/3+fLrDC+wqlhDEWyzSpVOvAcVAb5LEP7IDen0W8kTj2q9I2VRX+keL7lxQCknAf/21sRZeJfJhLGR+O3NcytEdsjlpFCopA6luZYv1QSd+nRJiTsI7I69T0hr7jZk+YioyjEEp/4qzI2qyJH7E5Ry+DD3gXnC3zva48Huq6rvOtLpgFmio1b1rNAcA55Q9Y3vb1jJyZhKpRvtel9OM9ekTxANEGJVaMzxyZXT7EFTxwxS+ub5c2HRzxedMnD3tY29ku2JJx7Ofm+Yxt9DZXSK7EV99xxE71kIhI9lZFiWZviym08MHGc4pee6+Cl6ZkiV44v4XnwbgUq8GCOkmDMQBQtGhXq7dC6jB/r7P7CJs+DIGDF7qNt/xizVOC1THS8GUCN68aWMVperP+IlUXo5d2XekhO6vjHk6o44K8A1s7yblBWXj54B6NfJnBzUK2X0g6Y2xdW6tmoKtad1r1I3062skc+UiU+6m4fGS8pLFElJNj+8N7QANoEw9oJDZfuQ47uVQzPjAA1/qdcy3ksMek0siNFbpZnMqzOJTPf2Xe7YgKuCPg0QczESXIjOeEIU0om7SWmGEIuMFqt6obQW0M3VHn0=
+addons:
+  apt:
+    sources:
+    - ubuntu-toolchain-r-test
+    packages:
+    - g++-4.8

components/Carousel/Carousel.jsx

@@ -0,0 +1,121 @@
+require('./Carousel.scss')
+import classNames from 'classnames'
+
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+
+import LeftArrowIcon from '../Icons/LeftArrowIcon'
+import RightArrowIcon from '../Icons/RightArrowIcon'
+
+export default class Carousel extends Component {
+  componentWillMount() {
+    this.handleResize = this.handleResize.bind(this)
+    window.addEventListener('resize', this.handleResize)
+    this.handlePageUp = this.handlePageUp.bind(this)
+    this.handlePageDown = this.handlePageDown.bind(this)
+    this.setState({firstVisibleItem: this.props.firstVisibleItem || 0})
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  }
+
+  handleResize() {
+    this.validatePagers()
+  }
+
+  componentDidMount() {
+    this.validatePagers()    
+  }
+
+  componentDidUpdate() {
+    this.validatePagers()
+  }
+
+  validatePagers() {
+    const pageDownClass = classNames(
+      'page-down',
+      { hidden: this.state.firstVisibleItem === 0 }
+    )
+    const pageUpClass = classNames(
+      'page-up',
+      { hidden: this.lastElementVisible(this.state.firstVisibleItem) }
+    )
+    const node = ReactDOM.findDOMNode(this)
+    const pageDownNode = node.querySelector('.page-down')
+    const pageUpNode = node.querySelector('.page-up')
+    pageDownNode.className = pageDownClass
+    pageUpNode.className = pageUpClass
+  }
+
+
+  lastElementVisible(firstVisibleItem) {
+    const node = ReactDOM.findDOMNode(this)
+    const parentNode = node.parentNode
+    const maxWidth = parentNode.getBoundingClientRect().width
+    const visibleAreaNode = node.querySelector('.visible-area')
+    visibleAreaNode.style.width = maxWidth + 'px'
+    const itemNodes = visibleAreaNode.children
+    let width = 0
+    if (firstVisibleItem > 0) {
+      // if first item is not visible, account 20px for page-down element
+      width += 20
+      // account the right margin for page-down (see Carousel.scss)
+      width += 15
+    }
+    for (let i = 0; i < itemNodes.length; i++) {
+      const itemNode = itemNodes[i]
+      width += itemNode.getBoundingClientRect().width
+      if (i < itemNodes.length - 1) {
+        // account 30px for every carousel-item (see Carousel.scss)
+        width += 30
+      }
+      if (width > maxWidth) {
+        return false
+      }
+    }
+    return true
+  }
+
+  handlePageUp() {
+    if (!this.lastElementVisible(this.state.firstVisibleItem + 1)) {
+      const nextFirstVisibleItem = this.state.firstVisibleItem + 1
+      this.setState({firstVisibleItem: nextFirstVisibleItem})
+    }
+  }
+
+  handlePageDown() {
+    if (this.state.firstVisibleItem > 0) {
+      const nextFirstVisibleItem = this.state.firstVisibleItem - 1
+      this.setState({firstVisibleItem: nextFirstVisibleItem})
+    }
+  }
+
+  render() {
+    const carouselItem = (item, idx) => {
+      if (idx < this.state.firstVisibleItem) {
+        return
+      }
+
+      return (
+        <div key={idx} className="carousel-item">
+          {item}
+        </div>
+      )
+    }
+
+    return (
+      <div className="Carousel">
+        <div className="page-down" onClick={this.handlePageDown}>
+          <LeftArrowIcon fill="#FFFFFF" />
+        </div>
+        <div className="visible-area">
+          { this.props.children.map(carouselItem) }
+        </div>
+        <div className="page-up" onClick={this.handlePageUp}>
+          <RightArrowIcon fill="#FFFFFF" />
+        </div>
+      </div>
+    )
+  }
+}

components/Carousel/Carousel.scss

@@ -0,0 +1,45 @@
+@import 'topcoder/tc-includes';
+
+$pager-bg-color: #737380;
+
+.Carousel {
+  display: flex;
+  flex-direction: row;
+
+  .page-down {
+    width: 20px;
+    margin-right: 15px;
+    background-color: $pager-bg-color;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    &.hidden {
+      display: none;
+    }
+  }
+
+  .page-up {
+    width: 20px;
+    background-color: $pager-bg-color;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    &.hidden {
+      display: none;
+    }
+  }
+
+  .visible-area {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+
+    .carousel-item:not(:first-child) {
+      margin-left: 30px;
+    }
+  }
+}

components/Carousel/CarouselExamples.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import Carousel from './Carousel'
+
+import StandardListItem  from '../StandardListItem/StandardListItem'
+
+require('./CarouselExamples.scss')
+
+
+const CarouselExamples = () => (
+
+  <div className="CarouselExamples">
+    <p>With limited width</p>
+    <div className="limited-width">
+      <Carousel>
+        <StandardListItem labelText="Community" imgSrc={require('./placeholder.svg')} />
+        <StandardListItem labelText="Compete" imgSrc={require('./placeholder.svg')} />
+        <StandardListItem labelText="Learn" imgSrc={require('./placeholder.svg')} />
+      </Carousel>
+    </div>
+    <p>With full width</p>
+    <div className="full-width">
+      <Carousel>
+        <StandardListItem labelText="Community" imgSrc={require('./placeholder.svg')} />
+        <StandardListItem labelText="Compete" imgSrc={require('./placeholder.svg')} />
+        <StandardListItem labelText="Learn" imgSrc={require('./placeholder.svg')} />
+      </Carousel>
+    </div>
+    <p>With limited width and custom first visible element</p>
+    <div className="limited-width">
+      <Carousel firstVisibleItem={1}>
+        <StandardListItem labelText="Community" imgSrc={require('./placeholder.svg')} />
+        <StandardListItem labelText="Compete" imgSrc={require('./placeholder.svg')} />
+        <StandardListItem labelText="Learn" imgSrc={require('./placeholder.svg')} />
+      </Carousel>
+    </div>
+  </div>
+)
+
+module.exports = CarouselExamples

components/Carousel/CarouselExamples.scss

@@ -0,0 +1,17 @@
+@import 'topcoder/tc-includes';
+
+.Carousel {
+  .StandardListItem {
+    padding: 0px;
+  }
+}
+
+.CarouselExamples {
+  > p {
+    border: 1px solid $accent-gray;
+    margin: 20px 0px;
+  }
+  .limited-width {
+    width: 200px;
+  }
+}

components/Icons/LeftArrowIcon.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+const LeftArrowIcon = ({ width, height, fill }) => {
+  const f = (fill || '#A3A3AE')
+  return (
+    <svg width={ width || '12px' } height={ height || '19px' } viewBox="0 0 12 19" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <title>ico-arrow-big-left</title>
+      <desc>Created with Sketch.</desc>
+      <defs></defs>
+      <g id="ASSETS-EXPORT" stroke="none" strokeWidth="1" fill="none" fill-rule="evenodd">
+        <g id="Assets" transform="translate(-950.000000, -252.000000)" fill={ f }>
+            <path d="M959.025853,261.50145 L951.137711,253.305117 C950.841671,253.006868 950.841671,252.524146 951.137711,252.223687 C951.433751,251.925438 951.912055,251.925438 952.208095,252.223687 L960.857325,260.959078 C961.153365,261.258432 961.153365,261.742258 960.857325,262.040508 L952.208095,270.775899 C951.912055,271.075253 951.433751,271.074148 951.137711,270.775899 C950.841671,270.478754 950.841671,269.994927 951.137711,269.694469 L959.025853,261.50145 L959.025853,261.50145 Z" id="ico-arrow-big-left" transform="translate(955.997518, 261.500000) scale(-1, 1) translate(-955.997518, -261.500000) "></path>
+        </g>
+      </g>
+    </svg>
+  )
+}
+
+export default LeftArrowIcon

components/Icons/PlaceholderIcon.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const PlaceholderIcon = ({ width, height, fill }) => {
+  const f = (fill || '#B47DD6')
+  return (
+    <svg width={ width || '32px' } height={ height || '32px' } viewBox="0 0 32 32">
+      <rect width="32" height="32" fill={ f }></rect>
+    </svg>
+  )
+}
+
+export default PlaceholderIcon

components/Icons/RightArrowIcon.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const RightArrowIcon = ({ width, height, fill }) => {
+  const f = (fill || '#A3A3AE')
+  return (
+    <svg width={ width || '12px' } height={ height || '19px' } viewBox="0 0 12 19" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <title>ico-arrow-big-right</title>
+      <desc>Created with Sketch.</desc>
+      <defs></defs>
+      <g id="Assets" transform="translate(-929.000000, -252.000000)" fill={ f }>
+        <path d="M938.025853,261.50145 L930.137711,253.305117 C929.841671,253.006868 929.841671,252.524146 930.137711,252.223687 C930.433751,251.925438 930.912055,251.925438 931.208095,252.223687 L939.857325,260.959078 C940.153365,261.258432 940.153365,261.742258 939.857325,262.040508 L931.208095,270.775899 C930.912055,271.075253 930.433751,271.074148 930.137711,270.775899 C929.841671,270.478754 929.841671,269.994927 930.137711,269.694469 L938.025853,261.50145 L938.025853,261.50145 Z" id="ico-arrow-big-right"></path>
+      </g>
+    </svg>
+  )
+}
+
+export default RightArrowIcon

components/MenuBar/MenuBar.jsx

@@ -1,5 +1,5 @@
 import React, { PropTypes, Component } from 'react'
-import classNames from 'classNames'
+import classNames from 'classnames'
 
 require('./MenuBar.scss')
 

components/Navbar/Navbar.jsx

@@ -7,9 +7,9 @@ import QuickLinks from '../QuickLinks/QuickLinks'
 import UserDropdownMenu from '../UserDropdownMenu/UserDropdownMenu'
 
 const primaryNavigationItems = [
-  {img: '../components/MenuBar/nav-community.svg', text: 'Community', link: 'javascript:;'},
-  {img: '../components/MenuBar/nav-compete.svg', text: 'Compete', link: 'javascript:;', selected: true},
-  {img: '../components/MenuBar/nav-learn.svg', text: 'Learn', link: 'javascript:;'}
+  {img: require('./nav-community.svg'), text: 'Community', link: 'javascript:;'},
+  {img: require('./nav-compete.svg'), text: 'Compete', link: 'javascript:;', selected: true},
+  {img: require('./nav-learn.svg'), text: 'Learn', link: 'javascript:;'}
 ]
 
 class Navbar extends Component {

components/Navbar/Navbar.scss

@@ -13,9 +13,6 @@ $super-wide: 1376px;
   background-color: $navbar-bg;
   border-bottom: 1px solid $border-color;
   padding: 10px 20px;
-  position: fixed;
-  top: 0;
-  left: 0;
   width: 100%;
 
   @media screen and (max-width: $mobile) {