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

package/lib/Icon/index.js

@@ -1,103 +1,232 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports["default"] = void 0;
 
-var _react = require('react');
+var _react = _interopRequireDefault(require("react"));
 
-var _react2 = _interopRequireDefault(_react);
+var _asyncComponent = _interopRequireDefault(require("./asyncComponent"));
 
-var _asyncComponent = require('./asyncComponent');
+var _FontFactory = require("./FontFactory");
 
-var _asyncComponent2 = _interopRequireDefault(_asyncComponent);
+var _FontIcon = _interopRequireDefault(require("./FontIcon"));
 
-var _FontFactory = require('./FontFactory');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
 
-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 getChannels() {
+  return require('../../assets_final/react/zd-font-react-channels.module.css');
+}
+
+function getCommon() {
+  return require('../../assets_final/react/zd-font-react-common.module.css');
+}
+
+function getCommunity() {
+  return require('../../assets_final/react/zd-font-react-community.module.css');
 }
-function getChannelsFontIcon() {
-  return require('./ChannelsFontIcon').default;
+
+function getCustomers() {
+  return require('../../assets_final/react/zd-font-react-customers.module.css');
+}
+
+function getCustomize() {
+  return require('../../assets_final/react/zd-font-react-customize.module.css');
+}
+
+function getGamescope() {
+  return require('../../assets_final/react/zd-font-react-gamescope.module.css');
+}
+
+function getGettingstarted() {
+  return require('../../assets_final/react/zd-font-react-gettingstarted.module.css');
 }
-function getCommonFontIcon() {
-  return require('./CommonFontIcon').default;
+
+function getKnowledgeBase() {
+  return require('../../assets_final/react/zd-font-react-kb.module.css');
 }
-function getCommunityFontIcon() {
-  return require('./CommunityFontIcon').default;
+
+function getOrganization() {
+  return require('../../assets_final/react/zd-font-react-organization.module.css');
 }
-function getCustomersFontIcon() {
-  return require('./CustomersFontIcon').default;
+
+function getOthers() {
+  return require('../../assets_final/react/zd-font-react-others.module.css');
 }
-function getCustomizeFontIcon() {
-  return require('./CustomizeFontIcon').default;
+
+function getReports() {
+  return require('../../assets_final/react/zd-font-react-reports.module.css');
 }
-function getGamescopeFontIcon() {
-  return require('./GamescopeFontIcon').default;
+
+function getSetup() {
+  return require('../../assets_final/react/zd-font-react-setup.module.css');
 }
-function getGettingstartedFontIcon() {
-  return require('./GettingstartedFontIcon').default;
+
+function getSocial() {
+  return require('../../assets_final/react/zd-font-react-social.module.css');
 }
-function getKnowledgeBaseFontIcon() {
-  return require('./KnowledgeBaseFontIcon').default;
+
+function getTickets() {
+  return require('../../assets_final/react/zd-font-react-tickets.module.css');
 }
-function getOrganizationFontIcon() {
-  return require('./OrganizationFontIcon').default;
+
+function getTopband() {
+  return require('../../assets_final/react/zd-font-react-topband.module.css');
 }
-function getOthersFontIcon() {
-  return require('./OthersFontIcon').default;
+
+function getTicketsChannel() {
+  return require('../../assets_final/react/zd-font-react-ticket-channels.module.css');
 }
-function getReportsFontIcon() {
-  return require('./ReportsFontIcon').default;
+
+function getReactCallBar() {
+  return require('../../assets_final/react/zd-font-rCallBar.module.css');
 }
-function getSetupFontIcon() {
-  return require('./SetupFontIcon').default;
+
+function getReactChannels() {
+  return require('../../assets_final/react/zd-font-rChannels.module.css');
 }
-function getSocialFontIcon() {
-  return require('./SocialFontIcon').default;
+
+function getReactCutomize() {
+  return require('../../assets_final/react/zd-font-rCustomize.module.css');
 }
-function getTicketsFontIcon() {
-  return require('./TicketsFontIcon').default;
+
+function getReactExportFiles() {
+  return require('../../assets_final/react/zd-font-rExportFiles.module.css');
 }
-function getTopbandFontIcon() {
-  return require('./TopbandFontIcon').default;
+
+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) {
+    var name = props.name,
+        onClick = props.onClick,
+        isBold = props.isBold,
+        iconClass = props.iconClass,
+        title = props.title,
+        dataId = props.dataId,
+        size = props.size,
+        titlePosition = props.titlePosition;
+    var pathName = _typeof(_FontFactory.FontFactory[iconName][name]) === 'object' ? _FontFactory.FontFactory[iconName][name][0] : _FontFactory.FontFactory[iconName][name];
+    return /*#__PURE__*/_react["default"].createElement(_FontIcon["default"], {
+      iconClass: iconClass,
+      iconContent: iconContent,
+      isBold: isBold,
+      name: _FontFactory.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 iconName;
   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
+    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) {
+    if (typeof require.ensure !== "function") {
+      require.ensure = function (d, c) {
+        return c(require);
+      };
+    }
+
     require.ensure([], function () {
       Object.keys(_FontFactory.FontFactory).map(function (name) {
         if (typeof _FontFactory.FontFactory[name][props.name] !== 'undefined') {
           iconName = name;
         }
       });
+
       if (iconName) {
-        var _Icon = filesMap[iconName]();
+        var iconContent = filesMap[iconName]();
+
+        var _Icon = IconRender(iconName, iconContent);
+
         var response = {
           Icon: _Icon
         };
@@ -107,19 +236,16 @@ function getIcon(props) {
   });
 }
 
-var Icon = (0, _asyncComponent2.default)(function (props) {
+var Icon = (0, _asyncComponent["default"])(function (props) {
   return getIcon(props).then(function (res) {
     return res.Icon;
   });
 });
-
-exports.default = Icon;
-
+var _default = Icon;
+exports["default"] = _default;
 
 if (false) {
   Icon.docs = {
-    componentGroup: 'Icon',
-    folderName: 'Style Guide',
-    external: true
+    componentGroup: 'Icon'
   };
 }

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

@@ -1,43 +1,49 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _react = require('react');
-
-Object.defineProperty(exports, 'React', {
+Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_react).default;
+    return _Icon["default"];
   }
 });
-
-var _reactDom = require('react-dom');
-
-Object.defineProperty(exports, 'ReactDOM', {
+Object.defineProperty(exports, "Icon__default", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_reactDom).default;
+    return _Icon__default["default"];
   }
 });
-
-var _server = require('react-dom/server');
-
-Object.defineProperty(exports, 'renderToStaticMarkup', {
+Object.defineProperty(exports, "React", {
   enumerable: true,
   get: function get() {
-    return _server.renderToStaticMarkup;
+    return _react["default"];
   }
 });
-
-var _Icon = require('./Icon');
-
-Object.defineProperty(exports, 'Icon', {
+Object.defineProperty(exports, "ReactDOM", {
+  enumerable: true,
+  get: function get() {
+    return _reactDom["default"];
+  }
+});
+Object.defineProperty(exports, "renderToStaticMarkup", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_Icon).default;
+    return _server.renderToStaticMarkup;
   }
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _server = require("react-dom/server");
+
+require("@zohodesk/variables/assets/fontsizeVariables.module.css");
+
+var _Icon = _interopRequireDefault(require("./Icon"));
+
+var _Icon__default = _interopRequireDefault(require("./Icon/docs/Icon__default.docs"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zohodesk/icons",
   "umdVar": "Icons",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.101",
   "private": false,
   "description": "",
   "main": "lib/index",
@@ -19,11 +19,17 @@
   "homepage": "https://github.com/vimalceg/fz-dnd#readme",
   "scripts": {
     "clean": "react-cli clean lib es coverage assets",
-    "build": "npm run clean && react-cli build:component:cmjs",
+    "build": "react-cli build:component:cmjs ",
+    "build:dev": " npm run build && npm run build:es --module:mode=dev -- -w",
     "build:es": "react-cli build:library:es",
-    "prepare": "npm run init && npm run build && npm run build:es",
-    "init": "npm run clean && cd ../assets && npm run iconsassets && cd ../icons && cssmod ./assets",
-    "lint": "react-cli lint"
+    "prepare": "npm run init && npm run build && npm run build:es && npm run valueReplacer",
+    "init": "npm run clean && cd ../assets && npm run iconsassets",
+    "lint": "react-cli lint",
+    "docs": "react-cli docs",
+    "postpublish": "react-cli postpublish",
+    "download": "rm package-lock.json && rm -rf node_modules/ && npm install",
+    "valueReplacer": "react-cli  valuereplacer ./src ./lib &&  react-cli  valuereplacer ./src ./es && rm -rf ./assets_final  && react-cli valuereplacer ./assets ./assets_final true",
+    "expublish": "npm publish --tag experimental-version"
   },
   "tags": [
     "react",
@@ -34,10 +40,68 @@
     "redux",
     "router"
   ],
-  "dependencies": {
-    "@zohodesk/variables": "^1.0.0-beta.0"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "cssmod": "0.0.4"
+    "@zohodesk/variables": "1.0.0-beta.29"
+  },
+  "peerDependencies": {
+    "@zohodesk/variables": "1.0.0-beta.29"
+  },
+  "react-cli": {
+    "css": {
+      "valueReplacer": [
+        {
+          "props": [
+            "font",
+            "font-family"
+          ],
+          "values": {
+            "zdfonts-rCallBar": "zdf-rCallBar_1",
+            "zdfonts-rChannels": "zdf-rChannels_1",
+            "zdfonts-rCustomize": "zdf-rCustomize_1",
+            "zdfonts-react-addforms": "zdf-react-addforms_1",
+            "zdfonts-react-automate": "zdf-react-automate_1",
+            "zdfonts-react-channels": "zdf-react-channels_1",
+            "zdfonts-react-common": "zdf-react-common_1",
+            "zdfonts-react-community": "zdf-react-community_1",
+            "zdfonts-react-customers": "zdf-react-customers_1",
+            "zdfonts-react-customize": "zdf-react-customize_1",
+            "zdfonts-react-gamescope": "zdf-react-gamescope_1",
+            "zdfonts-react-gcFonts": "zdf-react-gcFonts_2",
+            "zdfonts-react-gettingstarted": "zdf-react-gettingstarted_1",
+            "zdfonts-react-integrations": "zdf-react-integrations_1",
+            "zdfonts-react-kb": "zdf-react-kb_1",
+            "zdfonts-react-logo": "zdf-react-logo_1",
+            "zdfonts-react-organization": "zdf-react-organization_1",
+            "zdfonts-react-others": "zdf-react-others_1",
+            "zdfonts-react-reports": "zdf-react-reports_1",
+            "zdfonts-react-setup": "zdf-react-setup_1",
+            "zdfonts-react-social": "zdf-react-social_1",
+            "zdfonts-ticket-channels": "zdf-ticket-channels_1",
+            "zdfonts-react-tickets": "zdf-react-tickets_1",
+            "zdfonts-react-topband": "zdf-react-topband_1",
+            "zdfonts-rExportFiles": "zdf-rExportFiles_1",
+            "zdfonts-rGeneral": "zdf-rGeneral_4",
+            "zdfonts-rIntegrations": "zdf-rIntegrations_2",
+            "zdfonts-rLhs": "zdf-rLhs_1",
+            "zdfonts-rMarketplace": "zdf-rMarketplace_1",
+            "zdfonts-rReports": "zdf-rReports_1",
+            "zdfonts-rSetup": "zdf-rSetup_1",
+            "zdfonts-rTickets": "zdf-rTickets_1",
+            "zdfonts-rTopband": "zdf-rTopband_1",
+            "zdfonts-rTwotone": "zdf-rTwotone_2"
+          }
+        }
+      ]
+    },
+    "docs": {
+      "cssUniqueness": "false",
+      "disableES5Transpile": true
+    },
+    "app": {
+      "removePropTypes": {
+        "removeImport": true
+      }
+    }
   }
-}
+}

package/es/Icon/AddformsFontIcon.js

@@ -1,113 +0,0 @@
-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';
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: [
-  'icon-addAccounts',
-  'icon-addCalls',
-  'icon-addCases',
-  'icon-addContacts',
-  'icon-addContracts',
-  'icon-addEvents',
-  'icon-addProducts',
-  'icon-addTasks',
-  'icon-addTimeEntry',
-  'icon-addTopic',
-  'icon-addtopicpin',
-  'icon-avatar40x40',
-  'icon-default-account',
-  'icon-default-contact',
-  'icon-editAccounts',
-  'icon-editCalls',
-  'icon-editCases',
-  'icon-editContacts',
-  'icon-editContracts',
-  'icon-editEvents',
-  'icon-editProducts',
-  'icon-editTasks',
-  'icon-editTimeEntry',
-  'icon-addClone',
-  'icon-addMail',
-  'path1',
-  'path2',
-  'path3',
-  'path4',
-  'path5',
-  'path6'] }] */
-import React from 'react';
-import PropTypes from 'prop-types';
-import iconContent from '../../assets/css/zd-font-addforms.module.css';
-import FontIcon from './FontIcon';
-import { FontFactory } from './FontFactory';
-
-var AddformsFontIcon = function (_React$Component) {
-  _inherits(AddformsFontIcon, _React$Component);
-
-  function AddformsFontIcon() {
-    _classCallCheck(this, AddformsFontIcon);
-
-    return _possibleConstructorReturn(this, (AddformsFontIcon.__proto__ || _Object$getPrototypeOf(AddformsFontIcon)).apply(this, arguments));
-  }
-
-  _createClass(AddformsFontIcon, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          name = _props.name,
-          onClick = _props.onClick,
-          isBold = _props.isBold,
-          iconClass = _props.iconClass,
-          title = _props.title,
-          dataId = _props.dataId,
-          size = _props.size;
-
-      var pathName = _typeof(FontFactory.AddformsFontIcon[name]) === 'object' ? FontFactory.AddformsFontIcon[name][0] : FontFactory.AddformsFontIcon[name];
-      return React.createElement(FontIcon, {
-        iconClass: iconClass,
-        iconContent: iconContent,
-        isBold: isBold,
-        name: FontFactory.AddformsFontIcon[name],
-        onClick: onClick,
-        pathName: iconContent[pathName],
-        title: title,
-        dataId: dataId,
-        size: size
-      });
-    }
-  }]);
-
-  return AddformsFontIcon;
-}(React.Component);
-
-export default AddformsFontIcon;
-
-
-AddformsFontIcon.defaultProps = {
-  isBold: false
-};
-
-AddformsFontIcon.propTypes = {
-  dataId: PropTypes.string,
-  iconClass: PropTypes.string,
-  isBold: PropTypes.bool,
-  name: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  size: PropTypes.string,
-  title: PropTypes.string
-};
-AddformsFontIcon.propTypesDescription = {
-  name: ' ',
-  isBold: ' ',
-  iconClass: ' ',
-  onClick: ' ',
-  title: ' '
-};
-
-if (false) {
-  AddformsFontIcon.docs = {
-    componentGroup: 'Icon',
-    folderName: 'Style Guide'
-  };
-}