@zohodesk/components 1.4.21 → 1.4.22

package/lib/TextBoxIcon/props/propTypes.js

@@ -57,8 +57,7 @@ var propTypes = _objectSpread(_objectSpread({}, _propTypes2.propTypes), {}, {
   customClass: _propTypes["default"].shape({
     customTBoxWrap: _propTypes["default"].string,
     customTextBox: _propTypes["default"].string,
-    customTBoxIcon: _propTypes["default"].string,
-    customTBoxLine: _propTypes["default"].string
+    customTBoxIcon: _propTypes["default"].string
   }),
   iconOnHover: _propTypes["default"].bool,
   isFocus: _propTypes["default"].bool,

package/lib/shared/ArrowIcon/ArrowIcon.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = require("../../Layout");
+
+var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
+
+var _utils = require("@zohodesk/utils");
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _ArrowIconModule = _interopRequireDefault(require("./ArrowIcon.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+
+var ArrowIcon = function ArrowIcon(props) {
+  var dataId = props.dataId,
+      isRotated = props.isRotated,
+      isActive = props.isActive,
+      customClass = props.customClass,
+      customProps = props.customProps,
+      tagAttributes = props.tagAttributes,
+      a11yAttributes = props.a11yAttributes,
+      iconSize = props.iconSize,
+      isDisabled = props.isDisabled,
+      isReadOnly = props.isReadOnly,
+      renderCustomToggleIndicator = props.renderCustomToggleIndicator;
+  var _customClass$iconClas = customClass.iconClass,
+      iconClass = _customClass$iconClas === void 0 ? '' : _customClass$iconClas,
+      _customClass$containe = customClass.containerClass,
+      containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
+  return (0, _utils.isRenderable)(renderCustomToggleIndicator) ? (0, _utils.renderNode)(renderCustomToggleIndicator, {
+    isRotated: isRotated,
+    isActive: isActive,
+    isReadOnly: isReadOnly,
+    isDisabled: isDisabled
+  }) : /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
+    isInline: true,
+    isCover: false,
+    align: "both",
+    "aria-hidden": true
+  }, tagAttributes, a11yAttributes, customProps, {
+    dataId: "".concat(dataId, "_downIcon"),
+    className: "".concat(_ArrowIconModule["default"].arrowIcon, " ").concat(isRotated ? _ArrowIconModule["default"].rotated : '', " ").concat(isActive ? _ArrowIconModule["default"].active : '', " ").concat(isDisabled ? _ArrowIconModule["default"].disabled : '', " ").concat(isReadOnly ? _ArrowIconModule["default"].readonly : '', " ").concat(containerClass)
+  }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    name: "ZD-down",
+    size: iconSize,
+    iconClass: iconClass
+  }));
+};
+
+ArrowIcon.defaultProps = _defaultProps["default"];
+ArrowIcon.propTypes = _propTypes["default"];
+var _default = ArrowIcon;
+exports["default"] = _default;

package/lib/shared/ArrowIcon/ArrowIcon.module.css

@@ -0,0 +1,43 @@
+.varClass {
+    --local-arrowIcon-color: var(--zdt_arrowicon_default_icon);
+}
+
+.arrowIcon {
+  composes: varClass;
+  color: var(--local-arrowIcon-color);
+  transition: transform var(--zd_transition3);
+  margin: 0 var(--zd_size5) ;
+}
+.transparentContainer .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.transparentContainer .rotated,
+.transparentContainer:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}
+
+[dir=ltr] .rotated {
+    transform: rotateZ(-180deg);
+}
+
+[dir=rtl] .rotated {
+  transform: rotateZ(180deg);
+}
+
+.rotated,
+.active,
+.arrowContainer:hover .arrowIcon,
+.transparentContainer:hover .arrowIcon {
+  --local-arrowIcon-color: var(--zdt_arrowicon_hover_icon);
+}
+
+.disabled {
+  composes: disabled from '../../common/common.module.css';
+}
+
+.readonly {
+  composes: curdefault from '../../common/common.module.css';
+}

package/lib/shared/ArrowIcon/__tests__/ArrowIcon.spec.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ArrowIcon = _interopRequireDefault(require("../ArrowIcon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('ArrowIcon', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with dataId', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+      dataId: "ArrowIcon-test-dataId"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isRotated is true', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+      isRotated: true
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isActive is true', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+      isActive: true
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+      isDisabled: true
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+      isReadOnly: true
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with customClass', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+      customClass: {
+        iconClass: 'arrowIcon_iconClass',
+        containerClass: 'arrowIcon_containerClass'
+      }
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with a11yAttributes', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+      a11yAttributes: {
+        'data-a11y-focus': true
+      }
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with tagAttributes', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+      tagAttributes: {
+        title: 'hello here is title'
+      }
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with customProps', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+      customProps: {
+        testId: 'hereIsTestId'
+      }
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with renderCustomToggleIndicator', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+      renderCustomToggleIndicator: /*#__PURE__*/_react["default"].createElement("div", null, "Indicator")
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap

@@ -0,0 +1,221 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ArrowIcon Should be render isActive is true 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon  active    inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render isDisabled is true 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon   disabled   inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render isReadOnly is true 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon    readonly  inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render isRotated is true 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon rotated     inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon      inflex coldir both"
+    data-a11y-focus="true"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render with customClass 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon     arrowIcon_containerClass inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down  arrowIcon_iconClass  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render with customProps 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon      inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="hereIsTestId"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render with dataId 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon      inflex coldir both"
+    data-id="ArrowIcon-test-dataId_downIcon"
+    data-selector-id="container"
+    data-test-id="ArrowIcon-test-dataId_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render with renderCustomToggleIndicator 1`] = `
+<DocumentFragment>
+  <div>
+    Indicator
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render with tagAttributes 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon      inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+    title="hello here is title"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon      inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;

