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

package/lib/form/fields/MultiSelectField/MultiSelectField.js

@@ -66,8 +66,8 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
     _this = _super.call(this, props);
     _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
     _this.handleGetRef = _this.handleGetRef.bind(_assertThisInitialized(_this));
-    _this.onDropBoxOpen = _this.onDropBoxOpen.bind(_assertThisInitialized(_this));
-    _this.handleLabelClick = _this.handleLabelClick.bind(_assertThisInitialized(_this));
+    _this.onDropBoxOpen = _this.onDropBoxOpen.bind(_assertThisInitialized(_this)); // this.handleLabelClick = this.handleLabelClick.bind(this);
+
     _this.onSearch = _this.onSearch.bind(_assertThisInitialized(_this));
     _this.getNextOptions = _this.getNextOptions.bind(_assertThisInitialized(_this));
     _this.getNextId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
@@ -118,16 +118,17 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
           id = _this$props5.id;
       this.multiSelectBox = el;
       getRef && getRef(el, id);
-    }
-  }, {
-    key: "handleLabelClick",
-    value: function handleLabelClick() {
-      var isFocusOnLabelClick = this.props.isFocusOnLabelClick;
+    } // 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();
-      }
-    }
   }, {
     key: "render",
     value: function render() {
@@ -205,7 +206,12 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
         htmlFor: uniqueId // onClick={this.handleLabelClick}
         ,
         testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: id
+          }
+        }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({
         options: options,
         onChange: this.handleChange,

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

@@ -196,7 +196,12 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           label: customLabelClass
         },
         customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: id
+          }
+        }
       }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? isBoxStyle ? _FieldsModule["default"].fieldMargin_large : _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
       }, options.map(function (option, index) {

package/lib/form/fields/SelectField/SelectField.js

@@ -176,7 +176,12 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
         htmlFor: uniqueId,
         size: fieldSize === 'small' ? 'small' : 'medium',
         testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: uniqueId
+          }
+        }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '', " ").concat(fieldClass ? fieldClass : '')
       }, /*#__PURE__*/_react["default"].createElement(_Select["default"], _extends({

package/lib/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/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -222,13 +222,17 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           _customClass$listItem = customClass.listItemClass,
           listItemClass = _customClass$listItem === void 0 ? '' : _customClass$listItem,
           _customClass$textBoxI = customClass.textBoxIconWrapperClass,
-          textBoxIconWrapperClass = _customClass$textBoxI === void 0 ? '' : _customClass$textBoxI;
+          textBoxIconWrapperClass = _customClass$textBoxI === void 0 ? '' : _customClass$textBoxI,
+          _customClass$dropBoxC = customClass.dropBoxClass,
+          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
       var _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$TagWrapp = customProps.TagWrapperProps,
           TagWrapperProps = _customProps$TagWrapp === void 0 ? {} : _customProps$TagWrapp,
           _customProps$TagProps = customProps.TagProps,
-          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
+          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps,
+          _customProps$ListItem = customProps.ListItemProps,
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
       var isEditable = !isReadOnly;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder || isEditable && isFocus ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
@@ -306,7 +310,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           boxPosition: boxPosition,
           isPadding: false,
           customClass: {
-            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown
+            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown,
+            customDropBox: dropBoxClass
           },
           dataId: "".concat(dataId, "_dropbox"),
           isResponsivePadding: true,
@@ -337,8 +342,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         }, searchList.map(function (item, index) {
           var name = item.name,
               isNew = item.isNew,
-              listItemProps = item.listItemProps;
-          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+              listProps = item.listProps;
+          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
             key: index,
             index: index,
             autoHover: true,
@@ -349,9 +354,9 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
             highlight: selectSearchIndex === index,
             getRef: _this3.getSelectedItemRef,
             isDisabled: listDisabled,
-            customProps: listItemProps,
+            customProps: listProps,
             customClass: listItemClass
-          }, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          }, ListItemProps), isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
             alignBox: "row",
             align: "vertical"
           }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/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/lib/form/fields/TagsMultiSelect/props/propTypes.js

@@ -62,7 +62,8 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxIconProps: _propTypes["default"].object,
     TagWrapperProps: _propTypes["default"].object,
-    TagProps: _propTypes["default"].object
+    TagProps: _propTypes["default"].object,
+    ListItemProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool
 };

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -257,7 +257,12 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     htmlFor: htmlId,
     size: labelSize,
     testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-    customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+    customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+    tagAttributes: {
+      label: {
+        id: id
+      }
+    }
   }, LabelProps)), selectedValueCount ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     dataId: "".concat(dataId, "_tagCount"),
     className: _TagsMultiSelectFieldModule["default"].count

