@zohodesk/components 1.5.2 → 1.5.3

package/es/Radio/props/propTypes.js

@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
+import { propTypes as TypographyPropTypes } from "../../Typography/props/propTypes";
 export const propTypes = {
   active: PropTypes.bool,
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
+  secondaryText: PropTypes.string,
   disabledTitle: PropTypes.string,
   getRef: PropTypes.func,
   id: PropTypes.string,
@@ -23,7 +25,8 @@ export const propTypes = {
   }),
   customProps: PropTypes.exact({
     ContainerProps: PropTypes.object,
-    LabelProps: PropTypes.object
+    LabelProps: PropTypes.object,
+    secondaryTextProps: PropTypes.exact(TypographyPropTypes)
   }),
   a11y: PropTypes.shape({
     ariaChecked: PropTypes.bool,

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();
   });