@zohodesk/dot 1.9.0 → 1.9.2

package/lib/form/fields/TextEditorField/TextEditorField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _ValidationMessage = _interopRequireDefault(require("../ValidationMessage/ValidationMessage"));
 
@@ -172,10 +172,16 @@ var TextEditorField = /*#__PURE__*/function (_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: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        customClass: {
+          label: labelCustomClass
+        },
+        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")
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, /*#__PURE__*/_react["default"].createElement(_TextEditorWrapper["default"], _extends({

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

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _Textarea = _interopRequireDefault(require("@zohodesk/components/es/Textarea/Textarea"));
 
@@ -185,12 +185,22 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         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: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         htmlFor: uniqueId,
-        dataId: 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/__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/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));
     }
   }]);
 

package/lib/list/SecondaryText/PhoneNumber.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"));
@@ -71,7 +75,9 @@ var PhoneNumber = /*#__PURE__*/function (_Component) {
           target = _this$props.target,
           hasReload = _this$props.hasReload,
           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,
@@ -85,12 +91,21 @@ var PhoneNumber = /*#__PURE__*/function (_Component) {
         target: target,
         hasReload: hasReload,
         className: _SecondaryTextModule["default"].link
-      }, LinkProps), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SecondaryTextModule["default"].phoneNumber, " ").concat(_SecondaryTextModule["default"].phonetxt, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
-      }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"].phonetxt, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : ''),
-        "data-title": title
-      }, TextProps), text));
+      }, LinkProps), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        $ui_size: "12",
+        $flag_dotted: true,
+        $ui_className: "".concat(_SecondaryTextModule["default"].phoneNumber, " ").concat(_SecondaryTextModule["default"].phonetxt, " ").concat(className ? className : ''),
+        $ui_weight: fontWeight,
+        $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT
+      }, text)) : /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        $tagAttributes_text: TextProps,
+        $ui_className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"].phonetxt, " ").concat(className ? className : ''),
+        $ui_weight: fontWeight,
+        $ui_size: "12",
+        $flag_dotted: true,
+        $i18n_dataTitle: title,
+        $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT
+      }, text));
     }
   }]);
 

package/lib/list/SecondaryText/PriorityText.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 _SecondaryTextModule = _interopRequireDefault(require("./SecondaryText.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -60,12 +64,17 @@ var PriorityText = /*#__PURE__*/function (_Component) {
           color = _this$props.color,
           text = _this$props.text,
           dataTitle = _this$props.dataTitle,
-          dataId = _this$props.dataId;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SecondaryTextModule["default"].priorityText, " ").concat(_SecondaryTextModule["default"][color], " ").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_className: "".concat(_SecondaryTextModule["default"].priorityText, " ").concat(_SecondaryTextModule["default"][color], " ").concat(className ? className : ''),
+        $flag_dotted: true,
+        $ui_size: "12",
+        $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT,
+        $i18n_dataTitle: dataTitle,
+        customId: dataId,
+        testId: dataId
       }, text);
     }
   }]);

package/lib/list/SecondaryText/SecondaryText.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 _SecondaryTextModule = _interopRequireDefault(require("./SecondaryText.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -21,7 +25,11 @@ 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -63,15 +71,25 @@ var SecondaryText = /*#__PURE__*/function (_Component) {
           dataTitle = _this$props.dataTitle,
           dataId = _this$props.dataId,
           onClick = _this$props.onClick,
-          customProps = _this$props.customProps;
+          customProps = _this$props.customProps,
+          isHighlighted = _this$props.isHighlighted,
+          highlightData = _this$props.highlightData;
       var SecondaryTextProps = customProps.SecondaryTextProps;
-      return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(className ? className : ''),
-        "data-title": dataTitle,
-        "data-id": dataId,
-        "data-test-id": dataId,
+
+      var tagAttributes = _objectSpread(_objectSpread({}, SecondaryTextProps), {}, {
         onClick: onClick
-      }, SecondaryTextProps), text);
+      });
+
+      return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        $tagAttributes_text: tagAttributes,
+        $ui_size: "12",
+        $flag_dotted: true,
+        $ui_className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(className ? className : ''),
+        $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT,
+        $i18n_dataTitle: dataTitle,
+        customId: dataId,
+        testId: dataId
+      }, text);
     }
   }]);
 

package/lib/list/SecondaryText/SecondaryText.module.css

@@ -8,109 +8,120 @@
 }[dir=rtl] .paidUserIcon {
   margin-left: var(--zd_size5) ;
 }
+
 .icon {
   display: block;
 }
