Add spinner pattern and Spinner component

src/components/Spinner.js

@@ -0,0 +1,26 @@
+import classnames from 'classnames';
+
+import { registerIcons, SvgIcon } from './SvgIcon';
+
+// Register the spinner icon for use
+registerIcons({
+  /** @ts-ignore - TS doesn't understand require here */
+  'hyp-spinner': require('../../images/icons/spinner.svg'),
+});
+
+/**
+ * @typedef SpinnerProps
+ * @prop {string} [classes] - Additional CSS classes to apply
+ * @prop {'small'|'medium'|'large'} [size='medium'] - Relative size of spinner
+ *   to surrounding content
+ */
+
+/**
+ * Loading indicator.
+ *
+ * @param {SpinnerProps} props
+ */
+export function Spinner({ classes = '', size = 'medium' }) {
+  const baseClass = `Hyp-Spinner--${size}`;
+  return <SvgIcon name="spinner" className={classnames(baseClass, classes)} />;
+}

src/components/test/Spinner-test.js

@@ -0,0 +1,31 @@
+import { mount } from 'enzyme';
+
+import { Spinner } from '../Spinner';
+
+import { checkAccessibility } from '../../../test/util/accessibility';
+
+describe('Spinner', () => {
+  const createSpinner = (props = {}) => mount(<Spinner {...props} />);
+
+  it('renders', () => {
+    createSpinner();
+    assert.exists('span.Hyp-Spinner--medium');
+  });
+
+  it('applies additional classes', () => {
+    createSpinner({ classes: 'foo bar' });
+    assert.exists('span.Hyp-Spinner--medium.foo.bar');
+  });
+
+  it('sets indicated size', () => {
+    createSpinner({ size: 'xlarge' });
+    assert.exists('span.Hyp-Spinner--large.foo.bar');
+  });
+
+  it(
+    'should pass a11y checks',
+    checkAccessibility({
+      content: () => createSpinner(),
+    })
+  );
+});

src/icons.js

@@ -10,5 +10,6 @@ export default {
   edit: require('../images/icons/edit.svg'),
   logo: require('../images/icons/logo.svg'),
   profile: require('../images/icons/profile.svg'),
+  spinner: require('../images/icons/spinner.svg'),
   trash: require('../images/icons/trash.svg'),
 };

src/index.js

@@ -5,6 +5,7 @@ export { Frame, Card, Actions } from './components/containers';
 export { Dialog } from './components/Dialog';
 export { Modal, ConfirmModal } from './components/Modal';
 export { Panel } from './components/Panel';
+export { Spinner } from './components/Spinner';
 export { SvgIcon, registerIcons } from './components/SvgIcon';
 export { TextInput, TextInputWithButton } from './components/TextInput';
 

src/pattern-library/components/patterns/SpinnerComponents.js

@@ -0,0 +1,28 @@
+import { Spinner } from '../../..';
+
+import {
+  PatternPage,
+  Pattern,
+  PatternExamples,
+  PatternExample,
+} from '../PatternPage';
+
+export default function SpinnerComponents() {
+  return (
+    <PatternPage title="Spinner">
+      <Pattern title="Spinner">
+        <PatternExamples>
+          <PatternExample details="basic loading spinner">
+            <Spinner />
+          </PatternExample>
+          <PatternExample details="loading spinner, large">
+            <Spinner size="large" />
+          </PatternExample>
+          <PatternExample details="loading spinner, small">
+            <Spinner size="small" />
+          </PatternExample>
+        </PatternExamples>
+      </Pattern>
+    </PatternPage>
+  );
+}

src/pattern-library/components/patterns/SpinnerPatterns.js

