@decisiv/ui-components 2.0.1-alpha.99 → 2.0.2-alpha.2

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

@@ -0,0 +1,164 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+require("jest-styled-components");
+
+var _react2 = require("@testing-library/react");
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+var _ = _interopRequireDefault(require("."));
+
+var _Combobox = _interopRequireDefault(require("../Combobox"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 render = function render(ui, options) {
+  return (0, _react2.render)(ui, _objectSpread({}, options, {
+    wrapper: function wrapper(_ref) {
+      var children = _ref.children;
+      return _react.default.createElement(_ConfigProvider.ConfigProvider, null, children);
+    }
+  }));
+};
+
+describe('Drawer', function () {
+  describe('visible', function () {
+    describe('when "visible" is false', function () {
+      it('renders with the property "display: none"', function () {
+        var _render = render(_react.default.createElement(_.default, {
+          visible: false
+        })),
+            getByTestId = _render.getByTestId;
+
+        expect(getByTestId(/overlay/i)).toHaveStyleRule('display', 'none');
+      });
+    });
+    it('does not close when clicking on another Portal based component', function () {
+      var onClose = jest.fn();
+
+      var _render2 = render(_react.default.createElement(_.default, {
+        visible: true,
+        onClose: onClose
+      }, _react.default.createElement(_Combobox.default, {
+        label: "My Combobox",
+        options: [{
+          id: '1',
+          label: 'My Option',
+          value: '1'
+        }]
+      }))),
+          getByLabelText = _render2.getByLabelText,
+          getByText = _render2.getByText;
+
+      _react2.fireEvent.click(getByLabelText('My Combobox'));
+
+      _react2.fireEvent.click(getByText('My Option'));
+
+      expect(onClose).not.toHaveBeenCalled();
+    });
+  });
+  describe('title', function () {
+    it('renders the text passed as "title" in an h3 tag', function () {
+      var title = 'This is the title';
+
+      var _render3 = render(_react.default.createElement(_.default, {
+        visible: true,
+        title: title
+      })),
+          getByText = _render3.getByText;
+
+      expect(getByText(title, {
+        selector: 'h3'
+      })).toBeInTheDocument();
+    });
+  });
+  describe('onClose', function () {
+    var onClose = jest.fn();
+    it('renders a close button if "onClose" is passed', function () {
+      var _render4 = render(_react.default.createElement(_.default, {
+        visible: true,
+        onClose: onClose
+      })),
+          getByLabelText = _render4.getByLabelText;
+
+      var closeBtn = getByLabelText(/close drawer/i);
+      expect(closeBtn).toBeInTheDocument();
+    });
+    it('does not render a close button if "onClose" is not passed', function () {
+      var _render5 = render(_react.default.createElement(_.default, {
+        visible: true
+      })),
+          queryByLabelText = _render5.queryByLabelText;
+
+      var closeBtn = queryByLabelText(/close drawer/i);
+      expect(closeBtn).not.toBeInTheDocument();
+    });
+    it('calls the "onClose" function when clicking the close button', function () {
+      var _render6 = render(_react.default.createElement(_.default, {
+        visible: true,
+        onClose: onClose
+      })),
+          getByLabelText = _render6.getByLabelText;
+
+      var closeBtn = getByLabelText(/close drawer/i);
+
+      _react2.fireEvent.click(closeBtn);
+
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+  describe('actions', function () {
+    describe('when an array of actions is provided', function () {
+      var onSubmit = jest.fn();
+      var onCancel = jest.fn();
+      var actions = [{
+        id: '1',
+        text: 'Submit',
+        onClick: onSubmit
+      }, {
+        id: '2',
+        text: 'Cancel',
+        onClick: onCancel
+      }];
+      it('renders the array as buttons in the footer of the Drawer', function () {
+        var _render7 = render(_react.default.createElement(_.default, {
+          visible: true,
+          actions: actions
+        })),
+            getByText = _render7.getByText;
+
+        expect(getByText(/submit/i, {
+          selector: 'button'
+        })).toBeInTheDocument();
+        expect(getByText(/cancel/i, {
+          selector: 'button'
+        })).toBeInTheDocument();
+      });
+    });
+  });
+  describe('click outside', function () {
+    it('calls the "onClose" function when clicking outside the Drawer', function () {
+      var onClose = jest.fn();
+
+      var _render8 = render(_react.default.createElement(_.default, {
+        visible: true,
+        onClose: onClose
+      })),
+          getByTestId = _render8.getByTestId;
+
+      var overlay = getByTestId(/overlay/i);
+
+      _react2.fireEvent.click(overlay);
+
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+});

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/schema.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAqBnD,eAAe,MAAM,CAAC"}

package/lib/components/Drawer/schema.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactDesc = require("react-desc");
+
+var _schema = require("../Button/schema");
+
+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 schema = (0, _reactDesc.describe)({
+  displayName: 'Drawer'
+});
+schema.propTypes = {
+  visible: _reactDesc.PropTypes.bool.description('This controls the visibility of the drawer').defaultValue('false'),
+  onClose: _reactDesc.PropTypes.func.description('a callback function called when clicking the close button'),
+  side: _reactDesc.PropTypes.oneOf(['left', 'right']).description('used to define the side where the Drawer will come up from').defaultValue('left'),
+  title: _reactDesc.PropTypes.string.description('Text to show as title'),
+  description: _reactDesc.PropTypes.string.description('Text to show as description'),
+  actions: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape(_objectSpread({
+    id: _reactDesc.PropTypes.string
+  }, (0, _schema.makeButtonSchemaPropTypes)()))).description('An array of button props objects with an identifier, all rendered in order in the footer')
+};
+var _default = schema;
+exports.default = _default;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ButtonProps } from '../Button';
+import { DrawerProps } from '.';
+export declare const Overlay: import("styled-components").StyledComponent<"div", any, Pick<DrawerProps, "zIndex" | "visible" | "side">, never>;
+export declare const Content: import("styled-components").StyledComponent<"div", any, Pick<DrawerProps, "visible" | "side">, never>;
+export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"h3", any, import("../Typography").TypographyProps, never>;
+export declare const Body: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Footer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<import("react").RefForwardingComponent<HTMLButtonElement, ButtonProps>, any, ButtonProps, never>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/styles.ts"],"names":[],"mappings":";AAMA,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAgB,MAAM,GAAG,CAAC;AAE9C,eAAO,MAAM,OAAO,kHAYnB,CAAC;AAMF,eAAO,MAAM,OAAO,uGAqCnB,CAAC;AAEF,eAAO,MAAM,MAAM,oEAMlB,CAAC;AAEF,eAAO,MAAM,KAAK,wGAEjB,CAAC;AAEF,eAAO,MAAM,IAAI,oEAKhB,CAAC;AAEF,eAAO,MAAM,MAAM,oEAOlB,CAAC;AAEF,eAAO,MAAM,WAAW,8IAIvB,CAAC"}

package/lib/components/Drawer/styles.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CloseButton = exports.Footer = exports.Body = exports.Title = exports.Header = exports.Content = exports.Overlay = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _dynamicModifiers = require("../../utils/dynamicModifiers");
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Typography = require("../Typography");
+
+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; } }
+
+var Overlay = _styledComponents.default.div.withConfig({
+  displayName: "styles__Overlay",
+  componentId: "p3l2i8-0"
+})(["display:", ";position:fixed;background:", ";bottom:0;left:0;right:0;top:0;justify-content:", ";", ";"], function (_ref) {
+  var visible = _ref.visible;
+  return visible ? 'flex' : 'none';
+}, (0, _toColorString.default)(_designTokens.color.opacity.charcoal75), function (_ref2) {
+  var side = _ref2.side;
+  return side === 'left' ? 'start' : 'end';
+}, (0, _dynamicModifiers.applyDynamicModifiers)('zIndex', 'z-index'));
+
+exports.Overlay = Overlay;
+var DRAWER_WIDTH = (0, _rem.default)(_designTokens.spacing.base * 40);
+
+var Content = _styledComponents.default.div.withConfig({
+  displayName: "styles__Content",
+  componentId: "p3l2i8-1"
+})(["position:relative;height:100%;width:", ";top:0;display:flex;flex-direction:column;background-color:", ";animation-duration:0.75s;@keyframes fadeinleft{from{left:-", ";}to{left:0;}}@keyframes fadeinright{from{right:-", ";}to{right:0;}}", ""], DRAWER_WIDTH, (0, _toColorString.default)(_designTokens.color.base.snowWhite), DRAWER_WIDTH, DRAWER_WIDTH, function (_ref3) {
+  var side = _ref3.side;
+  return side === 'left' ? (0, _styledComponents.css)(["animation-name:fadeinleft;"]) : (0, _styledComponents.css)(["animation-name:fadeinright;"]);
+});
+
+exports.Content = Content;
+
+var Header = _styledComponents.default.div.withConfig({
+  displayName: "styles__Header",
+  componentId: "p3l2i8-2"
+})(["display:flex;flex-direction:column;padding:", ";min-height:fit-content;background-color:", ";"], (0, _rem.default)(_designTokens.spacing.base * 2), (0, _toColorString.default)(_designTokens.color.base.snowWhite));
+
+exports.Header = Header;
+var Title = (0, _styledComponents.default)(_Typography.H3).withConfig({
+  displayName: "styles__Title",
+  componentId: "p3l2i8-3"
+})(["word-break:break-word;"]);
+exports.Title = Title;
+
+var Body = _styledComponents.default.div.withConfig({
+  displayName: "styles__Body",
+  componentId: "p3l2i8-4"
+})(["display:flex;height:100%;overflow-y:auto;background-color:", ";"], (0, _toColorString.default)(_designTokens.color.base.snowWhite));
+
+exports.Body = Body;
+
+var Footer = _styledComponents.default.div.withConfig({
+  displayName: "styles__Footer",
+  componentId: "p3l2i8-5"
+})(["height:", ";display:flex;padding:", " ", ";margin-top:auto;background-color:", ";border-top:1px solid ", ";"], (0, _rem.default)(_designTokens.spacing.base * 6.2), (0, _rem.default)(_designTokens.spacing.base * 1.5), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _toColorString.default)(_designTokens.color.base.fullMoon), (0, _toColorString.default)(_designTokens.color.opacity.charcoal15));
+
+exports.Footer = Footer;
+var CloseButton = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "styles__CloseButton",
+  componentId: "p3l2i8-6"
+})(["padding-right:0;padding-left:", ";margin-left:auto;"], (0, _rem.default)(_designTokens.spacing.base));
+exports.CloseButton = CloseButton;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownList/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,EACL,QAAQ,IAAI,YAAY,EACxB,MAAM,IAAI,UAAU,EAErB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EAAE,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIlD,OAAO,EACL,YAAY,IAAI,oBAAoB,EACpC,gBAAgB,EAChB,MAAM,IAAI,kBAAkB,EAC5B,KAAK,IAAI,iBAAiB,GAC3B,CAAC;AAEF,oBAAY,KAAK,GAAG,gBAAgB,EAAE,CAAC;AACvC,oBAAY,QAAQ,GAAG,YAAY,CAAC;AACpC,oBAAY,MAAM,GAAG,UAAU,CAAC;AAEhC,iBAAS,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+L/C;kBA/LQ,YAAY;;;;;;;;AAuNrB,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownList/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,EACL,QAAQ,IAAI,YAAY,EACxB,MAAM,IAAI,UAAU,EAErB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EAAE,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIlD,OAAO,EACL,YAAY,IAAI,oBAAoB,EACpC,gBAAgB,EAChB,MAAM,IAAI,kBAAkB,EAC5B,KAAK,IAAI,iBAAiB,GAC3B,CAAC;AAEF,oBAAY,KAAK,GAAG,gBAAgB,EAAE,CAAC;AACvC,oBAAY,QAAQ,GAAG,YAAY,CAAC;AACpC,oBAAY,MAAM,GAAG,UAAU,CAAC;AAEhC,iBAAS,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA0M/C;kBA1MQ,YAAY;;;;;;;;AAkOrB,eAAe,YAAY,CAAC"}

package/lib/components/DropdownList/index.js

@@ -95,7 +95,8 @@ function DropdownList(props) {
       maxHeight = props.maxHeight,
       maxWidth = props.maxWidth,
       minWidth = props.minWidth,
-      rest = _objectWithoutProperties(props, ["actions", "borderRadius", "containerSelector", "defaultSelectedIds", "defaultVisible", "defaultFooter", "focusOnShowing", "listRef", "onChange", "onHide", "onShow", "placement", "selectedIds", "showArrow", "target", "visible", "zIndex", "PanelComponent", "maxHeight", "maxWidth", "minWidth"]); // Use a ref callback to get more control over re-rendering when a ref is stored.
+      multiple = props.multiple,
+      rest = _objectWithoutProperties(props, ["actions", "borderRadius", "containerSelector", "defaultSelectedIds", "defaultVisible", "defaultFooter", "focusOnShowing", "listRef", "onChange", "onHide", "onShow", "placement", "selectedIds", "showArrow", "target", "visible", "zIndex", "PanelComponent", "maxHeight", "maxWidth", "minWidth", "multiple"]); // Use a ref callback to get more control over re-rendering when a ref is stored.
   // Specifically, the scroll to selected item on first render of dropdown requires this.
 
 
@@ -159,7 +160,12 @@ function DropdownList(props) {
   var handleOnChange = (0, _react.useCallback)(function (selection) {
     onChange && onChange(Array.isArray(selection) ? selection : [selection]);
     defaultFooter && setSelected(selection) && setSaved(selection);
-  }, [onChange, setSelected, setSaved, defaultFooter]);
+
+    if (!multiple) {
+      setShowing(false);
+      popRef && popRef.current && popRef.current.hide() && popRef.current.targetNode && popRef.current.targetNode.focus();
+    }
+  }, [onChange, setSelected, setSaved, defaultFooter, setShowing]);
   var handleOnApply = (0, _react.useCallback)(function () {
     setSaved(selected);
     popRef && popRef.current && popRef.current.hide();
@@ -227,7 +233,8 @@ function DropdownList(props) {
     onKeyDown: onKeyDown,
     maxHeight: maxHeight,
     maxWidth: maxWidth,
-    minWidth: minWidth
+    minWidth: minWidth,
+    multiple: multiple
   }, rest)))));
 }
 

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

