@zohodesk/icons 1.0.0-exp.4 → 1.0.0-temp-101

package/es/Icon/index.js

@@ -1,163 +1,165 @@
-import React from 'react';
-import asyncComponent from './asyncComponent';
+import React from 'react'; //import asyncComponent from '../v1/asyncComponent';
+
 import { FontFactory } from './FontFactory';
-import FontIcon from './FontIcon';
+import FontIcon from '../v1/FontIcon';
 
 function getAddforms() {
-  return require('../../assets/react/zd-font-react-addforms.module.css');
+  return require('../../assets_final/react/zd-font-react-addforms.module.css');
 }
 
 function getAutomate() {
-  return require('../../assets/react/zd-font-react-automate.module.css');
+  return require('../../assets_final/react/zd-font-react-automate.module.css');
 }
 
 function getChannels() {
-  return require('../../assets/react/zd-font-react-channels.module.css');
+  return require('../../assets_final/react/zd-font-react-channels.module.css');
 }
 
 function getCommon() {
-  return require('../../assets/react/zd-font-react-common.module.css');
+  return require('../../assets_final/react/zd-font-react-common.module.css');
 }
 
 function getCommunity() {
-  return require('../../assets/react/zd-font-react-community.module.css');
+  return require('../../assets_final/react/zd-font-react-community.module.css');
 }
 
 function getCustomers() {
-  return require('../../assets/react/zd-font-react-customers.module.css');
+  return require('../../assets_final/react/zd-font-react-customers.module.css');
 }
 
 function getCustomize() {
-  return require('../../assets/react/zd-font-react-customize.module.css');
+  return require('../../assets_final/react/zd-font-react-customize.module.css');
 }
 
 function getGamescope() {
-  return require('../../assets/react/zd-font-react-gamescope.module.css');
+  return require('../../assets_final/react/zd-font-react-gamescope.module.css');
 }
 
 function getGettingstarted() {
-  return require('../../assets/react/zd-font-react-gettingstarted.module.css');
+  return require('../../assets_final/react/zd-font-react-gettingstarted.module.css');
 }
 
 function getKnowledgeBase() {
-  return require('../../assets/react/zd-font-react-kb.module.css');
+  return require('../../assets_final/react/zd-font-react-kb.module.css');
 }
 
 function getOrganization() {
-  return require('../../assets/react/zd-font-react-organization.module.css');
+  return require('../../assets_final/react/zd-font-react-organization.module.css');
 }
 
 function getOthers() {
-  return require('../../assets/react/zd-font-react-others.module.css');
+  return require('../../assets_final/react/zd-font-react-others.module.css');
 }
 
 function getReports() {
-  return require('../../assets/react/zd-font-react-reports.module.css');
+  return require('../../assets_final/react/zd-font-react-reports.module.css');
 }
 
 function getSetup() {
-  return require('../../assets/react/zd-font-react-setup.module.css');
+  return require('../../assets_final/react/zd-font-react-setup.module.css');
 }
 
 function getSocial() {
-  return require('../../assets/react/zd-font-react-social.module.css');
+  return require('../../assets_final/react/zd-font-react-social.module.css');
 }
 
 function getTickets() {
-  return require('../../assets/react/zd-font-react-tickets.module.css');
+  return require('../../assets_final/react/zd-font-react-tickets.module.css');
 }
 
 function getTopband() {
-  return require('../../assets/react/zd-font-react-topband.module.css');
+  return require('../../assets_final/react/zd-font-react-topband.module.css');
 }
 
 function getTicketsChannel() {
-  return require('../../assets/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/react/zd-font-rCallBar.module.css');
+  return require('../../assets_final/react/zd-font-rCallBar.module.css');
 }
 
 function getReactChannels() {
-  return require('../../assets/react/zd-font-rChannels.module.css');
+  return require('../../assets_final/react/zd-font-rChannels.module.css');
 }
 
 function getReactCutomize() {
-  return require('../../assets/react/zd-font-rCustomize.module.css');
+  return require('../../assets_final/react/zd-font-rCustomize.module.css');
 }
 
 function getReactExportFiles() {
-  return require('../../assets/react/zd-font-rExportFiles.module.css');
+  return require('../../assets_final/react/zd-font-rExportFiles.module.css');
 }
 
 function getReactGeneral() {
-  return require('../../assets/react/zd-font-rGeneral.module.css');
+  return require('../../assets_final/react/zd-font-rGeneral.module.css');
 }
 
 function getReactIntegrations() {
-  return require('../../assets/react/zd-font-rIntegrations.module.css');
+  return require('../../assets_final/react/zd-font-rIntegrations.module.css');
 }
 
 function getReactLhs() {
-  return require('../../assets/react/zd-font-rLhs.module.css');
+  return require('../../assets_final/react/zd-font-rLhs.module.css');
 }
 
 function getReactMarketplace() {
-  return require('../../assets/react/zd-font-rMarketplace.module.css');
+  return require('../../assets_final/react/zd-font-rMarketplace.module.css');
 }
 
 function getReactReports() {
-  return require('../../assets/react/zd-font-rReports.module.css');
+  return require('../../assets_final/react/zd-font-rReports.module.css');
 }
 
 function getReactSetup() {
-  return require('../../assets/react/zd-font-rSetup.module.css');
+  return require('../../assets_final/react/zd-font-rSetup.module.css');
 }
 
 function getReactTickets() {
-  return require('../../assets/react/zd-font-rTickets.module.css');
+  return require('../../assets_final/react/zd-font-rTickets.module.css');
 }
 
 function getReactTopband() {
-  return require('../../assets/react/zd-font-rTopband.module.css');
+  return require('../../assets_final/react/zd-font-rTopband.module.css');
 }
 
 function getReactGC() {
-  return require('../../assets/react/zd-font-react-gcFonts.module.css');
+  return require('../../assets_final/react/zd-font-react-gcFonts.module.css');
 }
 
 function getReactTwotone() {
-  return require('../../assets/react/zd-font-rTwotone.module.css');
-}
-
-function IconRender(iconName, iconContent) {
-  return function (props) {
-    let {
-      name,
-      onClick,
-      isBold,
-      iconClass,
-      title,
-      dataId,
-      size,
-      titlePosition
-    } = props;
-    let pathName = typeof FontFactory[iconName][name] === 'object' ? FontFactory[iconName][name][0] : FontFactory[iconName][name];
-    return /*#__PURE__*/React.createElement(FontIcon, {
-      iconClass: iconClass,
-      iconContent: iconContent,
-      isBold: isBold,
-      name: FontFactory[iconName][name],
-      onClick: onClick,
-      pathName: iconContent[pathName],
-      title: title,
-      dataId: dataId,
-      size: size,
-      iconName: name,
-      titlePosition: titlePosition
-    });
-  };
+  return require('../../assets_final/react/zd-font-rTwotone.module.css');
+}
+
+function getReactAccessibility() {
+  return require('../../assets_final/react/zd-font-rAccessibility.module.css');
+}
+
+function IconRender(iconName, iconContent, props) {
+  const {
+    name,
+    onClick,
+    isBold,
+    iconClass,
+    title,
+    dataId,
+    size,
+    titlePosition
+  } = props;
+  const pathName = typeof FontFactory[iconName][name] === 'object' ? FontFactory[iconName][name][0] : FontFactory[iconName][name];
+  return /*#__PURE__*/React.createElement(FontIcon, {
+    iconClass: iconClass,
+    iconContent: iconContent,
+    isBold: isBold,
+    name: FontFactory[iconName][name],
+    onClick: onClick,
+    pathName: iconContent[pathName],
+    title: title,
+    dataId: dataId,
+    size: size,
+    iconName: name,
+    titlePosition: titlePosition
+  });
 }
 
 function getIcon(props) {
@@ -183,7 +185,7 @@ function getIcon(props) {
     TicketsChannelFontIcon: getTicketsChannel,
     ReactCallBarFontIcon: getReactCallBar,
     ReactChannelsFontIcon: getReactChannels,
-    ReactCutomizeFontIcon: getReactCutomize,
+    ReactCustomizeFontIcon: getReactCutomize,
     ReactExportFilesFontIcon: getReactExportFiles,
     ReactGeneralFontIcon: getReactGeneral,
     ReactIntegrationsFontIcon: getReactIntegrations,
@@ -194,37 +196,44 @@ function getIcon(props) {
     ReactTicketsFontIcon: getReactTickets,
     ReactTopbandFontIcon: getReactTopband,
     ReactGCFontIcon: getReactGC,
-    ReactTwotoneIcon: getReactTwotone
+    ReactTwotoneIcon: getReactTwotone,
+    ReactAccessibilityIcon: getReactAccessibility
   };
-  return new Promise(res => {
-    if (typeof require.ensure !== `function`) {
-      require.ensure = (d, c) => c(require);
+  const iconNames = Object.keys(FontFactory);
+
+  for (const name of iconNames) {
+    if (FontFactory[name][props.name] !== undefined) {
+      iconName = name;
+      break;
     }
+  }
 
-    require.ensure([], () => {
-      Object.keys(FontFactory).map(name => {
-        if (typeof FontFactory[name][props.name] !== 'undefined') {
-          iconName = name;
-        }
-      });
-
-      if (iconName) {
-        let iconContent = filesMap[iconName]();
-        let Icon = IconRender(iconName, iconContent);
-        let response = {
-          Icon
-        };
-        res(response);
-      }
-    }, 'FontFactory');
-  });
-}
+  if (iconName) {
+    const iconCssModule = filesMap[iconName]();
+    let iconContent;
 
-const Icon = asyncComponent(props => getIcon(props).then(res => res.Icon));
-export default Icon;
+    if (iconCssModule.__esModule && !!iconCssModule.default) {
+      iconContent = iconCssModule.default;
+    } else {
+      iconContent = iconCssModule;
+    }
+
+    const Icon = IconRender(iconName, iconContent, props);
+    return {
+      IconComponent: Icon
+    };
+  }
 
-if (false) {
-  Icon.docs = {
-    componentGroup: 'Icon'
+  return {
+    IconComponent: null
   };
-}
+}
+
+function Icon(props) {
+  const {
+    IconComponent
+  } = getIcon(props);
+  return IconComponent;
+}
+
+export default Icon;

package/es/Icon/props/defaultProps.js

@@ -0,0 +1,5 @@
+export const IconDefaultProps = {
+  a11y: {},
+  dataSelectorId: 'fontIcon',
+  dataId: 'fontIcon'
+};

package/es/Icon/props/propTypes.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+export const IconProps = {
+  dataId: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconContent: PropTypes.object,
+  isBold: PropTypes.bool,
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  onClick: PropTypes.func,
+  pathName: PropTypes.string,
+  size: PropTypes.string,
+  title: PropTypes.string,
+  iconName: PropTypes.string,
+  titlePosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  a11y: PropTypes.shape({
+    ariaHidden: PropTypes.bool
+  })
+};

package/es/index.js

@@ -1,6 +1 @@
-export { default as React } from 'react';
-export { default as ReactDOM } from 'react-dom';
-export { renderToStaticMarkup } from 'react-dom/server';
-import '@zohodesk/variables/lib/fontsizeVariables.module.css';
-export { default as Icon } from './Icon';
-export { default as Icon__default } from './Icon/docs/Icon__default.docs';
+export { default as Icon } from './Icon';

package/es/v1/FontIcon.js

@@ -0,0 +1,69 @@
+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';
+export default function FontIcon(props) {
+  const {
+    name,
+    onClick,
+    isBold,
+    pathName,
+    iconContent,
+    iconClass,
+    title,
+    dataId,
+    dataSelectorId,
+    size,
+    iconName,
+    titlePosition,
+    a11y
+  } = props;
+  const {
+    ariaHidden = true
+  } = a11y;
+  const fontStyle = size ? {
+    '--zd-iconfont-size': 'var(--zd_font_size' + size + ')'
+  } : {};
+  let isCustom = allCustomIcons[iconName] || null;
+  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 childArray;
+
+  if (typeof name === 'object') {
+    childArray = [];
+    let isRtl = name[2] ? name[2] : false;
+    fontClass = isRtl ? `${fontClass} ${style.rtl}` : fontClass;
+
+    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,
+        key: i
+      }));
+    }
+  }
+
+  return /*#__PURE__*/React.createElement("i", {
+    className: `${'zd_font_icons'} ${fontClass} ${isCustom}`,
+    "data-title": title,
+    onClick: onClick,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    "data-title-position": titlePosition,
+    style: fontStyle,
+    "aria-hidden": ariaHidden,
+    "data-selector-id": dataSelectorId
+  }, childArray ? childArray : null);
+}
+FontIcon.propTypes = IconProps;
+FontIcon.defaultProps = IconDefaultProps;
+
+if (false) {
+  FontIcon.docs = {
+    componentGroup: 'Icon',
+    folderName: 'Style Guide'
+  };
+}

