@zohodesk/icons 1.3.0 → 1.3.2

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import SvgIcon from "../SvgIcon";
+import { render } from '@testing-library/react';
+describe('SvgIcon - ', () => {
+  test('rendering the "default" props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SvgIcon, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with "name" and "svgPrefix"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SvgIcon, {
+      name: "ZD-close2",
+      svgPrefix: "#"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with external sprite "svgPrefix"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SvgIcon, {
+      name: "ZD-close2",
+      svgPrefix: "/sprites.svg#"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with "title"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SvgIcon, {
+      name: "ZD-close2",
+      svgPrefix: "#",
+      title: "Close"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with "size"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SvgIcon, {
+      name: "ZD-close2",
+      svgPrefix: "#",
+      size: "15"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with "iconClass"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SvgIcon, {
+      name: "ZD-close2",
+      svgPrefix: "#",
+      iconClass: "myIconClass"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with "ariaHidden" false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SvgIcon, {
+      name: "ZD-close2",
+      svgPrefix: "#",
+      a11y: {
+        ariaHidden: false
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const titlePositions = ['top', 'bottom', 'left', 'right'];
+  test.each(titlePositions)('rendering with "titlePosition" - %s', titlePosition => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SvgIcon, {
+      name: "ZD-close2",
+      svgPrefix: "#",
+      titlePosition: titlePosition
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with "tagAttributes"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SvgIcon, {
+      name: "ZD-close2",
+      svgPrefix: "#",
+      tagAttributes: {
+        'data-custom-attr': 'true'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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();
+  });
+});