@zohodesk/components 1.1.1 → 1.2.0-temp-195

package/lib/Select/SelectWithIcon.js

@@ -581,13 +581,15 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
 }(_react.Component);
 
 SelectWithIcon.propTypes = _propTypes.SelectWithIcon_propTypes;
-SelectWithIcon.defaultProps = _defaultProps.SelectWithIcon_defaultProps; // if (__DOCS__) {
+SelectWithIcon.defaultProps = _defaultProps.SelectWithIcon_defaultProps;
+var SelectWithIconComponent = (0, _Popup["default"])(SelectWithIcon);
+SelectWithIconComponent.defaultProps = SelectWithIcon.defaultProps;
+SelectWithIconComponent.propTypes = SelectWithIcon.propTypes; // if (__DOCS__) {
 //   SelectWithIcon.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
 // }
 
-var _default = (0, _Popup["default"])(SelectWithIcon);
-
+var _default = SelectWithIconComponent;
 exports["default"] = _default;

package/lib/Select/props/defaultProps.js

@@ -72,6 +72,7 @@ var GroupSelect_defaultProps = {
   dataIdDownIcon: 'downIcon',
   dataIdLoading: 'loading',
   dataIdSrchEmptyMsg: 'searchEmptyMessage',
+  dataId: 'GroupSelect',
   isPopupOpenOnEnter: false,
   borderColor: 'default',
   needTick: true,

package/lib/Select/props/propTypes.js

@@ -9,6 +9,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(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 Select_propTypes = {
   animationStyle: _propTypes["default"].string,
   autoComplete: _propTypes["default"].bool,
@@ -96,7 +102,13 @@ var Select_propTypes = {
   }),
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
-  isAbsolutePositioningNeeded: _propTypes["default"].bool
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  openPopupOnly: _propTypes["default"].bool,
+  ariaLabelledby: _propTypes["default"].string,
+  positionsOffset: _propTypes["default"].array,
+  targetOffset: _propTypes["default"].array,
+  isRestrictScroll: _propTypes["default"].bool,
+  dropBoxPortalId: _propTypes["default"].string
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {
@@ -143,12 +155,9 @@ var GroupSelect_propTypes = {
   animationStyle: _propTypes["default"].string,
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
   defaultDropBoxPosition: _propTypes["default"].oneOf(['bottom', 'top', 'left', 'right']),
-  isAnimate: _propTypes["default"].bool,
-  onFocus: _propTypes["default"].func,
   size: _propTypes["default"].oneOf(['medium', 'xmedium']),
   textBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'xmedium']),
   title: _propTypes["default"].string,
-  variant: _propTypes["default"].string,
   needResponsive: _propTypes["default"].bool,
   className: _propTypes["default"].string,
   textBoxVariant: _propTypes["default"].string,
@@ -176,10 +185,14 @@ var GroupSelect_propTypes = {
     searchEmptyText: _propTypes["default"].string
   }),
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  isDefaultSelectValue: _propTypes["default"].bool
 };
 exports.GroupSelect_propTypes = GroupSelect_propTypes;
