@telia/styleguide/index.cjs.js

This is a living styleguide, showing the Atomic Design components which should be used in Telia Norway's web applications to achieve a common look & feel, and therefore user experience.

/** @license Telia Style Guide v1.22.1
 *
 * This source code is licensed under the ISC license found in the
 * LICENSE file in the root directory of this source tree.
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);

function createCommonjsModule(fn, module) {
	return module = { exports: {} }, fn(module, module.exports), module.exports;
}

var _extends_1 = createCommonjsModule(function (module) {
function _extends() {
  module.exports = _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);
}

module.exports = _extends;
});

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

var defineProperty = _defineProperty;

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 objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;

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;
}

var objectWithoutProperties = _objectWithoutProperties;

var classnames = createCommonjsModule(function (module) {
/*!
  Copyright (c) 2016 Jed Watson.
  Licensed under the MIT License (MIT), see
  http://jedwatson.github.io/classnames
*/
/* global define */

(function () {

	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(arg);
			} else if (Array.isArray(arg)) {
				classes.push(classNames.apply(null, arg));
			} else if (argType === 'object') {
				for (var key in arg) {
					if (hasOwn.call(arg, key) && arg[key]) {
						classes.push(key);
					}
				}
			}
		}

		return classes.join(' ');
	}

	if (module.exports) {
		module.exports = classNames;
	} else {
		window.classNames = classNames;
	}
}());
});

var global$1 = (typeof global !== "undefined" ? global :
            typeof self !== "undefined" ? self :
            typeof window !== "undefined" ? window : {});

if (typeof global$1.setTimeout === 'function') ;
if (typeof global$1.clearTimeout === 'function') ;

// from https://github.com/kumavis/browser-process-hrtime/blob/master/index.js
var performance = global$1.performance || {};
var performanceNow =
  performance.now        ||
  performance.mozNow     ||
  performance.msNow      ||
  performance.oNow       ||
  performance.webkitNow  ||
  function(){ return (new Date()).getTime() };

/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
/* eslint-disable no-unused-vars */
var getOwnPropertySymbols = Object.getOwnPropertySymbols;
var hasOwnProperty = Object.prototype.hasOwnProperty;
var propIsEnumerable = Object.prototype.propertyIsEnumerable;

function toObject(val) {
	if (val === null || val === undefined) {
		throw new TypeError('Object.assign cannot be called with null or undefined');
	}

	return Object(val);
}

function shouldUseNative() {
	try {
		if (!Object.assign) {
			return false;
		}

		// Detect buggy property enumeration order in older V8 versions.

		// https://bugs.chromium.org/p/v8/issues/detail?id=4118
		var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
		test1[5] = 'de';
		if (Object.getOwnPropertyNames(test1)[0] === '5') {
			return false;
		}

		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
		var test2 = {};
		for (var i = 0; i < 10; i++) {
			test2['_' + String.fromCharCode(i)] = i;
		}
		var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
			return test2[n];
		});
		if (order2.join('') !== '0123456789') {
			return false;
		}

		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
		var test3 = {};
		'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
			test3[letter] = letter;
		});
		if (Object.keys(Object.assign({}, test3)).join('') !==
				'abcdefghijklmnopqrst') {
			return false;
		}

		return true;
	} catch (err) {
		// We don't expect any of the above to throw, but better to be safe.
		return false;
	}
}

var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
	var from;
	var to = toObject(target);
	var symbols;

	for (var s = 1; s < arguments.length; s++) {
		from = Object(arguments[s]);

		for (var key in from) {
			if (hasOwnProperty.call(from, key)) {
				to[key] = from[key];
			}
		}

		if (getOwnPropertySymbols) {
			symbols = getOwnPropertySymbols(from);
			for (var i = 0; i < symbols.length; i++) {
				if (propIsEnumerable.call(from, symbols[i])) {
					to[symbols[i]] = from[symbols[i]];
				}
			}
		}
	}

	return to;
};

/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';

var ReactPropTypesSecret_1 = ReactPropTypesSecret;

function emptyFunction() {}

var factoryWithThrowingShims = function() {
  function shim(props, propName, componentName, location, propFullName, secret) {
    if (secret === ReactPropTypesSecret_1) {
      // It is still safe when called from React.
      return;
    }
    var err = new Error(
      'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
      'Use PropTypes.checkPropTypes() to call them. ' +
      'Read more at http://fb.me/use-check-prop-types'
    );
    err.name = 'Invariant Violation';
    throw err;
  }  shim.isRequired = shim;
  function getShim() {
    return shim;
  }  // Important!
  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
  var ReactPropTypes = {
    array: shim,
    bool: shim,
    func: shim,
    number: shim,
    object: shim,
    string: shim,
    symbol: shim,

    any: shim,
    arrayOf: getShim,
    element: shim,
    instanceOf: getShim,
    node: shim,
    objectOf: getShim,
    oneOf: getShim,
    oneOfType: getShim,
    shape: getShim,
    exact: getShim
  };

  ReactPropTypes.checkPropTypes = emptyFunction;
  ReactPropTypes.PropTypes = ReactPropTypes;

  return ReactPropTypes;
};

var propTypes = createCommonjsModule(function (module) {
/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

{
  // By explicitly using `prop-types` you are opting into new production behavior.
  // http://fb.me/prop-types-in-prod
  module.exports = factoryWithThrowingShims();
}
});

