@decisiv/ui-components 2.0.1-alpha.102 → 2.0.1-alpha.131

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":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuBtC,QAAA,MAAM,YAAY,gFA0CjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Filter/StyledFilter.js

@@ -23,6 +23,8 @@ var _styleModifiers = require("../../utils/styleModifiers");
 
 var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
 
+var _IconWrapper = _interopRequireDefault(require("./IconWrapper"));
+
 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; } }
@@ -33,7 +35,7 @@ var focusStyles = (0, _styledComponents.css)(["border:", " solid ", ";", ";"], (
 var StyledFilter = _styledComponents.default.button.withConfig({
   displayName: "StyledFilter",
   componentId: "sc-10cidio-0"
-})(["display:flex;background:none;padding:", " ", ";border:", " solid ", ";border-radius:", ";justify-content:center;align-items:center;outline:none;font:inherit;color:", ";&:focus{", "}", ";", ";&:hover{", ";}"], (0, _rem.default)(_spacing.default.base * 0.6), (0, _rem.default)(_spacing.default.base), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _rem.default)(2), (0, _toColorString.default)(_color.default.interaction.pacificOcean), focusStyles, _kind.default, (0, _styleModifiers.when)('active', activeStyles), _kind.hoverStyles);
+})(["display:flex;background:none;padding:", " ", ";border:", " solid ", ";border-radius:", ";justify-content:center;align-items:center;outline:none;font:inherit;color:", ";&:focus{", "}", ";", ";&:hover{", ";}&:disabled:disabled{background:", ";border:", " solid ", ";&,&:hover{color:", ";cursor:not-allowed;", "{background-color:", ";svg{color:", ";}}}}"], (0, _rem.default)(_spacing.default.base * 0.6), (0, _rem.default)(_spacing.default.base), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _rem.default)(2), (0, _toColorString.default)(_color.default.interaction.pacificOcean), focusStyles, _kind.default, (0, _styleModifiers.when)('active', activeStyles), _kind.hoverStyles, (0, _toColorString.default)(_color.default.opacity.fullMoon50), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _toColorString.default)(_color.default.opacity.charcoal40), _IconWrapper.default, (0, _toColorString.default)(_color.default.opacity.charcoal15), (0, _toColorString.default)(_color.default.opacity.charcoal40));
 
 var _default = StyledFilter;
 exports.default = _default;

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

@@ -2,7 +2,7 @@
 import PropTypes from 'prop-types';
 import { FilterProps } from './types';
 declare const Filter: {
-    ({ active: filterActive, variant, kind, onClick, ...rest }: FilterProps): JSX.Element;
+    ({ active: filterActive, variant, kind, onClick, disabled, badgeColor, ...rest }: FilterProps): JSX.Element;
     propTypes: {
         active: PropTypes.Requireable<boolean>;
         variant: PropTypes.Requireable<string>;
@@ -12,6 +12,7 @@ declare const Filter: {
         badgeColor: PropTypes.Requireable<import("../../utils/commonUIColors").CommonUIColorKeys>;
         badgeIcon: PropTypes.Requireable<PropTypes.ReactComponentLike>;
         count: PropTypes.Requireable<number>;
+        disabled: PropTypes.Requireable<boolean>;
     };
     defaultProps: {
         active: boolean;
@@ -21,6 +22,7 @@ declare const Filter: {
         badgeIcon: null;
         badgeColor: string;
         count: undefined;
+        disabled: boolean;
     };
 };
 export default Filter;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/index.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWtC,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CAsCX,CAAC;AAuBF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/index.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAStC,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAgDX,CAAC;AAyBF,eAAe,MAAM,CAAC"}

package/lib/components/Filter/index.js

@@ -9,12 +9,14 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _visualInterest = require("@decisiv/design-tokens/lib/color/visual-interest");
+
+var _commonUIColors = require("../../utils/commonUIColors");
+
 var _SimplePrimary = _interopRequireDefault(require("./SimplePrimary"));
 
 var _StyledFilter = _interopRequireDefault(require("./StyledFilter"));
 
-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; } }
@@ -44,7 +46,10 @@ var Filter = function Filter(_ref) {
       _ref$kind = _ref.kind,
       kind = _ref$kind === void 0 ? 'primary' : _ref$kind,
       onClick = _ref.onClick,
-      rest = _objectWithoutProperties(_ref, ["active", "variant", "kind", "onClick"]);
+      disabled = _ref.disabled,
+      _ref$badgeColor = _ref.badgeColor,
+      badgeColor = _ref$badgeColor === void 0 ? 'information' : _ref$badgeColor,
+      rest = _objectWithoutProperties(_ref, ["active", "variant", "kind", "onClick", "disabled", "badgeColor"]);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -66,9 +71,12 @@ var Filter = function Filter(_ref) {
     kind: kind,
     tabIndex: 0,
     active: filterActive || active,
-    onClick: handleOnClick
+    onClick: handleOnClick,
+    disabled: disabled
   }, rest), _react.default.createElement(Component, _extends({
-    active: active
+    active: active,
+    disabled: disabled,
+    badgeColor: disabled ? _visualInterest.VisualInterestColorName.licoriceMousse : badgeColor
   }, rest)));
 };
 
