diff --git a/__tests__/src/components/AnnotationSettings.test.js b/__tests__/src/components/AnnotationSettings.test.js index 70ff86f714b7acab9f663bbbb0f87d8a131b4a1e..5c3de53e8e80ea7f2e9e1d1d2dd03f16ade586ac 100644 --- a/__tests__/src/components/AnnotationSettings.test.js +++ b/__tests__/src/components/AnnotationSettings.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { shallow } from 'enzyme'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; +import MiradorMenuButton from '../../../src/containers/MiradorMenuButton'; import { AnnotationSettings } from '../../../src/components/AnnotationSettings'; /** */ @@ -18,62 +18,18 @@ function createWrapper(props) { } describe('AnnotationSettings', () => { - let control; let wrapper; const toggleAnnotationDisplayMock = jest.fn(); - - it('renders a FormControlLabel and a Switch', () => { + it('renders a MiradorMenuButton', () => { wrapper = createWrapper(); - control = shallow( - wrapper.find(FormControlLabel).props().control, - ); - expect(wrapper.find(FormControlLabel).length).toBe(1); - expect(control.find('ForwardRef(Switch)').length).toBe(1); + expect(wrapper.find(MiradorMenuButton).length).toBe(1); }); - describe('control', () => { - it('is not checked when the displayAll prop is false', () => { - wrapper = createWrapper(); - control = shallow( - wrapper.find(FormControlLabel).props().control, - ); - - expect(control.find('ForwardRef(Switch)').props().checked).toBe(false); - }); - - it('is checked when the displayAll prop is true', () => { - wrapper = createWrapper({ displayAll: true }); - control = shallow( - wrapper.find(FormControlLabel).props().control, - ); - - expect(control.find('ForwardRef(Switch)').props().checked).toBe(true); - }); - - it('is disabled based on the displayAllDisabled prop', () => { - wrapper = createWrapper(); - control = shallow( - wrapper.find(FormControlLabel).props().control, - ); - expect(control.find('ForwardRef(Switch)').props().disabled).toBe(false); - - wrapper = createWrapper({ displayAllDisabled: true }); - control = shallow( - wrapper.find(FormControlLabel).props().control, - ); - expect(control.find('ForwardRef(Switch)').props().disabled).toBe(true); - }); - - it('calls the toggleAnnotationDisplay prop function on change', () => { - wrapper = createWrapper({ toggleAnnotationDisplay: toggleAnnotationDisplayMock }); - control = shallow( - wrapper.find(FormControlLabel).props().control, - ); - - control.find('ForwardRef(Switch)').props().onChange(); // trigger the onChange prop + it('calls the toggleAnnotationDisplay prop function on click', () => { + wrapper = createWrapper({ toggleAnnotationDisplay: toggleAnnotationDisplayMock }); + wrapper.find(MiradorMenuButton).simulate('click'); - expect(toggleAnnotationDisplayMock).toHaveBeenCalledTimes(1); - }); + expect(toggleAnnotationDisplayMock).toHaveBeenCalledTimes(1); }); }); diff --git a/src/components/AnnotationSettings.js b/src/components/AnnotationSettings.js index 27508fd6714149e67d30ce8566084cb389f10980..a1e56907942ef176b2d050e00912af84906ac260 100644 --- a/src/components/AnnotationSettings.js +++ b/src/components/AnnotationSettings.js @@ -1,7 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Switch from '@material-ui/core/Switch'; +import VisibilityIcon from '@material-ui/icons/VisibilitySharp'; +import VisibilityOffIcon from '@material-ui/icons/VisibilityOffSharp'; +import MiradorMenuButton from '../containers/MiradorMenuButton'; /** * AnnotationSettings is a component to handle various annotation @@ -17,19 +18,14 @@ export class AnnotationSettings extends Component { } = this.props; return ( - <FormControlLabel - control={( - <Switch - checked={displayAll} - disabled={displayAllDisabled} - onChange={toggleAnnotationDisplay} - value={displayAll ? 'all' : 'select'} - color="secondary" - /> - )} - label={t('displayAllAnnotations')} - labelPlacement="start" - /> + <MiradorMenuButton + aria-label={t(displayAll ? 'displayNoAnnotations' : 'displayAllAnnotations')} + onClick={toggleAnnotationDisplay} + disabled={displayAllDisabled} + size="small" + > + { displayAll ? <VisibilityIcon /> : <VisibilityOffIcon /> } + </MiradorMenuButton> ); } } diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index e121a0bc256a292e8e0cbf192b0f9f5a42a8d2ef..08d855641731c9e190e329aea087c5160ffc3ca5 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -36,6 +36,7 @@ "dark": "Dark theme", "dismiss": "Dismiss", "displayAllAnnotations": "Highlight all", + "displayNoAnnotations": "Highlight none", "downloadExport": "Export workspace", "downloadExportWorkspace": "Export workspace", "elastic": "Elastic",