@zohodesk/components 1.0.0-temp-199.18 → 1.0.0-temp-246

package/es/shared/ArrowIcon/ArrowIcon.js

@@ -10,10 +10,12 @@ const ArrowIcon = props => {
   const {
     dataId,
     isRotated,
+    isActive,
     customClass,
     customProps,
     tagAttributes,
     a11yAttributes,
+    iconSize,
     isDisabled,
     isReadOnly,
     renderCustomToggleIndicator
@@ -23,7 +25,8 @@ const ArrowIcon = props => {
     containerClass = ''
   } = customClass;
   return isRenderable(renderCustomToggleIndicator) ? renderNode(renderCustomToggleIndicator, {
-    isPopupOpened: isRotated,
+    isRotated,
+    isActive,
     isReadOnly,
     isDisabled
   }) : /*#__PURE__*/React.createElement(Container, {
@@ -35,10 +38,10 @@ const ArrowIcon = props => {
     ...a11yAttributes,
     ...customProps,
     dataId: `${dataId}_downIcon`,
-    className: `${style.arrowIcon} ${isRotated ? style.rotated : ''} ${containerClass}`
+    className: `${style.arrowIcon} ${isRotated ? style.rotated : ''} ${isActive ? style.active : ''} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readonly : ''} ${containerClass}`
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "ZD-down",
-    size: "7",
+    size: iconSize,
     iconClass: iconClass
   }));
 };

package/es/shared/ArrowIcon/ArrowIcon.module.css

@@ -28,7 +28,16 @@
 }
 
 .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/es/shared/ArrowIcon/__tests__/ArrowIcon.spec.js