/**
 * Status: *finished*.
 *
 * The Heading component should be used for page titles, sub-titles, etc.
 * Currently, only h1, h2, h3 and h4 headings have been defined.
 *
 * Margin for headings should be handled in the components that make use of this component.
 * See <a href='/information-article-5' class='link'>this sample page</a> that make use of the
 * <a href='/components/molecules#RichText' class='link'>RichText component</a> to style headings in running text.
 */

var Heading = function Heading(_ref) {
  var _classnames;

  var level = _ref.level,
      text = _ref.text,
      children = _ref.children,
      className = _ref.className,
      rest = objectWithoutProperties(_ref, ["level", "text", "children", "className"]);

  var TagName = "h".concat(level);
  return React__default.createElement(TagName, _extends_1({
    className: classnames('heading', (_classnames = {}, defineProperty(_classnames, className, className), defineProperty(_classnames, "heading--level-".concat(level), level), _classnames))
  }, rest), text, children);
};

Heading.propTypes = {
  /** Level of this heading (1-6). */
  level: propTypes.oneOfType([propTypes.number, propTypes.string]).isRequired,

  /** Content of this heading. */
  text: propTypes.node,

  /** Content of this heading. */
  children: propTypes.node
};

/**
 * Status: *finished*.
 *
 * Use this component when you want to make the user aware of something, for instance:
 * - the chat to customer service is closed
 * - unpaid amount on invoice if date is past due date
 *
 * It's recommended to use this component with any heading component and only for short texts (for instance maximum five words).
 */

var AlertText = function AlertText(_ref) {
  var children = _ref.children,
      className = _ref.className,
      rest = objectWithoutProperties(_ref, ["children", "className"]);

  return React__default.createElement(Heading, _extends_1({
    className: classnames('alert-text', defineProperty({}, className, className)),
    level: 2,
    text: children
  }, rest));
};

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var classCallCheck = _classCallCheck;

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

var createClass = _createClass;

var _typeof_1 = createCommonjsModule(function (module) {
function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2(obj); }

function _typeof(obj) {
  if (typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol") {
    module.exports = _typeof = function _typeof(obj) {
      return _typeof2(obj);
    };
  } else {
    module.exports = _typeof = function _typeof(obj) {
      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof2(obj);
    };
  }

  return _typeof(obj);
}

module.exports = _typeof;
});

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

var assertThisInitialized = _assertThisInitialized;

function _possibleConstructorReturn(self, call) {
  if (call && (_typeof_1(call) === "object" || typeof call === "function")) {
    return call;
  }

  return assertThisInitialized(self);
}

var possibleConstructorReturn = _possibleConstructorReturn;

var getPrototypeOf = createCommonjsModule(function (module) {
function _getPrototypeOf(o) {
  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

module.exports = _getPrototypeOf;
});

var setPrototypeOf = createCommonjsModule(function (module) {
function _setPrototypeOf(o, p) {
  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

module.exports = _setPrototypeOf;
});

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) setPrototypeOf(subClass, superClass);
}

var inherits = _inherits;

/**
 * Status: *In progress*.
 *
 * A component that is used to create external reference to svg icons from the icon assets.
 * To show an icon, give the name of the icon (without file ending) and the desired color (defaults to black).
 */

var SvgIcon = function SvgIcon(_ref) {
  var _classnames;

  var iconName = _ref.iconName,
      color = _ref.color,
      className = _ref.className,
      title = _ref.title,
      rest = objectWithoutProperties(_ref, ["iconName", "color", "className", "title"]);

  return React__default.createElement("svg", _extends_1({
    className: classnames('svg-icon', (_classnames = {}, defineProperty(_classnames, className, className), defineProperty(_classnames, "svg-icon--".concat(color || 'black'), color), _classnames))
  }, rest), title && React__default.createElement("title", null, title), React__default.createElement("use", {
    xlinkHref: "#".concat(iconName)
  }));
};

SvgIcon.propTypes = {
  /** The name of the icon*/
  iconName: propTypes.string,

  /** The color of the icon (white, black, purple or grey)*/
  color: propTypes.oneOf(['white', 'black', 'purple', 'grey', 'light-grey']),

  /** Other class names*/
  className: propTypes.string,
  title: propTypes.string
};

/**
 * Status: *finished*.
 *
 * A Box component has a default size, but can be made into a small or a medium box.
 * It serves as a container with a colored border, and do not have any padding since the content
 * should be able to control that part.
 *
 * One or more Boxes can be used inside a <a href="/components/molecules#BoxGrid">BoxGrid</a> component.
 */