package/es/v1/asyncComponent.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useState, useRef } from 'react';
+export default function asyncComponent(getComponentProps) {
+  return function AsyncComponent(props) {
+    const [Component, setComponent] = useState(null);
+    const mount = useRef(true);
+    const eleRef = useRef(null);
+
+    const loadComponent = async () => {
+      try {
+        const component = await getComponentProps(props);
+
+        if (mount.current) {
+          setComponent(() => component);
+        }
+      } catch (e) {
+        console.log('errorme', e);
+      }
+    };
+
+    useEffect(() => {
+      mount.current = true;
+      loadComponent();
+      return () => {
+        mount.current = false;
+      };
+    }, [props.name]);
+
+    const getRef = ele => {
+      eleRef.current = ele;
+    };
+
+    if (Component) {
+      return /*#__PURE__*/React.createElement(Component, { ...props,
+        ref: getRef
+      });
+    }
+
+    return null;
+  };
+}

package/es/v1/props/defaultProps.js

@@ -0,0 +1,5 @@
+export const IconDefaultProps = {
+  a11y: {},
+  dataSelectorId: 'fontIcon',
+  dataId: 'fontIcon'
+};

package/es/v1/props/propTypes.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+export const IconProps = {
+  dataId: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconContent: PropTypes.object,
+  isBold: PropTypes.bool,
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  onClick: PropTypes.func,
+  pathName: PropTypes.string,
+  size: PropTypes.string,
+  title: PropTypes.string,
+  iconName: PropTypes.string,
+  titlePosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  a11y: PropTypes.shape({
+    ariaHidden: PropTypes.bool
+  })
+};

