@zohodesk/icons 1.0.0-exp.4 → 1.0.0-temp-101

package/es/Icon/Icon.module.css

@@ -1,43 +1,56 @@
-/* $Id$ */
-.basic {
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  display: inline-block;
-  vertical-align: middle;
-  font-size: var(--zd-iconfont-size, inherit);
-}
-.fbold {
-  font-weight: bold;
-}
-.cursor {
-  cursor: pointer;
-}
-.red :global .path2::before,
-.red2 :global .path3::before {
-  color: #de3535 !important;
-}
-.green :global .path2::before,
-.green2 :global .path3::before {
-  color: #26a942 !important;
-}
-.blue :global .path2::before,
-.blue2 :global .path3::before {
-  color: #0a73eb !important;
-}
-.lightBlue :global .path2::before,
-.lightBlue2 :global .path3::before {
-  color: #00acda !important;
-}
-[dir='rtl'] .rtl {
-  transform: rotateY(180deg);
-}
-
-/* .twotwo :global .path1:before {
-  color: red !important;
-} */
+/* $Id$ */
+.basic {
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: var(--zd-iconfont-size, inherit);
+}
+.basic,.basic > span{
+  word-wrap: initial;
+  word-break: initial;
+}
+
+.fbold {
+  font-weight: bold;
+}
+
+.cursor {
+  cursor: pointer;
+}
+
+.red :global .path2::before,
+.red2 :global .path3::before {
+  color: #de3535 !important;
+}
+
+.green :global .path2::before,
+.green2 :global .path3::before {
+  color: #26a942 !important;
+}
+
+.blue :global .path2::before,
+.blue2 :global .path3::before {
+  color: #0a73eb !important;
+}
+
+.lightBlue :global .path2::before,
+.lightBlue2 :global .path3::before {
+  color: #00acda !important;
+}
+
+/*rtl:ignore*/
+[dir='rtl'] .rtl {
+  transform: rotateY(180deg);
+}
+
+/*rtl:ignore*/
+/* .twotwo :global .path1:before {
+  color: red !important;
+} */

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import FontIcon from '../FontIcon';
+import { render } from "@testing-library/react";
+describe('FontIcon - ', () => {
+  test('rendering the "default" props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('checking "isBold" is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      isBold: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('checking "isBold" is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      isBold: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the "iconClass"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      iconClass: "iconStyleCss"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the "fontSize"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      size: "15"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the "title"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      title: "FontIcon"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the "pathname"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      pathName: "zd67f91bb627"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering "Name" with "iconContent" and without path', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      name: ['icon-addAccounts', 3],
+      iconContent: {
+        path1: "icon1",
+        path2: "icon2",
+        path3: "icon3"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering "iconClass" with path ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      iconClass: "iconStyleCss",
+      name: ['icon-addAccounts', 3],
+      iconContent: {
+        path1: "icon1",
+        path2: "icon2",
+        path3: "icon3"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering "custumIcon" with path', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      name: ['icon-ch-chat-in', 2],
+      iconName: "ZD-chChatMis",
+      iconContent: {
+        path1: "icon1",
+        path2: "icon2"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering "ariaHidden" is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      a11y: {
+        ariaHidden: false
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering "IconName"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      iconName: "ZD-addAccount"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering custom icon name', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      iconName: "ZD-chChatMis"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const titlePosition = ['top', 'bottom', 'left', 'right'];
+  test.each(titlePosition)('rendering the "titlePostion" to - %s', titlePosition => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FontIcon, {
+      titlePosition: titlePosition
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/Icon/__tests__/__snapshots__/FontIcon.spec.js.snap

@@ -0,0 +1,238 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FontIcon -  checking "isBold" is false 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  checking "isBold" is true 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined fbold   "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering "IconName" 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering "Name" with "iconContent" and without path 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <span
+      class="icon1 "
+    />
+    <span
+      class="icon2 "
+    />
+    <span
+      class="icon3 "
+    />
+  </i>
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering "ariaHidden" is false 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="false"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering "custumIcon" with path 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    red"
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <span
+      class="icon1 path1"
+    />
+    <span
+      class="icon2 path2"
+    />
+  </i>
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering "iconClass" with path  1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined  iconStyleCss  "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  >
+    <span
+      class="icon1 path1"
+    />
+    <span
+      class="icon2 path2"
+    />
+    <span
+      class="icon3 path3"
+    />
+  </i>
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering custom icon name 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    red"
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "default" props 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "fontSize" 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    style="--zd-iconfont-size: var(--zd_font_size15);"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "iconClass" 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined  iconStyleCss  "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "pathname" 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic zd67f91bb627    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "title" 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title="FontIcon"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "titlePostion" to - bottom 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title-position="bottom"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "titlePostion" to - left 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title-position="left"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "titlePostion" to - right 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title-position="right"
+  />
+</DocumentFragment>
+`;
+
+exports[`FontIcon -  rendering the "titlePostion" to - top 1`] = `
+<DocumentFragment>
+  <i
+    aria-hidden="true"
+    class="zd_font_icons basic undefined    "
+    data-id="fontIcon"
+    data-selector-id="fontIcon"
+    data-test-id="fontIcon"
+    data-title-position="top"
+  />
+</DocumentFragment>
+`;

package/es/Icon/asyncComponent.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || 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';
 export default function asyncComponent(getComponent) {
   return class AsyncComponent extends React.Component {
@@ -50,9 +48,9 @@ export default function asyncComponent(getComponent) {
       } = this.state;
 
       if (Component) {
-        return /*#__PURE__*/React.createElement(Component, _extends({}, this.props, {
+        return /*#__PURE__*/React.createElement(Component, { ...this.props,
           ref: this.getRef
-        }));
+        });
       }
 
       return null;