@@ -24,6 +24,30 @@ describe('ArrowIcon', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should be render isActive is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ArrowIcon, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ArrowIcon, {
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ArrowIcon, {
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('Should be render with customClass', () => {
     const {
       asFragment

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

@@ -1,10 +1,73 @@
 // 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"
+    class="arrowIcon rotated     inflex coldir both"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -25,7 +88,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   inflex coldir both"
+    class="arrowIcon      inflex coldir both"
     data-a11y-focus="true"
     data-id="undefined_downIcon"
     data-selector-id="container"
@@ -47,7 +110,7 @@ exports[`ArrowIcon Should be render with customClass 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon  arrowIcon_containerClass inflex coldir both"
+    class="arrowIcon     arrowIcon_containerClass inflex coldir both"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -68,7 +131,7 @@ exports[`ArrowIcon Should be render with customProps 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   inflex coldir both"
+    class="arrowIcon      inflex coldir both"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="hereIsTestId"
@@ -89,7 +152,7 @@ exports[`ArrowIcon Should be render with dataId 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   inflex coldir both"
+    class="arrowIcon      inflex coldir both"
     data-id="ArrowIcon-test-dataId_downIcon"
     data-selector-id="container"
     data-test-id="ArrowIcon-test-dataId_downIcon"
@@ -118,7 +181,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   inflex coldir both"
+    class="arrowIcon      inflex coldir both"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -140,7 +203,7 @@ exports[`ArrowIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   inflex coldir both"
+    class="arrowIcon      inflex coldir both"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"

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

@@ -2,6 +2,8 @@ export default {
   isRotated: false,
   isDisabled: false,
   isReadOnly: false,
+  iconSize: '7',
+  isActive: false,
   customClass: {},
   customProps: {},
   tagAttributes: {},

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

@@ -11,5 +11,7 @@ export default {
   a11yAttributes: PropTypes.object,
   renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool
+  isReadOnly: PropTypes.bool,
+  isActive: PropTypes.bool,
+  iconSize: PropTypes.string
 };

package/es/utils/dropDownUtils.js

@@ -159,7 +159,7 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
       const value = typeof option === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
       const secondaryValue = typeof option === 'object' ? option[impSecondaryField || secondaryField] : '';
       const photoURL = typeof option === 'object' ? option[impImageField || imageField] : '';
-      const colorCode = selectn('colorCode', option); // grouping options (group select/MultiSelect)
+      const colorConfig = selectn('colorConfig', option); // grouping options (group select/MultiSelect)
 
       id = !getIsEmptyValue(id) ? optionIdGrouping(id, prefixText) : '';
       const additionalSearchFieldData = searchFields.reduce((value, item) => {
@@ -200,8 +200,8 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
           optionDetails.listItemProps = listStyle || listItemProps;
         }
 
-        if (colorCode) {
-          optionDetails.colorCode = colorCode;
+        if (colorConfig) {
+          optionDetails.colorConfig = colorConfig;
         }
 
         if (listStyleCustomProps || listItemCustomProps) {

package/lib/CheckBox/CheckBox.js

@@ -15,6 +15,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _Label = _interopRequireDefault(require("../Label/Label"));
 
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
+
 var _Layout = require("../Layout");
 
 var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
@@ -104,11 +106,14 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props3.customClass,
           customProps = _this$props3.customProps,
           dataSelectorId = _this$props3.dataSelectorId,
-          renderRightPlaceholderNode = _this$props3.renderRightPlaceholderNode;
+          renderRightPlaceholderNode = _this$props3.renderRightPlaceholderNode,
+          secondaryText = _this$props3.secondaryText;
       var _customProps$CheckBox = customProps.CheckBoxProps,
           CheckBoxProps = _customProps$CheckBox === void 0 ? {} : _customProps$CheckBox,
           _customProps$LabelPro = customProps.LabelProps,
-          LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro;
+          LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
+          _customProps$secondar = customProps.secondaryTextProps,
+          secondaryTextProps = _customProps$secondar === void 0 ? {} : _customProps$secondar;
       var _customClass$customCh = customClass.customCheckBox,
           customCheckBox = _customClass$customCh === void 0 ? '' : _customClass$customCh,
           _customClass$customLa = customClass.customLabel,
@@ -116,7 +121,9 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
           _customClass$customCB = customClass.customCBoxSize,
           customCBoxSize = _customClass$customCB === void 0 ? '' : _customClass$customCB,
           _customClass$customTi = customClass.customTickSize,
-          customTickSize = _customClass$customTi === void 0 ? '' : _customClass$customTi;
+          customTickSize = _customClass$customTi === void 0 ? '' : _customClass$customTi,
+          _customClass$customSe = customClass.customSecondaryText,
+          customSecondaryText = _customClass$customSe === void 0 ? '' : _customClass$customSe;
       var accessMode = isReadOnly ? _CheckBoxModule["default"].readonly : disabled ? (0, _CssProvider["default"])('isDisabled') : _CheckBoxModule["default"].pointer;
       var toolTip = disabled ? disabledTitle : title ? title : null;
       var ariaLabel = a11y.ariaLabel,
@@ -145,7 +152,8 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         "aria-hidden": ariaHidden,
         dataSelectorId: dataSelectorId || id
       }, CheckBoxProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '', " ").concat(!isEditable ? "".concat(_CheckBoxModule["default"]["disabled"]) : '')
+        className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(secondaryText ? _CheckBoxModule["default"].withSecondaryText : '', " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '', " ").concat(!isEditable ? "".concat(_CheckBoxModule["default"]["disabled"]) : ''),
+        align: secondaryText ? "start" : undefined
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",
         id: id,
@@ -193,10 +201,10 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         y1: "20",
         x2: "28.53",
         y2: "20"
-      }) : null))), text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }) : null))), (text || secondaryText) && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _CheckBoxModule["default"].text
-      }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
+        className: _CheckBoxModule["default"].labelContainer
+      }, text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,
         palette: disabled ? 'disable' : labelPalette,
         id: id,
@@ -204,9 +212,15 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         type: "title",
         clipped: isClipped,
         variant: variant,
-        customClass: "".concat(active && !disabled ? "".concat(_CheckBoxModule["default"]["active".concat(palette, "Label")]) : '', "\n                            ").concat(checked && active ? "".concat(_CheckBoxModule["default"]["checked".concat(palette, "Label")]) : '', " \n                            ").concat(accessMode, " ").concat(customLabel),
+        customClass: "".concat(active && !disabled ? "".concat(_CheckBoxModule["default"]["active".concat(palette, "Label")]) : '', "\n                                ").concat(checked && active ? "".concat(_CheckBoxModule["default"]["checked".concat(palette, "Label")]) : '', " \n                                ").concat(accessMode, " ").concat(customLabel),
         title: toolTip ? toolTip : text
