@zohodesk/icons 1.0.0-temp-101 → 1.0.0-temp-111

package/es/Icon/index.js

@@ -1,138 +1,153 @@
-import React from 'react'; //import asyncComponent from '../v1/asyncComponent';
-
-import { FontFactory } from './FontFactory';
-import FontIcon from '../v1/FontIcon';
+import React from 'react';
+import { FontFactory } from "./FontFactory";
+import FontIcon from "../v1/FontIcon";
 
 function getAddforms() {
-  return require('../../assets_final/react/zd-font-react-addforms.module.css');
+  return require("../../assets_final/react/zd-font-react-addforms.module.css");
 }
 
 function getAutomate() {
-  return require('../../assets_final/react/zd-font-react-automate.module.css');
+  return require("../../assets_final/react/zd-font-react-automate.module.css");
 }
 
 function getChannels() {
-  return require('../../assets_final/react/zd-font-react-channels.module.css');
+  return require("../../assets_final/react/zd-font-react-channels.module.css");
 }
 
 function getCommon() {
-  return require('../../assets_final/react/zd-font-react-common.module.css');
+  return require("../../assets_final/react/zd-font-react-common.module.css");
 }
 
 function getCommunity() {
-  return require('../../assets_final/react/zd-font-react-community.module.css');
+  return require("../../assets_final/react/zd-font-react-community.module.css");
 }
 
 function getCustomers() {
-  return require('../../assets_final/react/zd-font-react-customers.module.css');
+  return require("../../assets_final/react/zd-font-react-customers.module.css");
 }
 
 function getCustomize() {
-  return require('../../assets_final/react/zd-font-react-customize.module.css');
+  return require("../../assets_final/react/zd-font-react-customize.module.css");
 }
 
 function getGamescope() {
-  return require('../../assets_final/react/zd-font-react-gamescope.module.css');
+  return require("../../assets_final/react/zd-font-react-gamescope.module.css");
 }
 
 function getGettingstarted() {
-  return require('../../assets_final/react/zd-font-react-gettingstarted.module.css');
+  return require("../../assets_final/react/zd-font-react-gettingstarted.module.css");
 }
 
 function getKnowledgeBase() {
-  return require('../../assets_final/react/zd-font-react-kb.module.css');
+  return require("../../assets_final/react/zd-font-react-kb.module.css");
 }
 
 function getOrganization() {
-  return require('../../assets_final/react/zd-font-react-organization.module.css');
+  return require("../../assets_final/react/zd-font-react-organization.module.css");
 }
 
 function getOthers() {
-  return require('../../assets_final/react/zd-font-react-others.module.css');
+  return require("../../assets_final/react/zd-font-react-others.module.css");
 }
 
 function getReports() {
-  return require('../../assets_final/react/zd-font-react-reports.module.css');
+  return require("../../assets_final/react/zd-font-react-reports.module.css");
 }
 
 function getSetup() {
-  return require('../../assets_final/react/zd-font-react-setup.module.css');
+  return require("../../assets_final/react/zd-font-react-setup.module.css");
 }
 
 function getSocial() {
-  return require('../../assets_final/react/zd-font-react-social.module.css');
+  return require("../../assets_final/react/zd-font-react-social.module.css");
 }
 
 function getTickets() {
-  return require('../../assets_final/react/zd-font-react-tickets.module.css');
+  return require("../../assets_final/react/zd-font-react-tickets.module.css");
 }
 
 function getTopband() {
-  return require('../../assets_final/react/zd-font-react-topband.module.css');
+  return require("../../assets_final/react/zd-font-react-topband.module.css");
 }
 
 function getTicketsChannel() {
-  return require('../../assets_final/react/zd-font-react-ticket-channels.module.css');
+  return require("../../assets_final/react/zd-font-react-ticket-channels.module.css");
 }
 
 function getReactCallBar() {
-  return require('../../assets_final/react/zd-font-rCallBar.module.css');
+  return require("../../assets_final/react/zd-font-rCallBar.module.css");
 }
 
 function getReactChannels() {
-  return require('../../assets_final/react/zd-font-rChannels.module.css');
+  return require("../../assets_final/react/zd-font-rChannels.module.css");
 }
 
 function getReactCutomize() {
-  return require('../../assets_final/react/zd-font-rCustomize.module.css');
+  return require("../../assets_final/react/zd-font-rCustomize.module.css");
 }
 
 function getReactExportFiles() {
-  return require('../../assets_final/react/zd-font-rExportFiles.module.css');
+  return require("../../assets_final/react/zd-font-rExportFiles.module.css");
 }
 
 function getReactGeneral() {
-  return require('../../assets_final/react/zd-font-rGeneral.module.css');
+  return require("../../assets_final/react/zd-font-rGeneral.module.css");
 }
 
 function getReactIntegrations() {
-  return require('../../assets_final/react/zd-font-rIntegrations.module.css');
+  return require("../../assets_final/react/zd-font-rIntegrations.module.css");
 }
 
 function getReactLhs() {
-  return require('../../assets_final/react/zd-font-rLhs.module.css');
+  return require("../../assets_final/react/zd-font-rLhs.module.css");
 }
 
 function getReactMarketplace() {
-  return require('../../assets_final/react/zd-font-rMarketplace.module.css');
+  return require("../../assets_final/react/zd-font-rMarketplace.module.css");
 }
 
 function getReactReports() {
-  return require('../../assets_final/react/zd-font-rReports.module.css');
+  return require("../../assets_final/react/zd-font-rReports.module.css");
 }
 
 function getReactSetup() {
-  return require('../../assets_final/react/zd-font-rSetup.module.css');
+  return require("../../assets_final/react/zd-font-rSetup.module.css");
 }
 
 function getReactTickets() {
-  return require('../../assets_final/react/zd-font-rTickets.module.css');
+  return require("../../assets_final/react/zd-font-rTickets.module.css");
 }
 
 function getReactTopband() {
-  return require('../../assets_final/react/zd-font-rTopband.module.css');
+  return require("../../assets_final/react/zd-font-rTopband.module.css");
 }
 
 function getReactGC() {
-  return require('../../assets_final/react/zd-font-react-gcFonts.module.css');
+  return require("../../assets_final/react/zd-font-react-gcFonts.module.css");
 }
 
 function getReactTwotone() {
-  return require('../../assets_final/react/zd-font-rTwotone.module.css');
+  return require("../../assets_final/react/zd-font-rTwotone.module.css");
 }
 
 function getReactAccessibility() {
-  return require('../../assets_final/react/zd-font-rAccessibility.module.css');
+  return require("../../assets_final/react/zd-font-rAccessibility.module.css");
+}
+
+function getReactUpdates() {
+  return require("../../assets_final/react/zd-font-rUpdates.module.css");
+}
+
+function getReactAI() {
+  return require("../../assets_final/react/zd-font-rAI.module.css");
+}
+
+function getReactAutomation() {
+  return require("../../assets_final/react/zd-font-rAutomation.module.css");
+}
+
+function getReactDeveloperSpace() {
+  return require("../../assets_final/react/zd-font-rDeveloperSpace.module.css");
 }
 
 function IconRender(iconName, iconContent, props) {
@@ -144,7 +159,8 @@ function IconRender(iconName, iconContent, props) {
     title,
     dataId,
     size,
-    titlePosition
+    titlePosition,
+    tagAttributes
   } = props;
   const pathName = typeof FontFactory[iconName][name] === 'object' ? FontFactory[iconName][name][0] : FontFactory[iconName][name];
   return /*#__PURE__*/React.createElement(FontIcon, {
@@ -158,7 +174,8 @@ function IconRender(iconName, iconContent, props) {
     dataId: dataId,
     size: size,
     iconName: name,
-    titlePosition: titlePosition
+    titlePosition: titlePosition,
+    tagAttributes: tagAttributes
   });
 }
 
@@ -197,7 +214,11 @@ function getIcon(props) {
     ReactTopbandFontIcon: getReactTopband,
     ReactGCFontIcon: getReactGC,
     ReactTwotoneIcon: getReactTwotone,
-    ReactAccessibilityIcon: getReactAccessibility
+    ReactAccessibilityIcon: getReactAccessibility,
+    ReactProductUpdatesIcon: getReactUpdates,
+    ReactAIIcon: getReactAI,
+    ReactAutomationIcon: getReactAutomation,
+    ReactDeveloperSpaceIcon: getReactDeveloperSpace
   };
   const iconNames = Object.keys(FontFactory);
 
@@ -209,10 +230,10 @@ function getIcon(props) {
   }
 
   if (iconName) {
-    const iconCssModule = filesMap[iconName]();
+    let iconCssModule = filesMap[iconName]();
     let iconContent;
 
-    if (iconCssModule.__esModule && !!iconCssModule.default) {
+    if (iconCssModule.default && typeof iconCssModule.default != 'string') {
       iconContent = iconCssModule.default;
     } else {
       iconContent = iconCssModule;

package/es/Icon/props/propTypes.js

@@ -11,6 +11,7 @@ export const IconProps = {
   title: PropTypes.string,
   iconName: PropTypes.string,
   titlePosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  tagAttributes: PropTypes.object,
   a11y: PropTypes.shape({
     ariaHidden: PropTypes.bool
   })

package/es/icon_layer.module.css

@@ -0,0 +1 @@
+@layer dot-icons, dot-icons.base, dot-icons.core;

package/es/index.js

@@ -1 +1 @@
-export { default as Icon } from './Icon';
+export { default as Icon } from "./Icon";

package/es/v1/FontIcon.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { IconDefaultProps } from './props/defaultProps';
-import { IconProps } from './props/propTypes';
-import { allCustomIcons } from '../Icon/CustomIcons';
-import style from '../Icon/Icon.module.css';
+import { IconDefaultProps } from "./props/defaultProps";
+import { IconProps } from "./props/propTypes";
+import { allCustomIcons } from "../Icon/CustomIcons";
+import style from "../Icon/Icon.module.css";
 export default function FontIcon(props) {
   const {
     name,
@@ -17,6 +17,7 @@ export default function FontIcon(props) {
     size,
     iconName,
     titlePosition,
+    tagAttributes,
     a11y
   } = props;
   const {
@@ -55,7 +56,8 @@ export default function FontIcon(props) {
     "data-title-position": titlePosition,
     style: fontStyle,
     "aria-hidden": ariaHidden,
-    "data-selector-id": dataSelectorId
+    "data-selector-id": dataSelectorId,
+    ...tagAttributes
   }, childArray ? childArray : null);
 }
 FontIcon.propTypes = IconProps;

package/es/v1/__tests__/FontIcon.spec.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import FontIcon from "../FontIcon";
+import { render } from "@testing-library/react";
+describe('FontIcon - ', () => {
+  test('rendering the "default" props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('checking "isBold" is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      isBold: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('checking "isBold" is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      isBold: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the "iconClass"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      iconClass: "iconStyleCss"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the "fontSize"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      size: "15"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the "title"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      title: "FontIcon"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the "pathname"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      pathName: "zd67f91bb627"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering "Name" with "iconContent" and without path', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      name: ['icon-addAccounts', 3],
+      iconContent: {
+        path1: "icon1",
+        path2: "icon2",
+        path3: "icon3"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering "iconClass" with path ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      iconClass: "iconStyleCss",
+      name: ['icon-addAccounts', 3],
+      iconContent: {
+        path1: "icon1",
+        path2: "icon2",
+        path3: "icon3"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering "custumIcon" with path', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      name: ['icon-ch-chat-in', 2],
+      iconName: "ZD-chChatMis",
+      iconContent: {
+        path1: "icon1",
+        path2: "icon2"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering "ariaHidden" is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      a11y: {
+        ariaHidden: false
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering "IconName"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      iconName: "ZD-addAccount"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering custom icon name', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      iconName: "ZD-chChatMis"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const titlePosition = ['top', 'bottom', 'left', 'right'];
+  test.each(titlePosition)('rendering the "titlePostion" to - %s', titlePosition => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      titlePosition: titlePosition
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering custom attributes with tagAttributes prop', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      tagAttributes: {
+        'data-custom-attr': 'true'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,251 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FontIcon -  checking "isBold" is false 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  checking "isBold" is true 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined fbold   "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering "IconName" 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering "Name" with "iconContent" and without path 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <span
+      class="icon1 "
+    />
+    <span
+      class="icon2 "
+    />
+    <span
+      class="icon3 "
+    />
+  </i>
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering "ariaHidden" is false 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="false"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering "custumIcon" with path 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    red"
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <span
+      class="icon1 path1"
+    />
+    <span
+      class="icon2 path2"
+    />
+  </i>
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering "iconClass" with path  1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined  iconStyleCss  "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <span
+      class="icon1 path1"
+    />
+    <span
+      class="icon2 path2"
+    />
+    <span
+      class="icon3 path3"
+    />
+  </i>
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering custom attributes with tagAttributes prop 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-custom-attr="true"
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering custom icon name 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    red"
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "default" props 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "fontSize" 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    style="--zd-iconfont-size: var(--zd_font_size15);"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "iconClass" 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined  iconStyleCss  "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "pathname" 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic zd67f91bb627    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "title" 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title="FontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "titlePostion" to - bottom 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title-position="bottom"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "titlePostion" to - left 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title-position="left"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "titlePostion" to - right 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title-position="right"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "titlePostion" to - top 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title-position="top"
+  />
+</DocumentFragment>
+`;

package/es/v1/props/propTypes.js

@@ -11,6 +11,7 @@ export const IconProps = {
   title: PropTypes.string,
   iconName: PropTypes.string,
   titlePosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  tagAttributes: PropTypes.object,
   a11y: PropTypes.shape({
     ariaHidden: PropTypes.bool
   })