@zohodesk/icons 1.3.0 → 1.3.2

package/lib/Context/__tests__/__snapshots__/IconContext.spec.js.snap

@@ -0,0 +1,166 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconProvider / IconContext -  default context - renders font icon (no provider) 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic icon-close2    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconProvider / IconContext -  multiple icons share the same provider context 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+  <svg
+    aria-hidden="true"
+    class="svgIcon    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <use
+      href="#ZD-addAccount"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`IconProvider / IconContext -  type "fontIcon" - renders font icon 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic icon-close2    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconProvider / IconContext -  type "svgIcon" - passes "a11y" ariaHidden false 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="false"
+    class="svgIcon    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`IconProvider / IconContext -  type "svgIcon" - passes "iconClass" prop to svg 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon  custom-class  "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`IconProvider / IconContext -  type "svgIcon" - passes "size" prop to svg 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    style="--zd-iconfont-size: var(--zd_font_size20);"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`IconProvider / IconContext -  type "svgIcon" - passes "title" prop to svg 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title="Close"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`IconProvider / IconContext -  type "svgIcon" - renders svg symbol 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`IconProvider / IconContext -  type "svgIcon" with "svgIconClass" 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon app-svg-icon   "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`IconProvider / IconContext -  type "svgIcon" with custom "svgIconPrefix" 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <use
+      href="/sprites.svg#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;

package/lib/Context/props/defaultProps.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconProviderDefaultProps = void 0;
+var IconProviderDefaultProps = {
+  type: 'fontIcon',
+  svgIconPrefix: '#',
+  svgIconClass: ''
+};
+exports.IconProviderDefaultProps = IconProviderDefaultProps;

package/lib/Context/props/propTypes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconProviderProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var IconProviderProps = {
+  type: _propTypes["default"].oneOf(['fontIcon', 'svgIcon']),
+  svgIconPrefix: _propTypes["default"].string,
+  svgIconClass: _propTypes["default"].string,
+  children: _propTypes["default"].node.isRequired
+};
+exports.IconProviderProps = IconProviderProps;

package/lib/Icon/FontFactory.js

@@ -1750,7 +1750,8 @@ var FontFactory = {
     'ZD-TK-tempPreview': 'icon-tempPreview',
     'ZD-TK-botPositive': 'icon-botPositive',
     'ZD-TK-botNeutral': 'icon-botNeutral',
-    'ZD-TK-nestedConversation': 'icon-nestedConversation'
+    'ZD-TK-nestedConversation': 'icon-nestedConversation',
+    'ZD-TK-sideChat': ['icon-sideChat', 2]
   },
   ReactTopbandFontIcon: {
     'ZD-TB-advanceSearch': 'icon-advanceSearch',
@@ -2023,7 +2024,12 @@ var FontFactory = {
     'ZD-AU-ziaBot': ['icon-ziaBot', 2],
     'ZD-AU-ziaExtract': ['icon-ziaExtract', 2],
     'ZD-AU-ziaGenerate': ['icon-ziaGenerate', 2],
-    'ZD-AU-ziaPredict': ['icon-ziaPredict', 2]
+    'ZD-AU-ziaPredict': ['icon-ziaPredict', 2],
+    'ZD-AU-skip': 'icon-skip',
+    'ZD-AU-scheduleDelay': 'icon-scheduleDelay',
+    'ZD-AU-reschedule': 'icon-reschedule',
+    'ZD-AU-nodeRemove': 'icon-nodeRemove',
+    'ZD-AU-failure': 'icon-failure'
   },
   ReactDeveloperSpaceIcon: {
     'ZD-DS-customMobileApp': 'icon-customMobileApp'

package/lib/Icon/FontIcon.js

@@ -115,11 +115,4 @@ var FontIcon = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = FontIcon;
 FontIcon.propTypes = _propTypes.IconProps;
-FontIcon.defaultProps = _defaultProps.IconDefaultProps;
-
-if (__DOCS__) {
-  FontIcon.docs = {
-    componentGroup: 'Icon',
-    folderName: 'Style Guide'
-  };
-}
+FontIcon.defaultProps = _defaultProps.IconDefaultProps;

package/lib/Icon/Icon.module.css

@@ -18,6 +18,12 @@
   word-break: initial;
 }
 
+.svgIcon{
+  height:1em;
+  width:1em;
+  font-size: var(--zd-iconfont-size, inherit);
+}
+
 .fbold {
   font-weight: bold;
 }

package/lib/Icon/SvgIcon.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = SvgIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
+
+var _IconModule = _interopRequireDefault(require("./Icon.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+function SvgIcon(_ref) {
+  var name = _ref.name,
+      onClick = _ref.onClick,
+      title = _ref.title,
+      dataId = _ref.dataId,
+      dataSelectorId = _ref.dataSelectorId,
+      size = _ref.size,
+      iconClass = _ref.iconClass,
+      titlePosition = _ref.titlePosition,
+      tagAttributes = _ref.tagAttributes,
+      a11y = _ref.a11y,
+      svgPrefix = _ref.svgPrefix;
+  var _a11y$ariaHidden = a11y.ariaHidden,
+      ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
+  var href = "".concat(svgPrefix).concat(name);
+  var fontStyle = size ? {
+    '--zd-iconfont-size': 'var(--zd_font_size' + size + ')'
+  } : _constants.DUMMY_OBJECT;
+  var className = "".concat(_IconModule["default"].svgIcon, " ").concat(iconClass ? iconClass : '', "  ").concat(onClick ? _IconModule["default"].cursor : '');
+  return /*#__PURE__*/_react["default"].createElement("svg", _extends({
+    className: className,
+    onClick: onClick,
+    "data-title": title,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    "data-selector-id": dataSelectorId,
+    "data-title-position": titlePosition,
+    style: fontStyle,
+    "aria-hidden": ariaHidden
+  }, tagAttributes), /*#__PURE__*/_react["default"].createElement("use", {
+    href: href
+  }));
+}
+
+SvgIcon.propTypes = _propTypes.SvgIconProps;
+SvgIcon.defaultProps = _defaultProps.SvgIconDefaultProps;

package/lib/Icon/__tests__/SvgIcon.spec.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
+
+var _react2 = require("@testing-library/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('SvgIcon - ', function () {
+  test('rendering the "default" props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with "name" and "svgPrefix"', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+      name: "ZD-close2",
+      svgPrefix: "#"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with external sprite "svgPrefix"', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+      name: "ZD-close2",
+      svgPrefix: "/sprites.svg#"
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with "title"', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+      name: "ZD-close2",
+      svgPrefix: "#",
+      title: "Close"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with "size"', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+      name: "ZD-close2",
+      svgPrefix: "#",
+      size: "15"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with "iconClass"', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+      name: "ZD-close2",
+      svgPrefix: "#",
+      iconClass: "myIconClass"
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with "ariaHidden" false', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+      name: "ZD-close2",
+      svgPrefix: "#",
+      a11y: {
+        ariaHidden: false
+      }
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var titlePositions = ['top', 'bottom', 'left', 'right'];
+  test.each(titlePositions)('rendering with "titlePosition" - %s', function (titlePosition) {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+      name: "ZD-close2",
+      svgPrefix: "#",
+      titlePosition: titlePosition
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with "tagAttributes"', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+      name: "ZD-close2",
+      svgPrefix: "#",
+      tagAttributes: {
+        'data-custom-attr': 'true'
+      }
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/Icon/__tests__/__snapshots__/SvgIcon.spec.js.snap

@@ -0,0 +1,200 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SvgIcon -  rendering the "default" props 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon   "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <use
+      href="undefinedundefined"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`SvgIcon -  rendering with "ariaHidden" false 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="false"
+    class="svgIcon   "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`SvgIcon -  rendering with "iconClass" 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon myIconClass  "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`SvgIcon -  rendering with "name" and "svgPrefix" 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon   "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`SvgIcon -  rendering with "size" 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon   "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    style="--zd-iconfont-size: var(--zd_font_size15);"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`SvgIcon -  rendering with "tagAttributes" 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon   "
+    data-custom-attr="true"
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`SvgIcon -  rendering with "title" 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon   "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title="Close"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`SvgIcon -  rendering with "titlePosition" - bottom 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon   "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title-position="bottom"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`SvgIcon -  rendering with "titlePosition" - left 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon   "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title-position="left"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`SvgIcon -  rendering with "titlePosition" - right 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon   "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title-position="right"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`SvgIcon -  rendering with "titlePosition" - top 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon   "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title-position="top"
+  >
+    <use
+      href="#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`SvgIcon -  rendering with external sprite "svgPrefix" 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="svgIcon   "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <use
+      href="/sprites.svg#ZD-close2"
+    />
+  </svg>
+</DocumentFragment>
+`;

package/lib/Icon/index.js

@@ -5,14 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _FontFactory = require("./FontFactory");
 
 var _FontIcon = _interopRequireDefault(require("./FontIcon"));
 
+var _IconContext = _interopRequireDefault(require("../Context/IconContext"));
+
+var _SvgIcon = _interopRequireDefault(require("./SvgIcon"));
+
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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 getAddforms() {
@@ -270,6 +280,41 @@ function getIcon(props) {
 }
 
 function Icon(props) {
+  var iconContext = (0, _react.useContext)(_IconContext["default"]);
+
+  var _ref = iconContext || _constants.DUMMY_OBJECT,
+      type = _ref.type,
+      svgIconPrefix = _ref.svgIconPrefix,
+      svgIconClass = _ref.svgIconClass;
+
+  var name = props.name,
+      onClick = props.onClick,
+      title = props.title,
+      dataId = props.dataId,
+      dataSelectorId = props.dataSelectorId,
+      size = props.size,
+      _props$iconClass = props.iconClass,
+      iconClass = _props$iconClass === void 0 ? '' : _props$iconClass,
+      titlePosition = props.titlePosition,
+      tagAttributes = props.tagAttributes,
+      a11y = props.a11y;
+
+  if (type === 'svgIcon') {
+    return /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+      name: name,
+      onClick: onClick,
+      title: title,
+      dataId: dataId,
+      dataSelectorId: dataSelectorId,
+      size: size,
+      iconClass: "".concat(svgIconClass, " ").concat(iconClass),
+      titlePosition: titlePosition,
+      tagAttributes: tagAttributes,
+      a11y: a11y,
+      svgPrefix: svgIconPrefix
+    });
+  }
+
   var _getIcon = getIcon(props),
       IconComponent = _getIcon.IconComponent;