@zohodesk/svg 1.0.0-temp.56 → 1.0.0-temp.58

package/es/Loader/Loader.js

@@ -3,20 +3,10 @@ import { LoaderDefaultProps } from './props/defaultProps';
 import { LoaderProps } from './props/propTypes';
 import SVG from './../SVG/SVG';
 import cssStyle from './../SVG/SVG.module.css';
+import style from './LoaderSvg.module.css';
 export default class Loader extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.viewBoxStyle = {
-      animation: 'loaderone 2s linear infinite'
-    };
-    this.defsStyle = {
-      animation: 'circleAnimation_1 1.5s linear infinite',
-      transformOrigin: 'center'
-    };
-    this.circleStyle = {
-      animation: 'circleAnimation_2 1.2s linear infinite',
-      transformOrigin: 'center'
-    };
   }
 
   render() {
@@ -28,10 +18,9 @@ export default class Loader extends React.PureComponent {
     }, /*#__PURE__*/React.createElement(SVG, {
       viewBox: "0 0 40 40",
       name: "Loader",
-      className: `${cssStyle.loaderWrapper}`,
-      dataId: dataId,
-      styleName: this.viewBoxStyle
-    }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, '@keyframes circleAnimation_1{to{stroke-dashoffset:-82}}@keyframes circleAnimation_2{to{stroke-dashoffset:-50}}@keyframes loaderone{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}')), /*#__PURE__*/React.createElement("circle", {
+      className: `${cssStyle.loaderWrapper} ${style.container}`,
+      dataId: dataId
+    }, /*#__PURE__*/React.createElement("circle", {
       fill: "none",
       stroke: "#089949",
       strokeWidth: 2,
@@ -40,7 +29,7 @@ export default class Loader extends React.PureComponent {
       cx: 20,
       cy: 20,
       r: 13,
-      style: this.defsStyle,
+      className: style.outerCircle,
       strokeDasharray: 82,
       strokeDashoffset: 82
     }), /*#__PURE__*/React.createElement("circle", {
@@ -51,7 +40,7 @@ export default class Loader extends React.PureComponent {
       cx: 20,
       cy: 20,
       r: 8,
-      style: this.circleStyle,
+      className: style.innerCircle,
       strokeDasharray: 50,
       strokeDashoffset: 50
     })));

package/es/Loader/LoaderSvg.module.css

@@ -0,0 +1,28 @@
+[dir=ltr] .container > svg{
+     animation:  loaderone-ltr 2s linear infinite;
+}[dir=rtl] .container > svg{
+     animation:  loaderone-rtl 2s linear infinite;
+}
+.outerCircle{
+    transform-origin: center;
+}
+[dir=ltr] .outerCircle{
+     animation: outerCircleAnimation 1.5s linear infinite;
+}
+[dir=rtl] .outerCircle{
+     animation: outerCircleAnimation 1.5s linear infinite;
+}
+.innerCircle{
+     transform-origin: center;
+}
+[dir=ltr] .innerCircle{
+     animation: innerCircleAnimation 1.2s linear infinite;
+}
+[dir=rtl] .innerCircle{
+     animation: innerCircleAnimation 1.2s linear infinite;
+}
+
+@keyframes outerCircleAnimation{to{stroke-dashoffset:-82}}
+@keyframes innerCircleAnimation{to{stroke-dashoffset:-50}}
+@keyframes loaderone-ltr{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}
+@keyframes loaderone-rtl{0%{transform:rotate(0deg)}to{transform:rotate(-359deg)}}

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

@@ -1,54 +1,48 @@
-// 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>
-`;
+// 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 container default svgCenter "
+    >
+      <svg
+        data-id="loader"
+        data-test-id="loader"
+        height="100%"
+        viewBox="0 0 40 40"
+        width="100%"
+      >
+        <circle
+          class="outerCircle"
+          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"
+        />
+        <circle
+          class="innerCircle"
+          cx="20"
+          cy="20"
+          fill="none"
+          r="8"
+          stroke="#17c662"
+          stroke-dasharray="50"
+          stroke-dashoffset="50"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/SVG/SVG.module.css

@@ -1,34 +1,34 @@
-.cover {
-  height: 100% ;
-}
-.large {
-  height: var(--zd_size160) ;
-  width: var(--zd_size160) ;
-}
-.small {
-  height: var(--zd_size130) ;
-  width: var(--zd_size130) ;
-}
-[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) ;
-}
-.loader {
-  width: 100% ;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.center {
-  height: 100% ;
-  composes: loader
-}
+.cover {
+  height: 100% ;
+}
+.large {
+  height: var(--zd_size160) ;
+  width: var(--zd_size160) ;
+}
+.small {
+  height: var(--zd_size130) ;
+  width: var(--zd_size130) ;
+}
+[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) ;
+}
+.loader {
+  width: 100% ;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.center {
+  height: 100% ;
+  composes: loader
+}