@zohodesk/dot 1.8.1 → 1.8.3

package/lib/form/fields/Fields.module.css

@@ -71,11 +71,16 @@
 }
 .radioBox {
   max-width: 100% ;
-  height: var(--zd_size36) ;
   transition: border var(--zd_transition3);
-  padding: 0 var(--zd_size10) ;
   border: 1px solid var(--zdt_radiofield_box_border);
-  border-radius: 6px
+  border-radius: 6px;
+}
+.radioBox.primaryTextOnly {
+  height: var(--zd_size36) ;
+  padding: 0 var(--zd_size10) ;
+}
+.radioBox.withSecondaryText {
+  padding: var(--zd_size18) var(--zd_size16) ;
 }
 .hoverableRadioBox:hover, .radioBoxActive {
   border-color: var(--zdt_radiofield_box_active_border)

package/lib/form/fields/RadioField/RadioField.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _utils = require("@zohodesk/utils");
+
 var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
@@ -159,6 +161,7 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           isReadOnly = _this$props6.isReadOnly,
           isBoxStyle = _this$props6.isBoxStyle,
           variant = _this$props6.variant,
+          customClass = _this$props6.customClass,
           customProps = _this$props6.customProps;
       var _customProps$LabelPro = customProps.LabelProps,
           LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
@@ -170,8 +173,16 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps1 = _customProps$Validati === void 0 ? {} : _customProps$Validati,
           _customProps$Validati2 = customProps.ValidationMessageProps2,
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
+      var _customClass$customWr = customClass.customWrapperClass,
+          customWrapperClass = _customClass$customWr === void 0 ? '' : _customClass$customWr,
+          _customClass$customLa = customClass.customLabelClass,
+          customLabelClass = _customClass$customLa === void 0 ? '' : _customClass$customLa,
+          _customClass$customRa = customClass.customRadioWrapperClass,
+          customRadioWrapperClass = _customClass$customRa === void 0 ? '' : _customClass$customRa,
+          _customClass$customRa2 = customClass.customRadioClass,
+          customRadioClass = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '', " ").concat(customWrapperClass),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
@@ -179,23 +190,35 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
         size: "medium",
         id: id,
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : '', " ").concat(customLabelClass),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? isBoxStyle ? _FieldsModule["default"].fieldMargin_large : _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
       }, options.map(function (option, index) {
+        var _compileClassNames;
+
         var text = option.text,
             value = option.value,
             _option$disabled = option.disabled,
             disabled = _option$disabled === void 0 ? false : _option$disabled,
             tooltip = option.tooltip,
-            infoTooltip = option.infoTooltip;
+            infoTooltip = option.infoTooltip,
+            secondaryText = option.secondaryText,
+            renderRightPlaceholderNode = option.renderRightPlaceholderNode,
+            customProps = option.customProps;
         var isDisabledState = disabled || isDisabled;
         var isChecked = selectedValue == value;
+        var rightPlaceholderNode = !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
+          name: "ZD-GN-info",
+          size: "16",
+          title: infoTooltip,
+          iconClass: _FieldsModule["default"].infoIcon
+        }, InfoIconProps)), renderRightPlaceholderNode) : renderRightPlaceholderNode;
+        var radioBoxClasses = isBoxStyle ? (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, customRadioClass, !!customRadioClass), _defineProperty(_compileClassNames, _FieldsModule["default"].radioBox, true), _defineProperty(_compileClassNames, _FieldsModule["default"].withSecondaryText, !!secondaryText), _defineProperty(_compileClassNames, _FieldsModule["default"].primaryTextOnly, !secondaryText), _defineProperty(_compileClassNames, _FieldsModule["default"].hoverableRadioBox, !isDisabledState), _defineProperty(_compileClassNames, _FieldsModule["default"].radioBoxActive, isChecked), _compileClassNames)) : '';
         return /*#__PURE__*/_react["default"].createElement("span", {
-          key: index,
-          className: "".concat(!isBoxStyle ? _FieldsModule["default"].radio : '', " ").concat(_FieldsModule["default"].radioWrap)
-        }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], _extends({
+          key: text,
+          className: "".concat(!isBoxStyle ? _FieldsModule["default"].radio : '', " ").concat(_FieldsModule["default"].radioWrap, " ").concat(customRadioWrapperClass)
+        }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], _extends({}, customProps, {
           id: index,
           value: value,
           name: id,
@@ -212,20 +235,21 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           checked: isChecked,
           dataId: dataId,
           isReadOnly: isReadOnly,
-          variant: variant
+          variant: variant,
+          secondaryText: secondaryText
         }, RadioProps, {
           a11y: _objectSpread({
             tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1'
           }, RadioProps.a11y),
           customClass: _objectSpread({
-            customRadioWrap: isBoxStyle ? "".concat(_FieldsModule["default"].radioBox, " ").concat(!isDisabledState ? _FieldsModule["default"].hoverableRadioBox : '', " ").concat(isChecked ? _FieldsModule["default"].radioBoxActive : '') : ''
-          }, RadioProps.customClass)
-        }), !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
-          name: "ZD-GN-info",
-          size: "16",
-          title: infoTooltip,
-          iconClass: _FieldsModule["default"].infoIcon
-        }, InfoIconProps)) : null));
+            customRadioWrap: radioBoxClasses
+          }, RadioProps.customClass),
+          customProps: _objectSpread(_objectSpread({}, RadioProps.customProps), {}, {
+            LabelProps: _objectSpread(_objectSpread({}, RadioProps.customProps ? RadioProps.customProps.LabelProps : undefined), {}, {
+              renderRightPlaceholderNode: rightPlaceholderNode
+            })
+          })
+        })));
       })), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
         text: validationMessage,
         palette: validationPalette,

package/lib/form/fields/RadioField/__tests__/RadioField.spec.js

@@ -24,6 +24,22 @@ var options = [{
   text: 'Kolkata',
   value: '4'
 }];
+var optionsWithsecondaryText = [{
+  text: 'Chennai',
+  value: '1',
+  secondaryText: 'Tamil Nadu Capital'
+}, {
+  text: 'Mumbai',
+  value: '2',
+  secondaryText: 'Maharashtra Capital',
+  tooltip: 'Disabled Option',
+  disabled: true
+}, {
+  text: 'Delhi',
+  value: '3',
+  secondaryText: 'Capital of India',
+  infoTooltip: 'Capital of India'
+}];
 describe('RadioField', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
@@ -50,4 +66,21 @@ describe('RadioField', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with secondaryTextOptions', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
+      options: optionsWithsecondaryText
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with secondaryTextOptions & isBoxStyle', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
+      options: optionsWithsecondaryText,
+      isBoxStyle: true
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });