@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-230

package/lib/ColorSelect/common/helpers.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderColorIndicator = renderColorIndicator;
+exports.renderColoredTag = renderColoredTag;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _color = _interopRequireDefault(require("color"));
+
+var _ColoredTag = _interopRequireDefault(require("./ColoredTag/ColoredTag"));
+
+var _ColorIndicator = _interopRequireDefault(require("./ColorIndicator/ColorIndicator"));
+
+var _excluded = ["option"];
+
+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 _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; }
+
+function renderColoredTag(data) {
+  var option = data.option,
+      otherData = _objectWithoutProperties(data, _excluded);
+
+  var colorCode = option.colorCode,
+      value = option.value,
+      id = option.id;
+  var getBgColorValue = colorCode ? (0, _color["default"])(colorCode).alpha(0.2).toString() : '';
+  var colorConfig = {
+    backgroundColor: getBgColorValue,
+    textColor: colorCode,
+    borderColor: colorCode
+  };
+  return /*#__PURE__*/_react["default"].createElement(_ColoredTag["default"], _extends({
+    text: value,
+    id: id
+  }, otherData, {
+    colorConfig: colorConfig
+  }));
+}
+
+function renderColorIndicator(data) {
+  var colorCode = data.colorCode;
+  return /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], {
+    colorCode: colorCode
+  });
+}

package/lib/ColorSelect/props/defaultProps.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorSingleSelect_defaultProps = exports.ColorMultiSelect_defaultProps = void 0;
+
+var _defaultProps = require("../../MultiSelect/props/defaultProps");
+
+var _defaultProps2 = require("../../Select/props/defaultProps");
+
+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 ColorSingleSelect_defaultProps = _objectSpread({
+  className: '',
+  options: [],
+  customProps: {}
+}, _defaultProps2.Select_defaultProps);
+
+exports.ColorSingleSelect_defaultProps = ColorSingleSelect_defaultProps;
+
+var ColorMultiSelect_defaultProps = _objectSpread({
+  options: [],
+  customProps: {}
+}, _defaultProps.MultiSelect_defaultProps);
+
+exports.ColorMultiSelect_defaultProps = ColorMultiSelect_defaultProps;

package/lib/ColorSelect/props/propTypes.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.ColorSingleSelect_propTypes = exports.ColorMultiSelect_propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = require("../../Select/props/propTypes");
+
+var _propTypes3 = require("../../MultiSelect/props/propTypes");
+
+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 propTypes = {
+  renderCustomColorIndicator: _propTypes["default"].element
+};
+exports.propTypes = propTypes;
+
+var ColorSingleSelect_propTypes = _objectSpread(_objectSpread({
+  customClass: _propTypes["default"].string
+}, propTypes), _propTypes2.Select_propTypes);
+
+exports.ColorSingleSelect_propTypes = ColorSingleSelect_propTypes;
+
+var ColorMultiSelect_propTypes = _objectSpread(_objectSpread({}, propTypes), _propTypes3.MultiSelect_propTypes);
+
+exports.ColorMultiSelect_propTypes = ColorMultiSelect_propTypes;

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

@@ -618,10 +618,10 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="hourField"
               >
                 <div
-                  class="container effect  input  flex rowdir"
-                  data-id="containerComponent"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+                  data-id="hourField_textBox"
                   data-selector-id="textBoxIcon"
-                  data-test-id="containerComponent"
+                  data-test-id="hourField_textBox"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -695,9 +695,6 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="line borderColor_default "
-                  />
                 </div>
               </div>
             </div>
@@ -718,10 +715,10 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="minuteField"
               >
                 <div
-                  class="container effect  input  flex rowdir"
-                  data-id="containerComponent"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+                  data-id="minuteField_textBox"
                   data-selector-id="textBoxIcon"
-                  data-test-id="containerComponent"
+                  data-test-id="minuteField_textBox"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -795,9 +792,6 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="line borderColor_default "
-                  />
                 </div>
               </div>
             </div>
@@ -818,10 +812,10 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="ampmField"
               >
                 <div
-                  class="container effect  input  flex rowdir"
-                  data-id="containerComponent"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+                  data-id="ampmField_textBox"
                   data-selector-id="textBoxIcon"