-      }, LabelProps))), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
+      }, LabelProps)), secondaryText ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({
+        $ui_size: "12",
+        $ui_lineHeight: "1.2"
+      }, secondaryTextProps, {
+        $i18n_dataTitle: toolTip ? null : secondaryText,
+        $ui_className: "".concat(_CheckBoxModule["default"].secondaryText, " ").concat(customSecondaryText)
+      }), secondaryText) : null), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
     }
   }]);
 

package/lib/CheckBox/CheckBox.module.css

@@ -90,12 +90,6 @@
 [dir=rtl] .linePath {
   animation: lineAnimate var(--zd_transition3) ease forwards;
 }
-[dir=ltr] .text {
-  margin-left: var(--zd_size6) ;
-}
-[dir=rtl] .text {
-  margin-right: var(--zd_size6) ;
-}
 
  .checkedprimary,
 .checkeddanger {
@@ -141,6 +135,27 @@
 .disabled {
   opacity: 0.7
 }
+
+.withSecondaryText {
+  margin-top: var(--zd_size1) ;
+}
+
+.secondaryText {
+  color: var(--zdt_checkbox_secondary_text);
+}
+
+.labelContainer {
+  composes: dflex flexcolumn from '../common/common.module.css';
+  gap: var(--zd_size4) ;
+}
+
+[dir=ltr] .labelContainer {
+  margin-left: var(--zd_size6) ;
+}
+
+[dir=rtl] .labelContainer {
+  margin-right: var(--zd_size6) ;
+}
 @keyframes tickAnimate {
   0% {
     stroke-dashoffset: 40;

package/lib/CheckBox/__tests__/CheckBox.spec.js

@@ -168,24 +168,33 @@ describe('CheckBox component', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should be render activeStyle is minus', function () {
+  test('Should render secondaryText', function () {
     var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
-      activeStyle: "minus"
+      text: "checkboxText",
+      secondaryText: "secondaryText"
     })),
         asFragment = _render18.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should be render dataSelectorId', function () {
+  test('Should be render activeStyle is minus', function () {
     var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
-      dataSelectorId: "dataSelectorIdCheck"
+      activeStyle: "minus"
     })),
         asFragment = _render19.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the Custom Props', function () {
+  test('Should be render dataSelectorId', function () {
     var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
+      dataSelectorId: "dataSelectorIdCheck"
+    })),
+        asFragment = _render20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Custom Props', function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
       text: "checkboxText",
       customProps: {
         CheckBoxProps: {
@@ -196,12 +205,12 @@ describe('CheckBox component', function () {
         }
       }
     })),
-        asFragment = _render20.asFragment;
+        asFragment = _render21.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering the Custom class', function () {
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
       text: "checkboxText",
       checked: true,
       customClass: {
@@ -211,12 +220,12 @@ describe('CheckBox component', function () {
         customTickSize: 'customTickSizeClass'
       }
     })),
-        asFragment = _render21.asFragment;
+        asFragment = _render22.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering ally ariaLabel , ariaLabelledby, ariaHidden,ariaChecked,role  true and entering their values', function () {
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
       checked: true,
       a11y: {
         ariaLabel: 'ariaLabelCheckBox',
@@ -226,12 +235,12 @@ describe('CheckBox component', function () {
         role: 'checkBox2'
       }
     })),
-        asFragment = _render22.asFragment;
+        asFragment = _render23.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering ally ariaLabel , ariaLabelledby, ariaHidden,ariaChecked,role  false and entering their values', function () {
-    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
       checked: true,
       a11y: {
         ariaLabel: 'ariaLabelCheckBox',
@@ -241,7 +250,7 @@ describe('CheckBox component', function () {
         role: 'checkBox3'
       }
     })),
-        asFragment = _render23.asFragment;
+        asFragment = _render24.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });