` instead.
- */
-class AlertBox extends Component {
- constructor(props) {
- super(props);
- this.handleAlertBodyClick = this.handleAlertBodyClick.bind(this);
- }
-
- componentDidMount() {
- this.scrollToAlert();
- }
-
- componentWillUnmount() {
- clearTimeout(this.scrollToAlertTimeout);
- }
-
- shouldComponentUpdate(nextProps) {
- const visibilityChanged = this.props.isVisible !== nextProps.isVisible;
- const contentChanged = this.props.content !== nextProps.content;
- const statusChanged = this.props.status !== nextProps.status;
- return visibilityChanged || contentChanged || statusChanged;
- }
-
- componentDidUpdate() {
- this.scrollToAlert();
- }
-
- scrollToAlert = () => {
- if (!this._ref || !this._ref.scrollIntoView) {
- return;
- }
-
- // Without using the setTimeout, React has not added the element
- // to the DOM when it calls scrollIntoView()
- if (this.props.isVisible && this.props.scrollOnShow) {
- clearTimeout(this.scrollToAlertTimeout);
- this.scrollToAlertTimeout = setTimeout(() => {
- this._ref.scrollIntoView({
- block: this.props.scrollPosition,
- behavior: 'smooth',
- });
- }, 0);
- }
- };
-
- handleAlertBodyClick(e) {
- if (!this.props.disableAnalytics) {
- // If it's a link being clicked, dispatch an analytics event
- if (e.target?.tagName === 'A') {
- dispatchAnalyticsEvent({
- componentName: 'AlertBox',
- action: 'linkClick',
- details: {
- clickLabel: e.target.innerText,
- headline: this.props.headline,
- status: this.props.status,
- backgroundOnly: this.props.backgroundOnly,
- closeable: !!this.props.onCloseAlert,
- },
- });
- }
- }
- }
-
- render() {
- if (!this.props.isVisible) return ;
-
- const alertClass = classNames(
- 'usa-alert',
- `usa-alert-${this.props.status}`,
- { 'background-color-only': this.props.backgroundOnly },
- this.props.className,
- );
-
- const closeButton = this.props.onCloseAlert && (
-
- );
-
- const alertHeading = this.props.headline;
- const alertText = this.props.content || this.props.children;
- const H = `h${this.props.level}`;
-
- return (
- {
- this._ref = ref;
- }}
- >
-
- {alertHeading &&
{alertHeading}}
- {alertText &&
{alertText}
}
-
- {closeButton}
-
-
-
-
-
-
-
{}}/>
-
- Content without heading.}
- status={ALERT_TYPE.INFO}/>
-
-
-
-
-
-
-
-
-
{}}/>
-
- Content without heading.}
- status={ALERT_TYPE.INFO}/>
-
-
-
- Date: {formatDate(startsAt, 'dateFull')}
-
-
- Start/End time: {formatDate(startsAt, 'timeShort')}{' '}
- to {formatDate(expiresAt, 'timeShort')} ET
-
-
- );
- }
-
- return (
- <>
-
- Start: {formatDate(startsAt)} ET
-
-
- End: {formatDate(expiresAt)} ET
-
-
- );
- };
-
- onCloseAlert = () => {
- if (this.props.localStorage) {
- this.props.localStorage.setItem(MAINTENANCE_BANNER, this.props.id);
- }
- this.setState({ dismissed: true });
- };
-
- render() {
- const { derivePostContent, onCloseAlert } = this;
- const { dismissed } = this.state;
- const {
- content,
- expiresAt,
- id,
- startsAt,
- title,
- warnContent,
- warnStartsAt,
- warnTitle,
- } = this.props;
-
- // Derive dates.
- const now = new Date();
- const postContent = derivePostContent();
-
- // Escape early if the banner is dismissed.
- if (dismissed) {
- return null;
- }
-
- // Escape early if it's before when it should show.
- if (isDateBefore(now, warnStartsAt)) {
- return null;
- }
-
- // Escape early if it's after when it should show.
- if (isDateAfter(now, expiresAt)) {
- return null;
- }
-
- // Show pre-downtime.
- if (isDateBefore(now, startsAt)) {
- return (
-
-
- {warnContent}
- {postContent}
-
- }
- headline={warnTitle}
- onCloseAlert={onCloseAlert}
- status="warning"
- />
-
-
- {content}
- {postContent}
-
- }
- headline={title}
- onCloseAlert={onCloseAlert}
- status="error"
- />
-
-
-
diff --git a/packages/react-components/src/components/MaintenanceBanner/MaintenanceBanner.unit.spec.jsx b/packages/react-components/src/components/MaintenanceBanner/MaintenanceBanner.unit.spec.jsx
deleted file mode 100644
index 359973e4f..000000000
--- a/packages/react-components/src/components/MaintenanceBanner/MaintenanceBanner.unit.spec.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-// Node modules.
-import React from 'react';
-import { mount } from 'enzyme';
-import { expect } from 'chai';
-
-// Relative imports.
-import MaintenanceBanner from './MaintenanceBanner.jsx';
-import { formatDate } from '../../helpers/format-date.js';
-
-const deriveDefaultProps = (startsAt = new Date()) => {
- const expiresAt = new Date(startsAt);
- const warnStartsAt = new Date(startsAt);
- expiresAt.setHours(expiresAt.getHours() + 2);
- warnStartsAt.setHours(warnStartsAt.getHours() - 12);
-
- const formattedStartsAt = formatDate(startsAt);
- const formattedExpiresAt = formatDate(expiresAt);
-
- return {
- id: '1',
- startsAt,
- expiresAt,
- title: 'DS Logon is down for maintenance.',
- content:
- 'DS Logon is down for maintenance. Please use ID.me or MyHealtheVet to sign in or use online tools.',
- warnStartsAt,
- warnTitle: 'DS Logon will be down for maintenance',
- warnContent: `DS Logon will be unavailable from ${formattedStartsAt} to ${formattedExpiresAt} Please use ID.me or MyHealtheVet to sign in or use online tools during this time.`,
- };
-};
-
-describe('', () => {
- it("Escapes early if it's before when it should show.", () => {
- const date = new Date();
- date.setHours(date.getHours() + 13);
- const wrapper = mount();
- expect(wrapper.html()).to.equal(null);
- wrapper.unmount();
- });
-
- it('Shows pre-downtime.', () => {
- const date = new Date();
- date.setHours(date.getHours() + 2);
- const wrapper = mount();
- expect(wrapper.html()).to.not.equal(null);
- expect(wrapper.html()).to.include('vads-u-border-color--warning-message');
- wrapper.unmount();
- });
-
- it('Shows downtime.', () => {
- const wrapper = mount();
- expect(wrapper.html()).to.not.equal(null);
- expect(wrapper.html()).to.include('vads-u-border-color--secondary');
- wrapper.unmount();
- });
-
- it("Escapes early if it's after when it should show.", () => {
- const date = new Date();
- date.setHours(date.getHours() - 3);
- const wrapper = mount();
- expect(wrapper.html()).to.equal(null);
- wrapper.unmount();
- });
-});
diff --git a/packages/react-components/src/index.js b/packages/react-components/src/index.js
index 96e9d8960..cfa2887cd 100644
--- a/packages/react-components/src/index.js
+++ b/packages/react-components/src/index.js
@@ -1,22 +1,17 @@
-import AlertBox, { ALERT_TYPE } from './components/AlertBox/AlertBox';
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 MaintenanceBanner from './components/MaintenanceBanner/MaintenanceBanner';
import Modal from './components/Modal/Modal';
import TextInput from './components/TextInput/TextInput';
export {
- AlertBox,
- ALERT_TYPE,
Breadcrumbs,
ExpandingGroup,
IconBase,
IconSearch,
LoadingIndicator,
- MaintenanceBanner,
Modal,
TextInput,
};
diff --git a/packages/storybook/stories/MaintenanceBanner.stories.jsx b/packages/storybook/stories/MaintenanceBanner.stories.jsx
deleted file mode 100644
index 81c7175d9..000000000
--- a/packages/storybook/stories/MaintenanceBanner.stories.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/* eslint-disable no-console */
-import React from 'react';
-import { formatDate } from '../../react-components/src/helpers/format-date';
-import MaintenanceBanner from '../../react-components/src/components/MaintenanceBanner/MaintenanceBanner';
-import { StoryDocs } from './wc-helpers';
-
-export default {
- title: 'Components/Banner - Maintenance (React)',
- component: MaintenanceBanner,
- id: 'components/banners-maintenancebanner',
- argTypes: {
- startsAt: { control: { type: 'date' } },
- expiresAt: { control: { type: 'date' } },
- warnStartsAt: { control: { type: 'date' } },
- },
- parameters: {
- componentSubtitle: 'Maintenance banner React component',
- docs: {
- page: () => ,
- },
- },
-};
-
-const Template = args => {
- const startTime = args.startsAt;
- const endTime = args.expiresAt;
- const warnStart = args.warnStartsAt;
- console.group('Times passed to Template');
- console.log('startTime:', formatDate(startTime, 'timeShort'));
- console.log('endTime', formatDate(endTime, 'timeShort'));
- console.log('warnStart', formatDate(warnStart, 'timeShort'));
- console.groupEnd();
- return ;
-};
-
-const defaultArgs = {
- id: 'maintenence-banner-id',
- title: 'Site maintenance',
- warnTitle: 'Upcoming site maintenance',
- content:
- 'We’re working on VA.gov right now. If you have trouble signing in or using tools, check back after we’re finished. Thank you for your patience.',
- warnContent:
- 'We’ll be doing some work on VA.gov. The maintenance will last X hours. During that time, you won’t be able to sign in or use tools.',
- startsAt: new Date(),
- expiresAt: new Date(new Date().setHours(new Date().getHours() + 2)),
- warnStartsAt: new Date(new Date().setHours(new Date().getHours() - 1)),
-};
-
-export const DuringMaintenance = Template.bind(null);
-DuringMaintenance.args = { ...defaultArgs };
-
-export const BeforeMaintenance = Template.bind(null);
-BeforeMaintenance.args = {
- ...defaultArgs,
- startsAt: new Date(new Date().setHours(new Date().getHours() + 1)),
- expiresAt: new Date(new Date().setHours(new Date().getHours() + 2)),
- warnStartsAt: new Date(),
-};