@zohodesk/icons 1.3.10 → 1.3.12

package/cbt.config.js

@@ -51,7 +51,7 @@ exports.config = {
               "zdfonts-react-customers": "zdf-react-customers_1",
               "zdfonts-react-customize": "zdf-react-customize_2",
               "zdfonts-react-gamescope": "zdf-react-gamescope_1",
-              "zdfonts-react-gcFonts": "zdf-react-gcFonts_21",
+              "zdfonts-react-gcFonts": "zdf-react-gcFonts_22",
               "zdfonts-react-gettingstarted": "zdf-react-gettingstarted_1",
               "zdfonts-react-integrations": "zdf-react-integrations_1",
               "zdfonts-react-kb": "zdf-react-kb_1",
@@ -65,7 +65,7 @@ exports.config = {
               "zdfonts-react-tickets": "zdf-react-tickets_4",
               "zdfonts-react-topband": "zdf-react-topband_2",
               "zdfonts-rExportFiles": "zdf-rExportFiles_2",
-              "zdfonts-rGeneral": "zdf-rGeneral_42",
+              "zdfonts-rGeneral": "zdf-rGeneral_43",
               "zdfonts-rIntegrations": "zdf-rIntegrations_5",
               "zdfonts-rLhs": "zdf-rLhs_1",
               "zdfonts-rMarketplace": "zdf-rMarketplace_5",
@@ -80,7 +80,7 @@ exports.config = {
               "zdfonts-rAutomation": "zdf-rAutomation_5",
               "zdfonts-rDeveloperSpace": "zdf-rDeveloperSpace_1",
               "zdfonts-rAnalyticsColor": "zdf-rAnalyticsColor_4",
-              "zdfonts-rIM": "zdf-rIM_2"
+              "zdfonts-rIM": "zdf-rIM_3"
             }
           }
         ]

