@zohodesk/svg 1.0.0-temp.53 → 1.0.0-temp.55

package/es/Loader/Loader.js

@@ -18,6 +18,7 @@ export default class Loader extends React.PureComponent {
       transformOrigin: 'center'
     };
   }
+
   render() {
     let {
       dataId
@@ -55,11 +56,10 @@ export default class Loader extends React.PureComponent {
       strokeDashoffset: 50
     })));
   }
+
 }
 Loader.propTypes = LoaderProps;
-Loader.defaultProps = LoaderDefaultProps;
-
-// if (__DOCS__) {
+Loader.defaultProps = LoaderDefaultProps; // if (__DOCS__) {
 //   Loader.docs = {
 //     componentGroup: 'SVG'
 //   };

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

@@ -30,7 +30,8 @@ export default class SVG extends React.Component {
     }, /*#__PURE__*/React.createElement("svg", {
       height: "100%",
       width: "100%",
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, /*#__PURE__*/React.createElement("use", {
       xlinkHref: `#${name}`
     }))) : isRender ? /*#__PURE__*/React.createElement("div", {
@@ -41,14 +42,14 @@ export default class SVG extends React.Component {
       width: "100%",
       viewBox: viewBox,
       "data-id": dataId,
+      "data-test-id": dataId,
       style: styleName
     }, children)) : null);
   }
+
 }
 SVG.propTypes = SvgProps;
-SVG.defaultProps = SvgDefaultProps;
-
-// if (__DOCS__) {
+SVG.defaultProps = SvgDefaultProps; // if (__DOCS__) {
 //   SVG.docs = {
 //     componentGroup: 'SVG'
 //   };

package/es/SVG/SVG.module.css

@@ -1,25 +1,30 @@
 .cover {
-  height: 100%;
+  height: 100% ;
 }
 .large {
-  height: var(--zd_size160);
-  width: var(--zd_size160);
+  height: var(--zd_size160) ;
+  width: var(--zd_size160) ;
 }
 .small {
-  height: var(--zd_size130);
-  width: var(--zd_size130);
+  height: var(--zd_size130) ;
+  width: var(--zd_size130) ;
 }
-.svgCenter {
-  margin-left: auto;
-  margin-right: auto;
+[dir=ltr] .svgCenter {
+  margin-left: auto ;
+  margin-right: auto ;
 }
+[dir=rtl] .svgCenter {
+  margin-right: auto ;
+  margin-left: auto ;
+}
+
 .loaderWrapper {
-  height: var(--zd_size40);
-  width: var(--zd_size40);
+  height: var(--zd_size40) ;
+  width: var(--zd_size40) ;
 }
 .center {
-  height: 100%;
-  width: 100%;
+  height: 100% ;
+  width: 100% ;
   display: flex;
   align-items: center;
   justify-content: center;

package/es/SVG/SvgLoader.js

@@ -1,18 +1,21 @@
 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, { useEffect, useState } from 'react';
 export default function SvgLoader(props) {
   let uiProps = {};
   Object.keys(props).filter(prop => prop != 'imageUrl').map(prop => {
     uiProps[prop] = props[prop];
   });
+
   let image = require(`./images/${props.imageUrl}`);
+
   return /*#__PURE__*/React.createElement("image", _extends({
     xlinkHref: image
   }, uiProps));
 }
 export function StaticSvg(props) {
   let uiProps = {},
-    [image, setImage] = useState(null);
+      [image, setImage] = useState(null);
   Object.keys(props).filter(prop => prop != 'getImage').map(prop => {
     uiProps[prop] = props[prop];
   });

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

@@ -1,4 +1,5 @@
 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 { EmptyStateProps } from './../props/propTypes';
 import { EmptyStateDefaultProps } from './../props/defaultProps';
@@ -15,13 +16,12 @@ export default class EmptyCustomDomain extends React.Component {
       width: "100%"
     }));
   }
+
 }
 EmptyCustomDomain.propTypes = EmptyStateProps;
-EmptyCustomDomain.defaultProps = {
-  ...EmptyStateDefaultProps,
+EmptyCustomDomain.defaultProps = { ...EmptyStateDefaultProps,
   dataId: 'emptyCustomDomain'
-};
-// if (__DOCS__) {
+}; // if (__DOCS__) {
 //   EmptyCustomDomain.docs = {
 //     componentGroup: 'Emptystate'
 //   };

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>
+`;