From f136e68d0361f65c8f363ba1e2f62823a5ac0518 Mon Sep 17 00:00:00 2001
From: Eric Schultz <eric@wwahammy.com>
Date: Fri, 19 Apr 2019 15:27:40 -0500
Subject: [PATCH 1/4] Update velocity-react types

---
 types/velocity-react/index.d.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/types/velocity-react/index.d.ts b/types/velocity-react/index.d.ts
index dd9872e8..5c5d6cc3 100644
--- a/types/velocity-react/index.d.ts
+++ b/types/velocity-react/index.d.ts
@@ -11,11 +11,10 @@ interface VelocityComponentProps
   animation: Animation
   runOnMount?: boolean
   targetQuerySelector?: TargetQuerySelector
-
 }
 
 
-export declare class VelocityComponent extends React.Component<VelocityComponentProps, {}>
+export declare class VelocityComponent extends React.Component<VelocityComponentProps & jquery.velocity.Options, {}>
 {
     runAnimation():void
 }

From b90f4b58e633b2950bf03c5f42a5db885fd69e8b Mon Sep 17 00:00:00 2001
From: Eric Schultz <eric@wwahammy.com>
Date: Fri, 19 Apr 2019 15:27:56 -0500
Subject: [PATCH 2/4] Spinner component

---
 .../src/components/common/Spinner.spec.tsx    |  24 ++
 javascripts/src/components/common/Spinner.tsx |  55 +++++
 .../__snapshots__/Spinner.spec.tsx.snap       | 221 ++++++++++++++++++
 3 files changed, 300 insertions(+)
 create mode 100644 javascripts/src/components/common/Spinner.spec.tsx
 create mode 100644 javascripts/src/components/common/Spinner.tsx
 create mode 100644 javascripts/src/components/common/__snapshots__/Spinner.spec.tsx.snap