package/es/Context/__tests__/__snapshots__/IconContext.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`IconProvider / IconContext -  default context - renders font icon (no provider) 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic icon-close2   "
+    class="zd_font_icons basic icon-close2"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -16,7 +16,7 @@ exports[`IconProvider / IconContext -  multiple icons share the same provider co
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -27,7 +27,7 @@ exports[`IconProvider / IconContext -  multiple icons share the same provider co
   </svg>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -43,7 +43,7 @@ exports[`IconProvider / IconContext -  type "fontIcon" - renders font icon 1`] =
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic icon-close2   "
+    class="zd_font_icons basic icon-close2"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -55,7 +55,7 @@ exports[`IconProvider / IconContext -  type "svgIcon" - passes "a11y" ariaHidden
 <DocumentFragment>
   <svg
     aria-hidden="false"
-    class="svgIcon   "
+    class="svgIcon"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -71,7 +71,7 @@ exports[`IconProvider / IconContext -  type "svgIcon" - passes "iconClass" prop
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   custom-class"
+    class="svgIcon custom-class"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -87,7 +87,7 @@ exports[`IconProvider / IconContext -  type "svgIcon" - passes "size" prop to sv
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -104,7 +104,7 @@ exports[`IconProvider / IconContext -  type "svgIcon" - passes "title" prop to s
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -121,7 +121,7 @@ exports[`IconProvider / IconContext -  type "svgIcon" - renders svg symbol 1`] =
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -137,7 +137,7 @@ exports[`IconProvider / IconContext -  type "svgIcon" with "svgIconClass" 1`] =
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon  app-svg-icon "
+    class="svgIcon app-svg-icon"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -153,7 +153,7 @@ exports[`IconProvider / IconContext -  type "svgIcon" with custom "svgIconPrefix
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"

package/es/Icon/FontFactory.js

@@ -1612,7 +1612,8 @@ export const FontFactory = {
     'ZD-GN-process': 'icon-process',
     'ZD-GN-mailDefault': 'icon-mailDefault',
     'ZD-GN-featureHome': ['icon-featureHome', 2],
-    'ZD-GN-manualTranslation': 'icon-manualTranslation'
+    'ZD-GN-manualTranslation': 'icon-manualTranslation',
+    'ZD-GN-tour': 'icon-tour'
   },
   ReactIntegrationsFontIcon: {
     'ZD-IG-intAnalytics': 'icon-intAnalytics',
@@ -2179,7 +2180,8 @@ export const FontFactory = {
     'GC-OrganisationFilled': 'icon-OrganisationFilled',
     'GC-Pending-Filled': 'icon-Pending-Filled',
     'GC-Stars': 'icon-Stars',
-    'GC-zohoCheckout': ['icon-zohoCheckout', 5]
+    'GC-zohoCheckout': ['icon-zohoCheckout', 5],
+    'GC-arattaiMono': ['icon-arattaiMono', 2]
   },
   ReactTwotoneIcon: {
     'ZD-TT-call': ['icon-chCall', 2],
@@ -2429,6 +2431,7 @@ export const FontFactory = {
   ReactIMIcon: {
     'ZD-IM-endChat': 'icon-endChat',
     'ZD-AC-incomingMissed': ['icon-incomingMissed', 3],
-    'ZD-AC-outgoingMissed': ['icon-outgoingMissed', 3]
+    'ZD-AC-outgoingMissed': ['icon-outgoingMissed', 3],
+    'ZD-AC-arattai': ['icon-arattai', 2]
   }
 };

package/es/Icon/FontIcon.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { IconDefaultProps } from "./props/defaultProps";
 import { IconProps } from "./props/propTypes";
 import { allCustomIcons } from "./CustomIcons";
+import { cn } from "@dot-system/css-utility";
 import style from "./Icon.module.css";
 export default class FontIcon extends React.Component {
   render() {
@@ -44,14 +45,14 @@ export default class FontIcon extends React.Component {
       for (let i = 1; i < name[1] + 1; i++) {
         let pathClass = `${iconContent[`path${i}`]} ${iconClass || isCustom ? `path${i}` : ''}`;
         childArray.push( /*#__PURE__*/React.createElement("span", {
-          className: pathClass,
+          className: cn(pathClass),
           key: i
         }));
       }
     }
 
     return /*#__PURE__*/React.createElement("i", _extends({
-      className: `${'zd_font_icons'} ${isCustom} ${fontClass}`,
+      className: cn(`${'zd_font_icons'} ${isCustom} ${fontClass}`),
       "data-title": title,
       onClick: onClick,
       "data-id": dataId,

package/es/Icon/SvgIcon.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { SvgIconDefaultProps } from "./props/defaultProps";
 import { SvgIconProps } from "./props/propTypes";
 import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
+import { cn } from "@dot-system/css-utility";
 import style from "./Icon.module.css";
 export default function SvgIcon({
   name,
@@ -27,7 +28,7 @@ export default function SvgIcon({
   } : DUMMY_OBJECT;
   let className = `${style.svgIcon} ${onClick ? style.cursor : ''} ${iconClass ? iconClass : ''}`;
   return /*#__PURE__*/React.createElement("svg", _extends({
-    className: className,
+    className: cn(className),
     onClick: onClick,
     "data-title": title,
     "data-id": dataId,

package/es/Icon/__tests__/Icon.spec.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Icon from "../index";
+import { FontFactory } from "../FontFactory";
+const iconNames = [...new Set(Object.values(FontFactory).flatMap(group => Object.keys(group)))].sort();
+describe('Icon - FontFactory names', () => {
+  test.each(iconNames)('renders "%s"', name => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Icon, {
+      name: name
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/Icon/__tests__/__snapshots__/FontIcon.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`FontIcon -  checking "isBold" is false 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic undefined   "
+    class="zd_font_icons basic"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -16,7 +16,7 @@ exports[`FontIcon -  checking "isBold" is true 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic undefined fbold  "
+    class="zd_font_icons basic fbold"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -28,7 +28,7 @@ exports[`FontIcon -  rendering "IconName" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic undefined   "
+    class="zd_font_icons basic"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -40,19 +40,19 @@ exports[`FontIcon -  rendering "Name" with "iconContent" and without path 1`] =
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic undefined   "
+    class="zd_font_icons basic"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
   >
     <span
-      class="icon1 "
+      class="icon1"
     />
     <span
-      class="icon2 "
+      class="icon2"
     />
     <span
-      class="icon3 "
+      class="icon3"
     />
   </i>
 </DocumentFragment>
@@ -62,7 +62,7 @@ exports[`FontIcon -  rendering "ariaHidden" is false 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="false"
-    class="zd_font_icons  basic undefined   "
+    class="zd_font_icons basic"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -74,7 +74,7 @@ exports[`FontIcon -  rendering "custumIcon" with path 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons red basic undefined   "
+    class="zd_font_icons red basic"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -93,7 +93,7 @@ exports[`FontIcon -  rendering "iconClass" with path  1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic undefined   iconStyleCss"
+    class="zd_font_icons basic iconStyleCss"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -115,7 +115,7 @@ exports[`FontIcon -  rendering custom attributes with tagAttributes prop 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic undefined   "
+    class="zd_font_icons basic"
     data-custom-attr="true"
     data-id="fontIcon"
     data-selector-id="fontIcon"
@@ -128,7 +128,7 @@ exports[`FontIcon -  rendering custom icon name 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons red basic undefined   "
+    class="zd_font_icons red basic"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -140,7 +140,7 @@ exports[`FontIcon -  rendering the "default" props 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic undefined   "
+    class="zd_font_icons basic"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -152,7 +152,7 @@ exports[`FontIcon -  rendering the "fontSize" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic undefined   "
+    class="zd_font_icons basic"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -165,7 +165,7 @@ exports[`FontIcon -  rendering the "iconClass" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic undefined   iconStyleCss"
+    class="zd_font_icons basic iconStyleCss"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -177,7 +177,7 @@ exports[`FontIcon -  rendering the "pathname" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic zd67f91bb627   "
+    class="zd_font_icons basic zd67f91bb627"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -189,7 +189,7 @@ exports[`FontIcon -  rendering the "title" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic undefined   "
+    class="zd_font_icons basic"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -202,7 +202,7 @@ exports[`FontIcon -  rendering the "titlePostion" to - bottom 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic undefined   "
+    class="zd_font_icons basic"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -215,7 +215,7 @@ exports[`FontIcon -  rendering the "titlePostion" to - left 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic undefined   "
+    class="zd_font_icons basic"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -228,7 +228,7 @@ exports[`FontIcon -  rendering the "titlePostion" to - right 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic undefined   "
+    class="zd_font_icons basic"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -241,7 +241,7 @@ exports[`FontIcon -  rendering the "titlePostion" to - top 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons  basic undefined   "
+    class="zd_font_icons basic"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"