@zohodesk/dot 1.9.1 → 1.9.2

package/es/list/SecondaryText/__tests__/__snapshots__/AccountName.spec.js.snap

@@ -35,7 +35,7 @@ exports[`AccountName rendering the defult props 1`] = `
             rel="noopener noreferrer"
           >
             <div
-              class="textStyle font_regular "
+              class="dotted size12 font_regular linkWithText "
             />
           </a>
         </div>

package/es/list/SecondaryText/__tests__/__snapshots__/ContactName.spec.js.snap

@@ -23,7 +23,7 @@ exports[`ContactName rendering the defult props 1`] = `
         rel="noopener noreferrer"
       >
         <div
-          class="textStyle font_regular "
+          class="dotted size12 font_regular linkWithText "
         />
       </a>
     </div>

package/es/list/SecondaryText/__tests__/__snapshots__/DepartmentText.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DepartmentText rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="departmentText "
+    class="dotted size12 departmentText "
   />
 </DocumentFragment>
 `;

package/es/list/SecondaryText/__tests__/__snapshots__/Email.spec.js.snap

@@ -8,7 +8,7 @@ exports[`Email rendering the defult props 1`] = `
     rel="noopener noreferrer"
   >
     <div
-      class="textStyle font_regular "
+      class="dotted size12 font_regular linkWithText "
     />
   </a>
 </DocumentFragment>

package/es/list/SecondaryText/__tests__/__snapshots__/PhoneNumber.spec.js.snap

@@ -8,7 +8,7 @@ exports[`PhoneNumber rendering the defult props 1`] = `
     rel="noopener noreferrer"
   >
     <div
-      class="phoneNumber phonetxt font_regular "
+      class="dotted size12 font_regular phoneNumber phonetxt "
     />
   </a>
 </DocumentFragment>

package/es/list/SecondaryText/__tests__/__snapshots__/PriorityText.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`PriorityText rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="priorityText black "
+    class="dotted size12 priorityText black "
     data-id="priority"
     data-test-id="priority"
   />

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

