From 3e33f4bf6d3d30f221e0b37036f082dc597bae9b Mon Sep 17 00:00:00 2001 From: JUDIT GRESKOVITS Date: Mon, 9 Jan 2017 17:57:49 +0000 Subject: [PATCH 01/50] 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(); From 3ab2221ca39ff3a1f35b89913f8a3bd94052c612 Mon Sep 17 00:00:00 2001 From: JUDIT GRESKOVITS Date: Mon, 9 Jan 2017 18:11:01 +0000 Subject: [PATCH 02/50] Add AddMetric component and redux-form-proxy --- ui/package.json | 4 +++- ui/src/components/add-metric/index.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/ui/package.json b/ui/package.json index aeb3ac5a..be68609c 100644 --- a/ui/package.json +++ b/ui/package.json @@ -29,7 +29,8 @@ "react-dom": "^15.4.1", "react-select": "^1.0.0-rc.2", "reduce-css-calc": "^1.3.0", - "styled-components": "^1.2.1" + "styled-components": "^1.2.1", + "transform-props-with": "^2.1.0" }, "devDependencies": { "@kadira/storybook": "^2.35.2", @@ -51,6 +52,7 @@ "eslint-plugin-promise": "^3.4.0", "eslint-plugin-react": "^6.8.0", "eslint-plugin-standard": "^2.0.1", + "jsdom": "^9.9.1", "memory-fs": "^0.4.1", "nyc": "^10.0.0", "pre-commit": "^1.2.2", diff --git a/ui/src/components/add-metric/index.js b/ui/src/components/add-metric/index.js index eb2dd7fe..b5e9c371 100644 --- a/ui/src/components/add-metric/index.js +++ b/ui/src/components/add-metric/index.js @@ -73,9 +73,9 @@ const AddMetric = ({ }; AddMetric.propTypes = { + addLabel: React.PropTypes.string.isRequired, 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, From 5c52332f675abb80359da629e3d80866807e0027 Mon Sep 17 00:00:00 2001 From: JUDIT GRESKOVITS Date: Mon, 9 Jan 2017 18:18:32 +0000 Subject: [PATCH 03/50] Add AddMetric component and redux-form-proxy --- ui/yarn.lock | 301 +++++++++++++++++++++++++-------------------------- 1 file changed, 147 insertions(+), 154 deletions(-) diff --git a/ui/yarn.lock b/ui/yarn.lock index bb4f7068..9b0460cb 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1,5 +1,7 @@ # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. # yarn lockfile v1 + + "@kadira/react-split-pane@^1.4.0": version "1.4.7" resolved "https://registry.yarnpkg.com/@kadira/react-split-pane/-/react-split-pane-1.4.7.tgz#6d753d4a9fe62fe82056e323a6bcef7f026972b5" @@ -96,6 +98,13 @@ webpack-dev-middleware "^1.6.0" webpack-hot-middleware "^2.13.2" +JSONStream@^0.8.4: + version "0.8.4" + resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-0.8.4.tgz#91657dfe6ff857483066132b4618b62e8f4887bd" + dependencies: + jsonparse "0.0.5" + through ">=2.2.7 <3" + abab@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d" @@ -776,6 +785,14 @@ babel-plugin-transform-async-to-generator@^6.16.0, babel-plugin-transform-async- babel-plugin-syntax-async-functions "^6.8.0" babel-runtime "^6.0.0" +babel-plugin-transform-class-properties@6.16.0: + version "6.16.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.16.0.tgz#969bca24d34e401d214f36b8af5c1346859bc904" + dependencies: + babel-helper-function-name "^6.8.0" + babel-plugin-syntax-class-properties "^6.8.0" + babel-runtime "^6.9.1" + babel-plugin-transform-class-properties@^6.18.0: version "6.19.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.19.0.tgz#1274b349abaadc835164e2004f4a2444a2788d5f" @@ -785,14 +802,6 @@ babel-plugin-transform-class-properties@^6.18.0: babel-runtime "^6.9.1" babel-template "^6.15.0" -babel-plugin-transform-class-properties@6.16.0: - version "6.16.0" - resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.16.0.tgz#969bca24d34e401d214f36b8af5c1346859bc904" - dependencies: - babel-helper-function-name "^6.8.0" - babel-plugin-syntax-class-properties "^6.8.0" - babel-runtime "^6.9.1" - babel-plugin-transform-decorators@^6.13.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.13.0.tgz#82d65c1470ae83e2d13eebecb0a1c2476d62da9d" @@ -848,18 +857,18 @@ babel-plugin-transform-es2015-computed-properties@^6.3.13: babel-runtime "^6.0.0" babel-template "^6.8.0" -babel-plugin-transform-es2015-destructuring@^6.18.0, babel-plugin-transform-es2015-destructuring@^6.6.0, babel-plugin-transform-es2015-destructuring@^6.6.5: - version "6.19.0" - resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.19.0.tgz#ff1d911c4b3f4cab621bd66702a869acd1900533" - dependencies: - babel-runtime "^6.9.0" - babel-plugin-transform-es2015-destructuring@6.16.0: version "6.16.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.16.0.tgz#050fe0866f5d53b36062ee10cdf5bfe64f929627" dependencies: babel-runtime "^6.9.0" +babel-plugin-transform-es2015-destructuring@^6.18.0, babel-plugin-transform-es2015-destructuring@^6.6.0, babel-plugin-transform-es2015-destructuring@^6.6.5: + version "6.19.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.19.0.tgz#ff1d911c4b3f4cab621bd66702a869acd1900533" + dependencies: + babel-runtime "^6.9.0" + babel-plugin-transform-es2015-duplicate-keys@^6.6.0: version "6.8.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.8.0.tgz#fd8f7f7171fc108cc1c70c3164b9f15a81c25f7d" @@ -927,17 +936,6 @@ babel-plugin-transform-es2015-object-super@^6.3.13: babel-helper-replace-supers "^6.8.0" babel-runtime "^6.0.0" -babel-plugin-transform-es2015-parameters@^6.18.0, babel-plugin-transform-es2015-parameters@^6.6.0, babel-plugin-transform-es2015-parameters@^6.7.0: - version "6.21.0" - resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.21.0.tgz#46a655e6864ef984091448cdf024d87b60b2a7d8" - dependencies: - babel-helper-call-delegate "^6.18.0" - babel-helper-get-function-arity "^6.18.0" - babel-runtime "^6.9.0" - babel-template "^6.16.0" - babel-traverse "^6.21.0" - babel-types "^6.21.0" - babel-plugin-transform-es2015-parameters@6.17.0: version "6.17.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.17.0.tgz#e06d30cef897f46adb4734707bbe128a0d427d58" @@ -949,6 +947,17 @@ babel-plugin-transform-es2015-parameters@6.17.0: babel-traverse "^6.16.0" babel-types "^6.16.0" +babel-plugin-transform-es2015-parameters@^6.18.0, babel-plugin-transform-es2015-parameters@^6.6.0, babel-plugin-transform-es2015-parameters@^6.7.0: + version "6.21.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.21.0.tgz#46a655e6864ef984091448cdf024d87b60b2a7d8" + dependencies: + babel-helper-call-delegate "^6.18.0" + babel-helper-get-function-arity "^6.18.0" + babel-runtime "^6.9.0" + babel-template "^6.16.0" + babel-traverse "^6.21.0" + babel-types "^6.21.0" + babel-plugin-transform-es2015-shorthand-properties@^6.18.0, babel-plugin-transform-es2015-shorthand-properties@^6.3.13, babel-plugin-transform-es2015-shorthand-properties@^6.5.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.18.0.tgz#e2ede3b7df47bf980151926534d1dd0cbea58f43" @@ -1005,13 +1014,6 @@ babel-plugin-transform-flow-strip-types@^6.3.13: babel-plugin-syntax-flow "^6.18.0" babel-runtime "^6.0.0" -babel-plugin-transform-object-rest-spread@^6.16.0, babel-plugin-transform-object-rest-spread@^6.20.2: - version "6.20.2" - resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.20.2.tgz#e816c55bba77b14c16365d87e2ae48c8fd18fc2e" - dependencies: - babel-plugin-syntax-object-rest-spread "^6.8.0" - babel-runtime "^6.20.0" - babel-plugin-transform-object-rest-spread@6.16.0: version "6.16.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.16.0.tgz#db441d56fffc1999052fdebe2e2f25ebd28e36a9" @@ -1019,6 +1021,13 @@ babel-plugin-transform-object-rest-spread@6.16.0: babel-plugin-syntax-object-rest-spread "^6.8.0" babel-runtime "^6.0.0" +babel-plugin-transform-object-rest-spread@^6.16.0, babel-plugin-transform-object-rest-spread@^6.20.2: + version "6.20.2" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.20.2.tgz#e816c55bba77b14c16365d87e2ae48c8fd18fc2e" + dependencies: + babel-plugin-syntax-object-rest-spread "^6.8.0" + babel-runtime "^6.20.0" + babel-plugin-transform-react-constant-elements@6.9.1: version "6.9.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-constant-elements/-/babel-plugin-transform-react-constant-elements-6.9.1.tgz#125b86d96cb322e2139b607fd749ad5fbb17f005" @@ -1031,14 +1040,14 @@ babel-plugin-transform-react-display-name@^6.3.13: dependencies: babel-runtime "^6.0.0" -babel-plugin-transform-react-jsx-self@^6.11.0, babel-plugin-transform-react-jsx-self@6.11.0: +babel-plugin-transform-react-jsx-self@6.11.0, babel-plugin-transform-react-jsx-self@^6.11.0: version "6.11.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.11.0.tgz#605c9450c1429f97a930f7e1dfe3f0d9d0dbd0f4" dependencies: babel-plugin-syntax-jsx "^6.8.0" babel-runtime "^6.9.0" -babel-plugin-transform-react-jsx-source@^6.3.13, babel-plugin-transform-react-jsx-source@6.9.0: +babel-plugin-transform-react-jsx-source@6.9.0, babel-plugin-transform-react-jsx-source@^6.3.13: version "6.9.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.9.0.tgz#af684a05c2067a86e0957d4f343295ccf5dccf00" dependencies: @@ -1053,13 +1062,7 @@ babel-plugin-transform-react-jsx@^6.3.13: babel-plugin-syntax-jsx "^6.8.0" babel-runtime "^6.0.0" -babel-plugin-transform-regenerator@^6.16.0, babel-plugin-transform-regenerator@^6.6.0: - version "6.21.0" - resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.21.0.tgz#75d0c7e7f84f379358f508451c68a2c5fa5a9703" - dependencies: - regenerator-transform "0.9.8" - -babel-plugin-transform-regenerator@6.16.1: +babel-plugin-transform-regenerator@6.16.1, babel-plugin-transform-regenerator@^6.16.0, babel-plugin-transform-regenerator@^6.6.0: version "6.16.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.16.1.tgz#a75de6b048a14154aae14b0122756c5bed392f59" dependencies: @@ -1067,7 +1070,7 @@ babel-plugin-transform-regenerator@6.16.1: babel-types "^6.16.0" private "~0.1.5" -babel-plugin-transform-runtime@^6.15.0, babel-plugin-transform-runtime@6.15.0: +babel-plugin-transform-runtime@6.15.0, babel-plugin-transform-runtime@^6.15.0: version "6.15.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.15.0.tgz#3d75b4d949ad81af157570273846fb59aeb0d57c" dependencies: @@ -1202,7 +1205,7 @@ babel-preset-react-app@^1.0.0: babel-preset-react "6.16.0" babel-runtime "6.11.6" -babel-preset-react@^6.16.0, babel-preset-react@6.16.0: +babel-preset-react@6.16.0, babel-preset-react@^6.16.0: version "6.16.0" resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.16.0.tgz#aa117d60de0928607e343c4828906e4661824316" dependencies: @@ -1245,13 +1248,6 @@ babel-register@^6.18.0: mkdirp "^0.5.1" source-map-support "^0.4.2" -babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.5.0, babel-runtime@^6.9.0, babel-runtime@^6.9.1, babel-runtime@^6.9.2, babel-runtime@6.x.x: - version "6.20.0" - resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.20.0.tgz#87300bdcf4cd770f09bf0048c64204e17806d16f" - dependencies: - core-js "^2.4.0" - regenerator-runtime "^0.10.0" - babel-runtime@6.11.6: version "6.11.6" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.11.6.tgz#6db707fef2d49c49bfa3cb64efdb436b518b8222" @@ -1259,6 +1255,13 @@ babel-runtime@6.11.6: core-js "^2.4.0" regenerator-runtime "^0.9.5" +babel-runtime@6.x.x, babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.5.0, babel-runtime@^6.9.0, babel-runtime@^6.9.1, babel-runtime@^6.9.2: + version "6.20.0" + resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.20.0.tgz#87300bdcf4cd770f09bf0048c64204e17806d16f" + dependencies: + core-js "^2.4.0" + regenerator-runtime "^0.10.0" + babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.7.0, babel-template@^6.8.0: version "6.16.0" resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca" @@ -1283,7 +1286,7 @@ babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-tr invariant "^2.2.0" lodash "^4.2.0" -babel-types@^6.13.0, babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.20.0, babel-types@^6.21.0, babel-types@^6.7.2, babel-types@^6.8.0, babel-types@^6.9.0: +babel-types@^6.13.0, babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.20.0, babel-types@^6.21.0, babel-types@^6.7.2, babel-types@^6.8.0, babel-types@^6.9.0: version "6.21.0" resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.21.0.tgz#314b92168891ef6d3806b7f7a917fdf87c11a4b2" dependencies: @@ -1757,14 +1760,14 @@ colormin@^1.0.5: css-color-names "0.0.4" has "^1.0.1" -colors@~1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63" - colors@0.5.x: version "0.5.1" resolved "https://registry.yarnpkg.com/colors/-/colors-0.5.1.tgz#7d0023eaeb154e8ee9fce75dcb923d0ed1667774" +colors@~1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63" + combined-stream@^1.0.5, combined-stream@~1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009" @@ -2057,7 +2060,7 @@ csso@~2.2.1: clap "^1.0.9" source-map "^0.5.3" -"cssom@>= 0.3.0 < 0.4.0", cssom@0.3.x: +cssom@0.3.x, "cssom@>= 0.3.0 < 0.4.0": version "0.3.1" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.1.tgz#c9e37ef2490e64f6d1baa10fda852257082c25d3" @@ -2223,7 +2226,7 @@ doiuse@^2.4.1: through2 "^0.6.3" yargs "^3.5.4" -dom-serializer@~0.1.0, dom-serializer@0: +dom-serializer@0, dom-serializer@~0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82" dependencies: @@ -2234,7 +2237,7 @@ domain-browser@^1.1.1: version "1.1.7" resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc" -domelementtype@^1.3.0, domelementtype@1: +domelementtype@1, domelementtype@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2" @@ -2248,7 +2251,7 @@ domhandler@^2.3.0: dependencies: domelementtype "1" -domutils@^1.5.1, domutils@1.5.1: +domutils@1.5.1, domutils@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf" dependencies: @@ -2261,9 +2264,11 @@ dot-prop@^3.0.0: dependencies: is-obj "^1.0.0" -duplexer@~0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1" +duplexer2@0.0.2: + version "0.0.2" + resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db" + dependencies: + readable-stream "~1.1.9" duplexer2@^0.1.4: version "0.1.4" @@ -2271,11 +2276,9 @@ duplexer2@^0.1.4: dependencies: readable-stream "^2.0.2" -duplexer2@0.0.2: - version "0.0.2" - resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db" - dependencies: - readable-stream "~1.1.9" +duplexer@~0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1" eastasianwidth@^0.1.1: version "0.1.1" @@ -2415,7 +2418,7 @@ es6-shim@^0.35.1: version "0.35.2" resolved "https://registry.yarnpkg.com/es6-shim/-/es6-shim-0.35.2.tgz#45c5b3eb2f792ed28f130d826239be50affb897f" -es6-symbol@~3.1, es6-symbol@~3.1.0, es6-symbol@3: +es6-symbol@3, es6-symbol@~3.1, es6-symbol@~3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.0.tgz#94481c655e7a7cad82eba832d97d5433496d7ffa" dependencies: @@ -3084,7 +3087,7 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" -hoist-non-react-statics@^1.2.0, hoist-non-react-statics@1.x.x: +hoist-non-react-statics@1.x.x, hoist-non-react-statics@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" @@ -3152,14 +3155,14 @@ hyphenate-style-name@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b" -iconv-lite@^0.4.13, iconv-lite@~0.4.13: - version "0.4.15" - resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb" - iconv-lite@0.4.13: version "0.4.13" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2" +iconv-lite@^0.4.13, iconv-lite@~0.4.13: + version "0.4.15" + resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb" + icss-replace-symbols@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5" @@ -3205,7 +3208,7 @@ inflight@^1.0.4: once "^1.3.0" wrappy "1" -inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@2, inherits@2.0.3: +inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1: version "2.0.3" resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" @@ -3250,7 +3253,7 @@ interpret@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c" -invariant@^2.2.0, invariant@2.x.x: +invariant@2.x.x, invariant@^2.2.0: version "2.2.2" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" dependencies: @@ -3503,14 +3506,14 @@ is-utf8@^0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72" -isarray@^1.0.0, isarray@~1.0.0, isarray@1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" - isarray@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" +isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" + isexe@^1.1.1: version "1.1.2" resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0" @@ -3692,13 +3695,6 @@ jsonpointer@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9" -JSONStream@^0.8.4: - version "0.8.4" - resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-0.8.4.tgz#91657dfe6ff857483066132b4618b62e8f4887bd" - dependencies: - jsonparse "0.0.5" - through ">=2.2.7 <3" - jsprim@^1.2.2: version "1.3.1" resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.3.1.tgz#2a7256f70412a29ee3670aaca625994c4dcff252" @@ -3778,7 +3774,7 @@ load-json-file@^1.0.0, load-json-file@^1.1.0: pinkie-promise "^2.0.0" strip-bom "^2.0.0" -loader-utils@^0.2.11, loader-utils@^0.2.16, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5, loader-utils@0.2.x: +loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.16, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5: version "0.2.16" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d" dependencies: @@ -3911,14 +3907,14 @@ lodash.some@^4.4.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d" +lodash@4.x.x, lodash@^4.0.0, lodash@^4.1.0, lodash@^4.10.0, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0: + version "4.17.4" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" + lodash@^3.5.0: version "3.10.1" resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6" -lodash@^4.0.0, lodash@^4.1.0, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@4.x.x: - version "4.17.4" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" - log-symbols@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18" @@ -4082,29 +4078,29 @@ mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.13, mime-types@~2.1.7: dependencies: mime-db "~1.25.0" -mime@^1.3.4, mime@~1.3.4, mime@1.3.4: - version "1.3.4" - resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53" - mime@1.2.x: version "1.2.11" resolved "https://registry.yarnpkg.com/mime/-/mime-1.2.11.tgz#58203eed86e3a5ef17aed2b7d9ebd47f0a60dd10" -minimatch@^3.0.0, minimatch@^3.0.2, "minimatch@2 || 3": +mime@1.3.4, mime@^1.3.4, mime@~1.3.4: + version "1.3.4" + resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53" + +"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2: version "3.0.3" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774" dependencies: brace-expansion "^1.0.0" +minimist@0.0.8, minimist@~0.0.1: + version "0.0.8" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" + minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0, minimist@~1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" -minimist@~0.0.1, minimist@0.0.8: - version "0.0.8" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" - -mkdirp@^0.5.0, mkdirp@^0.5.1, "mkdirp@>=0.5 0", mkdirp@~0.5.0, mkdirp@~0.5.1: +"mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1: version "0.5.1" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903" dependencies: @@ -4118,14 +4114,14 @@ moment@^2.10.6: version "2.17.1" resolved "https://registry.yarnpkg.com/moment/-/moment-2.17.1.tgz#fed9506063f36b10f066c8b59a144d7faebe1d82" -ms@^0.7.1, ms@0.7.2: - version "0.7.2" - resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765" - ms@0.7.1: version "0.7.1" resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098" +ms@0.7.2, ms@^0.7.1: + version "0.7.2" + resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765" + multimatch@^2.0.0, multimatch@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-2.1.0.tgz#9c7906a22fb4c02919e2f5f75161b4cdbd4b2a2b" @@ -4155,7 +4151,7 @@ nearley@^2.7.7: railroad-diagrams "^1.0.0" randexp "^0.4.2" -negotiator@~0.6.1, negotiator@0.6.1: +negotiator@0.6.1, negotiator@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9" @@ -5064,26 +5060,26 @@ pseudomap@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3" -punycode@^1.2.4, punycode@^1.4.1: - version "1.4.1" - resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e" - punycode@1.3.2: version "1.3.2" resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d" +punycode@^1.2.4, punycode@^1.4.1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e" + q@^1.1.2: version "1.4.1" resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e" -qs@^6.1.0, qs@^6.2.0, qs@~6.3.0: - version "6.3.0" - resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442" - qs@6.2.0: version "6.2.0" resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.0.tgz#3b7848c03c2dece69a9522b0fae8c4126d745f3b" +qs@^6.1.0, qs@^6.2.0, qs@~6.3.0: + version "6.3.0" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442" + query-string@^4.1.0: version "4.2.3" resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.2.3.tgz#9f27273d207a25a8ee4c7b8c74dcd45d556db822" @@ -5095,7 +5091,7 @@ querystring-es3@^0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" -querystring@^0.2.0, querystring@0.2.0: +querystring@0.2.0, querystring@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620" @@ -5272,6 +5268,15 @@ read-pkg@^1.0.0: normalize-package-data "^2.3.2" path-type "^1.0.0" +"readable-stream@>=1.0.33-1 <1.1.0-0": + version "1.0.34" + resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c" + dependencies: + core-util-is "~1.0.0" + inherits "~2.0.1" + isarray "0.0.1" + string_decoder "~0.10.x" + readable-stream@^1.0.33, readable-stream@~1.1.9: version "1.1.14" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9" @@ -5293,15 +5298,6 @@ readable-stream@^2, readable-stream@^2.0.0, "readable-stream@^2.0.0 || ^1.1.13", string_decoder "~0.10.x" util-deprecate "~1.0.1" -"readable-stream@>=1.0.33-1 <1.1.0-0": - version "1.0.34" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c" - dependencies: - core-util-is "~1.0.0" - inherits "~2.0.1" - isarray "0.0.1" - string_decoder "~0.10.x" - readable-stream@~2.0.5: version "2.0.6" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e" @@ -5399,14 +5395,6 @@ regenerator-runtime@^0.9.5: version "0.9.6" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz#d33eb95d0d2001a4be39659707c51b0cb71ce029" -regenerator-transform@0.9.8: - version "0.9.8" - resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.8.tgz#0f88bb2bc03932ddb7b6b7312e68078f01026d6c" - dependencies: - babel-runtime "^6.18.0" - babel-types "^6.19.0" - private "^0.1.6" - regex-cache@^0.4.2: version "0.4.3" resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145" @@ -5549,7 +5537,7 @@ right-align@^0.1.1: dependencies: align-text "^0.1.1" -rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@^2.5.4, rimraf@~2.5.1, rimraf@~2.5.4, rimraf@2: +rimraf@2, rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@^2.5.4, rimraf@~2.5.1, rimraf@~2.5.4: version "2.5.4" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04" dependencies: @@ -5579,7 +5567,7 @@ semver-diff@^2.0.0: dependencies: semver "^5.0.3" -semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@~5.3.0, "semver@2 || 3 || 4 || 5": +"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@~5.3.0: version "5.3.0" resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f" @@ -5639,7 +5627,7 @@ sha.js@2.2.6: version "2.2.6" resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba" -shallowequal@^0.2.2, shallowequal@0.2.x: +shallowequal@0.2.x, shallowequal@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e" dependencies: @@ -5836,10 +5824,6 @@ strict-uri-encode@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" -string_decoder@^0.10.25, string_decoder@~0.10.x: - version "0.10.31" - resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94" - string-width@^1.0.1, string-width@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3" @@ -5871,6 +5855,10 @@ string.prototype.padstart@^3.0.0: es-abstract "^1.4.3" function-bind "^1.0.2" +string_decoder@^0.10.25, string_decoder@~0.10.x: + version "0.10.31" + resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94" + stringifier@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/stringifier/-/stringifier-1.3.0.tgz#def18342f6933db0f2dbfc9aa02175b448c17959" @@ -6146,10 +6134,6 @@ the-argv@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/the-argv/-/the-argv-1.0.0.tgz#0084705005730dd84db755253c931ae398db9522" -through@^2.3.6, "through@>=2.2.7 <3", through@~2.3.4: - version "2.3.8" - resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" - through2@^0.6.1, through2@^0.6.3, through2@~0.6.1: version "0.6.5" resolved "https://registry.yarnpkg.com/through2/-/through2-0.6.5.tgz#41ab9c67b29d57209071410e1d7a7a968cd3ad48" @@ -6164,6 +6148,10 @@ through2@^2.0.0, through2@~2.0.0: readable-stream "^2.1.5" xtend "~4.0.1" +"through@>=2.2.7 <3", through@^2.3.6, through@~2.3.4: + version "2.3.8" + resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" + time-require@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/time-require/-/time-require-0.1.2.tgz#f9e12cb370fc2605e11404582ba54ef5ca2b2d98" @@ -6210,6 +6198,12 @@ tr46@~0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" +transform-props-with@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/transform-props-with/-/transform-props-with-2.1.0.tgz#845fdbc7771689a500dec95bbdd39ecd20639f76" + dependencies: + lodash "^4.10.0" + traverse@^0.6.6: version "0.6.6" resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137" @@ -6365,7 +6359,7 @@ util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" -util@^0.10.3, util@0.10.3: +util@0.10.3, util@^0.10.3: version "0.10.3" resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9" dependencies: @@ -6498,7 +6492,7 @@ which-module@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f" -which@^1.2.4, which@^1.2.9, which@1.2.x: +which@1.2.x, which@^1.2.4, which@^1.2.9: version "1.2.12" resolved "https://registry.yarnpkg.com/which/-/which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192" dependencies: @@ -6516,13 +6510,17 @@ widest-line@^1.0.0: dependencies: string-width "^1.0.1" +window-size@0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d" + window-size@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876" -window-size@0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d" +wordwrap@0.0.2: + version "0.0.2" + resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f" wordwrap@~0.0.2: version "0.0.3" @@ -6532,10 +6530,6 @@ wordwrap@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" -wordwrap@0.0.2: - version "0.0.2" - resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f" - wrap-ansi@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85" @@ -6599,7 +6593,7 @@ xmlbuilder@~4.1.0: dependencies: lodash "^3.5.0" -xtend@^4.0.0, "xtend@>=4.0.0 <4.1.0-0", xtend@~4.0.0, xtend@~4.0.1: +"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af" @@ -6659,4 +6653,3 @@ yargs@~3.10.0: cliui "^2.1.0" decamelize "^1.0.0" window-size "0.1.0" - From 0b8b1ee379d1175a400cc3bf60a08c59ae5f729d Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 9 Jan 2017 16:45:18 +0000 Subject: [PATCH 04/50] updating toggle ui component --- ui/src/components/toggle/index-old.js | 136 ++++++++++++++++++++++ ui/src/components/toggle/index.js | 159 ++++++++++++++------------ ui/src/components/toggle/readme.md | 6 +- ui/stories/index.js | 19 +-- 4 files changed, 242 insertions(+), 78 deletions(-) create mode 100644 ui/src/components/toggle/index-old.js diff --git a/ui/src/components/toggle/index-old.js b/ui/src/components/toggle/index-old.js new file mode 100644 index 00000000..559ccd5d --- /dev/null +++ b/ui/src/components/toggle/index-old.js @@ -0,0 +1,136 @@ +const constants = require('../../shared/constants'); +const composers = require('../../shared/composers'); +const fns = require('../../shared/functions'); +const React = require('react'); +const Styled = require('styled-components'); + +const { + boxes, + colors, + typography +} = constants; + +const { + pseudoEl +} = composers; + +const { + remcalc, + rndId +} = fns; + +const { + default: styled +} = Styled; + +const classNames = { + label: rndId() +}; + +const StyledLabel = styled.label` + border-radius: ${boxes.borderRadius}; + color: #464646; + height: 2.5rem; + width: ${remcalc(110)}; +`; + +const StyledToggleLabel = styled.div` + background-color: #E6E6E6; + border: solid 1px #D8D8D8; + border-radius: ${boxes.borderRadius}; + color: #000000; + height: ${remcalc(54)}; + margin: 0.125rem; + padding-left: ${remcalc(12)}; + position: relative; + text-align: right; + width: ${remcalc(106)}; + + &::before { + content: "${props => props.labelRight}"; + font-family: ${typography.fontPrimary}; + font-size: inherit; + font-weight: bold; + position: absolute; + right: 24px; + top: 19px; + } + + &::after { + content: "${props => props.labelLeft}"; + background-color: #FFFFFF; + border-radius: ${boxes.borderRadius}; + height: ${remcalc(46)}; + width: ${remcalc(46)}; + + ${pseudoEl({ + top: '3px', + left: '3px', + })} + } +`; + +const StyledInput = styled.input` + display: none; + + &:checked { + & + .${classNames.label} { + background: ${colors.confirmation}; + border: ${boxes.border.confirmed}; + color: #FFFFFF; + padding-left: 0; + padding-right: ${remcalc(12)}; + text-align: left; + + &::before { + content: "${props => props.labelLeft}"; + + left: 20px; + right: auto; + } + + &::after { + left: auto; + right: 3px; + } + } + } +`; + +const Toggle = ({ + checked, + className, + defaultChecked, + labelLeft = "On", + labelRight = "Off", + id = rndId(), + style +}) => { + return ( + + + + + ); +}; + +Toggle.propTypes = { + checked: React.PropTypes.bool, + className: React.PropTypes.string, + defaultChecked: React.PropTypes.bool, + id: React.PropTypes.string, + style: React.PropTypes.object +}; + +module.exports = Toggle; diff --git a/ui/src/components/toggle/index.js b/ui/src/components/toggle/index.js index 28f69630..50bb449d 100644 --- a/ui/src/components/toggle/index.js +++ b/ui/src/components/toggle/index.js @@ -11,7 +11,8 @@ const { } = constants; const { - pseudoEl + pseudoEl, + baseBox } = composers; const { @@ -20,100 +21,118 @@ const { } = fns; const { - default: styled + default: styled, + keyframes } = Styled; const classNames = { label: rndId() }; -const StyledLabel = styled.label` - border-radius: ${boxes.borderRadius}; - color: #464646; - height: 2.5rem; - width: ${remcalc(110)}; +const slide = ( + direction = 'left' +) => { + keyframes` + from { + left: 0; + } + + to { + left: 100%; + } + `; +} + +const backgroundGradient = (index) => { + const colorDefault = index === 1 ? 'red' : 'blue'; + const colorAlt = index === 1 ? 'blue' : 'red'; + debugger + return css` + background: linear-gradient(to right, ${colorDefault} 50%, ${colorAlt} 50%); + `; +} + + +const StyledText = styled.span` + padding: 1rem; + display: inline-block; `; -const StyledToggleLabel = styled.div` - background-color: #E6E6E6; - border: solid 1px #D8D8D8; - border-radius: ${boxes.borderRadius}; - color: #000000; - height: ${remcalc(54)}; - margin: 0.125rem; - padding-left: ${remcalc(12)}; - position: relative; - text-align: right; - width: ${remcalc(106)}; - - &::before { - content: "Off"; - font-family: ${typography.fontPrimary}; - font-size: inherit; - font-weight: bold; - position: absolute; - right: 24px; - top: 19px; - } - - &::after { - background-color: #FFFFFF; - border-radius: ${boxes.borderRadius}; - height: ${remcalc(46)}; - width: ${remcalc(46)}; - - ${pseudoEl({ - top: '3px', - left: '3px', - })} - } +const StyledDiv = styled.div` + display: inline-block; + background-color: ${colors.brandInactive}; + animation: ${slide} 0.5s forwards; + + ${baseBox()} `; -const StyledInput = styled.input` + +const StyledInput_1 = styled.input` display: none; + & + span { + background: #ff3232; + background: linear-gradient(to right, red 50%, blue 50%); + background-size: 200% 100%; + background-position:left bottom; + transition:all .5s ease; + } + &:checked { - & + .${classNames.label} { - background: ${colors.confirmation}; - border: ${boxes.border.confirmed}; - color: #FFFFFF; - padding-left: 0; - padding-right: ${remcalc(12)}; - text-align: left; - - &::before { - content: "On"; - left: 20px; - right: auto; - } - - &::after { - left: auto; - right: 3px; - } + + + & + span { + background-position: right bottom; } } `; +const StyledInput_2 = styled.input` + display: none; + + & + span { + background: #ff3232; + background: linear-gradient(to right, blue 50%, red 50%); + background-size: 200% 100%; + background-position:right bottom; + transition:all .5s ease; + } + + &:checked { + + + & + span { + background-position: left bottom; + } + } +`; + +const StyledLabel = styled.label` +`; + + const Toggle = ({ checked, className, defaultChecked, + options = [ + "On", + "Off" + ], id = rndId(), style }) => { return ( - - - - + + + + {options[0]} + + + + {options[1]} + + ); }; diff --git a/ui/src/components/toggle/readme.md b/ui/src/components/toggle/readme.md index ef30ac9c..a6e55ccd 100644 --- a/ui/src/components/toggle/readme.md +++ b/ui/src/components/toggle/readme.md @@ -16,7 +16,11 @@ nmodule.exports = ReactDOM.renderToString( - + diff --git a/ui/stories/index.js b/ui/stories/index.js index 6c6db31e..25723fc7 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -333,17 +333,22 @@ storiesOf('Tabs', module) )); storiesOf('Toggle', module) - .add('checked', () => ( + .add('default', () => ( )) - .add('unchecked', () => ( - - )) - .add('defaultChecked', () => ( - + .add('checked', () => ( + )) .add('no props', () => ( - + )); storiesOf('Tooltip', module) From 98933873c13c13b06cef7ee53a1bec9cf12b65de Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 9 Jan 2017 18:04:56 +0000 Subject: [PATCH 05/50] refactoring toggle component --- ui/src/components/toggle/index-old.js | 136 -------------------------- ui/src/components/toggle/index.js | 125 ++++++++++++----------- ui/stories/index.js | 18 ++-- 3 files changed, 79 insertions(+), 200 deletions(-) delete mode 100644 ui/src/components/toggle/index-old.js diff --git a/ui/src/components/toggle/index-old.js b/ui/src/components/toggle/index-old.js deleted file mode 100644 index 559ccd5d..00000000 --- a/ui/src/components/toggle/index-old.js +++ /dev/null @@ -1,136 +0,0 @@ -const constants = require('../../shared/constants'); -const composers = require('../../shared/composers'); -const fns = require('../../shared/functions'); -const React = require('react'); -const Styled = require('styled-components'); - -const { - boxes, - colors, - typography -} = constants; - -const { - pseudoEl -} = composers; - -const { - remcalc, - rndId -} = fns; - -const { - default: styled -} = Styled; - -const classNames = { - label: rndId() -}; - -const StyledLabel = styled.label` - border-radius: ${boxes.borderRadius}; - color: #464646; - height: 2.5rem; - width: ${remcalc(110)}; -`; - -const StyledToggleLabel = styled.div` - background-color: #E6E6E6; - border: solid 1px #D8D8D8; - border-radius: ${boxes.borderRadius}; - color: #000000; - height: ${remcalc(54)}; - margin: 0.125rem; - padding-left: ${remcalc(12)}; - position: relative; - text-align: right; - width: ${remcalc(106)}; - - &::before { - content: "${props => props.labelRight}"; - font-family: ${typography.fontPrimary}; - font-size: inherit; - font-weight: bold; - position: absolute; - right: 24px; - top: 19px; - } - - &::after { - content: "${props => props.labelLeft}"; - background-color: #FFFFFF; - border-radius: ${boxes.borderRadius}; - height: ${remcalc(46)}; - width: ${remcalc(46)}; - - ${pseudoEl({ - top: '3px', - left: '3px', - })} - } -`; - -const StyledInput = styled.input` - display: none; - - &:checked { - & + .${classNames.label} { - background: ${colors.confirmation}; - border: ${boxes.border.confirmed}; - color: #FFFFFF; - padding-left: 0; - padding-right: ${remcalc(12)}; - text-align: left; - - &::before { - content: "${props => props.labelLeft}"; - - left: 20px; - right: auto; - } - - &::after { - left: auto; - right: 3px; - } - } - } -`; - -const Toggle = ({ - checked, - className, - defaultChecked, - labelLeft = "On", - labelRight = "Off", - id = rndId(), - style -}) => { - return ( - - - - - ); -}; - -Toggle.propTypes = { - checked: React.PropTypes.bool, - className: React.PropTypes.string, - defaultChecked: React.PropTypes.bool, - id: React.PropTypes.string, - style: React.PropTypes.object -}; - -module.exports = Toggle; diff --git a/ui/src/components/toggle/index.js b/ui/src/components/toggle/index.js index 50bb449d..4a0a4abe 100644 --- a/ui/src/components/toggle/index.js +++ b/ui/src/components/toggle/index.js @@ -5,13 +5,10 @@ const React = require('react'); const Styled = require('styled-components'); const { - boxes, - colors, - typography + colors } = constants; const { - pseudoEl, baseBox } = composers; @@ -22,36 +19,22 @@ const { const { default: styled, - keyframes + css } = Styled; -const classNames = { - label: rndId() -}; - -const slide = ( - direction = 'left' -) => { - keyframes` - from { - left: 0; - } - - to { - left: 100%; - } - `; -} - +/* const backgroundGradient = (index) => { const colorDefault = index === 1 ? 'red' : 'blue'; const colorAlt = index === 1 ? 'blue' : 'red'; - debugger + // debugger return css` - background: linear-gradient(to right, ${colorDefault} 50%, ${colorAlt} 50%); + // background: linear-gradient(to right, + ${colorDefault} 50%, + ${colorAlt} 50%); + background: linear-gradient(to right, red 50%, blue 50%); `; -} - +}; +*/ const StyledText = styled.span` padding: 1rem; @@ -61,77 +44,104 @@ const StyledText = styled.span` const StyledDiv = styled.div` display: inline-block; background-color: ${colors.brandInactive}; - animation: ${slide} 0.5s forwards; ${baseBox()} `; +const inputStyled = css` + background-size: 200% 100%; + transition:all .5s ease; + min-width: ${remcalc(120)}; + text-align: center; +`; -const StyledInput_1 = styled.input` + +const StyledInput0 = styled.input` display: none; & + span { - background: #ff3232; - background: linear-gradient(to right, red 50%, blue 50%); - background-size: 200% 100%; - background-position:left bottom; - transition:all .5s ease; + background: linear-gradient(to right, + transparent 50%, + ${colors.brandSecondary} 50%); + background-position: left bottom; + + ${inputStyled} } &:checked { - & + span { background-position: right bottom; } } `; -const StyledInput_2 = styled.input` +const StyledInput1 = styled.input` display: none; - & + span { - background: #ff3232; - background: linear-gradient(to right, blue 50%, red 50%); - background-size: 200% 100%; - background-position:right bottom; - transition:all .5s ease; + & + span { + background: linear-gradient(to right, + ${colors.brandSecondary} 50%, + transparent 50%); + background-position: right bottom; + + ${inputStyled} } &:checked { - & + span { background-position: left bottom; } } `; -const StyledLabel = styled.label` -`; - - const Toggle = ({ checked, className, defaultChecked, options = [ - "On", - "Off" + { + label: 'On', + checked: true + }, + { + label: 'Off', + checked: false + } ], id = rndId(), style }) => { return ( - - - {options[0]} - - - - {options[1]} - + {options.map( (option, index) => { + + if ( index > 2 ) return; + + const customProps = { + defaultChecked: option.checked, + name: 'toggler', + type: 'radio', + value: option.label, + id: rndId() + }; + + const InputVarients = { + input_0: (), + input_1: () + }; + + return ( + + ); + })} ); }; @@ -141,6 +151,7 @@ Toggle.propTypes = { className: React.PropTypes.string, defaultChecked: React.PropTypes.bool, id: React.PropTypes.string, + options: React.PropTypes.array, style: React.PropTypes.object }; diff --git a/ui/stories/index.js b/ui/stories/index.js index 25723fc7..a4665e19 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -339,16 +339,20 @@ storiesOf('Toggle', module) .add('checked', () => ( )) .add('no props', () => ( - + )); storiesOf('Tooltip', module) From 7b73e822379772fc4a85d3c12b7a28fafe8c0a46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Mon, 9 Jan 2017 18:58:30 +0000 Subject: [PATCH 06/50] headed list item ui component --- ui/src/components/list/collapsed.js | 18 -------- ui/src/components/list/description.js | 4 +- ui/src/components/list/header.js | 55 ++++++++++++++++++++++ ui/src/components/list/index.js | 11 +++-- ui/src/components/list/item.js | 20 ++++++-- ui/src/components/list/meta.js | 39 ++++++++++------ ui/src/components/list/options.js | 26 ++++++++--- ui/src/components/list/outlet.js | 38 ++++++++------- ui/src/components/list/subtitle.js | 18 ++++++-- ui/src/components/list/title.js | 6 ++- ui/src/components/list/transfer-props.js | 29 ++++++++++++ ui/src/components/list/view.js | 23 ++++++++- ui/src/shared/constants/boxes.js | 1 + ui/stories/index.js | 59 ++++++++++++++++++++++-- 14 files changed, 272 insertions(+), 75 deletions(-) delete mode 100644 ui/src/components/list/collapsed.js create mode 100644 ui/src/components/list/header.js create mode 100644 ui/src/components/list/transfer-props.js diff --git a/ui/src/components/list/collapsed.js b/ui/src/components/list/collapsed.js deleted file mode 100644 index c5824212..00000000 --- a/ui/src/components/list/collapsed.js +++ /dev/null @@ -1,18 +0,0 @@ -const React = require('react'); - -module.exports = (Component) => (props) => { - // eslint-disable-next-line react/prop-types - const _children = React.Children.map(props.children, (c) => { - return React.cloneElement(c, { - ...c.props, - // eslint-disable-next-line react/prop-types - collapsed: props.collapsed - }); - }); - - return ( - - {_children} - - ); -}; diff --git a/ui/src/components/list/description.js b/ui/src/components/list/description.js index 35ba6cf8..80240ff2 100644 --- a/ui/src/components/list/description.js +++ b/ui/src/components/list/description.js @@ -1,6 +1,6 @@ -const Title = require('./title'); -const Styled = require('styled-components'); const React = require('react'); +const Styled = require('styled-components'); +const Title = require('./title'); const { default: styled diff --git a/ui/src/components/list/header.js b/ui/src/components/list/header.js new file mode 100644 index 00000000..3d022475 --- /dev/null +++ b/ui/src/components/list/header.js @@ -0,0 +1,55 @@ +const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); +const Item = require('./item'); +const React = require('react'); +const Styled = require('styled-components'); + +const { + colors +} = constants; + +const { + remcalc +} = fns; + +const { + default: styled +} = Styled; + +const StyledItem = styled(Item)` + position: absolute; + + background-color: ${colors.brandPrimary}; + border: solid 1px ${colors.borderPrimary}; + box-shadow: none; + + width: calc(100% + ${remcalc(2)}); + margin: 0; + + top: ${remcalc(-1)}; + left: ${remcalc(-1)}; + right: ${remcalc(-1)}; +`; + +const addFromHeader = (children) => React.Children.map(children, (c) => { + return React.cloneElement(c, { + ...c.props, + fromHeader: true + }); +}); + +const Header = (props) => ( + + {addFromHeader(props.children)} + +); + +Header.propTypes = { + children: React.PropTypes.node +}; + +module.exports = Header; diff --git a/ui/src/components/list/index.js b/ui/src/components/list/index.js index 0d79549b..cfb4ab13 100644 --- a/ui/src/components/list/index.js +++ b/ui/src/components/list/index.js @@ -1,10 +1,11 @@ module.exports = { - ListItem: require('./item'), - ListItemView: require('./view'), - ListItemTitle: require('./title'), - ListItemSubTitle: require('./subtitle'), ListItemDescription: require('./description'), + ListItemHeader: require('./header'), + ListItem: require('./item'), ListItemMeta: require('./meta'), + ListItemOptions: require('./options'), ListItemOutlet: require('./outlet'), - ListItemOptions: require('./options') + ListItemSubTitle: require('./subtitle'), + ListItemTitle: require('./title'), + ListItemView: require('./view') }; diff --git a/ui/src/components/list/item.js b/ui/src/components/list/item.js index e6c11391..bf6670f5 100644 --- a/ui/src/components/list/item.js +++ b/ui/src/components/list/item.js @@ -1,9 +1,9 @@ -const Collapsed = require('./collapsed'); const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); const React = require('react'); const Row = require('../row'); const Styled = require('styled-components'); +const transferProps = require('./transfer-props'); const { boxes, @@ -18,16 +18,28 @@ const { default: styled } = Styled; -const height = (props) => props.collapsed ? remcalc(48) : remcalc(126); +const height = (props) => props.collapsed + ? remcalc(48) + : remcalc(126); + +const shadow = (props) => props.collapsed && props.headed + ? boxes.bottomShaddowDarker + : boxes.bottomShaddow; const Item = styled(Row)` + position: relative; + height: ${height} - box-shadow: ${boxes.bottomShaddow}; + box-shadow: ${shadow}; border: 1px solid ${colors.borderSecondary}; background-color: ${colors.brandSecondary}; + margin-bottom: ${remcalc(10)}; `; -module.exports = Collapsed((props) => ( +module.exports = transferProps([ + 'collapsed', + 'headed' +], (props) => ( {props.children} diff --git a/ui/src/components/list/meta.js b/ui/src/components/list/meta.js index 1a2bfda6..df41aa5b 100644 --- a/ui/src/components/list/meta.js +++ b/ui/src/components/list/meta.js @@ -1,8 +1,9 @@ -const Collapsed = require('./collapsed'); const Column = require('../column'); -const Styled = require('styled-components'); const React = require('react'); const Row = require('../row'); +const Styled = require('styled-components'); +const transferProps = require('./transfer-props'); +const View = require('./view'); const { default: styled @@ -14,14 +15,26 @@ const InnerRow = styled(Row)` height: 100%; `; -module.exports = Collapsed((props) => ( - - - {props.children} - - -)); +module.exports = transferProps([ + 'collapsed', + 'headed', + 'fromHeader' +], (props) => { + const meta = ( + + + {props.children} + + + ); + + return !props.fromHeader ? meta : ( + + {meta} + + ); +}); diff --git a/ui/src/components/list/options.js b/ui/src/components/list/options.js index a04c3303..6f8f0f90 100644 --- a/ui/src/components/list/options.js +++ b/ui/src/components/list/options.js @@ -2,6 +2,7 @@ const Button = require('../button'); const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); const React = require('react'); +const transferProps = require('./transfer-props'); const Styled = require('styled-components'); const { @@ -16,11 +17,17 @@ const { default: styled } = Styled; -const height = (props) => props.collapsed ? remcalc(46) : remcalc(124); +const height = (props) => props.collapsed + ? remcalc(46) + : remcalc(124); + +const borderLeftColor = (props) => !props.fromHeader + ? colors.borderSecondary + : colors.borderPrimary; const Nav = styled.nav` flex: 0 0 ${remcalc(47)}; - border-left: 1px solid ${colors.borderSecondary}; + border-left: 1px solid ${borderLeftColor}; `; const StyledButton = styled(Button)` @@ -44,17 +51,24 @@ const StyledButton = styled(Button)` } `; -const Options = (props) => ( -