@zohodesk/dot 1.0.0-temp-218.4 → 1.0.0-temp-224

package/README.md

@@ -4,6 +4,12 @@ In this Library, we Provide Some Basic Components to Build Your Application
 
 # 1.8.6
 
+- **LabelEnhancedComponent-V1**
+  - Accessibility Enhanced Label component has been updated in below components
+    - `CheckBoxField`, `CurrencyField`, `DateField`, `MultiSelectField`, `RadioField`, `SelectField`, `TagsMultiSelectField`, `TextareaField`, `TextBoxField`, `TextEditorField` (v1 folder components excluded)  
+
+# 1.8.6
+
 - **ToggleDropdown**
   - `palette` supported for the `options` prop
 

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

@@ -4,7 +4,7 @@ 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 CheckBox from '@zohodesk/components/es/CheckBox/CheckBox';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { Container, Box } from '@zohodesk/components/es/Layout';
@@ -87,15 +87,19 @@ export default class CheckBoxField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      id: id,
+      isRequired: isMandatory,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      palette: labelPalette,
+      customClass: {
+        label: labelCustomClass,
+        container: !isDirectCol ? style.checkboxText : ''
+      },
       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,
+      textWeight: isDirectCol ? 'regular' : 'semibold',
+      testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       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

@@ -4,7 +4,7 @@ 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 TextBoxIcon from '@zohodesk/components/es/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
@@ -129,11 +129,17 @@ export default class CurrencyField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
+      isRequired: isMandatory,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      palette: labelPalette,
+      customClass: {
+        label: labelCustomClass
+      },
       size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      testId: 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

@@ -4,7 +4,7 @@ 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 DateWidget from '@zohodesk/components/es/DateTime/DateWidget';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
@@ -133,14 +133,19 @@ export default class DateField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      htmlFor: getAriaId,
+      isRequired: isMandatory,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      palette: labelPalette,
+      customClass: {
+        label: labelCustomClass
+      },
       size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      htmlFor: getAriaId,
