From 3e33f4bf6d3d30f221e0b37036f082dc597bae9b Mon Sep 17 00:00:00 2001 From: JUDIT GRESKOVITS Date: Mon, 9 Jan 2017 17:57:49 +0000 Subject: [PATCH] Add AddMetric component and redux-form-proxy --- ui/src/components/add-metric/index.js | 86 ++++++++++++++++++++++++++ ui/src/components/add-metric/readme.md | 1 + ui/src/index.js | 3 +- ui/src/shared/redux-form-proxy.js | 36 +++++++++++ ui/stories/index.js | 40 +++++++++++- ui/test/index.js | 6 ++ 6 files changed, 170 insertions(+), 2 deletions(-) create mode 100644 ui/src/components/add-metric/index.js create mode 100644 ui/src/components/add-metric/readme.md create mode 100644 ui/src/shared/redux-form-proxy.js diff --git a/ui/src/components/add-metric/index.js b/ui/src/components/add-metric/index.js new file mode 100644 index 00000000..eb2dd7fe --- /dev/null +++ b/ui/src/components/add-metric/index.js @@ -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 ( + + {title} + {description} + {linkLabel} + { added ? + {addedLabel} : + {addLabel} } + + ); +}; + +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; diff --git a/ui/src/components/add-metric/readme.md b/ui/src/components/add-metric/readme.md new file mode 100644 index 00000000..a079e0ce --- /dev/null +++ b/ui/src/components/add-metric/readme.md @@ -0,0 +1 @@ +# `` diff --git a/ui/src/index.js b/ui/src/index.js index 529aa3d7..77f90ebf 100644 --- a/ui/src/index.js +++ b/ui/src/index.js @@ -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'), diff --git a/ui/src/shared/redux-form-proxy.js b/ui/src/shared/redux-form-proxy.js new file mode 100644 index 00000000..469e6b55 --- /dev/null +++ b/ui/src/shared/redux-form-proxy.js @@ -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) ? ( + + ) : ( + + ); + }; +}; diff --git a/ui/stories/index.js b/ui/stories/index.js index 8341aee6..6c6db31e 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -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', () => ( + + + + + + + + )) + .add('Added Metric', () => ( + + + + + + + + )); + storiesOf('Avatar', module) .add('Avatar Picture', () => ( without exploding', (t) => { t.deepEqual(wrapper.length, 1); }); +test('renders without exploding', (t) => { + const AddMetric = require('../src/components/add-metric'); + const wrapper = shallow(); + t.deepEqual(wrapper.length, 1); +}); + test('renders without exploding', (t) => { const Base = require('../src/components/base'); const wrapper = shallow();