@@ -149,26 +149,46 @@ describe('DropdownList', function () {
       selector: 'b'
     })).toBeTruthy();
   });
+  it('renders custom option with internal actions', function () {
+    var testButtonTitle = 'internalActionButton';
+    var onClickMock = jest.fn();
+
+    var customProps = _objectSpread({}, defaultProps, {
+      items: [{
+        id: '1',
+        label: 'Option 1',
+        value: '1'
+      }]
+    });
+
+    var renderOptionLabel = function renderOptionLabel(item) {
+      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("b", null, item.label), _react.default.createElement(_Button.default, {
+        text: testButtonTitle,
+        onClick: onClickMock
+      }));
+    };
+
+    var _render5 = render(_react.default.createElement(_.default, _extends({}, customProps, {
+      renderOptionLabel: renderOptionLabel,
+      pointerEvents: "auto"
+    }))),
+        baseElement = _render5.baseElement,
+        getByText = _render5.getByText;
+
+    _react2.fireEvent.click(getByText(targetButtonText));
+
+    _react2.fireEvent.click((0, _react2.getByText)(baseElement, testButtonTitle));
+
+    expect(onClickMock).toHaveBeenCalled();
+  });
   describe('selecting', function () {
     describe('a single option', function () {
       it('calls the onChange prop with the selection id', function () {
         var onChange = jest.fn();
 
-        var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange
         }))),
-            baseElement = _render5.baseElement,
-            getByText = _render5.getByText;
-
-        _react2.fireEvent.click(getByText(targetButtonText));
-
-        _react2.fireEvent.click((0, _react2.getByText)(baseElement, item0Label));
-
-        expect(onChange).toHaveBeenCalledWith([item0Id]);
-        expect(baseElement).toMatchSnapshot();
-      });
-      it('does not automatically hide the options', function () {
-        var _render6 = render(_react.default.createElement(_.default, defaultProps)),
             baseElement = _render6.baseElement,
             getByText = _render6.getByText;
 
@@ -176,14 +196,11 @@ describe('DropdownList', function () {
 
         _react2.fireEvent.click((0, _react2.getByText)(baseElement, item0Label));
 
-        expect((0, _react2.queryByText)(baseElement, item0Label)).toBeTruthy();
+        expect(onChange).toHaveBeenCalledWith([item0Id]);
+        expect(baseElement).toMatchSnapshot();
       });
-      it('does not allow multiple selections', function () {
-        var onChange = jest.fn();
-
-        var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-          onChange: onChange
-        }))),
+      it('automatically hide the options', function () {
+        var _render7 = render(_react.default.createElement(_.default, defaultProps)),
             baseElement = _render7.baseElement,
             getByText = _render7.getByText;
 
@@ -191,11 +208,7 @@ describe('DropdownList', function () {
 
         _react2.fireEvent.click((0, _react2.getByText)(baseElement, item0Label));
 
-        expect(onChange).toHaveBeenCalledWith([item0Id]);
-
-        _react2.fireEvent.click((0, _react2.getByText)(baseElement, item2Label));
-
-        expect(onChange).toHaveBeenCalledWith([item2Id]);
+        expect((0, _react2.queryByText)(baseElement, item0Label)).toBeFalsy();
       });
     });
     describe('multiple options', function () {

package/lib/components/DropdownList/schema.js

@@ -37,7 +37,7 @@ schema.propTypes = _objectSpread({}, (0, _omit.default)(_schema.default.makeProp
     value: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.number, _reactDesc.PropTypes.string]).description('The value for an option in the dropdown list.')
   })).description('The array of item data that will be rendered').isRequired,
   listRef: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.func, _reactDesc.PropTypes.shape({
-    current: _reactDesc.PropTypes.instanceOf(Element)
+    current: _reactDesc.PropTypes.any
   })]).description('A ref for the list container.'),
   name: _reactDesc.PropTypes.string.description("The input's name, to identify the input in the data in a form.").isRequired,
   onChange: _reactDesc.PropTypes.func.description('Change event handler, called with an array of the selected item IDs.'),