+      testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       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
+      ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, isLocked && lockedValueText ? /*#__PURE__*/React.createElement("div", {

package/es/form/fields/MultiSelectField/MultiSelectField.js

@@ -4,7 +4,7 @@ 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 MultiSelect from '@zohodesk/components/es/MultiSelect/MultiSelect';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
@@ -17,8 +17,8 @@ export default class MultiSelectField extends PureComponent {
     super(props);
     this.handleChange = this.handleChange.bind(this);
     this.handleGetRef = this.handleGetRef.bind(this);
-    this.onDropBoxOpen = this.onDropBoxOpen.bind(this); // this.handleLabelClick = this.handleLabelClick.bind(this);
-
+    this.onDropBoxOpen = this.onDropBoxOpen.bind(this);
+    this.handleLabelClick = this.handleLabelClick.bind(this);
     this.onSearch = this.onSearch.bind(this);
     this.getNextOptions = this.getNextOptions.bind(this);
     this.getNextId = getUniqueId(this);
@@ -67,17 +67,17 @@ export default class MultiSelectField extends PureComponent {
     } = this.props;
     this.multiSelectBox = el;
     getRef && getRef(el, id);
-  } // handleLabelClick() {
-  //   let { isFocusOnLabelClick } = this.props;
-  //   if (
-  //     isFocusOnLabelClick &&
-  //     this.multiSelectBox &&
-  //     this.multiSelectBox.focus
-  //   ) {
-  //     this.multiSelectBox.focus();
-  //   }
-  // }
+  }
 
+  handleLabelClick() {
+    let {
+      isFocusOnLabelClick
+    } = this.props;
+
+    if (isFocusOnLabelClick && this.multiSelectBox && this.multiSelectBox.focus) {
+      this.multiSelectBox.focus();
+    }
+  }
 
   render() {
     let {
@@ -145,13 +145,15 @@ export default class MultiSelectField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      id: id,
+      isRequired: isMandatory,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      palette: labelPalette,
       size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
+      htmlFor: uniqueId // onClick={this.handleLabelClick}
       ,
-      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-      htmlFor: uniqueId,
+      testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      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

@@ -6,7 +6,7 @@ import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
 import Icon from '@zohodesk/icons/es/Icon';
-import Label from '@zohodesk/components/es/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import Radio from '@zohodesk/components/es/Radio/Radio';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 /** Css */
@@ -123,10 +123,15 @@ export default class RadioField extends PureComponent {
     }, labelName && /*#__PURE__*/React.createElement(Label, {
       text: labelName,
       size: "medium",
-      id: id,
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''} ${customLabelClass}`,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      isRequired: isMandatory,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      palette: labelPalette,
+      customClass: {
+        label: customLabelClass
+      },
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     }), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? isBoxStyle ? style.fieldMargin_large : style.fieldMargin_medium : ''} ${style.radioContainer}`

package/es/form/fields/SelectField/SelectField.js

@@ -4,7 +4,7 @@ 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 Select from '@zohodesk/components/es/Select/Select';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
@@ -115,13 +115,18 @@ export default class SelectField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      isRequired: isMandatory,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      palette: labelPalette,
+      customClass: {
+        label: labelCustomClass
+      },
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-      ...LabelProps,
-      id: uniqueId
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
     }, /*#__PURE__*/React.createElement(Select, {

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Box } from '@zohodesk/components/es/Layout';
-import Label from '@zohodesk/components/es/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import Popup from '@zohodesk/components/es/Popup/Popup';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import TagsMultiSelect from "../TagsMultiSelect/TagsMultiSelect";
@@ -206,13 +206,17 @@ const TagsMultiSelectField = props => {
     }
   }, /*#__PURE__*/React.createElement(Label, {
     text: labelName,
-    title: labelName,
-    id: id,
-    size: labelSize,
-    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-    customClass: `${fieldStyle.fieldLabel} ${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
-    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+    isRequired: isMandatory,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    palette: labelPalette,
+    customClass: {
+      label: labelClass
+    },
     htmlFor: htmlId,
+    size: labelSize,
+    testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+    customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
     ...LabelProps
   }), selectedValueCount ? /*#__PURE__*/React.createElement(Box, {
     dataId: `${dataId}_tagCount`,

package/es/form/fields/TextBoxField/TextBoxField.js

@@ -4,7 +4,7 @@ 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 TextBoxIcon from '@zohodesk/components/es/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
@@ -103,13 +103,18 @@ export default class TextBoxField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
+      isRequired: isMandatory,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      palette: labelPalette,
+      customClass: {
+        label: labelCustomClass
+      },
       size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-      ...LabelProps,
-      id: labelName
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {

package/es/form/fields/TextEditorField/TextEditorField.js

@@ -4,7 +4,7 @@ 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 ValidationMessage from "../ValidationMessage/ValidationMessage";
 import TextEditorWrapper from "../TextEditorWrapper/TextEditorWrapper";
 import FieldContainer from "../FieldContainer/FieldContainer";
@@ -122,10 +122,16 @@ export default class TextEditorField extends PureComponent {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       htmlFor: !isReadOnly && !isDisabled ? id : undefined,
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      isRequired: isMandatory,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      palette: labelPalette,
       onClick: this.handleLabelClick,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      customClass: {
+        label: labelCustomClass
+      },
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      testId: 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/TextareaField/TextareaField.js

@@ -4,7 +4,7 @@ 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 Textarea from '@zohodesk/components/es/Textarea/Textarea';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
@@ -131,12 +131,17 @@ export default class TextareaField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      id: id,
+      isRequired: isMandatory,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      palette: labelPalette,
+      customClass: {
+        label: labelCustomClass
+      },
       size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/list/DepartmentDropDown/__tests__/__snapshots__/DepartmentDropDown.spec.js.snap

@@ -30,7 +30,7 @@ exports[`DepartmentDropDown rendering the defult props 1`] = `
           id="1"
         >
           <div
-            class="dotted size12 departmentText "
+            class="departmentText "
           />
         </span>
         <i

package/es/list/SecondaryText/AccountName.js

@@ -7,8 +7,6 @@ import { AccountName_propTypes } from "./props/propTypes";
 /**** Components ****/
 
 import { Container, Box } from '@zohodesk/components/es/Layout';
-import Typography from '@zohodesk/components/es/Typography/Typography';
-import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
 import Link from "../../Link/Link";
 /**** CSS ****/
 
@@ -30,8 +28,6 @@ export default class AccountName extends Component {
       secondaryAccountHref,
       secondaryAccountClick,
       secondaryAccountText,
-      highlightData,
-      isHighlighted,
       customProps
     } = this.props;
     let {
@@ -64,29 +60,18 @@ export default class AccountName extends Component {
       className: style.link,
       ...LinkProps,
       ariaLabel: `Account Name ${text}`
-    }, /*#__PURE__*/React.createElement(Typography, {
-      $tagAttributes_text: TextProps,
-      $ui_size: "12",
-      $flag_dotted: true,
-      $ui_className: `${style.linkWithText} ${className ? className : ''}`,
-      $ui_weight: fontWeight,
-      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
-    }, text)) : /*#__PURE__*/React.createElement(Typography, {
-      $tagAttributes_text: TextProps,
-      $ui_size: "12",
-      $flag_dotted: true,
-      $ui_className: `${style.secondaryText} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
-      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
+    }, text)) : /*#__PURE__*/React.createElement("div", {
+      className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
+      ...TextProps
     }, text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
       href: secondaryAccountHref,
       onClick: secondaryAccountClick,
       className: style.link
-    }, /*#__PURE__*/React.createElement(Typography, {
-      $tagAttributes_text: SecondaryTextProps,
-      $ui_size: "12",
-      $flag_dotted: true,
-      $ui_weight: fontWeight,
-      $ui_className: `${style.linkWithText} ${className ? className : ''}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
+      ...SecondaryTextProps
     }, secondaryAccountText))))));
   }
 