-                  data-test-id="containerComponent"
+                  data-test-id="ampmField_textBox"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -895,9 +889,6 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="line borderColor_default "
-                  />
                 </div>
               </div>
             </div>

package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -11,10 +11,10 @@ exports[`DateWidget rendering the defult props 1`] = `
       data-test-id="dateWidget_widget"
     >
       <div
-        class="container effect  placeHolder  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
+        data-id="dateWidget"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="dateWidget"
       >
         <div
           class="grow basis shrinkOff"
@@ -69,9 +69,6 @@ exports[`DateWidget rendering the defult props 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>

package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -27,10 +27,10 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="hourField"
         >
           <div
-            class="container effect  input  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            data-id="hourField_textBox"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
+            data-test-id="hourField_textBox"
           >
             <div
               class="grow basis shrinkOff"
@@ -102,9 +102,6 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>
@@ -125,10 +122,10 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="minuteField"
         >
           <div
-            class="container effect  input  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            data-id="minuteField_textBox"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
+            data-test-id="minuteField_textBox"
           >
             <div
               class="grow basis shrinkOff"
@@ -200,9 +197,6 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>
@@ -223,10 +217,10 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="ampmField"
         >
           <div
-            class="container effect  input  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            data-id="ampmField_textBox"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
+            data-test-id="ampmField_textBox"
           >
             <div
               class="grow basis shrinkOff"
@@ -298,9 +292,6 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -18,6 +18,11 @@
     box-shadow: var(--dropbox_box_shadow);
 }
 
+.defaultPalette,
+.darkPalette {
+    /*css:theme-validation:ignore*/
+}
+
 .defaultPalette, .darkPalette {
     background-color: var(--dropbox_bg_color);
 }
@@ -207,6 +212,7 @@
     height: var(--zd_size10) ;
     width: var(--zd_size10) ;
     box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
+    /*css:theme-validation:ignore*/
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(-45deg);
@@ -419,6 +425,7 @@
 .closeBar {
     /*  Variable:Ignore  */
     height: 6px;
+    /*css:theme-validation:ignore*/
     width: 20% ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);

package/lib/InputFieldLine/InputFieldLine.js

@@ -0,0 +1,53 @@
+"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 _Layout = require("../../es/Layout");
+
+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;
+  var borderClass = _InputFieldLineModule["default"]["border_".concat(border)] || '';
+  var borderColorClass = _InputFieldLineModule["default"]["borderColor_".concat(borderColor)] || '';
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
+    alignBox: "row"
+  }, customProps, {
+    "data-title": title,
+    isCover: false,
+    dataId: dataId,
+    onClick: onClick,
+    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/InputFieldLine/InputFieldLine.module.css

@@ -0,0 +1,90 @@
+.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;
+}
+
+.pointer{
+    composes: pointer from '../common/common.module.css';
+}
+
+.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) ;
+}
+
+.medium {
+    max-height: var(--zd_size350) ;
+    --local_padding: var(--zd_size8);
+}
+
+.large {
+    max-height: var(--zd_size400) ;
+}
+
+.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);
+}

package/lib/InputFieldLine/__tests__/InputFieldLine.spec.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _InputFieldLine = _interopRequireDefault(require("../InputFieldLine"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('InputFieldLine', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with title', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      title: "InputFieldLine Test Title"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isActive is true', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      isActive: true
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      isDisabled: true
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      isReadOnly: true
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render hasPadding is true', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      hasPadding: true
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render hasEffect is true', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      hasEffect: true
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var size = ['medium', 'xmedium'];
+  test.each(size)('Should render size  - %s', function (size) {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      hasPadding: true,
+      size: size
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var border = ['bottom', 'all', 'none'];
+  test.each(border)('Should render border - %s', function (border) {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      border: border
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var borderColor = ['default', 'dark', 'error', 'transparent'];
+  test.each(borderColor)('Should render borderColor - %s', function (borderColor) {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      borderColor: borderColor
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render customProps', function () {
+    var customProps = {
+      'data-test': 'inputFieldLine-test'
+    };
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      customProps: customProps
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render customClass', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      customClass: "inputFieldLine-custom-class"
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render dataId', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      dataId: "inputFieldLine-test-id"
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});