working showcase

ui/docs/containers/app/index.js

@@ -0,0 +1,24 @@
+const React = require('react');
+const ReactRouter = require('react-router');
+
+const Navigation = require('./navigation.js');
+const Home = require('../home');
+const Item = require('../item/');
+
+const {
+  Base
+} = require('../../../src');;
+
+const {
+  Match
+} = ReactRouter;
+
+module.exports = () => {
+  return (
+    <Base>
+      <Navigation />
+      <Match exactly pattern='/' component={Home} />
+      <Match pattern='/:parent?/:name' component={Item} />
+    </Base>
+  );
+};

ui/docs/containers/app/navigation.js

@@ -0,0 +1,52 @@
+const classNames = require('classnames');
+const paramCase = require('param-case');
+const React = require('react');
+const ReactRouter = require('react-router');
+
+const Docs = require('../../../src/docs');
+const styles = require('./style.css');
+
+const {
+  Link
+} = ReactRouter;
+
+const getList = (items, parent) => {
+  let isNested = false;
+
+  const lis = Object.keys(items).map((name) => {
+    const item = items[name];
+    const param = paramCase(name);
+    const href = parent ? `${parent}/${param}` : `/${param}`;
+
+    isNested = (typeof item !== 'string');
+
+    return (
+      <li className={styles.item} key={href}>
+        <Link to={href}>{name}</Link>
+        {isNested ? getList(item, href) : null}
+      </li>
+    );
+  });
+
+  const cn = classNames(
+    isNested ? styles['is-nested'] : ''
+  );
+
+  return (
+    <ul className={cn}>
+      {lis}
+    </ul>
+  );
+};
+
+module.exports = () => {
+  return (
+    <div>
+      <div className={styles.navigation}>
+        <nav role='navigation'>
+          {getList(Docs)}
+        </nav>
+      </div>
+    </div>
+  );
+};

ui/docs/containers/app/style.css

@@ -0,0 +1,108 @@
+/* based on:
+ *
+ * salesforce-ux/design-system v2.1.3
+ * BSD License Clause 2
+ * github.com/salesforce-ux/design-system
+ */
+
+
+.navigation {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+
+  /* Arrow Icon */
+  & .icon_svg {
+    width: .5rem;
+    height: .5rem;
+    display: inline-block;
+    opacity: .5;
+  }
+
+  /* Hide closed menu items */
+  & .is-closed ul {
+    display: none;
+  }
+
+  /* Links */
+  & a {
+    display: block;
+    padding: .75rem 2rem;
+    line-height: 1.28571428571429;
+    color: #16325c;
+
+    &:hover {
+      background-color: rgba(244, 246, 249, .5);
+    }
+  }
+
+  /* Active Link */
+  & .is-active > a {
+    background-color: #eef1f6;
+    color: #0070d2;
+  }
+
+  /* Open Menu Items */
+  & .is-open {
+    padding-bottom: .5rem;
+  }
+
+  /* Section Selected */
+  & .is-selected {
+    background-color: #f4f6f9;
+
+    & a:hover {
+      background-color: #eceff5;
+    }
+
+    & .icon__svg {
+      opacity: 1;
+    }
+  }
+
+  /* Nested List */
+  & .is-nested {
+    margin-left: 0;
+
+    & a {
+      padding-top: .5rem;
+      padding-bottom: .5rem;
+      padding-left: 3.5rem;
+    }
+
+    & .is-nested a {
+      padding-left: 5rem;
+    }
+  }
+
+  @media (min-width: 48em) {
+    position: fixed;
+    top: 6rem;
+    bottom: 0;
+    border-right: 1px solid #f4f6f9;
+    padding-top: 0;
+    width: 15rem;
+
+    & nav {
+      position: absolute;
+      width: 15rem;
+      height: 100%;
+      overflow: hidden;
+      overflow-y: auto;
+      outline: 0;
+    }
+
+    &.navigation--has-search nav {
+      top: calc(2.5rem + 2px);
+      bottom: 0;
+      height: auto;
+    }
+
+    &.site-navigation--internal {
+      top: 8rem;
+    }
+  }
+
+  & .item {
+    margin: 0 .5rem
+  }
+}

ui/docs/containers/home.js

@@ -0,0 +1,5 @@
+const React = require('react');
+
+module.exports = () => {
+  return (<div></div>);
+};

ui/docs/containers/item/index.js

@@ -0,0 +1,28 @@
+const get = require('lodash.get');
+const InnerHTML = require('dangerously-set-inner-html');
+const React = require('react');
+const styles = require('./style.css');
+const titleCase = require('title-case');
+
+const Docs = require('../../../src/docs');
+
+module.exports = ({
+  params
+}) => {
+  const path = (params.parent !== 'undefined')
+    ? `${titleCase(params.parent)}.${titleCase(params.name)}`
+    : `${titleCase(params.name)}`;
+
+  const body = get(Docs, path);
+  const item = body ? (
+    <InnerHTML html={body} />
+  ) : (
+    <h1>{path} Not Found</h1>
+  );
+
+  return (
+    <div className={styles.item}>
+      {item}
+    </div>
+  );
+};

ui/docs/containers/item/style.css

@@ -0,0 +1,7 @@
+
+.item {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  margin-left: 15rem;
+}

ui/docs/root.js

@@ -1,16 +1,23 @@
 const React = require('react');
 const ReactHotLoader = require('react-hot-loader');
