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

package/lib/components/DropdownList/index.js

@@ -29,10 +29,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _composeReactRefs = _interopRequireDefault(require("@seznam/compose-react-refs"));
 
-var _canUseDOM = _interopRequireDefault(require("../../utils/canUseDOM"));
-
 var _Popover = _interopRequireDefault(require("../Popover"));
 
+var _Grid = _interopRequireDefault(require("../Grid"));
+
+var _propTypes2 = require("./propTypes");
+
 var _schema = _interopRequireDefault(require("./schema"));
 
 var _types = require("../../atoms/OptionsList/types");
@@ -41,6 +43,8 @@ var _OptionsList = _interopRequireWildcard(require("../../atoms/OptionsList"));
 
 var _types2 = _interopRequireWildcard(require("./types"));
 
+var _canUseDOM = _interopRequireDefault(require("../../utils/canUseDOM"));
+
 var _focusWithoutScrolling = _interopRequireDefault(require("../../utils/focusWithoutScrolling"));
 
 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; } }
@@ -68,10 +72,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 function DropdownList(props) {
-  var borderRadius = props.borderRadius,
+  var actions = props.actions,
+      borderRadius = props.borderRadius,
       containerSelector = props.containerSelector,
       defaultSelectedIds = props.defaultSelectedIds,
       defaultVisible = props.defaultVisible,
+      defaultFooter = props.defaultFooter,
       _props$focusOnShowing = props.focusOnShowing,
       focusOnShowing = _props$focusOnShowing === void 0 ? true : _props$focusOnShowing,
       listRef = props.listRef,
@@ -89,7 +95,7 @@ function DropdownList(props) {
       maxHeight = props.maxHeight,
       maxWidth = props.maxWidth,
       minWidth = props.minWidth,
-      rest = _objectWithoutProperties(props, ["borderRadius", "containerSelector", "defaultSelectedIds", "defaultVisible", "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.
+      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.
   // Specifically, the scroll to selected item on first render of dropdown requires this.
 
 
@@ -104,8 +110,18 @@ function DropdownList(props) {
       _useState4 = _slicedToArray(_useState3, 2),
       showing = _useState4[0],
       setShowing = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(selectedIdsProp),
+      _useState6 = _slicedToArray(_useState5, 2),
+      selected = _useState6[0],
+      setSelected = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(selectedIdsProp),
+      _useState8 = _slicedToArray(_useState7, 2),
+      saved = _useState8[0],
+      setSaved = _useState8[1];
   /**
-   * If the visible prop changes, it should always override any locally maintained current value.
+   * If the visible or selected prop changes, it should always override any locally maintained current value.
    * This allows the component to be controlled.
    */
 
@@ -114,16 +130,22 @@ function DropdownList(props) {
     if (typeof visible === 'boolean' && visible !== showing) {
       setShowing(visible);
     }
-  }, [visible, showing]);
+
+    if (typeof selectedIdsProp !== 'undefined' && selectedIdsProp !== selected) {
+      setSelected(selectedIdsProp);
+    }
+  }, [visible, showing, selectedIdsProp, selected]);
   var handleOnHide = (0, _react.useCallback)(function (event) {
     setShowing(false);
+    setSelected([]);
     onHide && onHide(event);
     popRef && popRef.current && popRef.current.targetNode && popRef.current.targetNode.focus();
   }, [onHide]);
   var handleOnShow = (0, _react.useCallback)(function (event) {
+    setSelected(saved);
     setShowing(true);
     onShow && onShow(event);
-  }, [onShow]);
+  }, [onShow, setSelected, saved]);
   (0, _react.useEffect)(function () {
     if (containerRef && focusOnShowing && showing) {
       (0, _focusWithoutScrolling.default)(containerRef);
@@ -136,13 +158,49 @@ function DropdownList(props) {
 
   var handleOnChange = (0, _react.useCallback)(function (selection) {
     onChange && onChange(Array.isArray(selection) ? selection : [selection]);
-  }, [onChange]);
+    defaultFooter && setSelected(selection) && setSaved(selection);
+  }, [onChange, setSelected, setSaved, defaultFooter]);
+  var handleOnApply = (0, _react.useCallback)(function () {
+    setSaved(selected);
+    popRef && popRef.current && popRef.current.hide();
+  }, [setSaved, selected]);
+
+  var handleOnCancel = function handleOnCancel() {
+    popRef && popRef.current && popRef.current.hide();
+  };
+
+  var handleOnClear = function handleOnClear() {
+    setSaved([]);
+    setSelected([]);
+  };
+
   var onKeyDown = (0, _react.useCallback)(function (event) {
     if (event.key === 'Tab') {
       event.preventDefault();
       event.stopPropagation();
     }
   }, []);
+  var defaultActions = {
+    left: [{
+      id: '1',
+      text: 'apply',
+      onClick: handleOnApply
+    }, {
+      id: '2',
+      text: 'cancel',
+      kind: 'secondary',
+      onClick: handleOnCancel
+    }],
+    right: [{
+      id: '3',
+      text: 'clear',
+      variant: 'ghost',
+      kind: 'secondary',
+      intent: 'danger',
+      onClick: handleOnClear
+    }]
+  };
+  var footerActions = defaultFooter ? actions || defaultActions : actions;
   return _react.default.createElement(_Popover.default, {
     borderRadius: borderRadius,
     containerSelector: containerSelector,
@@ -160,20 +218,23 @@ function DropdownList(props) {
     maxHeight: maxHeight,
     maxWidth: maxWidth,
     minWidth: minWidth
-  }, _react.default.createElement(PanelComponent, null)) : _react.default.createElement(_OptionsList.default, _extends({
+  }, _react.default.createElement(PanelComponent, null)) : _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_OptionsList.default, _extends({
+    actions: footerActions,
     defaultSelected: defaultSelectedIds,
-    selected: selectedIdsProp,
+    selected: selected,
     onChange: handleOnChange,
     ref: listRef ? (0, _composeReactRefs.default)(listRef, setContainerRefFunc) : setContainerRefFunc,
     onKeyDown: onKeyDown,
     maxHeight: maxHeight,
     maxWidth: maxWidth,
     minWidth: minWidth
-  }, rest)));
+  }, rest)))));
 }
 
 DropdownList.displayName = 'DropdownList';
 DropdownList.propTypes = _objectSpread({}, _schema.default.propTypes, {
+  actions: _propTypes2.footerValidator,
+  defaultFooter: _propTypes2.footerValidator,
   target: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.element, _propTypes.default.shape({
     current: _propTypes.default.instanceOf(
     /* istanbul ignore next didn't test a non DOM env */
@@ -181,5 +242,9 @@ DropdownList.propTypes = _objectSpread({}, _schema.default.propTypes, {
     _canUseDOM.default ? Element : function Element() {})
   })]).isRequired
 });
