feat: New Busy Indicator component (#963)

* feat: New Busy Indicator component

* Added ability to hide Busy Indicator

- Added prop 'show' to show/hide Busy Indicator
- Updated .size-limit

* Added localized text support || Fixes

Changes suggested in PR
- Updated style class for "s" size
- Added aria-label/aria-hidden
- Updated to return null intead of fragments when component is hidden

* Removed unused prop

.size-limit

@@ -3,6 +3,6 @@
     name: "Fundamental-React Size",
     webpack: true,
     path: "lib/index.js",
-    limit: "190 KB"
+    limit: "195 KB"
   }
 ]

src/BusyIndicator/BusyIndicator.Component.js

@@ -0,0 +1,26 @@
+import { BusyIndicator } from '../';
+import path from 'path';
+import React from 'react';
+import { ComponentPage, Example } from '../_playground';
+
+export const BusyIndicatorComponent = () => {
+    return (
+        <ComponentPage
+            description={'A **Busy Indicator** informs the user of an ongoing operation.'}
+            sourceModulePath={path.join(__dirname, './BusyIndicator')}
+            title='Busy Indicator'>
+            <Example centered title='Busy Indicator'>
+                <BusyIndicator show />
+            </Example>
+
+            <Example
+                centered
+                description={'There are 3 sizes for Busy Indicator: s, m & l'}
+                title='Busy Indicator Sizes'>
+                <BusyIndicator show size='s' />
+                <BusyIndicator show />
+                <BusyIndicator show size='l' />
+            </Example>
+        </ComponentPage>
+    );
+};

src/BusyIndicator/BusyIndicator.js

@@ -0,0 +1,75 @@
+import { BUSY_INDICATOR_SIZES } from '../utils/constants';
+import classnames from 'classnames';
+import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
+import PropTypes from 'prop-types';
+import React, { useEffect } from 'react';
+
+const BusyIndicator = React.forwardRef(({
+    className,
+    show,
+    size,
+    disableStyles,
+    localizedText,
+    ...props
+}, ref) => {
+
+    useEffect(() => {
+        if (!disableStyles) {
+            require('fundamental-styles/dist/icon.css');
+            require('fundamental-styles/dist/busy-indicator.css');
+        }
+    }, []);
+
+    const busyIndicatorClasses = classnames(
+        {
+            [`fd-busy-indicator--${size}`]: size === 'm' || size === 'l',
+            'fd-busy-indicator': size === 's'
+        },
+        className
+    );
+
+    if (!show)
+        return null;
+
+    return (
+        <div
+            {...props}
+            aria-hidden='false'
+            aria-label={localizedText.loading}
+            className={busyIndicatorClasses}
+            ref={ref} >
+            <div className='fd-busy-indicator--circle-0' />
+            <div className='fd-busy-indicator--circle-1' />
+            <div className='fd-busy-indicator--circle-2' />
+        </div>
+    );
+});
+
+BusyIndicator.displayName = 'BusyIndicator';
+
+BusyIndicator.propTypes = {
+    className: PropTypes.string,
+    disableStyles: PropTypes.bool,
+    localizedText: CustomPropTypes.i18n({
+        loading: PropTypes.string
+    }),
+    show: PropTypes.bool,
+    size: PropTypes.oneOf(BUSY_INDICATOR_SIZES)
+};
+
+BusyIndicator.defaultProps = {
+    localizedText: {
+        loading: 'Loading'
+    },
+    size: 'm',
+    show: false
+};
+
+BusyIndicator.propDescriptions = {
+    show: 'Set to **true** to make Busy Indicator visible',
+    localizedTextShape: {
+        loading: 'aria-label for Busy Indicator component'
+    }
+};
+
+export default BusyIndicator;

src/BusyIndicator/BusyIndicator.test.js

