@sb1/ffe-buttons-react 14.0.0 → 14.0.4

package/es/ActionButton.js

@@ -0,0 +1,63 @@
+var _excluded = ["className", "ghost"];
+
+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; }
+
+import React from 'react';
+import { bool, func, node, string, oneOfType, object, shape, elementType } from 'prop-types';
+import classNames from 'classnames';
+import Button from './BaseButton';
+export default function ActionButton(props) {
+  var className = props.className,
+      ghost = props.ghost,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    buttonType: "action",
+    className: classNames(className, {
+      'ffe-button--ghost': ghost
+    })
+  }, rest));
+}
+ActionButton.propTypes = {
+  /** Aria label for loading indicator */
+  ariaLoadingMessage: string,
+
+  /** The button label */
+  children: node,
+
+  /** Extra class names */
+  className: string,
+
+  /** Condensed modifier. Use in condensed designs */
+  condensed: bool,
+
+  /** Disable a button in certain situations */
+  disabled: bool,
+
+  /** The rendered element, like an `<a />` or `<Link />` */
+  element: oneOfType([func, string, elementType]),
+
+  /** Applies the ghost modifier if true. */
+  ghost: bool,
+
+  /** Ref-setting function, or ref created by useRef, passed to the button element */
+  innerRef: oneOfType([func, shape({
+    current: object
+  })]),
+
+  /** Shows a loader if true */
+  isLoading: bool,
+
+  /** Icon shown to the left of the label */
+  leftIcon: node,
+
+  /** Icon shown to the right of the label */
+  rightIcon: node
+};
+ActionButton.defaultProps = {
+  ghost: false
+};

package/es/ActionButton.spec.js

@@ -0,0 +1,31 @@
+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.js

@@ -0,0 +1,28 @@
+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, object, shape, elementType } from 'prop-types';
+import InlineButton from './InlineBaseButton';
+
+var BackButton = function BackButton(props) {
+  return /*#__PURE__*/React.createElement(InlineButton, _extends({
+    buttonType: "back"
+  }, props));
+};
+
+BackButton.propTypes = {
+  /** The button label */
+  children: node,
+
+  /** Extra class names */
+  className: string,
+
+  /** The rendered element, like an `<a />` or `<Link />` */
+  element: oneOfType([func, string, elementType]),
+
+  /** Ref-setting function, or ref created by useRef, passed to the button element */
+  innerRef: oneOfType([func, shape({
+    current: object
+  })])
+};
+export default BackButton;

package/es/BackButton.spec.js

@@ -0,0 +1,25 @@
+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.js

@@ -0,0 +1,96 @@
+var _excluded = ["ariaLoadingMessage", "buttonType", "children", "className", "condensed", "disabled", "element", "innerRef", "isLoading", "leftIcon", "rightIcon"];
+
+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; }
+
+import React from 'react';
+import { bool, func, node, oneOf, oneOfType, string, object, shape, elementType } from 'prop-types';
+import classNames from 'classnames';
+/**
+ * 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.createElement(Element, _extends({
+    "aria-busy": isLoading && supportsSpinner,
+    "aria-disabled": disabled || isLoading && supportsSpinner,
+    className: classNames('ffe-button', "ffe-button--".concat(buttonType), {
+      'ffe-button--condensed': condensed
+    }, {
+      'ffe-button--loading': isLoading && supportsSpinner
+    }, className),
+    ref: innerRef
+  }, rest), /*#__PURE__*/React.createElement("span", {
+    className: "ffe-button__label"
+  }, leftIcon && /*#__PURE__*/React.cloneElement(leftIcon, {
+    className: 'ffe-button__icon ffe-button__icon--left'
+  }), children, rightIcon && /*#__PURE__*/React.cloneElement(rightIcon, {
+    className: 'ffe-button__icon ffe-button__icon--right'
+  })), supportsSpinner && /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": !isLoading,
+    "aria-label": ariaLoadingMessage,
+    className: "ffe-button__spinner"
+  }));
+};
+
+BaseButton.propTypes = {
+  /** Aria label for loading indicator */
+  ariaLoadingMessage: string,
+
+  /**
+   * Enum of supported prop types. Used internally only.
+   * @ignore
+   */
+  buttonType: oneOf(['action', 'primary', 'secondary', 'shortcut', 'task']),
+
+  /** The button label */
+  children: node,
+
+  /** Extra class names */
+  className: string,
+
+  /** Condensed modifier. Use in condensed designs */
+  condensed: bool,
+
+  /** Disable a button in certain situations */
+  disabled: bool,
+
+  /** The rendered element, like an `<a />` or `<Link />` */
+  element: oneOfType([func, string, elementType]),
+
+  /** Ref-setting function, or ref created by useRef, passed to the button element */
+  innerRef: oneOfType([func, shape({
+    current: object
+  })]),
+
+  /** Shows a loader if true */
+  isLoading: bool,
+
+  /** Icon shown to the left of the label */
+  leftIcon: node,
+
+  /** Icon shown to the right of the label */
+  rightIcon: node
+};
+BaseButton.defaultProps = {
+  ariaLoadingMessage: 'Vennligst vent',
+  element: 'button'
+};
+export default BaseButton;

