Using a button for the close control and privacy policy modal

This commit is contained in:
Jeff Avallone 2019-01-19 13:10:40 -05:00
parent 9e0cf951d2
commit d57a4c1147
4 changed files with 18 additions and 23 deletions

View File

@ -17,16 +17,15 @@ exports[`Header closing the Privacy Policy modal 1`] = `
shouldReturnFocusAfterClose={true}
>
<LoadNamespace(PrivacyPolicy) />
<a
<button
className="modalClose"
href="#close"
onClick={[Function]}
>
<XSquare
color="currentColor"
size="24"
/>
</a>
</button>
</Modal>
<header
className="header"
@ -97,16 +96,15 @@ exports[`Header closing the Privacy Policy modal 2`] = `
shouldReturnFocusAfterClose={true}
>
<LoadNamespace(PrivacyPolicy) />
<a
<button
className="modalClose"
href="#close"
onClick={[Function]}
>
<XSquare
color="currentColor"
size="24"
/>
</a>
</button>
</Modal>
<header
className="header"
@ -177,16 +175,15 @@ exports[`Header opening the Privacy Policy modal 1`] = `
shouldReturnFocusAfterClose={true}
>
<LoadNamespace(PrivacyPolicy) />
<a
<button
className="modalClose"
href="#close"
onClick={[Function]}
>
<XSquare
color="currentColor"
size="24"
/>
</a>
</button>
</Modal>
<header
className="header"
@ -257,16 +254,15 @@ exports[`Header rendering 1`] = `
shouldReturnFocusAfterClose={true}
>
<LoadNamespace(PrivacyPolicy) />
<a
<button
className="modalClose"
href="#close"
onClick={[Function]}
>
<XSquare
color="currentColor"
size="24"
/>
</a>
</button>
</Modal>
<header
className="header"
@ -337,16 +333,15 @@ exports[`Header rendering with no banner 1`] = `
shouldReturnFocusAfterClose={true}
>
<LoadNamespace(PrivacyPolicy) />
<a
<button
className="modalClose"
href="#close"
onClick={[Function]}
>
<XSquare
color="currentColor"
size="24"
/>
</a>
</button>
</Modal>
<header
className="header"

View File

@ -34,8 +34,7 @@ class Header extends React.PureComponent {
this.setState({ showModal: true });
}
handleClose = event => {
event.preventDefault();
handleClose = () => {
this.setState({ showModal: false });
}
@ -49,12 +48,11 @@ class Header extends React.PureComponent {
onRequestClose={ this.handleClose }
shouldCloseOnOverlayClick={ true }>
<PrivacyPolicy />
<a
href="#close"
<button
className={ style.modalClose }
onClick={ this.handleClose }>
<CloseIcon />
</a>
</button>
</Modal>
<header
className={ style.header }

View File

@ -73,6 +73,10 @@
right: 2rem;
line-height: 2.8rem;
padding: 1rem;
margin: 0;
border: 0 none;
background: transparent;
color: inherit;
&:hover svg,
&:active svg {

View File

@ -48,15 +48,13 @@ describe('Header', () => {
const component = shallow(
<Header banner={ false } />
);
const eventObj = { preventDefault: jest.fn() };
component.setState({ showModal: true });
expect(component).toMatchSnapshot();
component.instance().handleClose(eventObj);
component.instance().handleClose();
expect(eventObj.preventDefault).toHaveBeenCalled();
expect(component).toMatchSnapshot();
});
});