@sb1/ffe-buttons-react 14.0.0 → 14.0.4

package/lib/BackButton.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("prop-types");
+
+var _InlineBaseButton = _interopRequireDefault(require("./InlineBaseButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+var BackButton = function BackButton(props) {
+  return /*#__PURE__*/_react.default.createElement(_InlineBaseButton.default, _extends({
+    buttonType: "back"
+  }, props));
+};
+
+BackButton.propTypes = {
+  /** The button label */
+  children: _propTypes.node,
+
+  /** Extra class names */
+  className: _propTypes.string,
+
+  /** The rendered element, like an `<a />` or `<Link />` */
+  element: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.string, _propTypes.elementType]),
+
+  /** 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
+  })])
+};
+var _default = BackButton;
+exports.default = _default;

package/lib/BackButton.spec.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _BackButton = _interopRequireDefault(require("./BackButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+var defaultProps = {
+  children: 'Click me'
+};
+
+var getWrapper = function getWrapper(props) {
+  return (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_BackButton.default, _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/lib/BaseButton.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("prop-types");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["ariaLoadingMessage", "buttonType", "children", "className", "condensed", "disabled", "element", "innerRef", "isLoading", "leftIcon", "rightIcon"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+/**
+ * Internal component
+ */
+var BaseButton = function BaseButton(props) {
+  var ariaLoadingMessage = props.ariaLoadingMessage,
+      buttonType = props.buttonType,
+      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,
+      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,
+    className: (0, _classnames.default)('ffe-button', "ffe-button--".concat(buttonType), {
+      'ffe-button--condensed': condensed
+    }, {
+      'ffe-button--loading': isLoading && supportsSpinner
+    }, className),
+    ref: innerRef
+  }, rest), /*#__PURE__*/_react.default.createElement("span", {
+    className: "ffe-button__label"
+  }, leftIcon && /*#__PURE__*/_react.default.cloneElement(leftIcon, {
+    className: 'ffe-button__icon ffe-button__icon--left'
+  }), children, rightIcon && /*#__PURE__*/_react.default.cloneElement(rightIcon, {
+    className: 'ffe-button__icon ffe-button__icon--right'
+  })), supportsSpinner && /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": !isLoading,
+    "aria-label": ariaLoadingMessage,
+    className: "ffe-button__spinner"
+  }));
+};
+
+BaseButton.propTypes = {
+  /** Aria label for loading indicator */
+  ariaLoadingMessage: _propTypes.string,
+
+  /**
+   * Enum of supported prop types. Used internally only.
+   * @ignore
+   */
+  buttonType: (0, _propTypes.oneOf)(['action', 'primary', 'secondary', 'shortcut', 'task']),
+
+  /** The button label */
+  children: _propTypes.node,
+
+  /** Extra class names */
+  className: _propTypes.string,
+
+  /** Condensed modifier. Use in condensed designs */
+  condensed: _propTypes.bool,
+
+  /** Disable a button in certain situations */
+  disabled: _propTypes.bool,
+
+  /** The rendered element, like an `<a />` or `<Link />` */
+  element: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.string, _propTypes.elementType]),
+
+  /** 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
+  })]),
+
+  /** Shows a loader if true */
+  isLoading: _propTypes.bool,
+
+  /** Icon shown to the left of the label */
+  leftIcon: _propTypes.node,
+
+  /** Icon shown to the right of the label */
+  rightIcon: _propTypes.node
+};
+BaseButton.defaultProps = {
+  ariaLoadingMessage: 'Vennligst vent',
+  element: 'button'
+};
+var _default = BaseButton;
+exports.default = _default;

package/lib/BaseButton.spec.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _BaseButton = _interopRequireDefault(require("./BaseButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+var defaultProps = {
+  children: 'Click me'
+};
+
+var getWrapper = function getWrapper(props) {
+  return (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_BaseButton.default, _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.default.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.default.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/lib/ButtonGroup.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("prop-types");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["className", "thin", "inline"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var ButtonGroup = function ButtonGroup(_ref) {
+  var className = _ref.className,
+      thin = _ref.thin,
+      inline = _ref.inline,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _classnames.default)('ffe-button-group', {
+      'ffe-button-group--thin': thin
+    }, {
+      'ffe-button-group--inline': inline
+    }, className)
+  }, rest));
+};
+
+ButtonGroup.propTypes = {
+  /** Extra class name applied in addition to the FFE classes */
+  className: _propTypes.string,
+
+  /** Applies the thin modifier to remove margins */
+  thin: _propTypes.bool,
+
+  /** Applies the inline modifier to make all child buttons inline */
+  inline: _propTypes.bool
+};
+var _default = ButtonGroup;
+exports.default = _default;

