@zohodesk/dot 1.0.0-temp-221 → 1.0.0-temp-222

package/README.md

@@ -2,6 +2,10 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.27
+- **RadioField**
+  - Supports the `secondaryText`, `renderRightPlaceholderNode` & `customProps` via the `option` prop.
+
 # 1.7.26
 
 - `list/SecondaryText/PhoneNumber.js`

package/es/form/fields/CheckBoxField/CheckBoxField.js

@@ -3,9 +3,8 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
-// import Label from '@zohodesk/components/es/Label/Label';
 
-import Label from '@zohodesk/components/es/v1/Label/Label';
+import Label from '@zohodesk/components/es/Label/Label';
 import CheckBox from '@zohodesk/components/es/CheckBox/CheckBox';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { Container, Box } from '@zohodesk/components/es/Layout';
@@ -88,11 +87,15 @@ export default class CheckBoxField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isRequired: isMandatory,
-      customStyle: labelCustomClass,
-      testId: id,
-      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      id: id,
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      infoText: infoText,
+      customClass: `${!isDirectCol ? style.checkboxText : ''} ${!isDirectCol ? style[`lineClamp_${lineClamp}`] : ''} ${isReadOnly || isDisabled ? style.cbTextReadonly : style.cbTextPointer} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      title: labelName,
       onClick: !removeEvent ? this.handleLabelClick : null,
+      variant: isDirectCol ? 'default' : 'primary',
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     }));
     return /*#__PURE__*/React.createElement("div", {

package/es/form/fields/CurrencyField/CurrencyField.js

@@ -3,9 +3,8 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
-// import Label from '@zohodesk/components/es/Label/Label';
 
-import Label from '@zohodesk/components/es/v1/Label/Label';
+import Label from '@zohodesk/components/es/Label/Label';
 import TextBoxIcon from '@zohodesk/components/es/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
@@ -130,10 +129,11 @@ export default class CurrencyField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isRequired: isMandatory,
-      customStyle: labelCustomClass,
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
-      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/form/fields/DateField/DateField.js

@@ -3,9 +3,8 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
-// import Label from '@zohodesk/components/es/Label/Label';
 
-import Label from '@zohodesk/components/es/v1/Label/Label';
+import Label from '@zohodesk/components/es/Label/Label';
 import DateWidget from '@zohodesk/components/es/DateTime/DateWidget';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
@@ -134,12 +133,14 @@ export default class DateField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isRequired: isMandatory,
-      customStyle: labelCustomClass,
       htmlFor: getAriaId,
-      testId: labelName,
-      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-      ...LabelProps
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      ...LabelProps,
+      id: labelName
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, isLocked && lockedValueText ? /*#__PURE__*/React.createElement("div", {

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/MultiSelectField/MultiSelectField.js

@@ -3,9 +3,8 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
-// import Label from '@zohodesk/components/es/Label/Label';
 
-import Label from '@zohodesk/components/es/v1/Label/Label';
+import Label from '@zohodesk/components/es/Label/Label';
 import MultiSelect from '@zohodesk/components/es/MultiSelect/MultiSelect';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
@@ -146,11 +145,13 @@ export default class MultiSelectField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isRequired: isMandatory // customStyle={style.fieldLabel}
+      id: id,
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
       ,
+      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       htmlFor: uniqueId,
-      testId: id,
-      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     })), /*#__PURE__*/React.createElement(MultiSelect, {
       options: options,

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 ****/
@@ -128,14 +129,31 @@ 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({
+        [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, {
+      }, /*#__PURE__*/React.createElement(Radio, { ...customProps,
         id: index,
         value: value,
         name: id,
@@ -153,22 +171,23 @@ 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: {
+          LabelProps: { ...(RadioProps.customProps ? RadioProps.customProps.LabelProps : undefined),
+            renderRightPlaceholderNode: rightPlaceholderNode
+          },
+          ...RadioProps.customProps
         }
-      }, !!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();
+  });
 });