@decisiv/ui-components 2.0.1-alpha.176 → 2.0.1-alpha.178

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

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

package/lib/components/Badge/index.js

@@ -19,21 +19,9 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _styledComponentsModifiers = require("styled-components-modifiers");
-
-var _color = _interopRequireDefault(require("../../modifiers/color"));
-
-var _constants = require("./constants");
-
-var _commonUIColors = require("../../utils/commonUIColors");
-
-var _utils = require("../../utils");
-
 var _types = require("./types");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _styles = require("./styles");
 
 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; } }
 
@@ -43,57 +31,13 @@ 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; }
 
-var colorModifiers = (0, _utils.applyDynamicModifiers)('color', function (_ref) {
-  var color = _ref.color;
-  return (0, _styledComponents.css)(["", ""], color && color in _commonUIColors.commonUIColors && (0, _color.default)(_commonUIColors.commonUIColors[color]));
-});
-
-var getSizeStyles = function getSizeStyles(key) {
-  return (0, _styledComponents.css)(_constants.sizeStyles[key] || '');
-};
-
-var sizeModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
-  small: function small(_ref2) {
-    var v = _ref2.variant;
-    return getSizeStyles("small.".concat(v));
-  },
-  medium: function medium(_ref3) {
-    var v = _ref3.variant;
-    return getSizeStyles("medium.".concat(v));
-  },
-  large: function large(_ref4) {
-    var v = _ref4.variant;
-    return getSizeStyles("large.".concat(v));
-  }
-}, 'size');
-var variantModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
-  round: function round() {
-    return (0, _styledComponents.css)({
-      borderRadius: '50%'
-    });
-  },
-  square: function square() {
-    return (0, _styledComponents.css)({
-      borderRadius: '2px'
-    });
-  }
-}, 'variant'); // The default coloring is explicitly set instead of relying on the
-// `visualInterest.licoriceMousse.medium` colors. The "default" badge is
-// intended to be used in “empty” and/or “no results” messages, the snowWhite
-// fg color and lower contrast help convey “emptiness”.
-
-var BadgeContainer = _styledComponents.default.div.withConfig({
-  displayName: "Badge__BadgeContainer",
-  componentId: "sc-1y6oxgp-0"
-})(["align-items:center;display:inline-flex;justify-content:center;", ";", ";", ";", ";"], (0, _color.default)(_commonUIColors.commonUIColors.information), colorModifiers, sizeModifiers, variantModifiers);
-
 function Badge(props, containerRef) {
   var ariaLabel = props['aria-label'],
       Icon = props.icon,
       size = props.size,
       rest = _objectWithoutProperties(props, ["aria-label", "icon", "size"]);
 
-  return _react.default.createElement(BadgeContainer, _extends({
+  return _react.default.createElement(_styles.BadgeContainer, _extends({
     ref: containerRef,
     size: size
   }, rest), _react.default.createElement(Icon, {

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

@@ -55,12 +55,23 @@ describe('Badge', function () {
       expect(container).toMatchSnapshot();
     });
   });
+  ['bright', 'pastel'].forEach(function (palette) {
+    it("renders correctly with palette=\"".concat(palette, "\""), function () {
+      var _renderBadge3 = renderBadge({
+        palette: palette,
+        color: 'carrotCake'
+      }),
+          container = _renderBadge3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
   it("renders correctly with size=\"small\" and variant=\"square\"", function () {
-    var _renderBadge3 = renderBadge({
+    var _renderBadge4 = renderBadge({
       size: 'small',
       variant: 'square'
     }),
-        container = _renderBadge3.container;
+        container = _renderBadge4.container;
 
     expect(container).toMatchSnapshot();
   });
@@ -70,10 +81,10 @@ describe('Badge', function () {
           key = _ref2[0],
           value = _ref2[1];
 
-      var _renderBadge4 = renderBadge({
+      var _renderBadge5 = renderBadge({
         color: key
       }),
-          container = _renderBadge4.container;
+          container = _renderBadge5.container;
 
       expect(container.firstChild).toHaveStyleRule('background-color', (0, _toColorString.default)(value));
     });

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

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

package/lib/components/Badge/schema.js

@@ -15,6 +15,7 @@ schema.propTypes = {
   'aria-label': _reactDesc.PropTypes.string.description('Descriptive text for accessibility purposes').isRequired,
   color: _reactDesc.PropTypes.string.description('(See note) Sets the color for the background and the icon').defaultValue('information'),
   icon: _reactDesc.PropTypes.element.description('Must be an icon component from `@decisiv/iconix`').isRequired,
+  palette: _reactDesc.PropTypes.oneOf(['bright', 'pastel']).description('What color variant to render').defaultValue('bright'),
   size: _reactDesc.PropTypes.oneOf(['small', 'medium', 'large']).description('(See note) Sets the size of the badge').defaultValue('medium'),
   variant: _reactDesc.PropTypes.oneOf(['round', 'square']).description('(See note) Controls primary style variations of the badge').defaultValue('round')
 };

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

@@ -0,0 +1,3 @@
+import { BadgeProps } from './types';
+export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, Pick<BadgeProps, "variant" | "size" | "color" | "palette">, never>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/styles.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA+DrC,eAAO,MAAM,cAAc,4HAQ1B,CAAC"}

package/lib/components/Badge/styles.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BadgeContainer = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styledComponentsModifiers = require("styled-components-modifiers");
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _color = _interopRequireDefault(require("../../modifiers/color"));
+
+var _constants = require("./constants");
+
+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; } }
+
+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 FG_COLOR = {
+  pastel: 'dark'
+};
+var PALETTE_MAPPER = {
+  pastel: 'light',
+  bright: 'medium'
+};
+
+var colorModifiers = function colorModifiers(props) {
+  var _props$palette = props.palette,
+      palette = _props$palette === void 0 ? 'bright' : _props$palette,
+      color = props.color;
+
+  if (color && color in _commonUIColors.commonUIColors) {
+    var baseColor = _commonUIColors.commonUIThreeShadeColors[color];
+    var fgColor = palette === 'bright' ? _designTokens.color.base.snowWhite : baseColor[FG_COLOR[palette]];
+    var bgColor = baseColor[PALETTE_MAPPER[palette]];
+    var colorPalette = palette === 'bright' ? bgColor : _objectSpread({}, bgColor, {
+      fg: fgColor
+    });
+    return (0, _styledComponents.css)(["", ""], (0, _color.default)(colorPalette));
+  }
+
+  return null;
+};
+
+var getSizeStyles = function getSizeStyles(key) {
+  return (0, _styledComponents.css)(_constants.sizeStyles[key] || '');
+};
+
+var sizeModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
+  small: function small(_ref) {
+    var v = _ref.variant;
+    return getSizeStyles("small.".concat(v));
+  },
+  medium: function medium(_ref2) {
+    var v = _ref2.variant;
+    return getSizeStyles("medium.".concat(v));
+  },
+  large: function large(_ref3) {
+    var v = _ref3.variant;
+    return getSizeStyles("large.".concat(v));
+  }
+}, 'size');
+var variantModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
+  round: function round() {
+    return (0, _styledComponents.css)({
+      borderRadius: '50%'
+    });
+  },
+  square: function square() {
+    return (0, _styledComponents.css)({
+      borderRadius: '2px'
+    });
+  }
+}, 'variant'); // The default coloring is explicitly set instead of relying on the
+// `visualInterest.licoriceMousse.medium` colors. The "default" badge is
+// intended to be used in “empty” and/or “no results” messages, the snowWhite
+// fg color and lower contrast help convey “emptiness”.
+// eslint-disable-next-line import/prefer-default-export
+
+var BadgeContainer = _styledComponents.default.div.withConfig({
+  displayName: "styles__BadgeContainer",
+  componentId: "sc-1lruwqa-0"
+})(["align-items:center;display:inline-flex;justify-content:center;", ";", ";", ";"], colorModifiers, sizeModifiers, variantModifiers);
+
+exports.BadgeContainer = BadgeContainer;

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

@@ -8,6 +8,7 @@ export interface BadgeProps {
     'aria-label': string;
     color?: CommonUIColorKeys;
     icon: IconComponent;
+    palette?: 'pastel' | 'bright';
     size?: 'small' | 'medium' | 'large';
     variant?: 'round' | 'square';
 }

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AAIpC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,oBAAY,QAAQ,GAAG,cAAc,CAAC;AAItC,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,iBAAS,gBAAgB,CACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAE,OAAO,GACrB,KAAK,GAAG,IAAI,CAqBd;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AAIpC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,oBAAY,QAAQ,GAAG,cAAc,CAAC;AAItC,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,iBAAS,gBAAgB,CACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAE,OAAO,GACrB,KAAK,GAAG,IAAI,CAqBd;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC"}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SearchInputProps, SearchItem, StyledFlexProps } from './types';
-declare function SearchInput({ onSearch, value, onChange, size, disabled, searchOn, ...props }: SearchInputProps): JSX.Element;
+declare function SearchInput({ onSearch, value, onChange, size, disabled, searchDisabled, searchOn, ...props }: SearchInputProps): JSX.Element;
 declare namespace SearchInput {
     var defaultProps: {
         size: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAkExE,iBAAwB,WAAW,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA0GhC;kBAlHuB,WAAW;;;;;eAAX,WAAW;AAwHnC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAkExE,iBAAwB,WAAW,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA0GhC;kBAnHuB,WAAW;;;;;eAAX,WAAW;AAyHnC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC"}

package/lib/components/SearchInput/index.js

@@ -116,14 +116,15 @@ function SearchInput(_ref7) {
       onChange = _ref7.onChange,
       size = _ref7.size,
       disabled = _ref7.disabled,
+      searchDisabled = _ref7.searchDisabled,
       _ref7$searchOn = _ref7.searchOn,
       searchOn = _ref7$searchOn === void 0 ? 'submit' : _ref7$searchOn,
-      props = _objectWithoutProperties(_ref7, ["onSearch", "value", "onChange", "size", "disabled", "searchOn"]);
+      props = _objectWithoutProperties(_ref7, ["onSearch", "value", "onChange", "size", "disabled", "searchDisabled", "searchOn"]);
 
   var translate = (0, _useTranslations.default)();
   var handleSearch = (0, _react.useCallback)(function () {
-    !disabled && onSearch && onSearch(value);
-  }, [disabled, onSearch, value]);
+    !disabled && !searchDisabled && onSearch && onSearch(value);
+  }, [disabled, searchDisabled, onSearch, value]);
   var mediumSized = size === 'medium';
   var hasText = !!value && !!value.length;
   var handleClear = (0, _react.useCallback)(function () {
@@ -176,7 +177,7 @@ function SearchInput(_ref7) {
     }, translate(undefined, 'searchInput.clear')), searchOn === 'submit' && _react.default.createElement(_Button.default, {
       "aria-label": "Search",
       tabIndex: 0,
-      disabled: disabled || !hasText,
+      disabled: disabled || searchDisabled || !hasText,
       text: mediumSized ? translate(undefined, 'searchInput.search') : '',
       icon: mediumSized ? undefined : _Search.default,
       size: size,

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

@@ -345,6 +345,66 @@ describe('Search input', function () {
       }
     }, _callee11);
   })));
+  it('renders only the search button as disabled when searchDisabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
+    var container, input, button;
+    return regeneratorRuntime.wrap(function _callee12$(_context12) {
+      while (1) {
+        switch (_context12.prev = _context12.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "some value",
+              searchDisabled: true
+            }));
+            input = container.getByRole('textbox');
+            button = container.getByRole('button');
+            expect(button).toBeDisabled();
+            expect(input).toBeEnabled();
+
+          case 5:
+          case "end":
+            return _context12.stop();
+        }
+      }
+    }, _callee12);
+  })));
+  it('does not calls search callback when searchDisabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
+    var container, searchInput;
+    return regeneratorRuntime.wrap(function _callee13$(_context13) {
+      while (1) {
+        switch (_context13.prev = _context13.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              searchDisabled: true,
+              value: "Searched value",
+              onChange: onChangeMock,
+              onSearch: onSearchMock,
+              size: "medium"
+            }));
+            _context13.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            _context13.next = 5;
+            return _context13.sent.querySelector('input');
+
+          case 5:
+            searchInput = _context13.sent;
+
+            _react2.fireEvent.keyPress(searchInput, {
+              code: 'Enter',
+              key: 'Enter',
+              charCode: 13
+            });
+
+            expect(onSearchMock).not.toHaveBeenCalled();
+
+          case 8:
+          case "end":
+            return _context13.stop();
+        }
+      }
+    }, _callee13);
+  })));
   describe('when using the searchOn `change`', function () {
     var searchOn = 'change';
     it('renders the search icon when size is "small"', function () {
@@ -376,11 +436,11 @@ describe('Search input', function () {
 
       expect(queryByRole('button')).not.toBeInTheDocument();
     });
-    it('triggers the onSearch function when changing the value of the component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
+    it('triggers the onSearch function when changing the value of the component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
       var container, searchInput;
-      return regeneratorRuntime.wrap(function _callee12$(_context12) {
+      return regeneratorRuntime.wrap(function _callee14$(_context14) {
         while (1) {
-          switch (_context12.prev = _context12.next) {
+          switch (_context14.prev = _context14.next) {
             case 0:
               container = render(_react.default.createElement(_.default, {
                 searchOn: searchOn,
@@ -388,15 +448,15 @@ describe('Search input', function () {
                 onChange: onChangeMock,
                 onSearch: onSearchMock
               }));
-              _context12.next = 3;
+              _context14.next = 3;
               return container.findByTestId('search-container');
 
             case 3:
-              _context12.next = 5;
-              return _context12.sent.querySelector('input');
+              _context14.next = 5;
+              return _context14.sent.querySelector('input');
 
             case 5:
-              searchInput = _context12.sent;
+              searchInput = _context14.sent;
 
               _react2.fireEvent.change(searchInput, {
                 target: {
@@ -408,10 +468,10 @@ describe('Search input', function () {
 
             case 8:
             case "end":
-              return _context12.stop();
+              return _context14.stop();
           }
         }
-      }, _callee12);
+      }, _callee14);
     })));
   });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAkCxD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAsCxD,eAAe,MAAM,CAAC"}

package/lib/components/SearchInput/schema.js

@@ -16,6 +16,7 @@ schema.propTypes = {
   debounceTimeout: _reactDesc.PropTypes.number.description('The amount of ms to wait until onSearch is called after the user has typed in the  search input').defaultValue('500'),
   size: _reactDesc.PropTypes.oneOf(['medium', 'small']).description('Controls the size of the search input.').defaultValue('medium'),
   disabled: _reactDesc.PropTypes.bool.description('Boolean indicating whether the search input is disabled.'),
+  searchDisabled: _reactDesc.PropTypes.bool.description('Boolean indicating whether only the search button is disabled.'),
   value: _reactDesc.PropTypes.string.description('A text value to be displayed on the input field'),
   onSearch: _reactDesc.PropTypes.func.description('A callback that is invoked with the input value when the the search action is performed'),
   onChange: _reactDesc.PropTypes.func.description('A callback that is invoked when the value of the search field changes')

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

@@ -9,6 +9,7 @@ export declare type Size = 'medium' | 'small';
 export declare type SearchOn = 'submit' | 'change';
 export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'label'>, Omit<BaseInputFieldProps, 'children' | 'onClick' | 'label'> {
     zIndex?: number;
+    searchDisabled?: boolean;
     searchOn?: SearchOn;
     onSearch?: (value: string) => void;
     onSelectItem?: (value: any) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACV;AAED,oBAAY,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtC,oBAAY,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3C,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,EACzE,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC;IACxE,kBAAkB,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;CACjD;AAED,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACV;AAED,oBAAY,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtC,oBAAY,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3C,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,EACzE,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC;IACxE,kBAAkB,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;CACjD;AAED,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.176+0ca8bda",
+  "version": "2.0.1-alpha.178+7978735",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@decisiv/breakpoint-observer": "^1.8.8",
-    "@decisiv/design-tokens": "^1.8.9-alpha.294+0ca8bda",
-    "@decisiv/iconix": "^2.0.1-alpha.176+0ca8bda",
+    "@decisiv/design-tokens": "^1.8.8",
+    "@decisiv/iconix": "^2.0.0",
     "@decisiv/prop-types": "^1.6.9",
     "@seznam/compose-react-refs": "^1.0.2",
     "csstype": "^2.6.5",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "0ca8bda2fe88c901881b6fb2262f99c143da7075"
+  "gitHead": "797873560822df50197eb9218de314ad7ad5d4f3"
 }