@decisiv/ui-components 2.0.1-alpha.15 → 2.0.1-alpha.150

package/lib/components/Alert/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { AlertProps } from './types';
+export { AlertProps };
+declare function Alert({ 'aria-label': ariaLabel, children, description, dismissable, icon, intent, onDismissClick, title, tooltipText, }: AlertProps): JSX.Element;
+declare namespace Alert {
+    var propTypes: {
+        'aria-label': import("prop-types").Requireable<string>;
+        description: import("prop-types").Requireable<string>;
+        dismissable: import("prop-types").Requireable<boolean>;
+        icon: import("prop-types").Requireable<import("prop-types").ReactElementLike>;
+        intent: import("prop-types").Requireable<string>;
+        title: import("prop-types").Validator<string>;
+        onDismissClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        tooltipText: import("prop-types").Requireable<string>;
+    };
+    var defaultProps: {
+        'aria-label': undefined;
+        description: undefined;
+        dismissable: boolean;
+        icon: undefined;
+        intent: string;
+        onDismissClick: undefined;
+        tooltipText: undefined;
+    };
+}
+export default Alert;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,UAAU,EAA2B,MAAM,SAAS,CAAC;AAE9D,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,iBAAwB,KAAK,CAAC,EAC5B,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,WAAW,EACX,WAAW,EACX,IAAI,EACJ,MAAsB,EACtB,cAAc,EACd,KAAK,EACL,WAAW,GACZ,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAwD1B;kBAlEuB,KAAK;;;;;;;;;;;;;;;;;;;;;eAAL,KAAK"}

package/lib/components/Alert/index.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Alert;
+Object.defineProperty(exports, "AlertProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.AlertProps;
+  }
+});
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _StyledButton = _interopRequireDefault(require("./StyledButton"));
+
+var _Container = _interopRequireDefault(require("./Container"));
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
+var _Typography = require("../Typography");
+
+var _intents = _interopRequireDefault(require("./intents"));
+
+var _types = require("./types");
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function Alert(_ref) {
+  var ariaLabel = _ref['aria-label'],
+      children = _ref.children,
+      description = _ref.description,
+      dismissable = _ref.dismissable,
+      icon = _ref.icon,
+      _ref$intent = _ref.intent,
+      intent = _ref$intent === void 0 ? 'information' : _ref$intent,
+      onDismissClick = _ref.onDismissClick,
+      title = _ref.title,
+      tooltipText = _ref.tooltipText;
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var translate = (0, _useTranslations.default)();
+  var borderColor = (0, _toColorString.default)(_intents.default[intent].borderColor);
+  var Icon = icon || _intents.default[intent].icon;
+
+  var handleClick = function handleClick() {
+    setOpen(false);
+    if (onDismissClick) onDismissClick();
+  };
+
+  if (!open) {
+    return _react.default.createElement(_react.default.Fragment, null);
+  }
+
+  return _react.default.createElement(_Container.default, {
+    flex: 1,
+    paddingLeft: 1.5,
+    paddingRight: 1.6,
+    paddingTop: 1.3,
+    paddingBottom: 1.1,
+    intent: intent
+  }, _react.default.createElement(Icon, {
+    color: borderColor
+  }), _react.default.createElement(_Flex.default, {
+    flexDirection: "column",
+    marginLeft: 1,
+    flex: 1
+  }, _react.default.createElement(_Flex.default, {
+    alignItems: "center",
+    flex: 1
+  }, _react.default.createElement(_Typography.P, {
+    weight: "semibold",
+    marginRight: 1
+  }, title), dismissable && _react.default.createElement(_Tooltip.default, {
+    placement: "auto",
+    target: // eslint-disable-next-line react/jsx-wrap-multilines
+    _react.default.createElement(_StyledButton.default, {
+      variant: "ghost",
+      icon: _Times.default,
+      onClick: handleClick,
+      "aria-label": translate(ariaLabel, 'alert.closeAlert')
+    })
+  }, translate(tooltipText, 'alert.close'))), _react.default.createElement(_Typography.P, {
+    size: "small"
+  }, children || description)));
+}
+
+Alert.propTypes = _types.propTypes;
+Alert.defaultProps = _types.defaultProps;

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

