add loader component

.gitignore

@@ -65,4 +65,5 @@ typings/
 /dist
 /lib
 /full
-.coverage
+.coverage
+.vscode

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],

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 {}}
+/>
+`;

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();
+  });
+});

src/components/loader/index.js

@@ -0,0 +1,3 @@
+import './loader.sass';
+
+export { default } from './loader';

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;

src/components/loader/loader.sass

@@ -0,0 +1,4 @@
+@import '../utils.sass';
+
+.loader
+  +loader

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" />
+  )));

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

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';