@jouwomgeving/ui-button - npm Package Compare versions

Comparing version 0.0.2-alpha.05080e21 to 0.0.2-alpha.09865e54

dist/bundle.js

@@ -87,3 +87,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-throw new Error("Module build failed: Error: \"extract-text-webpack-plugin\" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example\n    at Object.module.exports.pitch (/Users/jbovenschen/JouwOmgeving/dev.vm2/jo-interface/node_modules/extract-text-webpack-plugin/loader.js:26:9)");
+throw new Error("Module build failed: Error: \"extract-text-webpack-plugin\" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example\n    at Object.module.exports.pitch (/Users/jvanleeuwen/Projects/dictator/node_modules/extract-text-webpack-plugin/loader.js:27:9)");
 
@@ -90,0 +90,0 @@ /***/ },

es/Action/index.js

 import React, { PropTypes } from 'react';
 import classnames from 'classnames/bind';
 
-const styles = {
-  'Button': 'Button___558dcbc7545a2206c3c307c07b359c85',
-  'primary': 'primary___861ef6aa467bd14af672f36b7a671480',
-  'secondary': 'secondary___1df3c5d2993b93114e55c098011b0fbd',
-  'approve': 'approve___9ba315d31f9b9a0df0df90124fe3e266',
-  'decline': 'decline___124063290c2091ed793f0cdb05c73c4c',
-  'disabled': 'disabled___401ccd0cadad96164044b12f7bf862f3',
-  'Group': 'Group___2d8a85ab733625ec128d780729b8fadd',
-  'Group-item': 'Group-item___95b75bc8bf5a24f7e8490a6939deb721',
-  'horizontal': 'horizontal___891bda1ca193264cfdc69cb962383159',
-  'vertical': 'vertical___5c7c9ae9f35e8b90de67cc3779386de5',
-  'Close': 'Close___0cbb63c00333b0b3db6b74db4de8b3f9',
-  'Action': 'Action___45e3421b27df789553a20d8f67eef3a6'
-};
+const styles = {};
 
@@ -19,0 +6,0 @@ const cx = classnames.bind(styles);

es/Button/index.js

 import React, { PropTypes } from 'react';
-import classnames from 'classnames/bind';
+import styled from 'styled-components';
 
