@zohodesk/icons 1.3.1 → 1.3.2

package/README.md

@@ -2,11 +2,14 @@
 
 In this GiftBox we Provide FontIcons
 
+# 1.3.2
+
+- Introduced SvgIcon, IconContext, and IconProvider to enable centralized control of SvgIcon behavior through IconProvider.
 
 # 1.3.1
 
 - ReactTicketsFontIcon --> ZD-TK-sideChat icon included.
-- ReactAutomationIcon --> ZD-TK-sideChat icon included.
+- ReactAutomationIcon --> ZD-AU-skip, ZD-AU-scheduleDelay, ZD-AU-reschedule, ZD-AU-nodeRemove and ZD-AU-failure icons included.
 
 # 1.3.0
 

package/es/Context/IconContext.js

@@ -0,0 +1,7 @@
+import React from 'react';
+const IconContext = /*#__PURE__*/React.createContext({
+  type: 'fontIcon',
+  svgIconPrefix: '#',
+  svgIconClass: ''
+});
+export default IconContext;

package/es/Context/IconProvider.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import IconContext from "./IconContext";
+import { IconProviderProps } from "./props/propTypes";
+import { IconProviderDefaultProps } from "./props/defaultProps";
+export default function IconProvider(props) {
+  let {
+    type,
+    svgIconPrefix,
+    svgIconClass,
+    children
+  } = props;
+  const value = React.useMemo(() => ({
+    type,
+    svgIconPrefix,
+    svgIconClass
+  }), [type, svgIconPrefix, svgIconClass]);
+  return /*#__PURE__*/React.createElement(IconContext.Provider, {
+    value: value
+  }, children);
+}
+IconProvider.propTypes = IconProviderProps;
+IconProvider.defaultProps = IconProviderDefaultProps;

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Icon from "../../Icon";
+import IconProvider from "../IconProvider";
+describe('IconProvider / IconContext - ', () => {
+  test('default context - renders font icon (no provider)', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close2"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "fontIcon" - renders font icon', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconProvider, {
+      type: "fontIcon"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close2"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "svgIcon" - renders svg symbol', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconProvider, {
+      type: "svgIcon"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close2"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "svgIcon" with custom "svgIconPrefix"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconProvider, {
+      type: "svgIcon",
+      svgIconPrefix: "/sprites.svg#"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close2"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "svgIcon" with "svgIconClass"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconProvider, {
+      type: "svgIcon",
+      svgIconClass: "app-svg-icon"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close2"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "svgIcon" - passes "size" prop to svg', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconProvider, {
+      type: "svgIcon"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close2",
+      size: "20"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "svgIcon" - passes "title" prop to svg', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconProvider, {
+      type: "svgIcon"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close2",
+      title: "Close"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "svgIcon" - passes "iconClass" prop to svg', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconProvider, {
+      type: "svgIcon"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close2",
+      iconClass: "custom-class"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('type "svgIcon" - passes "a11y" ariaHidden false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconProvider, {
+      type: "svgIcon"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close2",
+      a11y: {
+        ariaHidden: false
+      }
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('multiple icons share the same provider context', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconProvider, {
+      type: "svgIcon",
+      svgIconPrefix: "#"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close2"
+    }), /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-addAccount"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/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/es/Context/props/defaultProps.js

@@ -0,0 +1,5 @@
+export const IconProviderDefaultProps = {
+  type: 'fontIcon',
+  svgIconPrefix: '#',
+  svgIconClass: ''
+};

package/es/Context/props/propTypes.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+export const IconProviderProps = {
+  type: PropTypes.oneOf(['fontIcon', 'svgIcon']),
+  svgIconPrefix: PropTypes.string,
+  svgIconClass: PropTypes.string,
+  children: PropTypes.node.isRequired
+};

package/es/Icon/FontIcon.js

@@ -65,11 +65,4 @@ export default class FontIcon extends React.Component {
 
 }
 FontIcon.propTypes = IconProps;
-FontIcon.defaultProps = IconDefaultProps;
-
-if (__DOCS__) {
-  FontIcon.docs = {
-    componentGroup: 'Icon',
-    folderName: 'Style Guide'
-  };
-}
+FontIcon.defaultProps = IconDefaultProps;

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

@@ -0,0 +1,45 @@
+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); }
+
+import React from 'react';
+import { SvgIconDefaultProps } from "./props/defaultProps";
+import { SvgIconProps } from "./props/propTypes";
+import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
+import style from "./Icon.module.css";
+export default function SvgIcon(_ref) {
+  let {
+    name,
+    onClick,
+    title,
+    dataId,
+    dataSelectorId,
+    size,
+    iconClass,
+    titlePosition,
+    tagAttributes,
+    a11y,
+    svgPrefix
+  } = _ref;
+  let {
+    ariaHidden = true
+  } = a11y;
+  let href = `${svgPrefix}${name}`;
+  let fontStyle = size ? {
+    '--zd-iconfont-size': 'var(--zd_font_size' + size + ')'
+  } : DUMMY_OBJECT;
+  let className = `${style.svgIcon} ${iconClass ? iconClass : ''}  ${onClick ? style.cursor : ''}`;
+  return /*#__PURE__*/React.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.createElement("use", {
+    href: href
+  }));
+}
+SvgIcon.propTypes = SvgIconProps;
+SvgIcon.defaultProps = SvgIconDefaultProps;

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