Add Spinner (#91)

* Spinner WIP

* Add Spinner

* Fix setColor

* Fix colors

Co-authored-by: Elena Kazakova <[email protected]>
Co-authored-by: Robert Grzonka <[email protected]>

Author: 3 people

src/components/index.ts

@@ -25,3 +25,4 @@ export * from "./switch";
 export * from "./heading";
 export * from "./sidebar";
 export * from "./tabs";
+export * from "./spinner";

src/components/spinner/Spinner.tsx

@@ -0,0 +1,88 @@
+import React, { FunctionComponent } from "react";
+import { color } from "styled-system";
+import styled, { css } from "styled-components";
+import theme from "../../theme";
+import { Text } from "../text";
+
+export interface SpinnerProps {
+  caption?: string;
+  className?: string;
+  size?: number;
+  color?: string;
+  onClick?: (e: any) => void;
+  onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
+}
+
+const SpinnerContainer = styled.div<SpinnerProps>`
+  display: flex;
+  align-items: center;
+  p {
+    margin: 0 0 0 ${({ caption }) => (caption ? theme.spacing.spacing02 : "0")};
+  }
+`;
+
+const StyledRing = styled.div<SpinnerProps>`
+  ${color};
+  display: inline-block;
+  position: relative;
+  width: 5rem;
+  height: 5rem;
+  zoom: ${({ size }) => (size ? `${size}` : `1`)};
+
+  div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 4rem;
+    height: 4rem;
+    margin: 0.5rem;
+    border: 0.5rem solid ${theme.colors.primary};
+    border-radius: 50%;
+    animation: ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: ${theme.colors.primary} transparent transparent transparent;
+    &:nth-child(1) {
+      animation-delay: -0.45s;
+    }
+    &:nth-child(2) {
+      animation-delay: -0.3s;
+    }
+    &:nth-child(3) {
+      animation-delay: -0.15s;
+    }
+    ${({ color }) =>
+      color &&
+      css`
+        border: 0.5rem solid
+          ${theme.colors[color] ? theme.colors[color] : color};
+        border-color: ${theme.colors[color] ? theme.colors[color] : color}
+          transparent transparent transparent;
+      `}
+  }
+
+  @keyframes ring {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export const Spinner: FunctionComponent<SpinnerProps> = ({
+  caption,
+  color,
+  size,
+}) => {
+  return (
+    <SpinnerContainer caption={caption}>
+      <StyledRing color={color} size={size}>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </StyledRing>
+      {caption && <Text>{caption}</Text>}
+    </SpinnerContainer>
+  );
+};

src/components/spinner/index.tsx

@@ -0,0 +1 @@
+export * from "./Spinner";

src/stories/Spinner.stories.mdx

@@ -0,0 +1,79 @@
+import styled from "styled-components";
+import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
+import { Spinner } from "../components/spinner";
+import { Button } from "../components/button";
+import { Spacer } from "../components/spacer";
+import theme from "../theme";
+
+<Meta title="Components/Spinner" component={Spinner} />
+
+# Spinner
+
+#### Props
+
+```typescript
+export interface SpinnerProps {
+  caption?: string;
+  className?: string;
+  size?: number;
+  color?: string;
+  onClick?: (e: any) => void;
+  onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
+}
+```
+
+## Default
+
+<Preview>
+  <Story name="default">
+    <Spinner />
+  </Story>
+</Preview>
+
+## Color
+
+From `theme`:
+
+<Preview>
+  <Story name="color theme">
+    <Spinner color="success" size="0.5" />
+  </Story>
+</Preview>
+
+Named:
+
+<Preview>
+  <Story name="named">
+    <Spinner color="palevioletred" size="0.5" />
+  </Story>
+</Preview>
+
+## Size
+
+> `size?: number;` - size is measured in percentage; 1 is original size of the spinner
+
+<Preview>
+  <Story name="size">
+    <Spinner size="0.2" />
+  </Story>
+</Preview>
+
+## Label
+
+> `caption?: string;` - caption for the spinner
+
+<Preview>
+  <Story name="label">
+    <Spinner size="0.2" caption="Here is a spinner" />
+  </Story>
+</Preview>
+
+## Button
+
+<Preview>
+  <Story name="button">
+    <Button>
+      <Spinner size="0.2" color="white" caption="Spinner" />
+    </Button>
+  </Story>
+</Preview>