package/lib/components/Filter/ActionFilter/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ActionFilterProps } from '../types';
+declare const ActionFilter: ({ active, kind, text, count, startIcon: StartIcon, endIcon: EndIcon, }: ActionFilterProps) => JSX.Element;
+export default ActionFilter;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Filter/ActionFilter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/ActionFilter/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG7C,QAAA,MAAM,YAAY,4GA2BjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Filter/ActionFilter/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _StyledLabel = _interopRequireDefault(require("../StyledLabel"));
+
+var _ = require("../..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ActionFilter = function ActionFilter(_ref) {
+  var _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? 'primary' : _ref$kind,
+      text = _ref.text,
+      count = _ref.count,
+      StartIcon = _ref.startIcon,
+      EndIcon = _ref.endIcon;
+  var buttonText = count ? "".concat(text, " ").concat(count) : text;
+  return _react.default.createElement(_react.default.Fragment, null, StartIcon && _react.default.createElement(_.Flex, {
+    paddingRight: 0.5
+  }, _react.default.createElement(StartIcon, {
+    size: "small",
+    role: "img"
+  })), _react.default.createElement(_StyledLabel.default, {
+    kind: kind,
+    active: active
+  }, buttonText), EndIcon && _react.default.createElement(_.Flex, {
+    paddingLeft: 0.5
+  }, _react.default.createElement(EndIcon, {
+    size: "small",
+    role: "img"
+  })));
+};
+
+var _default = ActionFilter;
+exports.default = _default;