package/lib/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/lib/form/fields/TextBoxField/TextBoxField.js

@@ -166,7 +166,12 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
         size: fieldSize === 'small' ? 'small' : 'medium',
         testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         htmlFor: uniqueId,
-        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: labelName
+          }
+        }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({

package/lib/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/lib/form/fields/TextEditor/TextEditor.js

@@ -427,13 +427,16 @@ var TextEditor = /*#__PURE__*/function (_Component) {
           isNightMode = _this$props9.isNightMode,
           isReadOnly = _this$props9.isReadOnly,
           dataSelectorId = _this$props9.dataSelectorId,
-          isDisabled = _this$props9.isDisabled;
+          isDisabled = _this$props9.isDisabled,
+          customClass = _this$props9.customClass;
+      var _customClass$wrapper = customClass.wrapper,
+          wrapperClass = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
       var _this$state = this.state,
           isEditorLoad = _this$state.isEditorLoad,
           isEditorShow = _this$state.isEditorShow;
       var editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        className: "".concat(_TextEditorModule["default"].textEditor, " ").concat(_TextEditorModule["default"][type], " ").concat(_TextEditorModule["default"][border], "\n        ").concat(isNightMode ? _TextEditorModule["default"].night : _TextEditorModule["default"].light, " ").concat(isReadOnly ? _TextEditorModule["default"].readOnly : '', " ").concat(isDisabled ? _TextEditorModule["default"].disable : '', " ").concat(!isEditorShow ? _TextEditorModule["default"].editorHide : ''),
+        className: "".concat(_TextEditorModule["default"].textEditor, " ").concat(_TextEditorModule["default"][type], " ").concat(_TextEditorModule["default"][border], "\n        ").concat(isNightMode ? _TextEditorModule["default"].night : _TextEditorModule["default"].light, " ").concat(isReadOnly ? _TextEditorModule["default"].readOnly : '', " ").concat(isDisabled ? _TextEditorModule["default"].disable : '', " ").concat(!isEditorShow ? _TextEditorModule["default"].editorHide : '', " ").concat(wrapperClass),
         dataId: dataId,
         "data-isEditor": true,
         dataSelectorId: dataSelectorId

package/lib/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/lib/form/fields/TextEditor/props/defaultProps.js

@@ -18,6 +18,7 @@ var defaultProps = {
   dataSelectorId: 'textEditor',
   customCSS: '',
   isDisabled: false,
-  inlineImageProps: {}
+  inlineImageProps: {},
+  customClass: {}
 };
 exports.defaultProps = defaultProps;

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

@@ -59,6 +59,7 @@ var propTypes = {
     allowedFileExtensions: _propTypes["default"].array,
     fileNameMaxCharacters: _propTypes["default"].number,
     fileSizeMaxBytes: _propTypes["default"].number
-  })
+  }),
+  customClass: _propTypes["default"].object
 };
 exports.propTypes = propTypes;

package/lib/form/fields/TextareaField/TextareaField.js

@@ -195,7 +195,12 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
         size: fieldSize === 'small' ? 'small' : 'medium',
         testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         htmlFor: uniqueId,
-        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: id
+          }
+        }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, !renderRightPlaceholderNode ? textAreaContent : /*#__PURE__*/_react["default"].createElement("div", {

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -25,6 +25,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -100,7 +102,10 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           onSearch = _this$props3.onSearch,
           needSearchFetching = _this$props3.needSearchFetching,
           searchStr = _this$props3.searchStr,
-          i18nKeys = _this$props3.i18nKeys;
+          i18nKeys = _this$props3.i18nKeys,
+          customProps = _this$props3.customProps;
+      var _customProps$ToggleDr = customProps.ToggleDropDownProps,
+          ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr;
       var _i18nKeys$title = i18nKeys.title,
           title = _i18nKeys$title === void 0 ? 'Move Department' : _i18nKeys$title,
           _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
@@ -109,7 +114,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           searchErrorText = _i18nKeys$searchError === void 0 ? 'No results' : _i18nKeys$searchError,
           _i18nKeys$placeholder = i18nKeys.placeholder,
           placeholder = _i18nKeys$placeholder === void 0 ? 'Search Department' : _i18nKeys$placeholder;
-      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], _extends({}, ToggleDropDownProps, {
         title: title,
         options: departmentList,
         value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, {
@@ -138,7 +143,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
         isNextOptions: isNextOptions,
         onSearch: onSearch,
         needSearchFetching: needSearchFetching
-      });
+      }));
     }
   }]);
 