package/lib/ButtonGroup.spec.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _ButtonGroup = _interopRequireDefault(require("./ButtonGroup"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+var defaultProps = {
+  thin: false
+};
+
+var getWrapper = function getWrapper(props) {
+  return (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, _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/lib/ExpandButton.js

@@ -0,0 +1,94 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = require("prop-types");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _kryssIkon = _interopRequireDefault(require("@sb1/ffe-icons-react/lib/kryss-ikon"));
+
+var _excluded = ["children", "className", "closeLabel", "element", "innerRef", "isExpanded", "leftIcon", "rightIcon"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var ExpandButton = function ExpandButton(props) {
+  var children = props.children,
+      className = props.className,
+      closeLabel = props.closeLabel,
+      Element = props.element,
+      innerRef = props.innerRef,
+      isExpanded = props.isExpanded,
+      leftIcon = props.leftIcon,
+      rightIcon = props.rightIcon,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(Element, _extends({
+    "aria-expanded": isExpanded,
+    "aria-label": isExpanded ? closeLabel : undefined,
+    className: (0, _classnames.default)('ffe-button', 'ffe-button--expand', {
+      'ffe-button--expanded': isExpanded
+    }, className),
+    ref: innerRef
+  }, rest), isExpanded && /*#__PURE__*/_react.default.createElement(_kryssIkon.default, {
+    className: "ffe-button__icon"
+  }), !isExpanded && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, leftIcon && /*#__PURE__*/_react.default.cloneElement(leftIcon, {
+    className: 'ffe-button__icon ffe-button__icon--left'
+  }), children, rightIcon && /*#__PURE__*/_react.default.cloneElement(rightIcon, {
+    className: 'ffe-button__icon ffe-button__icon--right'
+  })));
+};
+
+ExpandButton.propTypes = {
+  /** The button label */
+  children: _propTypes.node.isRequired,
+
+  /** Extra class names */
+  className: _propTypes.string,
+
+  /** The rendered element, like an `<a />` or `<Link />` */
+  element: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.string, _propTypes.elementType]),
+
+  /** An accessible label for the close-button, only shown in the "isExpanded" state  */
+  closeLabel: _propTypes.string,
+
+  /** Icon shown to the left of the label */
+  leftIcon: _propTypes.node,
+
+  /** Icon shown to the right of the label */
+  rightIcon: _propTypes.node,
+
+  /** 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
+  })]),
+
+  /** When true the component will render a circle with an X indicating whatever is controlled is in an expanded state. */
+  isExpanded: _propTypes.bool.isRequired,
+
+  /** Use to listen for clicks and toggle the `isExpanded` property together with whatever it is you're expanding. */
+  onClick: _propTypes.func.isRequired
+};
+ExpandButton.defaultProps = {
+  closeLabel: 'Lukk',
+  element: 'button'
+};
+var _default = ExpandButton;
+exports.default = _default;

package/lib/ExpandButton.spec.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _bamseIkon = _interopRequireDefault(require("@sb1/ffe-icons-react/lib/bamse-ikon"));
+
+var _bestikkIkon = _interopRequireDefault(require("@sb1/ffe-icons-react/lib/bestikk-ikon"));
+
+var _kryssIkon = _interopRequireDefault(require("@sb1/ffe-icons-react/lib/kryss-ikon"));
+
+var _ExpandButton = _interopRequireDefault(require("./ExpandButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+var defaultProps = {
+  children: 'Click me',
+  isExpanded: false,
+  onClick: function onClick(f) {
+    return f;
+  }
+};
+
+var getWrapper = function getWrapper(props) {
+  return (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_ExpandButton.default, _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.default.createElement(_bestikkIkon.default, null),
+      rightIcon: /*#__PURE__*/_react.default.createElement(_bamseIkon.default, null)
+    });
+    expect(wrapper.find(_bestikkIkon.default).exists()).toBe(true);
+    expect(wrapper.find(_bamseIkon.default).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.default.createElement(_bestikkIkon.default, null),
+        isExpanded: true,
+        rightIcon: /*#__PURE__*/_react.default.createElement(_bamseIkon.default, null)
+      });
+      expect(wrapper.find(_bestikkIkon.default).exists()).toBe(false);
+      expect(wrapper.find(_bamseIkon.default).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.default).exists()).toBe(true);
+      expect(wrapper.find(_kryssIkon.default).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.default.defaultProps.closeLabel);
+    });
+  });
+});

package/lib/InlineBaseButton.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("prop-types");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["buttonType", "children", "className", "element", "innerRef", "leftIcon", "rightIcon"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+/**
+ * Internal component
+ * @ignore
+ */
+var InlineBaseButton = function InlineBaseButton(props) {
+  var buttonType = props.buttonType,
+      children = props.children,
+      className = props.className,
+      Element = props.element,
+      innerRef = props.innerRef,
+      leftIcon = props.leftIcon,
+      rightIcon = props.rightIcon,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(Element, _extends({
+    className: (0, _classnames.default)('ffe-inline-button', "ffe-inline-button--".concat(buttonType), className),
+    ref: innerRef
+  }, rest), leftIcon && /*#__PURE__*/_react.default.cloneElement(leftIcon, {
+    className: 'ffe-inline-button__icon ffe-inline-button__icon--left'
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "ffe-inline-button__label"
+  }, children), rightIcon && /*#__PURE__*/_react.default.cloneElement(rightIcon, {
+    className: 'ffe-inline-button__icon ffe-inline-button__icon--right'
+  }));
+};
+
+InlineBaseButton.propTypes = {
+  /**
+   * Enum of supported prop types. Used internally only.
+   * @ignore
+   */
+  buttonType: (0, _propTypes.oneOf)(['tertiary', 'back', 'expand']),
+
+  /** The button label */
+  children: _propTypes.node.isRequired,
+
+  /** Extra class names */
+  className: _propTypes.string,
+
+  /** The rendered element, like an `<a />` or `<Link />` */
+  element: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.func, _propTypes.elementType]),
+
+  /** 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
+  })]),
+
+  /** Icon shown to the left of the label */
+  leftIcon: _propTypes.node,
+
+  /** Icon shown to the right of the label */
+  rightIcon: _propTypes.node
+};
+InlineBaseButton.defaultProps = {
+  element: 'button'
+};
+var _default = InlineBaseButton;
+exports.default = _default;