@jouwomgeving/ui-button - npm Package Compare versions

Comparing version 0.0.2-alpha.9f8ca493 to 0.0.2-alpha.a1026d9e

es/Button/index.js

 import React, { PropTypes } from 'react';
-import classnames from 'classnames/bind';
+import get from 'lodash/fp/get';
+import styled from 'styled-components';
 
-const styles = {
-  'Button': 'styles__Button___25D3l',
-  'Button-content': 'styles__Button-content___asVnw',
-  'disabled': 'styles__disabled___3PoLx',
-  'Button-prefix': 'styles__Button-prefix___2euxs',
-  'Button-suffix': 'styles__Button-suffix___2gXk2',
-  'primary': 'styles__primary___2056t',
-  'secondary': 'styles__secondary___2Z3NI',
-  'Group': 'styles__Group___3t-Hw',
-  'Group-item': 'styles__Group-item___xJZUV',
-  'horizontal': 'styles__horizontal___1pcjx',
-  'vertical': 'styles__vertical___3Brjx',
-  'Close': 'styles__Close___3VI-x'
-};
+function getBackground({ buttonType, state, theme }) {
+  return get(`button.button.${buttonType}.${state}.gradient`, theme);
+}
 
-const cx = classnames.bind(styles);
+function getBorderColor({ buttonType, state, theme }) {
+  return get(`button.button.${buttonType}.${state}.border`, theme);
+}
 
-const Button = ({ type, children, disabled, onClick }) => React.createElement(
-  'button',
-  {
-    role: 'button',
-    onClick: onClick,
-    disabled: disabled,
-    className: cx('Button', type, { disabled })
-  },
-  children
-);
+function getColor({ buttonType, state, theme }) {
+  return get(`button.button.${buttonType}.${state}.color`, theme);
+}
 