+
 .disable {
   cursor: not-allowed;
 }
+
 .textBold {
   font-weight: var(--zd-fw-bold);
   color: var(--zdt_secondaryText_black_text);
 }
-.textStyle, .link{
+
+.link {
   display: block
 }
-.textStyle.textBold {
-  font-weight: var(--zd-fw-bold);
-  color: var(--zdt_secondaryText_black_text);
-}
+
 .ticketId,
 .link,
-.textStyle,
 .secondaryText,
 .ratingText,
 .phoneNumber {
   color: var(--zdt_secondaryText_secondaryText_text);
 }
-.textStyle,
-.secondaryText {
-  font-size: var(--zd_font_size12) ;
-}
+
 .ticketId,
-.phoneNumber,
 .ratingText {
   font-size: var(--zd_font_size12) ;
 }
-.textStyle,
+
+.linkWithText {
+  color: var(--zdt_secondaryText_secondaryText_text);
+  max-width: 100% ;
+  cursor: pointer;
+}
+
+.linkWithText:hover {
+  color: var(--zdt_secondaryText_blue_text);
+}
+
 .secondaryText,
 .phoneNumber {
-  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
   max-width: 100% ;
-  display: block;
 }
-.textStyle, .secondaryText, .phoneNumber {
+
+.secondaryText, .phoneNumber {
   cursor: pointer;
 }
-.textStyle:hover,
+
 .ticketIdLink,
 .phoneNumber:hover,
 .link:hover {
   color: var(--zdt_secondaryText_blue_text);
 }
+
 /* .link:focus, .link:focus .textStyle, .link:focus .phoneNumber{
   color: var(--zdt_secondaryText_blue_text);
 } */
 .ticketIdLink {
   cursor: pointer;
 }
-.ticketIdLink:hover,.ticketIdLink:focus {
+
+.ticketIdLink:hover,
+.ticketIdLink:focus {
   color: var(--zdt_secondaryText_blue_hover_text);
 }
+
 .primaryAccountNameCnt {
   max-width: 100% ;
 }
+
 /* status */
 .font_regular {
   font-weight: var(--zd-fw-normal);
 }
+
 .font_semibold {
   font-weight: var(--zd-fw-semibold);
 }
+
 .font_bold {
   font-weight: var(--zd-fw-bold);
 }
+
 .font_semibold,
 .font_bold,
 .textBold {
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
 }
-.priorityText,
-.statusText {
-  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
-}
 
 .priorityText {
-  font-size: var(--zd_font_size12) ;
   max-width: 100% ;
 }
+
 .departmentText {
-  font-size: var(--zd_font_size12) ;
   color: var(--zdt_secondaryText_secondaryText_text);
   max-width: 100% ;
-  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
+
 /* HappinessRating Style */
 .happinessContainer {
   composes: inlineBlockMiddle from '../listCommon.module.css';
 }
+
 .happinessImg {
   width: var(--zd_size13) ;
   vertical-align: middle;
 }
+
 [dir=ltr] .happinessImg {
   margin: 0 var(--zd_size4) 0 0 ;
 }
+
 [dir=rtl] .happinessImg {
   margin: 0 0 0 var(--zd_size4) ;
 }
@@ -119,18 +130,23 @@
 .gray {
   color: var(--zdt_secondaryText_gray_text);
 }
+
 .orange {
   color: var(--zdt_secondaryText_orage_text);
 }
+
 .green {
   color: var(--zdt_secondaryText_green_text);
 }
+
 .red {
   color: var(--zdt_secondaryText_red_text);
 }
+
 .blue {
   color: var(--zdt_secondaryText_blue_text);
 }
+
 .black {
   color: var(--zdt_secondaryText_black_text);
 }

package/lib/list/SecondaryText/StatusText.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 _SecondaryTextModule = _interopRequireDefault(require("./SecondaryText.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -61,12 +65,17 @@ var StatusText = /*#__PURE__*/function (_Component) {
           text = _this$props.text,
           dataTitle = _this$props.dataTitle,
           fontWeight = _this$props.fontWeight,
-          dataId = _this$props.dataId;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SecondaryTextModule["default"].statusText, " ").concat(_SecondaryTextModule["default"][color], " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").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_className: "".concat(_SecondaryTextModule["default"][color], " ").concat(className ? className : ''),
+        $ui_weight: fontWeight,
+        $flag_dotted: true,
+        $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT,
+        $i18n_dataTitle: dataTitle,
+        customId: dataId,
+        testId: dataId
       }, text);
     }
   }]);