@jouwomgeving/ui-button - npm Package Compare versions

Comparing version 0.0.2-alpha.2043bf6e to 0.0.2-alpha.2135edaa

dist/bundle.js

@@ -1,1 +0,431 @@
-module.exports=function(e){function t(n){if(r[n])return r[n].exports;var u=r[n]={i:n,l:!1,exports:{}};return e[n].call(u.exports,u,u.exports,t),u.l=!0,u.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,t,r){Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1932)}({0:function(e,t){e.exports=require("react")},1612:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var u=r(1616),o=n(u),l=r(1614),s=n(l),a=function(e){var t=(0,s.default)(e);return function(r,n){return(0,o.default)(!1,t,e,r,n)}};t.default=a},1613:function(e,t){"use strict";t.__esModule=!0;var r=function(e){return Boolean(e&&e.prototype&&"object"==typeof e.prototype.isReactComponent)};t.default=r},1614:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var u=r(1613),o=n(u),l=function(e){return Boolean(!("function"!=typeof e||(0,o.default)(e)||e.defaultProps||e.contextTypes||e.propTypes))};t.default=l},1615:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var u=r(313),o=n(u),l=r(1612),s=n(l),a=function(e){return function(t){var r=(0,s.default)(t);return function(t){return r(e(t))}}};t.default=(0,o.default)(a,"mapProps")},1616:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=r(0),l=n(o),s=function(e,t,r,n,o){if(!e&&t)return r(o?u({},n,{children:o}):n);var s=r;return o?l.default.createElement(s,n,o):l.default.createElement(s,n)};t.default=s},1617:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=r(313),l=n(o),s=r(1615),a=n(s),i=function(e){return(0,a.default)(function(t){return u({},t,"function"==typeof e?e(t):e)})};t.default=(0,l.default)(i,"withProps")},1932:function(e,t,r){e.exports=r(408)},308:function(e,t){e.exports={Button:"styles---Button---25D3lXM0v3","Button-content":"styles---Button-content---asVnwoKVUB",disabled:"styles---disabled---3PoLxXbX54","Button-prefix":"styles---Button-prefix---2euxsm0f9H","Button-suffix":"styles---Button-suffix---2gXk2xDd2X",primary:"styles---primary---2056tWq_dO",secondary:"styles---secondary---2Z3NI1Cc1l",Group:"styles---Group---3t-HwF1Tyd","Group-item":"styles---Group-item---xJZUVqgF9W",horizontal:"styles---horizontal---1pcjxyKpP6",vertical:"styles---vertical---3BrjxVdYND"}},312:function(e,t,r){var n,u;!function(){"use strict";function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var u=typeof n;if("string"===u||"number"===u)e.push(this&&this[n]||n);else if(Array.isArray(n))e.push(r.apply(this,n));else if("object"===u)for(var l in n)o.call(n,l)&&n[l]&&e.push(this&&this[l]||l)}}return e.join(" ")}var o={}.hasOwnProperty;"undefined"!=typeof e&&e.exports?e.exports=r:(n=[],u=function(){return r}.apply(t,n),!(void 0!==u&&(e.exports=u)))}()},313:function(e,t,r){"use strict";t.__esModule=!0;var n=function(e,t){arguments.length<=2||void 0===arguments[2]||arguments[2],!(arguments.length<=3||void 0===arguments[3])&&arguments[3];return e};t.default=n},408:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}var u=r(421),o=n(u),l=r(422),s=n(l);e.exports={"default":o.default,Button:o.default,Group:s.default}},421:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var u=r(0),o=n(u),l=r(312),s=n(l),a=r(1617),i=n(a),f=r(308),c=n(f),d=s.default.bind(c.default),p=(0,i.default)(function(e){var t=e.prefix,r=e.suffix;return{prefix:t?o.default.createElement("span",{className:c.default["Button-prefix"]},t):null,suffix:r?o.default.createElement("span",{className:c.default["Button-suffix"]},r):null}}),y=p(function(e){var t=e.type,r=e.label,n=e.disabled,u=e.onClick,l=e.prefix,s=e.suffix;return o.default.createElement("div",{role:"button",onClick:u,disabled:n,tabIndex:"0",className:d("Button",t,{disabled:n})},l,o.default.createElement("span",{className:d("Button-content",{disabled:n})},r),s)});y.propTypes={type:u.PropTypes.oneOf(["primary","secondary","success","error"]).isRequired,label:u.PropTypes.string,disabled:u.PropTypes.bool,onClick:u.PropTypes.func,suffix:u.PropTypes.element,prefix:u.PropTypes.element},y.defaultProps={type:"primary",disabled:!1},t.default=y},422:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function u(e){var t=e.children,r=e.direction;return l.default.createElement("div",{className:c("Group",r)},l.default.Children.map(t,function(e,t){return l.default.createElement("div",{key:t,className:c("Group-item",r)},e)}))}Object.defineProperty(t,"__esModule",{value:!0});var o=r(0),l=n(o),s=r(312),a=n(s),i=r(308),f=n(i),c=a.default.bind(f.default);u.propTypes={children:o.PropTypes.any,direction:o.PropTypes.oneOf(["vertical","horizontal"])},u.defaultProps={direction:"vertical"},t.default=u}});
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("React"));
+	else if(typeof define === 'function' && define.amd)
+		define(["React"], factory);
+	else if(typeof exports === 'object')
+		exports["uiButton"] = factory(require("React"));
+	else
+		root["uiButton"] = factory(root["React"]);
+})(this, function(__WEBPACK_EXTERNAL_MODULE_0__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// identity function for calling harmory imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+
+/******/ 	// define getter function for harmory exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		Object.defineProperty(exports, name, {
+/******/ 			configurable: false,
+/******/ 			enumerable: true,
+/******/ 			get: getter
+/******/ 		});
+/******/ 	};
+
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 8);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
+
+/***/ },
+/* 1 */
+/***/ function(module, exports) {
+
+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)");
+
+/***/ },
+/* 2 */
+/***/ function(module, exports, __webpack_require__) {
+
+var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
+  Copyright (c) 2016 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+/* global define */
+
+(function () {
+	'use strict';
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames () {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(this && this[arg] || arg);
+			} else if (Array.isArray(arg)) {
+				classes.push(classNames.apply(this, arg));
+			} else if (argType === 'object') {
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(this && this[key] || key);
+					}
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (typeof module !== 'undefined' && module.exports) {
+		module.exports = classNames;
+	} else if (true) {
+		// register as 'classnames', consistent with npm package name
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {
+			return classNames;
+		}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+	} else {
+		window.classNames = classNames;
+	}
+}());
+
+
+/***/ },
+/* 3 */
+/***/ function(module, exports, __webpack_require__) {
+
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Group = exports.Close = exports.Button = exports.default = undefined;
+
+var _Button = __webpack_require__(4);
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _Close = __webpack_require__(5);
+
+var _Close2 = _interopRequireDefault(_Close);
+
+var _Group = __webpack_require__(6);
+
+var _Group2 = _interopRequireDefault(_Group);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Button2.default;
+exports.Button = _Button2.default;
+exports.Close = _Close2.default;
+exports.Group = _Group2.default;
+
+/***/ },
+/* 4 */
+/***/ function(module, exports, __webpack_require__) {
+
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _bind = __webpack_require__(2);
+
+var _bind2 = _interopRequireDefault(_bind);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = __webpack_require__(1);
+
+var cx = _bind2.default.bind(styles);
+
+var Button = function Button(_ref) {
+  var type = _ref.type,
+      children = _ref.children,
+      disabled = _ref.disabled,
+      onClick = _ref.onClick,
+      submit = _ref.submit;
+  return _react2.default.createElement(
+    'button',
+    {
+      type: submit ? 'submit' : 'button',
+      onClick: onClick,
+      disabled: disabled,
+      className: cx('Button', type, { disabled: disabled })
+    },
+    children
+  );
+};
+
+Button.propTypes = {
+  type: _react.PropTypes.oneOf(['primary', 'secondary', 'approve', 'decline']).isRequired,
+  children: _react.PropTypes.any,
+  label: _react.PropTypes.string,
+  disabled: _react.PropTypes.bool,
+  onClick: _react.PropTypes.func,
+  submit: _react.PropTypes.bool
+};
+
+Button.defaultProps = {
+  type: 'primary',
+  disabled: false,
+  submit: false
+};
+
+exports.default = Button;
+
+/***/ },
+/* 5 */
+/***/ function(module, exports, __webpack_require__) {
+
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _bind = __webpack_require__(2);
+
+var _bind2 = _interopRequireDefault(_bind);
+
+var _FaClose = __webpack_require__(7);
+
+var _FaClose2 = _interopRequireDefault(_FaClose);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = __webpack_require__(1);
+
+var cx = _bind2.default.bind(styles);
+
+function Close(props) {
+  return _react2.default.createElement(
+    'button',
+    {
+      className: cx('Close'),
+      onClick: props.onClick
+    },
+    _react2.default.createElement(_FaClose2.default, {
+      color: props.color,
+      size: 12
+    })
+  );
+}
+
+Close.propTypes = {
+  color: _react.PropTypes.string,
+  onClick: _react.PropTypes.func
+};
+
+exports.default = Close;
+
+/***/ },
+/* 6 */
+/***/ function(module, exports, __webpack_require__) {
+
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _bind = __webpack_require__(2);
+
+var _bind2 = _interopRequireDefault(_bind);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = __webpack_require__(1);
+
+var cx = _bind2.default.bind(styles);
+
+function Group(_ref) {
+  var children = _ref.children,
+      direction = _ref.direction;
+
+  return _react2.default.createElement(
+    'div',
+    { className: cx('Group', direction) },
+    _react2.default.Children.map(children, function (child, index) {
+      return _react2.default.createElement(
+        'div',
+        {
+          key: index,
+          className: cx('Group-item', direction)
+        },
+        child
+      );
+    })
+  );
+}
+
+Group.propTypes = {
+  children: _react.PropTypes.any,
+  direction: _react.PropTypes.oneOf(['vertical', 'horizontal'])
+};
+
+Group.defaultProps = {
+  direction: 'vertical'
+};
+
+exports.default = Group;
+
+/***/ },
+/* 7 */
+/***/ function(module, exports, __webpack_require__) {
+
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint-disable */
+
+
+var styles = {
+  'Icon': 'styles__Icon___1AoIC',
+  'FontAwesome': 'styles__FontAwesome___2qE0j styles__Icon___1AoIC',
+  'JOIcon': 'styles__JOIcon___3LF0m styles__Icon___1AoIC',
+  'EmojiOne': 'styles__EmojiOne___1O8Uz styles__Icon___1AoIC',
+  'SmashIcon': 'styles__SmashIcon___2EIyE styles__Icon___1AoIC',
+  'Label': 'styles__Label___1x7t5',
+  'left': 'styles__left___1Hxlz',
+  'Label-content': 'styles__Label-content___3zclq',
+  'right': 'styles__right___2Jy5H',
+  'center': 'styles__center___Sc0qq',
+  'bottom': 'styles__bottom___bQQRE',
+  'top': 'styles__top___1gFk9',
+  'Label-icon': 'styles__Label-icon___3viAW'
+};
+
+var FaClose = function (_Component) {
+  _inherits(FaClose, _Component);
+
+  function FaClose() {
+    _classCallCheck(this, FaClose);
+
+    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+  }
+
+  FaClose.prototype.render = function render() {
+    var _props = this.props,
+        size = _props.size,
+        color = _props.color;
+
+    return _react2.default.createElement('div', {
+      style: {
+        width: size,
+        height: size,
+        color: color
+      },
+      className: styles.FontAwesome
+    }, _react2.default.createElement('svg', {
+      width: '11',
+      height: '14',
+      viewBox: '0 0 11 14'
+    }, _react2.default.createElement('path', {
+      fill: '#000666',
+      d: 'M10.141 10.328q0 .312-.219.531L8.86 11.921q-.219.219-.531.219t-.531-.219L5.501 9.624l-2.297 2.297q-.219.219-.531.219t-.531-.219L1.08 10.859q-.219-.219-.219-.531t.219-.531L3.377 7.5 1.08 5.203q-.219-.219-.219-.531t.219-.531l1.062-1.062q.219-.219.531-.219t.531.219l2.297 2.297 2.297-2.297q.219-.219.531-.219t.531.219l1.062 1.062q.219.219.219.531t-.219.531L7.625 7.5l2.297 2.297q.219.219.219.531z'
+    }, null)));
+  };
+
+  return FaClose;
+}(_react.Component);
+
+FaClose.propTypes = {
+  size: _react.PropTypes.oneOf(['9px', '12px', '14px', '16px', '18px', '24px']),
+  color: _react.PropTypes.string
+};
+FaClose.defaultProps = { size: '16px' };
+exports.default = FaClose;
+
+/***/ },
+/* 8 */
+/***/ function(module, exports, __webpack_require__) {
+
+module.exports = __webpack_require__(3);
+
+
+/***/ }
+/******/ ])
+});
+;

