There are no notes for this item.
| Prop | Required? | Type | Default | Description |
|---|---|---|---|---|
| cssClass | No | string | CSS class for the search menu | |
| isOpen | Yes | bool | If the search menu is open or not | |
| clickHandler | No | func | Handler for when the menu is clicked |
<div id="reactMount" data-tpl="searchmenu">
<div class="va-dropdown"><button class="va-btn-withicon va-dropdown-trigger va-btn-withicon va-dropdown-trigger" aria-controls="searchmenu" aria-expanded="true"><span><svg width="24" height="24" viewBox="0 0 216 146" pointer-events="none"><path fill="#fff" d="M172.77 123.025L144.825 95.08c6.735-9.722 10.104-20.56 10.104-32.508 0-7.767-1.51-15.195-4.527-22.283-3.014-7.09-7.088-13.2-12.22-18.336s-11.243-9.207-18.33-12.22c-7.09-3.016-14.52-4.523-22.286-4.523-7.768 0-15.196 1.508-22.284 4.523-7.09 3.014-13.2 7.088-18.332 12.22-5.132 5.134-9.206 11.245-12.22 18.333-3.015 7.088-4.522 14.515-4.522 22.282 0 7.766 1.507 15.192 4.522 22.282 3.014 7.088 7.088 13.197 12.22 18.33 5.134 5.134 11.245 9.207 18.333 12.222 7.09 3.015 14.516 4.522 22.283 4.522 11.95 0 22.786-3.37 32.51-10.105l27.943 27.863c1.955 2.064 4.397 3.096 7.332 3.096 2.824 0 5.27-1.03 7.332-3.096 2.064-2.063 3.096-4.508 3.096-7.332 0-2.877-1.002-5.322-3.013-7.33zm-49.413-34.668C116.214 95.5 107.62 99.07 97.57 99.07c-10.048 0-18.643-3.57-25.786-10.713C64.64 81.214 61.07 72.62 61.07 62.57c0-10.047 3.572-18.643 10.714-25.785C78.926 29.642 87.522 26.07 97.57 26.07c10.048 0 18.643 3.573 25.787 10.715 7.143 7.142 10.715 15.738 10.715 25.786 0 10.05-3.573 18.647-10.715 25.79z"></path></svg>Search</span></button>
<div
class="va-dropdown-panel" id="searchmenu">
<form accept-charset="UTF-8" action="https://search.va.gov/search" id="search" method="get">
<div class="csp-inline-patch-header"><input type="hidden" name="utf8" value="✓" /></div><input type="hidden" id="affiliate" name="affiliate" value="vets.gov_search" /><label for="query" class="usa-sr-only">Search:</label>
<div class="va-flex"><input type="text" autocomplete="off" class="usagov-search-autocomplete" id="query" name="query" /><button type="submit"><svg width="24" height="24" viewBox="0 0 216 146" pointer-events="none"><path fill="#fff" d="M172.77 123.025L144.825 95.08c6.735-9.722 10.104-20.56 10.104-32.508 0-7.767-1.51-15.195-4.527-22.283-3.014-7.09-7.088-13.2-12.22-18.336s-11.243-9.207-18.33-12.22c-7.09-3.016-14.52-4.523-22.286-4.523-7.768 0-15.196 1.508-22.284 4.523-7.09 3.014-13.2 7.088-18.332 12.22-5.132 5.134-9.206 11.245-12.22 18.333-3.015 7.088-4.522 14.515-4.522 22.282 0 7.766 1.507 15.192 4.522 22.282 3.014 7.088 7.088 13.197 12.22 18.33 5.134 5.134 11.245 9.207 18.333 12.222 7.09 3.015 14.516 4.522 22.283 4.522 11.95 0 22.786-3.37 32.51-10.105l27.943 27.863c1.955 2.064 4.397 3.096 7.332 3.096 2.824 0 5.27-1.03 7.332-3.096 2.064-2.063 3.096-4.508 3.096-7.332 0-2.877-1.002-5.322-3.013-7.33zm-49.413-34.668C116.214 95.5 107.62 99.07 97.57 99.07c-10.048 0-18.643-3.57-25.786-10.713C64.64 81.214 61.07 72.62 61.07 62.57c0-10.047 3.572-18.643 10.714-25.785C78.926 29.642 87.522 26.07 97.57 26.07c10.048 0 18.643 3.573 25.787 10.715 7.143 7.142 10.715 15.738 10.715 25.786 0 10.05-3.573 18.647-10.715 25.79z"></path></svg><span class="usa-sr-only">Search</span></button></div>
</form>
</div>
</div>
</div>
<script>
window.currentProps = {
"package": {
"name": "department-of-veteran-affairs/jean-pants",
"version": "0.1.0"
},
"assetPath": "/design-system/",
"isProduction": true,
"componentSourcePath": "SearchMenu.jsx",
"id": "default",
"title": "Default SearchMenu"
}
</script>
import React from 'react';
import SearchMenu from './SearchMenu';
export default function SearchMenuExample(props) {
return (
<SearchMenu
title={props.title}
id={props.id}
isOpen
clickHandler={() => {}}>
</SearchMenu>
);
}
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
componentSourcePath: SearchMenu.jsx
id: default
title: Default SearchMenu
import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
import IconSearch from '../../svgicons/IconSearch/IconSearch';
import DropDown from '../../form/controls/dropdown/DropDown';
class SearchMenu extends React.Component {
componentDidUpdate() {
this.refs.searchField.focus();
}
onBlur = (e) => {
if (!this.state.closed) {
const { currentTarget } = e;
setTimeout(() => {
if (!currentTarget.contains(document.activeElement)) {
this.toggleSearchForm();
}
});
}
}
toggleSearchForm = () => {
this.props.clickHandler();
}
makeForm = () => {
return (
<form
acceptCharset="UTF-8"
action="https://search.va.gov/search"
id="search"
method="get">
<div className="csp-inline-patch-header">
<input name="utf8" type="hidden" value="✓"/>
</div>
<input id="affiliate" name="affiliate" type="hidden" value="vets.gov_search"/>
<label // eslint-disable-line jsx-a11y/label-has-for
htmlFor="query"
className="usa-sr-only">
Search:
</label>
<div className="va-flex">
<input autoComplete="off" ref="searchField" className="usagov-search-autocomplete" id="query" name="query" type="text"/>
<button type="submit">
<IconSearch color="#fff"/>
<span className="usa-sr-only">Search</span>
</button>
</div>
</form>);
}
render() {
const buttonClasses = classNames(
this.props.cssClass,
'va-btn-withicon',
'va-dropdown-trigger'
);
const icon = <IconSearch color="#fff"/>;
return (
<DropDown
buttonText="Search"
clickHandler={this.props.clickHandler}
cssClass={buttonClasses}
contents={this.makeForm()}
id="searchmenu"
icon={icon}
isOpen={this.props.isOpen}/>
);
}
}
SearchMenu.propTypes = {
/**
* CSS class for the search menu
*/
cssClass: PropTypes.string,
/**
* If the search menu is open or not
*/
isOpen: PropTypes.bool.isRequired,
/**
* Handler for when the menu is clicked
*/
clickHandler: PropTypes.func
};
export default SearchMenu;
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import { axeCheck } from '../../../../lib/testing/helpers';
import SearchMenu from './SearchMenu.jsx';
describe('<SearchMenu/>', () => {
it('should render', () => {
const tree = mount(
<SearchMenu
id="searchmenu"
title="searchmenu title"
isOpen
clickHandler={() => {}}/>
);
expect(tree.children().text()).to.contain('Search');
});
it('should pass aXe check when closed', () => {
return axeCheck(
<SearchMenu
id="searchmenu"
title="searchmenu title"
isOpen={false}
clickHandler={() => {}}/>
);
});
it('should pass aXe check when open', () => {
return axeCheck(
<SearchMenu
id="searchmenu"
title="SearchMenu title"
isOpen
clickHandler={() => {}}/>
);
});
});