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

package/lib/MultiSelect/Suggestions.js

@@ -247,19 +247,15 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           htmlId = _this$props2.htmlId,
           a11y = _this$props2.a11y,
           getVirtualizerPublicMethods = _this$props2.getVirtualizerPublicMethods,
-          setVirtualizerContainerRefFunction = _this$props2.setVirtualizerContainerRefFunction,
-          customClass = _this$props2.customClass;
+          setVirtualizerContainerRefFunction = _this$props2.setVirtualizerContainerRefFunction;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
-      var _customClass$containe = customClass.containerClass,
-          containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         role: ariaParentRole,
         id: htmlId,
         tabindex: "0",
-        "aria-multiselectable": ariaMultiselectable,
-        className: containerClass
+        "aria-multiselectable": ariaMultiselectable
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         dataId: "".concat(dataId),
         className: className ? className : ''

package/lib/MultiSelect/props/defaultProps.js

@@ -46,7 +46,6 @@ var AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {},
   allowValueFallback: true
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
@@ -185,7 +184,6 @@ exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
-  customClass: {},
   needMultiLineText: false
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;

package/lib/MultiSelect/props/propTypes.js

@@ -133,8 +133,7 @@ var MultiSelect_propTypes = {
   setAriaId: _propTypes["default"].string,
   ariaErrorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
-    TextBoxIconProps: _propTypes["default"].object,
-    SuggestionsProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool,
   allowValueFallback: _propTypes["default"].bool,
@@ -190,8 +189,7 @@ var SelectedOptions_propTypes = {
   limit: _propTypes["default"].number
 };
 exports.SelectedOptions_propTypes = SelectedOptions_propTypes;
-
-var Suggestions_propTypes = _defineProperty({
+var Suggestions_propTypes = {
   a11y: _propTypes["default"].shape({
     ariaParentRole: _propTypes["default"].string,
     ariaMultiselectable: _propTypes["default"].bool
@@ -225,12 +223,8 @@ var Suggestions_propTypes = _defineProperty({
   })),
   renderBeforeChildren: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   limit: _propTypes["default"].number,
-  limitReachedMessage: _propTypes["default"].string,
-  customClass: _propTypes["default"].shape({
-    containerClass: _propTypes["default"].string
-  })
-}, "needMultiLineText", _propTypes["default"].bool);
-
+  limitReachedMessage: _propTypes["default"].string
+};
 exports.Suggestions_propTypes = Suggestions_propTypes;
 var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   animationStyle: _propTypes["default"].string,
@@ -301,9 +295,7 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _defineProperty(_AdvancedGroupMultiSe, "customProps", _propTypes["default"].shape({
-  SuggestionsProps: _propTypes["default"].object
-})), _AdvancedGroupMultiSe);
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {

package/lib/Radio/Radio.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Label = _interopRequireDefault(require("../Label/Label"));
 
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
+
 var _Layout = require("../Layout");
 
 var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
@@ -101,13 +103,16 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           customProps = _this$props3.customProps,
           children = _this$props3.children,
           a11y = _this$props3.a11y,
+          secondaryText = _this$props3.secondaryText,
           renderRightPlaceholderNode = _this$props3.renderRightPlaceholderNode;
       var _customClass$customRa = customClass.customRadioWrap,
           customRadioWrap = _customClass$customRa === void 0 ? '' : _customClass$customRa,
           _customClass$customRa2 = customClass.customRadio,
           customRadio = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2,
           _customClass$customLa = customClass.customLabel,
-          customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
+          customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa,
+          _customClass$customSe = customClass.customSecondaryText,
+          customSecondaryText = _customClass$customSe === void 0 ? '' : _customClass$customSe;
       var accessMode = isReadOnly ? _RadioModule["default"].readonly : disabled ? (0, _CssProvider["default"])('isDisabled') : _RadioModule["default"].pointer;
       var toolTip = disabled ? disabledTitle : title ? title : null;
       var isEditable = !(isReadOnly || disabled);
@@ -124,7 +129,9 @@ var Radio = /*#__PURE__*/function (_React$Component) {
       var _customProps$Containe = customProps.ContainerProps,
           ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
           _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;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         dataId: value ? value.toLowerCase() : 'RadioComp',
         isCover: false,
@@ -143,7 +150,8 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         "aria-labelledby": ariaLabelledby,
         "aria-readonly": ariaReadonly
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n            ").concat(!isEditable ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio, " ").concat(!isEditable ? "".concat(_RadioModule["default"].disabled) : '')
+        className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n            ").concat(!isEditable ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio, " ").concat(!isEditable ? "".concat(_RadioModule["default"].disabled) : '', " ").concat(secondaryText ? _RadioModule["default"].withSecondaryText : ''),
+        align: secondaryText ? "start" : undefined
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",
         id: id,
@@ -164,10 +172,10 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         cy: "20",
         r: "11.03",
         className: "".concat(_RadioModule["default"].centerPath)
-      }) : null))), text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }) : null))), (text || secondaryText) && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: "".concat(_RadioModule["default"].text, " ").concat(disabled ? "".concat(_RadioModule["default"].disabled) : '')
-      }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
+        className: _RadioModule["default"].labelContainer
+      }, text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,
         palette: labelPalette,
         size: labelSize,
