Add a MiradorMenuButton component to handle button tooltips/labels/etc.

__tests__/src/components/MiradorMenuButton.test.js

+import React from 'react';
+import { shallow } from 'enzyme';
+import { MiradorMenuButton } from '../../../src/components/MiradorMenuButton';
+
+/**
+ * Helper function to wrap creating a MiradorMenuButton component
+*/
+function createWrapper(props) {
+  return shallow(
+    <MiradorMenuButton aria-label="The Label" {...props}>
+      <>icon</>
+    </MiradorMenuButton>,
+  );
+}
+
+describe('MiradorMenuButton', () => {
+  let wrapper;
+
+  it('renders the given a Tooltip -> IconLabel -> Icon', () => {
+    wrapper = createWrapper();
+
+    expect(wrapper.find('WithStyles(Tooltip) WithStyles(IconButton)').length).toEqual(1);
+    expect(
+      wrapper
+        .find('WithStyles(Tooltip) WithStyles(IconButton)')
+        .first()
+        .children()
+        .text(),
+    ).toEqual('icon');
+  });
+
+  it('uses the aria-label prop the the Tooltip title prop', () => {
+    wrapper = createWrapper();
+
+    expect(wrapper.find('WithStyles(Tooltip)').props().title).toEqual('The Label');
+    expect(wrapper.find('WithStyles(Tooltip) span WithStyles(IconButton)').props()['aria-label']).toEqual('The Label');
+  });
+
+  it('spreads any other props to IconButton', () => {
+    wrapper = createWrapper({ color: 'inherit' });
+
+    expect(wrapper.find('WithStyles(Tooltip) WithStyles(IconButton)').props().color).toEqual('inherit');
+  });
+});

src/components/MiradorMenuButton.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+
+
+/**
+ * MiradorMenuButton ~ Wrap the given icon prop in an IconButton and a Tooltip.
+ * This shares the passed in aria-label w/ the Tooltip (as title) and the IconButton
+ * All props besides icon are spread to the IconButton component
+*/
+export function MiradorMenuButton(props) {
+  const { 'aria-label': ariaLabel } = props;
+  const { icon, ...iconButtonProps } = props;
+
+  return (
+    <Tooltip title={ariaLabel}>
+      {/*
+        Wrap IconButton in span so it can receive mouse events
+        (e.g. show the tooltip) even if the IconButton is disabled
+      */}
+      <span>
+        <IconButton {...iconButtonProps}>{icon}</IconButton>
+      </span>
+    </Tooltip>
+  );
+}
+
+MiradorMenuButton.propTypes = {
+  'aria-label': PropTypes.string.isRequired,
+  icon: PropTypes.element.isRequired,
+};