There are no notes for this item.
| Prop | Required? | Type | Default | Description |
|---|---|---|---|---|
| cssClass | No | string | ||
| clickHandler | Yes | func | ||
| isOpen | Yes | bool |
<div id="reactMount" data-tpl="helpmenu">
<div class="va-dropdown"><button class="va-dropdown va-btn-withicon va-dropdown-trigger" aria-controls="helpmenu" aria-expanded="true"><span><svg width="62" height="63" viewBox="0 0 62 63"><path fill="#fff" fill-rule="evenodd" d="M36 50.57v-7.713c0-.375-.12-.683-.362-.924-.24-.24-.55-.362-.924-.362H27c-.375 0-.683.122-.924.363-.24.24-.362.55-.362.924v7.714c0 .376.12.684.362.926.24.24.55.36.924.36h7.714c.375 0 .683-.12.924-.36.24-.242.362-.55.362-.925zm10.286-27c0-2.356-.744-4.54-2.23-6.548a15.216 15.216 0 0 0-5.565-4.66c-2.222-1.1-4.5-1.648-6.83-1.648-6.508 0-11.477 2.853-14.906 8.558-.4.643-.294 1.206.322 1.688l5.303 4.018c.187.16.44.24.763.24.428 0 .763-.16 1.004-.48 1.42-1.823 2.572-3.055 3.456-3.698.91-.643 2.062-.964 3.455-.964 1.286 0 2.43.348 3.435 1.045S36 22.608 36 23.49c0 1.02-.268 1.836-.804 2.452-.535.616-1.446 1.22-2.732 1.808-1.687.75-3.234 1.908-4.64 3.475-1.407 1.567-2.11 3.248-2.11 5.043v1.446c0 .375.12.683.362.924.24.24.55.362.924.362h7.714c.375 0 .683-.12.924-.362.24-.24.362-.55.362-.924 0-.51.288-1.172.864-1.99a6.785 6.785 0 0 1 2.19-1.987 59.662 59.662 0 0 0 1.968-1.145c.456-.282 1.072-.75 1.85-1.407.775-.656 1.37-1.3 1.786-1.928.416-.63.79-1.44 1.125-2.43.335-.992.503-2.077.503-3.256zm15.428 7.716c0 5.598-1.38 10.76-4.138 15.49-2.76 4.726-6.502 8.47-11.23 11.228-4.728 2.76-9.89 4.14-15.49 4.14-5.597 0-10.76-1.38-15.488-4.14-4.727-2.758-8.47-6.502-11.23-11.23C1.378 42.048 0 36.885 0 31.287c0-5.6 1.38-10.76 4.138-15.49 2.76-4.727 6.503-8.47 11.23-11.23C20.096 1.81 25.258.43 30.858.43c5.597 0 10.76 1.378 15.488 4.137 4.728 2.76 8.47 6.502 11.23 11.23 2.76 4.728 4.138 9.89 4.138 15.49z"></path></svg>Help</span></button>
<div
class="va-dropdown-panel" id="helpmenu">
<div>
<p><b>Call the Vets.gov Help Desk</b></p>
<p><a href="tel:18555747286">1-855-574-7286</a></p>
<p>TTY: <a href="tel:+18008778339">1-800-877-8339</a></p>
<p>Monday – Friday, 8:00 a.m. – 8:00 p.m. (ET)</p>
</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": "HelpMenu.jsx",
"id": "default",
"cssClass": "va-dropdown",
"isOpen": true
}
</script>
import React from 'react';
import HelpMenu from './HelpMenu';
export default function HelpMenuExample(props) {
return (
<HelpMenu
{...props}
clickHandler={() => {}}>
</HelpMenu>
);
}
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
componentSourcePath: HelpMenu.jsx
id: default
cssClass: va-dropdown
isOpen: true
import PropTypes from 'prop-types';
import React from 'react';
import DropDownPanel from '../../navigation/DropDownPanel/DropDownPanel';
import IconHelp from '../../svgicons/IconHelp/IconHelp.jsx';
class HelpMenu extends React.Component {
render() {
const icon = <IconHelp color="#fff"/>;
const dropDownContents = (
<div>
<p><b>Call the Vets.gov Help Desk</b></p>
<p><a href="tel:18555747286">1-855-574-7286</a></p>
<p>TTY: <a href="tel:+18008778339">1-800-877-8339</a></p>
<p>Monday – Friday, 8:00 a.m. – 8:00 p.m. (ET)</p>
</div>
);
return (
<DropDownPanel
buttonText="Help"
clickHandler={this.props.clickHandler}
cssClass={this.props.cssClass}
contents={dropDownContents}
id="helpmenu"
icon={icon}
isOpen={this.props.isOpen}/>
);
}
}
HelpMenu.propTypes = {
/* class to style the menu */
cssClass: PropTypes.string,
/* function to execute on click */
clickHandler: PropTypes.func.isRequired,
/* does the menu begin in an open state */
isOpen: PropTypes.bool.isRequired
};
export default HelpMenu;
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import { axeCheck } from '../../../../lib/testing/helpers';
import HelpMenu from './HelpMenu.jsx';
describe('<HelpMenu>', () => {
it('should render', () => {
const props = {
isOpen: false,
clickHandler: f => f
};
const tree = shallow(<HelpMenu {...props}/>);
expect(tree).to.have.length(1);
});
it('should pass axeCheck when open', () => {
const props = {
clickHandler: f => f
};
return axeCheck(<HelpMenu isOpen {...props}/>);
});
it('should pass axeCheck when closed', () => {
const props = {
clickHandler: f => f
};
return axeCheck(<HelpMenu isOpen={false} {...props}/>);
});
});