var Box =
/*#__PURE__*/
function (_React$Component) {
  inherits(Box, _React$Component);

  function Box(props) {
    var _this;

    classCallCheck(this, Box);

    _this = possibleConstructorReturn(this, getPrototypeOf(Box).call(this, props));
    _this.state = {
      isExpanded: _this.props.isExpanded ? _this.props.isExpanded : false
    };

    if (_this.props.canExpand) {
      _this.boxContainerClick = _this.boxContainerClick.bind(assertThisInitialized(assertThisInitialized(_this)));
      _this.closeBoxClick = _this.closeBoxClick.bind(assertThisInitialized(assertThisInitialized(_this)));
    }

    return _this;
  }

  createClass(Box, [{
    key: "boxContainerClick",
    value: function boxContainerClick(e) {
      if (!this.props.canExpand) return;

      if (e.type === 'click' || e.type === 'keyup' && (e.which === 13 || e.which === 32)) {
        if (!this.state.isExpanded) {
          this.setState({
            isExpanded: true
          });
        }
      }
    }
  }, {
    key: "closeBoxClick",
    value: function closeBoxClick(e) {
      e.stopPropagation();
      this.setState({
        isExpanded: false
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _classnames;

      var _this$props = this.props,
          className = _this$props.className,
          color = _this$props.color,
          size = _this$props.size,
          canExpand = _this$props.canExpand;
      var isExpanded = this.state.isExpanded;
      return React__default.createElement("article", {
        id: this.props.id,
        className: classnames('box', (_classnames = {}, defineProperty(_classnames, className, className), defineProperty(_classnames, "box--".concat(color), color), defineProperty(_classnames, "box--".concat(size), size), defineProperty(_classnames, 'box--expandable', canExpand), defineProperty(_classnames, 'box--is-expanded', isExpanded), _classnames)),
        onClick: this.boxContainerClick,
        onKeyUp: this.boxContainerClick,
        "aria-expanded": this.props.canExpand ? this.state.isExpanded : null,
        tabIndex: this.props.canExpand && !this.state.isExpanded ? '0' : null
      }, this.props.speechBubbleText ? React__default.createElement("div", {
        className: "box__speech-bubble"
      }, React__default.createElement("div", {
        className: "box__speech-bubble-text"
      }, this.props.speechBubbleText)) : React__default.createElement("div", {
        className: "box__speech-bubble box__speech-bubble--empty"
      }), this.state.isExpanded ? React__default.createElement("button", {
        className: "box__close-expanded-info",
        onClick: this.closeBoxClick,
        "aria-controls": this.props.id
      }, React__default.createElement("span", {
        className: "box__close-text"
      }, "LUKK"), React__default.createElement(SvgIcon, {
        className: "box__close-icon",
        iconName: "ico_delete",
        color: "black"
      })) : null, this.props.children);
    }
  }]);

  return Box;
}(React__default.Component);

Box.propTypes = {
  isExpanded: propTypes.bool,
  canExpand: propTypes.bool,
  color: propTypes.oneOf(['purple', 'pink', 'light-orange', 'green', 'blue', 'teal', 'grey', 'black']),
  size: propTypes.oneOf(['small', 'medium']),
  speechBubbleText: propTypes.string,

  /** close button aria-controls */
  id: propTypes.string
};

/**
 * Status: *finished*.
 */

var Button = function Button(_ref) {
  var _classnames;

  var text = _ref.text,
      kind = _ref.kind,
      size = _ref.size,
      onClick = _ref.onClick,
      className = _ref.className,
      processingText = _ref.processingText,
      isProcessing = _ref.isProcessing,
      isDisabled = _ref.isDisabled,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? 'button' : _ref$type,
      margin = _ref.margin,
      rest = objectWithoutProperties(_ref, ["text", "kind", "size", "onClick", "className", "processingText", "isProcessing", "isDisabled", "type", "margin"]);

  return React__default.createElement("button", _extends_1({
    className: classnames('button', (_classnames = {}, defineProperty(_classnames, "button--".concat(kind), !isDisabled && kind), defineProperty(_classnames, "button--".concat(size), size), defineProperty(_classnames, "button--margin-".concat(margin), margin), defineProperty(_classnames, 'button--processing', isProcessing), defineProperty(_classnames, 'button--disabled', isDisabled), defineProperty(_classnames, className, className), _classnames)),
    onClick: onClick,
    disabled: isProcessing || isDisabled,
    type: type
  }, rest), !isProcessing && text, isProcessing && React__default.createElement("span", {
    className: "button__processing"
  }, processingText, React__default.createElement("span", {
    className: "button__processing-dot"
  }, "."), React__default.createElement("span", {
    className: "button__processing-dot"
  }, "."), React__default.createElement("span", {
    className: "button__processing-dot"
  }, ".")));
};

Button.propTypes = {
  /** A button can have a text. */
  text: propTypes.string,
  type: propTypes.oneOf(['button', 'reset', 'submit']),

  /** A button can have different appearances e.g. 'primary', 'cancel'. */
  kind: propTypes.oneOf(['primary', 'cancel', 'link']),

  /** One of ['top', 'bottom'] */
  margin: propTypes.oneOf(['top', 'bottom']),

  /** A button can have different sizes e.g. 'small'. */
  size: propTypes.oneOf(['small']),
  onClick: propTypes.func,

  /** Additional classes. */
  className: propTypes.string,

  /** A button can change text while it is processing. */
  processingText: propTypes.string,

  /** A button can be in processing state */
  isProcessing: propTypes.bool,

  /** A button can be disabled.  */
  isDisabled: propTypes.bool
};

/**
 * Status: *finished*.
 */

var Caption = function Caption(_ref) {
  var className = _ref.className,
      children = _ref.children,
      rest = objectWithoutProperties(_ref, ["className", "children"]);

  return React__default.createElement("div", _extends_1({
    className: classnames('caption', defineProperty({}, className, className))
  }, rest), children);
};

/**
 * Status: *in progress*
 *
 * There are three main container widths: small, medium and large. Body text, such as this one, should be in a small container to reduce line width and make reading easier.
 */

var Container = function Container(_ref) {
  var _classnames;

  var children = _ref.children,
      className = _ref.className,
      size = _ref.size,
      noMargin = _ref.noMargin,
      noPadding = _ref.noPadding,
      noPaddingTop = _ref.noPaddingTop,
      extraPaddingTop = _ref.extraPaddingTop,
      extraMarginBottom = _ref.extraMarginBottom,
      whiteBg = _ref.whiteBg,
      overlappingFullWidthImage = _ref.overlappingFullWidthImage,
      rest = objectWithoutProperties(_ref, ["children", "className", "size", "noMargin", "noPadding", "noPaddingTop", "extraPaddingTop", "extraMarginBottom", "whiteBg", "overlappingFullWidthImage"]);

  return React__default.createElement("div", _extends_1({
    className: classnames('container', (_classnames = {}, defineProperty(_classnames, className, className), defineProperty(_classnames, "container--".concat(size), size), defineProperty(_classnames, 'container--no-margin', noMargin), defineProperty(_classnames, 'container--no-padding', noPadding), defineProperty(_classnames, 'container--no-padding-top', noPaddingTop), defineProperty(_classnames, 'container--extra-padding-top', extraPaddingTop), defineProperty(_classnames, 'container--extra-margin-bottom', extraMarginBottom), defineProperty(_classnames, 'container--white-bg', whiteBg), defineProperty(_classnames, 'container--overlapping-full-width-image', overlappingFullWidthImage), _classnames))
  }, rest), children);
};

Container.propTypes = {
  size: propTypes.oneOf(['small', 'medium', 'large']),
  noMargin: propTypes.bool,
  noPadding: propTypes.bool,
  noPaddingTop: propTypes.bool,
  extraPaddingTop: propTypes.bool,
  extraMarginBottom: propTypes.bool,
  whiteBg: propTypes.bool,
  overlappingFullWidthImage: propTypes.bool
};

/**
 * Status: *finished*
 */

var DescriptionList = function DescriptionList(_ref) {
  var _classnames;

  var children = _ref.children,
      wrapByTwo = _ref.wrapByTwo,
      className = _ref.className,
      rest = objectWithoutProperties(_ref, ["children", "wrapByTwo", "className"]);

  return React__default.createElement("dl", _extends_1({
    className: classnames('description-list', (_classnames = {}, defineProperty(_classnames, className, className), defineProperty(_classnames, 'description-list--wrap description-list--wrap-by-two', wrapByTwo), _classnames))
  }, rest), children);
};

DescriptionList.propTypes = {
  /** Pairs of Dt or Dd. */
  children: propTypes.node,

  /** Whenever should each column contain only two pairs. */
  wrapByTwo: propTypes.bool
};

DescriptionList.Dd = function (_ref2) {
  var children = _ref2.children,
      className = _ref2.className,
      rest = objectWithoutProperties(_ref2, ["children", "className"]);

  return React__default.createElement("dd", _extends_1({
    className: classnames('description-list__details', defineProperty({}, className, className))
  }, rest), children);
};

DescriptionList.Dt = function (_ref3) {
  var children = _ref3.children,
      className = _ref3.className,
      rest = objectWithoutProperties(_ref3, ["children", "className"]);

  return React__default.createElement("dt", _extends_1({
    className: classnames('description-list__term', defineProperty({}, className, className))
  }, rest), children);
};

/**
 * Status: *finished*
 *
 * The css-class <code>.horizontal-rule</code> can be used on any element to give it a grey border in bottom of
 * the element, or it can be used on the <code>&lt;hr/&gt;</code> tag as a standalone component.
 * The style should be used to define a thematic break.
 */

var HorizontalRule = function HorizontalRule(_ref) {
  var _classnames;

  var className = _ref.className,
      short = _ref.short,
      left = _ref.left,
      rest = objectWithoutProperties(_ref, ["className", "short", "left"]);

  return React__default.createElement("hr", _extends_1({
    className: classnames('horizontal-rule', (_classnames = {}, defineProperty(_classnames, className, className), defineProperty(_classnames, 'horizontal-rule--short', short), defineProperty(_classnames, 'horizontal-rule--left', left), _classnames))
  }, rest));
};

HorizontalRule.propTypes = {
  /** Whenever this should be short or not. */
  short: propTypes.bool,

  /** Whenever this should be left aligned. */
  left: propTypes.bool
};

/**
 * The base implementation of `_.slice` without an iteratee call guard.
 *
 * @private
 * @param {Array} array The array to slice.
 * @param {number} [start=0] The start position.
 * @param {number} [end=array.length] The end position.
 * @returns {Array} Returns the slice of `array`.
 */
function baseSlice(array, start, end) {
  var index = -1,
      length = array.length;

  if (start < 0) {
    start = -start > length ? 0 : (length + start);
  }
  end = end > length ? length : end;
  if (end < 0) {
    end += length;
  }
  length = start > end ? 0 : ((end - start) >>> 0);
  start >>>= 0;

  var result = Array(length);
  while (++index < length) {
    result[index] = array[index + start];
  }
  return result;
}

var _baseSlice = baseSlice;

/**
 * Casts `array` to a slice if it's needed.
 *
 * @private
 * @param {Array} array The array to inspect.
 * @param {number} start The start position.
 * @param {number} [end=array.length] The end position.
 * @returns {Array} Returns the cast slice.
 */
function castSlice(array, start, end) {
  var length = array.length;
  end = end === undefined ? length : end;
  return (!start && end >= length) ? array : _baseSlice(array, start, end);
}

var _castSlice = castSlice;

/** Used to compose unicode character classes. */
var rsAstralRange = '\\ud800-\\udfff',
    rsComboMarksRange = '\\u0300-\\u036f',
    reComboHalfMarksRange = '\\ufe20-\\ufe2f',
    rsComboSymbolsRange = '\\u20d0-\\u20ff',
    rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,
    rsVarRange = '\\ufe0e\\ufe0f';

/** Used to compose unicode capture groups. */
var rsZWJ = '\\u200d';

/** Used to detect strings with [zero-width joiners or code points from the astral planes](http://eev.ee/blog/2015/09/12/dark-corners-of-unicode/). */
var reHasUnicode = RegExp('[' + rsZWJ + rsAstralRange  + rsComboRange + rsVarRange + ']');

/**
 * Checks if `string` contains Unicode symbols.
 *
 * @private
 * @param {string} string The string to inspect.
 * @returns {boolean} Returns `true` if a symbol is found, else `false`.
 */
function hasUnicode(string) {
  return reHasUnicode.test(string);
}

var _hasUnicode = hasUnicode;

/**
 * Converts an ASCII `string` to an array.
 *
 * @private
 * @param {string} string The string to convert.
 * @returns {Array} Returns the converted array.
 */
function asciiToArray(string) {
  return string.split('');
}

var _asciiToArray = asciiToArray;

/** Used to compose unicode character classes. */
var rsAstralRange$1 = '\\ud800-\\udfff',
    rsComboMarksRange$1 = '\\u0300-\\u036f',
    reComboHalfMarksRange$1 = '\\ufe20-\\ufe2f',
    rsComboSymbolsRange$1 = '\\u20d0-\\u20ff',
    rsComboRange$1 = rsComboMarksRange$1 + reComboHalfMarksRange$1 + rsComboSymbolsRange$1,
    rsVarRange$1 = '\\ufe0e\\ufe0f';

/** Used to compose unicode capture groups. */
var rsAstral = '[' + rsAstralRange$1 + ']',
    rsCombo = '[' + rsComboRange$1 + ']',
    rsFitz = '\\ud83c[\\udffb-\\udfff]',
    rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',
    rsNonAstral = '[^' + rsAstralRange$1 + ']',
    rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}',
    rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]',
    rsZWJ$1 = '\\u200d';

