@zohodesk/dot 1.0.0-temp-216 → 1.0.0-temp-218

package/es/list/SecondaryText/AccountName.js

@@ -7,6 +7,7 @@ import { AccountName_propTypes } from "./props/propTypes";
 /**** Components ****/
 
 import { Container, Box } from '@zohodesk/components/es/Layout';
+import { highlight as highlightText } from '@zohodesk/components/es/Typography/highlight';
 import Link from "../../Link/Link";
 /**** CSS ****/
 
@@ -28,8 +29,17 @@ export default class AccountName extends Component {
       secondaryAccountHref,
       secondaryAccountClick,
       secondaryAccountText,
+      highlights,
+      enableHighlight,
       customProps
     } = this.props;
+    const {
+      highlightData = []
+    } = highlights || {};
+    const displayContent = enableHighlight && highlightData && highlightData.length > 0 && text ? highlightText({
+      text,
+      ...highlights
+    }) : text;
     let {
       LinkProps = {},
       TextProps = {},
@@ -62,10 +72,10 @@ export default class AccountName extends Component {
       ariaLabel: `Account Name ${text}`
     }, /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", {
+    }, displayContent)) : /*#__PURE__*/React.createElement("div", {
       className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
       ...TextProps
-    }, text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
+    }, displayContent)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
       href: secondaryAccountHref,
       onClick: secondaryAccountClick,
       className: style.link

package/es/list/SecondaryText/ContactName.js

@@ -2,6 +2,7 @@ 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 { highlight as highlightText } from '@zohodesk/components/es/Typography/highlight';
 import Link from "../../Link/Link";
 import SentimentStatus from "../SentimentStatus/SentimentStatus";
 import { Icon } from '@zohodesk/icons';
@@ -23,6 +24,8 @@ export default class ContactName extends Component {
       notAccessible = false,
       fontWeight,
       i18nKeys,
+      highlights,
+      enableHighlight,
       customProps
     } = this.props;
     let {
@@ -38,6 +41,13 @@ export default class ContactName extends Component {
       LinkProps = {},
       TextProps = {}
     } = customProps;
+    const {
+      highlightData = []
+    } = highlights || {};
+    const displayContent = enableHighlight && highlightData && highlightData.length > 0 && text ? highlightText({
+      text,
+      ...highlights
+    }) : text;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "baseline",
@@ -64,11 +74,11 @@ export default class ContactName extends Component {
       ariaLabel: `Contact Name ${text}`
     }, /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", {
+    }, displayContent)) : /*#__PURE__*/React.createElement("div", {
       className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
       "data-title": dataTitle,
       ...TextProps
-    }, text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
+    }, displayContent)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
       type: sentimentType,
       dataTitle: sentimentDataTitle
     })));

package/es/list/SecondaryText/DepartmentText.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { DepartmentText_propTypes } from "./props/propTypes";
+import { highlight as highlightText } from '@zohodesk/components/es/Typography/highlight';
 import style from "./SecondaryText.module.css";
 export default class DepartmentText extends Component {
   constructor(props) {
@@ -11,14 +12,23 @@ export default class DepartmentText extends Component {
       className,
       text,
       dataTitle,
-      dataId
+      dataId,
+      enableHighlight,
+      highlights
     } = this.props;
+    const {
+      highlightData = []
+    } = highlights || {};
+    const displayContent = enableHighlight && highlightData && highlightData.length > 0 && text ? highlightText({
+      text,
+      ...highlights
+    }) : text;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.departmentText} ${className ? className : ''}`,
       "data-title": dataTitle,
       "data-id": dataId,
       "data-test-id": dataId
-    }, text);
+    }, displayContent);
   }
 
 }

package/es/list/SecondaryText/Email.js

@@ -6,6 +6,7 @@ import { Email_defaultProps } from "./props/defaultProps";
 import { Email_propTypes } from "./props/propTypes";
 /**** Components ****/
 
+import { highlight as highlightText } from '@zohodesk/components/es/Typography/highlight';
 import Link from "../../Link/Link";
 /**** CSS ****/
 
@@ -22,12 +23,21 @@ export default class Email extends Component {
       isLink,
       target,
       fontWeight,
-      customProps
+      customProps,
+      enableHighlight,
+      highlights
     } = this.props;
     let {
       LinkProps = {},
       TextProps = {}
     } = customProps;
+    const {
+      highlightData = []
+    } = highlights || {};
+    const displayContent = enableHighlight && highlightData && highlightData.length > 0 && text ? highlightText({
+      text,
+      ...highlights
+    }) : text;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
       href: href,
       title: title,
@@ -38,11 +48,11 @@ export default class Email extends Component {
       ...LinkProps
     }, /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", {
+    }, displayContent)) : /*#__PURE__*/React.createElement("div", {
       className: `${style.secondaryText}  ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
       "data-title": title,
       ...TextProps
-    }, text));
+    }, displayContent));
   }
 
 }

