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

package/lib/components/DropdownList/index.js

@@ -29,22 +29,22 @@ 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");
 
 var _OptionsList = _interopRequireWildcard(require("../../atoms/OptionsList"));
 
-var _Button = require("../Button");
-
 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; } }
@@ -72,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,
@@ -93,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.
 
 
@@ -108,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.
    */
 
@@ -118,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);
@@ -140,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,
@@ -165,8 +219,9 @@ function DropdownList(props) {
     maxWidth: maxWidth,
     minWidth: minWidth
   }, _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,
@@ -178,16 +233,8 @@ function DropdownList(props) {
 
 DropdownList.displayName = 'DropdownList';
 DropdownList.propTypes = _objectSpread({}, _schema.default.propTypes, {
-  actions: _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
-    })))
-  })]),
+  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 */
@@ -196,7 +243,8 @@ DropdownList.propTypes = _objectSpread({}, _schema.default.propTypes, {
   })]).isRequired
 });
 DropdownList.defaultProps = {
-  actions: undefined
+  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;AAuGzD,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.'),

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

@@ -6,6 +6,7 @@ export default interface Props extends Omit<OptionsListProps, 'defaultSelected'
     containerSelector?: string;
     defaultSelectedIds?: string | string[];
     defaultVisible?: boolean;
+    defaultFooter?: boolean;
     focusOnShowing?: boolean;
     items: DropdownListItem[];
     listRef?: Ref<HTMLUListElement>;
@@ -15,6 +16,7 @@ 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;

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,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,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,aAAa,CAAC;IACxB,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/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

@@ -0,0 +1,197 @@
+/// <reference types="react" />
+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";
+        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<SimpleFilterProps, "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,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAgB7C,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAOhB,CAAC;AACF,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,5 @@
+/// <reference types="react" />
+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

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _visualInterest = require("@decisiv/design-tokens/lib/color/visual-interest");
+
+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'],
+      _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 = 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: 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));
+};
+
+var _default = FilterSimplePrimary;
+exports.default = _default;