@@ -0,0 +1,64 @@
+import BusyIndicator from './BusyIndicator';
+import { mount } from 'enzyme';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+describe('<BusyIndicator />', () => {
+    const showDefaultBusyIndicator = <BusyIndicator show />;
+    const smallBusyIndicator = <BusyIndicator show size='s' />;
+    const largeBusyIndicator = <BusyIndicator show size='l' />;
+    const defaultBusyIndicator = <BusyIndicator />;
+    const hideBusyIndicator = <BusyIndicator show={false} />;
+
+    test('create busy indicators', () => {
+        // show default busy indicator
+        let component = renderer.create(showDefaultBusyIndicator);
+        let tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+
+        // small busy indicator
+        component = renderer.create(smallBusyIndicator);
+        tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+
+        // large busy indicator
+        component = renderer.create(largeBusyIndicator);
+        tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+
+        // default busy indicator
+        component = renderer.create(defaultBusyIndicator);
+        tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('hide busy indicator', () => {
+        // hide busy indicator
+        let component = renderer.create(hideBusyIndicator);
+        let tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    describe('Prop spreading', () => {
+        test('should allow props to be spread to the Busy Indicator component', () => {
+            const element = mount(<BusyIndicator data-sample='Sample' show />);
+
+            expect(
+                element.getDOMNode().attributes['data-sample'].value
+            ).toBe('Sample');
+        });
+    });
+    test('forwards the ref', () => {
+        let ref;
+        class Test extends React.Component {
+            constructor(props) {
+                super(props);
+                ref = React.createRef();
+            }
+            render = () => <BusyIndicator ref={ref} show />;
+        }
+        mount(<Test />);
+        expect(ref.current.tagName).toEqual('DIV');
+        expect(ref.current.className).toEqual('fd-busy-indicator--m');
+    });
+});

src/BusyIndicator/__snapshots__/BusyIndicator.test.js.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BusyIndicator /> create busy indicators 1`] = `
+<div
+  aria-hidden="false"
+  aria-label="Loading"
+  className="fd-busy-indicator--m"
+>
+  <div
+    className="fd-busy-indicator--circle-0"
+  />
+  <div
+    className="fd-busy-indicator--circle-1"
+  />
+  <div
+    className="fd-busy-indicator--circle-2"
+  />
+</div>
+`;
+
+exports[`<BusyIndicator /> create busy indicators 2`] = `
+<div
+  aria-hidden="false"
+  aria-label="Loading"
+  className="fd-busy-indicator"
+>
+  <div
+    className="fd-busy-indicator--circle-0"
+  />
+  <div
+    className="fd-busy-indicator--circle-1"
+  />
+  <div
+    className="fd-busy-indicator--circle-2"
+  />
+</div>
+`;
+
+exports[`<BusyIndicator /> create busy indicators 3`] = `
+<div
+  aria-hidden="false"
+  aria-label="Loading"
+  className="fd-busy-indicator--l"
+>
+  <div
+    className="fd-busy-indicator--circle-0"
+  />
+  <div
+    className="fd-busy-indicator--circle-1"
+  />
+  <div
+    className="fd-busy-indicator--circle-2"
+  />
+</div>
+`;
+
+exports[`<BusyIndicator /> create busy indicators 4`] = `null`;
+
+exports[`<BusyIndicator /> hide busy indicator 1`] = `null`;

src/BusyIndicator/__stories__/BusyIndicator.stories.js

@@ -0,0 +1,22 @@
+import BusyIndicator from '../BusyIndicator';
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+storiesOf('Components|BusyIndicator', module)
+    .addDecorator(withKnobs)
+    .add('Default', () => (
+        <BusyIndicator show />
+    ))
+    .add('small', () => (
+        <BusyIndicator show size='s' />
+    ))
+    .add('large', () => (
+        <BusyIndicator show size='l' />
+    ))
+    .add('hidden', () => (
+        <BusyIndicator />
+    ))
+    .add('disable styles', () => (
+        <BusyIndicator disableStyles show>Default</BusyIndicator>
+    ));

src/_playground/Routes.js

@@ -1,5 +1,6 @@
 import { ActionBarComponent } from '../ActionBar/ActionBar.Component';
 import { BreadcrumbComponent } from '../Breadcrumb/Breadcrumb.Component';
+import { BusyIndicatorComponent } from '../BusyIndicator/BusyIndicator.Component';
 import Button from '../Button/Button';
 import { ButtonComponent } from '../Button/Button.Component';
 import { CalendarComponent } from '../Calendar/Calendar.Component';
@@ -90,6 +91,12 @@ const routes = [
         component: BreadcrumbComponent,
         section: 'Components'
     },
+    {
+        url: '/busyIndicator',
+        name: 'Busy Indicator',
+        component: BusyIndicatorComponent,
+        section: 'Components'
+    },
     {
         url: '/button',
         name: 'Button',

src/index.js

@@ -2,6 +2,7 @@ export { default as ActionBar } from './ActionBar/ActionBar';
 export { default as Checkbox } from './Forms/Checkbox';
 export { default as Counter } from './Counter/Counter';
 export { default as Breadcrumb } from './Breadcrumb/Breadcrumb';
+export { default as BusyIndicator } from './BusyIndicator/BusyIndicator';
 export { default as Button } from './Button/Button';
 export { default as ButtonGroup } from './Button/ButtonGroup';
 export { default as Calendar } from './Calendar/Calendar';

src/utils/constants.js

@@ -5,6 +5,12 @@ export const MESSAGESTRIP_TYPES = [
     'information'
 ];
 
+export const BUSY_INDICATOR_SIZES = [
+    's',
+    'm',
+    'l'
+];
+
 export const BUTTON_OPTIONS = [
     'emphasized',
     'transparent'