mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
Merge pull request #159 from yldio/base-elements-new
creating base elements component loop
This commit is contained in:
commit
985a64c2a1
@ -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');
|
||||
|
68
ui/src/components/base-elements/index.js
Normal file
68
ui/src/components/base-elements/index.js
Normal 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;
|
26
ui/src/components/base-elements/story.js
Normal file
26
ui/src/components/base-elements/story.js
Normal 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>
|
||||
))
|
||||
;
|
@ -96,7 +96,6 @@ module.exports = styled.div`
|
||||
}
|
||||
|
||||
& h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
@ -27,4 +27,5 @@ module.exports = {
|
||||
Tooltip: require('./components/tooltip'),
|
||||
Textarea: require('./components/textarea'),
|
||||
Widget: require('./components/widget'),
|
||||
BaseElements: require('./components/base-elements'),
|
||||
};
|
||||
|
@ -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);
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user