@zohodesk/icons 1.3.1 → 1.3.2

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;
 

package/lib/Icon/props/defaultProps.js

@@ -3,10 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconDefaultProps = void 0;
+exports.SvgIconDefaultProps = exports.IconDefaultProps = void 0;
+
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
+
 var IconDefaultProps = {
-  a11y: {},
+  a11y: _constants.DUMMY_OBJECT,
+  dataSelectorId: 'fontIcon',
+  dataId: 'fontIcon'
+};
+exports.IconDefaultProps = IconDefaultProps;
+var SvgIconDefaultProps = {
+  a11y: _constants.DUMMY_OBJECT,
   dataSelectorId: 'fontIcon',
   dataId: 'fontIcon'
 };
-exports.IconDefaultProps = IconDefaultProps;
+exports.SvgIconDefaultProps = SvgIconDefaultProps;

package/lib/Icon/props/propTypes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconProps = void 0;
+exports.SvgIconProps = exports.IconProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -11,6 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var IconProps = {
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   iconClass: _propTypes["default"].string,
   iconContent: _propTypes["default"].object,
   isBold: _propTypes["default"].bool,
@@ -26,4 +27,21 @@ var IconProps = {
     ariaHidden: _propTypes["default"].bool
   })
 };
-exports.IconProps = IconProps;
+exports.IconProps = IconProps;
+var SvgIconProps = {
+  dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
+  iconClass: _propTypes["default"].string,
+  svgClass: _propTypes["default"].string,
+  svgPrefix: _propTypes["default"].string,
+  onClick: _propTypes["default"].func,
+  size: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  name: _propTypes["default"].string.isRequired,
+  titlePosition: _propTypes["default"].oneOf(['top', 'bottom', 'left', 'right']),
+  tagAttributes: _propTypes["default"].object,
+  a11y: _propTypes["default"].shape({
+    ariaHidden: _propTypes["default"].bool
+  })
+};
+exports.SvgIconProps = SvgIconProps;

package/lib/index.js

@@ -9,7 +9,23 @@ Object.defineProperty(exports, "Icon", {
     return _Icon["default"];
   }
 });
+Object.defineProperty(exports, "IconContext", {
+  enumerable: true,
+  get: function get() {
+    return _IconContext["default"];
+  }
+});
+Object.defineProperty(exports, "IconProvider", {
+  enumerable: true,
+  get: function get() {
+    return _IconProvider["default"];
+  }
+});
 
 var _Icon = _interopRequireDefault(require("./Icon"));
 
+var _IconContext = _interopRequireDefault(require("./Context/IconContext"));
+
+var _IconProvider = _interopRequireDefault(require("./Context/IconProvider"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/icons",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "DOT - Icons",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -58,10 +58,12 @@
     "postcss": "^8.5.6",
     "@zohodesk/react-cli": "1.1.27",
     "@zohodesk/client_build_tool": "0.0.20",
-    "@dot-system/css-utility": "0.1.1"
+    "@dot-system/css-utility": "0.1.1",
+    "@zohodesk/dotkit": "1.0.9"
   },
   "peerDependencies": {
     "@zohodesk/variables": "1.3.1",
-    "@dot-system/css-utility": "0.1.1"
+    "@dot-system/css-utility": "0.1.1",
+    "@zohodesk/dotkit": "1.0.9"
   }
-}
+}