@zohodesk/svg 1.0.0 → 1.1.1

package/es/Loader/__tests__/Loader.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Loader from '../Loader';
+import { render } from "@testing-library/react";
+describe('Loader componet', () => {
+  test('sholud render the basic strucutr of Loader', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Loader, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/Loader/__tests__/__snapshots__/Loader.spec.js.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loader componet sholud render the basic strucutr of Loader 1`] = `
+<DocumentFragment>
+  <div
+    class="center"
+  >
+    <div
+      aria-hidden="true"
+      class=" loaderWrapper default svgCenter "
+    >
+      <svg
+        data-id="loader"
+        data-test-id="loader"
+        height="100%"
+        style="animation: loaderone 2s linear infinite;"
+        viewBox="0 0 40 40"
+        width="100%"
+      >
+        <defs>
+          <style>
+            @keyframes circleAnimation_1{to{stroke-dashoffset:-82}}@keyframes circleAnimation_2{to{stroke-dashoffset:-50}}@keyframes loaderone{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}
+          </style>
+        </defs>
+        <circle
+          cx="20"
+          cy="20"
+          fill="none"
+          r="13"
+          stroke="#089949"
+          stroke-dasharray="82"
+          stroke-dashoffset="82"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          style="animation: circleAnimation_1 1.5s linear infinite; transform-origin: center;"
+        />
+        <circle
+          cx="20"
+          cy="20"
+          fill="none"
+          r="8"
+          stroke="#17c662"
+          stroke-dasharray="50"
+          stroke-dashoffset="50"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          style="animation: circleAnimation_2 1.2s linear infinite; transform-origin: center;"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/SVG/__tests__/SVG.spec.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import SVG from '../SVG';
+import { render } from "@testing-library/react";
+describe('SVG componet', () => {
+  test('sholud render the basic strucutr of svg', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SVG, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const palette = ['default', 'dark', 'danger'];
+  test.each(palette)('Should render palette of svg - %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SVG, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const size = ['small', 'large'];
+  test.each(size)('Should render size of svg - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SVG, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render alignHorizontal is false in svg', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SVG, {
+      alignHorizontal: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render alignHorizontal is false in svg', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SVG, {
+      isSymbol: true,
+      alignHorizontal: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render isFluid is true in svg ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SVG, {
+      isFluid: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render isFluid is true in svg with symbol', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SVG, {
+      isSymbol: true,
+      isFluid: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render isRender is false in svg', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SVG, {
+      isSymbol: true,
+      isRender: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render isSymbol is true in svg', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SVG, {
+      isSymbol: true
+    }, " Snapshot "));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render Name in svg', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SVG, {
+      isSymbol: true,
+      name: "Snapshot"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render viewBox in svg', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SVG, {
+      viewBox: "0 0 500 500"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render className in svg', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SVG, {
+      className: "Snapshot"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render styleName in SVG', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SVG, {
+      styleName: {
+        height: '100px',
+        width: '100px'
+      }
+    }, " Snapshot"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/SVG/__tests__/__snapshots__/SVG.spec.js.snap

@@ -0,0 +1,328 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SVG componet Should render palette of svg - danger 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="  danger svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      viewBox=""
+      width="100%"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet Should render palette of svg - dark 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="  dark svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      viewBox=""
+      width="100%"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet Should render palette of svg - default 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="  default svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      viewBox=""
+      width="100%"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet Should render size of svg - large 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="large  default svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      viewBox=""
+      width="100%"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet Should render size of svg - small 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="small  default svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      viewBox=""
+      width="100%"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet sholud render Name in svg 1`] = `
+<DocumentFragment>
+  <div
+    hidden=""
+  >
+    <svg>
+      <symbol
+        id="Snapshot"
+        viewBox=""
+      />
+    </svg>
+  </div>
+  <div
+    aria-hidden="true"
+    class="  default svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      width="100%"
+    >
+      <use
+        xlink:href="#Snapshot"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet sholud render alignHorizontal is false in svg 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="  default  "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      viewBox=""
+      width="100%"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet sholud render alignHorizontal is false in svg 2`] = `
+<DocumentFragment>
+  <div
+    hidden=""
+  >
+    <svg>
+      <symbol
+        id=""
+        viewBox=""
+      />
+    </svg>
+  </div>
+  <div
+    aria-hidden="true"
+    class="  default  "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      width="100%"
+    >
+      <use
+        xlink:href="#"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet sholud render className in svg 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class=" Snapshot default svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      viewBox=""
+      width="100%"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet sholud render isFluid is true in svg  1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="cover  default svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      viewBox=""
+      width="100%"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet sholud render isFluid is true in svg with symbol 1`] = `
+<DocumentFragment>
+  <div
+    hidden=""
+  >
+    <svg>
+      <symbol
+        id=""
+        viewBox=""
+      />
+    </svg>
+  </div>
+  <div
+    aria-hidden="true"
+    class="cover  default svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      width="100%"
+    >
+      <use
+        xlink:href="#"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet sholud render isRender is false in svg 1`] = `
+<DocumentFragment>
+  <div
+    hidden=""
+  >
+    <svg>
+      <symbol
+        id=""
+        viewBox=""
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet sholud render isSymbol is true in svg 1`] = `
+<DocumentFragment>
+  <div
+    hidden=""
+  >
+    <svg>
+      <symbol
+        id=""
+        viewBox=""
+      >
+         Snapshot 
+      </symbol>
+    </svg>
+  </div>
+  <div
+    aria-hidden="true"
+    class="  default svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      width="100%"
+    >
+      <use
+        xlink:href="#"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet sholud render the basic strucutr of svg 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="  default svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      viewBox=""
+      width="100%"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet sholud render viewBox in svg 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="  default svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      viewBox="0 0 500 500"
+      width="100%"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet should render styleName in SVG 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="  default svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      style="height: 100px; width: 100px;"
+      viewBox=""
+      width="100%"
+    >
+       Snapshot
+    </svg>
+  </div>
+</DocumentFragment>
+`;

package/es/SVG/props/propTypes.js

@@ -10,6 +10,6 @@ export const SvgProps = {
   name: PropTypes.string,
   size: PropTypes.oneOf(['small', 'large']),
   viewBox: PropTypes.string,
-  palette: PropTypes.oneOf(['default', 'dark']),
-  styleName: PropTypes.node
+  palette: PropTypes.oneOf(['default', 'dark', 'danger']),
+  styleName: PropTypes.object
 };

package/es/emptystate/props/propTypes.js

@@ -5,5 +5,5 @@ export const EmptyStateProps = {
   dataId: PropTypes.string,
   isRender: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'large']),
-  palette: PropTypes.oneOf(['default', 'dark'])
+  palette: PropTypes.oneOf(['default', 'dark', 'danger'])
 };

package/es/emptystate/version1/__tests__/__snapshots__/version1.spec.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SVG componet Rendering all svgs in version1 emptystate EmptyCustomDomain 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="large  default svgCenter "
+  >
+    <svg
+      data-id="emptyCustomDomain"
+      data-test-id="emptyCustomDomain"
+      height="100%"
+      viewBox="0 0 298 123.46"
+      width="100%"
+    >
+      <image
+        height="100%"
+        width="100%"
+        xlink:href="EmptyCustomDomain.svg"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;

package/es/emptystate/version1/__tests__/version1.spec.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import * as index from '../index';
+import { render } from "@testing-library/react";
+describe('SVG componet', () => {
+  test.each(Object.keys(index))('Rendering all svgs in version1 emptystate %s', key => {
+    let Component = index[key];
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Component, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});