package/install.md

@@ -0,0 +1,12 @@
+- For New :
+
+# npm i
+# npm run common_package_build
+
+For Update:
+
+# npm run download
+# npm run common_package_build
+
+
+

package/lib/Icon/CustomIcons.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TwoToneIcons = exports.CustomIcons = void 0;
+exports.allCustomIcons = exports.TwoToneIcons = exports.CustomIcons = void 0;
 
 var _TwoToneIcons;
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var CustomIcons = {
@@ -93,5 +97,9 @@ var TwoToneIcons = (_TwoToneIcons = {
   'ZD-TT-directFacebookMissed': 'red2',
   'ZD-TT-happinessMissed': 'red2',
   'ZD-TT-whatsAppMissed': 'red2'
-}, _defineProperty(_TwoToneIcons, "ZD-TT-whatsAppMissed", 'red2'), _defineProperty(_TwoToneIcons, 'ZD-TT-callIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-chatIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-mailIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-instagramIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-facebookIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-forumIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-twitterIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-webIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-directFacebookIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-happinessIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-whatsAppIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-callOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-chatOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-instagramOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-mailOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-facebookOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-forumOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-twitterOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-webOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-happinessOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-emailForward', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-directFacebookOut', 'lightBlue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-whatsAppOut', 'lightBlue2'), _TwoToneIcons);
-exports.TwoToneIcons = TwoToneIcons;
+}, _defineProperty(_TwoToneIcons, "ZD-TT-whatsAppMissed", 'red2'), _defineProperty(_TwoToneIcons, 'ZD-TT-instaIMMissed', 'red2'), _defineProperty(_TwoToneIcons, 'ZD-TT-chTwitterDirectMissed', 'red2'), _defineProperty(_TwoToneIcons, 'ZD-TT-callIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-chatIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-mailIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-instagramIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-facebookIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-forumIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-twitterIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-webIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-directFacebookIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-happinessIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-whatsAppIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-instaIMIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-chTwitterDirectIn', 'green2'), _defineProperty(_TwoToneIcons, 'ZD-TT-callOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-chatOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-instagramOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-mailOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-facebookOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-forumOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-twitterOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-webOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-happinessOut', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-emailForward', 'blue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-directFacebookOut', 'lightBlue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-whatsAppOut', 'lightBlue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-instaIMOut', 'lightBlue2'), _defineProperty(_TwoToneIcons, 'ZD-TT-chTwitterDirectOut', 'lightBlue2'), _TwoToneIcons);
+exports.TwoToneIcons = TwoToneIcons;
+
+var allCustomIcons = _objectSpread(_objectSpread({}, CustomIcons), TwoToneIcons);
+
+exports.allCustomIcons = allCustomIcons;