Refactor WindowCanvasNavigationControls to pull stacking + alignment up

__tests__/src/components/WindowCanvasNavigationControls.test.js

@@ -37,10 +37,7 @@ describe('WindowCanvasNavigationControls', () => {
   });
 
   it('shows the zoom control component when specified', () => {
-    render(
-      <Subject />,
-      { preloadedState: { workspace: { showZoomControls: true } } },
-    );
+    render(<Subject showZoomControls />);
     expect(screen.getByRole('button', { name: 'zoomIn' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'zoomOut' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'zoomReset' })).toBeInTheDocument();

__tests__/src/components/ZoomControls.test.js

@@ -1,6 +1,5 @@
 import { render, screen } from 'test-utils';
 import userEvent from '@testing-library/user-event';
-import Box from '@mui/material/Box';
 import { ZoomControls } from '../../../src/components/ZoomControls';
 
 /** Utility function to create a shallow rendering */
@@ -16,70 +15,38 @@ function createWrapper(props) {
 
 describe('ZoomControls', () => {
   const viewer = { x: 100, y: 100, zoom: 1 };
-  const showZoomControls = false;
   let updateViewport;
-  const spyRenderDivider = jest.spyOn(ZoomControls.prototype, 'renderDivider');
-  afterEach(() => {
-    spyRenderDivider.mockClear();
-  });
 
-  describe('with showZoomControls=false', () => {
-    it('renders nothing unless asked', () => {
-      const { container } = createWrapper({ showZoomControls, updateViewport, viewer });
-      expect(container).toBeEmptyDOMElement();
+  const zoomToWorld = jest.fn();
+  let user;
+  beforeEach(() => {
+    user = userEvent.setup();
+    updateViewport = jest.fn();
+    createWrapper({
+      updateViewport, viewer, zoomToWorld,
     });
   });
 
-  describe('with showZoomControls=true', () => {
-    const zoomToWorld = jest.fn();
-    let user;
-    beforeEach(() => {
-      user = userEvent.setup();
-      updateViewport = jest.fn();
-      createWrapper({
-        showZoomControls: true, updateViewport, viewer, zoomToWorld,
-      });
-    });
-
-    it('renders a couple buttons', () => {
-      expect(screen.getByRole('button', { name: 'zoomIn' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'zoomOut' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'zoomReset' })).toBeInTheDocument();
-    });
-
-    it('has a zoom-in button', async () => {
-      await user.click(screen.getByRole('button', { name: 'zoomIn' }));
-
-      expect(updateViewport).toHaveBeenCalledWith('xyz', { zoom: 2 });
-    });
-
-    it('has a zoom-out button', async () => {
-      await user.click(screen.getByRole('button', { name: 'zoomOut' }));
-      expect(updateViewport).toHaveBeenCalledWith('xyz', { zoom: 0.5 });
-    });
+  it('renders a couple buttons', () => {
+    expect(screen.getByRole('button', { name: 'zoomIn' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'zoomOut' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'zoomReset' })).toBeInTheDocument();
+  });
 
-    it('has a zoom reset button', async () => {
-      await user.click(screen.getByRole('button', { name: 'zoomReset' }));
+  it('has a zoom-in button', async () => {
+    await user.click(screen.getByRole('button', { name: 'zoomIn' }));
 
-      expect(zoomToWorld).toHaveBeenCalledWith(false);
-    });
+    expect(updateViewport).toHaveBeenCalledWith('xyz', { zoom: 2 });
   });
 
-  /* eslint-disable testing-library/no-container, testing-library/no-node-access */
-  describe('responsive divider', () => {
-    it('is present when the displayDivider prop is true (default)', () => {
-      createWrapper({ showZoomControls: true, viewer });
-      expect(spyRenderDivider).toHaveBeenCalled();
-      // Retrieve the result of the spy function
-      const renderedDivider = spyRenderDivider.mock.results[0].value;
-      expect(renderedDivider.type).toBe(Box);
-    });
+  it('has a zoom-out button', async () => {
+    await user.click(screen.getByRole('button', { name: 'zoomOut' }));
+    expect(updateViewport).toHaveBeenCalledWith('xyz', { zoom: 0.5 });
+  });
 
-    it('is not present when the displayDivider prop is false', () => {
-      createWrapper({ displayDivider: false, showZoomControls: true, viewer });
+  it('has a zoom reset button', async () => {
+    await user.click(screen.getByRole('button', { name: 'zoomReset' }));
 
-      expect(spyRenderDivider).toHaveBeenCalled();
-      expect(spyRenderDivider).toHaveReturnedWith(null);
-    });
+    expect(zoomToWorld).toHaveBeenCalledWith(false);
   });
 });

src/components/ViewerInfo.js

@@ -6,7 +6,6 @@ import classNames from 'classnames';
 import ns from '../config/css-ns';
 
 const StyledOsdInfo = styled('div')(() => ({
-  order: 2,
   overflow: 'hidden',
   paddingBottom: 0.5,
   textOverflow: 'ellipsis',

src/components/ViewerNavigation.js

@@ -1,15 +1,10 @@
 import { Component } from 'react';
 import NavigationIcon from '@mui/icons-material/PlayCircleOutlineSharp';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import ns from '../config/css-ns';
 
-const StyledOsdNavigation = styled('div')(() => ({
-  order: 1,
-}));
-
 /**
  */
 export class ViewerNavigation extends Component {
@@ -45,7 +40,7 @@ export class ViewerNavigation extends Component {
     }
 
     return (
-      <StyledOsdNavigation
+      <div
         className={classNames(ns('osd-navigation'))}
         dir={htmlDir}
       >
@@ -65,7 +60,7 @@ export class ViewerNavigation extends Component {
         >
           <NavigationIcon style={nextIconStyle} />
         </MiradorMenuButton>
-      </StyledOsdNavigation>
+      </div>
     );
   }
 }

src/components/WindowCanvasNavigationControls.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { alpha } from '@mui/material/styles';
 import classNames from 'classnames';
 import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
 import Typography from '@mui/material/Typography';
 import { visuallyHidden } from '@mui/utils';
 import ZoomControls from '../containers/ZoomControls';
@@ -26,19 +28,22 @@ export class WindowCanvasNavigationControls extends Component {
 
   /** */
   render() {
-    const { visible, windowId, zoomToWorld } = this.props;
+    const {
+      showZoomControls, visible, windowId, zoomToWorld,
+    } = this.props;
 
     if (!visible) return (<Typography style={visuallyHidden} component="div"><ViewerInfo windowId={windowId} /></Typography>);
 
     return (
       <Paper
         square
         sx={(theme) => ({
+          alignItems: 'center',
           backgroundColor: alpha(theme.palette.background.paper, 0.5),
           bottom: 0,
           cursor: 'default',
           display: 'flex',
-          flexDirection: this.canvasNavControlsAreStacked() ? 'column' : 'row',
+          flexDirection: 'column',
           flexWrap: 'wrap',
           justifyContent: 'center',
           position: 'absolute',
@@ -51,15 +56,17 @@ export class WindowCanvasNavigationControls extends Component {
             ns('canvas-nav'),
             this.canvasNavControlsAreStacked() ? ns('canvas-nav-stacked') : null,
           )
-}
+        }
         elevation={0}
       >
-        <ZoomControls
-          displayDivider={!this.canvasNavControlsAreStacked()}
-          windowId={windowId}
-          zoomToWorld={zoomToWorld}
-        />
-        <ViewerNavigation windowId={windowId} />
+        <Stack
+          direction={this.canvasNavControlsAreStacked() ? 'column' : 'row'}
+          divider={<Divider orientation={this.canvasNavControlsAreStacked() ? 'horizontal' : 'vertical'} variant="middle" flexItem />}
+          spacing={0}
+        >
+          { showZoomControls && <ZoomControls windowId={windowId} zoomToWorld={zoomToWorld} /> }
+          <ViewerNavigation windowId={windowId} />
+        </Stack>
         <ViewerInfo windowId={windowId} />
 
         <PluginHook {...this.props} />
@@ -69,12 +76,14 @@ export class WindowCanvasNavigationControls extends Component {
 }
 
 WindowCanvasNavigationControls.propTypes = {
+  showZoomControls: PropTypes.bool,
   size: PropTypes.shape({ width: PropTypes.number }).isRequired,
   visible: PropTypes.bool,
   windowId: PropTypes.string.isRequired,
   zoomToWorld: PropTypes.func.isRequired,
 };
 
 WindowCanvasNavigationControls.defaultProps = {
+  showZoomControls: false,
   visible: true,
 };

src/components/ZoomControls.js

@@ -3,7 +3,6 @@ import AddCircleIcon from '@mui/icons-material/AddCircleOutlineSharp';
 import RemoveCircleIcon from '@mui/icons-material/RemoveCircleOutlineSharp';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
 import RestoreZoomIcon from './icons/RestoreZoomIcon';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 
@@ -13,13 +12,6 @@ const StyledZoomControlsWrapper = styled('div')({
   justifyContent: 'center',
 });
 
-const dividerStyle = {
-  borderRight: '1px solid #808080',
-  display: 'inline-block',
-  height: '24px',
-  margin: '12px 6px',
-};
-
 /**
  */
 export class ZoomControls extends Component {
@@ -55,36 +47,15 @@ export class ZoomControls extends Component {
     });
   }
 
-  /**
-   * Renders a divider element if displayDivider is set to true.
-   *
-   * @returns {Box | null}
-   */
-  renderDivider() {
-    const { classes, displayDivider } = this.props;
-
-    if (displayDivider) {
-      return <Box component="span" sx={dividerStyle} className={classes?.divider} />;
-    }
-
-    return null;
-  }
-
   /**
    * render
    * @return
    */
   render() {
     const {
-      showZoomControls, t, zoomToWorld,
+      t, zoomToWorld,
     } = this.props;
 
-    if (!showZoomControls) {
-      return (
-        <>
-        </>
-      );
-    }
     return (
       <StyledZoomControlsWrapper>
         <MiradorMenuButton aria-label={t('zoomIn')} onClick={this.handleZoomInClick}>
@@ -96,16 +67,12 @@ export class ZoomControls extends Component {
         <MiradorMenuButton aria-label={t('zoomReset')} onClick={() => zoomToWorld(false)}>
           <RestoreZoomIcon />
         </MiradorMenuButton>
-        {this.renderDivider()}
       </StyledZoomControlsWrapper>
     );
   }
 }
 
 ZoomControls.propTypes = {
-  classes: PropTypes.objectOf(PropTypes.string),
-  displayDivider: PropTypes.bool,
-  showZoomControls: PropTypes.bool,
   t: PropTypes.func,
   updateViewport: PropTypes.func,
   viewer: PropTypes.shape({
@@ -118,9 +85,6 @@ ZoomControls.propTypes = {
 };
 
 ZoomControls.defaultProps = {
-  classes: {},
-  displayDivider: true,
-  showZoomControls: false,
   t: key => key,
   updateViewport: () => {},
   viewer: {},

src/containers/WindowCanvasNavigationControls.js

@@ -2,11 +2,12 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withSize } from 'react-sizeme';
 import { withPlugins } from '../extend/withPlugins';
-import { getWorkspace } from '../state/selectors';
+import { getShowZoomControlsConfig, getWorkspace } from '../state/selectors';
 import { WindowCanvasNavigationControls } from '../components/WindowCanvasNavigationControls';
 
 /** */
 const mapStateToProps = (state, { windowId }) => ({
+  showZoomControls: getShowZoomControlsConfig(state),
   visible: getWorkspace(state).focusedWindowId === windowId,
 });
 

src/containers/ZoomControls.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
-import { getShowZoomControlsConfig, getViewer } from '../state/selectors';
+import { getViewer } from '../state/selectors';
 import { ZoomControls } from '../components/ZoomControls';
 
 /**
@@ -13,7 +13,6 @@ import { ZoomControls } from '../components/ZoomControls';
  */
 const mapStateToProps = (state, { windowId }) => (
   {
-    showZoomControls: getShowZoomControlsConfig(state),
     viewer: getViewer(state, { windowId }),
   }
 );