From 16cd49043d6b22d9d9803755a3a607f7986b1318 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 25 Oct 2016 14:01:42 +0100 Subject: [PATCH] working showcase --- ui/docs/containers/app/index.js | 24 ++++++ ui/docs/containers/app/navigation.js | 52 +++++++++++++ ui/docs/containers/app/style.css | 108 ++++++++++++++++++++++++++ ui/docs/containers/home.js | 5 ++ ui/docs/containers/item/index.js | 28 +++++++ ui/docs/containers/item/style.css | 7 ++ ui/docs/root.js | 13 +++- ui/package.json | 5 +- ui/src/components/column/readme.md | 2 +- ui/src/components/container/readme.md | 6 +- ui/src/docs.js | 4 +- ui/src/{ => guidelines}/layout.md | 0 ui/yarn.lock | 40 +++++++++- 13 files changed, 281 insertions(+), 13 deletions(-) create mode 100644 ui/docs/containers/app/index.js create mode 100644 ui/docs/containers/app/navigation.js create mode 100644 ui/docs/containers/app/style.css create mode 100644 ui/docs/containers/home.js create mode 100644 ui/docs/containers/item/index.js create mode 100644 ui/docs/containers/item/style.css rename ui/src/{ => guidelines}/layout.md (100%) diff --git a/ui/docs/containers/app/index.js b/ui/docs/containers/app/index.js new file mode 100644 index 00000000..52afa66f --- /dev/null +++ b/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 ( + + + + + + ); +}; diff --git a/ui/docs/containers/app/navigation.js b/ui/docs/containers/app/navigation.js new file mode 100644 index 00000000..c29070ba --- /dev/null +++ b/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 ( +
  • + {name} + {isNested ? getList(item, href) : null} +
    • + ); + }); + + const cn = classNames( + isNested ? styles['is-nested'] : '' + ); + + return ( +
      + {lis} +
    + ); +}; + +module.exports = () => { + return ( +
    +
    + +
    +
    + ); +}; diff --git a/ui/docs/containers/app/style.css b/ui/docs/containers/app/style.css new file mode 100644 index 00000000..dd09320a --- /dev/null +++ b/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 + } +} diff --git a/ui/docs/containers/home.js b/ui/docs/containers/home.js new file mode 100644 index 00000000..edc65ecf --- /dev/null +++ b/ui/docs/containers/home.js @@ -0,0 +1,5 @@ +const React = require('react'); + +module.exports = () => { + return (
    ); +}; diff --git a/ui/docs/containers/item/index.js b/ui/docs/containers/item/index.js new file mode 100644 index 00000000..ef59be97 --- /dev/null +++ b/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 ? ( + + ) : ( +

    {path} Not Found

    + ); + + return ( +
    + {item} +
    + ); +}; diff --git a/ui/docs/containers/item/style.css b/ui/docs/containers/item/style.css new file mode 100644 index 00000000..3c4a897b --- /dev/null +++ b/ui/docs/containers/item/style.css @@ -0,0 +1,7 @@ + +.item { + flex-grow: 1; + flex-shrink: 1; + flex-basis: auto; + margin-left: 15rem; +} diff --git a/ui/docs/root.js b/ui/docs/root.js index cf432b94..337d93d7 100644 --- a/ui/docs/root.js +++ b/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 InnerHTML = require('dangerously-set-inner-html'); +const ReactRouter = require('react-router'); + +const App = require('./containers/app/'); const { AppContainer } = ReactHotLoader; +const { + BrowserRouter +} = ReactRouter; + module.exports = () => { return ( - + + + ); }; diff --git a/ui/package.json b/ui/package.json index 09469aed..500ffa3d 100644 --- a/ui/package.json +++ b/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" diff --git a/ui/src/components/column/readme.md b/ui/src/components/column/readme.md index 0668b307..fb2ef870 100644 --- a/ui/src/components/column/readme.md +++ b/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 ( diff --git a/ui/src/components/container/readme.md b/ui/src/components/container/readme.md index 8e051721..25501fd2 100644 --- a/ui/src/components/container/readme.md +++ b/ui/src/components/container/readme.md @@ -1,4 +1,4 @@ -# `` +# `` ## demo @@ -9,7 +9,9 @@ const Container = require('./index.js'); const Button = require('../button'); nmodule.exports = ReactDOM.renderToString( - + + + ); ``` diff --git a/ui/src/docs.js b/ui/src/docs.js index ce2e8d4f..d9a0235a 100644 --- a/ui/src/docs.js +++ b/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'), diff --git a/ui/src/layout.md b/ui/src/guidelines/layout.md similarity index 100% rename from ui/src/layout.md rename to ui/src/guidelines/layout.md diff --git a/ui/yarn.lock b/ui/yarn.lock index c18ac9fa..47070bc1 100644 --- a/ui/yarn.lock +++ b/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: - version "1.0.0" - resolved "https://registry.yarnpkg.com/dangerously-set-inner-html/-/dangerously-set-inner-html-1.0.0.tgz#87c4a8ef1c41452e4b671dca77947512afab3806" +dangerously-set-inner-html@2.0.0: + version "2.0.0" + 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"