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

package/README.md

@@ -2,11 +2,23 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
-# 1.8.6
+# 1.9.2
+
+- **Highlight options added**
+  -  Account Name, Contact Name, Department Text, Email, Phone Number, Priority, StatusText, TicketID, Website and Subject components
+
+# 1.9.1
+
+- **CheckBoxField, CurrencyField, DateField, MultiSelectField, RadioField, SelectField, TagsMultiSelectField, TextareaField, TextBoxField, TextEditorField**
+  - Accessibility Enhanced Label component has been updated in above components
+     (v1 folder components excluded)  
+
+# 1.9.0
+
+- Updated @zohodesk-private/color-variable-preprocessor package - Grayscale introduced
 
-- **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)  
+- **TextEditor**
+  - customClass prop added
 
 # 1.8.6
 

package/es/common/dot_boxShadow.module.css

@@ -37,8 +37,7 @@
     --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
 
     /* onboarding  */
-    --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px rgba(0, 0, 0, 0.09));
+    --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
     --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
     --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
-
 }

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

@@ -96,10 +96,15 @@ export default class CheckBoxField extends PureComponent {
         container: !isDirectCol ? style.checkboxText : ''
       },
       size: fieldSize === 'small' ? 'small' : 'medium',
-      textWeight: isDirectCol ? 'regular' : 'semibold',
+      fontWeight: 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,
+      tagAttributes: {
+        label: {
+          id
+        }
+      },
       ...LabelProps
     }));
     return /*#__PURE__*/React.createElement("div", {

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

@@ -73,15 +73,16 @@ exports[`CheckBoxField rendering the custom children 1`] = `
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"
           >
-            <label
-              class="label title medium default font_primary
-           pointer checkboxText undefined cbTextPointer   "
+            <div
+              class="inlineFlex row alignItems_center container default checkboxText"
               data-id="undefined_label"
-              data-selector-id="label"
+              data-selector-id="undefined_label"
               data-test-id="undefined_label"
             >
-              Label
-            </label>
+              <label
+                class="size14 font_semibold label"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -164,15 +165,16 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"
           >
-            <label
-              class="label title medium default font_primary
-           pointer checkboxText undefined cbTextPointer   "
+            <div
+              class="inlineFlex row alignItems_center container default checkboxText"
               data-id="undefined_label"
-              data-selector-id="label"
+              data-selector-id="undefined_label"
               data-test-id="undefined_label"
             >
-              Label
-            </label>
+              <label
+                class="size14 font_semibold label"
+              />
+            </div>
             {}
           </div>
         </div>
@@ -255,15 +257,16 @@ exports[`CheckBoxField rendering the defult props 1`] = `
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"
           >
-            <label
-              class="label title medium default font_primary
-           pointer checkboxText undefined cbTextPointer   "
+            <div
+              class="inlineFlex row alignItems_center container default checkboxText"
               data-id="undefined_label"
-              data-selector-id="label"
+              data-selector-id="undefined_label"
               data-test-id="undefined_label"
             >
-              Label
-            </label>
+              <label
+                class="size14 font_semibold label"
+              />
+            </div>
           </div>
         </div>
       </div>

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

@@ -10,7 +10,7 @@ exports[`CurrencyField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

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

@@ -145,6 +145,11 @@ export default class DateField extends PureComponent {
       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,
+      tagAttributes: {
+        label: {
+          id: labelName
+        }
+      },
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

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

@@ -18,7 +18,7 @@ exports[`DateField rendering the defult props 1`] = `
           data-test-id="dateField(formatted_undefined)_widget"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

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

@@ -226,7 +226,10 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
-   
 .phoneField{
   composes: ltr-zone  from '~@zohodesk/components/es/common/common.module.css';
+}
+
+.lineClampPickListItem{
+  --line-clamp: var(--picklist-field-line-clamp,3);
 }

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

@@ -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;
+  } // handleLabelClick() {
+  //   let { isFocusOnLabelClick } = this.props;
+  //   if (
+  //     isFocusOnLabelClick &&
+  //     this.multiSelectBox &&
+  //     this.multiSelectBox.focus
+  //   ) {
+  //     this.multiSelectBox.focus();
+  //   }
+  // }
 
-    if (isFocusOnLabelClick && this.multiSelectBox && this.multiSelectBox.focus) {
-      this.multiSelectBox.focus();
-    }
-  }
 
   render() {
     let {
@@ -154,6 +154,11 @@ export default class MultiSelectField extends PureComponent {
       ,
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      tagAttributes: {
+        label: {
+          id
+        }
+      },
       ...LabelProps
     })), /*#__PURE__*/React.createElement(MultiSelect, {
       options: options,

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

@@ -29,7 +29,7 @@ exports[`MultiSelectField rendering the defult props 1`] = `
           "
           />
           <div
-            class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+            class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

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

@@ -22,7 +22,7 @@ exports[`PhoneField rendering the defult props 1`] = `
           class="fieldContainer "
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

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

@@ -132,6 +132,11 @@ export default class RadioField extends PureComponent {
       },
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      tagAttributes: {
+        label: {
+          id
+        }
+      },
       ...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

@@ -126,6 +126,11 @@ export default class SelectField extends PureComponent {
       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`,
+      tagAttributes: {
+        label: {
+          id: uniqueId
+        }
+      },
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`

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

@@ -19,7 +19,7 @@ exports[`SelectField rendering the defult props 1`] = `
           data-test-id="selectComponent"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -160,12 +160,14 @@ export default class TagsMultiSelect extends React.Component {
     let {
       tagCustomClass = '',
       listItemClass = '',
-      textBoxIconWrapperClass = ''
+      textBoxIconWrapperClass = '',
+      dropBoxClass = ''
     } = customClass;
     const {
       TextBoxIconProps = {},
       TagWrapperProps = {},
-      TagProps = {}
+      TagProps = {},
+      ListItemProps = {}
     } = customProps;
     const isEditable = !isReadOnly;
     return /*#__PURE__*/React.createElement("div", {
@@ -254,7 +256,8 @@ export default class TagsMultiSelect extends React.Component {
         boxPosition: boxPosition,
         isPadding: false,
         customClass: {
-          customDropBoxWrap: style.dropdown
+          customDropBoxWrap: style.dropdown,
+          customDropBox: dropBoxClass
         },
         dataId: `${dataId}_dropbox`,
         isResponsivePadding: true,
@@ -286,7 +289,7 @@ export default class TagsMultiSelect extends React.Component {
         let {
           name,
           isNew,
-          listItemProps
+          listProps
         } = item;
         return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
           key: index,
@@ -299,8 +302,9 @@ export default class TagsMultiSelect extends React.Component {
           highlight: selectSearchIndex === index,
           getRef: this.getSelectedItemRef,
           isDisabled: listDisabled,
-          customProps: listItemProps,
-          customClass: listItemClass
+          customProps: listProps,
+          customClass: listItemClass,
+          ...ListItemProps
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

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

@@ -25,7 +25,7 @@ exports[`TagsMultiSelect rendering the defult props 1`] = `
           class="custmSpan"
         />
         <div
-          class="varClass customContainer   effect     container custmInp  flex rowdir"
+          class="varClass customContainer    effect     container custmInp  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div

package/es/form/fields/TagsMultiSelect/props/propTypes.js

@@ -52,7 +52,8 @@ export const propTypes = {
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object,
     TagWrapperProps: PropTypes.object,
-    TagProps: PropTypes.object
+    TagProps: PropTypes.object,
+    ListItemProps: PropTypes.object
   }),
   isFocus: PropTypes.bool
 };

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

@@ -217,6 +217,11 @@ const TagsMultiSelectField = props => {
     size: labelSize,
     testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
     customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+    tagAttributes: {
+      label: {
+        id
+      }
+    },
     ...LabelProps
   }), selectedValueCount ? /*#__PURE__*/React.createElement(Box, {
     dataId: `${dataId}_tagCount`,

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

@@ -31,7 +31,7 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
             class="custmSpan"
           />
           <div
-            class="varClass customContainer   effect     container custmInp  flex rowdir"
+            class="varClass customContainer    effect     container custmInp  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

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

@@ -114,6 +114,11 @@ export default class TextBoxField extends PureComponent {
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       htmlFor: uniqueId,
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      tagAttributes: {
+        label: {
+          id: labelName
+        }
+      },
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

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

@@ -10,7 +10,7 @@ exports[`TextBoxField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/es/form/fields/TextEditor/TextEditor.js

@@ -384,8 +384,12 @@ export default class TextEditor extends Component {
       isNightMode,
       isReadOnly,
       dataSelectorId,
-      isDisabled
+      isDisabled,
+      customClass
     } = this.props;
+    const {
+      wrapper: wrapperClass = ''
+    } = customClass;
     let {
       isEditorLoad,
       isEditorShow
@@ -393,7 +397,7 @@ export default class TextEditor extends Component {
     let editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
     return /*#__PURE__*/React.createElement(Container, {
       className: `${styles.textEditor} ${styles[type]} ${styles[border]}
-        ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''}`,
+        ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''} ${wrapperClass}`,
       dataId: dataId,
       "data-isEditor": true,
       dataSelectorId: dataSelectorId

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

@@ -4,7 +4,7 @@ exports[`TextEditor rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="textEditor large borderTop
-        light   editorHide flex cover coldir"
+        light   editorHide  flex cover coldir"
     data-id="containerComponent"
     data-iseditor="true"
     data-selector-id="textEditor"

package/es/form/fields/TextEditor/props/defaultProps.js

@@ -12,5 +12,6 @@ export const defaultProps = {
   dataSelectorId: 'textEditor',
   customCSS: '',
   isDisabled: false,
-  inlineImageProps: {}
+  inlineImageProps: {},
+  customClass: {}
 };

package/es/form/fields/TextEditor/props/propTypes.js

@@ -49,5 +49,6 @@ export const propTypes = {
     allowedFileExtensions: PropTypes.array,
     fileNameMaxCharacters: PropTypes.number,
     fileSizeMaxBytes: PropTypes.number
-  })
+  }),
+  customClass: PropTypes.object
 };

package/es/form/fields/TextareaField/TextareaField.js

@@ -142,6 +142,11 @@ export default class TextareaField extends PureComponent {
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       htmlFor: uniqueId,
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      tagAttributes: {
+        label: {
+          id
+        }
+      },
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -48,15 +48,19 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys
+      i18nKeys,
+      customProps
     } = this.props;
+    const {
+      ToggleDropDownProps = {}
+    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
       searchErrorText = 'No results',
       placeholder = 'Search Department'
     } = i18nKeys;
-    return /*#__PURE__*/React.createElement(ToggleDropDown, {
+    return /*#__PURE__*/React.createElement(ToggleDropDown, { ...ToggleDropDownProps,
       title: title,
       options: departmentList,
       value: /*#__PURE__*/React.createElement(DepartmentText, {

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="departmentText "
+            class="dotted size12 departmentText "
           />
         </span>
         <i

package/es/list/DepartmentDropDown/props/defaultProps.js

@@ -3,5 +3,6 @@ export const defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {}
+  i18nKeys: {},
+  customProps: {}
 };

package/es/list/DepartmentDropDown/props/propTypes.js

@@ -20,5 +20,8 @@ export const propTypes = {
     searchEmptyText: PropTypes.string,
     searchErrorText: PropTypes.string,
     placeholder: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    ToggleDropDownProps: PropTypes.object
   })
 };

package/es/list/SecondaryText/AccountName.js

@@ -7,6 +7,8 @@ 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 ****/
 
@@ -28,6 +30,8 @@ export default class AccountName extends Component {
       secondaryAccountHref,
       secondaryAccountClick,
       secondaryAccountText,
+      highlightData,
+      isHighlighted,
       customProps
     } = this.props;
     let {
@@ -60,18 +64,29 @@ export default class AccountName extends Component {
       className: style.link,
       ...LinkProps,
       ariaLabel: `Account Name ${text}`
-    }, /*#__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
+    }, /*#__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
     }, text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
       href: secondaryAccountHref,
       onClick: secondaryAccountClick,
       className: style.link
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
-      ...SecondaryTextProps
+    }, /*#__PURE__*/React.createElement(Typography, {
+      $tagAttributes_text: SecondaryTextProps,
+      $ui_size: "12",
+      $flag_dotted: true,
+      $ui_weight: fontWeight,
+      $ui_className: `${style.linkWithText} ${className ? className : ''}`
     }, secondaryAccountText))))));
   }
 

package/es/list/SecondaryText/ContactName.js

@@ -2,6 +2,8 @@ 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';
@@ -23,6 +25,8 @@ export default class ContactName extends Component {
       notAccessible = false,
       fontWeight,
       i18nKeys,
+      highlightData,
+      isHighlighted,
       customProps
     } = this.props;
     let {
@@ -62,12 +66,20 @@ export default class ContactName extends Component {
       className: style.link,
       ...LinkProps,
       ariaLabel: `Contact Name ${text}`
-    }, /*#__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
+    }, /*#__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
     }, text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
       type: sentimentType,
       dataTitle: sentimentDataTitle