@zohodesk/icons 1.3.1 → 1.3.3

package/README.md

@@ -2,11 +2,18 @@
 
 In this GiftBox we Provide FontIcons
 
+# 1.3.3
+
+- ReactIMReact --> New icon set created.
+
+# 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/assets/fonts/zd-rIM.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="1024" descent="0" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="0" d="" />
+<glyph unicode="&#xc7500;" glyph-name="endChat" d="M753.408 832.256h-482.816c-42.24 0-76.8-34.56-76.8-76.8v-342.272c0-42.24 34.56-76.8 76.8-76.8h56.32v-95.744c0-19.968 12.032-37.632 30.464-45.312 5.888-2.304 12.288-3.584 18.432-3.584 13.056 0 25.6 5.12 35.072 14.848l125.696 129.792h216.832c42.24 0 76.8 34.56 76.8 76.8v342.272c0 42.24-34.56 76.8-76.8 76.8zM779.008 413.184c0-14.080-11.52-25.6-25.6-25.6h-227.584c-6.912 0-13.568-2.816-18.432-7.68l-129.024-133.376v115.456c0 14.080-11.52 25.6-25.6 25.6h-81.92c-14.080 0-25.6 11.52-25.6 25.6v342.272c0 14.080 11.52 25.6 25.6 25.6h482.56c14.080 0 25.6-11.52 25.6-25.6v-342.272zM612.096 652.032l-59.904-59.904 59.904-59.904c9.984-9.984 9.984-26.112 0-36.096-5.12-5.12-11.52-7.424-18.176-7.424s-13.056 2.56-18.176 7.424l-59.904 59.904-59.904-59.904c-5.12-5.12-11.52-7.424-18.176-7.424s-13.056 2.56-18.176 7.424c-9.984 9.984-9.984 26.112 0 36.096l59.904 59.904-59.904 59.904c-9.984 9.984-9.984 26.112 0 36.096s26.112 9.984 36.096 0l59.904-59.904 59.904 59.904c9.984 9.984 26.112 9.984 36.096 0s9.984-26.112 0-36.096z" />
+</font></defs></svg>

package/assets/react/zd-font-rIM.module.css

@@ -0,0 +1,20 @@
+@font-face{
+  font-family:"zdfonts-rIM";
+  src:url('../fonts/zd-rIM.woff2') format('woff2'), url('../fonts/zd-rIM.woff') format('woff'), url('../fonts/zd-rIM.svg#zdfonts') format('svg');
+  font-weight:normal;
+  font-style:normal;
+  font-display:block;
+}
+
+@layer dot-icons.core {
+/*$Id$*/
+
+
+.icon-endChat{
+	font-family:"zdfonts-rIM" !important;
+}
+
+.icon-endChat:before{
+  content:"\c7500";
+}
+}

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/FontFactory.js

@@ -2415,5 +2415,8 @@ export const FontFactory = {
     'ZD-AC-stackedBar': ['icon-stackedBar', 2],
     'ZD-AC-askZia': 'icon-askZia',
     'ZD-AC-growth': 'icon-growth'
+  },
+  ReactIMIcon: {
+    'ZD-IM-endChat': 'icon-endChat'
   }
 };

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