-const styles = {
-  'Button': 'Button___558dcbc7545a2206c3c307c07b359c85',
-  'primary': 'primary___861ef6aa467bd14af672f36b7a671480',
-  'secondary': 'secondary___1df3c5d2993b93114e55c098011b0fbd',
-  'approve': 'approve___9ba315d31f9b9a0df0df90124fe3e266',
-  'decline': 'decline___124063290c2091ed793f0cdb05c73c4c',
-  'disabled': 'disabled___401ccd0cadad96164044b12f7bf862f3',
-  'Group': 'Group___2d8a85ab733625ec128d780729b8fadd',
-  'Group-item': 'Group-item___95b75bc8bf5a24f7e8490a6939deb721',
-  'horizontal': 'horizontal___891bda1ca193264cfdc69cb962383159',
-  'vertical': 'vertical___5c7c9ae9f35e8b90de67cc3779386de5',
-  'Close': 'Close___0cbb63c00333b0b3db6b74db4de8b3f9',
-  'Action': 'Action___45e3421b27df789553a20d8f67eef3a6'
+import { button, typography } from '@jouwomgeving/util-vars';
+
+const background = ({ buttonType, state }) => button.button[buttonType][state].gradient;
+
+const borderColor = ({ buttonType, state }) => button.button[buttonType][state].border;
+
+const color = ({ buttonType, state }) => button.button[buttonType][state].color;
+
+const activeBackground = ({ buttonType }) => button.button[buttonType].active.gradient;
+
+const activeBorderColor = ({ buttonType }) => button.button[buttonType].active.border;
+
+const activeColor = ({ buttonType }) => button.button[buttonType].active.color;
+
+const padding = ({ size }) => {
+  if (size === 'medium') return '0 0.5rem';
+  if (size === 'large') return '0 0.625rem';
 };
 
-const cx = classnames.bind(styles);
+const height = ({ size }) => {
+  if (size === 'medium') return '2.1875rem';
+  if (size === 'large') return '3.125rem';
+};
 
-const Button = ({ type, children, disabled, onClick, submit }) => React.createElement(
-  'button',
+const StyledButton = styled.button`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  font-weight: 600;
+  background: ${background};
+  border-color: ${borderColor};
+  font-size: ${typography.size.normal};
+  cursor: pointer;
+  padding: ${padding};
+  height: ${height};
+  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: ${color};
+
+  &:active {
+    background: ${activeBackground};
+    border-color: ${activeBorderColor};
+    color: ${activeColor};
+  }
+
+  &:hover {
+    box-shadow: none;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+`;
+
+const Button = ({ state, children, disabled, onClick, size, submit, type }) => React.createElement(
+  StyledButton,
   {
-    type: submit ? 'submit' : 'button',
+    buttonType: type,
+    className: `Button ${size} ${{ disabled }}`,
+    disabled: disabled,
     onClick: onClick,
-    disabled: disabled,
-    className: cx('Button', type, { disabled })
+    size: size,
+    state: state,
+    type: submit ? 'submit' : 'button'
   },
@@ -33,16 +78,21 @@ children
 Button.propTypes = {
-  type: PropTypes.oneOf(['primary', 'secondary', 'approve', 'decline']).isRequired,
   children: PropTypes.any,
+  disabled: PropTypes.bool,
   label: PropTypes.string,
-  disabled: PropTypes.bool,
   onClick: PropTypes.func,
-  submit: PropTypes.bool
+  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',
+  active: false,
   disabled: false,
-  submit: false
+  size: 'medium',
+  state: 'default',
+  submit: false,
+  type: 'primary'
 };
 
 export default Button;

es/Close/index.js

 import React, { PropTypes } from 'react';
 import classnames from 'classnames/bind';
 
-import FaClose from '@jouwomgeving/ui-icon/es/FontAwesome/FaClose';
+import FaClose from '@jouwomgeving/ui-icon/FontAwesome/FaClose';
 
-const styles = {
-  'Button': 'Button___558dcbc7545a2206c3c307c07b359c85',
-  'primary': 'primary___861ef6aa467bd14af672f36b7a671480',
-  'secondary': 'secondary___1df3c5d2993b93114e55c098011b0fbd',
-  'approve': 'approve___9ba315d31f9b9a0df0df90124fe3e266',
-  'decline': 'decline___124063290c2091ed793f0cdb05c73c4c',
-  'disabled': 'disabled___401ccd0cadad96164044b12f7bf862f3',
-  'Group': 'Group___2d8a85ab733625ec128d780729b8fadd',
-  'Group-item': 'Group-item___95b75bc8bf5a24f7e8490a6939deb721',
-  'horizontal': 'horizontal___891bda1ca193264cfdc69cb962383159',
-  'vertical': 'vertical___5c7c9ae9f35e8b90de67cc3779386de5',
-  'Close': 'Close___0cbb63c00333b0b3db6b74db4de8b3f9',
-  'Action': 'Action___45e3421b27df789553a20d8f67eef3a6'
-};
+const styles = {};
 
@@ -21,0 +8,0 @@ const cx = classnames.bind(styles);

es/Group/index.js

@@ -5,16 +5,3 @@ import React, { PropTypes } from 'react';
 
-const styles = {
-  'Button': 'Button___558dcbc7545a2206c3c307c07b359c85',
-  'primary': 'primary___861ef6aa467bd14af672f36b7a671480',
-  'secondary': 'secondary___1df3c5d2993b93114e55c098011b0fbd',
-  'approve': 'approve___9ba315d31f9b9a0df0df90124fe3e266',
-  'decline': 'decline___124063290c2091ed793f0cdb05c73c4c',
-  'disabled': 'disabled___401ccd0cadad96164044b12f7bf862f3',
-  'Group': 'Group___2d8a85ab733625ec128d780729b8fadd',
-  'Group-item': 'Group-item___95b75bc8bf5a24f7e8490a6939deb721',
-  'horizontal': 'horizontal___891bda1ca193264cfdc69cb962383159',
-  'vertical': 'vertical___5c7c9ae9f35e8b90de67cc3779386de5',
-  'Close': 'Close___0cbb63c00333b0b3db6b74db4de8b3f9',
-  'Action': 'Action___45e3421b27df789553a20d8f67eef3a6'
-};
+const styles = {};
 
@@ -21,0 +8,0 @@ const cx = classnames.bind(styles);

lib/Action/index.js

@@ -17,16 +17,3 @@ 'use strict';
 
-var styles = {
-  'Button': 'Button___558dcbc7545a2206c3c307c07b359c85',
-  'primary': 'primary___861ef6aa467bd14af672f36b7a671480',
-  'secondary': 'secondary___1df3c5d2993b93114e55c098011b0fbd',
-  'approve': 'approve___9ba315d31f9b9a0df0df90124fe3e266',
-  'decline': 'decline___124063290c2091ed793f0cdb05c73c4c',
-  'disabled': 'disabled___401ccd0cadad96164044b12f7bf862f3',
-  'Group': 'Group___2d8a85ab733625ec128d780729b8fadd',
-  'Group-item': 'Group-item___95b75bc8bf5a24f7e8490a6939deb721',
-  'horizontal': 'horizontal___891bda1ca193264cfdc69cb962383159',
-  'vertical': 'vertical___5c7c9ae9f35e8b90de67cc3779386de5',
-  'Close': 'Close___0cbb63c00333b0b3db6b74db4de8b3f9',
-  'Action': 'Action___45e3421b27df789553a20d8f67eef3a6'
-};
+var styles = {};
 
@@ -33,0 +20,0 @@ var cx = _bind2.default.bind(styles);

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,38 +14,79 @@
 
-var _bind = require('classnames/bind');
+var _styledComponents = require('styled-components');
 
-var _bind2 = _interopRequireDefault(_bind);
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
+var _utilVars = require('@jouwomgeving/util-vars');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = {
-  'Button': 'Button___558dcbc7545a2206c3c307c07b359c85',
-  'primary': 'primary___861ef6aa467bd14af672f36b7a671480',
-  'secondary': 'secondary___1df3c5d2993b93114e55c098011b0fbd',
-  'approve': 'approve___9ba315d31f9b9a0df0df90124fe3e266',
-  'decline': 'decline___124063290c2091ed793f0cdb05c73c4c',
-  'disabled': 'disabled___401ccd0cadad96164044b12f7bf862f3',
-  'Group': 'Group___2d8a85ab733625ec128d780729b8fadd',
-  'Group-item': 'Group-item___95b75bc8bf5a24f7e8490a6939deb721',
-  'horizontal': 'horizontal___891bda1ca193264cfdc69cb962383159',
-  'vertical': 'vertical___5c7c9ae9f35e8b90de67cc3779386de5',
-  'Close': 'Close___0cbb63c00333b0b3db6b74db4de8b3f9',
-  'Action': 'Action___45e3421b27df789553a20d8f67eef3a6'
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var background = function background(_ref) {
+  var buttonType = _ref.buttonType,
+      state = _ref.state;
+  return _utilVars.button.button[buttonType][state].gradient;
 };
 
-var cx = _bind2.default.bind(styles);
+var borderColor = function borderColor(_ref2) {
+  var buttonType = _ref2.buttonType,
+      state = _ref2.state;
+  return _utilVars.button.button[buttonType][state].border;
+};
 
-var Button = function Button(_ref) {
-  var type = _ref.type,
-      children = _ref.children,
-      disabled = _ref.disabled,
-      onClick = _ref.onClick,
-      submit = _ref.submit;
+var color = function color(_ref3) {
+  var buttonType = _ref3.buttonType,
+      state = _ref3.state;
+  return _utilVars.button.button[buttonType][state].color;
+};
+
+var activeBackground = function activeBackground(_ref4) {
+  var buttonType = _ref4.buttonType;
+  return _utilVars.button.button[buttonType].active.gradient;
+};
+
+var activeBorderColor = function activeBorderColor(_ref5) {
+  var buttonType = _ref5.buttonType;
+  return _utilVars.button.button[buttonType].active.border;
+};
+
+var activeColor = function activeColor(_ref6) {
+  var buttonType = _ref6.buttonType;
+  return _utilVars.button.button[buttonType].active.color;
+};
+
+var padding = function padding(_ref7) {
+  var size = _ref7.size;
+
+  if (size === 'medium') return '0 0.5rem';
+  if (size === 'large') return '0 0.625rem';
+};
+
+var height = function height(_ref8) {
+  var size = _ref8.size;
+
+  if (size === 'medium') return '2.1875rem';
+  if (size === 'large') return '3.125rem';
+};
+
+var StyledButton = _styledComponents2.default.button(_templateObject, background, borderColor, _utilVars.typography.size.normal, padding, height, color, activeBackground, activeBorderColor, activeColor);
+
+var Button = function Button(_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',
+    StyledButton,
     {
-      type: submit ? 'submit' : 'button',
+      buttonType: type,
+      className: 'Button ' + size + ' ' + { disabled: disabled },
+      disabled: disabled,
       onClick: onClick,
-      disabled: disabled,
-      className: cx('Button', type, { disabled: disabled })
+      size: size,
+      state: state,
+      type: submit ? 'submit' : 'button'
     },
@@ -55,16 +98,21 @@ children
 Button.propTypes = {
-  type: _react.PropTypes.oneOf(['primary', 'secondary', 'approve', 'decline']).isRequired,
   children: _react.PropTypes.any,
+  disabled: _react.PropTypes.bool,
   label: _react.PropTypes.string,
-  disabled: _react.PropTypes.bool,
   onClick: _react.PropTypes.func,
-  submit: _react.PropTypes.bool
+  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',
+  active: false,
   disabled: false,
-  submit: false
+  size: 'medium',
+  state: 'default',
+  submit: false,
+  type: 'primary'
 };
 
 exports.default = Button;

lib/Close/index.js

@@ -15,3 +15,3 @@ 'use strict';
 
-var _FaClose = require('@jouwomgeving/ui-icon/lib/FontAwesome/FaClose');
+var _FaClose = require('@jouwomgeving/ui-icon/FontAwesome/FaClose');
 
@@ -22,16 +22,3 @@ var _FaClose2 = _interopRequireDefault(_FaClose);
 
-var styles = {
-  'Button': 'Button___558dcbc7545a2206c3c307c07b359c85',
-  'primary': 'primary___861ef6aa467bd14af672f36b7a671480',
-  'secondary': 'secondary___1df3c5d2993b93114e55c098011b0fbd',
-  'approve': 'approve___9ba315d31f9b9a0df0df90124fe3e266',
-  'decline': 'decline___124063290c2091ed793f0cdb05c73c4c',
-  'disabled': 'disabled___401ccd0cadad96164044b12f7bf862f3',
-  'Group': 'Group___2d8a85ab733625ec128d780729b8fadd',
-  'Group-item': 'Group-item___95b75bc8bf5a24f7e8490a6939deb721',
-  'horizontal': 'horizontal___891bda1ca193264cfdc69cb962383159',
-  'vertical': 'vertical___5c7c9ae9f35e8b90de67cc3779386de5',
-  'Close': 'Close___0cbb63c00333b0b3db6b74db4de8b3f9',
-  'Action': 'Action___45e3421b27df789553a20d8f67eef3a6'
-};
+var styles = {};
 
@@ -38,0 +25,0 @@ var cx = _bind2.default.bind(styles);

lib/Group/index.js

@@ -17,16 +17,3 @@ 'use strict';
 
-var styles = {
-  'Button': 'Button___558dcbc7545a2206c3c307c07b359c85',
-  'primary': 'primary___861ef6aa467bd14af672f36b7a671480',
-  'secondary': 'secondary___1df3c5d2993b93114e55c098011b0fbd',
-  'approve': 'approve___9ba315d31f9b9a0df0df90124fe3e266',
-  'decline': 'decline___124063290c2091ed793f0cdb05c73c4c',
-  'disabled': 'disabled___401ccd0cadad96164044b12f7bf862f3',
-  'Group': 'Group___2d8a85ab733625ec128d780729b8fadd',
-  'Group-item': 'Group-item___95b75bc8bf5a24f7e8490a6939deb721',
-  'horizontal': 'horizontal___891bda1ca193264cfdc69cb962383159',
-  'vertical': 'vertical___5c7c9ae9f35e8b90de67cc3779386de5',
-  'Close': 'Close___0cbb63c00333b0b3db6b74db4de8b3f9',
-  'Action': 'Action___45e3421b27df789553a20d8f67eef3a6'
-};
+var styles = {};
 
@@ -33,0 +20,0 @@ var cx = _bind2.default.bind(styles);

package.json

 {
   "name": "@jouwomgeving/ui-button",
-  "version": "0.0.2-alpha.05080e21",
+  "version": "0.0.2-alpha.09865e54",
   "author": "Jouw Omgeving",
+  "dictator": [
+    "web"
+  ],
   "license": "UNLICENSED",
@@ -23,3 +26,3 @@ "repository": {
   "devDependencies": {
-    "@jouwomgeving/ui-icon": "^0.0.1-alpha.05080e21"
+    "@jouwomgeving/ui-icon": "^0.0.1-alpha.09865e54"
   },
@@ -26,0 +29,0 @@ "dependencies": {

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

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

Improved metrics

Total package byte prevSize

62710

48.94%

Number of package files

27

12.5%

Lines of code

1705

44.86%

No dependency changes