-const Button = require('../src/components/column/readme.md');
+const ReactRouter = require('react-router');
-const InnerHTML = require('dangerously-set-inner-html');
+
+const App = require('./containers/app/');
 
 const {
   AppContainer
 } = ReactHotLoader;
 
+const {
+  BrowserRouter
+} = ReactRouter;
+
 module.exports = () => {
   return (
     <AppContainer>
-      <InnerHTML html={Button} />
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
     </AppContainer>
   );
 };

ui/package.json

@@ -29,7 +29,7 @@
     "babel-preset-react": "^6.16.0",
     "babel-register": "^6.16.3",
     "css-loader": "^0.25.0",
-    "dangerously-set-inner-html": "^1.0.0",
+    "dangerously-set-inner-html": "2.0.0",
     "enzyme": "^2.5.1",
     "eslint": "^3.8.1",
     "eslint-config-semistandard": "^7.0.0",
@@ -40,7 +40,9 @@
     "eslint-plugin-standard": "^2.0.1",
     "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "json-loader": "^0.5.4",
+    "lodash.get": "^4.4.2",
     "nyc": "^8.3.1",
+    "param-case": "^2.1.0",
     "postcss-cssnext": "^2.8.0",
     "postcss-loader": "^1.0.0",
     "postcss-mixins": "^5.4.0",
@@ -52,6 +54,7 @@
     "react-hot-loader": "^3.0.0-beta.6",
     "react-router": "^4.0.0-alpha.4",
     "style-loader": "^0.13.1",
+    "title-case": "^2.1.0",
     "webpack": "^2.1.0-beta.25",
     "webpack-dev-server": "^1.16.2",
     "webpack-shell-plugin": "^0.4.3"

ui/src/components/column/readme.md

@@ -41,7 +41,7 @@ nmodule.exports = ReactDOM.renderToString(
 const React = require('react');
 const Container = require('ui/container');
 const Row = require('ui/row');
-const Column = require('ui/index');
+const Column = require('ui/column');
 
 module.exports = () => {
   return (

ui/src/components/container/readme.md

@@ -1,4 +1,4 @@
-# `<Grid>`
+# `<Container>`
 
 ## demo
 
@@ -9,7 +9,9 @@ const Container = require('./index.js');
 const Button = require('../button');
 
 nmodule.exports = ReactDOM.renderToString(
-  <Grid><Button>Hello World</Button></Grid>
+  <Container>
+    <Button>Hello World</Button>
+  </Container>
 );
 ```
 

ui/src/docs.js

@@ -1,8 +1,8 @@
 module.exports = {
   'Getting Started': require('./getting-started.md'),
-  Layout: require('./layout.md'),
   Guidelines: {
-    Overview: require('./guidelines/overview.md')
+    Overview: require('./guidelines/overview.md'),
+    Layout: require('./guidelines/layout.md')
   },
   Components: {
     Base: require('./components/base/readme.md'),

ui/yarn.lock

@@ -1856,12 +1856,13 @@ d@^0.1.1, d@~0.1.1:
   dependencies:
     es5-ext "~0.10.2"
 
-dangerously-set-inner-html@^1.0.0:
+dangerously-set-inner-html@2.0.0:
-  version "1.0.0"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/dangerously-set-inner-html/-/dangerously-set-inner-html-1.0.0.tgz#87c4a8ef1c41452e4b671dca77947512afab3806"
+  resolved "https://registry.yarnpkg.com/dangerously-set-inner-html/-/dangerously-set-inner-html-2.0.0.tgz#da73f26330c9ef0b6b12ca443091904406ddb73a"
   dependencies:
     lodash.flatten "^4.4.0"
     parse5 "^2.2.3"
+    uuid "^2.0.3"
 
 dashdash@^1.12.0:
   version "1.14.0"
@@ -3459,6 +3460,10 @@ lodash.foreach@^4.3.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
 
+lodash.get:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+
 lodash.indexof@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
@@ -3539,6 +3544,10 @@ loud-rejection@^1.0.0, loud-rejection@^1.2.0:
     currently-unhandled "^0.4.1"
     signal-exit "^3.0.0"
 
+lower-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.3.tgz#c92393d976793eee5ba4edb583cf8eae35bd9bfb"
+
 lowercase-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
@@ -3720,6 +3729,12 @@ negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
+no-case@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.0.tgz#ca2825ccb76b18e6f79d573dcfbf1eace33dd164"
+  dependencies:
+    lower-case "^1.1.1"
+
 node-fetch@^1.0.1:
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
@@ -4027,6 +4042,12 @@ pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
 
+param-case:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.0.tgz#2619f90fd6c829ed0b958f1c84ed03a745a6d70a"
+  dependencies:
+    no-case "^2.2.0"
+
 parse-asn1@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.0.0.tgz#35060f6d5015d37628c770f4e091a0b5a278bc23"
@@ -5613,6 +5634,13 @@ timers-browserify@^1.0.1:
   dependencies:
     process "~0.11.0"
 
+title-case:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.0.tgz#c68ccb4232079ded64f94b91b4941ade91391979"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.0.3"
+
 to-fast-properties@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
@@ -5734,6 +5762,10 @@ update-notifier@^1.0.0:
     semver-diff "^2.0.0"
     xdg-basedir "^2.0.0"
 
+upper-case@^1.0.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+
 url-parse-lax@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
@@ -5785,7 +5817,7 @@ utils-merge@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
 
-uuid@^2.0.1, uuid@^2.0.2:
+uuid@^2.0.1, uuid@^2.0.2, uuid@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"