@decisiv/ui-components 2.0.1-alpha.173 → 2.0.1-alpha.174

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

@@ -6,6 +6,7 @@ export interface StyledButtonProps extends React.ButtonHTMLAttributes<HTMLButton
     minWidth?: string;
     size: Size;
     variant?: Variant;
+    loading?: boolean;
 }
 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;AAuB1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAe,MAAM,SAAS,CAAC;AAuKnE,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;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,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAe,MAAM,SAAS,CAAC;AA6LnE,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,YAAY,sFAkBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Button/StyledButton.js

@@ -47,8 +47,8 @@ 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 scalar values */
@@ -83,7 +83,20 @@ var buttonSizeModifier = function buttonSizeModifier(_ref) {
 };
 
 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));

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;AAkGrD,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,7 +76,7 @@ var iconMarginProp = {
   left: 'margin-right',
   right: 'margin-left'
 };
-var sizeToIconSize = {
+var buttonSizeToSize = {
   small: 'small',
   medium: 'medium',
   large: 'medium',
@@ -94,24 +98,44 @@ var Button = function Button(props, ref) {
       iconPosition = props.iconPosition,
       intent = props.intent,
       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, ["disabled", "icon", "iconPosition", "intent", "kind", "minWidth", "onClick", "size", "text", "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: sizeToIconSize[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({
-    disabled: disabled,
+    disabled: disabled || loading,
     intent: intent,
     kind: kind,
     minWidth: minWidth,
@@ -119,8 +143,9 @@ var Button = function Button(props, ref) {
     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 = {
@@ -133,6 +158,8 @@ var propTypes = {
   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,
@@ -144,6 +171,8 @@ var defaultProps = {
   iconPosition: 'left',
   intent: undefined,
   kind: undefined,
+  loading: false,
+  loadingText: null,
   minWidth: undefined,
   size: 'medium',
   text: undefined,

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

@@ -117,39 +117,58 @@ describe('Button', function () {
 
     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 _renderButton5 = renderButton({
+      var _renderButton7 = renderButton({
         kind: 'secondary'
       }),
-          container = _renderButton5.container;
+          container = _renderButton7.container;
 
       expect(container).toMatchSnapshot();
     });
     it('renders correctly with the dark theme', function () {
-      var _renderButton6 = renderButton({
+      var _renderButton8 = renderButton({
         kind: 'secondary'
       }, 'dark'),
-          container = _renderButton6.container;
+          container = _renderButton8.container;
 
       expect(container).toMatchSnapshot();
     });
     describe('inverted', function () {
       it('renders correctly with the light theme', function () {
-        var _renderButton7 = renderButton({
+        var _renderButton9 = renderButton({
           kind: 'secondary',
           variant: 'inverted'
         }),
-            container = _renderButton7.container;
+            container = _renderButton9.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with the dark theme', function () {
-        var _renderButton8 = renderButton({
+        var _renderButton10 = renderButton({
           kind: 'secondary',
           variant: 'inverted'
         }, 'dark'),
-            container = _renderButton8.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;;;;CAqCpC,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

@@ -22,6 +22,8 @@ var makeButtonSchemaPropTypes = function makeButtonSchemaPropTypes(extensions) {
     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

@@ -14,6 +14,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     iconPosition?: IconPosition;
     intent?: Intent;
     kind?: Kind;
+    loading?: boolean;
+    loadingText?: string;
     minWidth?: string;
     ref?: Ref<ButtonRef>;
     size?: Size;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAC1C,oBAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAC/D,oBAAY,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,oBAAY,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC1C,oBAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AACtD,oBAAY,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;AAC3C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAC1C,oBAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAC/D,oBAAY,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,oBAAY,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC1C,oBAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AACtD,oBAAY,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;AAC3C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/lib/providers/ConfigProvider/utils/translations.d.ts

@@ -19,6 +19,9 @@ declare const translations: {
             readonly label: "Breadcrumbs";
         };
     };
+    button: {
+        readonly loading: "Loading...";
+    };
     combobox: {
         readonly clearButtonLabel: "Clear {label} value";
         readonly loading: "Loading...";

package/lib/providers/ConfigProvider/utils/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/providers/ConfigProvider/utils/translations.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyIR,CAAC;AAEX,oBAAY,YAAY,GAAG,OAAO,YAAY,CAAC;AAE/C,eAAe,YAAY,CAAC"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/providers/ConfigProvider/utils/translations.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IR,CAAC;AAEX,oBAAY,YAAY,GAAG,OAAO,YAAY,CAAC;AAE/C,eAAe,YAAY,CAAC"}

package/lib/providers/ConfigProvider/utils/translations.js

@@ -25,6 +25,9 @@ var translations = {
       label: 'Breadcrumbs'
     }
   },
+  button: {
+    loading: 'Loading...'
+  },
   combobox: {
     clearButtonLabel: 'Clear {label} value',
     loading: 'Loading...',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.173+91f1f4c",
+  "version": "2.0.1-alpha.174+aa22194",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "91f1f4ca90a74caea95989c49e2a25bd201a5c94"
+  "gitHead": "aa221943bbad57cc97bd8f05e44089e31baf4805"
 }