package/lib/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/lib/list/DepartmentDropDown/props/defaultProps.js

@@ -9,6 +9,7 @@ var defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {}
+  i18nKeys: {},
+  customProps: {}
 };
 exports.defaultProps = defaultProps;

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

@@ -31,5 +31,7 @@ var propTypes = (_propTypes = {
   searchEmptyText: _propTypes2["default"].string,
   searchErrorText: _propTypes2["default"].string,
   placeholder: _propTypes2["default"].string
+})), _defineProperty(_propTypes, "customProps", _propTypes2["default"].shape({
+  ToggleDropDownProps: _propTypes2["default"].object
 })), _propTypes);
 exports.propTypes = propTypes;

package/lib/list/SecondaryText/AccountName.js

@@ -15,6 +15,10 @@ var _propTypes = require("./props/propTypes");
 
 var _Layout = require("@zohodesk/components/es/Layout");
 
+var _Typography = _interopRequireDefault(require("@zohodesk/components/es/Typography/Typography"));
+
+var _Common = require("@zohodesk/components/es/utils/Common");
+
 var _Link = _interopRequireDefault(require("../../Link/Link"));
 
 var _SecondaryTextModule = _interopRequireDefault(require("./SecondaryText.module.css"));
@@ -77,6 +81,8 @@ var AccountName = /*#__PURE__*/function (_Component) {
           secondaryAccountHref = _this$props.secondaryAccountHref,
           secondaryAccountClick = _this$props.secondaryAccountClick,
           secondaryAccountText = _this$props.secondaryAccountText,
+          highlightData = _this$props.highlightData,
+          isHighlighted = _this$props.isHighlighted,
           customProps = _this$props.customProps;
       var _customProps$LinkProp = customProps.LinkProps,
           LinkProps = _customProps$LinkProp === void 0 ? {} : _customProps$LinkProp,
@@ -109,17 +115,30 @@ var AccountName = /*#__PURE__*/function (_Component) {
         className: _SecondaryTextModule["default"].link
       }, LinkProps, {
         ariaLabel: "Account Name ".concat(text)
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
-      }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : '')
-      }, TextProps), text)), secondaryAccountText && /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        $tagAttributes_text: TextProps,
+        $ui_size: "12",
+        $flag_dotted: true,
+        $ui_className: "".concat(_SecondaryTextModule["default"].linkWithText, " ").concat(className ? className : ''),
+        $ui_weight: fontWeight,
+        $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT
+      }, text)) : /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        $tagAttributes_text: TextProps,
+        $ui_size: "12",
+        $flag_dotted: true,
+        $ui_className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : ''),
+        $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT
+      }, text)), secondaryAccountText && /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
         href: secondaryAccountHref,
         onClick: secondaryAccountClick,
         className: _SecondaryTextModule["default"].link
-      }, /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
-      }, SecondaryTextProps), secondaryAccountText))))));
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        $tagAttributes_text: SecondaryTextProps,
+        $ui_size: "12",
+        $flag_dotted: true,
+        $ui_weight: fontWeight,
+        $ui_className: "".concat(_SecondaryTextModule["default"].linkWithText, " ").concat(className ? className : '')
+      }, secondaryAccountText))))));
     }
   }]);
 

package/lib/list/SecondaryText/ContactName.js

@@ -15,6 +15,10 @@ var _propTypes = require("./props/propTypes");
 
 var _Layout = require("@zohodesk/components/es/Layout");
 
+var _Typography = _interopRequireDefault(require("@zohodesk/components/es/Typography/Typography"));
+
+var _Common = require("@zohodesk/components/es/utils/Common");
+
 var _Link = _interopRequireDefault(require("../../Link/Link"));
 
 var _SentimentStatus = _interopRequireDefault(require("../SentimentStatus/SentimentStatus"));
