Add Spinner component and examples

Author: lyzadanger

src/components/Spinner.js

@@ -0,0 +1,21 @@
+import classnames from 'classnames';
+
+/**
+ * @typedef SpinnerProps
+ * @prop {string} [classes] - Additional CSS classes to apply
+ */
+
+/**
+ * Loading indicator.
+ *
+ * @param {SpinnerProps} props
+ */
+export function Spinner({ classes = '' }) {
+  return (
+    <span className={classnames('Hyp-Spinner', classes)}>
+      <span>
+        <span />
+      </span>
+    </span>
+  );
+}

src/components/test/Spinner-test.js

@@ -0,0 +1,26 @@
+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');
+  });
+
+  it('applies additional classes', () => {
+    createSpinner({ classes: 'foo bar' });
+    assert.exists('span.Hyp-Spinner.foo.bar');
+  });
+
+  it(
+    'should pass a11y checks',
+    checkAccessibility({
+      content: () => createSpinner(),
+    })
+  );
+});

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,22 @@
+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>
+        </PatternExamples>
+      </Pattern>
+    </PatternPage>
+  );
+}

src/pattern-library/routes.js

@@ -13,6 +13,7 @@ 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
@@ -100,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,5 @@
+@use '../mixins/patterns/spinners';
+
+.Hyp-Spinner {
+  @include spinners.spinner;
+}

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