+DropdownList.defaultProps = {
+  actions: undefined,
+  defaultFooter: false
+};
 var _default = DropdownList;
 exports.default = _default;

package/lib/components/DropdownList/propTypes.d.ts

@@ -0,0 +1,4 @@
+import DropdownListProps from './types';
+declare function footerValidator(props: DropdownListProps, propName: 'defaultFooter' | 'actions', componentName: 'DropdownList'): Error | null;
+export { footerValidator };
+//# sourceMappingURL=propTypes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"propTypes.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownList/propTypes.ts"],"names":[],"mappings":"AAGA,OAAO,iBAAiB,MAAM,SAAS,CAAC;AAExC,iBAAS,eAAe,CACtB,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,eAAe,GAAG,SAAS,EACrC,aAAa,EAAE,cAAc,GAC5B,KAAK,GAAG,IAAI,CAgDd;AAGD,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/lib/components/DropdownList/propTypes.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.footerValidator = footerValidator;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Button = require("../Button");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+function footerValidator(props, propName, componentName) {
+  var defaultFooter = props.defaultFooter,
+      actions = props.actions;
+
+  if (!!defaultFooter && !!actions) {
+    return new Error("Both `defaultFooter` and `actions` are supplied to `".concat(componentName, "`. `defaultFooter` will not be used"));
+  }
+
+  if (defaultFooter) {
+    _propTypes.default.checkPropTypes(_defineProperty({}, propName, _propTypes.default.bool), props, propName, componentName);
+  }
+
+  if (actions) {
+    _propTypes.default.checkPropTypes(_defineProperty({}, propName, _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape((0, _Button.makeButtonSchemaPropTypes)({
+      id: _propTypes.default.string.isRequired
+    }))), _propTypes.default.shape({
+      left: _propTypes.default.arrayOf(_propTypes.default.shape((0, _Button.makeButtonSchemaPropTypes)({
+        id: _propTypes.default.string.isRequired
+      }))),
+      right: _propTypes.default.arrayOf(_propTypes.default.shape((0, _Button.makeButtonSchemaPropTypes)({
+        id: _propTypes.default.string.isRequired
+      })))
+    })])), props, propName, componentName);
+  }
+
+  return null;
+} // eslint-disable-next-line import/prefer-default-export

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownList/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAA4C,CAAC;AA8FzD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownList/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAA4C,CAAC;AA4GzD,eAAe,MAAM,CAAC"}

