add new loader: clock-loader (#158)

README.md

@@ -132,8 +132,9 @@ The table below has the default values for each loader.
 |        BeatLoader | `15` |        |       |        |  `2`   |
 |      BounceLoader | `60` |        |       |        |
 |      CircleLoader | `50` |        |       |        |
-|        ClipLoader | `35` |        |       |        |
 | ClimbingBoxLoader | `15` |        |       |        |
+|        ClipLoader | `35` |        |       |        |
+|       ClockLoader | `50` |        |       |        |
 |         DotLoader | `60` |        |       |        |  `2`   |
 |        FadeLoader |      |  `15`  |  `5`  |  `2`   |  `2`   |
 |        GridLoader | `15` |        |       |        |

__tests__/ClockLoader-tests.tsx

@@ -0,0 +1,102 @@
+import * as React from "react";
+import { mount, ReactWrapper } from "enzyme";
+import { css } from "@emotion/core";
+import { matchers } from "jest-emotion";
+expect.extend(matchers);
+
+import ClockLoader from "../src/ClockLoader";
+import { LoaderSizeProps } from "../src/interfaces";
+import { sizeDefaults } from "../src/helpers";
+
+describe("ClockLoader", () => {
+  let loader: ReactWrapper<LoaderSizeProps, null, ClockLoader>;
+  let props: LoaderSizeProps;
+  let defaultColor: string = "#000000";
+  let defaultSize: number = 50;
+  let defaultUnit: string = "px";
+
+  it("should match snapshot", () => {
+    loader = mount(<ClockLoader />);
+    expect(loader).toMatchSnapshot();
+  });
+
+  it("should contain default props if no props are passed", () => {
+    props = loader.props();
+    expect(props).toEqual(sizeDefaults(defaultSize));
+  });
+
+  it("should contain styles created using default props", () => {
+    expect(loader).toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
+    expect(loader).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
+    expect(loader).toHaveStyleRule("box-shadow", `inset 0px 0px 0px 2px ${defaultColor}`);
+  });
+
+  it("should render null if loading prop is set as false", () => {
+    loader = mount(<ClockLoader loading={false} />);
+    expect(loader.isEmptyRender()).toBe(true);
+  });
+
+  it("should render the correct color based on prop", () => {
+    let color: string = "#e2e2e2";
+    loader = mount(<ClockLoader color={color} />);
+    expect(loader).not.toHaveStyleRule("box-shadow", `inset 0px 0px 0px 2px ${defaultColor}`);
+    expect(loader).toHaveStyleRule("box-shadow", `inset 0px 0px 0px 2px ${color}`);
+  });
+
+  describe("size prop", () => {
+    it("should render the size with px unit when size is a number", () => {
+      let size: number = 18;
+      loader = mount(<ClockLoader size={size} />);
+      expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
+      expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
+
+      expect(loader).toHaveStyleRule("height", `${size}${defaultUnit}`);
+      expect(loader).toHaveStyleRule("width", `${size}${defaultUnit}`);
+    });
+
+    it("should render the size as is when size is a string with valid css unit", () => {
+      let size: string = "18px";
+      loader = mount(<ClockLoader size={size} />);
+      expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
+      expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
+
+      expect(loader).toHaveStyleRule("height", `${size}`);
+      expect(loader).toHaveStyleRule("width", `${size}`);
+    });
+
+    it("should render the size with default unit of px when the unit is incorrect", () => {
+      let length: number = 18;
+      let unit: string = "ad";
+      let size: string = `${length}${unit}`;
+      loader = mount(<ClockLoader size={size} />);
+      expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
+      expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
+
+      expect(loader).toHaveStyleRule("height", `${length}${defaultUnit}`);
+      expect(loader).toHaveStyleRule("width", `${length}${defaultUnit}`);
+    });
+  });
+
+  describe("css prop", () => {
+    it("should render the css override if a valid css string is passed in", () => {
+      loader = mount(<ClockLoader css={"position: absolute; overflow: scroll;"} />);
+      expect(loader).not.toHaveStyleRule("position", "relative");
+      expect(loader).toHaveStyleRule("position", "absolute");
+      expect(loader).toHaveStyleRule("overflow", "scroll");
+    });
+
+    it("should render the css override if the result of the emotion css function is passed in", () => {
+      loader = mount(
+        <ClockLoader
+          css={css`
+            position: absolute;
+            overflow: scroll;
+          `}
+        />
+      );
+      expect(loader).not.toHaveStyleRule("position", "relative");
+      expect(loader).toHaveStyleRule("position", "absolute");
+      expect(loader).toHaveStyleRule("overflow", "scroll");
+    });
+  });
+});

__tests__/__snapshots__/ClockLoader-tests.tsx.snap

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClockLoader should match snapshot 1`] = `
+@keyframes animation-0 {
+  100% {
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes animation-0 {
+  100% {
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.emotion-0 {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  background-color: transparent;
+  box-shadow: inset 0px 0px 0px 2px #000000;
+  border-radius: 50%;
+}
+
+.emotion-0:after,
+.emotion-0:before {
+  position: absolute;
+  content: "";
+  background-color: #000000;
+}
+
+.emotion-0:after {
+  width: 20.833333333333336px;
+  height: 2px;
+  top: 24px;
+  left: 24px;
+  -webkit-transform-origin: 1px 1px;
+  -ms-transform-origin: 1px 1px;
+  transform-origin: 1px 1px;
+  -webkit-animation: animation-0 2s linear infinite;
+  animation: animation-0 2s linear infinite;
+}
+
+.emotion-0:before {
+  width: 16.666666666666668px;
+  height: 2px;
+  top: 24px;
+  left: 24px;
+  -webkit-transform-origin: 1px 1px;
+  -ms-transform-origin: 1px 1px;
+  transform-origin: 1px 1px;
+  -webkit-animation: animation-0 8s linear infinite;
+  animation: animation-0 8s linear infinite;
+}
+
+<Loader
+  color="#000000"
+  css=""
+  loading={true}
+  size={50}
+>
+  <div
+    className="emotion-0"
+  />
+</Loader>
+`;

docs/index.html

@@ -37,7 +37,7 @@
     ga('send', 'pageview');
 
   </script>
-<script type="text/javascript" src="javascripts/npm-lodash-45d218605c4e1ba9346f.js"></script><script type="text/javascript" src="javascripts/npm-react-color-519aa2daa6e8df6ee6d8.js"></script><script type="text/javascript" src="javascripts/npm-emotion-ffccee56bd9e060dc459.js"></script><script type="text/javascript" src="javascripts/npm-reactcss-215a4a2388c369367835.js"></script><script type="text/javascript" src="javascripts/npm-react-dom-592e36a0fc36eb37c017.js"></script><script type="text/javascript" src="javascripts/npm-tinycolor2-9b6501c167566e1417f7.js"></script><script type="text/javascript" src="javascripts/vendors~main-6c988d79c98762b02ce1.js"></script><script type="text/javascript" src="javascripts/main-65333591030fd064223a.js"></script></head>
+<script type="text/javascript" src="javascripts/npm-lodash-274d46f3c933a7c99cd9.js"></script><script type="text/javascript" src="javascripts/npm-react-color-07d019635c56c6ccc579.js"></script><script type="text/javascript" src="javascripts/npm-emotion-46d0bff312017d5c792f.js"></script><script type="text/javascript" src="javascripts/npm-reactcss-5dabd4e7069c1b893dd5.js"></script><script type="text/javascript" src="javascripts/npm-react-dom-95e71e900f54f4b47a13.js"></script><script type="text/javascript" src="javascripts/npm-tinycolor2-1cbf8a88d1c5d5cdbb90.js"></script><script type="text/javascript" src="javascripts/vendors~main-449453e809c4ca1e9cd2.js"></script><script type="text/javascript" src="javascripts/main-e61171cd8bfc2883ebcb.js"></script></head>
 
 <body>
   <header id='header'>