@@ -176,8 +184,14 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         dataId: "".concat(text, "_label"),
         variant: variant,
         title: toolTip ? toolTip : text,
-        customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n              ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(isEditable ? _RadioModule["default"].pointer : '', " ").concat(isReadOnly ? _RadioModule["default"].readonly : '', "  ").concat(customLabel)
-      }, LabelProps))), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
+        customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " ").concat(disabled ? "".concat(_RadioModule["default"].disabled) : '', "\n                  ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(isEditable ? _RadioModule["default"].pointer : '', " ").concat(isReadOnly ? _RadioModule["default"].readonly : '', "  ").concat(customLabel)
+      }, 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(_RadioModule["default"].secondaryText, " ").concat(customSecondaryText)
+      }), secondaryText) : null), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
     }
   }]);
 

package/lib/Radio/Radio.module.css

@@ -10,20 +10,25 @@
 }[dir=ltr] .varClass {
   --radio_label_margin: 0 0 0 var(--zd_size6);
 }[dir=rtl] .varClass {
-  --radio_label_margin: 0 var(--zd_size6) 0 0;
+  --radio_label_margin: 0 0 0 var(--zd_size6);
 }
+
 .container {
   composes: varClass;
 }
+
 .pointer {
   cursor: pointer;
 }
+
 .readonly, .disabled {
   cursor: default;
 }
+
 .disabled {
   opacity: 0.7
 }
+
 .radio {
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
@@ -32,10 +37,12 @@
   background: var(--radio_bg_color);
   border-radius: 50%;
 }
+
 .radio,
 .centerPath {
   fill: var(--radio_fill);
 }
+
 .filled {
   --radio_bg_color: var(--zdt_radio_default_bg);
 }
@@ -44,48 +51,66 @@
   --radio_width: var(--zd_size16);
   --radio_height: var(--zd_size16);
 }
+
 .small {
   --radio_width: var(--zd_size13);
   --radio_height: var(--zd_size13);
 }
+
+.medium.withSecondaryText {
+  margin-top: var(--zd_size1) ;
+}
+
+.small.withSecondaryText {
+  margin-top: var(--zd_size3) ;
+}
+
 .radioLabel {
   font-size: 0 ;
   display: block;
 }
+
 .rdBox {
   fill: none;
   stroke-width: var(--radio_stroke_width);
   stroke-linecap: round;
   stroke: inherit;
 }
+
 .centerPath {
   --radio_fill: inherit;
   stroke-width: var(--radio_inner_stroke_width);
   transform-origin: center;
 }
+
 [dir=ltr] .checked .centerPath {
   animation: circleAnimate var(--zd_transition3) ease forwards;
 }
+
 [dir=rtl] .checked .centerPath {
   animation: circleAnimate var(--zd_transition3) ease forwards;
 }
+
 .rdBoxprimary,
 .hoverEfffect:hover .hoverprimary
+
 /* .hoverEfffect:focus .hoverprimary  */
-{
+  {
   --radio_stroke_color: var(--zdt_radio_primary_stroke);
 }
 
 .rdBoxdanger,
 .hoverEfffect:hover .hoverdanger
+
 /* .hoverEfffect:focus .hoverdanger */
- {
+  {
   --radio_stroke_color: var(--zdt_radio_danger_stroke);
 }
 
 .centerPathprimary {
   --radio_fill: var(--zdt_radio_primary_fill);
 }
+
 .centerPathdanger {
   --radio_fill: var(--zdt_radio_danger_fill);
 }
@@ -102,14 +127,22 @@
   --label_text_color: var(--zdt_radio_label_danger_text);
 }
 
-.text {
+.secondaryText {
+  color: var(--zdt_radio_secondary_text);
+}
+
+.labelContainer {
+  composes: dflex flexcolumn from '../common/common.module.css';
+  gap: var(--zd_size4) ;
   margin: var(--radio_label_margin);
 }
+
 @keyframes circleAnimate {
   0% {
     transform: scale(0);
   }
+
   100% {
     transform: scale(1);
   }
-}
+}

package/lib/Radio/__tests__/Radio.spec.js

@@ -243,4 +243,14 @@ describe('Radio', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering secondaryText with checked state', function () {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      secondaryText: "Secondary text",
+      text: "Radio Text",
+      checked: true
+    })),
+        asFragment = _render25.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });