@sb1/ffe-buttons-react 14.0.3 → 14.0.7

package/es/ActionButton.js

@@ -56,12 +56,8 @@ ActionButton.propTypes = {
   leftIcon: node,
 
   /** Icon shown to the right of the label */
-  rightIcon: node,
-
-  /** Dark variant */
-  dark: bool
+  rightIcon: node
 };
 ActionButton.defaultProps = {
-  ghost: false,
-  dark: false
+  ghost: false
 };

package/es/BackButton.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import { oneOfType, func, node, string, bool, object, shape, elementType } from 'prop-types';
+import { oneOfType, func, node, string, object, shape, elementType } from 'prop-types';
 import InlineButton from './InlineBaseButton';
 
 var BackButton = function BackButton(props) {
@@ -23,12 +23,6 @@ BackButton.propTypes = {
   /** Ref-setting function, or ref created by useRef, passed to the button element */
   innerRef: oneOfType([func, shape({
     current: object
-  })]),
-
-  /** Dark variant */
-  dark: bool
-};
-BackButton.defaultProps = {
-  dark: false
+  })])
 };
 export default BackButton;

package/es/BaseButton.js

@@ -1,4 +1,4 @@
-var _excluded = ["ariaLoadingMessage", "buttonType", "children", "className", "condensed", "disabled", "element", "innerRef", "isLoading", "leftIcon", "rightIcon"];
+var _excluded = ["ariaLoadingMessage", "buttonType", "children", "className", "condensed", "element", "innerRef", "isLoading", "leftIcon", "rightIcon", "onClick"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -19,24 +19,32 @@ var BaseButton = function BaseButton(props) {
       children = props.children,
       className = props.className,
       condensed = props.condensed,
-      disabled = props.disabled,
       Element = props.element,
       innerRef = props.innerRef,
       isLoading = props.isLoading,
       leftIcon = props.leftIcon,
       rightIcon = props.rightIcon,
+      _onClick = props.onClick,
       rest = _objectWithoutProperties(props, _excluded);
 
   var supportsSpinner = ['action', 'primary', 'secondary'].includes(buttonType);
   return /*#__PURE__*/React.createElement(Element, _extends({
     "aria-busy": isLoading && supportsSpinner,
-    "aria-disabled": disabled || isLoading && supportsSpinner,
+    "aria-disabled": rest.disabled || isLoading && supportsSpinner,
     className: classNames('ffe-button', "ffe-button--".concat(buttonType), {
       'ffe-button--condensed': condensed
     }, {
       'ffe-button--loading': isLoading && supportsSpinner
     }, className),
-    ref: innerRef
+    ref: innerRef,
+    onClick: function onClick(event) {
+      if (isLoading && supportsSpinner) {
+        event.preventDefault();
+        event.stopPropagation();
+      } else if (_onClick) {
+        _onClick(event);
+      }
+    }
   }, rest), /*#__PURE__*/React.createElement("span", {
     className: "ffe-button__label"
   }, leftIcon && /*#__PURE__*/React.cloneElement(leftIcon, {
@@ -87,7 +95,10 @@ BaseButton.propTypes = {
   leftIcon: node,
 
   /** Icon shown to the right of the label */
-  rightIcon: node
+  rightIcon: node,
+
+  /** Called when button is clicked if not loading or disabled */
+  onClick: func
 };
 BaseButton.defaultProps = {
   ariaLoadingMessage: 'Vennligst vent',

package/es/PrimaryButton.js

@@ -41,12 +41,6 @@ PrimaryButton.propTypes = {
   leftIcon: node,
 
   /** Icon shown to the right of the label */
-  rightIcon: node,
-
-  /** Dark variant */
-  dark: bool
-};
-PrimaryButton.defaultProps = {
-  dark: false
+  rightIcon: node
 };
 export default PrimaryButton;

package/es/SecondaryButton.js

@@ -41,12 +41,6 @@ SecondaryButton.propTypes = {
   leftIcon: node,
 
   /** Icon shown to the right of the label */
-  rightIcon: node,
-
-  /** Dark variant */
-  dark: bool
-};
-SecondaryButton.defaultProps = {
-  dark: false
+  rightIcon: node
 };
 export default SecondaryButton;

package/es/TertiaryButton.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import { func, node, oneOfType, string, bool, object, shape, elementType } from 'prop-types';
+import { func, node, oneOfType, string, object, shape, elementType } from 'prop-types';
 import InlineButton from './InlineBaseButton';
 
 var TertiaryButton = function TertiaryButton(props) {
@@ -29,12 +29,6 @@ TertiaryButton.propTypes = {
   leftIcon: node,
 
   /** Icon shown to the right of the label */
-  rightIcon: node,
-
-  /** Dark variant */
-  dark: bool
-};
-TertiaryButton.defaultProps = {
-  dark: false
+  rightIcon: node
 };
 export default TertiaryButton;

package/lib/ActionButton.js

@@ -70,12 +70,8 @@ ActionButton.propTypes = {
   leftIcon: _propTypes.node,
 
   /** Icon shown to the right of the label */
-  rightIcon: _propTypes.node,
-
-  /** Dark variant */
-  dark: _propTypes.bool
+  rightIcon: _propTypes.node
 };
 ActionButton.defaultProps = {
-  ghost: false,
-  dark: false
+  ghost: false
 };

package/lib/BackButton.js

@@ -34,13 +34,7 @@ BackButton.propTypes = {
   /** Ref-setting function, or ref created by useRef, passed to the button element */
   innerRef: (0, _propTypes.oneOfType)([_propTypes.func, (0, _propTypes.shape)({
     current: _propTypes.object
-  })]),
-
-  /** Dark variant */
-  dark: _propTypes.bool
-};
-BackButton.defaultProps = {
-  dark: false
+  })])
 };
 var _default = BackButton;
 exports.default = _default;

package/lib/BaseButton.js

@@ -11,7 +11,7 @@ var _propTypes = require("prop-types");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _excluded = ["ariaLoadingMessage", "buttonType", "children", "className", "condensed", "disabled", "element", "innerRef", "isLoading", "leftIcon", "rightIcon"];
+var _excluded = ["ariaLoadingMessage", "buttonType", "children", "className", "condensed", "element", "innerRef", "isLoading", "leftIcon", "rightIcon", "onClick"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -30,24 +30,32 @@ var BaseButton = function BaseButton(props) {
       children = props.children,
       className = props.className,
       condensed = props.condensed,
-      disabled = props.disabled,
       Element = props.element,
       innerRef = props.innerRef,
       isLoading = props.isLoading,
       leftIcon = props.leftIcon,
       rightIcon = props.rightIcon,
+      _onClick = props.onClick,
       rest = _objectWithoutProperties(props, _excluded);
 
   var supportsSpinner = ['action', 'primary', 'secondary'].includes(buttonType);
   return /*#__PURE__*/_react.default.createElement(Element, _extends({
     "aria-busy": isLoading && supportsSpinner,
-    "aria-disabled": disabled || isLoading && supportsSpinner,
+    "aria-disabled": rest.disabled || isLoading && supportsSpinner,
     className: (0, _classnames.default)('ffe-button', "ffe-button--".concat(buttonType), {
       'ffe-button--condensed': condensed
     }, {
       'ffe-button--loading': isLoading && supportsSpinner
     }, className),
-    ref: innerRef
+    ref: innerRef,
+    onClick: function onClick(event) {
+      if (isLoading && supportsSpinner) {
+        event.preventDefault();
+        event.stopPropagation();
+      } else if (_onClick) {
+        _onClick(event);
+      }
+    }
   }, rest), /*#__PURE__*/_react.default.createElement("span", {
     className: "ffe-button__label"
   }, leftIcon && /*#__PURE__*/_react.default.cloneElement(leftIcon, {
@@ -98,7 +106,10 @@ BaseButton.propTypes = {
   leftIcon: _propTypes.node,
 
   /** Icon shown to the right of the label */
-  rightIcon: _propTypes.node
+  rightIcon: _propTypes.node,
+
+  /** Called when button is clicked if not loading or disabled */
+  onClick: _propTypes.func
 };
 BaseButton.defaultProps = {
   ariaLoadingMessage: 'Vennligst vent',

package/lib/PrimaryButton.js

@@ -52,13 +52,7 @@ PrimaryButton.propTypes = {
   leftIcon: _propTypes.node,
 
   /** Icon shown to the right of the label */
-  rightIcon: _propTypes.node,
-
-  /** Dark variant */
-  dark: _propTypes.bool
-};
-PrimaryButton.defaultProps = {
-  dark: false
+  rightIcon: _propTypes.node
 };
 var _default = PrimaryButton;
 exports.default = _default;

package/lib/SecondaryButton.js

@@ -52,13 +52,7 @@ SecondaryButton.propTypes = {
   leftIcon: _propTypes.node,
 
   /** Icon shown to the right of the label */
-  rightIcon: _propTypes.node,
-
-  /** Dark variant */
-  dark: _propTypes.bool
-};
-SecondaryButton.defaultProps = {
-  dark: false
+  rightIcon: _propTypes.node
 };
 var _default = SecondaryButton;
 exports.default = _default;

package/lib/TertiaryButton.js

@@ -40,13 +40,7 @@ TertiaryButton.propTypes = {
   leftIcon: _propTypes.node,
 
   /** Icon shown to the right of the label */
-  rightIcon: _propTypes.node,
-
-  /** Dark variant */
-  dark: _propTypes.bool
-};
-TertiaryButton.defaultProps = {
-  dark: false
+  rightIcon: _propTypes.node
 };
 var _default = TertiaryButton;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sb1/ffe-buttons-react",
-  "version": "14.0.3",
+  "version": "14.0.7",
   "description": "React implementation of ffe-buttons",
   "keywords": [
     "ffe"
@@ -21,11 +21,8 @@
     "url": "ssh://git@github.com:SpareBank1/designsystem.git"
   },
   "scripts": {
-    "build": "npm run build:cjs && npm run build:es && npm run build:types",
-    "build:cjs": "babel -d lib/. --root-mode=upward  --env-name=cjs --ignore=*.spec.js src/.",
-    "build:es": "babel -d es/. --root-mode=upward --env-name=es --ignore=*.spec.js src/.",
-    "build:types": "copyfiles -f src/index.d.ts types/",
-    "lint": "eslint src/.",
+    "build": "ffe-buildtool babel",
+    "lint": "eslint src",
     "test": "jest",
     "test:watch": "jest --watch"
   },
@@ -33,11 +30,12 @@
     "setupTestFrameworkScriptFile": "../../test-setup.js"
   },
   "dependencies": {
-    "@sb1/ffe-icons-react": "^7.2.18",
-    "classnames": "^2.2.5",
-    "prop-types": "^15.7.0"
+    "@sb1/ffe-icons-react": "^7.2.20",
+    "classnames": "^2.3.1",
+    "prop-types": "^15.7.2"
   },
   "devDependencies": {
+    "@sb1/ffe-buildtool": "^0.1.0",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.7.0",
     "eslint": "^5.9.0",
@@ -53,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6f5d79429f3b0357fdbd172df4207c41a8545d36"
+  "gitHead": "59eb2e12625e744f1a116c14a40cf69f1bbecdc6"
 }

package/types/index.d.ts

@@ -24,7 +24,6 @@ export interface BaseButtonProps extends MinimalBaseButtonProps {
     isLoading?: boolean;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
-    dark?: boolean;
 }
 
 export interface ActionButtonProps extends BaseButtonProps {
@@ -33,7 +32,6 @@ export interface ActionButtonProps extends BaseButtonProps {
 
 export interface BackButtonProps extends MinimalBaseButtonProps {
     children?: React.ReactNode;
-    dark?: boolean;
 }
 
 export interface ButtonGroupProps {
@@ -80,7 +78,6 @@ export interface TertiaryButtonProps extends MinimalBaseButtonProps {
     children?: React.ReactNode;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
-    dark?: boolean;
 }
 
 declare class ActionButton extends React.Component<ActionButtonProps, any> {}

package/es/ActionButton.spec.js

@@ -1,31 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from 'react';
-import { shallow } from 'enzyme';
-import ActionButton from './ActionButton';
-var defaultProps = {
-  children: 'Click me'
-};
-
-var getWrapper = function getWrapper(props) {
-  return shallow( /*#__PURE__*/React.createElement(ActionButton, _extends({}, defaultProps, props)));
-};
-
-describe('<ActionButton />', function () {
-  it('renders without exploding', function () {
-    var wrapper = getWrapper();
-    expect(wrapper.props()).toHaveProperty('buttonType', 'action');
-  });
-  it('passes on any prop', function () {
-    var wrapper = getWrapper({
-      'aria-label': 'some label'
-    });
-    expect(wrapper.props()).toHaveProperty('aria-label', 'some label');
-  });
-  it('sets correct class when ghost prop is true', function () {
-    var wrapper = getWrapper({
-      ghost: true
-    });
-    expect(wrapper.hasClass('ffe-button--ghost')).toBe(true);
-  });
-});

package/es/BackButton.spec.js

@@ -1,25 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from 'react';
-import { shallow } from 'enzyme';
-import BackButton from './BackButton';
-var defaultProps = {
-  children: 'Click me'
-};
-
-var getWrapper = function getWrapper(props) {
-  return shallow( /*#__PURE__*/React.createElement(BackButton, _extends({}, defaultProps, props)));
-};
-
-describe('<BackButton />', function () {
-  it('renders without exploding', function () {
-    var wrapper = getWrapper();
-    expect(wrapper.props()).toHaveProperty('buttonType', 'back');
-  });
-  it('passes on any prop', function () {
-    var wrapper = getWrapper({
-      'aria-label': 'some label'
-    });
-    expect(wrapper.props()).toHaveProperty('aria-label', 'some label');
-  });
-});

package/es/BaseButton.spec.js

@@ -1,91 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from 'react';
-import { shallow } from 'enzyme';
-import BaseButton from './BaseButton';
-var defaultProps = {
-  children: 'Click me'
-};
-
-var getWrapper = function getWrapper(props) {
-  return shallow( /*#__PURE__*/React.createElement(BaseButton, _extends({}, defaultProps, props)));
-};
-
-describe('<BaseButton />', function () {
-  it('renders without exploding', function () {
-    var wrapper = getWrapper();
-    expect(wrapper.exists()).toBe(true);
-  });
-  it('renders the correct classes', function () {
-    var wrapper = getWrapper();
-    expect(wrapper.hasClass('ffe-button')).toBe(true);
-    wrapper.setProps({
-      className: 'custom-class',
-      buttonType: 'action'
-    });
-    expect(wrapper.hasClass('ffe-button--action')).toBe(true);
-    expect(wrapper.hasClass('custom-class')).toBe(true);
-  });
-  it('renders the correct label', function () {
-    var wrapper = getWrapper();
-    expect(wrapper.text()).toBe('Click me');
-    wrapper.setProps({
-      children: 'Press me'
-    });
-    expect(wrapper.text()).toBe('Press me');
-  });
-  it('renders left icon if set', function () {
-    var wrapper = getWrapper();
-    expect(wrapper.find('.ffe-button__icon--left').exists()).toBe(false);
-    wrapper.setProps({
-      leftIcon: /*#__PURE__*/React.createElement("svg", null)
-    });
-    expect(wrapper.find('.ffe-button__icon--left').exists()).toBe(true);
-  });
-  it('renders right icon if set', function () {
-    var wrapper = getWrapper();
-    expect(wrapper.find('.ffe-button__icon--right').exists()).toBe(false);
-    wrapper.setProps({
-      rightIcon: /*#__PURE__*/React.createElement("svg", null)
-    });
-    expect(wrapper.find('.ffe-button__icon--right').exists()).toBe(true);
-  });
-  it('renders the specified dom node', function () {
-    var wrapper = getWrapper({
-      element: 'a'
-    });
-    expect(wrapper.is('a')).toBe(true);
-  });
-  describe('when loading', function () {
-    it('sets the correct class', function () {
-      var wrapper = getWrapper({
-        buttonType: 'primary',
-        isLoading: true
-      });
-      expect(wrapper.hasClass('ffe-button--loading')).toBe(true);
-    });
-    it('sets the correct aria tags', function () {
-      var wrapper = getWrapper({
-        buttonType: 'primary',
-        isLoading: true
-      });
-      expect(wrapper.prop('aria-busy')).toBe(true);
-    });
-    it('disables the button', function () {
-      var wrapper = getWrapper({
-        buttonType: 'primary',
-        isLoading: true
-      });
-      expect(wrapper.prop('aria-disabled')).toBe(true);
-    });
-    it('does nothing for unsupported button type', function () {
-      var wrapper = getWrapper({
-        buttonType: 'shortcut',
-        isLoading: true
-      });
-      expect(wrapper.hasClass('ffe-button--loading')).toBe(false);
-      expect(wrapper.prop('aria-busy')).toBe(false);
-      expect(wrapper.prop('aria-disabled')).toBe(false);
-    });
-  });
-});

package/es/ButtonGroup.spec.js

@@ -1,43 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from 'react';
-import { shallow } from 'enzyme';
-import ButtonGroup from './ButtonGroup';
-var defaultProps = {
-  thin: false
-};
-
-var getWrapper = function getWrapper(props) {
-  return shallow( /*#__PURE__*/React.createElement(ButtonGroup, _extends({}, defaultProps, props)));
-};
-
-describe('<ButtonGroup />', function () {
-  it('renders without exploding', function () {
-    var wrapper = getWrapper();
-    expect(wrapper.exists()).toBe(true);
-  });
-  it('renders without the the --thin modifier if thin is false', function () {
-    var wrapper = getWrapper({
-      thin: false
-    });
-    expect(wrapper.hasClass('ffe-button-group--thin')).toBe(false);
-  });
-  it('applies the --thin modifier if thin is true', function () {
-    var wrapper = getWrapper({
-      thin: true
-    });
-    expect(wrapper.hasClass('ffe-button-group--thin')).toBe(true);
-  });
-  it('applies the --inline modifier if inline is true', function () {
-    var wrapper = getWrapper({
-      inline: true
-    });
-    expect(wrapper.hasClass('ffe-button-group--inline')).toBe(true);
-  });
-  it('applies the given className prop', function () {
-    var wrapper = getWrapper({
-      className: 'my-class'
-    });
-    expect(wrapper.hasClass('my-class')).toBe(true);
-  });
-});

package/es/ExpandButton.spec.js

@@ -1,87 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from 'react';
-import { shallow } from 'enzyme';
-import BamseIkon from '@sb1/ffe-icons-react/lib/bamse-ikon';
-import BestikkIkon from '@sb1/ffe-icons-react/lib/bestikk-ikon';
-import KryssIkon from '@sb1/ffe-icons-react/lib/kryss-ikon';
-import ExpandButton from './ExpandButton';
-var defaultProps = {
-  children: 'Click me',
-  isExpanded: false,
-  onClick: function onClick(f) {
-    return f;
-  }
-};
-
-var getWrapper = function getWrapper(props) {
-  return shallow( /*#__PURE__*/React.createElement(ExpandButton, _extends({}, defaultProps, props)));
-};
-
-describe('<ExpandButton />', function () {
-  it('renders without exploding', function () {
-    var wrapper = getWrapper();
-    expect(wrapper.hasClass('ffe-button')).toBe(true);
-    expect(wrapper.hasClass('ffe-button--expand')).toBe(true);
-  });
-  it('passes on any prop', function () {
-    var wrapper = getWrapper({
-      'aria-label': 'some label'
-    });
-    expect(wrapper.props()).toHaveProperty('aria-label', 'some label');
-  });
-  it('renders leftIcon and rightIcon', function () {
-    var wrapper = getWrapper({
-      leftIcon: /*#__PURE__*/React.createElement(BestikkIkon, null),
-      rightIcon: /*#__PURE__*/React.createElement(BamseIkon, null)
-    });
-    expect(wrapper.find(BestikkIkon).exists()).toBe(true);
-    expect(wrapper.find(BamseIkon).exists()).toBe(true);
-  });
-  it('does not use an aria-label since the button itself has a children acting as label', function () {
-    var wrapper = getWrapper();
-    expect(wrapper.prop('aria-label')).toBe(undefined);
-  });
-  describe('when expanded', function () {
-    it('does not render children', function () {
-      var wrapper = getWrapper({
-        isExpanded: true
-      });
-      expect(wrapper.text()).not.toContain('Click me');
-    });
-    it('does not render leftIcon and rightIcon', function () {
-      var wrapper = getWrapper({
-        leftIcon: /*#__PURE__*/React.createElement(BestikkIkon, null),
-        isExpanded: true,
-        rightIcon: /*#__PURE__*/React.createElement(BamseIkon, null)
-      });
-      expect(wrapper.find(BestikkIkon).exists()).toBe(false);
-      expect(wrapper.find(BamseIkon).exists()).toBe(false);
-    });
-    it('sets correct class', function () {
-      var wrapper = getWrapper({
-        isExpanded: true
-      });
-      expect(wrapper.hasClass('ffe-button--expanded')).toBe(true);
-    });
-    it('sets aria-expanded prop', function () {
-      var wrapper = getWrapper({
-        isExpanded: true
-      });
-      expect(wrapper.props()).toHaveProperty('aria-expanded', true);
-    });
-    it('renders a KryssIkon', function () {
-      var wrapper = getWrapper({
-        isExpanded: true
-      });
-      expect(wrapper.find(KryssIkon).exists()).toBe(true);
-      expect(wrapper.find(KryssIkon).hasClass('ffe-button__icon')).toBe(true);
-    });
-    it('uses the default aria-label property on the button', function () {
-      var wrapper = getWrapper({
-        isExpanded: true
-      });
-      expect(wrapper.prop('aria-label')).toBe(ExpandButton.defaultProps.closeLabel);
-    });
-  });
-});