package/es/list/SecondaryText/PhoneNumber.js

@@ -6,6 +6,7 @@ import { PhoneNumber_defaultProps } from "./props/defaultProps";
 import { PhoneNumber_propTypes } from "./props/propTypes";
 /**** Components ****/
 
+import { highlight as highlightText } from '@zohodesk/components/es/Typography/highlight';
 import Link from "../../Link/Link";
 /**** CSS ****/
 
@@ -24,12 +25,21 @@ export default class PhoneNumber extends Component {
       target,
       hasReload,
       fontWeight,
-      customProps
+      customProps,
+      enableHighlight,
+      highlights
     } = this.props;
     let {
       LinkProps = {},
       TextProps = {}
     } = customProps;
+    const {
+      highlightData = []
+    } = highlights || {};
+    const displayContent = enableHighlight && highlightData && highlightData.length > 0 && text ? highlightText({
+      text,
+      ...highlights
+    }) : text;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
       href: href,
       title: title,
@@ -42,11 +52,11 @@ export default class PhoneNumber extends Component {
       ...LinkProps
     }, /*#__PURE__*/React.createElement("div", {
       className: `${style.phoneNumber} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", {
+    }, displayContent)) : /*#__PURE__*/React.createElement("div", {
       className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
       "data-title": title,
       ...TextProps
-    }, text));
+    }, displayContent));
   }
 
 }

package/es/list/SecondaryText/PriorityText.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { PriorityText_defaultProps } from "./props/defaultProps";
 import { PriorityText_propTypes } from "./props/propTypes";
+import { highlight as highlightText } from '@zohodesk/components/es/Typography/highlight';
 import style from "./SecondaryText.module.css";
 export default class PriorityText extends Component {
   constructor(props) {
@@ -13,14 +14,23 @@ export default class PriorityText extends Component {
       color,
       text,
       dataTitle,
-      dataId
+      dataId,
+      enableHighlight,
+      highlights
     } = this.props;
+    const {
+      highlightData = []
+    } = highlights || {};
+    const displayContent = enableHighlight && highlightData && highlightData.length > 0 && text ? highlightText({
+      text,
+      ...highlights
+    }) : text;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.priorityText} ${style[color]} ${className ? className : ''}`,
       "data-title": dataTitle,
       "data-id": dataId,
       "data-test-id": dataId
-    }, text);
+    }, displayContent);
   }
 
 }

package/es/list/SecondaryText/SecondaryText.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { SecondaryText_defaultProps } from "./props/defaultProps";
 import { SecondaryText_propTypes } from "./props/propTypes";