@@ -3,7 +3,7 @@
 exports[`SecondaryText rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="secondaryText "
+    class="dotted size12 secondaryText "
   />
 </DocumentFragment>
 `;

package/es/list/SecondaryText/__tests__/__snapshots__/StatusText.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`StatusText rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="statusText black font_regular "
+    class="dotted font_regular black "
     data-id="statusContainer"
     data-test-id="statusContainer"
   />

package/es/list/SecondaryText/__tests__/__snapshots__/Website.spec.js.snap

@@ -3,10 +3,14 @@
 exports[`Website rendering the defult props 1`] = `
 <DocumentFragment>
   <a
-    class="link textStyle "
+    class="link link"
     href="javascript:void(0);"
     rel="noopener noreferrer"
     target="_blank"
-  />
+  >
+    <div
+      class="dotted size12 linkWithText "
+    />
+  </a>
 </DocumentFragment>
 `;

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

@@ -2,6 +2,8 @@ export const AccountName_defaultProps = {
   isLink: true,
   dataId: 'accountName',
   fontWeight: 'regular',
+  isHighlighted: false,
+  highlightData: {},
   customProps: {}
 };
 export const ContactName_defaultProps = {
@@ -10,35 +12,51 @@ export const ContactName_defaultProps = {
   dataId: 'contactName',
   fontWeight: 'regular',
   i18nKeys: {},
+  isHighlighted: false,
+  highlightData: {},
   customProps: {}
 };
 export const Email_defaultProps = {
   isLink: true,
   fontWeight: 'regular',
+  isHighlighted: false,
+  highlightData: {},
   customProps: {}
 };
 export const PhoneNumber_defaultProps = {
   isLink: true,
   hasReload: false,
   fontWeight: 'regular',
+  isHighlighted: false,
+  highlightData: {},
   customProps: {}
 };
 export const PriorityText_defaultProps = {
   color: 'black',
+  isHighlighted: false,
+  highlightData: {},
   dataId: 'priority'
 };
 export const SecondaryText_defaultProps = {
+  isHighlighted: false,
+  highlightData: {},
   customProps: {}
 };
 export const StatusText_defaultProps = {
   color: 'black',
   dataId: 'statusContainer',
+  isHighlighted: false,
+  highlightData: {},
   fontWeight: 'regular'
 };
 export const TicketId_defaultProps = {
   dataId: 'ticketId',
+  isHighlighted: false,
+  highlightData: {},
   customProps: {}
 };
 export const Website_defaultProps = {
+  isHighlighted: false,
+  highlightData: {},
   isLink: true
 };

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

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { propTypes as typographyProps } from '@zohodesk/components/es/Typography/props/propTypes';
 export const AccountName_propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -14,6 +15,8 @@ export const AccountName_propTypes = {
   secondaryAccountHref: PropTypes.string,
   secondaryAccountClick: PropTypes.func,
   secondaryAccountText: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object,
@@ -42,6 +45,8 @@ export const ContactName_propTypes = {
     }),
     paidTitle: PropTypes.string
   }),
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -51,6 +56,8 @@ export const DepartmentText_propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   text: PropTypes.string
 };
 export const Email_propTypes = {
@@ -63,6 +70,8 @@ export const Email_propTypes = {
   title: PropTypes.string,
   urlData: PropTypes.object,
   urlName: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -85,6 +94,8 @@ export const PhoneNumber_propTypes = {
   title: PropTypes.string,
   urlData: PropTypes.object,
   urlName: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -95,6 +106,8 @@ export const PriorityText_propTypes = {
   color: PropTypes.oneOf(['red', 'green', 'gray', 'orange']),
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   text: PropTypes.string
 };
 export const SecondaryText_propTypes = {
@@ -103,6 +116,8 @@ export const SecondaryText_propTypes = {
   dataTitle: PropTypes.string,
   onClick: PropTypes.func,
   text: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     SecondaryTextProps: PropTypes.object
   })
@@ -113,6 +128,8 @@ export const StatusText_propTypes = {
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
   fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   text: PropTypes.string
 };
 export const TicketId_propTypes = {
@@ -126,6 +143,8 @@ export const TicketId_propTypes = {
   url: PropTypes.string,
   urlData: PropTypes.string,
   urlName: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     TicketIdProps: PropTypes.object,
     LinkProps: PropTypes.object
@@ -138,5 +157,7 @@ export const Website_propTypes = {
   isLink: PropTypes.bool,
   target: PropTypes.string,
   text: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   title: PropTypes.string
 };

package/es/list/Subject/Subject.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import Typography from '@zohodesk/components/es/Typography/Typography';
+import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
 import Link from "../../Link/Link";
 import { whiteSpaceClassMapping } from '@zohodesk/components/es/utils/cssUtils';
 import style from "./Subject.module.css";
@@ -24,30 +26,44 @@ export default class Subject extends Component {
       isDotted,
       children,
       customProps,
-      whiteSpace
+      whiteSpace,
+      isHighlighted,
+      highlightData
     } = this.props;
     let {
       LinkProps = {},
       TextProps = {}
     } = customProps;
+    let tagAttributesText = { ...TextProps,
+      'data-title-wrap': whiteSpace
+    };
+    let linkTagAttributes = {
+      'data-title-wrap': whiteSpace
+    };
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
       urlName: urlName,
       href: href,
       urlData: urlData,
       onClick: onClick,
-      className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style[`font_${fontWeight}`]} ${style.cursorPointer}`,
-      dataId: dataId,
-      title: text,
       target: target,
-      "data-title-wrap": whiteSpace,
       ...LinkProps
-    }, children ? children : text) : /*#__PURE__*/React.createElement("span", {
-      className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style[`font_${fontWeight}`]}`,
-      "data-title": text,
-      "data-id": dataId,
-      "data-test-id": dataId,
-      "data-title-wrap": whiteSpace,
-      ...TextProps
+    }, children ? children : /*#__PURE__*/React.createElement(Typography, {
+      $tagAttributes_text: linkTagAttributes,
+      $i18n_dataTitle: text,
+      $ui_className: `${style.subject} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style.cursorPointer}`,
+      customId: dataId,
+      $flag_dotted: isDotted,
+      $ui_weight: fontWeight,
+      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
+    }, text)) : /*#__PURE__*/React.createElement(Typography, {
+      $tagAttributes_text: tagAttributesText,
+      $ui_className: `${style.subject} ${className} ${whiteSpaceClassMapping[whiteSpace]}`,
+      $flag_dotted: isDotted,
+      $ui_weight: fontWeight,
+      $i18n_dataTitle: text,
+      customId: dataId,
+      testId: dataId,
+      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
     }, text));
   }
 

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

@@ -2,8 +2,8 @@
 
 exports[`Subject rendering the defult props 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_pre  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -11,8 +11,8 @@ exports[`Subject rendering the defult props 1`] = `
 
 exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_breakSpaces  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_breakSpaces"
     data-title-wrap="break-spaces"
   />
 </DocumentFragment>
@@ -20,8 +20,8 @@ exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 
 exports[`Subject rendering the whiteSpace of -normal 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_normal  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_normal"
     data-title-wrap="normal"
   />
 </DocumentFragment>
@@ -29,8 +29,8 @@ exports[`Subject rendering the whiteSpace of -normal 1`] = `
 
 exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_nowrap  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_nowrap"
     data-title-wrap="nowrap"
   />
 </DocumentFragment>
@@ -38,8 +38,8 @@ exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_pre  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -47,8 +47,8 @@ exports[`Subject rendering the whiteSpace of -pre 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_preLine  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_preLine"
     data-title-wrap="pre-line"
   />
 </DocumentFragment>
@@ -56,8 +56,8 @@ exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre-wrap 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_preWrap  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_preWrap"
     data-title-wrap="pre-wrap"
   />
 </DocumentFragment>

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

@@ -4,5 +4,7 @@ export const defaultProps = {
   className: '',
   isDotted: true,
   customProps: {},
-  whiteSpace: 'pre'
+  whiteSpace: 'pre',
+  isHighlighted: false,
+  highlightData: {}
 };

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

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { propTypes as typographyProps } from '@zohodesk/components/es/Typography/props/propTypes';
 export const propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -16,5 +17,8 @@ export const propTypes = {
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
   }),
-  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
+  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces']),
+  // Highlight props
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig
 };

package/lib/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/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);
     }
   }]);