@zohodesk/icons 1.0.0-beta.1 → 1.0.0-beta.101

package/es/Icon/FontIcon.js

@@ -1,70 +1,72 @@
-import _typeof from 'babel-runtime/helpers/typeof';
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 import React from 'react';
 import PropTypes from 'prop-types';
-import fsize from '@zohodesk/variables/lib/fontsize.module.css';
-import style from './FontIcon.module.css';
+import { CustomIcons, TwoToneIcons } from './CustomIcons';
+import style from './Icon.module.css';
+export default class FontIcon extends React.Component {
+  render() {
+    let {
+      name,
+      onClick,
+      isBold,
+      pathName,
+      iconContent,
+      iconClass,
+      title,
+      dataId,
+      size,
+      iconName,
+      titlePosition,
+      a11y
+    } = this.props;
+    let {
+      ariaHidden = true
+    } = a11y;
+    let fontStyle = size ? {
+      '--zd-iconfont-size': 'var(--zd_font_size' + size + ')'
+    } : {};
+    let isRtl = false;
+    let isCustom = CustomIcons[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 : ''}`;
 
-var FontIcon = function (_React$Component) {
-  _inherits(FontIcon, _React$Component);
+    if (typeof name === 'object') {
+      isRtl = name[2] ? name[2] : false;
+      fontClass = isRtl ? `${fontClass} ${style.rtl}` : fontClass;
+      let childArray = [];
 
-  function FontIcon() {
-    _classCallCheck(this, FontIcon);
-
-    return _possibleConstructorReturn(this, (FontIcon.__proto__ || _Object$getPrototypeOf(FontIcon)).apply(this, arguments));
-  }
-
-  _createClass(FontIcon, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          name = _props.name,
-          onClick = _props.onClick,
-          isBold = _props.isBold,
-          pathName = _props.pathName,
-          iconContent = _props.iconContent,
-          iconClass = _props.iconClass,
-          title = _props.title,
-          dataId = _props.dataId,
-          size = _props.size;
-
-      var fontClass = style.basic + ' ' + pathName + ' ' + (isBold ? style.fbold : '') + ' ' + (iconClass ? iconClass : '') + ' ' + (onClick ? style.cursor : '') + ' ' + (size ? fsize['size' + size] : '') + '  ';
-      if ((typeof name === 'undefined' ? 'undefined' : _typeof(name)) === 'object') {
-        var childArray = [];
-        for (var i = 1; i < name[1] + 1; i++) {
-          var pathClass = iconContent['path' + i] + '   ' + (iconClass ? 'path' + i : '');
-          childArray.push(React.createElement('span', { className: pathClass, key: i }));
-        }
-        return React.createElement(
-          'i',
-          {
-            className: '' + fontClass,
-            'data-title': title,
-            onClick: onClick,
-            'data-id': dataId ? dataId : 'fontIcon'
-          },
-          childArray
-        );
+      for (let i = 1; i < name[1] + 1; i++) {
+        let pathClass = `${iconContent[`path${i}`]}   ${iconClass || isCustom || isTwoTone ? `path${i}` : ''}`;
+        childArray.push( /*#__PURE__*/React.createElement("span", {
+          className: pathClass.trim(),
+          key: i
+        }));
       }
 
-      return React.createElement('i', {
-        className: '' + fontClass,
-        'data-title': title,
+      return /*#__PURE__*/React.createElement("i", {
+        className: `${'zd_font_icons'} ${fontClass} ${isCustom} ${isTwoTone}`.trim(),
+        "data-title": title,
         onClick: onClick,
-        'data-id': dataId ? dataId : 'fontIcon'
-      });
+        "data-id": dataId ? dataId : 'fontIcon',
+        "data-title-position": titlePosition,
+        style: fontStyle,
+        "aria-hidden": ariaHidden
+      }, childArray);
     }
-  }]);
 
-  return FontIcon;
-}(React.Component);
-
-export default FontIcon;
+    return /*#__PURE__*/React.createElement("i", {
+      className: `${'zd_font_icons'} ${fontClass}`.trim(),
+      "data-title": title,
+      onClick: onClick,
+      "data-id": dataId ? dataId : 'fontIcon',
+      "data-title-position": titlePosition,
+      style: fontStyle,
+      "aria-hidden": ariaHidden
+    });
+  }
 
+}
 FontIcon.propTypes = {
   dataId: PropTypes.string,
   iconClass: PropTypes.string,
@@ -74,7 +76,15 @@ FontIcon.propTypes = {
   onClick: PropTypes.func,
   pathName: PropTypes.string,
   size: PropTypes.string,
-  title: PropTypes.string
+  title: PropTypes.string,
+  iconName: PropTypes.string,
+  titlePosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  a11y: PropTypes.shape({
+    ariaHidden: PropTypes.bool
+  })
+};
+FontIcon.defaultProps = {
+  a11y: {}
 };
 
 if (false) {

package/es/Icon/Icon.module.css

@@ -0,0 +1,43 @@
+/* $Id$ */
+.basic {
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: var(--zd-iconfont-size, inherit);
+}
+.fbold {
+  font-weight: bold;
+}
+.cursor {
+  cursor: pointer;
+}
+.red :global .path2::before,
+.red2 :global .path3::before {
+  color: #de3535 !important;
+}
+.green :global .path2::before,
+.green2 :global .path3::before {
+  color: #26a942 !important;
+}
+.blue :global .path2::before,
+.blue2 :global .path3::before {
+  color: #0a73eb !important;
+}
+.lightBlue :global .path2::before,
+.lightBlue2 :global .path3::before {
+  color: #00acda !important;
+}
+[dir='rtl'] .rtl {
+  transform: rotateY(180deg);
+}
+
+/* .twotwo :global .path1:before {
+  color: red !important;
+} */

package/es/Icon/asyncComponent.js

@@ -1,82 +1,66 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 export default function asyncComponent(getComponent) {
-  return function (_React$Component) {
-    _inherits(AsyncComponent, _React$Component);
-
-    function AsyncComponent(props) {
-      _classCallCheck(this, AsyncComponent);
-
-      var _this = _possibleConstructorReturn(this, (AsyncComponent.__proto__ || _Object$getPrototypeOf(AsyncComponent)).call(this, props));
-
-      _this.state = {
+  return class AsyncComponent extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
         Component: null
       };
-      _this.ele = null;
-      _this.getRef = _this.getRef.bind(_this);
-      _this.loadComponent = _this.loadComponent.bind(_this);
-      return _this;
+      this.ele = null;
+      this.getRef = this.getRef.bind(this);
+      this.loadComponent = this.loadComponent.bind(this);
     }
 
-    _createClass(AsyncComponent, [{
-      key: 'loadComponent',
-      value: function loadComponent() {
-        var _this2 = this;
-
-        var component = getComponent(this.props);
-        component.then(function (Component) {
-          if (_this2.mount) {
-            _this2.setState({ Component: Component });
-          }
-        }).catch(function (e) {
-          console.log(e);
-        });
-      }
-    }, {
-      key: 'componentDidUpdate',
-      value: function componentDidUpdate(prevProps) {
-        if (prevProps.name != this.props.name) {
-          this.loadComponent();
+    loadComponent() {
+      let component = getComponent(this.props);
+      component.then(Component => {
+        if (this.mount) {
+          this.setState({
+            Component
+          });
         }
-      }
-    }, {
-      key: 'getRef',
-      value: function getRef(ele) {
-        this.ele = ele;
-      }
-    }, {
-      key: 'getInstance',
-      value: function getInstance() {
-        return this.ele;
-      }
-    }, {
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        this.mount = true;
+      }).catch(e => {//console.log(e);
+      });
+    }
+
+    componentDidUpdate(prevProps) {
+      if (prevProps.name != this.props.name) {
         this.loadComponent();
       }
-    }, {
-      key: 'render',
-      value: function render() {
-        var Component = this.state.Component;
+    }
 
-        if (Component) {
-          return React.createElement(Component, _extends({}, this.props, { ref: this.getRef }));
-        }
-        return null;
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        this.mount = null;
+    getRef(ele) {
+      this.ele = ele;
+    }
+
+    getInstance() {
+      return this.ele;
+    }
+
+    componentDidMount() {
+      this.mount = true;
+      this.loadComponent();
+    }
+
+    render() {
+      const {
+        Component
+      } = this.state;
+
+      if (Component) {
+        return /*#__PURE__*/React.createElement(Component, _extends({}, this.props, {
+          ref: this.getRef
+        }));
       }
-    }]);
 
-    return AsyncComponent;
-  }(React.Component);
+      return null;
+    }
+
+    componentWillUnmount() {
+      this.mount = null;
+    }
+
+  };
 }

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,
+    ReactCutomizeFontIcon: 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/common/IcondocStyle.module.css

@@ -0,0 +1,22 @@
+.font_grid {
+  border-radius: 3px;
+  text-align: center;
+  width: 8.0625rem;
+  box-shadow: 0 0 14px -1px #00000014;
+  margin: 0 1.125rem 1.125rem 0;
+  padding: 1.375rem 0.625rem 1.3125rem;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+}
+.font_grid > span {
+  display: inline-block;
+}
+.font_grid p {
+  margin-top: 0.9375rem;
+  font: 0.8125rem Semibold;
+  color: #2d313e;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/es/index.js

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