adding dev baseline grid - toggled on / off with env varibale in npm script

This commit is contained in:
Alex Windett 2017-02-01 12:35:25 +00:00
parent 71743f6e9c
commit 06a93881c0
6 changed files with 104 additions and 5 deletions

View File

@ -9,7 +9,7 @@
"lib": "src" "lib": "src"
}, },
"scripts": { "scripts": {
"start": "webpack-dev-server --open --config webpack/index.js", "start": "webpack-dev-server --define process.env.BASELINE_GRID=true --open --config webpack/index.js ",
"production": "node server", "production": "node server",
"lint": "make lint", "lint": "make lint",
"test": "make test", "test": "make test",

View File

@ -6,6 +6,7 @@ const Styled = require('styled-components');
const actions = require('@state/actions'); const actions = require('@state/actions');
const Article = require('@components/article'); const Article = require('@components/article');
const Base = require('@ui/components/base'); const Base = require('@ui/components/base');
const BaselineGrid = require('@ui/components/baseline-grid');
const Footer = require('@components/footer'); const Footer = require('@components/footer');
const Header = require('@containers/header'); const Header = require('@containers/header');
const Home = require('@containers/home'); const Home = require('@containers/home');
@ -57,13 +58,23 @@ const App = connect()(React.createClass({
children children
} = this.props; } = this.props;
if (!Array.isArray(children)) { let _children = children;
return children;
if (!Array.isArray(_children)) {
return _children;
}
if (process.env.NODE_ENV !== 'production' && process.env.BASELINE_GRID) {
_children = (
<BaselineGrid>
{_children}
</BaselineGrid>
);
} }
return ( return (
<Base> <Base>
{children} {_children}
</Base> </Base>
); );
} }

View File

@ -10,7 +10,6 @@ if (process.env.NODE_ENV !== 'production') {
const render = () => { const render = () => {
const Root = require('./root'); const Root = require('./root');
ReactDOM.render( ReactDOM.render(
<Root />, <Root />,
document.getElementById('root') document.getElementById('root')

View File

@ -0,0 +1,49 @@
const React = require('react');
const Styled = require('styled-components');
const {
default: styled
} = Styled;
const StyledBaselineBackground = styled.div`
position: relative;
&:after {
position: absolute;
width: auto;
height: auto;
z-index: 9999;
content: '';
display: block;
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(
to bottom,
rgba(93, 150, 52, 0.50),
rgba(93, 150, 52, 0.50) 50%,
transparent 50%,
transparent
);
background-size: 100% 6px;
}
`;
const Baseline = ({
children
}) => {
return (
<StyledBaselineBackground data-baseline>
{children}
</StyledBaselineBackground>
);
};
Baseline.propTypes = {
children: React.PropTypes.node,
};
module.exports = Baseline;

View File

@ -0,0 +1,37 @@
# `<Icon>`
## demo
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('../column');
const Icon = require('./index.js');
const styles = require('./style.css');
nmodule.exports = ReactDOM.renderToString(
<Base>
<Row>
<Column>
<Icon iconSet='fa' name='beer' />
</Column>
</Row>
</Base>
);
```
## usage
```js
const React = require('react');
const Icon = require('ui/icon');
module.exports = () => {
return (
<Icon iconSet='fa' name='beer' />
);
}
```

View File

@ -0,0 +1,3 @@
.icon {
font-size: inherit;
}