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

package/es/Icon/FontIcon.js

@@ -1,81 +1,75 @@
-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 { IconDefaultProps } from './props/defaultProps';
+import { IconProps } from './props/propTypes';
+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,
-  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
-};
+}
+FontIcon.propTypes = IconProps;
+FontIcon.defaultProps = IconDefaultProps;
 
 if (false) {
   FontIcon.docs = {

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 ? Object.assign.bind() : 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/docs/Icon__default.docs.js

@@ -1,77 +1,35 @@
-import _Object$keys from 'babel-runtime/core-js/object/keys';
-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 Icon from '../';
-import style from '../../common/docStyle.module.css';
+import style from '../../common/IcondocStyle.module.css';
 import { FontFactory } from '../FontFactory';
-
-var Icon__default = function (_React$Component) {
-  _inherits(Icon__default, _React$Component);
-
-  function Icon__default() {
-    _classCallCheck(this, Icon__default);
-
-    return _possibleConstructorReturn(this, (Icon__default.__proto__ || _Object$getPrototypeOf(Icon__default)).apply(this, arguments));
+export default class Icon__default extends React.Component {
+  render() {
+    let Icons = {};
+    return /*#__PURE__*/React.createElement("div", null, Object.keys(FontFactory).map((item, i) => {
+      Icons = {};
+      Object.keys(item).sort().forEach(key => {
+        Icons[key] = item[key];
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        key: i
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: '10px',
+          background: '#f5f5f5',
+          margin: '10px 0 20px',
+          fontWeight: 'bold'
+        }
+      }, `${item} (${Object.keys(FontFactory[item]).length})`), Object.keys(FontFactory[item]).map((iconName, iconCount) => /*#__PURE__*/React.createElement("div", {
+        className: style.font_grid,
+        key: iconCount
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: iconName,
+        size: "20"
+      }), /*#__PURE__*/React.createElement("p", null, iconName))));
+    }));
   }
 
-  _createClass(Icon__default, [{
-    key: 'render',
-    value: function render() {
-      var Icons = {};
-      return React.createElement(
-        'div',
-        null,
-        _Object$keys(FontFactory).map(function (item, i) {
-          Icons = {};
-          _Object$keys(item).sort().forEach(function (key) {
-            Icons[key] = item[key];
-          });
-          return React.createElement(
-            'div',
-            { key: i },
-            React.createElement(
-              'div',
-              {
-                style: {
-                  padding: '10px',
-                  background: '#f5f5f5',
-                  margin: '10px 0 20px',
-                  fontWeight: 'bold'
-                }
-              },
-              item + ' (' + _Object$keys(FontFactory[item]).length + ')'
-            ),
-            _Object$keys(FontFactory[item]).map(function (iconName, iconCount) {
-              return React.createElement(
-                'div',
-                { className: style.font_grid, key: iconCount },
-                React.createElement(Icon, { name: iconName, size: '20' }),
-                React.createElement(
-                  'p',
-                  null,
-                  iconName
-                )
-              );
-            })
-          );
-        })
-      );
-    }
-  }]);
-
-  return Icon__default;
-}(React.Component);
-
-export default Icon__default;
-
-
+}
 Icon__default.docs = {
-  componentGroup: 'Icon',
-  folderName: 'Style Guide',
-  external: true
+  componentGroup: 'Icon'
 };