diff --git a/packages/design-system-dashboard-cli/coverage/lcov-report/write-react-owners-to-csv.js.html b/packages/design-system-dashboard-cli/coverage/lcov-report/write-react-owners-to-csv.js.html index ad96289e8..11c93513b 100644 --- a/packages/design-system-dashboard-cli/coverage/lcov-report/write-react-owners-to-csv.js.html +++ b/packages/design-system-dashboard-cli/coverage/lcov-report/write-react-owners-to-csv.js.html @@ -332,11 +332,10 @@

All files write-react-owners-to-csv.js

const componentsToKeep = [ 'ExpandingGroup', 'IconSearch', - 'LoadingIndicator', 'TextInput', ];   -const hasMigrationScript = ['LoadingIndicator']; +const hasMigrationScript = [];   function cleanPath(pathToClean) { const cwd = process.cwd(); diff --git a/packages/design-system-dashboard-cli/src/write-react-owners-to-csv.js b/packages/design-system-dashboard-cli/src/write-react-owners-to-csv.js index f7d68d189..bf2bae4f4 100644 --- a/packages/design-system-dashboard-cli/src/write-react-owners-to-csv.js +++ b/packages/design-system-dashboard-cli/src/write-react-owners-to-csv.js @@ -9,12 +9,11 @@ const componentsToKeep = [ 'Breadcrumbs', 'ExpandingGroup', 'IconSearch', - 'LoadingIndicator', 'Modal', 'TextInput', ]; -const hasMigrationScript = ['AlertBox', 'LoadingIndicator']; +const hasMigrationScript = ['AlertBox']; function cleanPath(pathToClean) { const cwd = process.cwd(); diff --git a/packages/react-components/index.js b/packages/react-components/index.js index a3074f667..56d43127a 100644 --- a/packages/react-components/index.js +++ b/packages/react-components/index.js @@ -2,7 +2,6 @@ import Breadcrumbs from './Breadcrumbs'; import ExpandingGroup from './ExpandingGroup'; import IconBase from './IconBase'; import IconSearch from './IconSearch'; -import LoadingIndicator from './LoadingIndicator'; import Modal from './Modal'; import TextInput from './TextInput'; @@ -13,7 +12,6 @@ export { ExpandingGroup, IconBase, IconSearch, - LoadingIndicator, Modal, TextInput, }; diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 096b98c67..672391016 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/react-components", - "version": "20.0.1", + "version": "21.0.0", "description": "VA.gov component library in React", "keywords": [ "react", diff --git a/packages/react-components/src/components/LoadingIndicator/LoadingIndicator.jsx b/packages/react-components/src/components/LoadingIndicator/LoadingIndicator.jsx deleted file mode 100644 index eac66a0d2..000000000 --- a/packages/react-components/src/components/LoadingIndicator/LoadingIndicator.jsx +++ /dev/null @@ -1,81 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import dispatchAnalyticsEvent from '../../helpers/analytics'; - -/** - * **Note:** This component is deprecated in favor of the `` Web Component - */ -export default class LoadingIndicator extends React.Component { - constructor(props) { - super(props); - - // This state variable is used as a constant to get a diff - // between initial mount and unmount - this.state = { loadingStartTime: Date.now() }; - } - - componentDidMount() { - if (this.props.setFocus && this.spinnerDiv) { - this.spinnerDiv.focus(); - } - } - - componentWillUnmount() { - if (this.props.enableAnalytics) { - dispatchAnalyticsEvent({ - componentName: 'LoadingIndicator', - action: 'displayed', - details: { - displayTime: Date.now() - this.state.loadingStartTime, - message: this.props.message, - }, - }); - } - } - - render() { - const { message } = this.props; - const { label } = this.props; - - return ( -
-
{ - this.spinnerDiv = div; - }} - className="loading-indicator" - role="progressbar" - aria-label={label} - aria-valuetext={message} - tabIndex="0" - /> - {message} -
- ); - } -} - -LoadingIndicator.propTypes = { - /** - * The message visible on screen when loading - */ - message: PropTypes.string.isRequired, - /** - * Set to true if the loading indicator should capture focus - */ - setFocus: PropTypes.bool, - /** - * An aXe label - */ - label: PropTypes.string, - /** - * Analytics tracking function(s) will be called. Form components - * are disabled by default due to PII/PHI concerns. - */ - enableAnalytics: PropTypes.bool, -}; - -LoadingIndicator.defaultProps = { - setFocus: false, - label: 'Loading', -}; diff --git a/packages/react-components/src/components/LoadingIndicator/LoadingIndicator.mdx b/packages/react-components/src/components/LoadingIndicator/LoadingIndicator.mdx deleted file mode 100644 index 742ec1d6e..000000000 --- a/packages/react-components/src/components/LoadingIndicator/LoadingIndicator.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: LoadingIndicator -name: LoadingIndicator -tags: indicator, component ---- - -import LoadingIndicator from './LoadingIndicator' - -### Code: - -```javascript -import LoadingIndicator from '@department-of-veterans-affairs/component-library/LoadingIndicator' - -
- -
-``` - -### Rendered Component - -
- -
diff --git a/packages/react-components/src/components/LoadingIndicator/LoadingIndicator.unit.spec.jsx b/packages/react-components/src/components/LoadingIndicator/LoadingIndicator.unit.spec.jsx deleted file mode 100644 index 242b53973..000000000 --- a/packages/react-components/src/components/LoadingIndicator/LoadingIndicator.unit.spec.jsx +++ /dev/null @@ -1,68 +0,0 @@ -import { expect } from 'chai'; -import React from 'react'; -import sinon from 'sinon'; -import { - axeCheck, - mountToDiv, - testAnalytics, -} from '../../helpers/test-helpers'; - -import LoadingIndicator from './LoadingIndicator.jsx'; - -describe('', () => { - it('should not focus if setFocus is not set', () => { - const component = ( - - ); - const mountedComponent = mountToDiv(component, 'loadingContainer'); - - expect(document.activeElement.classList.contains('loading-indicator')).to.be - .false; - mountedComponent.unmount(); - }); - - it('should focus if setFocus is set', () => { - const component = ( - - ); - const mountedComponent = mountToDiv(component, 'loadingContainer'); - - expect(document.activeElement.classList.contains('loading-indicator')).to.be - .true; - mountedComponent.unmount(); - }); - - it('should pass aXe check', () => - axeCheck()); - - describe('analytics event', function () { - it('should be triggered when component is unmounted', () => { - const component = ( - - ); - - const mountedComponent = mountToDiv(component, 'loadingContainer'); - const spy = testAnalytics(mountedComponent, () => { - mountedComponent.unmount(); - }); - - expect( - spy.calledWith( - sinon.match.has('detail', { - componentName: 'LoadingIndicator', - action: 'displayed', - details: { - displayTime: sinon.match.number, - message: 'Loading', - }, - version: sinon.match.string, - }), - ), - ).to.be.true; - }); - }); -}); diff --git a/packages/react-components/src/index.js b/packages/react-components/src/index.js index cfa2887cd..7ea2bdbc8 100644 --- a/packages/react-components/src/index.js +++ b/packages/react-components/src/index.js @@ -2,7 +2,6 @@ import Breadcrumbs from './components/Breadcrumbs/Breadcrumbs'; import ExpandingGroup from './components/ExpandingGroup/ExpandingGroup'; import IconBase from './components/IconBase/IconBase'; import IconSearch from './components/IconSearch/IconSearch'; -import LoadingIndicator from './components/LoadingIndicator/LoadingIndicator'; import Modal from './components/Modal/Modal'; import TextInput from './components/TextInput/TextInput'; @@ -11,7 +10,6 @@ export { ExpandingGroup, IconBase, IconSearch, - LoadingIndicator, Modal, TextInput, };