diff --git a/javascripts/src/components/common/Spinner.spec.tsx b/javascripts/src/components/common/Spinner.spec.tsx
new file mode 100644
index 00000000..d79703ce
--- /dev/null
+++ b/javascripts/src/components/common/Spinner.spec.tsx
@@ -0,0 +1,24 @@
+// License: LGPL-3.0-or-later
+import * as React from 'react';
+import 'jest';
+import Spinner from './Spinner'
+import { mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+describe('Spinner', () => {
+  test('is small', () => {
+    expect(toJson(mount(<Spinner size="small"/>))).toMatchSnapshot()
+  })
+
+  test('is normal', () => {
+    expect(toJson(mount(<Spinner size="normal"/>))).toMatchSnapshot()
+  })
+
+  test('is large', () => {
+    expect(toJson(mount(<Spinner size="large"/>))).toMatchSnapshot()
+  })
+
+  test('has customcolor ', () => {
+    expect(toJson(mount(<Spinner size="small" color={"#ffffff"}/>))).toMatchSnapshot()
+  })
+})
\ No newline at end of file
diff --git a/javascripts/src/components/common/Spinner.tsx b/javascripts/src/components/common/Spinner.tsx
new file mode 100644
index 00000000..dc530466
--- /dev/null
+++ b/javascripts/src/components/common/Spinner.tsx
@@ -0,0 +1,55 @@
+// License: LGPL-3.0-or-later
+import { Color } from 'csstype';
+import * as React from 'react';
+import { VelocityComponent } from 'velocity-react';
+import ScreenReaderOnlyText from './ScreenReaderOnlyText';
+
+export interface SpinnerProps {
+  size: 'small' | 'normal' | 'large'
+  color?: Color
+}
+
+class Spinner extends React.Component<SpinnerProps, {}> {
+  static defaultProps = {
+    color: 'currentcolor'
+  }
+
+  generateStyle(): React.CSSProperties {
+    let spinnerDimension: number
+    let spinnerBorderWidth: number = 3
+    switch (this.props.size) {
+      case 'small':
+        spinnerDimension = 25
+        break;
+      case 'normal':
+        spinnerDimension = 50
+        break;
+      case 'large':
+        spinnerDimension = 100
+        break;
+    }
+
+    return {
+      display: 'inline-block',
+      width: `${spinnerDimension}px`,
+      height: `${spinnerDimension}px`,
+      verticalAlign: 'text-bottom',
+      border: `${spinnerBorderWidth}px solid ${this.props.color}`,
+      borderRightColor: 'transparent',
+      borderRadius: '50%',
+    }
+
+  }
+  render() {
+    return <VelocityComponent animation={{ rotateZ: 360 }} duration={750} loop={true} easing={'linear'} runOnMount={true}>
+      <div style={this.generateStyle()} role="status">
+        <ScreenReaderOnlyText>Loading...</ScreenReaderOnlyText>
+      </div>
+    </VelocityComponent>;
+  }
+}
+
+export default Spinner;
+
+
+
diff --git a/javascripts/src/components/common/__snapshots__/Spinner.spec.tsx.snap b/javascripts/src/components/common/__snapshots__/Spinner.spec.tsx.snap
new file mode 100644
index 00000000..47c32be0
--- /dev/null
+++ b/javascripts/src/components/common/__snapshots__/Spinner.spec.tsx.snap
@@ -0,0 +1,221 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spinner has customcolor  1`] = `
+<Spinner
+  color="#ffffff"
+  size="small"
+>
+  <VelocityComponent
+    animation={
+      Object {
+        "rotateZ": 360,
+      }
+    }
+    duration={750}
+    easing="linear"
+    interruptBehavior="stop"
+    loop={true}
+    runOnMount={true}
+    targetQuerySelector={null}
+  >
+    <div
+      role="status"
+      style={
+        Object {
+          "border": "3px solid #ffffff",
+          "borderRadius": "50%",
+          "borderRightColor": "transparent",
+          "display": "inline-block",
+          "height": "25px",
+          "verticalAlign": "text-bottom",
+          "width": "25px",
+        }
+      }
+    >
+      <ScreenReaderOnlyText>
+        <span
+          style={
+            Object {
+              "border": 0,
+              "clip": "rect(0,0,0,0)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Loading...
+        </span>
+      </ScreenReaderOnlyText>
+    </div>
+  </VelocityComponent>
+</Spinner>
+`;
+
+exports[`Spinner is large 1`] = `
+<Spinner
+  color="currentcolor"
+  size="large"
+>
+  <VelocityComponent
+    animation={
+      Object {
+        "rotateZ": 360,
+      }
+    }
+    duration={750}
+    easing="linear"
+    interruptBehavior="stop"
+    loop={true}
+    runOnMount={true}
+    targetQuerySelector={null}
+  >
+    <div
+      role="status"
+      style={
+        Object {
+          "border": "3px solid currentcolor",
+          "borderRadius": "50%",
+          "borderRightColor": "transparent",
+          "display": "inline-block",
+          "height": "100px",
+          "verticalAlign": "text-bottom",
+          "width": "100px",
+        }
+      }
+    >
+      <ScreenReaderOnlyText>
+        <span
+          style={
+            Object {
+              "border": 0,
+              "clip": "rect(0,0,0,0)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Loading...
+        </span>
+      </ScreenReaderOnlyText>
+    </div>
+  </VelocityComponent>
+</Spinner>
+`;
+
+exports[`Spinner is normal 1`] = `
+<Spinner
+  color="currentcolor"
+  size="normal"
+>
+  <VelocityComponent
+    animation={
+      Object {
+        "rotateZ": 360,
+      }
+    }
+    duration={750}
+    easing="linear"
+    interruptBehavior="stop"
+    loop={true}
+    runOnMount={true}
+    targetQuerySelector={null}
+  >
+    <div
+      role="status"
+      style={
+        Object {
+          "border": "3px solid currentcolor",
+          "borderRadius": "50%",
+          "borderRightColor": "transparent",
+          "display": "inline-block",
+          "height": "50px",
+          "verticalAlign": "text-bottom",
+          "width": "50px",
+        }
+      }
+    >
+      <ScreenReaderOnlyText>
+        <span
+          style={
+            Object {
+              "border": 0,
+              "clip": "rect(0,0,0,0)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Loading...
+        </span>
+      </ScreenReaderOnlyText>
+    </div>
+  </VelocityComponent>
+</Spinner>
+`;
+
+exports[`Spinner is small 1`] = `
+<Spinner
+  color="currentcolor"
+  size="small"
+>
+  <VelocityComponent
+    animation={
+      Object {
+        "rotateZ": 360,
+      }
+    }
+    duration={750}
+    easing="linear"
+    interruptBehavior="stop"
+    loop={true}
+    runOnMount={true}
+    targetQuerySelector={null}
+  >
+    <div
+      role="status"
+      style={
+        Object {
+          "border": "3px solid currentcolor",
+          "borderRadius": "50%",
+          "borderRightColor": "transparent",
+          "display": "inline-block",
+          "height": "25px",
+          "verticalAlign": "text-bottom",
+          "width": "25px",
+        }
+      }
+    >
+      <ScreenReaderOnlyText>
+        <span
+          style={
+            Object {
+              "border": 0,
+              "clip": "rect(0,0,0,0)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Loading...
+        </span>
+      </ScreenReaderOnlyText>
+    </div>
+  </VelocityComponent>
+</Spinner>
+`;

From 1dc91abedadfd1d382fbd97b44381a00fdbf7d7e Mon Sep 17 00:00:00 2001
From: Eric Schultz <eric@wwahammy.com>
Date: Fri, 19 Apr 2019 15:31:07 -0500
Subject: [PATCH 3/4] Correct name of test

---
 javascripts/src/components/common/Spinner.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/javascripts/src/components/common/Spinner.spec.tsx b/javascripts/src/components/common/Spinner.spec.tsx
index d79703ce..202e4a36 100644
--- a/javascripts/src/components/common/Spinner.spec.tsx
+++ b/javascripts/src/components/common/Spinner.spec.tsx
@@ -18,7 +18,7 @@ describe('Spinner', () => {
     expect(toJson(mount(<Spinner size="large"/>))).toMatchSnapshot()
   })
 
-  test('has customcolor ', () => {
+  test('has custom color ', () => {
     expect(toJson(mount(<Spinner size="small" color={"#ffffff"}/>))).toMatchSnapshot()
   })
 })
\ No newline at end of file

From e5f7ed71b22a00f89fc324930cd0c3e567d0977c Mon Sep 17 00:00:00 2001
From: Eric Schultz <eric@wwahammy.com>
Date: Mon, 22 Apr 2019 13:58:24 -0500
Subject: [PATCH 4/4] Removed obsolete snapshot

---
 .../src/components/common/__snapshots__/Spinner.spec.tsx.snap   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/javascripts/src/components/common/__snapshots__/Spinner.spec.tsx.snap b/javascripts/src/components/common/__snapshots__/Spinner.spec.tsx.snap
index 47c32be0..4cb66665 100644
--- a/javascripts/src/components/common/__snapshots__/Spinner.spec.tsx.snap
+++ b/javascripts/src/components/common/__snapshots__/Spinner.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Spinner has customcolor  1`] = `
+exports[`Spinner has custom color  1`] = `
 <Spinner
   color="#ffffff"
   size="small"