@zohodesk/svg 1.1.18 → 1.1.20

package/install.md

@@ -1,11 +1,11 @@
-- For New :
-
-# npm i
-# npm run common_package_build
-
-For Update:
-
-# npm run download
-# npm run common_package_build
-
-
+- For New :
+
+# npm i
+# npm run common_package_build
+
+For Update:
+
+# npm run download
+# npm run common_package_build
+
+

package/lib/Loader/Loader.js

@@ -17,6 +17,8 @@ var _SVG = _interopRequireDefault(require("./../SVG/SVG"));
 
 var _SVGModule = _interopRequireDefault(require("./../SVG/SVG.module.css"));
 
+var _LoaderSvgModule = _interopRequireDefault(require("./LoaderSvg.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -45,23 +47,9 @@ var Loader = /*#__PURE__*/function (_React$PureComponent) {
   var _super = _createSuper(Loader);
 
   function Loader(props) {
-    var _this;
-
     _classCallCheck(this, Loader);
 
-    _this = _super.call(this, 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'
-    };
-    return _this;
+    return _super.call(this, props);
   }
 
   _createClass(Loader, [{
@@ -73,10 +61,9 @@ var Loader = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
         viewBox: "0 0 40 40",
         name: "Loader",
-        className: "".concat(_SVGModule["default"].loaderWrapper),
-        dataId: dataId,
-        styleName: this.viewBoxStyle
-      }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].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["default"].createElement("circle", {
+        className: "".concat(_SVGModule["default"].loaderWrapper, " ").concat(_LoaderSvgModule["default"].container),
+        dataId: dataId
+      }, /*#__PURE__*/_react["default"].createElement("circle", {
         fill: "none",
         stroke: "#089949",
         strokeWidth: 2,
@@ -85,7 +72,7 @@ var Loader = /*#__PURE__*/function (_React$PureComponent) {
         cx: 20,
         cy: 20,
         r: 13,
-        style: this.defsStyle,
+        className: _LoaderSvgModule["default"].outerCircle,
         strokeDasharray: 82,
         strokeDashoffset: 82
       }), /*#__PURE__*/_react["default"].createElement("circle", {
@@ -96,7 +83,7 @@ var Loader = /*#__PURE__*/function (_React$PureComponent) {
         cx: 20,
         cy: 20,
         r: 8,
-        style: this.circleStyle,
+        className: _LoaderSvgModule["default"].innerCircle,
         strokeDasharray: 50,
         strokeDashoffset: 50
       })));

package/lib/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/lib/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/lib/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
+}