Add AddMetric component and redux-form-proxy

This commit is contained in:
JUDIT GRESKOVITS 2017-01-09 17:57:49 +00:00
parent 77ac03962e
commit 3e33f4bf6d
6 changed files with 170 additions and 2 deletions

View File

@ -0,0 +1,86 @@
const React = require('react');
const Styled = require('styled-components');
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const Button = require('../button');
const {
boxes,
colors
} = constants;
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
const padding = remcalc(24);
const AddMetricContainer = styled.div`
position: relative;
width: ${300}px;
height: ${247}px;
padding: ${padding};
box-shadow: ${boxes.bottomShaddow};
border: 1px solid ${colors.borderSecondary};
background-color: ${colors.brandSecondary};
`;
// WHy is the font not sans?
const Title = styled.h4`
margin-bottom: 0;
color: ${colors.semibold};
`;
const Description = styled.p`
margin: 0;
color: ${colors.regular};
`;
// I don't want to have important rules all over the place...
const Link = styled.a`
text-decoration: underline !important;
`;
const ButtonContainer = styled(Button)`
position: absolute;
left: ${padding};
bottom: ${padding};
`;
const AddMetric = ({
title,
description,
link,
linkLabel,
added,
addLabel,
addedLabel,
onAddToggle
}) => {
return (
<AddMetricContainer>
<Title>{title}</Title>
<Description>{description}</Description>
<Link href={link}>{linkLabel}</Link>
{ added ?
<ButtonContainer disabled>{addedLabel}</ButtonContainer> :
<ButtonContainer secondary>{addLabel}</ButtonContainer> }
</AddMetricContainer>
);
};
AddMetric.propTypes = {
added: React.PropTypes.bool.isRequired,
addedLabel: React.PropTypes.string.isRequired,
addLabel: React.PropTypes.string.isRequired,
description: React.PropTypes.string.isRequired,
link: React.PropTypes.string.isRequired,
linkLabel: React.PropTypes.string.isRequired,
onAddToggle: React.PropTypes.func.isRequired,
title: React.PropTypes.string.isRequired,
};
module.exports = AddMetric;

View File

@ -0,0 +1 @@
# `<AddMetric>`

View File

@ -1,6 +1,7 @@
module.exports = { module.exports = {
Avatar: require('./components/avatar'),
Base: require('./components/base'), Base: require('./components/base'),
AddMetric: require('./components/add-metric'),
Avatar: require('./components/avatar'),
Button: require('./components/button'), Button: require('./components/button'),
Checkbox: require('./components/checkbox'), Checkbox: require('./components/checkbox'),
Column: require('./components/column'), Column: require('./components/column'),

View File

@ -0,0 +1,36 @@
const React = require('react');
const transformPropsWith = require('transform-props-with');
const {
default: tx
} = transformPropsWith;
const Proxy = tx(props => {
const {
input,
meta,
...rest
} = props;
return {
...input,
...meta,
...rest
};
});
const isReduxForm = (props) =>
props.hasOwnProperty('input') || props.hasOwnProperty('meta');
module.exports = (Component) => {
const ProxiedComponent = Proxy(Component);
return (props) => {
return isReduxForm(props) ? (
<ProxiedComponent {...props} />
) : (
<Component {...props} />
);
};
};

View File

@ -1,7 +1,7 @@
const React = require('react'); const React = require('react');
const { const {
storiesOf, storiesOf,
// action, action,
// linkTo // linkTo
} = require('@kadira/storybook'); } = require('@kadira/storybook');
@ -12,6 +12,7 @@ const {
Checkbox, Checkbox,
Row, Row,
Column, Column,
AddMetric,
Avatar, Avatar,
Input, Input,
List: { List: {
@ -105,6 +106,43 @@ const profile =
'https://pbs.twimg.com/profile_images/' + 'https://pbs.twimg.com/profile_images/' +
'641289584580493312/VBfsPlff_400x400.jpg'; '641289584580493312/VBfsPlff_400x400.jpg';
storiesOf('Add Metric', module)
.add('Add Metric', () => (
<Base>
<Row>
<Column>
<AddMetric
addLabel='Add'
addedLabel='Added'
description='CPU usages accross all of the CPU cores.'
link='http://somelink.com'
linkLabel='Learn more'
onAddToggle={action('toggle-added')}
title='Aggregated CPU usage'
/>
</Column>
</Row>
</Base>
))
.add('Added Metric', () => (
<Base>
<Row>
<Column>
<AddMetric
addLabel='Add'
added
addedLabel='Added'
description='CPU usages accross all of the CPU cores.'
link='http://somelink.com'
linkLabel='Learn more'
onAddToggle={action('toggle-added')}
title='Aggregated CPU usage'
/>
</Column>
</Row>
</Base>
));
storiesOf('Avatar', module) storiesOf('Avatar', module)
.add('Avatar Picture', () => ( .add('Avatar Picture', () => (
<Avatar <Avatar

View File

@ -12,6 +12,12 @@ test('renders <Avatar> without exploding', (t) => {
t.deepEqual(wrapper.length, 1); t.deepEqual(wrapper.length, 1);
}); });
test('renders <AddMetric> without exploding', (t) => {
const AddMetric = require('../src/components/add-metric');
const wrapper = shallow(<AddMetric />);
t.deepEqual(wrapper.length, 1);
});
test('renders <Base> without exploding', (t) => { test('renders <Base> without exploding', (t) => {
const Base = require('../src/components/base'); const Base = require('../src/components/base');
const wrapper = shallow(<Base />); const wrapper = shallow(<Base />);