Merge pull request #159 from yldio/base-elements-new

creating base elements component loop
This commit is contained in:
Alex Windett 2017-01-16 17:56:34 +00:00 committed by GitHub
commit 985a64c2a1
7 changed files with 108 additions and 25 deletions

View File

@ -3,7 +3,7 @@ const React = require('react');
const ReactIntl = require('react-intl');
const ReactRouter = require('react-router');
const H1 = require('@ui/components/h1');
const H1 = require('@ui/components/base-elements').H1;
const Li = require('@ui/components/horizontal-list/li');
const PropTypes = require('@root/prop-types');
const Ul = require('@ui/components/horizontal-list/ul');

View File

@ -0,0 +1,68 @@
/* eslint react/prop-types: 0 */
const Styled = require('styled-components');
const React = require('react');
const {
default: styled
} = Styled;
// If specificity is an issue (i.e nested elements) check base/index.js first
// before using !important
const elements = [
{
name: 'h1',
properties: {
'line-height': '70px',
'font-size': '60px'
}
},
{
name: 'h2',
properties: {
'line-height': '60px',
'font-size': '40px'
}
}
];
/*
Loop over each item in element array.
Create styled component for each name, and
use properties from object as styles
Then export all Base Elements.
Usage:
const H1 = require(base-components).H1;
*/
const BaseElements = {};
elements.forEach( element => {
const ElementNameToUpper = element.name.toUpperCase();
BaseElements[ElementNameToUpper] = ({
children,
style
}) => {
const StyledElement = styled[element.name.toLowerCase()]`
${element.properties}
`;
return (
<StyledElement style={style}>
{children}
</StyledElement>
);
};
// TODO: Fix proptype validation and remove eslint ignore line 1
BaseElements[ElementNameToUpper].propTypes = {
children: React.PropTypes.node,
style: React.PropTypes.object,
};
});
module.exports = BaseElements;

View File

@ -0,0 +1,26 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Base = require('../base');
const BaseElements = require('./');
const {
H1,
H2
} = BaseElements;
storiesOf('Base Elements', module)
.add('H1', () => (
<Base>
<H1>This is a H1</H1>
</Base>
))
.add('H2', () => (
<Base>
<H2>This is a H2</H2>
</Base>
))
;

View File

@ -96,7 +96,6 @@ module.exports = styled.div`
}
& h1 {
font-size: 2em;
margin: 0.67em 0;
}

View File

@ -1,23 +0,0 @@
const fns = require('../../shared/functions');
const Styled = require('styled-components');
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
module.exports = styled.h1`
font-size: ${remcalc(36)};
font-weight: 600;
font-style: normal;
font-stretch: normal;
color: #364acd;
border-bottom: ${remcalc(1)} solid #d8d8d8;
& a {
text-decoration: none;
}
`;

View File

@ -27,4 +27,5 @@ module.exports = {
Tooltip: require('./components/tooltip'),
Textarea: require('./components/textarea'),
Widget: require('./components/widget'),
BaseElements: require('./components/base-elements'),
};

View File

@ -131,3 +131,15 @@ test('renders <Tooltip> without exploding', (t) => {
const wrapper = shallow(<Tooltip />);
t.deepEqual(wrapper.length, 1);
});
test('renders <H1> without exploding', (t) => {
const H1 = require('../src/components/base-elements').H1;
const wrapper = shallow(<H1 />);
t.deepEqual(wrapper.length, 1);
});
test('renders <H2> without exploding', (t) => {
const H2 = require('../src/components/base-elements').H2;
const wrapper = shallow(<H2 />);
t.deepEqual(wrapper.length, 1);
});