@zohodesk/dot 1.8.2 → 1.8.4

package/es/form/fields/CheckBoxField/__tests__/__snapshots__/CheckBoxField.spec.js.snap

@@ -32,7 +32,7 @@ exports[`CheckBoxField rendering the custom children 1`] = `
             tabindex="0"
           >
             <div
-              class="boxContainer medium  filled  shrinkOff"
+              class="boxContainer  medium  filled  shrinkOff"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -123,7 +123,7 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
             tabindex="0"
           >
             <div
-              class="boxContainer medium  filled  shrinkOff"
+              class="boxContainer  medium  filled  shrinkOff"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -214,7 +214,7 @@ exports[`CheckBoxField rendering the defult props 1`] = `
             tabindex="0"
           >
             <div
-              class="boxContainer medium  filled  shrinkOff"
+              class="boxContainer  medium  filled  shrinkOff"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"

package/es/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/es/form/fields/RadioField/RadioField.js

@@ -1,5 +1,6 @@
 /**** Libraries ****/
 import React, { PureComponent } from 'react';
+import { compileClassNames } from '@zohodesk/utils';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
@@ -99,6 +100,7 @@ export default class RadioField extends PureComponent {
       isReadOnly,
       isBoxStyle,
       variant,
+      customClass,
       customProps
     } = this.props;
     const {
@@ -108,8 +110,14 @@ export default class RadioField extends PureComponent {
       ValidationMessageProps1 = {},
       ValidationMessageProps2 = {}
     } = customProps;
+    const {
+      customWrapperClass = '',
+      customLabelClass = '',
+      customRadioWrapperClass = '',
+      customRadioClass = ''
+    } = customClass;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${customWrapperClass}`,
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(Label, {
@@ -117,7 +125,7 @@ export default class RadioField extends PureComponent {
       size: "medium",
       id: id,
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''} ${customLabelClass}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     }), /*#__PURE__*/React.createElement("div", {
@@ -128,14 +136,32 @@ export default class RadioField extends PureComponent {
         value,
         disabled = false,
         tooltip,
-        infoTooltip
+        infoTooltip,
+        secondaryText,
+        renderRightPlaceholderNode,
+        customProps
       } = option;
       let isDisabledState = disabled || isDisabled;
       let isChecked = selectedValue == value;
+      const rightPlaceholderNode = !!infoTooltip ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+        name: "ZD-GN-info",
+        size: "16",
+        title: infoTooltip,
+        iconClass: style.infoIcon,
+        ...InfoIconProps
+      }), renderRightPlaceholderNode) : renderRightPlaceholderNode;
+      const radioBoxClasses = isBoxStyle ? compileClassNames({
+        [customRadioClass]: !!customRadioClass,
+        [style.radioBox]: true,
+        [style.withSecondaryText]: !!secondaryText,
+        [style.primaryTextOnly]: !secondaryText,
+        [style.hoverableRadioBox]: !isDisabledState,
+        [style.radioBoxActive]: isChecked
+      }) : '';
       return /*#__PURE__*/React.createElement("span", {
-        key: index,
-        className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap}`
-      }, /*#__PURE__*/React.createElement(Radio, {
+        key: text,
+        className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap} ${customRadioWrapperClass}`
+      }, /*#__PURE__*/React.createElement(Radio, { ...customProps,
         id: index,
         value: value,
         name: id,
@@ -153,22 +179,22 @@ export default class RadioField extends PureComponent {
         dataId: dataId,
         isReadOnly: isReadOnly,
         variant: variant,
+        secondaryText: secondaryText,
         ...RadioProps,
         a11y: {
           tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1',
           ...RadioProps.a11y
         },
         customClass: {
-          customRadioWrap: isBoxStyle ? `${style.radioBox} ${!isDisabledState ? style.hoverableRadioBox : ''} ${isChecked ? style.radioBoxActive : ''}` : '',
+          customRadioWrap: radioBoxClasses,
           ...RadioProps.customClass
+        },
+        customProps: { ...RadioProps.customProps,
+          LabelProps: { ...(RadioProps.customProps ? RadioProps.customProps.LabelProps : undefined),
+            renderRightPlaceholderNode: rightPlaceholderNode
+          }
         }
-      }, !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, {
-        name: "ZD-GN-info",
-        size: "16",
-        title: infoTooltip,
-        iconClass: style.infoIcon,
-        ...InfoIconProps
-      }) : null));
+      }));
     })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
       text: validationMessage,
       palette: validationPalette,

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

@@ -17,6 +17,22 @@ const options = [{
   text: 'Kolkata',
   value: '4'
 }];
+let 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', () => {
   test('rendering the defult props', () => {
     const {
@@ -43,4 +59,21 @@ describe('RadioField', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with secondaryTextOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RadioField, {
+      options: optionsWithsecondaryText
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with secondaryTextOptions & isBoxStyle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RadioField, {
+      options: optionsWithsecondaryText,
+      isBoxStyle: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });