@zohodesk/svg 1.1.0 → 1.1.1

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/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);
 }

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();
+  });
+});

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

@@ -0,0 +1,208 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SVG componet Rendering all svgs in version2 emptystate EmptyBusinessHoliday 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="large  default svgCenter "
+  >
+    <svg
+      data-id="emptyBusinessHoliday"
+      data-test-id="emptyBusinessHoliday"
+      height="100%"
+      viewBox="0 0 181.9 139.3"
+      width="100%"
+    >
+      <image
+        height="100%"
+        width="100%"
+        xlink:href="EmptyBusinessHoliday.svg"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet Rendering all svgs in version2 emptystate EmptyBusinessHour 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="large  default svgCenter "
+  >
+    <svg
+      data-id="emptyBusinessHour"
+      data-test-id="emptyBusinessHour"
+      height="100%"
+      viewBox="0 0 181.9 139.3"
+      width="100%"
+    >
+      <image
+        height="100%"
+        width="100%"
+        xlink:href="EmptyBusinessHour.svg"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet Rendering all svgs in version2 emptystate EmptyFromAddress 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="large  default svgCenter "
+  >
+    <svg
+      data-id="emptyFromAddress"
+      data-test-id="emptyFromAddress"
+      height="100%"
+      viewBox="0 0 181.9 139.3"
+      width="100%"
+    >
+      <image
+        height="100%"
+        width="100%"
+        xlink:href="EmptyFromAddress.svg"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet Rendering all svgs in version2 emptystate EmptyImportHistory 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="large  default svgCenter "
+  >
+    <svg
+      data-id="emptyImportHistory"
+      data-test-id="emptyImportHistory"
+      height="100%"
+      viewBox="0 0 181.9 139.3"
+      width="100%"
+    >
+      <image
+        height="100%"
+        width="100%"
+        xlink:href="EmptyImportHistory.svg"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet Rendering all svgs in version2 emptystate EmptyNetwork 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="large  default svgCenter "
+  >
+    <svg
+      data-id="emptyNetwork"
+      data-test-id="emptyNetwork"
+      height="100%"
+      viewBox="0 0 181.9 139.3"
+      width="100%"
+    >
+      <image
+        height="100%"
+        width="100%"
+        xlink:href="EmptyNetwork.svg"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet Rendering all svgs in version2 emptystate EmptyRecycleBin 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="large  default svgCenter "
+  >
+    <svg
+      data-id="emptyRecycleBin"
+      data-test-id="emptyRecycleBin"
+      height="100%"
+      viewBox="0 0 181.9 149.5"
+      width="100%"
+    >
+      <image
+        height="100%"
+        width="100%"
+        xlink:href="EmptyRecycleBin.svg"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet Rendering all svgs in version2 emptystate EmptyRoles 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="large  default svgCenter "
+  >
+    <svg
+      data-id="emptyRoles"
+      data-test-id="emptyRoles"
+      height="100%"
+      viewBox="0 0 181.9 139.3"
+      width="100%"
+    >
+      <image
+        height="100%"
+        width="100%"
+        xlink:href="EmptyRoles.svg"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet Rendering all svgs in version2 emptystate EmptyWebhook 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="large  default svgCenter "
+  >
+    <svg
+      data-id="emptyWebhook"
+      data-test-id="emptyWebhook"
+      height="100%"
+      viewBox="0 0 181.9 139.3"
+      width="100%"
+    >
+      <image
+        height="100%"
+        width="100%"
+        xlink:href="EmptyWebhook.svg"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SVG componet Rendering all svgs in version2 emptystate FailureLog 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="large  default svgCenter "
+  >
+    <svg
+      data-id="failureLog"
+      data-test-id="failureLog"
+      height="100%"
+      viewBox="0 0 189.4 139.3"
+      width="100%"
+    >
+      <image
+        height="100%"
+        width="100%"
+        xlink:href="FailureLog.svg"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;

package/es/emptystate/version2/__tests__/version2.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 version2 emptystate %s', key => {
+    let Component = index[key];
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Component, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});