@zohodesk/dot 1.9.1 → 1.9.2

package/README.md

@@ -2,6 +2,11 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 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**

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/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/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

package/es/list/SecondaryText/DepartmentText.js

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

package/es/list/SecondaryText/Email.js

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

package/es/list/SecondaryText/PhoneNumber.js

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

package/es/list/SecondaryText/PriorityText.js

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

package/es/list/SecondaryText/SecondaryText.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { SecondaryText_defaultProps } from "./props/defaultProps";
 import { SecondaryText_propTypes } from "./props/propTypes";
+import Typography from '@zohodesk/components/es/Typography/Typography';
+import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
 import style from "./SecondaryText.module.css";
 export default class SecondaryText extends Component {
   constructor(props) {
@@ -14,18 +16,25 @@ export default class SecondaryText extends Component {
       dataTitle,
       dataId,
       onClick,
-      customProps
+      customProps,
+      isHighlighted,
+      highlightData
     } = this.props;
     let {
       SecondaryTextProps
     } = customProps;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.secondaryText} ${className ? className : ''}`,
-      "data-title": dataTitle,
-      "data-id": dataId,
-      "data-test-id": dataId,
-      onClick: onClick,
-      ...SecondaryTextProps
+    const tagAttributes = { ...SecondaryTextProps,
+      onClick
+    };
+    return /*#__PURE__*/React.createElement(Typography, {
+      $tagAttributes_text: tagAttributes,
+      $ui_size: "12",
+      $flag_dotted: true,
+      $ui_className: `${style.secondaryText} ${className ? className : ''}`,
+      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT,
+      $i18n_dataTitle: dataTitle,
+      customId: dataId,
+      testId: dataId
     }, text);
   }
 

package/es/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/es/list/SecondaryText/StatusText.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { StatusText_defaultProps } from "./props/defaultProps";
 import { StatusText_propTypes } from "./props/propTypes";
+import Typography from '@zohodesk/components/es/Typography/Typography';
+import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
 import style from "./SecondaryText.module.css";
 export default class StatusText extends Component {
   constructor(props) {
@@ -14,13 +16,18 @@ export default class StatusText extends Component {
       text,
       dataTitle,
       fontWeight,
-      dataId
+      dataId,
+      isHighlighted,
+      highlightData
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.statusText} ${style[color]} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
-      "data-title": dataTitle,
-      "data-id": dataId,
-      "data-test-id": dataId
+    return /*#__PURE__*/React.createElement(Typography, {
+      $ui_className: `${style[color]} ${className ? className : ''}`,
+      $ui_weight: fontWeight,
+      $flag_dotted: true,
+      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT,
+      $i18n_dataTitle: dataTitle,
+      customId: dataId,
+      testId: dataId
     }, text);
   }
 

package/es/list/SecondaryText/TicketId.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { TicketId_defaultProps } from "./props/defaultProps";
 import { TicketId_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 style from "./SecondaryText.module.css";
 export default class TicketId extends Component {
@@ -20,7 +22,9 @@ export default class TicketId extends Component {
       target,
       urlName,
       urlData,
-      customProps
+      customProps,
+      isHighlighted,
+      highlightData
     } = this.props;
     let {
       LinkProps = {},
@@ -40,7 +44,9 @@ export default class TicketId extends Component {
       target: target,
       onClick: onClick,
       ...LinkProps
-    }, text) : text);
+    }, /*#__PURE__*/React.createElement(Typography, {
+      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
+    }, text)) : text);
   }
 
 }

package/es/list/SecondaryText/Website.js

@@ -6,6 +6,8 @@ import { Website_defaultProps } from "./props/defaultProps";
 import { Website_propTypes } from "./props/propTypes";
 /**** Components ****/
 
+import Typography from '@zohodesk/components/es/Typography/Typography';
+import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
 import ExternalLink from "../../ExternalLink/ExternalLink";
 /**** CSS ****/
 
@@ -19,17 +21,26 @@ export default class Website extends Component {
       href,
       dataId,
       isLink,
-      target
+      target,
+      isHighlighted,
+      highlightData
     } = this.props;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(ExternalLink, {
-      className: `${style.textStyle} ${className ? className : ''}`,
+      className: style.link,
       href: href,
       title: title,
       dataId: dataId,
       target: target
-    }, text) : /*#__PURE__*/React.createElement("div", {
-      className: `${style.secondaryText} ${className ? className : ''}`,
-      "data-title": text
+    }, /*#__PURE__*/React.createElement(Typography, {
+      $flag_dotted: true,
+      $ui_size: "12",
+      $ui_className: `${style.linkWithText} ${className ? className : ''}`,
+      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
+    }, text)) : /*#__PURE__*/React.createElement(Typography, {
+      $ui_size: "12",
+      $flag_dotted: true,
+      $ui_className: `${style.secondaryText} ${className ? className : ''}`,
+      $i18n_dataTitle: text
     }, text));
   }