package/es/BaseButton.spec.js

@@ -0,0 +1,91 @@
+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.js

@@ -0,0 +1,38 @@
+var _excluded = ["className", "thin", "inline"];
+
+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; }
+
+import React from 'react';
+import { bool, string } from 'prop-types';
+import classNames from 'classnames';
+
+var ButtonGroup = function ButtonGroup(_ref) {
+  var className = _ref.className,
+      thin = _ref.thin,
+      inline = _ref.inline,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames('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: string,
+
+  /** Applies the thin modifier to remove margins */
+  thin: bool,
+
+  /** Applies the inline modifier to make all child buttons inline */
+  inline: bool
+};
+export default ButtonGroup;

package/es/ButtonGroup.spec.js

@@ -0,0 +1,43 @@
+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.js

@@ -0,0 +1,75 @@
+var _excluded = ["children", "className", "closeLabel", "element", "innerRef", "isExpanded", "leftIcon", "rightIcon"];
+
+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; }
+
+import React, { Fragment } from 'react';
+import { bool, func, oneOfType, string, node, object, shape, elementType } from 'prop-types';
+import classNames from 'classnames';
+import KryssIkon from '@sb1/ffe-icons-react/lib/kryss-ikon';
+
+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.createElement(Element, _extends({
+    "aria-expanded": isExpanded,
+    "aria-label": isExpanded ? closeLabel : undefined,
+    className: classNames('ffe-button', 'ffe-button--expand', {
+      'ffe-button--expanded': isExpanded
+    }, className),
+    ref: innerRef
+  }, rest), isExpanded && /*#__PURE__*/React.createElement(KryssIkon, {
+    className: "ffe-button__icon"
+  }), !isExpanded && /*#__PURE__*/React.createElement(Fragment, null, leftIcon && /*#__PURE__*/React.cloneElement(leftIcon, {
+    className: 'ffe-button__icon ffe-button__icon--left'
+  }), children, rightIcon && /*#__PURE__*/React.cloneElement(rightIcon, {
+    className: 'ffe-button__icon ffe-button__icon--right'
+  })));
+};
+
+ExpandButton.propTypes = {
+  /** The button label */
+  children: node.isRequired,
+
+  /** Extra class names */
+  className: string,
+
+  /** The rendered element, like an `<a />` or `<Link />` */
+  element: oneOfType([func, string, elementType]),
+
+  /** An accessible label for the close-button, only shown in the "isExpanded" state  */
+  closeLabel: string,
+
+  /** Icon shown to the left of the label */
+  leftIcon: node,
+
+  /** Icon shown to the right of the label */
+  rightIcon: node,
+
+  /** Ref-setting function, or ref created by useRef, passed to the button element */
+  innerRef: oneOfType([func, shape({
+    current: object
+  })]),
+
+  /** When true the component will render a circle with an X indicating whatever is controlled is in an expanded state. */
+  isExpanded: bool.isRequired,
+
+  /** Use to listen for clicks and toggle the `isExpanded` property together with whatever it is you're expanding. */
+  onClick: func.isRequired
+};
+ExpandButton.defaultProps = {
+  closeLabel: 'Lukk',
+  element: 'button'
+};
+export default ExpandButton;

package/es/ExpandButton.spec.js

@@ -0,0 +1,87 @@
+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);
+    });
+  });
+});

package/es/InlineBaseButton.js

@@ -0,0 +1,69 @@
+var _excluded = ["buttonType", "children", "className", "element", "innerRef", "leftIcon", "rightIcon"];
+
+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; }
+
+import React from 'react';
+import { func, string, oneOf, oneOfType, node, object, shape, elementType } from 'prop-types';
+import classNames from 'classnames';
+/**
+ * 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.createElement(Element, _extends({
+    className: classNames('ffe-inline-button', "ffe-inline-button--".concat(buttonType), className),
+    ref: innerRef
+  }, rest), leftIcon && /*#__PURE__*/React.cloneElement(leftIcon, {
+    className: 'ffe-inline-button__icon ffe-inline-button__icon--left'
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ffe-inline-button__label"
+  }, children), rightIcon && /*#__PURE__*/React.cloneElement(rightIcon, {
+    className: 'ffe-inline-button__icon ffe-inline-button__icon--right'
+  }));
+};
+
+InlineBaseButton.propTypes = {
+  /**
+   * Enum of supported prop types. Used internally only.
+   * @ignore
+   */
+  buttonType: oneOf(['tertiary', 'back', 'expand']),
+
+  /** The button label */
+  children: node.isRequired,
+
+  /** Extra class names */
+  className: string,
+
+  /** The rendered element, like an `<a />` or `<Link />` */
+  element: oneOfType([string, func, elementType]),
+
+  /** Ref-setting function, or ref created by useRef, passed to the button element */
+  innerRef: oneOfType([func, shape({
+    current: object
+  })]),
+
+  /** Icon shown to the left of the label */
+  leftIcon: node,
+
+  /** Icon shown to the right of the label */
+  rightIcon: node
+};
+InlineBaseButton.defaultProps = {
+  element: 'button'
+};
+export default InlineBaseButton;