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

package/lib/Icon/FontIcon.js

@@ -1,103 +1,139 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports["default"] = void 0;
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+var _react = _interopRequireDefault(require("react"));
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = require('react');
+var _CustomIcons = require("./CustomIcons");
 
-var _react2 = _interopRequireDefault(_react);
+var _IconModule = _interopRequireDefault(require("./Icon.module.css"));
 
-var _propTypes = require('prop-types');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
-var _fontsizeModule = require('@zohodesk/variables/lib/fontsize.module.css');
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var _fontsizeModule2 = _interopRequireDefault(_fontsizeModule);
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-var _FontIconModule = require('./FontIcon.module.css');
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-var _FontIconModule2 = _interopRequireDefault(_FontIconModule);
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var FontIcon = function (_React$Component) {
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var FontIcon = /*#__PURE__*/function (_React$Component) {
   _inherits(FontIcon, _React$Component);
 
+  var _super = _createSuper(FontIcon);
+
   function FontIcon() {
     _classCallCheck(this, FontIcon);
 
-    return _possibleConstructorReturn(this, (FontIcon.__proto__ || Object.getPrototypeOf(FontIcon)).apply(this, arguments));
+    return _super.apply(this, arguments);
   }
 
   _createClass(FontIcon, [{
-    key: 'render',
+    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 = _FontIconModule2.default.basic + ' ' + pathName + ' ' + (isBold ? _FontIconModule2.default.fbold : '') + ' ' + (iconClass ? iconClass : '') + ' ' + (onClick ? _FontIconModule2.default.cursor : '') + ' ' + (size ? _fontsizeModule2.default['size' + size] : '') + '  ';
-      if ((typeof name === 'undefined' ? 'undefined' : _typeof(name)) === 'object') {
+      var _this$props = this.props,
+          name = _this$props.name,
+          onClick = _this$props.onClick,
+          isBold = _this$props.isBold,
+          pathName = _this$props.pathName,
+          iconContent = _this$props.iconContent,
+          iconClass = _this$props.iconClass,
+          title = _this$props.title,
+          dataId = _this$props.dataId,
+          size = _this$props.size,
+          iconName = _this$props.iconName,
+          titlePosition = _this$props.titlePosition,
+          a11y = _this$props.a11y;
+      var _a11y$ariaHidden = a11y.ariaHidden,
+          ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
+      var fontStyle = size ? {
+        '--zd-iconfont-size': 'var(--zd_font_size' + size + ')'
+      } : {};
+      var isRtl = false;
+      var isCustom = _CustomIcons.CustomIcons[iconName] || null;
+      isCustom = isCustom ? _IconModule["default"][isCustom] : '';
+      var isTwoTone = _CustomIcons.TwoToneIcons[iconName] || null;
+      isTwoTone = isTwoTone ? _IconModule["default"][isTwoTone] : '';
+      var fontClass = "".concat(_IconModule["default"].basic, " ").concat(pathName, " ").concat(isBold ? _IconModule["default"].fbold : '', " ").concat(iconClass ? iconClass : '', " ").concat(onClick ? _IconModule["default"].cursor : '');
+
+      if (_typeof(name) === 'object') {
+        isRtl = name[2] ? name[2] : false;
+        fontClass = isRtl ? "".concat(fontClass, " ").concat(_IconModule["default"].rtl) : fontClass;
         var childArray = [];
+
         for (var i = 1; i < name[1] + 1; i++) {
-          var pathClass = iconContent['path' + i] + '   ' + (iconClass ? 'path' + i : '');
-          childArray.push(_react2.default.createElement('span', { className: pathClass, key: i }));
+          var pathClass = "".concat(iconContent["path".concat(i)], "   ").concat(iconClass || isCustom || isTwoTone ? "path".concat(i) : '');
+          childArray.push( /*#__PURE__*/_react["default"].createElement("span", {
+            className: pathClass.trim(),
+            key: i
+          }));
         }
-        return _react2.default.createElement(
-          'i',
-          {
-            className: '' + fontClass,
-            'data-title': title,
-            onClick: onClick,
-            'data-id': dataId ? dataId : 'fontIcon'
-          },
-          childArray
-        );
+
+        return /*#__PURE__*/_react["default"].createElement("i", {
+          className: 'zd_font_icons'.concat(" ", fontClass, " ").concat(isCustom, " ").concat(isTwoTone).trim(),
+          "data-title": title,
+          onClick: onClick,
+          "data-id": dataId ? dataId : 'fontIcon',
+          "data-title-position": titlePosition,
+          style: fontStyle,
+          "aria-hidden": ariaHidden
+        }, childArray);
       }
 
-      return _react2.default.createElement('i', {
-        className: '' + fontClass,
-        'data-title': title,
+      return /*#__PURE__*/_react["default"].createElement("i", {
+        className: 'zd_font_icons'.concat(" ", fontClass).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
       });
     }
   }]);
 
   return FontIcon;
-}(_react2.default.Component);
-
-exports.default = FontIcon;
+}(_react["default"].Component);
 
+exports["default"] = FontIcon;
 FontIcon.propTypes = {
-  dataId: _propTypes2.default.string,
-  iconClass: _propTypes2.default.string,
-  iconContent: _propTypes2.default.object,
-  isBold: _propTypes2.default.bool,
-  name: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
-  onClick: _propTypes2.default.func,
-  pathName: _propTypes2.default.string,
-  size: _propTypes2.default.string,
-  title: _propTypes2.default.string
+  dataId: _propTypes["default"].string,
+  iconClass: _propTypes["default"].string,
+  iconContent: _propTypes["default"].object,
+  isBold: _propTypes["default"].bool,
+  name: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),
+  onClick: _propTypes["default"].func,
+  pathName: _propTypes["default"].string,
+  size: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  iconName: _propTypes["default"].string,
+  titlePosition: _propTypes["default"].oneOf(['top', 'bottom', 'left', 'right']),
+  a11y: _propTypes["default"].shape({
+    ariaHidden: _propTypes["default"].bool
+  })
+};
+FontIcon.defaultProps = {
+  a11y: {}
 };
 
 if (false) {

package/lib/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/lib/Icon/asyncComponent.js

@@ -1,99 +1,117 @@
-'use strict';
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports["default"] = asyncComponent;
 
-var _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; };
+var _react = _interopRequireDefault(require("react"));
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-exports.default = asyncComponent;
+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); }
 