+import { highlight as highlightText } from '@zohodesk/components/es/Typography/highlight';
 import style from "./SecondaryText.module.css";
 export default class SecondaryText extends Component {
   constructor(props) {
@@ -14,11 +15,20 @@ export default class SecondaryText extends Component {
       dataTitle,
       dataId,
       onClick,
-      customProps
+      customProps,
+      enableHighlight,
+      highlights
     } = this.props;
     let {
       SecondaryTextProps
     } = customProps;
+    const {
+      highlightData = []
+    } = highlights || {};
+    const displayContent = enableHighlight && highlightData && highlightData.length > 0 && text ? highlightText({
+      text,
+      ...highlights
+    }) : text;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.secondaryText} ${className ? className : ''}`,
       "data-title": dataTitle,
@@ -26,7 +36,7 @@ export default class SecondaryText extends Component {
       "data-test-id": dataId,
       onClick: onClick,
       ...SecondaryTextProps
-    }, text);
+    }, displayContent);
   }
 
 }

package/es/list/SecondaryText/StatusText.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { StatusText_defaultProps } from "./props/defaultProps";
 import { StatusText_propTypes } from "./props/propTypes";
+import { highlight as highlightText } from '@zohodesk/components/es/Typography/highlight';
 import style from "./SecondaryText.module.css";
 export default class StatusText extends Component {
   constructor(props) {
@@ -14,14 +15,23 @@ export default class StatusText extends Component {
       text,
       dataTitle,
       fontWeight,
-      dataId
+      dataId,
+      enableHighlight,
+      highlights
     } = this.props;
+    const {
+      highlightData = []
+    } = highlights || {};
+    const displayContent = enableHighlight && highlightData && highlightData.length > 0 && text ? highlightText({
+      text,
+      ...highlights
+    }) : text;
     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
-    }, text);
+    }, displayContent);
   }
 
 }

package/es/list/SecondaryText/TicketId.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { TicketId_defaultProps } from "./props/defaultProps";
 import { TicketId_propTypes } from "./props/propTypes";
 import Link from "../../Link/Link";
+import { highlight as highlightText } from '@zohodesk/components/es/Typography/highlight';
 import style from "./SecondaryText.module.css";
 export default class TicketId extends Component {
   constructor(props) {
@@ -20,12 +21,22 @@ export default class TicketId extends Component {
       target,
       urlName,
       urlData,
-      customProps
+      customProps,
+      enableHighlight,
+      highlights
     } = this.props;
     let {
       LinkProps = {},
       TicketIdProps = {}
     } = customProps;
+    const {
+      highlightData = []
+    } = highlights;
+    const processedText = enableHighlight && highlightData && highlightData.length > 0 && typeof text === 'string' ? highlightText({
+      text,
+      ...highlights
+    }) : text;
+    const textContent = Array.isArray(processedText) ? /*#__PURE__*/React.createElement(React.Fragment, null, processedText) : processedText;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${className ? className : ''}`,
       "data-id": dataId,
@@ -40,7 +51,7 @@ export default class TicketId extends Component {
       target: target,
       onClick: onClick,
       ...LinkProps
-    }, text) : text);
+    }, textContent) : textContent);
   }
 
 }

package/es/list/SecondaryText/Website.js

@@ -6,6 +6,7 @@ import { Website_defaultProps } from "./props/defaultProps";
 import { Website_propTypes } from "./props/propTypes";
 /**** Components ****/
 
+import { highlight as highlightText } from '@zohodesk/components/es/Typography/highlight';
 import ExternalLink from "../../ExternalLink/ExternalLink";
 /**** CSS ****/
 
@@ -19,18 +20,27 @@ export default class Website extends Component {
       href,
       dataId,
       isLink,
-      target
+      target,
+      enableHighlight,
+      highlights
     } = this.props;
+    const {
+      highlightData = []
+    } = highlights || {};
+    const displayContent = enableHighlight && highlightData && highlightData.length > 0 && text ? highlightText({
+      text,
+      ...highlights
+    }) : text;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(ExternalLink, {
       className: `${style.textStyle} ${className ? className : ''}`,
       href: href,
       title: title,
       dataId: dataId,
       target: target
-    }, text) : /*#__PURE__*/React.createElement("div", {
+    }, displayContent) : /*#__PURE__*/React.createElement("div", {
       className: `${style.secondaryText} ${className ? className : ''}`,
       "data-title": text
-    }, text));
+    }, displayContent));
   }
 
 }

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

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

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

@@ -14,6 +14,8 @@ export const AccountName_propTypes = {
   secondaryAccountHref: PropTypes.string,
   secondaryAccountClick: PropTypes.func,
   secondaryAccountText: PropTypes.string,
+  enableHighlight: PropTypes.bool,
+  highlights: PropTypes.object,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object,
@@ -42,6 +44,8 @@ export const ContactName_propTypes = {
     }),
     paidTitle: PropTypes.string
   }),