/** Used to compose unicode regexes. */
var reOptMod = rsModifier + '?',
    rsOptVar = '[' + rsVarRange$1 + ']?',
    rsOptJoin = '(?:' + rsZWJ$1 + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',
    rsSeq = rsOptVar + reOptMod + rsOptJoin,
    rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')';

/** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */
var reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g');

/**
 * Converts a Unicode `string` to an array.
 *
 * @private
 * @param {string} string The string to convert.
 * @returns {Array} Returns the converted array.
 */
function unicodeToArray(string) {
  return string.match(reUnicode) || [];
}

var _unicodeToArray = unicodeToArray;

/**
 * Converts `string` to an array.
 *
 * @private
 * @param {string} string The string to convert.
 * @returns {Array} Returns the converted array.
 */
function stringToArray(string) {
  return _hasUnicode(string)
    ? _unicodeToArray(string)
    : _asciiToArray(string);
}

var _stringToArray = stringToArray;

/** Detect free variable `global` from Node.js. */
var freeGlobal = typeof global$1 == 'object' && global$1 && global$1.Object === Object && global$1;

var _freeGlobal = freeGlobal;

/** Detect free variable `self`. */
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;

/** Used as a reference to the global object. */
var root = _freeGlobal || freeSelf || Function('return this')();