@@ -81,6 +85,8 @@ var ContactName = /*#__PURE__*/function (_Component) {
           notAccessible = _this$props$notAccess === void 0 ? false : _this$props$notAccess,
           fontWeight = _this$props.fontWeight,
           i18nKeys = _this$props.i18nKeys,
+          highlightData = _this$props.highlightData,
+          isHighlighted = _this$props.isHighlighted,
           customProps = _this$props.customProps;
       var _i18nKeys$sentimentTi = i18nKeys.sentimentTitles,
           sentimentTitles = _i18nKeys$sentimentTi === void 0 ? {
@@ -119,12 +125,21 @@ var ContactName = /*#__PURE__*/function (_Component) {
         className: _SecondaryTextModule["default"].link
       }, LinkProps, {
         ariaLabel: "Contact Name ".concat(text)
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
-      }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : ''),
-        "data-title": dataTitle
-      }, TextProps), text)), sentimentType && /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_SentimentStatus["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        $flag_dotted: true,
+        $ui_size: "12",
+        $ui_weight: fontWeight,
+        $ui_className: "".concat(_SecondaryTextModule["default"].linkWithText, " ").concat(className ? className : ''),
+        $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT
+      }, text)) : /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        $tagAttributes_text: TextProps,
+        $ui_size: "12",
+        $flag_dotted: true,
+        $ui_className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : ''),
+        $ui_weight: fontWeight,
+        $i18n_dataTitle: dataTitle,
+        $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT
+      }, text)), sentimentType && /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_SentimentStatus["default"], {
         type: sentimentType,
         dataTitle: sentimentDataTitle
       })));

package/lib/list/SecondaryText/DepartmentText.js

@@ -11,6 +11,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _Typography = _interopRequireDefault(require("@zohodesk/components/es/Typography/Typography"));
+
+var _Common = require("@zohodesk/components/es/utils/Common");
+
 var _SecondaryTextModule = _interopRequireDefault(require("./SecondaryText.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -57,12 +61,17 @@ var DepartmentText = /*#__PURE__*/function (_Component) {
           className = _this$props.className,
           text = _this$props.text,
           dataTitle = _this$props.dataTitle,
-          dataId = _this$props.dataId;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SecondaryTextModule["default"].departmentText, " ").concat(className ? className : ''),
-        "data-title": dataTitle,
-        "data-id": dataId,
-        "data-test-id": dataId
+          dataId = _this$props.dataId,
+          isHighlighted = _this$props.isHighlighted,
+          highlightData = _this$props.highlightData;
+      return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        $ui_size: "12",
+        $flag_dotted: true,
+        $ui_className: "".concat(_SecondaryTextModule["default"].departmentText, " ").concat(className ? className : ''),
+        $i18n_dataTitle: dataTitle,
+        customId: dataId,
+        testId: dataId,
+        $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT
       }, text);
     }
   }]);

package/lib/list/SecondaryText/Email.js

@@ -13,6 +13,10 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _Typography = _interopRequireDefault(require("@zohodesk/components/es/Typography/Typography"));
+
+var _Common = require("@zohodesk/components/es/utils/Common");
+
 var _Link = _interopRequireDefault(require("../../Link/Link"));
 
 var _SecondaryTextModule = _interopRequireDefault(require("./SecondaryText.module.css"));
@@ -69,7 +73,9 @@ var Email = /*#__PURE__*/function (_Component) {
           isLink = _this$props.isLink,
           target = _this$props.target,
           fontWeight = _this$props.fontWeight,
-          customProps = _this$props.customProps;
+          customProps = _this$props.customProps,
+          isHighlighted = _this$props.isHighlighted,
+          highlightData = _this$props.highlightData;
       var _customProps$LinkProp = customProps.LinkProps,
           LinkProps = _customProps$LinkProp === void 0 ? {} : _customProps$LinkProp,
           _customProps$TextProp = customProps.TextProps,
@@ -81,12 +87,21 @@ var Email = /*#__PURE__*/function (_Component) {
         urlName: urlName,
         target: target,
         className: _SecondaryTextModule["default"].link
-      }, LinkProps), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
-      }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_SecondaryTextModule["default"].secondaryText, "  ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : ''),
-        "data-title": title
-      }, TextProps), text));
+      }, LinkProps), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        $flag_dotted: true,
+        $ui_size: "12",
+        $ui_weight: fontWeight,
+        $ui_className: "".concat(_SecondaryTextModule["default"].linkWithText, " ").concat(className ? className : ''),
+        $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT
+      }, text)) : /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        $tagAttributes_text: TextProps,
+        $ui_size: "12",
+        $flag_dotted: true,
+        $ui_className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(className ? className : ''),
+        $ui_weight: fontWeight,
+        $i18n_dataTitle: title,
+        $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT
+      }, text));
     }
   }]);