@zohodesk/icons 1.0.0-beta.11 → 1.0.0-beta.110

package/es/Icon/index.js

@@ -1,93 +1,218 @@
-import _Object$keys from 'babel-runtime/core-js/object/keys';
-import _Promise from 'babel-runtime/core-js/promise';
 import React from 'react';
 import asyncComponent from './asyncComponent';
 import { FontFactory } from './FontFactory';
+import FontIcon from './FontIcon';
 
-function getAddformsFontIcon() {
-  return require('./AddformsFontIcon').default;
+function getAddforms() {
+  return require('../../assets_final/react/zd-font-react-addforms.module.css');
 }
-function getAutomateFontIcon() {
-  return require('./AutomateFontIcon').default;
+
+function getAutomate() {
+  return require('../../assets_final/react/zd-font-react-automate.module.css');
 }
-function getChannelsFontIcon() {
-  return require('./ChannelsFontIcon').default;
+
+function getChannels() {
+  return require('../../assets_final/react/zd-font-react-channels.module.css');
 }
-function getCommonFontIcon() {
-  return require('./CommonFontIcon').default;
+
+function getCommon() {
+  return require('../../assets_final/react/zd-font-react-common.module.css');
 }
-function getCommunityFontIcon() {
-  return require('./CommunityFontIcon').default;
+
+function getCommunity() {
+  return require('../../assets_final/react/zd-font-react-community.module.css');
 }
-function getCustomersFontIcon() {
-  return require('./CustomersFontIcon').default;
+
+function getCustomers() {
+  return require('../../assets_final/react/zd-font-react-customers.module.css');
 }
-function getCustomizeFontIcon() {
-  return require('./CustomizeFontIcon').default;
+
+function getCustomize() {
+  return require('../../assets_final/react/zd-font-react-customize.module.css');
 }
-function getGamescopeFontIcon() {
-  return require('./GamescopeFontIcon').default;
+
+function getGamescope() {
+  return require('../../assets_final/react/zd-font-react-gamescope.module.css');
 }
-function getGettingstartedFontIcon() {
-  return require('./GettingstartedFontIcon').default;
+
+function getGettingstarted() {
+  return require('../../assets_final/react/zd-font-react-gettingstarted.module.css');
 }
-function getKnowledgeBaseFontIcon() {
-  return require('./KnowledgeBaseFontIcon').default;
+
+function getKnowledgeBase() {
+  return require('../../assets_final/react/zd-font-react-kb.module.css');
 }
-function getOrganizationFontIcon() {
-  return require('./OrganizationFontIcon').default;
+
+function getOrganization() {
+  return require('../../assets_final/react/zd-font-react-organization.module.css');
 }
-function getOthersFontIcon() {
-  return require('./OthersFontIcon').default;
+
+function getOthers() {
+  return require('../../assets_final/react/zd-font-react-others.module.css');
 }
-function getReportsFontIcon() {
-  return require('./ReportsFontIcon').default;
+
+function getReports() {
+  return require('../../assets_final/react/zd-font-react-reports.module.css');
 }
-function getSetupFontIcon() {
-  return require('./SetupFontIcon').default;
+
+function getSetup() {
+  return require('../../assets_final/react/zd-font-react-setup.module.css');
 }
-function getSocialFontIcon() {
-  return require('./SocialFontIcon').default;
+
+function getSocial() {
+  return require('../../assets_final/react/zd-font-react-social.module.css');
 }
-function getTicketsFontIcon() {
-  return require('./TicketsFontIcon').default;
+
+function getTickets() {
+  return require('../../assets_final/react/zd-font-react-tickets.module.css');
+}
+
+function getTopband() {
+  return require('../../assets_final/react/zd-font-react-topband.module.css');
 }
-function getTopbandFontIcon() {
-  return require('./TopbandFontIcon').default;
+
+function getTicketsChannel() {
+  return require('../../assets_final/react/zd-font-react-ticket-channels.module.css');
+}
+
+function getReactCallBar() {
+  return require('../../assets_final/react/zd-font-rCallBar.module.css');
+}
+
+function getReactChannels() {
+  return require('../../assets_final/react/zd-font-rChannels.module.css');
+}
+
+function getReactCutomize() {
+  return require('../../assets_final/react/zd-font-rCustomize.module.css');
+}
+
+function getReactExportFiles() {
+  return require('../../assets_final/react/zd-font-rExportFiles.module.css');
+}
+
+function getReactGeneral() {
+  return require('../../assets_final/react/zd-font-rGeneral.module.css');
+}
+
+function getReactIntegrations() {
+  return require('../../assets_final/react/zd-font-rIntegrations.module.css');
+}
+
+function getReactLhs() {
+  return require('../../assets_final/react/zd-font-rLhs.module.css');
+}
+
+function getReactMarketplace() {
+  return require('../../assets_final/react/zd-font-rMarketplace.module.css');
+}
+
+function getReactReports() {
+  return require('../../assets_final/react/zd-font-rReports.module.css');
+}
+
+function getReactSetup() {
+  return require('../../assets_final/react/zd-font-rSetup.module.css');
+}
+
+function getReactTickets() {
+  return require('../../assets_final/react/zd-font-rTickets.module.css');
+}
+
+function getReactTopband() {
+  return require('../../assets_final/react/zd-font-rTopband.module.css');
+}
+
+function getReactGC() {
+  return require('../../assets_final/react/zd-font-react-gcFonts.module.css');
+}
+
+function getReactTwotone() {
+  return require('../../assets_final/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
+    });
+  };
 }
 
 function getIcon(props) {
-  var iconName = void 0;
-  var filesMap = {
-    AddformsFontIcon: getAddformsFontIcon,
-    AutomateFontIcon: getAutomateFontIcon,
-    ChannelsFontIcon: getChannelsFontIcon,
-    CommonFontIcon: getCommonFontIcon,
-    CommunityFontIcon: getCommunityFontIcon,
-    CustomersFontIcon: getCustomersFontIcon,
-    CustomizeFontIcon: getCustomizeFontIcon,
-    GamescopeFontIcon: getGamescopeFontIcon,
-    GettingstartedFontIcon: getGettingstartedFontIcon,
-    KnowledgeBaseFontIcon: getKnowledgeBaseFontIcon,
-    OrganizationFontIcon: getOrganizationFontIcon,
-    OthersFontIcon: getOthersFontIcon,
-    ReportsFontIcon: getReportsFontIcon,
-    SetupFontIcon: getSetupFontIcon,
-    SocialFontIcon: getSocialFontIcon,
-    TicketsFontIcon: getTicketsFontIcon,
-    TopbandFontIcon: getTopbandFontIcon
+  let iconName;
+  let 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
   };
-  return new _Promise(function (res) {
-    require.ensure([], function () {
-      _Object$keys(FontFactory).map(function (name) {
+  return new Promise(res => {
+    if (typeof require.ensure !== `function`) {
+      require.ensure = (d, c) => c(require);
+    }
+
+    require.ensure([], () => {
+      Object.keys(FontFactory).map(name => {
         if (typeof FontFactory[name][props.name] !== 'undefined') {
           iconName = name;
         }
       });
+
       if (iconName) {
-        var _Icon = filesMap[iconName]();
-        var response = {
-          Icon: _Icon
+        let iconContent = filesMap[iconName]();
+        let Icon = IconRender(iconName, iconContent);
+        let response = {
+          Icon
         };
         res(response);
       }
@@ -95,18 +220,11 @@ function getIcon(props) {
   });
 }
 
-var Icon = asyncComponent(function (props) {
-  return getIcon(props).then(function (res) {
-    return res.Icon;
-  });
-});
-
+const Icon = asyncComponent(props => getIcon(props).then(res => res.Icon));
 export default Icon;
 
 if (false) {
   Icon.docs = {
-    componentGroup: 'Icon',
-    folderName: 'Style Guide',
-    external: true
+    componentGroup: 'Icon'
   };
 }

package/es/Icon/props/defaultProps.js

@@ -0,0 +1,3 @@
+export const IconDefaultProps = {
+  a11y: {}
+};

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/common/{docStyle.module.css → IcondocStyle.module.css}

@@ -9,11 +9,9 @@
   position: relative;
   overflow: hidden;
 }
-
-.font_grid>span {
+.font_grid > span {
   display: inline-block;
 }
-
 .font_grid p {
   margin-top: 0.9375rem;
   font: 0.8125rem Semibold;
@@ -21,4 +19,4 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-}
+}

package/es/index.js

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

package/lib/Icon/CustomIcons.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TwoToneIcons = exports.CustomIcons = void 0;
+
+var _TwoToneIcons;
+
+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 = {
+  'ZD-chChatMis': 'red',
+  'ZD-chEmailMis': 'red',
+  'ZD-chFacebookMis': 'red',
+  'ZD-chTwitterMis': 'red',
+  'ZD-chForumsMis': 'red',
+  'ZD-chPhoneMis': 'red',
+  'ZD-chWebMis': 'red',
+  'ZD-chPhoneOutBound': 'red',
+  'ZD-channelChatMissed': 'red',
+  'ZD-channelFacebookMissed': 'red',
+  'ZD-channelForumMissed': 'red',
+  'ZD-channelHappinessMissed': 'red',
+  'ZD-channelMailMissed': 'red',
+  'ZD-channelPhoneMissed': 'red',
+  'ZD-channelTwitterMissed': 'red',
+  'ZD-channelWebMissed': 'red',
+  'ZD-channelDirectFbMissed': 'red',
+  'ZD-channelChatIn': 'green',
+  'ZD-channelFacebookIn': 'green',
+  'ZD-channelForumIn': 'green',
+  'ZD-channelHappinessIn': 'green',
+  'ZD-channelMailIn': 'green',
+  'ZD-channelPhoneIn': 'green',
+  'ZD-channelTwitterIn': 'green',
+  'ZD-channelWebIn': 'green',
+  'ZD-channelDirectFbIn': 'green',
+  'ZD-channelChatOut': 'blue',
+  'ZD-channelFacebookOut': 'blue',
+  'ZD-channelForumOut': 'blue',
+  'ZD-channelHappinessOut': 'blue',
+  'ZD-channelMailOut': 'blue',
+  'ZD-channelPhoneOut': 'blue',
+  'ZD-channelTwitterOut': 'blue',
+  'ZD-channelWebOut': 'blue',
+  'ZD-channelForward': 'blue',
+  'ZD-channelForwardDraft': 'blue',
+  'ZD-channelDirectFbOut': 'lightBlue',
+  'ZD-CH-callMissed': 'red',
+  'ZD-CH-callOutBound': 'red',
+  'ZD-CH-mailOutBound': 'red',
+  'ZD-CH-chatMissed': 'red',
+  'ZD-CH-mailMissed': 'red',
+  'ZD-CH-facebookMissed': 'red',
+  'ZD-CH-forumMissed': 'red',
+  'ZD-CH-twitterMissed': 'red',
+  'ZD-CH-webMissed': 'red',
+  'ZD-CH-directFacebookMissed': 'red',
+  'ZD-CH-happinessMissed': 'red',
+  'ZD-CH-callIn': 'green',
+  'ZD-CH-chatIn': 'green',
+  'ZD-CH-mailIn': 'green',
+  'ZD-CH-facebookIn': 'green',
+  'ZD-CH-forumIn': 'green',
+  'ZD-CH-twitterIn': 'green',
+  'ZD-CH-webIn': 'green',
+  'ZD-CH-directFacebookIn': 'green',
+  'ZD-CH-happinessIn': 'green',
+  'ZD-CH-callOut': 'blue',
+  'ZD-CH-chatOut': 'blue',
+  'ZD-CH-mailOut': 'blue',
+  'ZD-CH-facebookOut': 'blue',
+  'ZD-CH-forumOut': 'blue',
+  'ZD-CH-twitterOut': 'blue',
+  'ZD-CH-webOut': 'blue',
+  'ZD-CH-happinessOut': 'blue',
+  'ZD-CH-emailForward': 'blue',
+  'ZD-CH-directFacebookOut': 'lightBlue'
+};
+exports.CustomIcons = CustomIcons;
+var TwoToneIcons = (_TwoToneIcons = {
+  'ZD-TT-instagramMissed': 'red2',
+  'ZD-TT-callMissed': 'red2',
+  'ZD-TT-callOutBound': 'red2',
+  'ZD-TT-mailOutBound': 'red2',
+  'ZD-TT-chatMissed': 'red2',
+  'ZD-TT-mailMissed': 'red2',
+  'ZD-TT-facebookMissed': 'red2',
+  'ZD-TT-forumMissed': 'red2',
+  'ZD-TT-twitterMissed': 'red2',
+  'ZD-TT-webMissed': 'red2',
+  'ZD-TT-directFacebookMissed': 'red2',
+  'ZD-TT-happinessMissed': 'red2',
+  'ZD-TT-whatsAppMissed': 'red2'
+}, _defineProperty(_TwoToneIcons, "ZD-TT-whatsAppMissed", 'red2'), _defineProperty(_TwoToneIcons, 'ZD-TT-instaIMMissed', '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-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'), _TwoToneIcons);
+exports.TwoToneIcons = TwoToneIcons;