var _root = root;

/** Built-in value references. */
var Symbol$1 = _root.Symbol;

var _Symbol = Symbol$1;

/**
 * A specialized version of `_.map` for arrays without support for iteratee
 * shorthands.
 *
 * @private
 * @param {Array} [array] The array to iterate over.
 * @param {Function} iteratee The function invoked per iteration.
 * @returns {Array} Returns the new mapped array.
 */
function arrayMap(array, iteratee) {
  var index = -1,
      length = array == null ? 0 : array.length,
      result = Array(length);

  while (++index < length) {
    result[index] = iteratee(array[index], index, array);
  }
  return result;
}

var _arrayMap = arrayMap;

/**
 * Checks if `value` is classified as an `Array` object.
 *
 * @static
 * @memberOf _
 * @since 0.1.0
 * @category Lang
 * @param {*} value The value to check.
 * @returns {boolean} Returns `true` if `value` is an array, else `false`.
 * @example
 *
 * _.isArray([1, 2, 3]);
 * // => true
 *
 * _.isArray(document.body.children);
 * // => false
 *
 * _.isArray('abc');
 * // => false
 *
 * _.isArray(_.noop);
 * // => false
 */
var isArray = Array.isArray;

var isArray_1 = isArray;

/** Used for built-in method references. */
var objectProto = Object.prototype;

/** Used to check objects for own properties. */
var hasOwnProperty$1 = objectProto.hasOwnProperty;

/**
 * Used to resolve the
 * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
 * of values.
 */
var nativeObjectToString = objectProto.toString;

/** Built-in value references. */
var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;

/**
 * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
 *
 * @private
 * @param {*} value The value to query.
 * @returns {string} Returns the raw `toStringTag`.
 */
function getRawTag(value) {
  var isOwn = hasOwnProperty$1.call(value, symToStringTag),
      tag = value[symToStringTag];

  try {
    value[symToStringTag] = undefined;
  } catch (e) {}

  var result = nativeObjectToString.call(value);
  {
    if (isOwn) {
      value[symToStringTag] = tag;
    } else {
      delete value[symToStringTag];
    }
  }
  return result;
}

var _getRawTag = getRawTag;

/** Used for built-in method references. */
var objectProto$1 = Object.prototype;

/**
 * Used to resolve the
 * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
 * of values.
 */
var nativeObjectToString$1 = objectProto$1.toString;

/**
 * Converts `value` to a string using `Object.prototype.toString`.
 *
 * @private
 * @param {*} value The value to convert.
 * @returns {string} Returns the converted string.
 */
function objectToString(value) {
  return nativeObjectToString$1.call(value);
}

var _objectToString = objectToString;

