From 55186ded3dad69639325bd4679528561604149dc Mon Sep 17 00:00:00 2001
From: John Benavides <john.elric@gmail.com>
Date: Fri, 6 Oct 2017 11:35:09 +0200
Subject: [PATCH] add loader component

---
 .gitignore                                    |  3 +-
 src/__test__/__snapshots__/index.test.js.snap |  1 +
 .../__snapshots__/loader.test.js.snap         | 36 +++++++++++++++++++
 src/components/loader/__test__/loader.test.js | 33 +++++++++++++++++
 src/components/loader/index.js                |  3 ++
 src/components/loader/loader.js               | 36 +++++++++++++++++++
 src/components/loader/loader.sass             |  4 +++
 src/components/loader/loader.story.js         | 23 ++++++++++++
 src/components/loader/loader.story.sass       |  8 +++++
 src/index.js                                  |  1 +
 10 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 src/components/loader/__test__/__snapshots__/loader.test.js.snap
 create mode 100644 src/components/loader/__test__/loader.test.js
 create mode 100644 src/components/loader/index.js
 create mode 100644 src/components/loader/loader.js
 create mode 100644 src/components/loader/loader.sass
 create mode 100644 src/components/loader/loader.story.js
 create mode 100644 src/components/loader/loader.story.sass

diff --git a/.gitignore b/.gitignore
index 05be2b29..1d5da3db 100644
--- a/.gitignore
+++ b/.gitignore
@@ -65,4 +65,5 @@ typings/
 /dist
 /lib
 /full
-.coverage
\ No newline at end of file
+.coverage
+.vscode
\ No newline at end of file
diff --git a/src/__test__/__snapshots__/index.test.js.snap b/src/__test__/__snapshots__/index.test.js.snap
index 4a03bcb8..67376a84 100644
--- a/src/__test__/__snapshots__/index.test.js.snap
+++ b/src/__test__/__snapshots__/index.test.js.snap
@@ -25,6 +25,7 @@ Object {
   "Icon": [Function],
   "Image": [Function],
   "Level": [Function],
+  "Loader": [Function],
   "Media": [Function],
   "Modal": [Function],
   "Notification": [Function],
diff --git a/src/components/loader/__test__/__snapshots__/loader.test.js.snap b/src/components/loader/__test__/__snapshots__/loader.test.js.snap
new file mode 100644
index 00000000..62585cb8
--- /dev/null
+++ b/src/components/loader/__test__/__snapshots__/loader.test.js.snap
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Box component Should Exist 1`] = `[Function]`;
+
+exports[`Box component Should concat Bulma class with classes in props 1`] = `
+<div
+  className="loader other-class test"
+  style={Object {}}
+/>
+`;
+
+exports[`Box component Should have box classname 1`] = `
+<div
+  className="loader"
+  style={Object {}}
+/>
+`;
+
+exports[`Box component Should have custom inline styles 1`] = `
+<section
+  className="loader"
+  style={
+    Object {
+      "width": 200,
+      "zIndex": 1,
+    }
+  }
+/>
+`;
+
+exports[`Box component Should render as an html section 1`] = `
+<section
+  className="loader"
+  style={Object {}}
+/>
+`;
diff --git a/src/components/loader/__test__/loader.test.js b/src/components/loader/__test__/loader.test.js
new file mode 100644
index 00000000..c09eedd7
--- /dev/null
+++ b/src/components/loader/__test__/loader.test.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Loader from '..';
+
+describe('Box component', () => {
+  it('Should Exist', () => {
+    expect(Loader).toMatchSnapshot();
+  });
+  it('Should have box classname', () => {
+    const component = renderer.create(
+      <Loader />,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Should concat Bulma class with classes in props', () => {
+    const component = renderer.create(
+      <Loader className="other-class test" />,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Should render as an html section', () => {
+    const component = renderer.create(
+      <Loader renderAs="section" />,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Should have custom inline styles', () => {
+    const component = renderer.create(
+      <Loader renderAs="section" style={{ width: 200, zIndex: 1 }} />,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/src/components/loader/index.js b/src/components/loader/index.js
new file mode 100644
index 00000000..c80ef0be
--- /dev/null
+++ b/src/components/loader/index.js
@@ -0,0 +1,3 @@
+import './loader.sass';
+
+export { default } from './loader';
diff --git a/src/components/loader/loader.js b/src/components/loader/loader.js
new file mode 100644
index 00000000..dd938bd2
--- /dev/null
+++ b/src/components/loader/loader.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const Loader = ({
+  children,
+  className,
+  style,
+  renderAs,
+}) => {
+  const Element = renderAs;
+  return (
+    <Element
+      style={style}
+      className={classnames('loader', className)}
+    >
+      {children}
+    </Element>
+  );
+};
+
+Loader.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  renderAs: PropTypes.string,
+};
+
+Loader.defaultProps = {
+  children: null,
+  className: '',
+  style: {},
+  renderAs: 'div',
+};
+
+export default Loader;
diff --git a/src/components/loader/loader.sass b/src/components/loader/loader.sass
new file mode 100644
index 00000000..406131f8
--- /dev/null
+++ b/src/components/loader/loader.sass
@@ -0,0 +1,4 @@
+@import '../utils.sass';
+
+.loader
+  +loader
\ No newline at end of file
diff --git a/src/components/loader/loader.story.js b/src/components/loader/loader.story.js
new file mode 100644
index 00000000..7754b09a
--- /dev/null
+++ b/src/components/loader/loader.story.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+import './loader.story.sass';
+import Loader from '.';
+
+storiesOf('Loader', module)
+  .addDecorator(story => (
+    <div style={{ margin: 10 }}>
+      {story()}
+    </div>
+  ))
+  .add('Default', withInfo()(() => (
+    <Loader />
+  )))
+  .add('with inline style', withInfo()(() => (
+    <Loader style={{ width: 300, height: 300, border: '4px solid blue', borderTopColor: 'transparent', borderRightColor: 'transparent' }} />
+  )))
+  .add('with other classes', withInfo()(() => (
+    <Loader className="loader-override" />
+  )));
diff --git a/src/components/loader/loader.story.sass b/src/components/loader/loader.story.sass
new file mode 100644
index 00000000..94903c47
--- /dev/null
+++ b/src/components/loader/loader.story.sass
@@ -0,0 +1,8 @@
+.loader-override
+  margin-left: auto
+  margin-right: auto
+  height: 4em
+  width: 4em
+  border: 4px solid red
+  border-right-color: transparent
+  border-top-color: transparent
diff --git a/src/index.js b/src/index.js
index 414c9bc2..943f2273 100644
--- a/src/index.js
+++ b/src/index.js
@@ -22,4 +22,5 @@ export { default as Tile } from './components/tile';
 export { default as Modal } from './components/modal';
 export { default as Dropdown } from './components/dropdown';
 export { default as Icon } from './components/icon';
+export { default as Loader } from './components/loader';