mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
Add AddMetric component and redux-form-proxy
This commit is contained in:
parent
77ac03962e
commit
3e33f4bf6d
86
ui/src/components/add-metric/index.js
Normal file
86
ui/src/components/add-metric/index.js
Normal 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;
|
1
ui/src/components/add-metric/readme.md
Normal file
1
ui/src/components/add-metric/readme.md
Normal file
@ -0,0 +1 @@
|
||||
# `<AddMetric>`
|
@ -1,6 +1,7 @@
|
||||
module.exports = {
|
||||
Avatar: require('./components/avatar'),
|
||||
Base: require('./components/base'),
|
||||
AddMetric: require('./components/add-metric'),
|
||||
Avatar: require('./components/avatar'),
|
||||
Button: require('./components/button'),
|
||||
Checkbox: require('./components/checkbox'),
|
||||
Column: require('./components/column'),
|
||||
|
36
ui/src/shared/redux-form-proxy.js
Normal file
36
ui/src/shared/redux-form-proxy.js
Normal 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} />
|
||||
);
|
||||
};
|
||||
};
|
@ -1,7 +1,7 @@
|
||||
const React = require('react');
|
||||
const {
|
||||
storiesOf,
|
||||
// action,
|
||||
action,
|
||||
// linkTo
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
@ -12,6 +12,7 @@ const {
|
||||
Checkbox,
|
||||
Row,
|
||||
Column,
|
||||
AddMetric,
|
||||
Avatar,
|
||||
Input,
|
||||
List: {
|
||||
@ -105,6 +106,43 @@ const profile =
|
||||
'https://pbs.twimg.com/profile_images/' +
|
||||
'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)
|
||||
.add('Avatar Picture', () => (
|
||||
<Avatar
|
||||
|
@ -12,6 +12,12 @@ test('renders <Avatar> without exploding', (t) => {
|
||||
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) => {
|
||||
const Base = require('../src/components/base');
|
||||
const wrapper = shallow(<Base />);
|
||||
|
Loading…
Reference in New Issue
Block a user