@zohodesk/icons 1.3.1 → 1.3.2

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

@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { FontFactory } from "./FontFactory";
 import FontIcon from "./FontIcon";
+import IconContext from "../Context/IconContext";
+import SvgIcon from "./SvgIcon";
+import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 
 function getAddforms() {
   return require("../../assets/react/zd-font-react-addforms.module.css");
@@ -256,6 +259,41 @@ function getIcon(props) {
 }
 
 function Icon(props) {
+  const iconContext = useContext(IconContext);
+  const {
+    type,
+    svgIconPrefix,
+    svgIconClass
+  } = iconContext || DUMMY_OBJECT;
+  let {
+    name,
+    onClick,
+    title,
+    dataId,
+    dataSelectorId,
+    size,
+    iconClass = '',
+    titlePosition,
+    tagAttributes,
+    a11y
+  } = props;
+
+  if (type === 'svgIcon') {
+    return /*#__PURE__*/React.createElement(SvgIcon, {
+      name: name,
+      onClick: onClick,
+      title: title,
+      dataId: dataId,
+      dataSelectorId: dataSelectorId,
+      size: size,
+      iconClass: `${svgIconClass} ${iconClass}`,
+      titlePosition: titlePosition,
+      tagAttributes: tagAttributes,
+      a11y: a11y,
+      svgPrefix: svgIconPrefix
+    });
+  }
+
   const {
     IconComponent
   } = getIcon(props);

package/es/Icon/props/defaultProps.js

@@ -1,5 +1,11 @@
+import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 export const IconDefaultProps = {
-  a11y: {},
+  a11y: DUMMY_OBJECT,
+  dataSelectorId: 'fontIcon',
+  dataId: 'fontIcon'
+};
+export const SvgIconDefaultProps = {
+  a11y: DUMMY_OBJECT,
   dataSelectorId: 'fontIcon',
   dataId: 'fontIcon'
 };

package/es/Icon/props/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 export const IconProps = {
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   iconClass: PropTypes.string,
   iconContent: PropTypes.object,
   isBold: PropTypes.bool,
@@ -15,4 +16,20 @@ export const IconProps = {
   a11y: PropTypes.shape({
     ariaHidden: PropTypes.bool
   })
+};
+export const SvgIconProps = {
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  iconClass: PropTypes.string,
+  svgClass: PropTypes.string,
+  svgPrefix: PropTypes.string,
+  onClick: PropTypes.func,
+  size: PropTypes.string,
+  title: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  titlePosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  tagAttributes: PropTypes.object,
+  a11y: PropTypes.shape({
+    ariaHidden: PropTypes.bool
+  })
 };

package/es/index.js

@@ -1 +1,3 @@
-export { default as Icon } from "./Icon";
+export { default as Icon } from "./Icon";
+export { default as IconContext } from "./Context/IconContext";
+export { default as IconProvider } from "./Context/IconProvider";

package/lib/Context/IconContext.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var IconContext = /*#__PURE__*/_react["default"].createContext({
+  type: 'fontIcon',
+  svgIconPrefix: '#',
+  svgIconClass: ''
+});
+
+var _default = IconContext;
+exports["default"] = _default;

package/lib/Context/IconProvider.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = IconProvider;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _IconContext = _interopRequireDefault(require("./IconContext"));
+
+var _propTypes = require("./props/propTypes");
+
+var _defaultProps = require("./props/defaultProps");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function IconProvider(props) {
+  var type = props.type,
+      svgIconPrefix = props.svgIconPrefix,
+      svgIconClass = props.svgIconClass,
+      children = props.children;
+
+  var value = _react["default"].useMemo(function () {
+    return {
+      type: type,
+      svgIconPrefix: svgIconPrefix,
+      svgIconClass: svgIconClass
+    };
+  }, [type, svgIconPrefix, svgIconClass]);
+
+  return /*#__PURE__*/_react["default"].createElement(_IconContext["default"].Provider, {
+    value: value
+  }, children);
+}
+
+IconProvider.propTypes = _propTypes.IconProviderProps;
+IconProvider.defaultProps = _defaultProps.IconProviderDefaultProps;

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

@@ -0,0 +1,123 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Icon = _interopRequireDefault(require("../../Icon"));
+
+var _IconProvider = _interopRequireDefault(require("../IconProvider"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('IconProvider / IconContext - ', function () {
+  test('default context - renders font icon (no provider)', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      name: "ZD-close2"
+    })),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "fontIcon" - renders font icon', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconProvider["default"], {
+      type: "fontIcon"
+    }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      name: "ZD-close2"
+    }))),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "svgIcon" - renders svg symbol', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconProvider["default"], {
+      type: "svgIcon"
+    }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      name: "ZD-close2"
+    }))),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "svgIcon" with custom "svgIconPrefix"', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconProvider["default"], {
+      type: "svgIcon",
+      svgIconPrefix: "/sprites.svg#"
+    }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      name: "ZD-close2"
+    }))),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "svgIcon" with "svgIconClass"', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconProvider["default"], {
+      type: "svgIcon",
+      svgIconClass: "app-svg-icon"
+    }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      name: "ZD-close2"
+    }))),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "svgIcon" - passes "size" prop to svg', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconProvider["default"], {
+      type: "svgIcon"
+    }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      name: "ZD-close2",
+      size: "20"
+    }))),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "svgIcon" - passes "title" prop to svg', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconProvider["default"], {
+      type: "svgIcon"
+    }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      name: "ZD-close2",
+      title: "Close"
+    }))),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "svgIcon" - passes "iconClass" prop to svg', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconProvider["default"], {
+      type: "svgIcon"
+    }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      name: "ZD-close2",
+      iconClass: "custom-class"
+    }))),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "svgIcon" - passes "a11y" ariaHidden false', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconProvider["default"], {
+      type: "svgIcon"
+    }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      name: "ZD-close2",
+      a11y: {
+        ariaHidden: false
+      }
+    }))),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('multiple icons share the same provider context', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconProvider["default"], {
+      type: "svgIcon",
+      svgIconPrefix: "#"
+    }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      name: "ZD-close2"
+    }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      name: "ZD-addAccount"
+    }))),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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/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;