migrate spinner

package.json

@@ -47,6 +47,7 @@
   },
   "dependencies": {
     "@types/pluralize": "^0.0.29",
+    "@types/prismjs": "^1.16.6",
     "copy-to-clipboard": "^3.3.1",
     "pluralize": "^8.0.0",
     "polished": "^3.6.4",

src/components/Spinner.js → src/components/Spinner.tsx

@@ -1,9 +1,18 @@
-import React from 'react';
+import React, { ComponentProps, FunctionComponent } from 'react';
 import styled, { css } from 'styled-components';
 import { color } from './shared/styles';
 import { rotate360 } from './shared/animation';
 
-const SpinnerWrapper = styled.div`
+interface Props {
+  inline?: boolean;
+  inverse?: boolean;
+  inForm?: boolean;
+  positive?: boolean;
+  negative?: boolean;
+  neutral?: boolean;
+}
+
+const SpinnerWrapper = styled.div<Props>`
   border-radius: 3em;
   cursor: progress;
   display: inline-block;
@@ -90,7 +99,9 @@ const SpinnerWrapper = styled.div`
     `};
 `;
 
-export function Spinner({ ...props }) {
+export const Spinner: FunctionComponent<Props & ComponentProps<typeof SpinnerWrapper>> = (
+  props
+) => {
   return (
     <SpinnerWrapper
       aria-label="Content is loading ..."
@@ -99,4 +110,4 @@ export function Spinner({ ...props }) {
       {...props}
     />
   );
-}
+};

yarn.lock

@@ -4365,6 +4365,11 @@
   resolved "https://registry.npmjs.org/@types/pretty-hrtime/-/pretty-hrtime-1.0.0.tgz#c5a2d644a135e988b2932f99737e67b3c62528d0"
   integrity sha512-xl+5r2rcrxdLViAYkkiLMYsoUs3qEyrAnHFyEzYysgRxdVp3WbhysxIvJIxZp9FvZ2CYezh0TaHZorivH+voOQ==
 
+"@types/prismjs@^1.16.6":
+  version "1.16.6"
+  resolved "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.16.6.tgz#377054f72f671b36dbe78c517ce2b279d83ecc40"
+  integrity sha512-dTvnamRITNqNkqhlBd235kZl3KfVJQQoT5jkXeiWSBK7i4/TLKBNLV0S1wOt8gy4E2TY722KLtdmv2xc6+Wevg==
+
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"