-var _react = require('react');
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var _react2 = _interopRequireDefault(_react);
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 function asyncComponent(getComponent) {
-  return function (_React$Component) {
+  return /*#__PURE__*/function (_React$Component) {
     _inherits(AsyncComponent, _React$Component);
 
+    var _super = _createSuper(AsyncComponent);
+
     function AsyncComponent(props) {
-      _classCallCheck(this, AsyncComponent);
+      var _this;
 
-      var _this = _possibleConstructorReturn(this, (AsyncComponent.__proto__ || Object.getPrototypeOf(AsyncComponent)).call(this, props));
+      _classCallCheck(this, AsyncComponent);
 
+      _this = _super.call(this, props);
       _this.state = {
         Component: null
       };
       _this.ele = null;
-      _this.getRef = _this.getRef.bind(_this);
-      _this.loadComponent = _this.loadComponent.bind(_this);
+      _this.getRef = _this.getRef.bind(_assertThisInitialized(_this));
+      _this.loadComponent = _this.loadComponent.bind(_assertThisInitialized(_this));
       return _this;
     }
 
     _createClass(AsyncComponent, [{
-      key: 'loadComponent',
+      key: "loadComponent",
       value: function loadComponent() {
         var _this2 = this;
 
         var component = getComponent(this.props);
         component.then(function (Component) {
           if (_this2.mount) {
-            _this2.setState({ Component: Component });
+            _this2.setState({
+              Component: Component
+            });
           }
-        }).catch(function (e) {
-          console.log(e);
+        })["catch"](function (e) {//console.log(e);
         });
       }
     }, {
-      key: 'componentDidUpdate',
+      key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps) {
         if (prevProps.name != this.props.name) {
           this.loadComponent();
         }
       }
     }, {
-      key: 'getRef',
+      key: "getRef",
       value: function getRef(ele) {
         this.ele = ele;
       }
     }, {
-      key: 'getInstance',
+      key: "getInstance",
       value: function getInstance() {
         return this.ele;
       }
     }, {
-      key: 'componentDidMount',
+      key: "componentDidMount",
       value: function componentDidMount() {
         this.mount = true;
         this.loadComponent();
       }
     }, {
-      key: 'render',
+      key: "render",
       value: function render() {
         var Component = this.state.Component;
 
         if (Component) {
-          return _react2.default.createElement(Component, _extends({}, this.props, { ref: this.getRef }));
+          return /*#__PURE__*/_react["default"].createElement(Component, _extends({}, this.props, {
+            ref: this.getRef
+          }));
         }
+
         return null;
       }
     }, {
-      key: 'componentWillUnmount',
+      key: "componentWillUnmount",
       value: function componentWillUnmount() {
         this.mount = null;
       }
     }]);
 
     return AsyncComponent;
-  }(_react2.default.Component);
+  }(_react["default"].Component);
 }