There are no notes for this item.
| Prop | Required? | Type | Default | Description |
|---|---|---|---|---|
| message | Yes | string | ||
| setFocus | No | bool | false |
<div id="reactMount" data-tpl="loadingindicator">
<div class="loading-indicator-container">
<div class="loading-indicator" role="progressbar" aria-valuetext="Loading your application" tabindex="0"></div>Loading your application</div>
</div>
<script>
window.currentProps = {
"package": {
"name": "department-of-veteran-affairs/jean-pants",
"version": "0.1.0"
},
"assetPath": "/design-system/",
"isProduction": true,
"componentSourcePath": "LoadingIndicator.jsx",
"id": "default",
"message": "Loading your application",
"setFocus": true
}
</script>
import React from 'react';
import LoadingIndicator from './LoadingIndicator.jsx';
export default function LoadingIndicatorExample(props) {
return (
<LoadingIndicator
message={props.message}
setFocus={props.setFocus}/>
);
}
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
componentSourcePath: LoadingIndicator.jsx
id: default
message: Loading your application
setFocus: true
import PropTypes from 'prop-types';
import React from 'react';
export default class LoadingIndicator extends React.Component {
componentDidMount() {
if (this.props.setFocus) {
this.spinnerDiv.focus();
}
}
render() {
const { message } = this.props;
return (
<div className="loading-indicator-container">
<div
ref={(div) => { this.spinnerDiv = div; }}
className="loading-indicator"
role="progressbar"
aria-valuetext={message}
tabIndex="0">
</div>
{message}
</div>
);
}
}
LoadingIndicator.propTypes = {
// message visible on screen when loading
message: PropTypes.string.isRequired,
// does the loading indicator capture focus
setFocus: PropTypes.bool
};
LoadingIndicator.defaultProps = {
setFocus: false
};
import { expect } from 'chai';
import React from 'react';
import { axeCheck, mountToDiv } from '../../../lib/testing/helpers';
import LoadingIndicator from './LoadingIndicator.jsx';
describe('<LoadingIndicator>', () => {
it('should not focus if setFocus is not set', () => {
const component = <LoadingIndicator message="Loading"/>;
mountToDiv(component, 'loadingContainer');
expect(document.activeElement.classList.contains('loading-indicator')).to.be.false;
});
it('should focus if setFocus is set', () => {
const component = <LoadingIndicator setFocus message="Loading"/>;
mountToDiv(component, 'loadingContainer');
expect(document.activeElement.classList.contains('loading-indicator')).to.be.true;
});
it('should pass aXe check', () => {
return axeCheck(<LoadingIndicator message="Loading"/>);
});
});