package/es/list/SecondaryText/ContactName.js

@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import { ContactName_defaultProps } from "./props/defaultProps";
 import { ContactName_propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/es/Layout';
-import Typography from '@zohodesk/components/es/Typography/Typography';
-import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
 import Link from "../../Link/Link";
 import SentimentStatus from "../SentimentStatus/SentimentStatus";
 import { Icon } from '@zohodesk/icons';
@@ -25,8 +23,6 @@ export default class ContactName extends Component {
       notAccessible = false,
       fontWeight,
       i18nKeys,
-      highlightData,
-      isHighlighted,
       customProps
     } = this.props;
     let {
@@ -66,20 +62,12 @@ export default class ContactName extends Component {
       className: style.link,
       ...LinkProps,
       ariaLabel: `Contact Name ${text}`
-    }, /*#__PURE__*/React.createElement(Typography, {
-      $flag_dotted: true,
-      $ui_size: "12",
-      $ui_weight: fontWeight,
-      $ui_className: `${style.linkWithText} ${className ? className : ''}`,
-      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
-    }, text)) : /*#__PURE__*/React.createElement(Typography, {
-      $tagAttributes_text: TextProps,
-      $ui_size: "12",
-      $flag_dotted: true,
-      $ui_className: `${style.secondaryText} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
-      $ui_weight: fontWeight,
-      $i18n_dataTitle: dataTitle,
-      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
+    }, text)) : /*#__PURE__*/React.createElement("div", {
+      className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
+      "data-title": dataTitle,
+      ...TextProps
     }, text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
       type: sentimentType,
       dataTitle: sentimentDataTitle

package/es/list/SecondaryText/DepartmentText.js

@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
 import { DepartmentText_propTypes } from "./props/propTypes";
-import Typography from '@zohodesk/components/es/Typography/Typography';
-import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
 import style from "./SecondaryText.module.css";
 export default class DepartmentText extends Component {
   constructor(props) {
@@ -13,18 +11,13 @@ export default class DepartmentText extends Component {
       className,
       text,
       dataTitle,
-      dataId,
-      isHighlighted,
-      highlightData
+      dataId
     } = this.props;
-    return /*#__PURE__*/React.createElement(Typography, {
-      $ui_size: "12",
-      $flag_dotted: true,
-      $ui_className: `${style.departmentText} ${className ? className : ''}`,
-      $i18n_dataTitle: dataTitle,
-      customId: dataId,
-      testId: dataId,
-      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.departmentText} ${className ? className : ''}`,
+      "data-title": dataTitle,
+      "data-id": dataId,
+      "data-test-id": dataId
     }, text);
   }
 

