There are no notes for this item.
| Prop | Required? | Type | Default | Description |
|---|---|---|---|---|
| messageLine1 | Yes | string | ||
| messageLine2 | No | string |
<div id="reactMount" data-tpl="systemdownview">
<div class="row">
<div class="small-12 columns">
<div class="react-container">
<h3>This is the message that shows when the system is down.</h3>
<h4>This is an optional second line, for details or whatnot.</h4><a href="/"><button>Go Back to Vets.gov</button></a></div>
</div>
</div>
</div>
<script>
window.currentProps = {
"package": {
"name": "department-of-veteran-affairs/jean-pants",
"version": "0.1.0"
},
"assetPath": "/design-system/",
"isProduction": true,
"componentSourcePath": "SystemDownView.jsx",
"messageLine1": "This is the message that shows when the system is down.",
"messageLine2": "This is an optional second line, for details or whatnot."
}
</script>
import React from 'react';
import SystemDownView from './SystemDownView';
export default function SystemDownViewExample(props) {
return (
<SystemDownView
messageLine1={props.messageLine1}
messageLine2={props.messageLine2}>
</SystemDownView>
);
}
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
componentSourcePath: SystemDownView.jsx
messageLine1: This is the message that shows when the system is down.
messageLine2: 'This is an optional second line, for details or whatnot.'
import PropTypes from 'prop-types';
import React from 'react';
class SystemDownView extends React.Component {
render() {
return (
<div className="row">
<div className="small-12 columns">
<div className="react-container">
<h3>{this.props.messageLine1}</h3>
<h4>{this.props.messageLine2}</h4>
<a href="/"><button>Go Back to Vets.gov</button></a>
</div>
</div>
</div>
);
}
}
SystemDownView.propTypes = {
// first line of the system down message, required
messageLine1: PropTypes.string.isRequired,
// optional second line of messaging
messageLine2: PropTypes.string,
};
export default SystemDownView;
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import { axeCheck } from '../../../lib/testing/helpers';
import SystemDownView from './SystemDownView.jsx';
describe('<SystemDownView>', () => {
it('should render', () => {
const tree = shallow(<SystemDownView
messageLine1="This is the first line"
messageLine2="This is the second line"/>);
expect(tree.text()).to.contain('This is the first line');
});
it('should pass aXe check', () => {
return axeCheck(<SystemDownView
messageLine1="This is the first line"
messageLine2="This is the second line"/>);
});
});