@@ -0,0 +1,79 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Alert', function () {
+  it('renders Title', function () {
+    var _render = (0, _react2.render)(_react.default.createElement(_.default, {
+      title: "Alert Title"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText(/alert title/i)).toBeInTheDocument();
+  });
+  describe('when has description', function () {
+    it('renders description', function () {
+      var _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
+        title: "Alert Title",
+        description: "Alert Description"
+      })),
+          getByText = _render2.getByText;
+
+      expect(getByText(/alert description/i)).toBeInTheDocument();
+    });
+    it('renders children as description', function () {
+      var _render3 = (0, _react2.render)(_react.default.createElement(_.default, {
+        title: "Alert Title"
+      }, "Alert Description")),
+          getByText = _render3.getByText;
+
+      expect(getByText(/alert description/i)).toBeInTheDocument();
+    });
+  });
+  describe('when it is dismissable', function () {
+    it('renders close button', function () {
+      var _render4 = (0, _react2.render)(_react.default.createElement(_.default, {
+        title: "Alert Title",
+        dismissable: true,
+        "aria-label": "Close Alert"
+      })),
+          getByLabelText = _render4.getByLabelText;
+
+      expect(getByLabelText(/close alert/i)).toBeInTheDocument();
+    });
+    it('closes alert when clicking on dismiss button', function () {
+      var _render5 = (0, _react2.render)(_react.default.createElement(_.default, {
+        title: "Alert Title",
+        dismissable: true,
+        "aria-label": "Close Alert"
+      })),
+          getByLabelText = _render5.getByLabelText,
+          queryByText = _render5.queryByText;
+
+      _react2.fireEvent.click(getByLabelText(/close alert/i));
+
+      expect(queryByText(/alert title/i)).not.toBeInTheDocument();
+    });
+    it('triggers onDismissClick when clicking on dismiss button', function () {
+      var onDismissClick = jest.fn();
+
+      var _render6 = (0, _react2.render)(_react.default.createElement(_.default, {
+        title: "Alert Title",
+        dismissable: true,
+        "aria-label": "Close Alert",
+        onDismissClick: onDismissClick
+      })),
+          getByLabelText = _render6.getByLabelText;
+
+      _react2.fireEvent.click(getByLabelText(/close alert/i));
+
+      expect(onDismissClick).toHaveBeenCalled();
+    });
+  });
+});

package/lib/components/Alert/intents.d.ts

@@ -0,0 +1,13 @@
+import theme from 'styled-theming';
+import { Color } from '@decisiv/design-tokens/lib/color';
+import InfoCircle from '@decisiv/iconix/lib/components/InfoCircle';
+interface IntentRecord {
+    color: Color;
+    borderColor: Color;
+    icon: typeof InfoCircle;
+}
+declare type IntentType = Record<string, IntentRecord>;
+declare const intents: IntentType;
+export declare const intentStyle: theme.VariantSet;
+export default intents;
+//# sourceMappingURL=intents.d.ts.map

package/lib/components/Alert/intents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"intents.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/intents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAGnC,OAAc,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAKhE,OAAO,UAAU,MAAM,2CAA2C,CAAC;AAKnE,UAAU,YAAY;IACpB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,KAAK,CAAC;IACnB,IAAI,EAAE,OAAO,UAAU,CAAC;CACzB;AAED,aAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AAE/C,QAAA,MAAM,OAAO,EAAE,UAqBd,CAAC;AAEF,eAAO,MAAM,WAAW,kBAyCtB,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/lib/components/Alert/intents.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.intentStyle = void 0;
+
+var _styledTheming = _interopRequireDefault(require("styled-theming"));
+
+var _styledComponents = require("styled-components");
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _CheckCircle = _interopRequireDefault(require("@decisiv/iconix/lib/components/CheckCircle"));
+
+var _ExclamationCircle = _interopRequireDefault(require("@decisiv/iconix/lib/components/ExclamationCircle"));
+
+var _ExclamationTriangle = _interopRequireDefault(require("@decisiv/iconix/lib/components/ExclamationTriangle"));
+
+var _InfoCircle = _interopRequireDefault(require("@decisiv/iconix/lib/components/InfoCircle"));
+
+var _polished = require("polished");
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var intents = {
+  information: {
+    color: _color.default.status.information.light,
+    borderColor: _color.default.status.information.medium,
+    icon: _InfoCircle.default
+  },
+  success: {
+    color: _color.default.status.success.light,
+    borderColor: _color.default.status.success.medium,
+    icon: _CheckCircle.default
+  },
+  warning: {
+    color: _color.default.status.warning.light,
+    borderColor: _color.default.status.warning.medium,
+    icon: _ExclamationCircle.default
+  },
+  danger: {
+    color: _color.default.status.danger.light,
+    borderColor: _color.default.status.danger.medium,
+    icon: _ExclamationTriangle.default
+  }
+};
+
+var intentStyle = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'intent', {
+  information: {
+    light: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.information.color), (0, _polished.toColorString)(intents.information.borderColor)),
+    dark: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.information.color), (0, _polished.toColorString)(intents.information.borderColor))
+  },
+  success: {
+    light: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.success.color), (0, _polished.toColorString)(intents.success.borderColor)),
+    dark: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.success.color), (0, _polished.toColorString)(intents.success.borderColor))
+  },
+  warning: {
+    light: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.warning.color), (0, _polished.toColorString)(intents.warning.borderColor)),
+    dark: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.warning.color), (0, _polished.toColorString)(intents.warning.borderColor))
+  },
+  danger: {
+    light: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.danger.color), (0, _polished.toColorString)(intents.danger.borderColor)),
+    dark: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.danger.color), (0, _polished.toColorString)(intents.danger.borderColor))
+  }
+});
+
+exports.intentStyle = intentStyle;
+var _default = intents;
+exports.default = _default;

