Pages creation, routes, side nav structure (#866)

* started setting up environment

* added eslint and tested out routes:

* added fonts back in

* added routes and site nav structure

* fixed some routes and added box-sizing

* refactored the sidenav

* refactored more

* refactored the side nav

* removed dist files

* added assets to gitignore

* removed assets

* put it back but its ignored

* updated favicon

* fixed fonts

Author: marijohannessen

.DS_Store

@@ -6,6 +6,7 @@ coverage
 
 # production
 build
+dist
 
 # misc
 .DS_Store

.gitignore

@@ -0,0 +1,42 @@
+# Linter Options
+options:
+  # Don't merge default rules
+  merge-default-rules: false
+# File Options
+files:
+  ignore:
+    - 'src/assets/fonts/font-face.scss'
+# Rule Configuration
+rules:
+  # Extends and Mixins
+  extends-before-mixins: 1
+  extends-before-declarations: 1
+  placeholder-in-extend: 1
+  mixins-before-declarations: 1
+  # Spaces and Lines
+  one-declaration-per-line: 1
+  final-newline: 1
+  indentation: 1
+  space-before-brace: 1
+  space-after-comma: 1
+  space-around-operator: 1
+  empty-line-between-blocks:
+    - 1
+    - include: true
+    - allow-single-line-rulesets: true
+  # Other
+  leading-zero: 1
+  trailing-semicolon: 1
+  quotes:
+    - 1
+    - style: single
+  # Not Allowed
+  no-color-keywords: 2
+  no-misspelled-properties: 2
+  no-ids: 2
+  no-important: 2
+  no-empty-rulesets: 2
+  no-duplicate-properties: 1
+  # Units
+  property-units:
+    - global: ['rem', 'px']

.sass-lint.yml

@@ -131,11 +131,7 @@ module.exports = {
           cacheDirectory: true
         }
       },
-      // "postcss" loader applies autoprefixer to our CSS.
-      // "css" loader resolves paths in CSS and adds assets as dependencies.
       // "style" loader turns CSS into JS modules that inject <style> tags.
-      // In production, we use a plugin to extract that CSS to a file, but
-      // in development "style" loader enables hot editing of CSS.
       {
         test: /\.(css|scss)$/,
         loader: 'style!css?importLoaders=1!postcss!sass'
@@ -177,24 +173,14 @@ module.exports = {
     new InterpolateHtmlPlugin({
       PUBLIC_URL: publicUrl
     }),
-    // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.appHtml,
     }),
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
     new webpack.DefinePlugin(env),
     // This is necessary to emit hot updates (currently CSS only):
     new webpack.HotModuleReplacementPlugin(),
-    // Watcher doesn't work well if you mistype casing in a path so we use
-    // a plugin that prints an error when you attempt to do this.
-    // See https://github.com/facebookincubator/create-react-app/issues/240
     new CaseSensitivePathsPlugin(),
-    // If you require a missing module and then `npm install` it, you still have
-    // to restart the development server for Webpack to discover it. This plugin
-    // makes the discovery automatic so you don't have to restart.
-    // See https://github.com/facebookincubator/create-react-app/issues/186
     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
     new CopyWebpackPlugin([
         {

HELP.md

@@ -52,6 +52,7 @@
   "dependencies": {
     "@console/bluemix-components": "^6.11.5",
     "@console/bluemix-components-react": "^1.2.0",
+    "classnames": "^2.2.5",
     "markdown-loader": "^0.1.7",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
@@ -95,10 +96,6 @@
     ]
   },
   "eslintConfig": {
-    "globals": {
-      "window": true,
-      "document": true
-    },
     "parser": "babel-eslint",
     "extends": "airbnb",
     "rules": {
@@ -107,21 +104,15 @@
         130,
         4
       ],
+      "react/jsx-filename-extension": 0,
       "no-underscore-dangle": 0,
       "react/prefer-stateless-function": 0,
       "react/require-default-props": 0,
-      "react/jsx-filename-extension": [
-        1,
-        {
-          "extensions": [
-            ".js",
-            ".jsx"
-          ]
-        }
-      ]
+      "react/prop-types": 0,
+      "jsx-a11y/no-static-element-interactions": 0
     },
     "env": {
-      "jest": true
+      "browser": true
     }
   }
 }

config/webpack.config.dev.js

@@ -13,7 +13,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Carbon Design System</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -1,25 +1,60 @@
 import React from 'react';
 import { Link } from 'react-router';
 
