@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.2

package/es/list/ListStencils/ListStencils.js

@@ -7,6 +7,7 @@ import { propTypes } from "./props/propTypes";
 import Stencils from '@zohodesk/components/es/Stencils/Stencils';
 /*** CSS ***/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./ListStencils.module.css";
 export default class ListStencils extends Component {
   render() {
@@ -16,27 +17,27 @@ export default class ListStencils extends Component {
       customId
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[listType]}`,
+      className: cn(`${style.container} ${style[listType]}`),
       "data-test-id": testId ? testId + '_listStencils' : null,
       "data-id": customId ? customId + '_listStencils' : null,
       "aria-hidden": "true"
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.innerContainer
+      className: cn(style.innerContainer)
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.avatar
+      className: cn(style.avatar)
     }, /*#__PURE__*/React.createElement(Stencils, {
       shape: "circle",
       size: listType === 'classic' ? 'large' : listType === 'compact' ? 'medium' : 'small'
     })), /*#__PURE__*/React.createElement("div", {
-      className: style.detailsColumn
+      className: cn(style.detailsColumn)
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.detailsInnerColumn}`
+      className: cn(`${style.detailsInnerColumn}`)
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.primaryRow
+      className: cn(style.primaryRow)
     }, /*#__PURE__*/React.createElement(Stencils, {
       size: "default"
     })), /*#__PURE__*/React.createElement("div", {
-      className: style.secondaryRow
+      className: cn(style.secondaryRow)
     }, /*#__PURE__*/React.createElement(Stencils, {
       size: "medium"
     }))))));

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

@@ -15,7 +15,7 @@ exports[`ListStencils customId and testId 1`] = `
         class="avatar"
       >
         <div
-          class="container animate circle size_large primary "
+          class="container animate circle size_large primary"
         />
       </div>
       <div
@@ -28,14 +28,14 @@ exports[`ListStencils customId and testId 1`] = `
             class="primaryRow"
           >
             <div
-              class="container animate rect default primary "
+              class="container animate rect default primary"
             />
           </div>
           <div
             class="secondaryRow"
           >
             <div
-              class="container animate rect medium primary "
+              class="container animate rect medium primary"
             />
           </div>
         </div>
@@ -58,7 +58,7 @@ exports[`ListStencils rendering the defult props 1`] = `
         class="avatar"
       >
         <div
-          class="container animate circle size_large primary "
+          class="container animate circle size_large primary"
         />
       </div>
       <div
@@ -71,14 +71,14 @@ exports[`ListStencils rendering the defult props 1`] = `
             class="primaryRow"
           >
             <div
-              class="container animate rect default primary "
+              class="container animate rect default primary"
             />
           </div>
           <div
             class="secondaryRow"
           >
             <div
-              class="container animate rect medium primary "
+              class="container animate rect medium primary"
             />
           </div>
         </div>

package/es/list/SecondaryText/AccountName.js

