svg-loaders-react 3.1.5 → 4.0.0

package/test/__snapshots__/puff.test.js.snap

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Puff /> matches the markup snapshot 1`] = `
+<svg
+  class="svg-loaders-svg"
+  height="44"
+  stroke="#fff"
+  viewBox="0 0 44 44"
+  width="44"
+>
+  <g
+    fill="none"
+    fill-rule="evenodd"
+    stroke-width="2"
+  >
+    <circle
+      cx="22"
+      cy="22"
+      r="1"
+    >
+      <animate
+        attributeName="r"
+        begin="0s"
+        calcMode="spline"
+        dur="1.8s"
+        keySplines="0.165, 0.84, 0.44, 1"
+        keyTimes="0; 1"
+        repeatCount="indefinite"
+        values="1; 20"
+      />
+      <animate
+        attributeName="stroke-opacity"
+        begin="0s"
+        calcMode="spline"
+        dur="1.8s"
+        keySplines="0.3, 0.61, 0.355, 1"
+        keyTimes="0; 1"
+        repeatCount="indefinite"
+        values="1; 0"
+      />
+    </circle>
+    <circle
+      cx="22"
+      cy="22"
+      r="1"
+    >
+      <animate
+        attributeName="r"
+        begin="-0.9s"
+        calcMode="spline"
+        dur="1.8s"
+        keySplines="0.165, 0.84, 0.44, 1"
+        keyTimes="0; 1"
+        repeatCount="indefinite"
+        values="1; 20"
+      />
+      <animate
+        attributeName="stroke-opacity"
+        begin="-0.9s"
+        calcMode="spline"
+        dur="1.8s"
+        keySplines="0.3, 0.61, 0.355, 1"
+        keyTimes="0; 1"
+        repeatCount="indefinite"
+        values="1; 0"
+      />
+    </circle>
+  </g>
+</svg>
+`;

package/test/__snapshots__/rings.test.js.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Rings /> matches the markup snapshot 1`] = `
+<svg
+  class="svg-loaders-svg"
+  height="45"
+  stroke="#fff"
+  viewBox="0 0 45 45"
+  width="45"
+>
+  <g
+    fill="none"
+    fill-rule="evenodd"
+    stroke-width="2"
+    transform="translate(1 1)"
+  >
+    <circle
+      cx="22"
+      cy="22"
+      r="6"
+      stroke-opacity="0"
+    >
+      <animate
+        attributeName="r"
+        begin="1.5s"
+        calcMode="linear"
+        dur="3s"
+        repeatCount="indefinite"
+        values="6;22"
+      />
+      <animate
+        attributeName="stroke-opacity"
+        begin="1.5s"
+        calcMode="linear"
+        dur="3s"
+        repeatCount="indefinite"
+        values="1;0"
+      />
+      <animate
+        attributeName="stroke-width"
+        begin="1.5s"
+        calcMode="linear"
+        dur="3s"
+        repeatCount="indefinite"
+        values="2;0"
+      />
+    </circle>
+    <circle
+      cx="22"
+      cy="22"
+      r="6"
+      stroke-opacity="0"
+    >
+      <animate
+        attributeName="r"
+        begin="3s"
+        calcMode="linear"
+        dur="3s"
+        repeatCount="indefinite"
+        values="6;22"
+      />
+      <animate
+        attributeName="stroke-opacity"
+        begin="3s"
+        calcMode="linear"
+        dur="3s"
+        repeatCount="indefinite"
+        values="1;0"
+      />
+      <animate
+        attributeName="stroke-width"
+        begin="3s"
+        calcMode="linear"
+        dur="3s"
+        repeatCount="indefinite"
+        values="2;0"
+      />
+    </circle>
+    <circle
+      cx="22"
+      cy="22"
+      r="8"
+    >
+      <animate
+        attributeName="r"
+        begin="0s"
+        calcMode="linear"
+        dur="1.5s"
+        repeatCount="indefinite"
+        values="6;1;2;3;4;5;6"
+      />
+    </circle>
+  </g>
+</svg>
+`;

package/test/__snapshots__/spinning-circles.test.js.snap

@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SpinningCircles /> matches the markup snapshot 1`] = `
+<svg
+  class="svg-loaders-svg"
+  height="58"
+  viewBox="0 0 58 58"
+  width="58"
+>
+  <g
+    fill="#fff"
+    fill-rule="evenodd"
+    stroke="#FFF"
+    stroke-width="1.5"
+    transform="translate(2 1)"
+  >
+    <circle
+      cx="42.601"
+      cy="11.462"
+      r="5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="0s"
+        calcMode="linear"
+        dur="1.3s"
+        repeatCount="indefinite"
+        values="1;0;0;0;0;0;0;0"
+      />
+    </circle>
+    <circle
+      cx="49.063"
+      cy="27.063"
+      fill-opacity="0"
+      r="5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="0s"
+        calcMode="linear"
+        dur="1.3s"
+        repeatCount="indefinite"
+        values="0;1;0;0;0;0;0;0"
+      />
+    </circle>
+    <circle
+      cx="42.601"
+      cy="42.663"
+      fill-opacity="0"
+      r="5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="0s"
+        calcMode="linear"
+        dur="1.3s"
+        repeatCount="indefinite"
+        values="0;0;1;0;0;0;0;0"
+      />
+    </circle>
+    <circle
+      cx="27"
+      cy="49.125"
+      fill-opacity="0"
+      r="5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="0s"
+        calcMode="linear"
+        dur="1.3s"
+        repeatCount="indefinite"
+        values="0;0;0;1;0;0;0;0"
+      />
+    </circle>
+    <circle
+      cx="11.399"
+      cy="42.663"
+      fill-opacity="0"
+      r="5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="0s"
+        calcMode="linear"
+        dur="1.3s"
+        repeatCount="indefinite"
+        values="0;0;0;0;1;0;0;0"
+      />
+    </circle>
+    <circle
+      cx="4.938"
+      cy="27.063"
+      fill-opacity="0"
+      r="5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="0s"
+        calcMode="linear"
+        dur="1.3s"
+        repeatCount="indefinite"
+        values="0;0;0;0;0;1;0;0"
+      />
+    </circle>
+    <circle
+      cx="11.399"
+      cy="11.462"
+      fill-opacity="0"
+      r="5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="0s"
+        calcMode="linear"
+        dur="1.3s"
+        repeatCount="indefinite"
+        values="0;0;0;0;0;0;1;0"
+      />
+    </circle>
+    <circle
+      cx="27"
+      cy="5"
+      fill-opacity="0"
+      r="5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="0s"
+        calcMode="linear"
+        dur="1.3s"
+        repeatCount="indefinite"
+        values="0;0;0;0;0;0;0;1"
+      />
+    </circle>
+  </g>
+</svg>
+`;

package/test/__snapshots__/tail-spin.test.js.snap

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TailSpin /> matches the markup snapshot 1`] = `
+<svg
+  class="svg-loaders-svg"
+  height="38"
+  viewBox="0 0 38 38"
+  width="38"
+>
+  <defs>
+    <lineargradient
+      id="prefix__a"
+      x1="8.042%"
+      x2="65.682%"
+      y1="0%"
+      y2="23.865%"
+    >
+      <stop
+        offset="0%"
+        stop-color="#fff"
+        stop-opacity="0"
+      />
+      <stop
+        offset="63.146%"
+        stop-color="#fff"
+        stop-opacity="0.631"
+      />
+      <stop
+        offset="100%"
+        stop-color="#fff"
+      />
+    </lineargradient>
+  </defs>
+  <g
+    fill="none"
+    fill-rule="evenodd"
+    transform="translate(1 1)"
+  >
+    <path
+      d="M36 18c0-9.94-8.06-18-18-18"
+      stroke="url(#prefix__a)"
+      stroke-width="2"
+    >
+      <animatetransform
+        attributeName="transform"
+        dur="0.9s"
+        from="0 18 18"
+        repeatCount="indefinite"
+        to="360 18 18"
+        type="rotate"
+      />
+    </path>
+    <circle
+      cx="36"
+      cy="18"
+      fill="#fff"
+      r="1"
+    >
+      <animatetransform
+        attributeName="transform"
+        dur="0.9s"
+        from="0 18 18"
+        repeatCount="indefinite"
+        to="360 18 18"
+        type="rotate"
+      />
+    </circle>
+  </g>
+</svg>
+`;

package/test/__snapshots__/three-dots.test.js.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ThreeDots /> matches the markup snapshot 1`] = `
+<svg
+  class="svg-loaders-svg"
+  fill="#fff"
+  height="30"
+  viewBox="0 0 120 30"
+  width="120"
+>
+  <circle
+    cx="15"
+    cy="15"
+    r="15"
+  >
+    <animate
+      attributeName="r"
+      begin="0s"
+      calcMode="linear"
+      dur="0.8s"
+      from="15"
+      repeatCount="indefinite"
+      to="15"
+      values="15;9;15"
+    />
+    <animate
+      attributeName="fill-opacity"
+      begin="0s"
+      calcMode="linear"
+      dur="0.8s"
+      from="1"
+      repeatCount="indefinite"
+      to="1"
+      values="1;.5;1"
+    />
+  </circle>
+  <circle
+    cx="60"
+    cy="15"
+    fill-opacity="0.3"
+    r="9"
+  >
+    <animate
+      attributeName="r"
+      begin="0s"
+      calcMode="linear"
+      dur="0.8s"
+      from="9"
+      repeatCount="indefinite"
+      to="9"
+      values="9;15;9"
+    />
+    <animate
+      attributeName="fill-opacity"
+      begin="0s"
+      calcMode="linear"
+      dur="0.8s"
+      from="0.5"
+      repeatCount="indefinite"
+      to="0.5"
+      values=".5;1;.5"
+    />
+  </circle>
+  <circle
+    cx="105"
+    cy="15"
+    r="15"
+  >
+    <animate
+      attributeName="r"
+      begin="0s"
+      calcMode="linear"
+      dur="0.8s"
+      from="15"
+      repeatCount="indefinite"
+      to="15"
+      values="15;9;15"
+    />
+    <animate
+      attributeName="fill-opacity"
+      begin="0s"
+      calcMode="linear"
+      dur="0.8s"
+      from="1"
+      repeatCount="indefinite"
+      to="1"
+      values="1;.5;1"
+    />
+  </circle>
+</svg>
+`;

package/test/audio.test.js

@@ -1,14 +1,9 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import { Audio } from '../src/svg-loader-components/audio';
+import describeLoader from './helpers/loader-behavior';
 
-describe('Test <Audio />', () => {
-  it('renders without crashing', () => {
-    shallow(<Audio />);
-  });
-  it('viewBox property is defined', () => {
-    const AudioComponent = mount(<Audio />).find('svg');
-    expect(AudioComponent.prop('viewBox')).toBeDefined();
-  });
+describeLoader('Audio', Audio, {
+  width: '55',
+  height: '80',
+  fill: '#FFF',
+  viewBox: '0 0 55 80',
 });

package/test/ball-triangle.test.js

@@ -1,14 +1,9 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import { BallTriangle } from '../src/svg-loader-components/ball-triangle';
+import describeLoader from './helpers/loader-behavior';
 
-describe('Test <BallTriangle />', () => {
-  it('renders without crashing', () => {
-    shallow(<BallTriangle />);
-  });
-  it('viewBox property is defined', () => {
-    const BallTriangleComponent = mount(<BallTriangle />).find('svg');
-    expect(BallTriangleComponent.prop('viewBox')).toBeDefined();
-  });
+describeLoader('BallTriangle', BallTriangle, {
+  width: '57',
+  height: '57',
+  stroke: '#fff',
+  viewBox: '0 0 57 57',
 });

package/test/bars.test.js

@@ -1,14 +1,9 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import { Bars } from '../src/svg-loader-components/bars';
+import describeLoader from './helpers/loader-behavior';
 
-describe('Test <Bars />', () => {
-  it('renders without crashing', () => {
-    shallow(<Bars />);
-  });
-  it('viewBox property is defined', () => {
-    const BarsComponent = mount(<Bars />).find('svg');
-    expect(BarsComponent.prop('viewBox')).toBeDefined();
-  });
+describeLoader('Bars', Bars, {
+  width: '135',
+  height: '140',
+  fill: '#fff',
+  viewBox: '0 0 135 140',
 });

package/test/circles.test.js

@@ -1,14 +1,9 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import { Circles } from '../src/svg-loader-components/circles';
+import describeLoader from './helpers/loader-behavior';
 
-describe('Test <Circles />', () => {
-  it('renders without crashing', () => {
-    shallow(<Circles />);
-  });
-  it('viewBox property is defined', () => {
-    const CirclesComponent = mount(<Circles />).find('svg');
-    expect(CirclesComponent.prop('viewBox')).toBeDefined();
-  });
+describeLoader('Circles', Circles, {
+  width: '135',
+  height: '135',
+  fill: '#fff',
+  viewBox: '0 0 135 135',
 });

package/test/grid.test.js

@@ -1,14 +1,9 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import { Grid } from '../src/svg-loader-components/grid';
+import describeLoader from './helpers/loader-behavior';
 
-describe('Test <Grid />', () => {
-  it('renders without crashing', () => {
-    shallow(<Grid />);
-  });
-  it('viewBox property is defined', () => {
-    const GridComponent = mount(<Grid />).find('svg');
-    expect(GridComponent.prop('viewBox')).toBeDefined();
-  });
+describeLoader('Grid', Grid, {
+  width: '105',
+  height: '105',
+  fill: '#fff',
+  viewBox: '0 0 105 105',
 });

package/test/hearts.test.js

@@ -1,14 +1,9 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import { Hearts } from '../src/svg-loader-components/hearts';
+import describeLoader from './helpers/loader-behavior';
 
-describe('Test <Hearts />', () => {
-  it('renders without crashing', () => {
-    shallow(<Hearts />);
-  });
-  it('viewBox property is defined', () => {
-    const HeartsComponent = mount(<Hearts />).find('svg');
-    expect(HeartsComponent.prop('viewBox')).toBeDefined();
-  });
+describeLoader('Hearts', Hearts, {
+  width: '140',
+  height: '64',
+  fill: '#fff',
+  viewBox: '0 0 140 64',
 });