-const SideNav = () => (
-  <div className="side-nav">
-    <Link to="/" className="side-nav__logo">
-      Carbon <br /><span>Design System</span>
-    </Link>
-    <ul className="side-nav__menu">
-      <li className="menu-item">
-        <p className="menu-item__heading">Getting Started</p>
+import Icon from '@console/bluemix-components-react/dist/components/Icon';
+
+import SiteNavStructure from '../../data/site-nav-structure.json';
+import SideNavItem from '../SideNavItem/SideNavItem';
+
+class SideNav extends React.Component {
+  renderSubNavItems = (subnav, parentItem) =>
+    Object.keys(subnav).map(subNavItem =>
+      <SideNavItem key={subNavItem} className="sub-nav__item">
+        <Link className="sub-nav__item-link" to={`/${parentItem}/${subNavItem}`}>{subnav[subNavItem]}</Link>
+      </SideNavItem>,
+    );
+
+  renderSubNav = (subnav, parentItem) => {
+    const subNavItems = this.renderSubNavItems(subnav, parentItem);
+    return (
+      <SideNavItem key={parentItem} className="menu-item">
+        <p className="menu-item__heading">{SiteNavStructure[parentItem].title}
+          <Icon className="menu-item__arrow" name="caret--down" description="Menu arrow icon" />
+        </p>
         <ul className="menu__sub-nav">
-          <li className="sub-nav__item">
-            <Link className="sub-nav__item-link" to="/designers">Designers</Link>
-          </li>
-          <li className="sub-nav__item">
-            <Link className="sub-nav__item-link" to="/developers">Developers</Link>
-          </li>
+          {subNavItems}
+        </ul>
+      </SideNavItem>
+    );
+  }
+
+  renderSiteItems = navItems =>
+    Object.keys(navItems).map((navItem) => {
+      const navItemObj = navItems[navItem];
+      if (navItemObj.subnav) {
+        return this.renderSubNav(navItemObj.subnav, navItem);
+      }
+      return (
+        <SideNavItem key={navItem} className="menu-item">
+          <Link className="menu-item__heading" to={navItem}>{navItemObj.title}</Link>
+        </SideNavItem>
+      );
+    });
+
+  render() {
+    const navItems = this.renderSiteItems(SiteNavStructure);
+
+    return (
+      <div className="side-nav">
+        <Link to="/" className="side-nav__logo">
+          Carbon <br /><span>Design System</span>
+        </Link>
+        <ul className="side-nav__menu">
+          {navItems}
         </ul>
-      </li>
-    </ul>
-  </div>
-);
+      </div>
+    );
+  }
+}
 
 export default SideNav;

public/favicon.ico

@@ -1,9 +1,9 @@
 .side-nav {
   @include font-smoothing;
   font-size: rem(14px);
-  background-color: $dark-bg-color;
+  background-color: #1d3649; // color not in our library
   border-right: 2px solid $color__navy-gray-3;
-  width: 12.438rem;
+  width: rem(245px);
   height: 100%;
   padding: 1rem 1.25rem 2rem 1.5rem;
   position: fixed;
@@ -26,6 +26,36 @@
   }
 }
 
+.menu__sub-nav {
+  list-style: none;
+  padding-left: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: .3s;
+
+  .sub-nav__item {
+    text-transform: capitalize;
+    margin-left: 0;
+    padding: .5rem;
+    color: $color__navy-gray-8;
+
+    &:hover {
+      color: $color__blue-30;
+    }
+
+    &:first-child {
+      margin-top: 1rem;
+    }
+
+    &-link {
+      color: inherit;
+      text-decoration: none;
+      cursor: pointer;
+      font-weight: normal;
+    }
+  }
+}
+
 .side-nav__menu {
   list-style: none;
   padding-left: 0;
@@ -34,6 +64,10 @@
     border-top: 1px solid $color__blue-20;
     padding: 1.5rem 0;
 
+    &:hover {
+      color: $color__blue-30;
+    }
+
     &:last-child {
       border-bottom: 1px solid $color__blue-20;
     }
@@ -49,36 +83,26 @@
       font-weight: 600;
       letter-spacing: 2px;
       margin-bottom: 0;
+      text-decoration: none;
     }
 
     &__arrow {
       height: rem(10px);
       width: rem(10px);
       fill: $color__gray-3;
       margin-right: .5rem;
+      transition: .3s;
     }
-  }
-}
 
-.menu__sub-nav {
-  list-style: none;
-  padding-left: 0;
+    &__open {
 
-  .sub-nav__item {
-    text-transform: capitalize;
-    margin-left: 0;
-    padding: .5rem;
-    color: $color__navy-gray-8;
-
-    &:first-child {
-      margin-top: 1rem;
-    }
+      & .menu__sub-nav {
+        max-height: 30rem;
+      }
 
-    &-link {
-      color: inherit;
-      text-decoration: none;
-      cursor: pointer;
-      font-weight: normal;
+      & .menu-item__arrow {
+        transform: rotate(-180deg);
+      }
     }
   }
 }

public/index.html

@@ -0,0 +1,31 @@
+import React from 'react';
+import classnames from 'classnames';
+
+class SideNavItem extends React.Component {
+  state = {
+    open: this.props.open,
+  }
+
+  handleClick = (evt) => {
+    const targetIsSubItem = evt.target.classList.contains('sub-nav__item-link');
+    if (!targetIsSubItem) {
+      const open = !this.state.open;
+      this.setState({ open });
+    }
+  }
+
+  render() {
+    const classNames = classnames({
+      'menu-item__open': this.state.open,
+    },
+      this.props.className,
+    );
+    return (
+      <li className={classNames} onClick={this.handleClick}>
+        {this.props.children}
+      </li>
+    );
+  }
+}
+
+export default SideNavItem;