package/lib/components/DropdownList/schema.js

@@ -26,6 +26,7 @@ schema.propTypes = _objectSpread({}, (0, _omit.default)(_schema.default.makeProp
   containerSelector: _reactDesc.PropTypes.string.description('A CSS selector to the element where the popovers should be rendered in, or "parent" to render the popover in-place.').defaultValue('body'),
   defaultSelectedIds: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.string, _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.string)]).description('These IDs will appear as selected the first time the user opens the dropdown.'),
   defaultVisible: _reactDesc.PropTypes.bool.description('Controls if the dropdown list should be opened by default.'),
+  defaultFooter: _reactDesc.PropTypes.bool.description('Controls if the dropdown list uses the OptionsList footer with default actions').defaultValue('false'),
   items: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
     decoration: _reactDesc.PropTypes.shape({
       type: _reactDesc.PropTypes.oneOf(['Avatar', 'Badge'])
@@ -36,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.'),
@@ -49,6 +50,10 @@ schema.propTypes = _objectSpread({}, (0, _omit.default)(_schema.default.makeProp
   placement: _reactDesc.PropTypes.string.description('The preferred side of the target the popover should attach to. See notes on Popover.').defaultValue('bottom-start'),
   visible: _reactDesc.PropTypes.bool.description('Used when component is controlled. Controls the display status of the dropdown.'),
   renderOptionLabel: _reactDesc.PropTypes.func.description('Function to customize render of option labels, called with the item value'),
+  actions: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.object), _reactDesc.PropTypes.shape({
+    left: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.object),
+    right: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.object)
+  })]).description('A collection of objects, each containing a subset of props valid for a Button component. Check the notes on the OptionsList.'),
   zIndex: _reactDesc.PropTypes.number.description('Sets the z-index style property of the options list'),
   PanelComponent: _reactDesc.PropTypes.any.description('A React component that, if provided, is rendered in place of the items. Useful for loading/ no matches type messages and similar.')
 });

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

@@ -1,11 +1,12 @@
 import { Ref, ComponentType } from 'react';
 import { PopoverProps, Target as PopoverTarget } from '../Popover';
