@decisiv/ui-components 2.0.1-alpha.20 → 2.0.1-alpha.201

package/lib/components/Badge/index.test.js

@@ -10,6 +10,8 @@ var _Home = _interopRequireDefault(require("@decisiv/iconix/lib/components/Home"
 
 var _ = _interopRequireDefault(require("."));
 
+var _constants = require("./constants");
+
 var _commonUIColors = require("../../utils/commonUIColors");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -53,16 +55,36 @@ describe('Badge', function () {
       expect(container).toMatchSnapshot();
     });
   });
+  ['bright', 'pastel'].forEach(function (palette) {
+    it("renders correctly with palette=\"".concat(palette, "\""), function () {
+      var _renderBadge3 = renderBadge({
+        palette: palette,
+        color: 'carrotCake'
+      }),
+          container = _renderBadge3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+  it("renders correctly with size=\"small\" and variant=\"square\"", function () {
+    var _renderBadge4 = renderBadge({
+      size: 'small',
+      variant: 'square'
+    }),
+        container = _renderBadge4.container;
+
+    expect(container).toMatchSnapshot();
+  });
   it('renders correctly in any of the common UI colors', function () {
     Object.entries(_commonUIColors.commonUIColors).forEach(function (_ref) {
       var _ref2 = _slicedToArray(_ref, 2),
           key = _ref2[0],
           value = _ref2[1];
 
-      var _renderBadge3 = renderBadge({
+      var _renderBadge5 = renderBadge({
         color: key
       }),
-          container = _renderBadge3.container;
+          container = _renderBadge5.container;
 
       expect(container.firstChild).toHaveStyleRule('background-color', (0, _toColorString.default)(value));
     });
@@ -75,12 +97,44 @@ describe('Badge', function () {
       // @ts-ignore
       console.error.mockRestore();
     });
-    it('warns if variant="square" and size="large"', function () {
-      renderBadge({
-        size: 'large',
-        variant: 'square'
-      });
-      expect(console.error).toHaveBeenCalledWith("Warning: Failed prop type: The prop 'variant' can not be 'square' if the 'size' prop is 'large'.\n    in Badge");
+    it('warns for invalid size/variant combinations', function () {
+      var sizes = ['small', 'medium', 'large'];
+      var variants = ['round', 'square'];
+      var validCombinations = Object.keys(_constants.sizeStyles);
+
+      for (var _i2 = 0, _sizes = sizes; _i2 < _sizes.length; _i2++) {
+        var size = _sizes[_i2];
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+
+        try {
+          for (var _iterator = variants[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var variant = _step.value;
+
+            if (!validCombinations.includes("".concat(size, ".").concat(variant))) {
+              renderBadge({
+                size: size,
+                variant: variant
+              });
+              expect(console.error).toHaveBeenCalledWith("Warning: Failed prop type: The Badge component does not support the '".concat(size, "' size and '").concat(variant, "' variant props combination.\n    in Badge"));
+            }
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+              _iterator.return();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+      }
     });
   });
 });

package/lib/components/Badge/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAqC,CAAC;AAwBlD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAqC,CAAC;AA4BlD,eAAe,MAAM,CAAC"}

package/lib/components/Badge/schema.js

@@ -15,7 +15,8 @@ schema.propTypes = {
   'aria-label': _reactDesc.PropTypes.string.description('Descriptive text for accessibility purposes').isRequired,
   color: _reactDesc.PropTypes.string.description('(See note) Sets the color for the background and the icon').defaultValue('information'),
   icon: _reactDesc.PropTypes.element.description('Must be an icon component from `@decisiv/iconix`').isRequired,
-  size: _reactDesc.PropTypes.oneOf(['medium', 'large']).description('(See note) Sets the size of the badge').defaultValue('medium'),
+  palette: _reactDesc.PropTypes.oneOf(['bright', 'pastel']).description('What color variant to render').defaultValue('bright'),
+  size: _reactDesc.PropTypes.oneOf(['small', 'medium', 'large']).description('(See note) Sets the size of the badge').defaultValue('medium'),
   variant: _reactDesc.PropTypes.oneOf(['round', 'square']).description('(See note) Controls primary style variations of the badge').defaultValue('round')
 };
 var _default = schema;

package/lib/components/Badge/styles.d.ts

@@ -0,0 +1,3 @@
+import { BadgeProps } from './types';
+export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, Pick<BadgeProps, "variant" | "size" | "color" | "palette">, never>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/components/Badge/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/styles.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA+DrC,eAAO,MAAM,cAAc,4HAQ1B,CAAC"}

package/lib/components/Badge/styles.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BadgeContainer = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styledComponentsModifiers = require("styled-components-modifiers");
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _color = _interopRequireDefault(require("../../modifiers/color"));
+
+var _constants = require("./constants");
+
+var _commonUIColors = require("../../utils/commonUIColors");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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 FG_COLOR = {
+  pastel: 'dark'
+};
+var PALETTE_MAPPER = {
+  pastel: 'light',
+  bright: 'medium'
+};
+
+var colorModifiers = function colorModifiers(props) {
+  var _props$palette = props.palette,
+      palette = _props$palette === void 0 ? 'bright' : _props$palette,
+      color = props.color;
+
+  if (color && color in _commonUIColors.commonUIColors) {
+    var baseColor = _commonUIColors.commonUIThreeShadeColors[color];
+    var fgColor = palette === 'bright' ? _designTokens.color.base.snowWhite : baseColor[FG_COLOR[palette]];
+    var bgColor = baseColor[PALETTE_MAPPER[palette]];
+    var colorPalette = palette === 'bright' ? bgColor : _objectSpread({}, bgColor, {
+      fg: fgColor
+    });
+    return (0, _styledComponents.css)(["", ""], (0, _color.default)(colorPalette));
+  }
+
+  return null;
+};
+
+var getSizeStyles = function getSizeStyles(key) {
+  return (0, _styledComponents.css)(_constants.sizeStyles[key] || '');
+};
+
+var sizeModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
+  small: function small(_ref) {
+    var v = _ref.variant;
+    return getSizeStyles("small.".concat(v));
+  },
+  medium: function medium(_ref2) {
+    var v = _ref2.variant;
+    return getSizeStyles("medium.".concat(v));
+  },
+  large: function large(_ref3) {
+    var v = _ref3.variant;
+    return getSizeStyles("large.".concat(v));
+  }
+}, 'size');
+var variantModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
+  round: function round() {
+    return (0, _styledComponents.css)({
+      borderRadius: '50%'
+    });
+  },
+  square: function square() {
+    return (0, _styledComponents.css)({
+      borderRadius: '2px'
+    });
+  }
+}, 'variant'); // The default coloring is explicitly set instead of relying on the
+// `visualInterest.licoriceMousse.medium` colors. The "default" badge is
+// intended to be used in “empty” and/or “no results” messages, the snowWhite
+// fg color and lower contrast help convey “emptiness”.
+// eslint-disable-next-line import/prefer-default-export
+
+var BadgeContainer = _styledComponents.default.div.withConfig({
+  displayName: "styles__BadgeContainer",
+  componentId: "sc-1lruwqa-0"
+})(["align-items:center;display:inline-flex;justify-content:center;", ";", ";", ";"], colorModifiers, sizeModifiers, variantModifiers);
+
+exports.BadgeContainer = BadgeContainer;

package/lib/components/Badge/types.d.ts

@@ -8,12 +8,13 @@ export interface BadgeProps {
     'aria-label': string;
     color?: CommonUIColorKeys;
     icon: IconComponent;
-    size?: 'medium' | 'large';
+    palette?: 'pastel' | 'bright';
+    size?: 'small' | 'medium' | 'large';
     variant?: 'round' | 'square';
 }
 declare function variantValidator(props: BadgeProps, propName: 'variant', componentName: 'Badge'): Error | null;
 export declare const propTypes: {
-    color: PropTypes.Requireable<CommonUIColorKeys>;
+    color: PropTypes.Requireable<"danger" | "success" | "information" | "warning" | "berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse">;
     icon: PropTypes.Validator<PropTypes.ReactComponentLike>;
     size: PropTypes.Requireable<string>;
     variant: typeof variantValidator;

package/lib/components/Badge/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AAEpC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,oBAAY,QAAQ,GAAG,cAAc,CAAC;AAEtC,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,iBAAS,gBAAgB,CACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAE,OAAO,GACrB,KAAK,GAAG,IAAI,CAqBd;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AAIpC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,oBAAY,QAAQ,GAAG,cAAc,CAAC;AAItC,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,iBAAS,gBAAgB,CACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAE,OAAO,GACrB,KAAK,GAAG,IAAI,CAqBd;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC"}

package/lib/components/Badge/types.js

@@ -9,15 +9,19 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _commonUIColors = require("../../utils/commonUIColors");
 
+var _constants = require("./constants");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var validSizeVariantCombinations = Object.keys(_constants.sizeStyles);
+
 function variantValidator(props, propName, componentName) {
   if (process.env.NODE_ENV !== 'production') {
     var size = props.size,
         variant = props[propName];
 
-    if (size === 'large' && variant === 'square') {
-      return Error("The prop '".concat(propName, "' can not be 'square' if the 'size' prop is 'large'."));
+    if (!validSizeVariantCombinations.includes("".concat(size, ".").concat(variant))) {
+      return Error("The Badge component does not support the '".concat(size, "' size and '").concat(variant, "' variant props combination."));
     }
 
     _propTypes.default.checkPropTypes({
@@ -33,7 +37,7 @@ function variantValidator(props, propName, componentName) {
 var propTypes = {
   color: _propTypes.default.oneOf(_commonUIColors.commonUIColorKeys),
   icon: _propTypes.default.elementType.isRequired,
-  size: _propTypes.default.oneOf(['medium', 'large']),
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   variant: variantValidator
 };
 exports.propTypes = propTypes;

package/lib/components/Breadcrumbs/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Button/StyledButton.d.ts

@@ -1,10 +1,7 @@
 import React from 'react';
-import { Size, Kind, Intent, Variant } from './types';
-export interface StyledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    kind?: Kind;
-    intent?: Intent;
-    variant?: Variant;
-    size: Size;
+import { ButtonProps } from './types';
+export interface StyledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonProps {
+    $loading?: ButtonProps['loading'];
 }
 declare const StyledButton: import("styled-components").StyledComponent<"button", any, StyledButtonProps, never>;
 export default StyledButton;

package/lib/components/Button/StyledButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/StyledButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsB1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAe,MAAM,SAAS,CAAC;AA0JnE,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,QAAA,MAAM,YAAY,sFAkBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"StyledButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/StyledButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B,OAAO,EAAQ,WAAW,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,WAAW;IACb,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACnC;AA6LD,QAAA,MAAM,YAAY,sFAkBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Button/StyledButton.js

@@ -17,6 +17,8 @@ var _designTokens = _interopRequireWildcard(require("@decisiv/design-tokens"));
 
 var _ConfigProvider = require("../../providers/ConfigProvider");
 
+var _dynamicModifiers = require("../../utils/dynamicModifiers");
+
 var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
 
 var _BaseButton = _interopRequireDefault(require("../../atoms/BaseButton"));
@@ -45,31 +47,57 @@ var color = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'var
     dark: (0, _styledComponents.css)(["background-color:", ";color:", ";&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){background-color:", ";color:", ";}"], _colors.interactionPrimaryLightFg, _colors.interactionPrimaryLight, _colors.focusRingColors.dark.inverted.primary.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.dark.inverted.primary.shadow), _colors.snowWhiteAlpha, _colors.interactionPrimaryLightFg)
   },
   ghost: {
-    light: (0, _styledComponents.css)(["background-color:transparent;color:", ";padding:0;&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){color:", ";}&:disabled:disabled{background-color:transparent;color:", ";}"], _colors.interactionPrimaryLight, _colors.focusRingColors.light.ghost.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.light.ghost.shadow), _colors.interactionSecondaryLight, (0, _toColorString.default)(opacityColors.charcoal40)),
-    dark: (0, _styledComponents.css)(["background-color:transparent;color:", ";padding:0;&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){color:", ";}&:disabled:disabled{background-color:transparent;color:", ";}"], _colors.interactionPrimaryDark, _colors.focusRingColors.dark.ghost.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.dark.ghost.shadow), _colors.interactionSecondaryLight, (0, _toColorString.default)(opacityColors.charcoal40))
+    light: (0, _styledComponents.css)(["background-color:transparent;color:", ";padding:0;&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){color:", ";}"], _colors.interactionPrimaryLight, _colors.focusRingColors.light.ghost.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.light.ghost.shadow), _colors.interactionSecondaryLight),
+    dark: (0, _styledComponents.css)(["background-color:transparent;color:", ";padding:0;&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){color:", ";}"], _colors.interactionPrimaryDark, _colors.focusRingColors.dark.ghost.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.dark.ghost.shadow), _colors.interactionSecondaryLight)
   }
 });
-/** map the Button size values to the matching font size values */
+/** map the Button size values to the matching font size scalar values */
 
 
-var sizeToFontSize = {
-  medium: 'default',
-  small: 'paragraph2'
+var sizeToScalarSize = {
+  medium: fontSizes.default,
+  small: fontSizes.paragraph2,
+  large: fontSizes.header4,
+  extraLarge: 18
 };
 /** map the Button size values to the matching heights, in rem */
 
 var sizeToHeight = {
   medium: (0, _rem.default)(32),
-  small: (0, _rem.default)(24)
+  small: (0, _rem.default)(24),
+  large: (0, _rem.default)(44),
+  extraLarge: (0, _rem.default)(50)
+};
+/** map the Button size values to the matching X padding, in rem */
+
+var sizeToPaddingX = {
+  medium: (0, _rem.default)(base),
+  small: (0, _rem.default)(base),
+  large: (0, _rem.default)(base * 1.5),
+  extraLarge: (0, _rem.default)(base * 1.5)
 };
 
 var buttonSizeModifier = function buttonSizeModifier(_ref) {
-  var size = _ref.size;
-  return (0, _styledComponents.css)(["font-size:", ";height:", ";"], (0, _rem.default)(fontSizes[sizeToFontSize[size]]), sizeToHeight[size]);
+  var size = _ref.size,
+      variant = _ref.variant;
+  return (0, _styledComponents.css)(["font-size:", ";height:", ";padding:0 ", ";"], (0, _rem.default)(sizeToScalarSize[size]), sizeToHeight[size], variant !== 'ghost' && sizeToPaddingX[size]);
 };
 
 var disabledStyles = function disabledStyles(_ref2) {
-  var variant = _ref2.variant;
+  var variant = _ref2.variant,
+      $loading = _ref2.$loading;
+
+  if ($loading) {
+    if (variant === 'ghost') {
+      return (0, _styledComponents.css)(["&:disabled:disabled{border-color:transparent;color:", ";cursor:not-allowed;}"], _colors.interactionSecondaryLight);
+    }
+
+    if (variant === 'inverted') {
+      return (0, _styledComponents.css)(["&:disabled:disabled{background-color:", ";border-color:transparent;color:", ";cursor:not-allowed;}"], _colors.snowWhiteAlpha, _colors.interactionPrimaryLightFg);
+    }
+
+    return (0, _styledComponents.css)(["&:disabled:disabled{background-color:", ";border-color:transparent;color:", ";cursor:not-allowed;}"], _colors.interactionSecondaryLight, _colors.interactionPrimaryLightFg);
+  }
 
   if (variant === 'ghost') {
     return (0, _styledComponents.css)(["&:disabled:disabled{background-color:transparent;color:", ";cursor:not-allowed;}"], (0, _toColorString.default)(opacityColors.charcoal40));
@@ -81,6 +109,6 @@ var disabledStyles = function disabledStyles(_ref2) {
 var StyledButton = (0, _styledComponents.default)(_BaseButton.default).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1khcx6y-0"
-})(["align-items:center;border-radius:", ";border:1px solid transparent;display:flex;font-weight:", ";justify-content:center;line-height:1;outline:none;padding:0 ", ";text-transform:uppercase;white-space:nowrap;", ";", ";", ";", ";", ";"], (0, _rem.default)(2), _designTokens.typography.weight.alias.default, (0, _rem.default)(base), color, _kind.default, _intent.default, buttonSizeModifier, disabledStyles);
+})(["align-items:center;border-radius:", ";border:1px solid transparent;display:flex;font-weight:", ";justify-content:center;line-height:1;outline:none;text-transform:uppercase;white-space:nowrap;", ";", ";", ";", ";", ";", ";"], (0, _rem.default)(2), _designTokens.typography.weight.alias.default, color, _kind.default, _intent.default, buttonSizeModifier, (0, _dynamicModifiers.applyDynamicModifiers)('minWidth', 'min-width'), disabledStyles);
 var _default = StyledButton;
 exports.default = _default;

package/lib/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAIA,OAAc,EAA4B,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAMhF,OAAO,EACL,WAAW,EACX,SAAS,EAOV,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAuFrD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AASvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAIA,OAAc,EAA4B,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAchF,OAAO,EACL,WAAW,EACX,SAAS,EAOV,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAoJrD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AASvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,eAAe,aAAa,CAAC"}

package/lib/components/Button/index.js

@@ -28,6 +28,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes2 = require("@decisiv/prop-types");
 
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _Loading = _interopRequireDefault(require("../Loading"));
+
 var _StyledButton = _interopRequireDefault(require("./StyledButton"));
 
 var _schema = require("./schema");
@@ -72,6 +76,12 @@ var iconMarginProp = {
   left: 'margin-right',
   right: 'margin-left'
 };
+var buttonSizeToSize = {
+  small: 'small',
+  medium: 'medium',
+  large: 'medium',
+  extraLarge: 'medium'
+};
 
 var iconMargin = function iconMargin(props) {
   return !props.iconOnly && "".concat(iconMarginProp[props.position], ": ").concat((0, _rem.default)(5));
@@ -83,36 +93,59 @@ var IconContainer = _styledComponents.default.span.withConfig({
 })(["line-height:0;", ";"], iconMargin);
 
 var Button = function Button(props, ref) {
-  var text = props.text,
-      disabled = props.disabled,
+  var disabled = props.disabled,
       icon = props.icon,
       iconPosition = props.iconPosition,
       intent = props.intent,
-      onClick = props.onClick,
       kind = props.kind,
+      loading = props.loading,
+      propLoadingText = props.loadingText,
+      minWidth = props.minWidth,
+      onClick = props.onClick,
       size = props.size,
+      text = props.text,
       variant = props.variant,
-      rest = _objectWithoutProperties(props, ["text", "disabled", "icon", "iconPosition", "intent", "onClick", "kind", "size", "variant"]);
+      rest = _objectWithoutProperties(props, ["disabled", "icon", "iconPosition", "intent", "kind", "loading", "loadingText", "minWidth", "onClick", "size", "text", "variant"]);
 
+  var translate = (0, _useTranslations.default)();
+  var loadingVariant = (0, _react.useMemo)(function () {
+    if (variant === 'ghost') return 'normal';
+    return 'inverted';
+  }, [variant]);
   var ButtonIcon = (0, _react.useMemo)(function () {
     var Icon = icon;
     return Icon && _react.default.createElement(IconContainer, {
       position: iconPosition,
       iconOnly: !text
     }, _react.default.createElement(Icon, {
-      size: size
+      size: buttonSizeToSize[size]
     }));
   }, [icon, iconPosition, size, text]);
+  var ButtonContent = (0, _react.useMemo)(function () {
+    if (loading) {
+      var loadingText = text ? translate(propLoadingText, 'button.loading') : undefined;
+      var showLoadingText = !!text || !!loadingText;
+      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Loading.default, {
+        variant: loadingVariant,
+        size: "small",
+        marginRight: showLoadingText ? 0.5 : 0
+      }), _react.default.createElement(_react.default.Fragment, null, showLoadingText && loadingText));
+    }
+
+    return _react.default.createElement(_react.default.Fragment, null, !!icon && iconPosition !== 'right' && ButtonIcon, !!text && text, !!icon && iconPosition === 'right' && ButtonIcon);
+  }, [ButtonIcon, icon, iconPosition, loading, loadingVariant, propLoadingText, text, translate]);
   return _react.default.createElement(_StyledButton.default, _extends({
-    ref: ref,
-    disabled: disabled,
-    kind: kind,
+    disabled: disabled || loading,
     intent: intent,
+    kind: kind,
+    minWidth: minWidth,
     onClick: disabled ? _noop.default : onClick,
+    ref: ref,
     size: size,
     type: "button",
-    variant: variant
-  }, rest), !!icon && iconPosition !== 'right' && ButtonIcon, !!text && text, !!icon && iconPosition === 'right' && ButtonIcon);
+    variant: variant,
+    $loading: loading
+  }, rest), ButtonContent);
 };
 
 var propTypes = {
@@ -121,12 +154,15 @@ var propTypes = {
     return (0, _isEmpty.default)(text);
   }),
   disabled: _propTypes.default.bool,