/** `Object#toString` result references. */
var nullTag = '[object Null]',
    undefinedTag = '[object Undefined]';

/** Built-in value references. */
var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;

/**
 * The base implementation of `getTag` without fallbacks for buggy environments.
 *
 * @private
 * @param {*} value The value to query.
 * @returns {string} Returns the `toStringTag`.
 */
function baseGetTag(value) {
  if (value == null) {
    return value === undefined ? undefinedTag : nullTag;
  }
  return (symToStringTag$1 && symToStringTag$1 in Object(value))
    ? _getRawTag(value)
    : _objectToString(value);
}

var _baseGetTag = baseGetTag;

/**
 * Checks if `value` is object-like. A value is object-like if it's not `null`
 * and has a `typeof` result of "object".
 *
 * @static
 * @memberOf _
 * @since 4.0.0
 * @category Lang
 * @param {*} value The value to check.
 * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
 * @example
 *
 * _.isObjectLike({});
 * // => true
 *
 * _.isObjectLike([1, 2, 3]);
 * // => true
 *
 * _.isObjectLike(_.noop);
 * // => false
 *
 * _.isObjectLike(null);
 * // => false
 */
function isObjectLike(value) {
  return value != null && typeof value == 'object';
}

var isObjectLike_1 = isObjectLike;

/** `Object#toString` result references. */
var symbolTag = '[object Symbol]';

/**
 * Checks if `value` is classified as a `Symbol` primitive or object.
 *
 * @static
 * @memberOf _
 * @since 4.0.0
 * @category Lang
 * @param {*} value The value to check.
 * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
 * @example
 *
 * _.isSymbol(Symbol.iterator);
 * // => true
 *
 * _.isSymbol('abc');
 * // => false
 */
function isSymbol(value) {
  return typeof value == 'symbol' ||
    (isObjectLike_1(value) && _baseGetTag(value) == symbolTag);
}

var isSymbol_1 = isSymbol;

/** Used as references for various `Number` constants. */
var INFINITY = 1 / 0;

/** Used to convert symbols to primitives and strings. */
var symbolProto = _Symbol ? _Symbol.prototype : undefined,
    symbolToString = symbolProto ? symbolProto.toString : undefined;

/**
 * The base implementation of `_.toString` which doesn't convert nullish
 * values to empty strings.
 *
 * @private
 * @param {*} value The value to process.
 * @returns {string} Returns the string.
 */
function baseToString(value) {
  // Exit early for strings to avoid a performance hit in some environments.
  if (typeof value == 'string') {
    return value;
  }
  if (isArray_1(value)) {
    // Recursively convert values (susceptible to call stack limits).
    return _arrayMap(value, baseToString) + '';
  }
  if (isSymbol_1(value)) {
    return symbolToString ? symbolToString.call(value) : '';
  }
  var result = (value + '');
  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
}

var _baseToString = baseToString;

/**
 * Converts `value` to a string. An empty string is returned for `null`
 * and `undefined` values. The sign of `-0` is preserved.
 *
 * @static
 * @memberOf _
 * @since 4.0.0
 * @category Lang
 * @param {*} value The value to convert.
 * @returns {string} Returns the converted string.
 * @example
 *
 * _.toString(null);
 * // => ''
 *
 * _.toString(-0);
 * // => '-0'
 *
 * _.toString([1, 2, 3]);
 * // => '1,2,3'
 */
function toString(value) {
  return value == null ? '' : _baseToString(value);
}

var toString_1 = toString;

/**
 * Creates a function like `_.lowerFirst`.
 *
 * @private
 * @param {string} methodName The name of the `String` case method to use.
 * @returns {Function} Returns the new case function.
 */
function createCaseFirst(methodName) {
  return function(string) {
    string = toString_1(string);

    var strSymbols = _hasUnicode(string)
      ? _stringToArray(string)
      : undefined;

    var chr = strSymbols
      ? strSymbols[0]
      : string.charAt(0);

    var trailing = strSymbols
      ? _castSlice(strSymbols, 1).join('')
      : string.slice(1);

    return chr[methodName]() + trailing;
  };
}

var _createCaseFirst = createCaseFirst;

/**
 * Converts the first character of `string` to upper case.
 *
 * @static
 * @memberOf _
 * @since 4.0.0
 * @category String
 * @param {string} [string=''] The string to convert.
 * @returns {string} Returns the converted string.
 * @example
 *
 * _.upperFirst('fred');
 * // => 'Fred'
 *
 * _.upperFirst('FRED');
 * // => 'FRED'
 */
var upperFirst = _createCaseFirst('toUpperCase');

var upperFirst_1 = upperFirst;

/**
 * Status: *finished*.
 */

var IconLink = function IconLink(_ref) {
  var className = _ref.className,
      iconName = _ref.iconName,
      rest = objectWithoutProperties(_ref, ["className", "iconName"]);

  return React__default.createElement("a", _extends_1({
    className: classnames('icon-link', defineProperty({}, className, className)),
    "aria-label": upperFirst_1(iconName)
  }, rest), React__default.createElement(SvgIcon, {
    iconName: iconName,
    color: "black",
    className: "icon-link__icon"
  }));
};

IconLink.propTypes = {
  /** One of 'download', 'linkedIn' or 'twitter'. */
  iconName: propTypes.oneOf(['ico_download', 'linkedin_icon', 'twitter_icon'])
};

/**
 * Status: *finished*
 */

var InputError = function InputError(_ref) {
  var className = _ref.className,
      children = _ref.children,
      rest = objectWithoutProperties(_ref, ["className", "children"]);

  return React__default.createElement("span", _extends_1({
    className: classnames('input-error', defineProperty({}, className, className))
  }, rest), children);
};