@@ -0,0 +1,37 @@
+import {
+  PatternExample,
+  PatternExamples,
+  PatternPage,
+  Pattern,
+} from '../PatternPage';
+
+import { SvgIcon } from '../../..';
+
+export default function SpinnerPatterns() {
+  return (
+    <PatternPage title="Spinners">
+      <p>
+        The <code>spinner</code> pattern can be used to show loading states. It
+        is an animated SVG.
+      </p>
+      <Pattern title="Spinner">
+        <p>
+          The spinner is <code>em-sized</code>; it renders at <code>1em</code>{' '}
+          square, by default. Other relative sizes are available as follows. For
+          manual sizing control, adjust the font-size of a parent element.
+        </p>
+        <PatternExamples>
+          <PatternExample details="basic spinner">
+            <SvgIcon name="spinner" className="hyp-spinner" />
+          </PatternExample>
+          <PatternExample details="spinner, large size">
+            <SvgIcon name="spinner" className="hyp-spinner--large" />
+          </PatternExample>
+          <PatternExample details="spinner, small size">
+            <SvgIcon name="spinner" className="hyp-spinner--small" />
+          </PatternExample>
+        </PatternExamples>
+      </Pattern>
+    </PatternPage>
+  );
+}

src/pattern-library/routes.js

@@ -6,12 +6,14 @@ import LayoutFoundations from './components/patterns/LayoutFoundations';
 import FormPatterns from './components/patterns/FormPatterns';
 import ContainerPatterns from './components/patterns/ContainerPatterns';
 import PanelPatterns from './components/patterns/PanelPatterns';
+import SpinnerPatterns from './components/patterns/SpinnerPatterns';
 
 import ButtonComponents from './components/patterns/ButtonComponents';
 import ContainerComponents from './components/patterns/ContainerComponents';
 import DialogComponents from './components/patterns/DialogComponents';
 import FormComponents from './components/patterns/FormComponents';
 import PanelComponents from './components/patterns/PanelComponents';
+import SpinnerComponents from './components/patterns/SpinnerComponents';
 
 /**
  * @typedef {'home'|'foundations'|'patterns'|'components'} PlaygroundRouteGroup
@@ -63,6 +65,12 @@ const routes = [
     component: PanelPatterns,
     group: 'patterns',
   },
+  {
+    route: '/patterns-spinners',
+    title: 'Spinners',
+    component: SpinnerPatterns,
+    group: 'patterns',
+  },
   {
     route: '/components-buttons',
     title: 'Buttons',
@@ -93,6 +101,12 @@ const routes = [
     component: PanelComponents,
     group: 'components',
   },
+  {
+    route: '/components-spinner',
+    title: 'Spinner',
+    component: SpinnerComponents,
+    group: 'components',
+  },
 ];
 
 /**

styles/components/Spinner.scss

@@ -0,0 +1,14 @@
+@use '../mixins/patterns/spinners';
+
+.Hyp-Spinner--small {
+  @include spinners.spinner($size: 1em);
+}
+
+.Hyp-Spinner,
+.Hyp-Spinner--medium {
+  @include spinners.spinner($size: 2em);
+}
+
+.Hyp-Spinner--large {
+  @include spinners.spinner($size: 3em);
+}

styles/index.scss

@@ -8,6 +8,7 @@
 @use './components/Dialog';
 @use './components/Modal';
 @use './components/Panel';
+@use './components/Spinner';
 @use './components/SvgIcon';
 @use './components/TextInput';
 @use './components/buttons/styles';

styles/mixins/patterns/_spinners.scss

@@ -0,0 +1,9 @@
+@use '../../variables' as var;
+
+// Style an SVG as a loading spinner
+@mixin spinner($size: 2em) {
+  color: var.$color-grey-6;
+  // Assure that the spinner SVG is sized proportinally to local font-size
+  width: $size;
+  height: $size;
+}

styles/patterns/_spinners.scss

@@ -0,0 +1,14 @@
+@use '../mixins/patterns/spinners';
+
+.hyp-spinner--small {
+  @include spinners.spinner($size: 1em);
+}
+
+.hyp-spinner,
+.hyp-spinner--medium {
+  @include spinners.spinner($size: 2em);
+}
+
+.hyp-spinner--large {
+  @include spinners.spinner($size: 3em);
+}

styles/patterns/index.scss

@@ -1,3 +1,4 @@
 @use 'containers';
 @use 'forms';
 @use 'panels';
+@use 'spinners';