-var SelectWithAvatar_propTypes = {
+
+var SelectWithAvatar_propTypes = _objectSpread(_objectSpread({}, Select_propTypes), {}, {
+  textBoxClass: _propTypes["default"].string,
+  imageField: _propTypes["default"].string,
   animationStyle: _propTypes["default"].string,
   avatarPalette: _propTypes["default"].string,
   borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
@@ -237,7 +250,8 @@ var SelectWithAvatar_propTypes = {
   needEffect: _propTypes["default"].bool,
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string
-};
+});
+
 exports.SelectWithAvatar_propTypes = SelectWithAvatar_propTypes;
 var SelectWithIcon_propTypes = {
   animationStyle: _propTypes["default"].oneOf(['default', 'bounce']),
@@ -284,6 +298,13 @@ var SelectWithIcon_propTypes = {
   valueKey: _propTypes["default"].string,
   htmlId: _propTypes["default"].string,
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  needBorder: _propTypes["default"].bool,
+  searchBoxSize: _propTypes["default"].string,
+  needResponsive: _propTypes["default"].bool,
+  boxSize: _propTypes["default"].string,
+  emptyMessage: _propTypes["default"].string
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_propTypes;

package/lib/Stencils/Stencils.module.css

@@ -1,96 +1,96 @@
-.varClass {
-  /* stencils default variables */
-  --stencil_height: var(--zd_size9);
-  --stencil_width: 100%;
-  --stencil_border_radius: 5px;
-}
-.container {
-  composes: varClass;
-  height: var(--stencil_height);
-  width: var(--stencil_width);
-  border-radius: var(--stencil_border_radius);
-}
-.stencil {
-  background-size: 800px 1px;
-}
-[dir=ltr] .stencil {
-  animation-name:  placeHolderShimmer-ltr ;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
-  animation-timing-function: linear;
-}
-[dir=rtl] .stencil {
-  animation-name:  placeHolderShimmer-rtl ;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
-  animation-timing-function: linear;
-}
-@keyframes placeHolderShimmer-ltr {
-  0% {
-    background-position: calc(var(--zd_size468) * -1) 0;
-  }
-
-  100% {
-    background-position: var(--zd_size468) 0;
-  }
-}
-@keyframes placeHolderShimmer-rtl {
-  0% {
-    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
-  }
-
-  100% {
-    background-position: var(--zd_size468) 100%;
-  }
-}
-
-.rectangular {
-  composes: stencil;
-  --stencil_height: var(--zd_size9);
-  --stencil_border_radius: 5px;
-}
-.primary {
-  background-color: var(--zdt_stencil_primary_bg);
-  background-image: var(--zdt_stencil_primary_gradient_bg);
-}
-.secondary {
-  background-color: var(--zdt_stencil_secondary_bg);
-  background-image: var(--zdt_stencil_secondary_gradient_bg);
-}
-.dark {
-  background-color: var(--zdt_stencil_dark_bg);
-  background-image: var(--zdt_stencil_dark_gradient_bg);
-}
-
-.small {
-  --stencil_width: var(--zd_size110);
-}
-.default {
-  --stencil_width: 100%;
-}
-.medium {
-  --stencil_width: var(--zd_size170);
-}
-.large {
-  --stencil_width: var(--zd_size220);
-}
-
-.circle {
-  composes: stencil;
-  --stencil_border_radius: 50%;
-}
-.clarge {
-  --stencil_width: var(--zd_size42);
-  --stencil_height: var(--zd_size42);
-}
-.cmedium,
-.cdefault {
-  --stencil_width: var(--zd_size30);
-  --stencil_height: var(--zd_size30);
-}
-.csmall {
-  --stencil_width: var(--zd_size20);
-  --stencil_height: var(--zd_size20);
-}
+.varClass {
+  /* stencils default variables */
+  --stencil_height: var(--zd_size9);
+  --stencil_width: 100%;
+  --stencil_border_radius: 5px;
+}
+.container {
+  composes: varClass;
+  height: var(--stencil_height);
+  width: var(--stencil_width);
+  border-radius: var(--stencil_border_radius);
+}
+.stencil {
+  background-size: 800px 1px;
+}
+[dir=ltr] .stencil {
+  animation-name:  placeHolderShimmer-ltr ;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-duration: var(--zd_transition10);
+  animation-timing-function: linear;
+}
+[dir=rtl] .stencil {
+  animation-name:  placeHolderShimmer-rtl ;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-duration: var(--zd_transition10);
+  animation-timing-function: linear;
+}
+@keyframes placeHolderShimmer-ltr {
+  0% {
+    background-position: calc(var(--zd_size468) * -1) 0;
+  }
+
+  100% {
+    background-position: var(--zd_size468) 0;
+  }
+}
+@keyframes placeHolderShimmer-rtl {
+  0% {
+    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
+  }
+
+  100% {
+    background-position: var(--zd_size468) 100%;
+  }
+}
+
+.rectangular {
+  composes: stencil;
+  --stencil_height: var(--zd_size9);
+  --stencil_border_radius: 5px;
+}
+.primary {
+  background-color: var(--zdt_stencil_primary_bg);
+  background-image: var(--zdt_stencil_primary_gradient_bg);
+}
+.secondary {
+  background-color: var(--zdt_stencil_secondary_bg);
+  background-image: var(--zdt_stencil_secondary_gradient_bg);
+}
+.dark {
+  background-color: var(--zdt_stencil_dark_bg);
+  background-image: var(--zdt_stencil_dark_gradient_bg);
+}
+
+.small {
+  --stencil_width: var(--zd_size110);
+}
+.default {
+  --stencil_width: 100%;
+}
+.medium {
+  --stencil_width: var(--zd_size170);
+}
+.large {
+  --stencil_width: var(--zd_size220);
+}
+
+.circle {
+  composes: stencil;
+  --stencil_border_radius: 50%;
+}
+.clarge {
+  --stencil_width: var(--zd_size42);
+  --stencil_height: var(--zd_size42);
+}
+.cmedium,
+.cdefault {
+  --stencil_width: var(--zd_size30);
+  --stencil_height: var(--zd_size30);
+}
+.csmall {
+  --stencil_width: var(--zd_size20);
+  --stencil_height: var(--zd_size20);
+}

package/lib/Stencils/__tests__/Stencils.spec.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Stencils = _interopRequireDefault(require("../Stencils.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Stencils', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Stencils["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var palette = ['primary', 'secondary', 'dark'];
+  test.each(palette)('rendering the palette of- %s', function (palette) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Stencils["default"], {
+      palette: palette
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var shape = ['rect', 'circle'];
+  test.each(shape)('rendering the shape of- %s', function (shape) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Stencils["default"], {
+      shape: shape
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var size = ['small', 'medium', 'large', 'default'];
+  test.each(size)('rendering the size of- %s', function (size) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Stencils["default"], {
+      size: size
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Stencils["default"], {
+      customClass: "StencilsCustomClass"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stencils rendering the customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular medium primary StencilsCustomClass"
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular medium primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the palette of- dark 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular medium dark "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the palette of- primary 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular medium primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the palette of- secondary 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular medium secondary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the shape of- circle 1`] = `
+<DocumentFragment>
+  <div
+    class="container circle cmedium primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the shape of- rect 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular medium primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the size of- default 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular default primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the size of- large 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular large primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the size of- medium 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular medium primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the size of- small 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular small primary "
+  />
+</DocumentFragment>
+`;

package/lib/Switch/Switch.js

@@ -108,7 +108,6 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         "data-title": disabled ? disableTitle : title,
         "aria-checked": checked,
         role: "switch",
-        tabIndex: isReadOnly || disabled ? '-1' : '0',
         dataSelectorId: dataSelectorId
       }, SwitchProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_SwitchModule["default"][size], " ").concat(customSwitchSize)
@@ -126,7 +125,8 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         htmlFor: id,
         "data-id": dataId,
         "data-test-id": dataId,
-        className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch)
+        className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch),
+        tabIndex: isReadOnly || disabled ? '-1' : '0'
       })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,
         palette: labelPalette,