/**
 * Status: *finished*
 *
 * This table component use negative margins to achieve full width rows in the table,
 * and padding to add back the negative margin value. To avoid horizontal scrolling
 * it is important to style the nearest full width element with <code>overflow-x: hidden;</code>.
 *
 * It's also recommended to use this component within an element with a styling that centers-, and
 * sets the content to a max-width.
 */

var FullWidthTable = function FullWidthTable(_ref) {
  var children = _ref.children,
      className = _ref.className,
      rest = objectWithoutProperties(_ref, ["children", "className"]);

  return React__default.createElement("table", _extends_1({
    className: classnames('full-width-table', defineProperty({}, className, className))
  }, rest), children);
};

FullWidthTable.THead = function (_ref2) {
  var children = _ref2.children,
      className = _ref2.className,
      rest = objectWithoutProperties(_ref2, ["children", "className"]);

  return React__default.createElement("thead", _extends_1({
    className: classnames('full-width-table__header', defineProperty({}, className, className))
  }, rest), children);
};

FullWidthTable.TBody = function (_ref3) {
  var children = _ref3.children,
      className = _ref3.className,
      rest = objectWithoutProperties(_ref3, ["children", "className"]);

  return React__default.createElement("tbody", _extends_1({
    className: classnames('full-width-table__body', defineProperty({}, className, className))
  }, rest), children);
};

FullWidthTable.TFoot = function (_ref4) {
  var _classnames4;

  var children = _ref4.children,
      white = _ref4.white,
      className = _ref4.className,
      rest = objectWithoutProperties(_ref4, ["children", "white", "className"]);

  return React__default.createElement("tfoot", _extends_1({
    className: classnames('full-width-table__footer', (_classnames4 = {}, defineProperty(_classnames4, className, className), defineProperty(_classnames4, 'full-width-table__footer--alt', white), _classnames4))
  }, rest), children);
};

FullWidthTable.Tr = function (_ref5) {
  var children = _ref5.children,
      className = _ref5.className,
      rest = objectWithoutProperties(_ref5, ["children", "className"]);

  return React__default.createElement("tr", _extends_1({
    className: classnames('full-width-table__row', defineProperty({}, className, className))
  }, rest), children);
};

FullWidthTable.Td = function (_ref6) {
  var children = _ref6.children,
      className = _ref6.className,
      rest = objectWithoutProperties(_ref6, ["children", "className"]);

  return React__default.createElement("th", _extends_1({
    className: classnames('full-width-table__cell', defineProperty({}, className, className))
  }, rest), children);
};

FullWidthTable.Th = function (_ref7) {
  var children = _ref7.children,
      className = _ref7.className,
      rest = objectWithoutProperties(_ref7, ["children", "className"]);

  return React__default.createElement("th", _extends_1({
    className: classnames('full-width-table__cell', defineProperty({}, className, className))
  }, rest), children);
};

/**
 * Status: *finished*
 *
 * Standard color is black. Labels used with TextBoxWithLabel, TextAreaWithLabel and DropDownListWithLabel should appear on top of input element and be in grey color.
 */

var Label = function Label(_ref) {
  var _classnames;

  var text = _ref.text,
      children = _ref.children,
      isUsingGrayText = _ref.isUsingGrayText,
      className = _ref.className,
      rest = objectWithoutProperties(_ref, ["text", "children", "isUsingGrayText", "className"]);

  return React__default.createElement("label", _extends_1({
    className: classnames('label', (_classnames = {}, defineProperty(_classnames, className, className), defineProperty(_classnames, 'label--gray-text', isUsingGrayText), _classnames))
  }, rest), text || children);
};

Label.propTypes = {
  /** Content of this label. */
  text: propTypes.node,

  /** Content of this label. */
  children: propTypes.node,
  isUsingGrayText: propTypes.bool
};

/**
 * Status: *finished*.
 *
 * The target attribute is set to '_self' which is the default value if the attribute is not specified.
 * If you rather prefer to open the linked document in a new browser window or tab, you can set the target to '_blank' instead.
 *
 * Our links have _two visual means_ of being identified: an underline and bolder font.
 */

var Link = function Link(_ref) {
  var _classnames;

  var className = _ref.className,
      text = _ref.text,
      children = _ref.children,
      href = _ref.href,
      icon = _ref.icon,
      iconPosition = _ref.iconPosition,
      _ref$target = _ref.target,
      target = _ref$target === void 0 ? '_self' : _ref$target,
      rest = objectWithoutProperties(_ref, ["className", "text", "children", "href", "icon", "iconPosition", "target"]);

  return React__default.createElement("a", _extends_1({
    className: classnames('link', (_classnames = {}, defineProperty(_classnames, "link--with-icon link--".concat(icon), icon), defineProperty(_classnames, "link--icon-".concat(iconPosition), icon && iconPosition), defineProperty(_classnames, className, className), _classnames)),
    href: href,
    target: target
  }, rest), text, children);
};

Link.propTypes = {
  /** Content of this link. */
  text: propTypes.node,

  /** Content of this link. */
  children: propTypes.node,
  target: propTypes.string,

  /** Choose between forward arrow (forward-icon) and backward arrow (back-icon) icon */
  icon: propTypes.oneOf(['forward-icon', 'back-icon']),

  /** Set position of icon (before or after) */
  iconPosition: propTypes.oneOf(['before', 'after'])
};

/**
 * Status: *finished*
 */

