Add Ninja Spinner

.gitignore

@@ -20,6 +20,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.history
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordcloud/gnui",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "git://github.com/nordcloud/gnui.git",

src/components/spinner/Spinner.tsx

@@ -3,6 +3,7 @@ import { color } from "styled-system";
 import styled, { css } from "styled-components";
 import theme from "../../theme";
 import { Text } from "../text";
+import ninjaGif from "../../utils/img/ninja.gif";
 
 export interface SpinnerProps {
   caption?: string;
@@ -11,6 +12,7 @@ export interface SpinnerProps {
   color?: string;
   onClick?: (e: any) => void;
   onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
+  ninja?: boolean;
 }
 
 const SpinnerContainer = styled.div<SpinnerProps>`
@@ -69,19 +71,28 @@ const StyledRing = styled.div<SpinnerProps>`
   }
 `;
 
+const Image = styled.img<SpinnerProps>`
+  zoom: ${({ size }) => (size ? `${size}` : `1`)};
+`;
+
 export const Spinner: FunctionComponent<SpinnerProps> = ({
   caption,
   color,
   size,
+  ninja,
 }) => {
   return (
     <SpinnerContainer caption={caption}>
-      <StyledRing color={color} size={size}>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-      </StyledRing>
+      {ninja ? (
+        <Image size={size} src={ninjaGif}></Image>
+      ) : (
+        <StyledRing color={color} size={size}>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </StyledRing>
+      )}
       {caption && <Text>{caption}</Text>}
     </SpinnerContainer>
   );

src/stories/Spinner.stories.mdx

@@ -77,3 +77,11 @@ Named:
     </Button>
   </Story>
 </Preview>
+
+## Ninja
+
+<Preview>
+  <Story name="ninja">
+    <Spinner ninja size="0.2" color="white" caption="Spinner" />
+  </Story>
+</Preview>