@zohodesk/icons 1.3.9 → 1.3.10

package/README.md

@@ -2,9 +2,13 @@
 
 In this GiftBox we Provide FontIcons
 
+# 1.3.10
+
+- Reordered className values to ensure customClass is always appended last to adopt CSS utility .
+
 # 1.3.9
 
-- ReactAnalyticsColorIcon --> ZD-AC-unassignedTicket icon modified.
+- ReactAnalyticsColorIcon --> ZD-AC-unassignedTicket icon added.
 
 # 1.3.8
 

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

@@ -4,7 +4,7 @@ exports[`IconProvider / IconContext -  default context - renders font icon (no p
 <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/FontIcon.js

@@ -33,13 +33,13 @@ export default class FontIcon extends React.Component {
     isCustom = isCustom ? style[isCustom] : ''; // let isTwoTone = TwoToneIcons[iconName] || null;
     // isTwoTone = isTwoTone ? style[isTwoTone] : '';
 
-    let fontClass = `${style.basic} ${pathName} ${isBold ? style.fbold : ''} ${iconClass ? iconClass : ''} ${onClick ? style.cursor : ''}`;
+    let fontClass = `${style.basic} ${pathName} ${isBold ? style.fbold : ''} ${onClick ? style.cursor : ''} ${iconClass ? iconClass : ''}`;
     let childArray;
 
     if (typeof name === 'object') {
       childArray = [];
       let isRtl = name[2] ? name[2] : false;
-      fontClass = isRtl ? `${fontClass} ${style.rtl}` : fontClass;
+      fontClass = isRtl ? `${style.rtl} ${fontClass}` : fontClass;
 
       for (let i = 1; i < name[1] + 1; i++) {
         let pathClass = `${iconContent[`path${i}`]} ${iconClass || isCustom ? `path${i}` : ''}`;
@@ -51,7 +51,7 @@ export default class FontIcon extends React.Component {
     }
 
     return /*#__PURE__*/React.createElement("i", _extends({
-      className: `${'zd_font_icons'} ${fontClass} ${isCustom}`,
+      className: `${'zd_font_icons'} ${isCustom} ${fontClass}`,
       "data-title": title,
       onClick: onClick,
       "data-id": dataId,

package/es/Icon/SvgIcon.js

@@ -25,7 +25,7 @@ export default function SvgIcon({
   let fontStyle = size ? {
     '--zd-iconfont-size': 'var(--zd_font_size' + size + ')'
   } : DUMMY_OBJECT;
-  let className = `${style.svgIcon} ${iconClass ? iconClass : ''}  ${onClick ? style.cursor : ''}`;
+  let className = `${style.svgIcon} ${onClick ? style.cursor : ''} ${iconClass ? iconClass : ''}`;
   return /*#__PURE__*/React.createElement("svg", _extends({
     className: className,
     onClick: onClick,

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

@@ -4,7 +4,7 @@ exports[`FontIcon -  checking "isBold" is false 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic undefined    "
+    class="zd_font_icons  basic undefined   "
     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 undefined 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 undefined   "
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -40,7 +40,7 @@ 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 undefined   "
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -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 undefined   "
     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 basic undefined    red"
+    class="zd_font_icons red basic undefined   "
     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 undefined   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 undefined   "
     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 basic undefined    red"
+    class="zd_font_icons red basic undefined   "
     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 undefined   "
     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 undefined   "
     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 undefined   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 undefined   "
     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 undefined   "
     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 undefined   "
     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 undefined   "
     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 undefined   "
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"

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

@@ -4,7 +4,7 @@ exports[`SvgIcon -  rendering the "default" props 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon  "
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -20,7 +20,7 @@ exports[`SvgIcon -  rendering with "ariaHidden" false 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="false"
-    class="svgIcon   "
+    class="svgIcon  "
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -36,7 +36,7 @@ exports[`SvgIcon -  rendering with "iconClass" 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon myIconClass  "
+    class="svgIcon  myIconClass"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -52,7 +52,7 @@ exports[`SvgIcon -  rendering with "name" and "svgPrefix" 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon  "
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -68,7 +68,7 @@ exports[`SvgIcon -  rendering with "size" 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon  "
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -85,7 +85,7 @@ exports[`SvgIcon -  rendering with "tagAttributes" 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon  "
     data-custom-attr="true"
     data-id="fontIcon"
     data-selector-id="fontIcon"
@@ -102,7 +102,7 @@ exports[`SvgIcon -  rendering with "title" 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon  "
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -119,7 +119,7 @@ exports[`SvgIcon -  rendering with "titlePosition" - bottom 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon  "
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -136,7 +136,7 @@ exports[`SvgIcon -  rendering with "titlePosition" - left 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon  "
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -153,7 +153,7 @@ exports[`SvgIcon -  rendering with "titlePosition" - right 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon  "
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -170,7 +170,7 @@ exports[`SvgIcon -  rendering with "titlePosition" - top 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon  "
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -187,7 +187,7 @@ exports[`SvgIcon -  rendering with external sprite "svgPrefix" 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svgIcon   "
+    class="svgIcon  "
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"

package/es/Icon/iconCssModules.js

@@ -0,0 +1,197 @@
+function getAddforms() {
+  return require("../../assets/react/zd-font-react-addforms.module.css");
+}
+
+function getAutomate() {
+  return require("../../assets/react/zd-font-react-automate.module.css");
+}
+
+function getChannels() {
+  return require("../../assets/react/zd-font-react-channels.module.css");
+}
+
+function getCommon() {
+  return require("../../assets/react/zd-font-react-common.module.css");
+}
+
+function getCommunity() {
+  return require("../../assets/react/zd-font-react-community.module.css");
+}
+
+function getCustomers() {
+  return require("../../assets/react/zd-font-react-customers.module.css");
+}
+
+function getCustomize() {
+  return require("../../assets/react/zd-font-react-customize.module.css");
+}
+
+function getGamescope() {
+  return require("../../assets/react/zd-font-react-gamescope.module.css");
+}
+
+function getGettingstarted() {
+  return require("../../assets/react/zd-font-react-gettingstarted.module.css");
+}
+
+function getKnowledgeBase() {
+  return require("../../assets/react/zd-font-react-kb.module.css");
+}
+
+function getOrganization() {
+  return require("../../assets/react/zd-font-react-organization.module.css");
+}
+
+function getOthers() {
+  return require("../../assets/react/zd-font-react-others.module.css");
+}
+
+function getReports() {
+  return require("../../assets/react/zd-font-react-reports.module.css");
+}
+
+function getSetup() {
+  return require("../../assets/react/zd-font-react-setup.module.css");
+}
+
+function getSocial() {
+  return require("../../assets/react/zd-font-react-social.module.css");
+}
+
+function getTickets() {
+  return require("../../assets/react/zd-font-react-tickets.module.css");
+}
+
+function getTopband() {
+  return require("../../assets/react/zd-font-react-topband.module.css");
+}
+
+function getTicketsChannel() {
+  return require("../../assets/react/zd-font-react-ticket-channels.module.css");
+}
+
+function getReactCallBar() {
+  return require("../../assets/react/zd-font-rCallBar.module.css");
+}
+
+function getReactChannels() {
+  return require("../../assets/react/zd-font-rChannels.module.css");
+}
+
+function getReactCutomize() {
+  return require("../../assets/react/zd-font-rCustomize.module.css");
+}
+
+function getReactExportFiles() {
+  return require("../../assets/react/zd-font-rExportFiles.module.css");
+}
+
+function getReactGeneral() {
+  return require("../../assets/react/zd-font-rGeneral.module.css");
+}
+
+function getReactIntegrations() {
+  return require("../../assets/react/zd-font-rIntegrations.module.css");
+}
+
+function getReactLhs() {
+  return require("../../assets/react/zd-font-rLhs.module.css");
+}
+
+function getReactMarketplace() {
+  return require("../../assets/react/zd-font-rMarketplace.module.css");
+}
+
+function getReactReports() {
+  return require("../../assets/react/zd-font-rReports.module.css");
+}
+
+function getReactSetup() {
+  return require("../../assets/react/zd-font-rSetup.module.css");
+}
+
+function getReactTickets() {
+  return require("../../assets/react/zd-font-rTickets.module.css");
+}
+
+function getReactTopband() {
+  return require("../../assets/react/zd-font-rTopband.module.css");
+}
+
+function getReactGC() {
+  return require("../../assets/react/zd-font-react-gcFonts.module.css");
+}
+
+function getReactTwotone() {
+  return require("../../assets/react/zd-font-rTwotone.module.css");
+}
+
+function getReactAccessibility() {
+  return require("../../assets/react/zd-font-rAccessibility.module.css");
+}
+
+function getReactUpdates() {
+  return require("../../assets/react/zd-font-rUpdates.module.css");
+}
+
+function getReactAI() {
+  return require("../../assets/react/zd-font-rAI.module.css");
+}
+
+function getReactAutomation() {
+  return require("../../assets/react/zd-font-rAutomation.module.css");
+}
+
+function getReactDeveloperSpace() {
+  return require("../../assets/react/zd-font-rDeveloperSpace.module.css");
+}
+
+function getReactAnalyticsColor() {
+  return require("../../assets/react/zd-font-rAnalyticsColor.module.css");
+}
+
+function getReactIM() {
+  return require("../../assets/react/zd-font-rIM.module.css");
+}
+
+export const filesMap = {
+  AddformsFontIcon: getAddforms,
+  AutomateFontIcon: getAutomate,
+  ChannelsFontIcon: getChannels,
+  CommonFontIcon: getCommon,
+  CommunityFontIcon: getCommunity,
+  CustomersFontIcon: getCustomers,
+  CustomizeFontIcon: getCustomize,
+  GamescopeFontIcon: getGamescope,
+  GettingstartedFontIcon: getGettingstarted,
+  KnowledgeBaseFontIcon: getKnowledgeBase,
+  OrganizationFontIcon: getOrganization,
+  OthersFontIcon: getOthers,
+  ReportsFontIcon: getReports,
+  SetupFontIcon: getSetup,
+  SocialFontIcon: getSocial,
+  TicketsFontIcon: getTickets,
+  TopbandFontIcon: getTopband,
+  TicketsChannelFontIcon: getTicketsChannel,
+  ReactCallBarFontIcon: getReactCallBar,
+  ReactChannelsFontIcon: getReactChannels,
+  ReactCustomizeFontIcon: getReactCutomize,
+  ReactExportFilesFontIcon: getReactExportFiles,
+  ReactGeneralFontIcon: getReactGeneral,
+  ReactIntegrationsFontIcon: getReactIntegrations,
+  ReactLhsFontIcon: getReactLhs,
+  ReactMarketplaceFontIcon: getReactMarketplace,
+  ReactReportsFontIcon: getReactReports,
+  ReactSetupFontIcon: getReactSetup,
+  ReactTicketsFontIcon: getReactTickets,
+  ReactTopbandFontIcon: getReactTopband,
+  ReactGCFontIcon: getReactGC,
+  ReactTwotoneIcon: getReactTwotone,
+  ReactAccessibilityIcon: getReactAccessibility,
+  ReactProductUpdatesIcon: getReactUpdates,
+  ReactAIIcon: getReactAI,
+  ReactAutomationIcon: getReactAutomation,
+  ReactDeveloperSpaceIcon: getReactDeveloperSpace,
+  ReactAnalyticsColorIcon: getReactAnalyticsColor,
+  ReactIMIcon: getReactIM
+};