package/lib/components/Filter/IconWrapper/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FilterProps } from '../types';
+import { SimpleFilterProps } from '../types';
 declare const IconWrapper: import("styled-components").StyledComponent<"div", any, Partial<{
     readonly alignContent?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
         readonly XS: "XS";
@@ -192,6 +192,6 @@ declare const IconWrapper: import("styled-components").StyledComponent<"div", an
         readonly LG: "LG";
         readonly XL: "XL";
     }>;
-}> & Pick<FilterProps, "badgeColor">, never>;
+}> & Pick<SimpleFilterProps, "badgeColor">, never>;
 export default IconWrapper;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Filter/IconWrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/IconWrapper/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAgBvC,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAOhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/IconWrapper/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAgB7C,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAOhB,CAAC;AACF,eAAe,WAAW,CAAC"}

package/lib/components/Filter/SimplePrimary/index.d.ts

@@ -1,31 +1,5 @@
 /// <reference types="react" />
-import PropTypes from 'prop-types';
-import { IconProps } from '@decisiv/iconix';
-import { CommonUIColorKeys } from '../../../utils/commonUIColors';
-declare type IconComponent = (props: IconProps) => JSX.Element;
-interface Props {
-    'aria-label': string;
-    active: boolean;
-    text: string;
-    count: number;
-    badgeIcon?: IconComponent;
-    badgeColor?: CommonUIColorKeys;
-}
-declare const FilterSimplePrimary: {
-    ({ "aria-label": ariaLabel, active, text, badgeIcon: Icon, badgeColor, count, }: Props): JSX.Element;
-    propTypes: {
-        active: PropTypes.Requireable<boolean>;
-        count: PropTypes.Requireable<number>;
-        text: PropTypes.Validator<string>;
-        badgeColor: PropTypes.Requireable<string>;
-        badgeIcon: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-    };
-    defaultProps: {
-        active: null;
-        count: undefined;
-        badgeColor: string;
-        badgeIcon: null;
-    };
-};
+import { SimpleFilterProps } from '../types';
+declare const FilterSimplePrimary: ({ "aria-label": ariaLabel, active, disabled, text, badgeIcon: Icon, badgeColor, count, }: SimpleFilterProps) => JSX.Element;
 export default FilterSimplePrimary;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Filter/SimplePrimary/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/SimplePrimary/index.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,UAAU,KAAK;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC;AAED,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;CAsBxB,CAAC;AAiBF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/SimplePrimary/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,QAAA,MAAM,mBAAmB,8HAgCxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/Filter/SimplePrimary/index.js

