working showcase

This commit is contained in:
Sérgio Ramos 2016-10-25 14:01:42 +01:00
parent 1a0ddf25b1
commit 16cd49043d
13 changed files with 281 additions and 13 deletions

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -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
}
}

View File

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

View File

@ -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>
);
};

View File

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

View File

@ -1,16 +1,23 @@
const React = require('react'); const React = require('react');
const ReactHotLoader = require('react-hot-loader'); 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 { const {
AppContainer AppContainer
} = ReactHotLoader; } = ReactHotLoader;
const {
BrowserRouter
} = ReactRouter;
module.exports = () => { module.exports = () => {
return ( return (
<AppContainer> <AppContainer>
<InnerHTML html={Button} /> <BrowserRouter>
<App />
</BrowserRouter>
</AppContainer> </AppContainer>
); );
}; };

View File

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

View File

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

View File

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

View File

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

View File

@ -1856,12 +1856,13 @@ d@^0.1.1, d@~0.1.1:
dependencies: dependencies:
es5-ext "~0.10.2" 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: dependencies:
lodash.flatten "^4.4.0" lodash.flatten "^4.4.0"
parse5 "^2.2.3" parse5 "^2.2.3"
uuid "^2.0.3"
dashdash@^1.12.0: dashdash@^1.12.0:
version "1.14.0" version "1.14.0"
@ -3459,6 +3460,10 @@ lodash.foreach@^4.3.0:
version "4.5.0" version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53" 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: lodash.indexof@^4.0.5:
version "4.0.5" version "4.0.5"
resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c" 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" currently-unhandled "^0.4.1"
signal-exit "^3.0.0" 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: lowercase-keys@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306" 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" version "0.6.1"
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9" 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: node-fetch@^1.0.1:
version "1.6.3" version "1.6.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04" 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" version "0.2.9"
resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75" 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: parse-asn1@^5.0.0:
version "5.0.0" version "5.0.0"
resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.0.0.tgz#35060f6d5015d37628c770f4e091a0b5a278bc23" resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.0.0.tgz#35060f6d5015d37628c770f4e091a0b5a278bc23"
@ -5613,6 +5634,13 @@ timers-browserify@^1.0.1:
dependencies: dependencies:
process "~0.11.0" 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: to-fast-properties@^1.0.1:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320" 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" semver-diff "^2.0.0"
xdg-basedir "^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: url-parse-lax@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73" 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" version "1.0.0"
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8" 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" version "2.0.3"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a" resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"