+  enableHighlight: PropTypes.bool,
+  highlights: PropTypes.object,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -51,6 +55,8 @@ export const DepartmentText_propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
+  enableHighlight: PropTypes.bool,
+  highlights: PropTypes.object,
   text: PropTypes.string
 };
 export const Email_propTypes = {
@@ -63,6 +69,8 @@ export const Email_propTypes = {
   title: PropTypes.string,
   urlData: PropTypes.object,
   urlName: PropTypes.string,
+  enableHighlight: PropTypes.bool,
+  highlights: PropTypes.object,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -85,6 +93,8 @@ export const PhoneNumber_propTypes = {
   title: PropTypes.string,
   urlData: PropTypes.object,
   urlName: PropTypes.string,
+  enableHighlight: PropTypes.bool,
+  highlights: PropTypes.object,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -95,6 +105,8 @@ export const PriorityText_propTypes = {
   color: PropTypes.oneOf(['red', 'green', 'gray', 'orange']),
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
+  enableHighlight: PropTypes.bool,
+  highlights: PropTypes.object,
   text: PropTypes.string
 };
 export const SecondaryText_propTypes = {
@@ -103,6 +115,8 @@ export const SecondaryText_propTypes = {
   dataTitle: PropTypes.string,
   onClick: PropTypes.func,
   text: PropTypes.string,
+  enableHighlight: PropTypes.bool,
+  highlights: PropTypes.object,
   customProps: PropTypes.shape({
     SecondaryTextProps: PropTypes.object
   })
@@ -113,6 +127,8 @@ export const StatusText_propTypes = {
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
   fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
+  enableHighlight: PropTypes.bool,
+  highlights: PropTypes.object,
   text: PropTypes.string
 };
 export const TicketId_propTypes = {
@@ -126,6 +142,8 @@ export const TicketId_propTypes = {
   url: PropTypes.string,
   urlData: PropTypes.string,
   urlName: PropTypes.string,
+  enableHighlight: PropTypes.bool,
+  highlights: PropTypes.object,
   customProps: PropTypes.shape({
     TicketIdProps: PropTypes.object,
     LinkProps: PropTypes.object
@@ -138,5 +156,7 @@ export const Website_propTypes = {
   isLink: PropTypes.bool,
   target: PropTypes.string,
   text: PropTypes.string,
+  enableHighlight: PropTypes.bool,
+  highlights: PropTypes.object,
   title: PropTypes.string
 };

package/es/list/Subject/Subject.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Link from "../../Link/Link";
 import { whiteSpaceClassMapping } from '@zohodesk/components/es/utils/cssUtils';
+import { highlight as highlightText } from '@zohodesk/components/es/Typography/highlight';
 import style from "./Subject.module.css";
 export default class Subject extends Component {
   constructor(props) {
@@ -24,12 +25,21 @@ export default class Subject extends Component {
       isDotted,
       children,
       customProps,
-      whiteSpace
+      whiteSpace,
+      enableHighlight,
+      highlights
     } = this.props;
     let {
       LinkProps = {},
       TextProps = {}
     } = customProps;
+    const {
+      highlightData = []
+    } = highlights || {};
+    const displayContent = enableHighlight && highlightData && highlightData.length > 0 && text ? highlightText({
+      text,
+      ...highlights
+    }) : children ? children : text;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
       urlName: urlName,
       href: href,
@@ -41,14 +51,14 @@ export default class Subject extends Component {
       target: target,
       "data-title-wrap": whiteSpace,
       ...LinkProps
-    }, children ? children : text) : /*#__PURE__*/React.createElement("span", {
+    }, displayContent) : /*#__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
-    }, text));
+    }, displayContent));
   }
 
 }

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

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

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

@@ -1,4 +1,20 @@
 import PropTypes from 'prop-types';
+const highlightsStyleShape = PropTypes.shape({
+  weight: PropTypes.oneOf(['regular', 'light', 'semibold', 'bold']),
+  transform: PropTypes.oneOf(['default', 'upper', 'lower', 'capital']),
+  decoration: PropTypes.oneOf(['default', 'underline', 'strike', 'overline']),
+  typeFace: PropTypes.oneOf(['normal', 'italic']),
+  customClass: PropTypes.object
+});
+const commonHighlightProps = {
+  customStyle: PropTypes.object,
+  isExcludedIndex: PropTypes.bool,
+  isCaseSensitive: PropTypes.bool,
+  isWholeWord: PropTypes.bool,
+  tagName: PropTypes.string,
+  render: PropTypes.element,
+  highlightsStyle: PropTypes.objectOf(highlightsStyleShape)
+};
 export const propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -16,5 +32,16 @@ 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
+  enableHighlight: PropTypes.bool,
+  highlights: PropTypes.objectOf(PropTypes.shape({
+    text: PropTypes.string,
+    highlightData: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
+      highlightText: PropTypes.string,
+      index: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+      ...commonHighlightProps
+    })])),
+    ...commonHighlightProps
+  }))
 };