package/lib/components/Alert/schema.d.ts

@@ -0,0 +1,3 @@
+declare const schema: any;
+export default schema;
+//# sourceMappingURL=schema.d.ts.map

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

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

package/lib/components/Alert/schema.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactDesc = require("react-desc");
+
+// @ts-ignore no module typings
+var schema = (0, _reactDesc.describe)({
+  displayName: 'Alert'
+});
+schema.propTypes = {
+  'aria-label': _reactDesc.PropTypes.string.description('Descriptive text for accessibility purposes'),
+  description: _reactDesc.PropTypes.string.description('Text to show as description'),
+  dismissable: _reactDesc.PropTypes.bool.description('Sets if the alert is dismissable').defaultValue('false'),
+  icon: _reactDesc.PropTypes.element.description('Must be an icon component from `@decisiv/iconix`'),
+  intent: _reactDesc.PropTypes.oneOf(['information', 'success', 'warning', 'danger']).description('Shortcuts to the most common combinations of icon and color.').defaultValue('information'),
+  title: _reactDesc.PropTypes.string.description('Text to show as title').isRequired,
+  onDismissClick: _reactDesc.PropTypes.func.description('A callback when dismissing the alert').defaultValue('undefined'),
+  tooltipText: _reactDesc.PropTypes.string.description('The text for dismiss tooltip').defaultValue('Close')
+};
+var _default = schema;
+exports.default = _default;

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

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { IconProps } from '@decisiv/iconix';
+import intents from './intents';
+export declare type IconComponent = (props: IconProps) => JSX.Element;
+export interface AlertProps {
+    'aria-label'?: string;
+    children?: React.ReactNode;
+    description?: string;
+    dismissable?: boolean;
+    icon?: IconComponent;
+    intent?: keyof typeof intents;
+    onDismissClick?: () => void;
+    title: string;
+    tooltipText?: string;
+}
+export declare const propTypes: {
+    'aria-label': PropTypes.Requireable<string>;
+    description: PropTypes.Requireable<string>;
+    dismissable: PropTypes.Requireable<boolean>;
+    icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    intent: PropTypes.Requireable<string>;
+    title: PropTypes.Validator<string>;
+    onDismissClick: PropTypes.Requireable<(...args: any[]) => any>;
+    tooltipText: PropTypes.Requireable<string>;
+};
+export declare const defaultProps: {
+    'aria-label': undefined;
+    description: undefined;
+    dismissable: boolean;
+    icon: undefined;
+    intent: string;
+    onDismissClick: undefined;
+    tooltipText: undefined;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,UAAU;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,SAAS;;;;;;;;;CASrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;CAQxB,CAAC"}

package/lib/components/Alert/types.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var propTypes = {
+  'aria-label': _propTypes.default.string,
+  description: _propTypes.default.string,
+  dismissable: _propTypes.default.bool,
+  icon: _propTypes.default.element,
+  intent: _propTypes.default.oneOf(['information', 'success', 'warning', 'danger']),
+  title: _propTypes.default.string.isRequired,
+  onDismissClick: _propTypes.default.func,
+  tooltipText: _propTypes.default.string
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  'aria-label': undefined,
+  description: undefined,
+  dismissable: false,
+  icon: undefined,
+  intent: 'information',
+  onDismissClick: undefined,
+  tooltipText: undefined
+};
+exports.defaultProps = defaultProps;

package/lib/components/Avatar/types.js

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

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

@@ -0,0 +1,2 @@
+export declare const sizeStyles: Record<string, {}>;
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/constants.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,EAAE,CAKzC,CAAC"}

package/lib/components/Badge/constants.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sizeStyles = void 0;
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/prefer-default-export */
+var makeSizeStyles = function makeSizeStyles(size) {
+  var value = (0, _rem.default)(size);
+  return {
+    width: value,
+    minWidth: value,
+    height: value,
+    minHeight: value
+  };
+};
+
+var sizeStyles = {
+  'small.square': makeSizeStyles(20),
+  'medium.round': makeSizeStyles(36),
+  'medium.square': makeSizeStyles(30),
+  'large.round': makeSizeStyles(60)
+};
+exports.sizeStyles = sizeStyles;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AACA,OAAc,EAAmB,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAOvE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAA2B,MAAM,SAAS,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AAkEhC,QAAA,MAAM,YAAY,EAAE,sBAAsB,CAAC,QAAQ,EAAE,UAAU,CAE9D,CAAC;AAQF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmB,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAQvE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAA2B,MAAM,SAAS,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AAsDhC,QAAA,MAAM,YAAY,EAAE,sBAAsB,CAAC,QAAQ,EAAE,UAAU,CAE9D,CAAC;AAQF,eAAe,YAAY,CAAC"}

package/lib/components/Badge/index.js

@@ -17,8 +17,6 @@ Object.defineProperty(exports, "BadgeProps", {
 });
 exports.default = void 0;
 
-var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -27,16 +25,18 @@ var _styledComponentsModifiers = require("styled-components-modifiers");
 
 var _color = _interopRequireDefault(require("../../modifiers/color"));
 
+var _constants = require("./constants");
+
 var _commonUIColors = require("../../utils/commonUIColors");
 
 var _utils = require("../../utils");
 
 var _types = require("./types");
 
-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 _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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -48,32 +48,21 @@ var colorModifiers = (0, _utils.applyDynamicModifiers)('color', function (_ref)
   return (0, _styledComponents.css)(["", ""], color && color in _commonUIColors.commonUIColors && (0, _color.default)(_commonUIColors.commonUIColors[color]));
 });
 
