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

package/es/list/SecondaryText/PriorityText.js

@@ -1,8 +1,6 @@
 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) {
@@ -15,18 +13,13 @@ export default class PriorityText extends Component {
       color,
       text,
       dataTitle,
-      dataId,
-      isHighlighted,
-      highlightData
+      dataId
     } = this.props;
-    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
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.priorityText} ${style[color]} ${className ? className : ''}`,
+      "data-title": dataTitle,
+      "data-id": dataId,
+      "data-test-id": dataId
     }, text);
   }
 

package/es/list/SecondaryText/SecondaryText.js

@@ -1,8 +1,6 @@
 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) {
@@ -16,25 +14,18 @@ export default class SecondaryText extends Component {
       dataTitle,
       dataId,
       onClick,
-      customProps,
-      isHighlighted,
-      highlightData
+      customProps
     } = this.props;
     let {
       SecondaryTextProps
     } = customProps;
-    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
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.secondaryText} ${className ? className : ''}`,
+      "data-title": dataTitle,
+      "data-id": dataId,
+      "data-test-id": dataId,
+      onClick: onClick,
+      ...SecondaryTextProps
     }, text);
   }
 

package/es/list/SecondaryText/SecondaryText.module.css

@@ -8,120 +8,109 @@
 }[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);
 }
-
-.link {
+.textStyle, .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) ;
 }
-
-.linkWithText {
-  color: var(--zdt_secondaryText_secondaryText_text);
-  max-width: 100% ;
-  cursor: pointer;
-}
-
-.linkWithText:hover {
-  color: var(--zdt_secondaryText_blue_text);
-}
-
+.textStyle,
 .secondaryText,
 .phoneNumber {
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
   max-width: 100% ;
+  display: block;
 }
-
-.secondaryText, .phoneNumber {
+.textStyle, .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) ;
 }
@@ -130,23 +119,18 @@
 .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,8 +1,6 @@
 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) {
@@ -16,18 +14,13 @@ export default class StatusText extends Component {
       text,
       dataTitle,
       fontWeight,
-      dataId,
-      isHighlighted,
-      highlightData
+      dataId
     } = this.props;
-    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
+    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);
   }
 

package/es/list/SecondaryText/TicketId.js

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

package/es/list/SecondaryText/Website.js

@@ -6,8 +6,6 @@ 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 ****/
 
@@ -21,26 +19,17 @@ export default class Website extends Component {
       href,
       dataId,
       isLink,
-      target,
-      isHighlighted,
-      highlightData
+      target
     } = this.props;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(ExternalLink, {
-      className: style.link,
+      className: `${style.textStyle} ${className ? className : ''}`,
       href: href,
       title: title,
       dataId: dataId,
       target: target
-    }, /*#__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) : /*#__PURE__*/React.createElement("div", {
+      className: `${style.secondaryText} ${className ? className : ''}`,
+      "data-title": text
     }, text));
   }
 

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="dotted size12 font_regular linkWithText "
+              class="textStyle font_regular "
             />
           </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="dotted size12 font_regular linkWithText "
+          class="textStyle font_regular "
         />
       </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="dotted size12 departmentText "
+    class="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="dotted size12 font_regular linkWithText "
+      class="textStyle font_regular "
     />
   </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="dotted size12 font_regular phoneNumber phonetxt "
+      class="phoneNumber phonetxt font_regular "
     />
   </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="dotted size12 priorityText black "
+    class="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="dotted size12 secondaryText "
+    class="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="dotted font_regular black "
+    class="statusText black font_regular "
     data-id="statusContainer"
     data-test-id="statusContainer"
   />

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

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

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

@@ -2,8 +2,6 @@ export const AccountName_defaultProps = {
   isLink: true,
   dataId: 'accountName',
   fontWeight: 'regular',
-  isHighlighted: false,
-  highlightData: {},
   customProps: {}
 };
 export const ContactName_defaultProps = {
@@ -12,51 +10,35 @@ 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,5 +1,4 @@
 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,
@@ -15,8 +14,6 @@ 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,
@@ -45,8 +42,6 @@ export const ContactName_propTypes = {
     }),
     paidTitle: PropTypes.string
   }),
-  isHighlighted: PropTypes.bool,
-  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -56,8 +51,6 @@ 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 = {
@@ -70,8 +63,6 @@ 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
@@ -94,8 +85,6 @@ 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
@@ -106,8 +95,6 @@ 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 = {
@@ -116,8 +103,6 @@ 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
   })
@@ -128,8 +113,6 @@ 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 = {
@@ -143,8 +126,6 @@ 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
@@ -157,7 +138,5 @@ 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,8 +1,6 @@
 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";
@@ -26,44 +24,30 @@ export default class Subject extends Component {
       isDotted,
       children,
       customProps,
-      whiteSpace,
-      isHighlighted,
-      highlightData
+      whiteSpace
     } = 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 : /*#__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
+    }, 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
     }, text));
   }