@@ -77,7 +77,7 @@ export default class AccountName extends Component {
       $tagAttributes_text: TextProps,
       $ui_size: "12",
       $flag_dotted: true,
-      $ui_className: `${style.secondaryText} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
+      $ui_className: `${style.secondaryText}  ${notAccessible ? style.disable : ''} ${className ? className : ''}`,
       $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
     }, text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
       href: secondaryAccountHref,

package/es/list/SecondaryText/ContactName.js

@@ -78,7 +78,7 @@ export default class ContactName extends Component {
       $tagAttributes_text: TextProps,
       $ui_size: "12",
       $flag_dotted: true,
-      $ui_className: `${style.secondaryText} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
+      $ui_className: `${style.secondaryText}  ${notAccessible ? style.disable : ''} ${className ? className : ''}`,
       $ui_weight: fontWeight,
       $i18n_dataTitle: dataTitle,
       $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT

package/es/list/SecondaryText/HappinessRating.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { HappinessRating_propTypes } from "./props/propTypes";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./SecondaryText.module.css";
 export default class HappinessRating extends Component {
   render() {
@@ -12,12 +13,12 @@ export default class HappinessRating extends Component {
       src
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.happinessContainer} ${className ? className : ''}`
+      className: cn(`${style.happinessContainer} ${className ? className : ''}`)
     }, /*#__PURE__*/React.createElement("img", {
-      className: `${style.happinessImg}`,
+      className: cn(`${style.happinessImg}`),
       src: src
     }), /*#__PURE__*/React.createElement("span", {
-      className: style.ratingText,
+      className: cn(style.ratingText),
       "data-title": text
     }, `${text}%`));
   }

package/es/list/SecondaryText/TicketId.js

@@ -6,6 +6,7 @@ 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 { cn } from "@dot-system/css-utility";
 import style from "./SecondaryText.module.css";
 export default class TicketId extends Component {
   constructor(props) {
@@ -33,7 +34,7 @@ export default class TicketId extends Component {
       TicketIdProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${className ? className : ''}`,
+      className: cn(`${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${className ? className : ''}`),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,

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

@@ -3,39 +3,39 @@
 exports[`AccountName rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex rowdir baseline"
+    class="flex row alignItems_baseline"
     data-id="accountName"
     data-selector-id="container"
     data-test-id="accountName"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="primaryAccountNameCnt flex rowdir baseline"
+        class="flex row alignItems_baseline primaryAccountNameCnt"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrinkOn"
+          class="shrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <a
             aria-label="Account Name undefined"
-            class="container  link"
+            class="container link"
             data-id="accountName_link"
             data-test-id="accountName_link"
             href="javascript:void(0);"
             rel="noopener noreferrer"
           >
             <div
-              class="dotted size12 font_regular linkWithText "
+              class="dotted size12 font_regular linkWithText"
             />
           </a>
         </div>

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

@@ -3,27 +3,27 @@
 exports[`ContactName rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex rowdir baseline"
+    class="flex row alignItems_baseline"
     data-id="contactName"
     data-selector-id="container"
     data-test-id="contactName"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <a
         aria-label="Contact Name undefined"
-        class="container  link"
+        class="container link"
         data-id="contactName_link"
         data-test-id="contactName_link"
         href="javascript:void(0);"
         rel="noopener noreferrer"
       >
         <div
-          class="dotted size12 font_regular linkWithText "
+          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="dotted size12 departmentText "
+    class="dotted size12 departmentText"
   />
 </DocumentFragment>
 `;

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

@@ -3,12 +3,12 @@
 exports[`Email rendering the defult props 1`] = `
 <DocumentFragment>
   <a
-    class="container  link"
+    class="container link"
     href="javascript:void(0);"
     rel="noopener noreferrer"
   >
     <div
-      class="dotted size12 font_regular linkWithText "
+      class="dotted size12 font_regular linkWithText"
     />
   </a>
 </DocumentFragment>

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

@@ -3,7 +3,7 @@
 exports[`HappinessRating rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="happinessContainer "
+    class="happinessContainer"
   >
     <img
       class="happinessImg"

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

@@ -3,12 +3,12 @@
 exports[`PhoneNumber rendering the defult props 1`] = `
 <DocumentFragment>
   <a
-    class="container  link"
+    class="container link"
     href="javascript:void(0);"
     rel="noopener noreferrer"
   >
     <div
-      class="dotted size12 font_regular phoneNumber phonetxt "
+      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="dotted size12 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="dotted size12 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="dotted font_regular black "
+    class="dotted font_regular black"
     data-id="statusContainer"
     data-test-id="statusContainer"
   />

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

@@ -3,7 +3,7 @@
 exports[`TicketId rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="ticketId  "
+    class="ticketId"
     data-id="ticketId"
     data-test-id="ticketId"
   />

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

@@ -9,7 +9,7 @@ exports[`Website rendering the defult props 1`] = `
     target="_blank"
   >
     <div
-      class="dotted size12 linkWithText "
+      class="dotted size12 linkWithText"
     />
   </a>
 </DocumentFragment>

package/es/list/SecondryPanel/SecondryPanel.js

@@ -9,6 +9,7 @@ import Dot from "../Dot/Dot";
 import Container from '@zohodesk/components/es/Layout/Container';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./SecondryPanel.module.css";
 export default class SecondryPanel extends Component {
   render() {
@@ -17,7 +18,7 @@ export default class SecondryPanel extends Component {
       className
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: className
+      className: cn(className)
     }, children);
   }
 

package/es/list/SentimentStatus/SentimentStatus.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./SentimentStatus.module.css";
 import { Icon } from '@zohodesk/icons';
 export default class SentimentStatus extends React.Component {
@@ -18,7 +19,7 @@ export default class SentimentStatus extends React.Component {
       positive: 'ZD-botPositive'
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: style.container,
+      className: cn(style.container),
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: icons[type],

package/es/list/Subject/Subject.js

@@ -52,13 +52,13 @@ export default class Subject extends Component {
     }, LinkProps), children ? children : /*#__PURE__*/React.createElement(Typography, {
       $tagAttributes_text: linkTagAttributes,
       $i18n_dataTitle: text,
-      $ui_className: `${style.subject} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style.cursorPointer}`,
+      $ui_className: `${style.subject} ${whiteSpaceClassMapping[whiteSpace]} ${style.cursorPointer} ${className}`,
       $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]}`,
+      $ui_className: `${style.subject} ${whiteSpaceClassMapping[whiteSpace]} ${className}`,
       $flag_dotted: isDotted,
       $ui_weight: fontWeight,
       $i18n_dataTitle: text,

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

@@ -3,7 +3,7 @@
 exports[`Subject applies fontWeight prop 1`] = `
 <DocumentFragment>
   <div
-    class="dotted font_bold subject  whiteSpace_pre"
+    class="dotted font_bold subject whiteSpace_pre"
     data-title="Test"
     data-title-wrap="pre"
   >
@@ -15,7 +15,7 @@ exports[`Subject applies fontWeight prop 1`] = `
 exports[`Subject rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="dotted font_regular subject  whiteSpace_pre"
+    class="dotted font_regular subject whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -24,7 +24,7 @@ exports[`Subject rendering the defult props 1`] = `
 exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 <DocumentFragment>
   <div
-    class="dotted font_regular subject  whiteSpace_breakSpaces"
+    class="dotted font_regular subject whiteSpace_breakSpaces"
     data-title-wrap="break-spaces"
   />
 </DocumentFragment>
@@ -33,12 +33,12 @@ exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 exports[`Subject rendering the whiteSpace of -break-spaces 2`] = `
 <DocumentFragment>
   <a
-    class="container  "
+    class="container"
     href="javascript:void(0);"
     rel="noopener noreferrer"
   >
     <div
-      class="dotted font_regular subject whiteSpace_breakSpaces  cursorPointer"
+      class="dotted font_regular subject whiteSpace_breakSpaces cursorPointer"
       data-title-wrap="break-spaces"
     />
   </a>
@@ -48,7 +48,7 @@ exports[`Subject rendering the whiteSpace of -break-spaces 2`] = `
 exports[`Subject rendering the whiteSpace of -normal 1`] = `
 <DocumentFragment>
   <div
-    class="dotted font_regular subject  whiteSpace_normal"
+    class="dotted font_regular subject whiteSpace_normal"
     data-title-wrap="normal"
   />
 </DocumentFragment>
@@ -57,12 +57,12 @@ exports[`Subject rendering the whiteSpace of -normal 1`] = `
 exports[`Subject rendering the whiteSpace of -normal 2`] = `
 <DocumentFragment>
   <a
-    class="container  "
+    class="container"
     href="javascript:void(0);"
     rel="noopener noreferrer"
   >
     <div
-      class="dotted font_regular subject whiteSpace_normal  cursorPointer"
+      class="dotted font_regular subject whiteSpace_normal cursorPointer"
       data-title-wrap="normal"
     />
   </a>
@@ -72,7 +72,7 @@ exports[`Subject rendering the whiteSpace of -normal 2`] = `
 exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 <DocumentFragment>
   <div
-    class="dotted font_regular subject  whiteSpace_nowrap"
+    class="dotted font_regular subject whiteSpace_nowrap"
     data-title-wrap="nowrap"
   />
 </DocumentFragment>
@@ -81,12 +81,12 @@ exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 exports[`Subject rendering the whiteSpace of -nowrap 2`] = `
 <DocumentFragment>
   <a
-    class="container  "
+    class="container"
     href="javascript:void(0);"
     rel="noopener noreferrer"
   >
     <div
-      class="dotted font_regular subject whiteSpace_nowrap  cursorPointer"
+      class="dotted font_regular subject whiteSpace_nowrap cursorPointer"
       data-title-wrap="nowrap"
     />
   </a>
@@ -96,7 +96,7 @@ exports[`Subject rendering the whiteSpace of -nowrap 2`] = `
 exports[`Subject rendering the whiteSpace of -pre 1`] = `
 <DocumentFragment>
   <div
-    class="dotted font_regular subject  whiteSpace_pre"
+    class="dotted font_regular subject whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -105,12 +105,12 @@ exports[`Subject rendering the whiteSpace of -pre 1`] = `
 exports[`Subject rendering the whiteSpace of -pre 2`] = `
 <DocumentFragment>
   <a
-    class="container  "
+    class="container"
     href="javascript:void(0);"
     rel="noopener noreferrer"
   >
     <div
-      class="dotted font_regular subject whiteSpace_pre  cursorPointer"
+      class="dotted font_regular subject whiteSpace_pre cursorPointer"
       data-title-wrap="pre"
     />
   </a>
@@ -120,7 +120,7 @@ exports[`Subject rendering the whiteSpace of -pre 2`] = `
 exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 <DocumentFragment>
   <div
-    class="dotted font_regular subject  whiteSpace_preLine"
+    class="dotted font_regular subject whiteSpace_preLine"
     data-title-wrap="pre-line"
   />
 </DocumentFragment>
@@ -129,12 +129,12 @@ exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 exports[`Subject rendering the whiteSpace of -pre-line 2`] = `
 <DocumentFragment>
   <a
-    class="container  "
+    class="container"
     href="javascript:void(0);"
     rel="noopener noreferrer"
   >
     <div
-      class="dotted font_regular subject whiteSpace_preLine  cursorPointer"
+      class="dotted font_regular subject whiteSpace_preLine cursorPointer"
       data-title-wrap="pre-line"
     />
   </a>
@@ -144,7 +144,7 @@ exports[`Subject rendering the whiteSpace of -pre-line 2`] = `
 exports[`Subject rendering the whiteSpace of -pre-wrap 1`] = `
 <DocumentFragment>
   <div
-    class="dotted font_regular subject  whiteSpace_preWrap"
+    class="dotted font_regular subject whiteSpace_preWrap"
     data-title-wrap="pre-wrap"
   />
 </DocumentFragment>
@@ -153,12 +153,12 @@ exports[`Subject rendering the whiteSpace of -pre-wrap 1`] = `
 exports[`Subject rendering the whiteSpace of -pre-wrap 2`] = `
 <DocumentFragment>
   <a
-    class="container  "
+    class="container"
     href="javascript:void(0);"
     rel="noopener noreferrer"
   >
     <div
-      class="dotted font_regular subject whiteSpace_preWrap  cursorPointer"
+      class="dotted font_regular subject whiteSpace_preWrap cursorPointer"
       data-title-wrap="pre-wrap"
     />
   </a>
@@ -168,14 +168,14 @@ exports[`Subject rendering the whiteSpace of -pre-wrap 2`] = `
 exports[`Subject renders data attributes on link wrapper 1`] = `
 <div>
   <a
-    class="container  "
+    class="container"
     data-id="subject-id"
     data-test-id="subject-id"
     href="javascript:void(0);"
     rel="noopener noreferrer"
   >
     <div
-      class="dotted font_regular subject whiteSpace_pre  cursorPointer"
+      class="dotted font_regular subject whiteSpace_pre cursorPointer"
       data-title-wrap="pre"
     />
   </a>
@@ -185,7 +185,7 @@ exports[`Subject renders data attributes on link wrapper 1`] = `
 exports[`Subject renders dotted text when isDotted is true 1`] = `
 <DocumentFragment>
   <div
-    class="dotted font_regular subject  whiteSpace_pre"
+    class="dotted font_regular subject whiteSpace_pre"
     data-title="Test"
     data-title-wrap="pre"
   >

package/es/list/TagNew/TagNew.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./TagNew.module.css";
 export default class TagNew extends Component {
   constructor(props) {
@@ -16,7 +17,7 @@ export default class TagNew extends Component {
       dataId
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.tagStyle} ${animate ? style.bounceIn : ''} ${className ? className : ''}`,
+      className: cn(`${style.tagStyle} ${animate ? style.bounceIn : ''} ${className ? className : ''}`),
       onClick: onClick,
       "data-id": dataId,
       "data-test-id": dataId

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

@@ -3,7 +3,7 @@
 exports[`TagNew rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="tagStyle  "
+    class="tagStyle"
     data-id="TagNew"
     data-test-id="TagNew"
   />

package/es/list/Thread/Thread.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import Button from '@zohodesk/components/es/semantic/Button/Button';
+import { cn } from "@dot-system/css-utility";
 import style from "./Thread.module.css";
 export default class Thread extends Component {
   constructor(props) {
@@ -28,7 +29,7 @@ export default class Thread extends Component {
       name: "ZD-TK-thread",
       size: "9"
     }), /*#__PURE__*/React.createElement("span", {
-      className: style.count
+      className: cn(style.count)
     }, count));
   }
 

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

@@ -3,7 +3,7 @@
 exports[`Thread rendering the defult props 1`] = `
 <DocumentFragment>
   <button
-    class="buttonReset container align_left "
+    class="buttonReset container align_left"
     data-id="semanticButton"
     data-test-id="semanticButton"
     type="button"
@@ -11,7 +11,7 @@ exports[`Thread rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-thread    rtl "
+      class="zd_font_icons rtl basic icon-thread"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"