adding loading component

src/__tests__/index.test.ts

@@ -10,6 +10,7 @@ describe('Index', () => {
       'TabSet',
       'Tag',
       'Tooltip',
+      'Loading',
       'WarningIcon',
     ]);
   });

src/all.scss

@@ -13,9 +13,14 @@
 @import './components/tooltip/Tooltip';
 @import './components/ribbon-link/RibbonLink';
 
+// LoadingSpinner Component
+@import './components/loading-spinner/Loading';
+
 // Masked Input Depends on standard Input Styling - Include here and
 // not in the components.scss
 @import '~nhsuk-frontend/packages/components/error-message/error-message';
 @import '~nhsuk-frontend/packages/components/label/label';
 @import '~nhsuk-frontend/packages/components/hint/hint';
 @import '~nhsuk-frontend/packages/components/input/input';
+
+@import '../node_modules/nhsuk-frontend/packages/components/panel/panel';

src/components.scss

@@ -9,3 +9,6 @@
 @import './components/tab-set/TabSet';
 @import './components/tooltip/Tooltip';
 @import './components/ribbon-link/RibbonLink';
+
+//Loading Component
+@import './components/loading/Loading';

src/components/loading-spinner/Loading.tsx

@@ -0,0 +1,31 @@
+import React, { HTMLProps } from 'react';
+import { Panel } from 'nhsuk-react-components';
+
+interface Props extends HTMLProps<HTMLDivElement> {
+  text?: string | false;
+  backdrop?: boolean;
+  shown?: boolean;
+}
+
+const Loading: React.FC<Props> = ({ backdrop, shown, text, width, height }) => {
+  if (!shown) return null;
+
+  const baseSpinner = (
+    <Panel className="nhsuk-loader__panel" style={{ minWidth: width, minHeight: height }}>
+      <div style={{ width, minHeight: height }} className="nhsuk-loader" />
+      {text && <p className="nhsuk-heading-l nhsuk-loader__text">{text}</p>}
+    </Panel>
+  );
+
+  return backdrop ? <div className="nhsuk-loader__backdrop">{baseSpinner}</div> : baseSpinner;
+};
+
+Loading.defaultProps = {
+  text: 'Loading...',
+  width: 200,
+  height: 200,
+  shown: true,
+  backdrop: true,
+};
+
+export default Loading;

src/components/loading-spinner/_Loading.scss

@@ -0,0 +1,62 @@
+@keyframes loadingSpin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.nhsuk-loader {
+  border: 5px solid transparent;
+  border-color: $color_nhsuk-grey-3;
+  border-top-color: $color_nhsuk-blue;
+  border-radius: 50%;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  animation: loadingSpin 1s linear infinite;
+
+  &__container {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+  }
+
+  &__text {
+    @include nhsuk-responsive-margin(4, 'top');
+    font-weight: 400;
+    text-align: center;
+  }
+
+  &__backdrop {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: none;
+    background-color: rgba($color_nhsuk-black, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 1;
+    animation: fadeIn 200ms ease-in-out forwards;
+    transition: opacity 200ms ease-in-out;
+
+    &--fade {
+      opacity: 0;
+    }
+  }
+
+  &__panel {
+    max-width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}

src/components/loading-spinner/__tests__/Loading.tests.tsx

@@ -0,0 +1,28 @@
+import Loading from '..';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+describe('loading', () => {
+  it('renders correctly given text', () => {
+    const component = shallow(
+      <Loading text="I am testing the loading component" />
+    );
+    expect(component).toMatchSnapshot();
+    expect(component.text()).toBe("I am testing the loading component");
+    component.unmount();
+  });
+
+  it('renders with default text if none supplied', () => {
+    const component = shallow(<Loading />);
+    expect(component).toMatchSnapshot();
+    expect(component.text()).toBe("Loading...");
+    component.unmount();
+  });
+
+  it('renders without text if false value supplied', () => {
+    const component = shallow(<Loading text=""/>);
+    expect(component).toMatchSnapshot();
+    expect(component.children('p')).toHaveLength(0);
+    component.unmount();
+  });
+});

src/components/loading-spinner/__tests__/__snapshots__/Loading.tests.tsx.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loading renders correctly given text 1`] = `
+<div>
+  <div
+    className="nhsuk-loader__container"
+  >
+    <p
+      className="nhsuk-heading-l"
+    >
+      I am testing the loading component
+    </p>
+  </div>
+  <div
+    className="nhsuk-loader__container"
+  >
+    <div
+      className="nhsuk-loader"
+    />
+  </div>
+</div>
+`;
+
+exports[`loading renders with default text if none supplied 1`] = `
+<div>
+  <div
+    className="nhsuk-loader__container"
+  >
+    <p
+      className="nhsuk-heading-l"
+    >
+      Loading...
+    </p>
+  </div>
+  <div
+    className="nhsuk-loader__container"
+  >
+    <div
+      className="nhsuk-loader"
+    />
+  </div>
+</div>
+`;
+
+exports[`loading renders without text if false value supplied 1`] = `
+<div>
+  <div
+    className="nhsuk-loader__container"
+  />
+  <div
+    className="nhsuk-loader__container"
+  >
+    <div
+      className="nhsuk-loader"
+    />
+  </div>
+</div>
+`;

src/components/loading-spinner/index.ts

@@ -0,0 +1,3 @@
+import Loading from './Loading';
+
+export default Loading;

src/index.ts

@@ -5,4 +5,5 @@ export { default as SubNavigation } from './components/sub-navigation';
 export { default as TabSet } from './components/tab-set';
 export { default as Tag } from './components/tag';
 export { default as Tooltip } from './components/tooltip';
+export { default as Loading } from './components/loading-spinner';
 export { WarningIcon } from './components/icons';

stories/Loading.stories.tsx

@@ -0,0 +1,22 @@
+import React, { useState, useEffect } from 'react';
+import { storiesOf } from '@storybook/react';
+import { Loading } from '../src';
+
+const stories = storiesOf('Loading spinner', module);
+
+stories
+  .add('Basic', () => <Loading />)
+  .add('With custom text', () => <Loading text="Loading patients" />)
+  .add('Without text', () => <Loading text={false} />)
+  .add('Without backdrop', () => <Loading backdrop={false} />)
+  .add('With custom sizing', () => <Loading width={100} height={100} text={false} />)
+  .add('With programmatic control', () => {
+    const [isShown, setIsShown] = useState<boolean>(true);
+
+    useEffect(() => {
+      const timeout = setTimeout(() => setIsShown(!isShown), 3000);
+      return () => clearTimeout(timeout);
+    }, [isShown]);
+
+    return <Loading shown={isShown} />;
+  });