@@ -80,7 +88,8 @@ Filter.propTypes = {
   text: _propTypes.default.string.isRequired,
   badgeColor: _propTypes.default.oneOf(_commonUIColors.commonUIColorKeys),
   badgeIcon: _propTypes.default.elementType,
-  count: _propTypes.default.number
+  count: _propTypes.default.number,
+  disabled: _propTypes.default.bool
 };
 Filter.defaultProps = {
   active: false,
@@ -89,7 +98,8 @@ Filter.defaultProps = {
   kind: 'primary',
   badgeIcon: null,
   badgeColor: 'information',
-  count: undefined
+  count: undefined,
+  disabled: false
 };
 var _default = Filter;
 exports.default = _default;

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

@@ -38,4 +38,23 @@ describe('Filter', function () {
       expect(onClick).toHaveBeenCalled();
     });
   });
+  describe('Expect Disable to prevent OnClick', function () {
+    it('Prevent onClick', function () {
+      var onClick = jest.fn();
+
+      var _render3 = (0, _react2.render)(_react.default.createElement(_.default, {
+        "aria-label": "text sample",
+        active: false,
+        variant: "simple",
+        text: "text",
+        onClick: onClick,
+        disabled: true
+      })),
+          getByText = _render3.getByText;
+
+      _react2.fireEvent.click(getByText(/text/));
+
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"kind.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/kind.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAGnC,OAAO,EAAO,0BAA0B,IAAI,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAU3E,eAAO,MAAM,WAAW,KAQvB,CAAC;AAyBF,QAAA,MAAM,UAAU,gBAGd,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"kind.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/kind.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAGnC,OAAO,EAAO,0BAA0B,IAAI,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAU3E,eAAO,MAAM,WAAW,KAQvB,CAAC;AA8BF,QAAA,MAAM,UAAU,gBAGd,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/lib/components/Filter/kind.js

@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var hoverStyles = (0, _styledComponents.css)(["color:", ";background-color:", ";border:", " solid ", ";svg{color:", ";}"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.base.snowWhite));
 exports.hoverStyles = hoverStyles;
-var primaryStyle = (0, _styledComponents.css)(["border:", " solid ", ";&:hover{", ";}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), hoverStyles);
+var primaryStyle = (0, _styledComponents.css)(["border:", " solid ", ";&:hover{", ";}&:disabled:disabled{background-color:transparent;color:", ";}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), hoverStyles, (0, _toColorString.default)(_color.default.opacity.charcoal40));
 // light and dark are the same ATM.
 var lightStyles = {
   primary: primaryStyle

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CAsBpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CAyBpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}

package/lib/components/Filter/schema.js

@@ -19,7 +19,8 @@ var makeFilterSchemaPropTypes = function makeFilterSchemaPropTypes(extensions) {
     active: _reactDesc.PropTypes.bool.description("The Filter's active status. Use when you want to control the Filter with onClick.").defaultValue('false'),
     badgeIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render'),
     badgeColor: _reactDesc.PropTypes.string.description('Which color to use as background for the icon. It always displays when an icon is provided.').defaultValue('information'),
-    count: _reactDesc.PropTypes.number.description("The Filter's count, displayed to the left of the text. When not provided, no count is rendered.")
+    count: _reactDesc.PropTypes.number.description("The Filter's count, displayed to the left of the text. When not provided, no count is rendered."),
+    disabled: _reactDesc.PropTypes.bool.description("The Filter's displayed status of disabled or enabled.").defaultValue('false')
   }, extensions);
 };
 

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

@@ -13,5 +13,6 @@ export interface FilterProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     kind?: Kind;
     text: TranslatedText;
     variant?: Variant;
+    disabled?: boolean;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,OAAO,GAAG,QAAQ,CAAC;AAC/B,oBAAY,IAAI,GAAG,SAAS,CAAC;AAC7B,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,OAAO,GAAG,QAAQ,CAAC;AAC/B,oBAAY,IAAI,GAAG,SAAS,CAAC;AAC7B,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.102+320e735",
+  "version": "2.0.1-alpha.131+033b029",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "320e7359bbe053f6b2c9afe9fcbcb55bd6bbb3c1"
+  "gitHead": "033b029f71a409106e36a8f7ffadf3c7483e11c2"
 }