package.json

 {
   "name": "@jouwomgeving/ui-button",
-  "version": "0.0.2-alpha.2043bf6e",
-  "license": "MIT",
-  "author": "Jouw Omgeving B.V. (https://www.jouwomgeving.nl/)",
-  "description": "",
+  "version": "0.0.2-alpha.2135edaa",
+  "author": "Jouw Omgeving",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[e-mail]/jouwomgeving/jo-interface.git"
+  },
+  "description": "Dictator package JO ui button",
   "keywords": [],
-  "main": "dist/bundle.js",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
   "scripts": {
@@ -13,12 +19,12 @@ "test": "echo \"Error: no test specified\" && exit 1"
   "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.2043bf6e"
+    "@jouwomgeving/ui-icon": "^0.0.1-alpha.2135edaa"
   },
   "dependencies": {
+    "classnames": "^2.2.5",
     "recompose": "^0.20.2"
   }
 }

README.md

@@ -12,3 +12,3 @@ # ui-button
 
-import Button from '@jouwomgeving/ui-button';
+import * as Button from '@jouwomgeving/ui-form';
 
@@ -43,3 +43,3 @@ const Layout = () => (
 
-import Button from '@jouwomgeving/ui-button';
+import * as Button from '@jouwomgeving/ui-form';
 
@@ -46,0 +46,0 @@ const Layout = () => (

src/Button/index.js

 import React, { PropTypes } from 'react';
 import classnames from 'classnames/bind';
-import withProps from 'recompose/withProps';
 
-import styles from '../styles.css';
+const styles = require('./../styles.css');
 
 const cx = classnames.bind(styles);
 
-const enhance = withProps(
-  ({ prefix, suffix }) => ({
-    prefix: prefix ?
-      <span className={styles['Button-prefix']}>{prefix}</span> :
-      null,
-    suffix: suffix ?
-      <span className={styles['Button-suffix']}>{suffix}</span> :
-      null,
-  })
-);
-
-// TODO add logic for aria-pressed
-const Button = enhance(({ type, label, disabled, onClick, prefix, suffix }) => (
-  <div
-    role="button"
+const Button = ({ type, children, disabled, onClick, submit }) => (
+  <button
+    type={(submit ? 'submit' : 'button')}
     onClick={onClick}
     disabled={disabled}
-    tabIndex="0"
     className={cx('Button', type, { disabled })}
   >
-    {prefix}
-    <span className={cx('Button-content', { disabled })}>
-      {label}
-    </span>
-    {suffix}
-  </div>
-));
+    {children}
+  </button>
+);
 
 Button.propTypes = {
-  type: PropTypes.oneOf(['primary', 'secondary', 'success', 'error']).isRequired,
+  type: PropTypes.oneOf(['primary', 'secondary', 'approve', 'decline']).isRequired,
+  children: PropTypes.any,
   label: PropTypes.string,
   disabled: PropTypes.bool,
   onClick: PropTypes.func,
-  suffix: PropTypes.element,
-  prefix: PropTypes.element,
+  submit: PropTypes.bool,
 };
@@ -49,4 +31,5 @@
   disabled: false,
+  submit: false,
 };
 
 export default Button;

src/Button/stories/Button.stories.js

 import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
+import { withKnobs, select, boolean } from '@kadira/storybook-addon-knobs';
 
-import Button from '../../../index';
-import Icon from '@jouwomgeving/ui-icon';
+import Button from '@jouwomgeving/ui-button';
+import Text from '@jouwomgeving/ui-typography/Text';
 
-const settings = {
-  source: true,
-  inline: false,
-  propTables: [Button.default],
-  header: false,
+const types = {
+  primary: 'primary',
+  secondary: 'secondary',
+  approve: 'approve',
+  decline: 'decline',
 };
 
-function randomIcon(icons) {
-  const keys = Object.keys(icons);
-  return icons[keys[keys.length * Math.random() << 0]];
-}
-
 storiesOf('<Button.default />', module)
-  .addWithInfo('Default', '',
+  .addDecorator(withKnobs)
+  .addWithInfo(
+    'Default',
     () => (
-      <Button.default
-        label="Primary"
-        type="primary"
+      <Button
+        type={select('Type', types, types.primary)}
         onClick={action('Button')}
-      />
-    ), settings
-  )
-  .addWithInfo('Type: Secondary', '',
-    () => (
-      <Button.default
-        label="Secondary"
-        type="secondary"
-        onClick={action('Button Secondary')}
-      />
-    ), settings
-  )
-  .addWithInfo('Disabled: true', '',
-    () => (
-      <Button.default
-        label="Disabled"
-        disabled
-      />
-    ), settings
-  )
-  .addWithInfo('Type: Secondary, Disabled: true', '',
-    () => (
-      <Button.default
-        label="Secondary Disabled"
-        disabled
-        type="secondary"
-      />
-    ), settings
-  )
-  .addWithInfo('Prefix: Icon', '',
-    () => {
-      const SelectedIcon = randomIcon(Icon.FontAwesome);
+        disabled={boolean('Disabled', false)}
 
-      return (
-        <Button.default
-          label="Prefix"
-          prefix={(
-            <SelectedIcon
-              color="currentColor"
-              size={18}
-            />
-          )}
-        />
-      );
-    }, settings
-  )
-  .addWithInfo('Suffix: Icon', '',
-    () => {
-      const SelectedIcon = randomIcon(Icon.FontAwesome);
-
-      return (
-        <Button.default
-          label="Suffix"
-          suffix={(
-            <SelectedIcon
-              size={18}
-              color="currentColor"
-            />
-          )}
-        />
-      );
-    }, settings
+      >
+        <Text color="inherit">Button content</Text>
+      </Button>
+    )
   );

src/Group/index.js

@@ -5,3 +5,3 @@ import React, { PropTypes } from 'react';
 
-import styles from '../styles.css';
+const styles = require('./../styles.css');
 
@@ -8,0 +8,0 @@ const cx = classnames.bind(styles);

src/Group/stories/Group.stories.js

 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
 
-import Button from '../../../index';
+import * as Button from '@jouwomgeving/ui-button';
 
@@ -6,0 +6,0 @@ const settings = {

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

49668

increased by143.65%

Number of package files

26

increased by116.67%

Lines of code

1206

increased by162.17%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of medium license alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedclassnames@^2.2.5