patternfly · priley86 · Dec 12, 2017 · Dec 7, 2017 · priley86 · Dec 8, 2017
diff --git a/src/components/Spinner/Spinner.js b/src/components/Spinner/Spinner.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+const Spinner = ({
+  loading,
+  size,
+  inline,
+  children,
+  inverse,
+  className,
+  ...props
+}) => {
+  if (loading) {
+    const classes = cx(className, 'spinner', `spinner-${size}`, {
+      'spinner-inline': inline,
+      'spinner-inverse': inverse,
+    });
+
+    return <div className={classes} {...props} />;
+  }
+
+  if (children) {
+    return children;
+  }
+
+  return null;
+};
+
+Spinner.propTypes = {
+  loading: PropTypes.bool,
+  inline: PropTypes.bool,
+  inverse: PropTypes.bool,
+  size: PropTypes.oneOf(['lg', 'md', 'sm', 'xs']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
+Spinner.defaultProps = {
+  loading: false,
+  size: 'md',
+  inline: false,
+  inverse: false,
+  className: '',
+};
+
+export default Spinner;
diff --git a/src/components/Spinner/Spinner.stories.js b/src/components/Spinner/Spinner.stories.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, select, boolean } from '@storybook/addon-knobs';
+
+import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import Spinner from './index';
+
+const stories = storiesOf('Widgets', module);
+
+stories.addDecorator(withKnobs);
+stories.addDecorator(
+  defaultTemplate({
+    title: 'Spinner',
+    documentationLink:
+      'http://www.patternfly.org/pattern-library/widgets/#spinner',
+  }),
+);
+
+stories.addWithInfo('Spinner', () => {
+  const loading = boolean('Loading', true);
+  const inline = boolean('Inline', false);
+  const inverse = boolean('Inverse', false);
+  const size = select('Size', ['lg', 'md', 'sm', 'xs'], 'md');
+
+  const wrapperStyle = {
+    backgroundColor: inverse ? 'black' : 'white',
+    color: inverse ? 'white' : 'black',
+    padding: '15px',
+  };
+
+  const spinnerProps = {
+    loading,
+    size,
+    inline,
+    inverse,
+  };
+
+  if (inline) {
+    return (
+      <div style={wrapperStyle}>
+        <Spinner {...spinnerProps} />
+        Some inline text here.
+      </div>
+    );
+  }
+
+  return (
+    <div style={wrapperStyle}>
+      <Spinner {...spinnerProps}>
+        <strong>
+          Show chilren when <code>loading</code> is <code>false</code>.
+        </strong>
+      </Spinner>
+    </div>
+  );
+});
diff --git a/src/components/Spinner/Spinner.test.js b/src/components/Spinner/Spinner.test.js
@@ -0,0 +1,27 @@
+/* eslint-env jest */
+
+import React from 'react';
+import Spinner from './index';
+import renderer from 'react-test-renderer';
+
+test('Spinner should not render children when loading', () => {
+  const component = renderer.create(
+    <Spinner loading>
+      <span>Children should not render.</span>
+    </Spinner>,
+  );
+
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Spinner should render children when not loading', () => {
+  const component = renderer.create(
+    <Spinner size="lg">
+      <span>Children should be rendered.</span>
+    </Spinner>,
+  );
+
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/Spinner/__snapshots__/Spinner.test.js.snap b/src/components/Spinner/__snapshots__/Spinner.test.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spinner should not render children when loading 1`] = `
+<div
+  className="spinner spinner-md"
+/>
+`;
+
+exports[`Spinner should render children when not loading 1`] = `
+<span>
+  Children should be rendered.
+</span>
+`;
diff --git a/src/components/Spinner/index.js b/src/components/Spinner/index.js
@@ -0,0 +1 @@
+export { default } from './Spinner';