@zohodesk/svg 1.1.0 → 1.1.1

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/__tests__/Loader.spec.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Loader = _interopRequireDefault(require("../Loader"));
+
+var _react2 = require("@testing-library/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Loader componet', function () {
+  test('sholud render the basic strucutr of Loader', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/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/lib/SVG/SVG.module.css

@@ -1,31 +1,31 @@
-.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) ;
-}
-.center {
-  height: 100% ;
-  width: 100% ;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+.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) ;
+}
+.center {
+  height: 100% ;
+  width: 100% ;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/lib/SVG/__tests__/SVG.spec.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SVG = _interopRequireDefault(require("../SVG"));
+
+var _react2 = require("@testing-library/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('SVG componet', function () {
+  test('sholud render the basic strucutr of svg', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SVG["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var palette = ['default', 'dark', 'danger'];
+  test.each(palette)('Should render palette of svg - %s', function (palette) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
+      palette: palette
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var size = ['small', 'large'];
+  test.each(size)('Should render size of svg - %s', function (size) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
+      size: size
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render alignHorizontal is false in svg', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
+      alignHorizontal: false
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render alignHorizontal is false in svg', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
+      isSymbol: true,
+      alignHorizontal: false
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render isFluid is true in svg ', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
+      isFluid: true
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render isFluid is true in svg with symbol', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
+      isSymbol: true,
+      isFluid: true
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render isRender is false in svg', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
+      isSymbol: true,
+      isRender: false
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render isSymbol is true in svg', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
+      isSymbol: true
+    }, " Snapshot ")),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render Name in svg', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
+      isSymbol: true,
+      name: "Snapshot"
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render viewBox in svg', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
+      viewBox: "0 0 500 500"
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('sholud render className in svg', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
+      className: "Snapshot"
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render styleName in SVG', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
+      styleName: {
+        height: '100px',
+        width: '100px'
+      }
+    }, " Snapshot")),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/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/lib/SVG/props/propTypes.js

@@ -20,7 +20,7 @@ var SvgProps = {
   name: _propTypes["default"].string,
   size: _propTypes["default"].oneOf(['small', 'large']),
   viewBox: _propTypes["default"].string,
-  palette: _propTypes["default"].oneOf(['default', 'dark']),
-  styleName: _propTypes["default"].node
+  palette: _propTypes["default"].oneOf(['default', 'dark', 'danger']),
+  styleName: _propTypes["default"].object
 };
 exports.SvgProps = SvgProps;

package/lib/css/EmptyStateVariables.module.css

@@ -1,39 +1,39 @@
-.default {
-  /* empty svg default palette variables */
-  --zd_emptysvg_primary_fill: var(--zdt_svg_default_primary_fill);
-  --zd_emptysvg_primary_stroke: var(--zdt_svg_default_primary_stroke);
-  --zd_emptysvg_secondary_fill: var(--zdt_svg_default_secondary_fill);
-  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_default_secondary_plainfill);
-  --zd_emptysvg_plus: var(--zdt_svg_default_plus);
-  --zd_emptysvg_cross: var(--zdt_svg_default_cross);
-  --zd_emptysvg_medium_circle: var(--zdt_svg_default_medium_circle);
-  --zd_emptysvg_tiny_circle: var(--zdt_svg_default_tiny_circle);
-  --zd_emptysvg_small_circle: var(--zdt_svg_default_small_circle);
-  --zd_emptysvg_circle_fill: var(--zdt_svg_default_circle_fill);
-}
-.dark {
-  /* empty svg dark palette variables */
-  --zd_emptysvg_primary_fill: var(--zdt_svg_dark_primary_fill);
-  --zd_emptysvg_primary_stroke: var(--zdt_svg_dark_primary_stroke);
-  --zd_emptysvg_secondary_fill: var(--zdt_svg_dark_secondary_fill);
-  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_dark_secondary_plainfill);
-  --zd_emptysvg_plus: var(--zdt_svg_dark_plus);
-  --zd_emptysvg_cross: var(--zdt_svg_dark_cross);
-  --zd_emptysvg_medium_circle: var(--zdt_svg_dark_medium_circle);
-  --zd_emptysvg_tiny_circle: var(--zdt_svg_dark_tiny_circle);
-  --zd_emptysvg_small_circle: var(--zdt_svg_dark_small_circle);
-  --zd_emptysvg_circle_fill: var(--zdt_svg_dark_circle_fill);
-}
-.danger {
-  /* empty svg danger palette variables */
-  --zd_emptysvg_primary_fill: var(--zdt_svg_danger_primary_fill);
-  --zd_emptysvg_primary_stroke: var(--zdt_svg_danger_primary_stroke);
-  --zd_emptysvg_secondary_fill: var(--zdt_svg_danger_secondary_fill);
-  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_danger_secondary_plainfill);
-  --zd_emptysvg_plus: var(--zdt_svg_danger_plus);
-  --zd_emptysvg_cross: var(--zdt_svg_danger_cross);
-  --zd_emptysvg_medium_circle: var(--zdt_svg_danger_medium_circle);
-  --zd_emptysvg_tiny_circle: var(--zdt_svg_danger_tiny_circle);
-  --zd_emptysvg_small_circle: var(--zdt_svg_danger_small_circle);
-  --zd_emptysvg_circle_fill: var(--zdt_svg_danger_circle_fill);
+.default {
+  /* empty svg default palette variables */
+  --zd_emptysvg_primary_fill: var(--zdt_svg_default_primary_fill);
+  --zd_emptysvg_primary_stroke: var(--zdt_svg_default_primary_stroke);
+  --zd_emptysvg_secondary_fill: var(--zdt_svg_default_secondary_fill);
+  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_default_secondary_plainfill);
+  --zd_emptysvg_plus: var(--zdt_svg_default_plus);
+  --zd_emptysvg_cross: var(--zdt_svg_default_cross);
+  --zd_emptysvg_medium_circle: var(--zdt_svg_default_medium_circle);
+  --zd_emptysvg_tiny_circle: var(--zdt_svg_default_tiny_circle);
+  --zd_emptysvg_small_circle: var(--zdt_svg_default_small_circle);
+  --zd_emptysvg_circle_fill: var(--zdt_svg_default_circle_fill);
+}
+.dark {
+  /* empty svg dark palette variables */
+  --zd_emptysvg_primary_fill: var(--zdt_svg_dark_primary_fill);
+  --zd_emptysvg_primary_stroke: var(--zdt_svg_dark_primary_stroke);
+  --zd_emptysvg_secondary_fill: var(--zdt_svg_dark_secondary_fill);
+  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_dark_secondary_plainfill);
+  --zd_emptysvg_plus: var(--zdt_svg_dark_plus);
+  --zd_emptysvg_cross: var(--zdt_svg_dark_cross);
+  --zd_emptysvg_medium_circle: var(--zdt_svg_dark_medium_circle);
+  --zd_emptysvg_tiny_circle: var(--zdt_svg_dark_tiny_circle);
+  --zd_emptysvg_small_circle: var(--zdt_svg_dark_small_circle);
+  --zd_emptysvg_circle_fill: var(--zdt_svg_dark_circle_fill);
+}
+.danger {
+  /* empty svg danger palette variables */
+  --zd_emptysvg_primary_fill: var(--zdt_svg_danger_primary_fill);
+  --zd_emptysvg_primary_stroke: var(--zdt_svg_danger_primary_stroke);
+  --zd_emptysvg_secondary_fill: var(--zdt_svg_danger_secondary_fill);
+  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_danger_secondary_plainfill);
+  --zd_emptysvg_plus: var(--zdt_svg_danger_plus);
+  --zd_emptysvg_cross: var(--zdt_svg_danger_cross);
+  --zd_emptysvg_medium_circle: var(--zdt_svg_danger_medium_circle);
+  --zd_emptysvg_tiny_circle: var(--zdt_svg_danger_tiny_circle);
+  --zd_emptysvg_small_circle: var(--zdt_svg_danger_small_circle);
+  --zd_emptysvg_circle_fill: var(--zdt_svg_danger_circle_fill);
 }