package/es/list/SecondaryText/Email.js

@@ -6,8 +6,6 @@ import { Email_defaultProps } from "./props/defaultProps";
 import { Email_propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Typography from '@zohodesk/components/es/Typography/Typography';
-import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
 import Link from "../../Link/Link";
 /**** CSS ****/
 
@@ -24,9 +22,7 @@ export default class Email extends Component {
       isLink,
       target,
       fontWeight,
-      customProps,
-      isHighlighted,
-      highlightData
+      customProps
     } = this.props;
     let {
       LinkProps = {},
@@ -40,20 +36,12 @@ export default class Email extends Component {
       target: target,
       className: style.link,
       ...LinkProps
-    }, /*#__PURE__*/React.createElement(Typography, {
-      $flag_dotted: true,
-      $ui_size: "12",
-      $ui_weight: fontWeight,
-      $ui_className: `${style.linkWithText} ${className ? className : ''}`,
-      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
-    }, text)) : /*#__PURE__*/React.createElement(Typography, {
-      $tagAttributes_text: TextProps,
-      $ui_size: "12",
-      $flag_dotted: true,
-      $ui_className: `${style.secondaryText} ${className ? className : ''}`,
-      $ui_weight: fontWeight,
-      $i18n_dataTitle: title,
-      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
+    }, text)) : /*#__PURE__*/React.createElement("div", {
+      className: `${style.secondaryText}  ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
+      "data-title": title,
+      ...TextProps
     }, text));
   }
 

package/es/list/SecondaryText/PhoneNumber.js

@@ -6,8 +6,6 @@ import { PhoneNumber_defaultProps } from "./props/defaultProps";
 import { PhoneNumber_propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Typography from '@zohodesk/components/es/Typography/Typography';
-import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
 import Link from "../../Link/Link";
 /**** CSS ****/
 
@@ -26,9 +24,7 @@ export default class PhoneNumber extends Component {
       target,
       hasReload,
       fontWeight,
-      customProps,
-      isHighlighted,
-      highlightData
+      customProps
     } = this.props;
     let {
       LinkProps = {},
@@ -44,20 +40,12 @@ export default class PhoneNumber extends Component {
       hasReload: hasReload,
       className: style.link,
       ...LinkProps
-    }, /*#__PURE__*/React.createElement(Typography, {
-      $ui_size: "12",
-      $flag_dotted: true,
-      $ui_className: `${style.phoneNumber} ${style.phonetxt} ${className ? className : ''}`,
-      $ui_weight: fontWeight,
-      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
-    }, text)) : /*#__PURE__*/React.createElement(Typography, {
-      $tagAttributes_text: TextProps,
-      $ui_className: `${style.secondaryText} ${style.phonetxt} ${className ? className : ''}`,
-      $ui_weight: fontWeight,
-      $ui_size: "12",
-      $flag_dotted: true,
-      $i18n_dataTitle: title,
-      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.phoneNumber} ${style.phonetxt} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
+    }, text)) : /*#__PURE__*/React.createElement("div", {
+      className: `${style.secondaryText} ${style.phonetxt} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
+      "data-title": title,
+      ...TextProps
     }, text));
   }