mirror of
https://github.com/yldio/copilot.git
synced 2024-11-13 06:40:06 +02:00
creating base elements component loop
This commit is contained in:
parent
355e5bb587
commit
dbe3289bb6
@ -3,7 +3,7 @@ const React = require('react');
|
|||||||
const ReactIntl = require('react-intl');
|
const ReactIntl = require('react-intl');
|
||||||
const ReactRouter = require('react-router');
|
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 Li = require('@ui/components/horizontal-list/li');
|
||||||
const PropTypes = require('@root/prop-types');
|
const PropTypes = require('@root/prop-types');
|
||||||
const Ul = require('@ui/components/horizontal-list/ul');
|
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 {
|
& h1 {
|
||||||
font-size: 2em;
|
|
||||||
margin: 0.67em 0;
|
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'),
|
Tooltip: require('./components/tooltip'),
|
||||||
Textarea: require('./components/textarea'),
|
Textarea: require('./components/textarea'),
|
||||||
Widget: require('./components/widget'),
|
Widget: require('./components/widget'),
|
||||||
|
BaseElements: require('./components/base-elements'),
|
||||||
};
|
};
|
||||||
|
@ -131,3 +131,15 @@ test('renders <Tooltip> without exploding', (t) => {
|
|||||||
const wrapper = shallow(<Tooltip />);
|
const wrapper = shallow(<Tooltip />);
|
||||||
t.deepEqual(wrapper.length, 1);
|
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