package/lib/shared/ArrowIcon/props/defaultProps.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  isRotated: false,
+  isDisabled: false,
+  isReadOnly: false,
+  iconSize: '7',
+  isActive: false,
+  customClass: {},
+  customProps: {},
+  tagAttributes: {},
+  a11yAttributes: {}
+};
+exports["default"] = _default;

package/lib/shared/ArrowIcon/props/propTypes.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  dataId: _propTypes["default"].string,
+  isRotated: _propTypes["default"].bool,
+  customClass: _propTypes["default"].shape({
+    iconClass: _propTypes["default"].string,
+    containerClass: _propTypes["default"].string
+  }),
+  customProps: _propTypes["default"].object,
+  tagAttributes: _propTypes["default"].object,
+  a11yAttributes: _propTypes["default"].object,
+  renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  isDisabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  isActive: _propTypes["default"].bool,
+  iconSize: _propTypes["default"].string
+};
+exports["default"] = _default;

package/lib/shared/InputFieldLine/InputFieldLine.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _Container = _interopRequireDefault(require("../../Layout/Container"));
+
+var _InputFieldLineModule = _interopRequireDefault(require("./InputFieldLine.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 InputFieldLine(props) {
+  var isDisabled = props.isDisabled,
+      isReadOnly = props.isReadOnly,
+      hasPadding = props.hasPadding,
+      hasEffect = props.hasEffect,
+      title = props.title,
+      isActive = props.isActive,
+      size = props.size,
+      border = props.border,
+      borderColor = props.borderColor,
+      dataId = props.dataId,
+      onClick = props.onClick,
+      customProps = props.customProps,
+      customClass = props.customClass,
+      children = props.children,
+      onKeyDown = props.onKeyDown,
+      a11yAttributes = props.a11yAttributes,
+      tagAttributes = props.tagAttributes;
+  var borderClass = _InputFieldLineModule["default"]["border_".concat(border)] || '';
+  var borderColorClass = _InputFieldLineModule["default"]["borderColor_".concat(borderColor)] || '';
+  return /*#__PURE__*/_react["default"].createElement(_Container["default"], _extends({
+    alignBox: "row",
+    isCover: false
+  }, tagAttributes, a11yAttributes, customProps, {
+    "data-title": title,
+    dataId: dataId,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    className: "".concat(_InputFieldLineModule["default"].varClass, " ").concat(_InputFieldLineModule["default"].customContainer, " ").concat(hasPadding ? _InputFieldLineModule["default"][size] : '', " ").concat(borderClass, " ").concat(isDisabled ? _InputFieldLineModule["default"].disabled : isReadOnly ? hasEffect ? _InputFieldLineModule["default"].effect : _InputFieldLineModule["default"].readonly : _InputFieldLineModule["default"].effect, " ").concat(border !== 'none' ? "".concat(borderColorClass, " ").concat(_InputFieldLineModule["default"].hasBorder) : '', " ").concat(isActive && !(isDisabled || isReadOnly) ? _InputFieldLineModule["default"].active : '', "  ").concat(customClass)
+  }), children);
+}
+
+InputFieldLine.propTypes = _propTypes["default"];
+InputFieldLine.defaultProps = _defaultProps["default"];
+var _default = InputFieldLine;
+exports["default"] = _default;

package/lib/shared/InputFieldLine/InputFieldLine.module.css

@@ -0,0 +1,88 @@
+.varClass {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_default_border);
+    --local_inputFieldLine_border_width: 1px;
+    --local_padding: var(--zd_size0);
+    --local_cursor: pointer;
+}
+
+.customContainer {
+    composes: oflowy from '../../common/common.module.css';
+    cursor: var(--local_cursor);
+    border-color: var(--local_inputFieldLine_border_color);
+}
+
+.disabled,.readonly {
+    --local_cursor: not-allowed;
+}
+
+.borderColor_default {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_default_border);
+}
+
+.borderColor_transparent {
+    --local_inputFieldLine_border_color: var(--dot_mirror);
+}
+
+.borderColor_dark {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_dark_border);
+}
+
+.borderColor_error,
+.effect.borderColor_error:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_error_border);
+}
+
+.effect.borderColor_transparent:hover,
+.effect.borderColor_default:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_hover_border);
+}
+
+.active.borderColor_dark,
+.active.borderColor_dark:hover,
+.effect.borderColor_dark:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_dark_active_border);
+}
+
+.active.borderColor_error,
+.active.borderColor_error:hover,
+.active.borderColor_default,
+.active.borderColor_default:hover,
+.active.borderColor_transparent,
+.active.borderColor_transparent:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_focus_border);
+}
+
+.hasBorder {
+    transition: border var(--zd_transition2) linear 0s;
+    border-style: solid;
+}
+
+.xmedium {
+    min-height: var(--zd_size30) ;
+    --local_padding: var(--zd_size3);
+}
+
+.small {
+    max-height: var(--zd_size200) ;
+    --local_padding: var(--zd_size3);
+}
+
+.medium {
+    max-height: var(--zd_size350) ;
+    --local_padding: var(--zd_size8);
+}
+
+.large {
+    max-height: var(--zd_size400) ;
+    --local_padding: var(--zd_size8);
+}
+
+.border_bottom {
+    border-width:  0 0 var(--local_inputFieldLine_border_width) 0;
+    padding-bottom: var(--local_padding);
+}
+
+.border_all {
+    border-width: var(--local_inputFieldLine_border_width);
+    padding: var(--local_padding);
+}