@decisiv/ui-components 2.0.1-alpha.139 → 2.0.1-alpha.142

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

@@ -0,0 +1,217 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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; }
+
+// Prevent warnings about missing document methods (createRange, etc.)
+jest.mock('popper.js', function () {
+  var _class, _temp;
+
+  var PopperJS = jest.requireActual('popper.js');
+  return _temp = _class = function _class() {
+    _classCallCheck(this, _class);
+
+    return {
+      destroy: function destroy() {},
+      scheduleUpdate: function scheduleUpdate() {}
+    };
+  }, _defineProperty(_class, "placements", PopperJS.placements), _temp;
+});
+
+var wrapper = function wrapper(_ref) {
+  var children = _ref.children;
+  return _react.default.createElement(_ConfigProvider.ConfigProvider, null, children);
+};
+
+var render = function render(ui, options) {
+  return (0, _react2.render)(ui, _objectSpread({}, options, {
+    wrapper: wrapper
+  }));
+};
+
+var defaultProps = {
+  id: 'text-field-1',
+  label: 'label',
+  name: 'name',
+  onChange: function onChange() {},
+  value: ''
+};
+describe('PasswordField', function () {
+  it('renders the password input', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd'
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'password');
+  });
+  it('shows the label "Password"', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd'
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container.getByText('Password')).not.toBeNull();
+  });
+  it('does not show the label "Password" when hideLabel is true', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd',
+      hideLabel: true
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container.queryByText('Password')).not.toBeVisible();
+  });
+  it('renders the input as a text-type input', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd',
+      initialPasswordVisible: true
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'text');
+    expect(container.queryByTestId('password-input')).not.toBeNull();
+  });
+  it('toggles the input type when the eye icon is clicked', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd'
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'password');
+
+    _react2.fireEvent.click(container.getByTestId('toggle-password-visible'));
+
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'text');
+
+    _react2.fireEvent.click(container.getByTestId('toggle-password-visible'));
+
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'password');
+  });
+  it('shows the eye icon when the password is hidden', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd'
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container).toMatchSnapshot();
+  });
+  it('shows the eye slash icon when the password is visible', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd',
+      initialPasswordVisible: true
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container).toMatchSnapshot();
+  });
+  it('toggle the eye button with the enter key', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd'
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'password');
+
+    _react2.fireEvent.keyPress(container.getByTestId('toggle-password-visible'), {
+      code: 'Enter',
+      key: 'Enter',
+      charCode: 13
+    });
+
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'text');
+
+    _react2.fireEvent.keyPress(container.getByTestId('toggle-password-visible'), {
+      code: 'Enter',
+      key: 'Enter',
+      charCode: 13
+    });
+
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'password');
+  });
+  it('shows the "Show Password" tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var props, container;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            props = _objectSpread({}, defaultProps, {
+              value: 'samplepasswd'
+            });
+            container = render(_react.default.createElement(_.default, props));
+            _context.next = 4;
+            return _react2.fireEvent.focus(container.getByTestId('toggle-password-visible'), {
+              bubbles: true
+            });
+
+          case 4:
+            _context.t0 = expect;
+            _context.next = 7;
+            return container.findByText('Show Password');
+
+          case 7:
+            _context.t1 = _context.sent;
+            (0, _context.t0)(_context.t1).not.toBeNull();
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('shows the "Hide Password" tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var props, container;
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            props = _objectSpread({}, defaultProps, {
+              value: 'samplepasswd'
+            });
+            container = render(_react.default.createElement(_.default, _extends({}, props, {
+              initialPasswordVisible: true
+            })));
+            _context2.next = 4;
+            return _react2.fireEvent.focus(container.getByTestId('toggle-password-visible'), {
+              bubbles: true
+            });
+
+          case 4:
+            _context2.t0 = expect;
+            _context2.next = 7;
+            return container.findByText('Hide Password');
+
+          case 7:
+            _context2.t1 = _context2.sent;
+            (0, _context2.t0)(_context2.t1).not.toBeNull();
+
+          case 9:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/PasswordField/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAA6C,CAAC;AAa1D,eAAe,MAAM,CAAC"}

package/lib/components/PasswordField/schema.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _reactDesc = require("react-desc");
+
+var _InputField = require("../../atoms/InputField");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var schema = (0, _reactDesc.describe)({
+  displayName: 'PasswordField'
+});
+schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makePropTypes(), ['children', 'maxLength', 'showCharacterCount', 'icon', 'readOnly', 'label']));
+var _default = schema;
+exports.default = _default;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { SearchInputProps, SearchItem, StyledFlexProps } from './types';
+declare function SearchInput({ onSearch, value, onChange, size, disabled, ...props }: SearchInputProps): JSX.Element;
+declare namespace SearchInput {
+    var defaultProps: {
+        size: string;
+    };
+}
+export default SearchInput;
+export { SearchInputProps, SearchItem, StyledFlexProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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;AA6DxE,iBAAwB,WAAW,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA+FhC;kBAtGuB,WAAW;;;;;eAAX,WAAW;AA4GnC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC"}

package/lib/components/SearchInput/index.js

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SearchInput;
+Object.defineProperty(exports, "SearchInputProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.SearchInputProps;
+  }
+});
+Object.defineProperty(exports, "SearchItem", {
+  enumerable: true,
+  get: function get() {
+    return _types.SearchItem;
+  }
+});
+Object.defineProperty(exports, "StyledFlexProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.StyledFlexProps;
+  }
+});
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
+
+var _Search = _interopRequireDefault(require("@decisiv/iconix/lib/components/Search"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _InputField = _interopRequireDefault(require("../../atoms/InputField"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
+var _types = require("./types");
+
+var _Input = _interopRequireDefault(require("../TextField/Input"));
+
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 StyledFlex = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "SearchInput__StyledFlex",
+  componentId: "sc-1lgi0sd-0"
+})(["align-items:center;[cursor='text']{height:", "px;> div{", ";padding-bottom:", ";}}"], function (_ref) {
+  var mediumSized = _ref.mediumSized;
+  return mediumSized ? 50 : 32;
+}, function (_ref2) {
+  var mediumSized = _ref2.mediumSized;
+  return !mediumSized && "padding-top: ".concat((0, _rem.default)(_spacing.default.base * 0.1));
+}, function (_ref3) {
+  var mediumSized = _ref3.mediumSized;
+  return (0, _rem.default)(_spacing.default.base * (mediumSized ? 0.6 : 0.1));
+});
+var StyledBody = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "SearchInput__StyledBody",
+  componentId: "sc-1lgi0sd-1"
+})(["flex:1;align-items:center;"]);
+var ButtonGroup = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "SearchInput__ButtonGroup",
+  componentId: "sc-1lgi0sd-2"
+})(["margin-right:", ";cursor:default;"], function (_ref4) {
+  var mediumSized = _ref4.mediumSized;
+  return (0, _rem.default)(_spacing.default.base * (mediumSized ? 1 : 0.3));
+});
+var SearchIconWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "SearchInput__SearchIconWrapper",
+  componentId: "sc-1lgi0sd-3"
+})(["color:", ";margin-right:", ";margin-left:", ";align-items:center;"], (0, _toColorString.default)(_color.default.base.alaskanHusky), (0, _rem.default)(_spacing.default.base * 1.5), (0, _rem.default)(_spacing.default.base * 0.5));
+var TimesIconWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "SearchInput__TimesIconWrapper",
+  componentId: "sc-1lgi0sd-4"
+})(["visibility:", ";margin-right:", ";color:", ";align-items:center;border:1px solid transparent;border-radius:2px;&:hover{color:", ";}&:focus{outline:none;border:1px solid ", ";", "}"], function (_ref5) {
+  var visible = _ref5.visible;
+  return visible ? 'visible' : 'hidden';
+}, (0, _rem.default)(_spacing.default.base), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.status.danger.medium), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40));
+var StyledInput = (0, _styledComponents.default)(_Input.default).withConfig({
+  displayName: "SearchInput__StyledInput",
+  componentId: "sc-1lgi0sd-5"
+})(["padding:0;color:", ";"], (0, _toColorString.default)(_color.default.base.charcoal));
+
+function SearchInput(_ref6) {
+  var onSearch = _ref6.onSearch,
+      value = _ref6.value,
+      onChange = _ref6.onChange,
+      size = _ref6.size,
+      disabled = _ref6.disabled,
+      props = _objectWithoutProperties(_ref6, ["onSearch", "value", "onChange", "size", "disabled"]);
+
+  var translate = (0, _useTranslations.default)();
+  var handleSearch = (0, _react.useCallback)(function () {
+    !disabled && onSearch && onSearch(value);
+  }, [disabled, onSearch, value]);
+  var mediumSized = size === 'medium';
+  var hasText = !!value && !!value.length;
+  var handleClear = (0, _react.useCallback)(function () {
+    !disabled && onChange && onChange({
+      target: {
+        value: ''
+      }
+    });
+  }, [disabled, onChange]);
+  var handleKeyPress = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Enter') handleSearch();
+  }, [handleSearch]);
+  return _react.default.createElement(StyledFlex, {
+    mediumSized: mediumSized,
+    flex: 1,
+    "data-testid": "search-container"
+  }, _react.default.createElement(_InputField.default, _extends({
+    label: "",
+    hideLabel: true,
+    disabled: disabled,
+    value: value
+  }, props), function (p) {
+    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(StyledBody, null, mediumSized && _react.default.createElement(SearchIconWrapper, {
+      disabled: mediumSized
+    }, _react.default.createElement(_Search.default, {
+      size: "medium",
+      "data-testid": "search-icon"
+    })), _react.default.createElement(StyledInput, _extends({}, p, {
+      onChange: onChange,
+      onKeyPress: handleKeyPress
+    })), _react.default.createElement(ButtonGroup, {
+      mediumSized: mediumSized
+    }, !disabled && _react.default.createElement(_Tooltip.default, {
+      placement: "top",
+      target: // eslint-disable-next-line react/jsx-wrap-multilines
+      _react.default.createElement(TimesIconWrapper, {
+        tabIndex: 0,
+        "aria-label": translate(undefined, 'searchInput.clearSearch'),
+        onClick: handleClear,
+        visible: hasText
+      }, _react.default.createElement(_Times.default, {
+        size: "small"
+      }))
+    }, translate(undefined, 'searchInput.clear')), _react.default.createElement(_Button.default, {
+      "aria-label": "Search",
+      tabIndex: 0,
+      disabled: disabled || !hasText,
+      text: mediumSized ? translate(undefined, 'searchInput.search') : '',
+      icon: mediumSized ? undefined : _Search.default,
+      size: size,
+      onClick: handleSearch
+    }))));
+  }));
+}
+
+SearchInput.defaultProps = {
+  size: 'medium'
+};