-var makeSizeStyles = function makeSizeStyles(size) {
-  return {
-    width: (0, _rem.default)(size),
-    minWidth: (0, _rem.default)(size),
-    height: (0, _rem.default)(size),
-    minHeight: (0, _rem.default)(size)
-  };
-};
-
-var sizeStyles = {
-  'medium.round': makeSizeStyles(36),
-  'medium.square': makeSizeStyles(30),
-  'large.round': makeSizeStyles(60)
-};
-
 var getSizeStyles = function getSizeStyles(key) {
-  return (0, _styledComponents.css)(sizeStyles[key] || '');
+  return (0, _styledComponents.css)(_constants.sizeStyles[key] || '');
 };
 
 var sizeModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
-  medium: function medium(_ref2) {
+  small: function small(_ref2) {
     var v = _ref2.variant;
-    return getSizeStyles("medium.".concat(v));
+    return getSizeStyles("small.".concat(v));
   },
-  large: function large(_ref3) {
+  medium: function medium(_ref3) {
     var v = _ref3.variant;
+    return getSizeStyles("medium.".concat(v));
+  },
+  large: function large(_ref4) {
+    var v = _ref4.variant;
     return getSizeStyles("large.".concat(v));
   }
 }, 'size');

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,25 @@ describe('Badge', function () {
       expect(container).toMatchSnapshot();
     });
   });
+  it("renders correctly with size=\"small\" and variant=\"square\"", function () {
+    var _renderBadge3 = renderBadge({
+      size: 'small',
+      variant: 'square'
+    }),
+        container = _renderBadge3.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 _renderBadge4 = renderBadge({
         color: key
       }),
-          container = _renderBadge3.container;
+          container = _renderBadge4.container;
 
       expect(container.firstChild).toHaveStyleRule('background-color', (0, _toColorString.default)(value));
     });
@@ -75,12 +86,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.js

@@ -15,7 +15,7 @@ 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'),
+  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/types.d.ts

@@ -8,7 +8,7 @@ export interface BadgeProps {
     'aria-label': string;
     color?: CommonUIColorKeys;
     icon: IconComponent;
-    size?: 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large';
     variant?: 'round' | 'square';
 }
 declare function variantValidator(props: BadgeProps, propName: 'variant', componentName: 'Badge'): Error | null;