@@ -7,11 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
-
-var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+var _visualInterest = require("@decisiv/design-tokens/lib/color/visual-interest");
 
 var _IconWrapper = _interopRequireDefault(require("../IconWrapper"));
 
@@ -21,38 +17,30 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var FilterSimplePrimary = function FilterSimplePrimary(_ref) {
   var ariaLabel = _ref['aria-label'],
-      active = _ref.active,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       text = _ref.text,
       Icon = _ref.badgeIcon,
       _ref$badgeColor = _ref.badgeColor,
       badgeColor = _ref$badgeColor === void 0 ? 'information' : _ref$badgeColor,
       count = _ref.count;
-  var buttonText = isNaN(count) ? text : "".concat(count, " ").concat(text);
+  var buttonText = count ? "".concat(count, " ").concat(text) : text;
+  var colorForBadge = disabled ? _visualInterest.VisualInterestColorName.licoriceMousse : badgeColor;
   return _react.default.createElement(_react.default.Fragment, null, Icon && _react.default.createElement(_IconWrapper.default, {
-    badgeColor: badgeColor
+    badgeColor: colorForBadge
   }, _react.default.createElement(Icon, {
     size: "small",
     role: "img",
     "aria-label": ariaLabel
   })), _react.default.createElement(_StyledLabel.default, {
     active: active,
+    kind: "primary",
     hasBadge: !!Icon,
     marginLeft: 1
   }, buttonText));
 };
 