var List = function List(_ref) {
  var _classnames;

  var children = _ref.children,
      className = _ref.className,
      wrapByThree = _ref.wrapByThree,
      wrapByFour = _ref.wrapByFour,
      black = _ref.black,
      rest = objectWithoutProperties(_ref, ["children", "className", "wrapByThree", "wrapByFour", "black"]);

  // Determine css classes to use based on the children.
  var childrenArray = React__default.Children.toArray(children);
  var hasBubbleLinks = childrenArray.find(function (it) {
    return it.type === List.Item && it.props.children.type === List.BubbleLink;
  });
  var hasLinks = !hasBubbleLinks && childrenArray.find(function (it) {
    return it.type === List.Item && it.props.children.type === List.Link;
  });
  return React__default.createElement("ul", _extends_1({
    className: classnames('list', (_classnames = {}, defineProperty(_classnames, className, className), defineProperty(_classnames, 'list--icon-text-links', hasBubbleLinks), defineProperty(_classnames, 'list--links', hasLinks), defineProperty(_classnames, 'list--black', black), defineProperty(_classnames, 'list--wrap list--wrap-by-three', wrapByThree), defineProperty(_classnames, 'list--wrap list--wrap-by-four', wrapByFour), _classnames))
  }, rest), children);
};

List.propTypes = {
  /** Additional classes. */
  className: propTypes.string,

  /** Whenever this should wrap children by 3 per column. */
  wrapByThree: propTypes.bool,

  /** Whenever this should wrap children by 4 per column. */
  wrapByFour: propTypes.bool,

  /** Whenever should children be black. */
  black: propTypes.bool
};

List.Item = function (_ref2) {
  var children = _ref2.children,
      rest = objectWithoutProperties(_ref2, ["children"]);

  return React__default.createElement("li", _extends_1({
    className: "list__item"
  }, rest), children);
};

List.Link = function (_ref3) {
  var children = _ref3.children,
      className = _ref3.className,
      rest = objectWithoutProperties(_ref3, ["children", "className"]);

  return React__default.createElement(Link, _extends_1({
    className: classnames('list__link', defineProperty({}, className, className))
  }, rest, {
    text: children
  }));
};

List.BubbleLink = function (_ref4) {
  var children = _ref4.children,
      iconName = _ref4.iconName,
      rest = objectWithoutProperties(_ref4, ["children", "iconName"]);

  return React__default.createElement(List.Link, rest, React__default.createElement("span", {
    className: "list__link-bubble"
  }, React__default.createElement(SvgIcon, {
    iconName: iconName,
    color: "white",
    className: "list__link-icon"
  })), React__default.createElement("span", {
    className: "list__link-text"
  }, children));
};

List.BubbleLink.propTypes = {
  /** Url of an icon to use. */
  iconSvg: propTypes.node
};

/**
 * Status: *finished*.
 * <p>
 *   Use the CSS class <code>.page-pebbles</code> if you want pebbles as decoration on your page.
 *   This applies to devices wider than or equal to 900px.
 * </p>
 * <p>
 *   If you want another pattern of the pebbles, add a second class like this:
 *   <code>.page-pebbles .page-pebbles--variation-1</code>.
 *   There are five variation classes with numbers from 1-5 that you can choose between.
 * </p>
 * <p>
 *   The pebble decoration is safe to use- and will not overlap the page content when you have
 *   it wrapped inside <code>.body-text-container</code> or content is of similar or smaller width.
 * </p>
 */

var PagePebbles = function PagePebbles() {
  return React__default.createElement("div", {
    className: "page-pebbles"
  });
};

/**
 * Status: *in progress*.
 *
 * Work remaining:
 *
 * - Consider doing some basic styling for `<p>` on a global level. Current implementation requires class .paragraph to get any styling.
 * - Consider if max-width (for readability) should be implemented on the paragraph or in the context
 * - There may be a need for more variations
 */

var Paragraph = function Paragraph(_ref) {
  var _classnames;

  var children = _ref.children,
      className = _ref.className,
      kind = _ref.kind,
      rest = objectWithoutProperties(_ref, ["children", "className", "kind"]);

  return React__default.createElement("p", _extends_1({
    className: classnames('paragraph', (_classnames = {}, defineProperty(_classnames, className, className), defineProperty(_classnames, "paragraph--".concat(kind), kind), _classnames))
  }, rest), children);
};

Paragraph.propTypes = {
  /** One of 'fineprint' or 'preamble'. */
  kind: propTypes.oneOf(['fineprint', 'preamble'])
};

var clamp = function clamp(min, max, value) {
  if (value < min) return min;
  if (value > max) return max;
  return value;
};
/**
 * Status: *in progress*.
 */


var ProgressBar = function ProgressBar(_ref) {
  var value = _ref.value,
      min = _ref.min,
      max = _ref.max,
      barColor = _ref.barColor,
      disabled = _ref.disabled;
  return React__default.createElement("div", {
    className: "progress"
  }, React__default.createElement("div", {
    className: classnames('progress__bar', "progress__bar--".concat(barColor), {
      'progress__bar--disabled': disabled
    }),
    role: "progressbar",
    "aria-valuenow": clamp(min, max, value),
    "aria-valuemin": min,
    "aria-valuemax": max,
    style: {
      width: "".concat((clamp(min, max, value) - min) / (max - min) * 100, "%")
    }
  }));
};

ProgressBar.propTypes = {
  value: propTypes.number.isRequired,
  min: propTypes.number.isRequired,
  max: propTypes.number.isRequired,
  barColor: propTypes.string,
  disabled: propTypes.bool
};
Progress