-Button.propTypes = {
-  type: PropTypes.oneOf(['primary', 'secondary', 'success', 'error']).isRequired,
-  children: PropTypes.array,
+function getActiveBackground({ buttonType, theme }) {
+  return get(`button.button.${buttonType}.active.gradient`, theme);
+}
+
+function getActiveBorderColor({ buttonType, theme }) {
+  return get(`button.button.${buttonType}.active.border`, theme);
+}
+function getActiveColor({ buttonType, theme }) {
+  return get(`button.button.${buttonType}.active.color`, theme);
+}
+
+function getPadding({ size }) {
+  if (size === 'medium') return '0 0.5rem';
+  if (size === 'large') return '0 0.625rem';
+}
+
+function getHeight({ size }) {
+  if (size === 'medium') return '2.1875rem';
+  if (size === 'large') return '3.125rem';
+}
+
+const Button = styled.button`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  font-weight: 600;
+  background: ${getBackground};
+  border-color: ${getBorderColor};
+  font-size: ${get('theme.typography.size.normal')};
+  cursor: pointer;
+  padding: ${getPadding};
+  height: ${getHeight};
+  border-radius: 0.1875rem;
+  white-space: nowrap;
+  min-height: 2.1875rem;
+  box-sizing: border-box;
+  border-width: 0.0625rem;
+  border-style: solid;
+  box-shadow: 0 0.0625rem 0.0625rem rgba(198, 195, 150, 0.25);
+  color: ${getColor};
+
+  &:active {
+    background: ${getActiveBackground};
+    border-color: ${getActiveBorderColor};
+    color: ${getActiveColor};
+  }
+
+  &:hover {
+    box-shadow: none;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+`;
+
+function Component({ state, children, disabled, onClick, size, submit, type }) {
+  return React.createElement(
+    Button,
+    {
+      buttonType: type,
+      disabled: disabled,
+      onClick: onClick,
+      size: size,
+      state: state,
+      type: submit ? 'submit' : 'button'
+    },
+    children
+  );
+}
+
+Component.displayName = 'Button';
+Component.styledComponentId = Button.styledComponentId;
+
+Component.propTypes = {
+  children: PropTypes.any,
+  disabled: PropTypes.bool,
   label: PropTypes.string,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  size: PropTypes.oneOf('medium', 'large'),
+  state: PropTypes.oneOf(['default', 'active']),
+  submit: PropTypes.bool,
+  type: PropTypes.oneOf(['primary', 'secondary', 'approve', 'decline']).isRequired
 };
 
-Button.defaultProps = {
-  type: 'primary',
-  disabled: false
+Component.defaultProps = {
+  active: false,
+  disabled: false,
+  size: 'medium',
+  state: 'default',
+  submit: false,
+  type: 'primary'
 };
 
-export default Button;
+export default Component;

es/Close/index.js

 import React, { PropTypes } from 'react';
-import classnames from 'classnames/bind';
+import styled from 'styled-components';
 
 import FaClose from '@jouwomgeving/ui-icon/es/FontAwesome/FaClose';
 
-const styles = {
-  'Button': 'styles__Button___25D3l',
-  'Button-content': 'styles__Button-content___asVnw',
-  'disabled': 'styles__disabled___3PoLx',
-  'Button-prefix': 'styles__Button-prefix___2euxs',
-  'Button-suffix': 'styles__Button-suffix___2gXk2',
-  'primary': 'styles__primary___2056t',
-  'secondary': 'styles__secondary___2Z3NI',
-  'Group': 'styles__Group___3t-Hw',
-  'Group-item': 'styles__Group-item___xJZUV',
-  'horizontal': 'styles__horizontal___1pcjx',
-  'vertical': 'styles__vertical___3Brjx',
-  'Close': 'styles__Close___3VI-x'
-};
+const Button = styled.button`
+  cursor: pointer;
+  border: none;
+  padding: 5px;
+  background: transparent;
+`;
 
-const cx = classnames.bind(styles);
-
-function Close(props) {
+function Close({ color, onClick }) {
   return React.createElement(
-    'button',
-    {
-      className: cx('Close'),
-      onClick: props.onClick
-    },
-    React.createElement(FaClose, {
-      color: props.color,
-      size: 12
-    })
+    Button,
+    { onClick: onClick },
+    React.createElement(FaClose, { color: color, size: '0.75rem' })
   );
@@ -35,0 +19,0 @@ }

es/Group/index.js

 import React, { PropTypes } from 'react';
+import styled from 'styled-components';
 
-import classnames from 'classnames/bind';
+import Button from '@jouwomgeving/ui-button/es/Button';
 
-const styles = {
-  'Button': 'styles__Button___25D3l',
-  'Button-content': 'styles__Button-content___asVnw',
-  'disabled': 'styles__disabled___3PoLx',
-  'Button-prefix': 'styles__Button-prefix___2euxs',
-  'Button-suffix': 'styles__Button-suffix___2gXk2',
-  'primary': 'styles__primary___2056t',
-  'secondary': 'styles__secondary___2Z3NI',
-  'Group': 'styles__Group___3t-Hw',
-  'Group-item': 'styles__Group-item___xJZUV',
-  'horizontal': 'styles__horizontal___1pcjx',
-  'vertical': 'styles__vertical___3Brjx',
-  'Close': 'styles__Close___3VI-x'
-};
+function getDirection({ direction }) {
+  if (direction === 'vertical') return 'column';
+  return 'row';
+}
 
-const cx = classnames.bind(styles);
+function getWidth({ direction }) {
+  if (direction === 'vertical') return '100%';
+  return 'auto';
+}
 
+function getHeight({ direction }) {
+  if (direction === 'vertical') return 'auto';
+  return '100%';
+}
+
+function getRadius(type) {
+  return ({ direction }) => {
+    if (direction === 'vertical') {
+      if (type === 'first') return '5px 5px 0px 0px';
+      if (type === 'last') return '0px 0px 5px 5px';
+    }
+
+    if (type === 'first') return '5px 0px 0px 5px';
+    if (type === 'last') return '0px 5px 5px 0px';
+  };
+}
+
+const Base = styled.div`
+  display: inline-flex;
+  flex-direction: ${getDirection}
+`;
+
+const BaseItem = styled.div`
+  display: inherit;
+
+  & .${Button.styledComponentId} {
+    border-radius: 0;
+    width: ${getWidth};
+    height: ${getHeight};
+  }
+
+  &:first-of-type {
+    & .${Button.styledComponentId} {
+      border-radius: ${getRadius('first')};
+    }
+  }
+
+  &:last-of-type {
+    & .${Button.styledComponentId} {
+      border-radius: ${getRadius('last')};
+    }
+  }
+`;
+
 function Group({ children, direction }) {
   return React.createElement(
-    'div',
-    { className: cx('Group', direction) },
+    Base,
+    { direction: direction },
     React.Children.map(children, (child, index) => React.createElement(
-      'div',
-      {
-        key: index,
-        className: cx('Group-item', direction)
-      },
+      BaseItem,
+      { key: index, direction: direction },
       child
@@ -33,0 +68,0 @@ ))

lib/Button/index.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _templateObject = _taggedTemplateLiteral(['\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  font-weight: 600;\n  background: ', ';\n  border-color: ', ';\n  font-size: ', ';\n  cursor: pointer;\n  padding: ', ';\n  height: ', ';\n  border-radius: 0.1875rem;\n  white-space: nowrap;\n  min-height: 2.1875rem;\n  box-sizing: border-box;\n  border-width: 0.0625rem;\n  border-style: solid;\n  box-shadow: 0 0.0625rem 0.0625rem rgba(198, 195, 150, 0.25);\n  color: ', ';\n\n  &:active {\n    background: ', ';\n    border-color: ', ';\n    color: ', ';\n  }\n\n  &:hover {\n    box-shadow: none;\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n'], ['\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  font-weight: 600;\n  background: ', ';\n  border-color: ', ';\n  font-size: ', ';\n  cursor: pointer;\n  padding: ', ';\n  height: ', ';\n  border-radius: 0.1875rem;\n  white-space: nowrap;\n  min-height: 2.1875rem;\n  box-sizing: border-box;\n  border-width: 0.0625rem;\n  border-style: solid;\n  box-shadow: 0 0.0625rem 0.0625rem rgba(198, 195, 150, 0.25);\n  color: ', ';\n\n  &:active {\n    background: ', ';\n    border-color: ', ';\n    color: ', ';\n  }\n\n  &:hover {\n    box-shadow: none;\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n']);
+
 var _react = require('react');
@@ -12,55 +14,120 @@
 
-var _bind = require('classnames/bind');
+var _get = require('lodash/fp/get');
 
-var _bind2 = _interopRequireDefault(_bind);
+var _get2 = _interopRequireDefault(_get);
 
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = {
-  'Button': 'styles__Button___25D3l',
-  'Button-content': 'styles__Button-content___asVnw',
-  'disabled': 'styles__disabled___3PoLx',
-  'Button-prefix': 'styles__Button-prefix___2euxs',
-  'Button-suffix': 'styles__Button-suffix___2gXk2',
-  'primary': 'styles__primary___2056t',
-  'secondary': 'styles__secondary___2Z3NI',
-  'Group': 'styles__Group___3t-Hw',
-  'Group-item': 'styles__Group-item___xJZUV',
-  'horizontal': 'styles__horizontal___1pcjx',
-  'vertical': 'styles__vertical___3Brjx',
-  'Close': 'styles__Close___3VI-x'
-};
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var cx = _bind2.default.bind(styles);
+function getBackground(_ref) {
+  var buttonType = _ref.buttonType,
+      state = _ref.state,
+      theme = _ref.theme;
 
-var Button = function Button(_ref) {
-  var type = _ref.type;
-  var children = _ref.children;
-  var disabled = _ref.disabled;
-  var onClick = _ref.onClick;
+  return (0, _get2.default)('button.button.' + buttonType + '.' + state + '.gradient', theme);
+}
+
+function getBorderColor(_ref2) {
+  var buttonType = _ref2.buttonType,
+      state = _ref2.state,
+      theme = _ref2.theme;
+
+  return (0, _get2.default)('button.button.' + buttonType + '.' + state + '.border', theme);
+}
+
+function getColor(_ref3) {
+  var buttonType = _ref3.buttonType,
+      state = _ref3.state,
+      theme = _ref3.theme;
+
+  return (0, _get2.default)('button.button.' + buttonType + '.' + state + '.color', theme);
+}
+
+function getActiveBackground(_ref4) {
+  var buttonType = _ref4.buttonType,
+      theme = _ref4.theme;
+
+  return (0, _get2.default)('button.button.' + buttonType + '.active.gradient', theme);
+}
+
+function getActiveBorderColor(_ref5) {
+  var buttonType = _ref5.buttonType,
+      theme = _ref5.theme;
+
+  return (0, _get2.default)('button.button.' + buttonType + '.active.border', theme);
+}
+function getActiveColor(_ref6) {
+  var buttonType = _ref6.buttonType,
+      theme = _ref6.theme;
+
+  return (0, _get2.default)('button.button.' + buttonType + '.active.color', theme);
+}
+
+function getPadding(_ref7) {
+  var size = _ref7.size;
+
+  if (size === 'medium') return '0 0.5rem';
+  if (size === 'large') return '0 0.625rem';
+}
+
+function getHeight(_ref8) {
+  var size = _ref8.size;
+
+  if (size === 'medium') return '2.1875rem';
+  if (size === 'large') return '3.125rem';
+}
+
+var Button = _styledComponents2.default.button(_templateObject, getBackground, getBorderColor, (0, _get2.default)('theme.typography.size.normal'), getPadding, getHeight, getColor, getActiveBackground, getActiveBorderColor, getActiveColor);
+
+function Component(_ref9) {
+  var state = _ref9.state,
+      children = _ref9.children,
+      disabled = _ref9.disabled,
+      onClick = _ref9.onClick,
+      size = _ref9.size,
+      submit = _ref9.submit,
+      type = _ref9.type;
+
   return _react2.default.createElement(
-    'button',
+    Button,
     {
-      role: 'button',
+      buttonType: type,
+      disabled: disabled,
       onClick: onClick,
-      disabled: disabled,
-      className: cx('Button', type, { disabled: disabled })
+      size: size,
+      state: state,
+      type: submit ? 'submit' : 'button'
     },
     children
   );
-};
+}
 
-Button.propTypes = {
-  type: _react.PropTypes.oneOf(['primary', 'secondary', 'success', 'error']).isRequired,
-  children: _react.PropTypes.array,
+Component.displayName = 'Button';
+Component.styledComponentId = Button.styledComponentId;
+
+Component.propTypes = {
+  children: _react.PropTypes.any,
+  disabled: _react.PropTypes.bool,
   label: _react.PropTypes.string,
-  disabled: _react.PropTypes.bool,
-  onClick: _react.PropTypes.func
+  onClick: _react.PropTypes.func,
+  size: _react.PropTypes.oneOf('medium', 'large'),
+  state: _react.PropTypes.oneOf(['default', 'active']),
+  submit: _react.PropTypes.bool,
+  type: _react.PropTypes.oneOf(['primary', 'secondary', 'approve', 'decline']).isRequired
 };
 
-Button.defaultProps = {
-  type: 'primary',
-  disabled: false
+Component.defaultProps = {
+  active: false,
+  disabled: false,
+  size: 'medium',
+  state: 'default',
+  submit: false,
+  type: 'primary'
 };
 
-exports.default = Button;
+exports.default = Component;

lib/Close/index.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _templateObject = _taggedTemplateLiteral(['\n  cursor: pointer;\n  border: none;\n  padding: 5px;\n  background: transparent;\n'], ['\n  cursor: pointer;\n  border: none;\n  padding: 5px;\n  background: transparent;\n']);
+
 var _react = require('react');
@@ -12,5 +14,5 @@
 
-var _bind = require('classnames/bind');
+var _styledComponents = require('styled-components');
 
-var _bind2 = _interopRequireDefault(_bind);
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
@@ -23,30 +25,14 @@ var _FaClose = require('@jouwomgeving/ui-icon/lib/FontAwesome/FaClose');
 
-var styles = {
-  'Button': 'styles__Button___25D3l',
-  'Button-content': 'styles__Button-content___asVnw',
-  'disabled': 'styles__disabled___3PoLx',
-  'Button-prefix': 'styles__Button-prefix___2euxs',
-  'Button-suffix': 'styles__Button-suffix___2gXk2',
-  'primary': 'styles__primary___2056t',
-  'secondary': 'styles__secondary___2Z3NI',
-  'Group': 'styles__Group___3t-Hw',
-  'Group-item': 'styles__Group-item___xJZUV',
-  'horizontal': 'styles__horizontal___1pcjx',
-  'vertical': 'styles__vertical___3Brjx',
-  'Close': 'styles__Close___3VI-x'
-};
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var cx = _bind2.default.bind(styles);
+var Button = _styledComponents2.default.button(_templateObject);
 
-function Close(props) {
+function Close(_ref) {
+  var color = _ref.color,
+      onClick = _ref.onClick;
+
   return _react2.default.createElement(
-    'button',
-    {
-      className: cx('Close'),
-      onClick: props.onClick
-    },
-    _react2.default.createElement(_FaClose2.default, {
-      color: props.color,
-      size: 12
-    })
+    Button,
+    { onClick: onClick },
+    _react2.default.createElement(_FaClose2.default, { color: color, size: '0.75rem' })
   );
@@ -53,0 +39,0 @@ }

lib/Group/index.js

@@ -7,2 +7,5 @@ 'use strict';
 
+var _templateObject = _taggedTemplateLiteral(['\n  display: inline-flex;\n  flex-direction: ', '\n'], ['\n  display: inline-flex;\n  flex-direction: ', '\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  display: inherit;\n\n  & .', ' {\n    border-radius: 0;\n    width: ', ';\n    height: ', ';\n  }\n\n  &:first-of-type {\n    & .', ' {\n      border-radius: ', ';\n    }\n  }\n\n  &:last-of-type {\n    & .', ' {\n      border-radius: ', ';\n    }\n  }\n'], ['\n  display: inherit;\n\n  & .', ' {\n    border-radius: 0;\n    width: ', ';\n    height: ', ';\n  }\n\n  &:first-of-type {\n    & .', ' {\n      border-radius: ', ';\n    }\n  }\n\n  &:last-of-type {\n    & .', ' {\n      border-radius: ', ';\n    }\n  }\n']);
+
 var _react = require('react');
@@ -12,39 +15,64 @@
 
-var _bind = require('classnames/bind');
+var _styledComponents = require('styled-components');
 
-var _bind2 = _interopRequireDefault(_bind);
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
+var _Button = require('@jouwomgeving/ui-button/lib/Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = {
-  'Button': 'styles__Button___25D3l',
-  'Button-content': 'styles__Button-content___asVnw',
-  'disabled': 'styles__disabled___3PoLx',
-  'Button-prefix': 'styles__Button-prefix___2euxs',
-  'Button-suffix': 'styles__Button-suffix___2gXk2',
-  'primary': 'styles__primary___2056t',
-  'secondary': 'styles__secondary___2Z3NI',
-  'Group': 'styles__Group___3t-Hw',
-  'Group-item': 'styles__Group-item___xJZUV',
-  'horizontal': 'styles__horizontal___1pcjx',
-  'vertical': 'styles__vertical___3Brjx',
-  'Close': 'styles__Close___3VI-x'
-};
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var cx = _bind2.default.bind(styles);
-
-function Group(_ref) {
-  var children = _ref.children;
+function getDirection(_ref) {
   var direction = _ref.direction;
 
+  if (direction === 'vertical') return 'column';
+  return 'row';
+}
+
+function getWidth(_ref2) {
+  var direction = _ref2.direction;
+
+  if (direction === 'vertical') return '100%';
+  return 'auto';
+}
+
+function getHeight(_ref3) {
+  var direction = _ref3.direction;
+
+  if (direction === 'vertical') return 'auto';
+  return '100%';
+}
+
+function getRadius(type) {
+  return function (_ref4) {
+    var direction = _ref4.direction;
+
+    if (direction === 'vertical') {
+      if (type === 'first') return '5px 5px 0px 0px';
+      if (type === 'last') return '0px 0px 5px 5px';
+    }
+
+    if (type === 'first') return '5px 0px 0px 5px';
+    if (type === 'last') return '0px 5px 5px 0px';
+  };
+}
+
+var Base = _styledComponents2.default.div(_templateObject, getDirection);
+
+var BaseItem = _styledComponents2.default.div(_templateObject2, _Button2.default.styledComponentId, getWidth, getHeight, _Button2.default.styledComponentId, getRadius('first'), _Button2.default.styledComponentId, getRadius('last'));
+
+function Group(_ref5) {
+  var children = _ref5.children,
+      direction = _ref5.direction;
+
   return _react2.default.createElement(
-    'div',
-    { className: cx('Group', direction) },
+    Base,
+    { direction: direction },
     _react2.default.Children.map(children, function (child, index) {
       return _react2.default.createElement(
-        'div',
-        {
-          key: index,
-          className: cx('Group-item', direction)
-        },
+        BaseItem,
+        { key: index, direction: direction },
         child
@@ -51,0 +79,0 @@ );

package.json

 {
   "name": "@jouwomgeving/ui-button",
-  "version": "0.0.2-alpha.9f8ca493",
-  "license": "MIT",
-  "author": "Jouw Omgeving B.V. (https://www.jouwomgeving.nl/)",
-  "description": "",
+  "version": "0.0.2-alpha.a1026d9e",
+  "author": "Jouw Omgeving",
+  "dictator": [
+    "web"
+  ],
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[e-mail]/jouwomgeving/jo-interface.git"
+  },
+  "description": "Dictator package JO ui button",
   "keywords": [],
@@ -15,12 +22,13 @@ "main": "lib/index.js",
   "peerDependencies": {
-    "classnames": "^2.2.5",
-    "react": "^15.2.0",
-    "react-dom": "^15.2.0"
+    "react": "^15.0.0",
+    "react-dom": "^15.0.0"
   },
   "devDependencies": {
-    "@jouwomgeving/ui-icon": "^0.0.1-alpha.9f8ca493"
+    "@jouwomgeving/ui-icon": "^0.0.1-alpha.a1026d9e"
   },
   "dependencies": {
-    "recompose": "^0.20.2"
+    "classnames": "^2.2.5",
+    "recompose": "^0.20.2",
+    "styled-components": "2.0.0-8"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Misc. License Issues

License

(Experimental) A package's licensing information has fine-grained problems.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31571

71.53%

Number of package files

22

22.22%

Lines of code

883

45.23%

Number of low supply chain risk alerts

0

-100%

Worsened metrics

Dependency count

5

25%

Number of low license alerts

1

Infinity%

Number of medium license alerts

1

Infinity%

Dependency changes

• + Added

  classnames@^2.2.5

• + Added

  styled-components@2.0.0-8

• + Added

  base64-js@1.5.1
  (transitive)

• + Added

  bowser@1.9.4
  (transitive)

• + Added

  buffer@5.7.1
  (transitive)

• + Added

  css-color-keywords@1.0.0
  (transitive)

• + Added

  css-in-js-utils@2.0.1
  (transitive)

• + Added

  css-to-react-native@2.0.1
  (transitive)

• + Added

  glamor@2.20.40
  (transitive)

• + Added

  has-flag@1.0.0
  (transitive)

• + Added

  hyphenate-style-name@1.1.0
  (transitive)

• + Added

  ieee754@1.2.1
  (transitive)

• + Added

  inline-style-prefixer@2.0.53.0.8
  (transitive)

• + Added

  is-function@1.0.2
  (transitive)

• + Added

  is-plain-object@2.0.4
  (transitive)

• + Added

  isobject@3.0.1
  (transitive)

• + Added

  postcss-value-parser@3.3.1
  (transitive)

• + Added

  styled-components@2.0.0-8
  (transitive)

• + Added

  stylis@1.2.8
  (transitive)

• + Added

  supports-color@3.2.3
  (transitive)

• + Added

  through@2.3.8
  (transitive)