-import { OptionsListProps, ItemOption, Category } from '../../atoms/OptionsList/types';
+import { FooterActions, OptionsListProps, ItemOption, Category } from '../../atoms/OptionsList/types';
 export declare type DropdownListItem = ItemOption | Category;
 export default interface Props extends Omit<OptionsListProps, 'defaultSelected' | 'items' | 'name' | 'onChange' | 'onKeyDown' | 'selected' | 'selectable' | 'tabIndex'> {
     containerSelector?: string;
     defaultSelectedIds?: string | string[];
     defaultVisible?: boolean;
+    defaultFooter?: boolean;
     focusOnShowing?: boolean;
     items: DropdownListItem[];
     listRef?: Ref<HTMLUListElement>;
@@ -15,8 +16,10 @@ export default interface Props extends Omit<OptionsListProps, 'defaultSelected'
     onShow?: (event?: Event) => void;
     placement?: PopoverProps['placement'];
     selectedIds?: string | string[];
+    showCheckbox?: boolean;
     showArrow?: boolean;
     target: PopoverTarget;
+    actions?: FooterActions;
     visible?: boolean;
     zIndex?: PopoverProps['zIndex'];
     PanelComponent?: ComponentType;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownList/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACT,MAAM,+BAA+B,CAAC;AAEvC,oBAAY,gBAAgB,GAAG,UAAU,GAAG,QAAQ,CAAC;AAErD,MAAM,CAAC,OAAO,WAAW,KACvB,SAAQ,IAAI,CACV,gBAAgB,EACd,iBAAiB,GACjB,OAAO,GACP,MAAM,GACN,UAAU,GACV,WAAW,GACX,UAAU,GACV,YAAY,GACZ,UAAU,CACb;IACD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownList/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACT,MAAM,+BAA+B,CAAC;AAEvC,oBAAY,gBAAgB,GAAG,UAAU,GAAG,QAAQ,CAAC;AAErD,MAAM,CAAC,OAAO,WAAW,KACvB,SAAQ,IAAI,CACV,gBAAgB,EACd,iBAAiB,GACjB,OAAO,GACP,MAAM,GACN,UAAU,GACV,WAAW,GACX,UAAU,GACV,YAAY,GACZ,UAAU,CACb;IACD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC"}

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

@@ -0,0 +1,197 @@
+/// <reference types="react" />
+import { FilterProps } from '../types';
+declare const IconWrapper: import("styled-components").StyledComponent<"div", any, Partial<{
+    readonly alignContent?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignItems?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignSelf?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flex?: string | number | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("react").ReactText, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexBasis?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexGrow?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexShrink?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexWrap?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexWrapProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyContent?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyItems?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifySelf?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly order?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly size?: "XS" | "SM" | "MD" | "LG" | "XL" | undefined;
+}> & Partial<{
+    readonly margin: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginBottom: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginLeft: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginRight: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginTop: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginX: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginY: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly padding: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingBottom: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingLeft: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingRight: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingTop: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingX: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingY: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+}> & Pick<FilterProps, "badgeColor">, never>;
+export default IconWrapper;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+var _Flex = _interopRequireDefault(require("../../Flex"));
+
+var _color = _interopRequireDefault(require("../../../modifiers/color"));
+
+var _utils = require("../../../utils");
+
+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; } }
+
+var colorModifiers = (0, _utils.applyDynamicModifiers)('badgeColor', function (_ref) {
+  var badgeColor = _ref.badgeColor;
+  return (0, _styledComponents.css)(["", ";"], badgeColor && badgeColor in _commonUIColors.commonUIColors && (0, _color.default)(_commonUIColors.commonUIColors[badgeColor]));
+});
+var IconWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "IconWrapper",
+  componentId: "sc-1e8ws53-0"
+})(["width:", ";height:", ";padding:", ";border-radius:2px;", ";", ";"], (0, _rem.default)(_spacing.default.base * 2), (0, _rem.default)(_spacing.default.base * 2), (0, _rem.default)(_spacing.default.base * 0.4), (0, _color.default)(_commonUIColors.commonUIColors.information), colorModifiers);
+var _default = IconWrapper;
+exports.default = _default;

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

@@ -0,0 +1,31 @@
+/// <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;
+    };
+};
+export default FilterSimplePrimary;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _IconWrapper = _interopRequireDefault(require("../IconWrapper"));
+
+var _StyledLabel = _interopRequireDefault(require("../StyledLabel"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var FilterSimplePrimary = function FilterSimplePrimary(_ref) {
+  var ariaLabel = _ref['aria-label'],
+      active = _ref.active,
+      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);
+  return _react.default.createElement(_react.default.Fragment, null, Icon && _react.default.createElement(_IconWrapper.default, {
+    badgeColor: badgeColor
+  }, _react.default.createElement(Icon, {
+    size: "small",
+    role: "img",
+    "aria-label": ariaLabel
+  })), _react.default.createElement(_StyledLabel.default, {
+    active: active,
+    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;