@zohodesk/dot 1.0.0-temp-222.1 → 1.0.0-temp-220.5

package/README.md

@@ -4,9 +4,8 @@ In this Library, we Provide Some Basic Components to Build Your Application
 
 # 1.8.2
 
-- **RadioField**
-  - `customClass` prop supported
-  - Supports the `secondaryText`, `renderRightPlaceholderNode` and `customProps` via the `option` prop.
+- **GlobalNotification**
+ - `onStatusChange` prop added.
 
 # 1.8.1
 

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

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

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

@@ -1,6 +1,5 @@
 /**** Libraries ****/
 import React, { PureComponent } from 'react';
-import { compileClassNames } from '@zohodesk/utils';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
@@ -100,7 +99,6 @@ export default class RadioField extends PureComponent {
       isReadOnly,
       isBoxStyle,
       variant,
-      customClass,
       customProps
     } = this.props;
     const {
@@ -110,14 +108,8 @@ 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 : ''} ${customWrapperClass}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(Label, {
@@ -125,7 +117,7 @@ export default class RadioField extends PureComponent {
       size: "medium",
       id: id,
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''} ${customLabelClass}`,
+      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     }), /*#__PURE__*/React.createElement("div", {
@@ -136,32 +128,14 @@ export default class RadioField extends PureComponent {
         value,
         disabled = false,
         tooltip,
-        infoTooltip,
-        secondaryText,
-        renderRightPlaceholderNode,
-        customProps
+        infoTooltip
       } = 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: text,
-        className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap} ${customRadioWrapperClass}`
-      }, /*#__PURE__*/React.createElement(Radio, { ...customProps,
+        key: index,
+        className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap}`
+      }, /*#__PURE__*/React.createElement(Radio, {
         id: index,
         value: value,
         name: id,
@@ -179,22 +153,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: radioBoxClasses,
+          customRadioWrap: isBoxStyle ? `${style.radioBox} ${!isDisabledState ? style.hoverableRadioBox : ''} ${isChecked ? style.radioBoxActive : ''}` : '',
           ...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,22 +17,6 @@ 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 {
@@ -59,21 +43,4 @@ 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();
-  });
 });