-  text: _propTypes.default.string,
-  size: _propTypes.default.oneOf(['small', 'medium']),
   icon: _propTypes.default.elementType,
   iconPosition: _propTypes.default.oneOf(['left', 'right']),
   intent: _propTypes.default.oneOf(['success', 'danger']),
   kind: _propTypes.default.oneOf(['primary', 'secondary']),
+  loading: _propTypes.default.bool,
+  loadingText: _propTypes.default.string,
+  minWidth: _propTypes.default.string,
+  size: _propTypes.default.oneOf(['small', 'medium', 'large', 'extraLarge']),
+  text: _propTypes.default.string,
   variant: _propTypes.default.oneOf(['normal', 'inverted', 'ghost'])
 };
 var defaultProps = {
@@ -135,6 +171,9 @@ var defaultProps = {
   iconPosition: 'left',
   intent: undefined,
   kind: undefined,
+  loading: false,
+  loadingText: null,
+  minWidth: undefined,
   size: 'medium',
   text: undefined,
   variant: 'normal'

package/lib/components/Button/index.test.js

@@ -101,39 +101,74 @@ describe('Button', function () {
 
     expect(container).toMatchSnapshot();
   });
+  it('renders correctly the large size', function () {
+    var _renderButton3 = renderButton({
+      size: 'large'
+    }),
+        container = _renderButton3.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('renders correctly the extraLarge size', function () {
+    var _renderButton4 = renderButton({
+      size: 'extraLarge'
+    }),
+        container = _renderButton4.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  describe('loading', function () {
+    it('renders loading with default text', function () {
+      var _renderButton5 = renderButton({
+        loading: true
+      }),
+          container = _renderButton5.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('renders loading with custom message', function () {
+      var _renderButton6 = renderButton({
+        loading: true,
+        loadingText: 'Action...'
+      }),
+          container = _renderButton6.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
   describe('kind=secondary', function () {
     it('renders correctly with the light theme', function () {
-      var _renderButton3 = renderButton({
+      var _renderButton7 = renderButton({
         kind: 'secondary'
       }),
-          container = _renderButton3.container;
+          container = _renderButton7.container;
 
       expect(container).toMatchSnapshot();
     });
     it('renders correctly with the dark theme', function () {
-      var _renderButton4 = renderButton({
+      var _renderButton8 = renderButton({
         kind: 'secondary'
       }, 'dark'),
-          container = _renderButton4.container;
+          container = _renderButton8.container;
 
       expect(container).toMatchSnapshot();
     });
     describe('inverted', function () {
       it('renders correctly with the light theme', function () {
-        var _renderButton5 = renderButton({
+        var _renderButton9 = renderButton({
           kind: 'secondary',
           variant: 'inverted'
         }),
-            container = _renderButton5.container;
+            container = _renderButton9.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with the dark theme', function () {
-        var _renderButton6 = renderButton({
+        var _renderButton10 = renderButton({
           kind: 'secondary',
           variant: 'inverted'
         }, 'dark'),
-            container = _renderButton6.container;
+            container = _renderButton10.container;
 
         expect(container).toMatchSnapshot();
       });

package/lib/components/Button/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Button/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CAiCpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Button/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CA6CpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}

package/lib/components/Button/schema.js

@@ -17,11 +17,14 @@ var makeButtonSchemaPropTypes = function makeButtonSchemaPropTypes(extensions) {
   return _objectSpread({
     text: _reactDesc.PropTypes.string.description("The button's text"),
     disabled: _reactDesc.PropTypes.bool.description('Defines if the button will be disabled').defaultValue('false'),
-    size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('Defines the size of the button').defaultValue('medium'),
+    size: _reactDesc.PropTypes.oneOf(['small', 'medium', 'large', 'extraLarge']).description('Defines the size of the button').defaultValue('medium'),
     icon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render'),
     iconPosition: _reactDesc.PropTypes.oneOf(['left', 'right']).description('In which side of the text the icon should be rendered').defaultValue('left'),
     intent: _reactDesc.PropTypes.oneOf(['success', 'danger']).description('Applies desired hover state of button'),
     kind: _reactDesc.PropTypes.oneOf(['primary', 'secondary']).description('Applies inverted button styles'),
+    loading: _reactDesc.PropTypes.bool.description('Defines if the loading animation within the button should be displayed').defaultValue('false'),
+    loadingText: _reactDesc.PropTypes.string.description('Loading animation text'),
+    minWidth: _reactDesc.PropTypes.string.description('A pass-through CSS value for the min-width attribute'),
     variant: _reactDesc.PropTypes.oneOf(['normal', 'inverted']).description('Applies secondary button styles')
   }, extensions);
 };

package/lib/components/Button/types.d.ts

@@ -2,7 +2,7 @@ import { ButtonHTMLAttributes, Ref } from 'react';
 import { IconProps } from '@decisiv/iconix';
 import { TranslatedText } from '../../utils/useTranslations';
 export declare type ButtonRef = HTMLButtonElement;
-export declare type Size = 'medium' | 'small';
+export declare type Size = 'small' | 'medium' | 'large' | 'extraLarge';
 export declare type IconPosition = 'left' | 'right';
 export declare type Intent = 'danger' | 'success';
 export declare type Variant = 'normal' | 'inverted' | 'ghost';
@@ -14,6 +14,9 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     iconPosition?: IconPosition;
     intent?: Intent;
     kind?: Kind;
+    loading?: boolean;
+    loadingText?: string;
+    minWidth?: string;
     ref?: Ref<ButtonRef>;
     size?: Size;
     text?: TranslatedText;