-FilterSimplePrimary.propTypes = {
-  active: _propTypes.default.bool,
-  count: _propTypes.default.number,
-  text: _propTypes.default.string.isRequired,
-  badgeColor: _propTypes.default.string,
-  badgeIcon: _propTypes.default.elementType
-};
-FilterSimplePrimary.defaultProps = {
-  active: null,
-  count: undefined,
-  badgeColor: "".concat((0, _toColorString.default)(_color.default.status.information.medium)),
-  badgeIcon: null
-};
 var _default = FilterSimplePrimary;
 exports.default = _default;

package/lib/components/Filter/StyledFilter.d.ts

@@ -1,4 +1,4 @@
-import { FilterProps } from './types';
-declare const StyledFilter: import("styled-components").StyledComponent<"button", any, FilterProps, never>;
+import { BaseFilterProps } from './types';
+declare const StyledFilter: import("styled-components").StyledComponent<"button", any, BaseFilterProps, never>;
 export default StyledFilter;
 //# sourceMappingURL=StyledFilter.d.ts.map

package/lib/components/Filter/StyledFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledFilter.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/StyledFilter.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAsBtC,QAAA,MAAM,YAAY,gFAuBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"StyledFilter.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/StyledFilter.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAoE1C,QAAA,MAAM,YAAY,oFAiDjB,CAAC;AAEF,eAAe,YAAY,CAAC"}