adds LoadingOverlay to the DS (#421)

Author: jasonbasuil

spec/__snapshots__/Storyshots.test.js.snap

@@ -3424,6 +3424,39 @@ exports[`Storyshots Design System/Form Elements/RadioButtonGroup Description Row
 </div>
 `;
 
+exports[`Storyshots Design System/LoadingOverlay Default 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    className="overlay"
+    style={Object {}}
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-spinner-third fa-w-16 fa-spinner"
+      data-icon="spinner-third"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Design System/Modal Danger Modal 1`] = `
 <div
   style={

src/LoadingOverlay/LoadingOverlay.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinnerThird } from '@fortawesome/pro-solid-svg-icons';
+
+import './LoadingOverlay.scss';
+
+const LoadingOverlay = (props) => {
+  // Only set style if this is not visible to let CSS handle how to display this
+  const classes = classNames(
+    'overlay',
+    {
+      'overlay--text': !!props.text,
+      'overlay--content-top': props.contentTop,
+    },
+  );
+
+  return (
+    <div
+      className={classes}
+      style={props.visible ? {} : { display: 'none' }}
+    >
+      { props.header && (
+        <p className="overlay__header">
+          {props.header}
+        </p>
+      )}
+      { props.text && <p className={props.textClassName}>{props.text}</p> }
+
+      <FontAwesomeIcon className="fa-spinner" icon={faSpinnerThird} />
+    </div>
+  );
+};
+
+LoadingOverlay.propTypes = {
+  contentTop: PropTypes.bool,
+  header: PropTypes.string,
+  text: PropTypes.string,
+  textClassName: PropTypes.string,
+  visible: PropTypes.bool,
+};
+
+LoadingOverlay.defaultProps = {
+  contentTop: false,
+  header: undefined,
+  text: undefined,
+  textClassName: undefined,
+  visible: true,
+};
+
+export default LoadingOverlay;

src/LoadingOverlay/LoadingOverlay.mdx

@@ -0,0 +1,11 @@
+import { ArgsTable, Story, Preview } from '@storybook/addon-docs/blocks';
+import LoadingOverlay from './LoadingOverlay';
+
+# LoadingOverlay
+A visual indicator for a loading state.
+
+<Preview>
+  <Story id="design-system-loadingoverlay--default" />
+</Preview>
+
+<ArgsTable of={LoadingOverlay} />

src/LoadingOverlay/LoadingOverlay.scss

@@ -0,0 +1,12 @@
+.fa-spinner {
+  animation: spin infinite 0.6s linear;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/LoadingOverlay/LoadingOverlay.stories.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import LoadingOverlay from 'src/LoadingOverlay';
+
+import mdx from './LoadingOverlay.mdx';
+
+export default {
+  title: 'Design System/LoadingOverlay',
+  component: LoadingOverlay,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => (
+  <LoadingOverlay visible />
+);

src/LoadingOverlay/index.js

@@ -0,0 +1 @@
+export { default } from './LoadingOverlay';

src/index.js

@@ -12,6 +12,7 @@ import FormControlLabel from 'src/FormControlLabel';
 import FormGroup from 'src/FormGroup';
 import Input from 'src/Input';
 import InputLabel from 'src/InputLabel';
+import LoadingOverlay from 'src/LoadingOverlay';
 import {
   Modal,
   MODAL_SIZES,
@@ -68,6 +69,7 @@ export {
   FormGroup,
   Input,
   InputLabel,
+  LoadingOverlay,
   MessageTypes,
   Modal,
   MODAL_SIZES,