Merge pull request #1824 from ProjectMirador/1786-themable-sidebar

Use MUI's Typography component and withStyles HOC to make the …

__tests__/src/components/WindowSideBarInfoPanel.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
+import Typography from '@material-ui/core/Typography';
 import createStore from '../../../src/state/createStore';
 import * as actions from '../../../src/state/actions';
 import WindowSideBarInfoPanel from '../../../src/components/WindowSideBarInfoPanel';
@@ -13,12 +14,28 @@ describe('WindowSideBarInfoPanel', () => {
   beforeEach(() => {
     store.dispatch(actions.receiveManifest('foo', fixture));
     manifest = store.getState().manifests.foo;
-    wrapper = shallow(<WindowSideBarInfoPanel manifest={manifest} />);
+    wrapper = shallow(
+      <WindowSideBarInfoPanel manifest={manifest} />,
+    ).dive();
   });
 
   it('renders without an error', () => {
-    expect(wrapper.find('h2').text()).toBe('About this item');
-    expect(wrapper.find('h3').text()).toBe('Bodleian Library Human Freaks 2 (33)');
-    expect(wrapper.find('.mirador-window-sidebar-info-panel div').text()).toBe('[Handbill of Mr. Becket, [1787] ]');
+    expect(
+      wrapper.find('WithStyles(Typography)[variant="h2"]').first().matchesElement(
+        <Typography>About this item</Typography>,
+      ),
+    ).toBe(true);
+
+    expect(
+      wrapper.find('WithStyles(Typography)[variant="h3"]').first().matchesElement(
+        <Typography>Bodleian Library Human Freaks 2 (33)</Typography>,
+      ),
+    ).toBe(true);
+
+    expect(
+      wrapper.find('WithStyles(Typography)[variant="body2"]').first().matchesElement(
+        <Typography>[Handbill of Mr. Becket, [1787] ]</Typography>,
+      ),
+    ).toBe(true);
   });
 });

__tests__/src/components/WindowSideBarPanel.test.js

@@ -21,7 +21,7 @@ describe('WindowSideBarPanel', () => {
     });
 
     it('renders the WindowSideBarInfoPanel', () => {
-      expect(wrapper.find('WindowSideBarInfoPanel').length).toBe(1);
+      expect(wrapper.find('WithStyles(WindowSideBarInfoPanel)').length).toBe(1);
     });
   });
 
@@ -31,7 +31,7 @@ describe('WindowSideBarPanel', () => {
     });
 
     it('does not render any panel component', () => {
-      expect(wrapper.find('WindowSideBarInfoPanel').length).toBe(0);
+      expect(wrapper.find('WithStyes(WindowSideBarInfoPanel)').length).toBe(0);
     });
   });
 });

src/components/WindowSideBarInfoPanel.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
 import ns from '../config/css-ns';
 
 /**
  * WindowSideBarInfoPanel
  */
-export default class WindowSideBarInfoPanel extends Component {
+class WindowSideBarInfoPanel extends Component {
   /**
    * manifestLabel - get the label from the manifesto manifestation
    * @return String
@@ -37,21 +39,34 @@ export default class WindowSideBarInfoPanel extends Component {
    * @return
    */
   render() {
+    const { classes } = this.props;
     return (
       <div className={ns('window-sidebar-info-panel')}>
-        <h2>About this item</h2>
-        <h3>{this.manifestLabel()}</h3>
-        <div>{this.manifestDescription()}</div>
+        <Typography variant="h2" className={classes.windowSideBarH2}>About this item</Typography>
+        <Typography variant="h3" className={classes.windowSideBarH3}>{this.manifestLabel()}</Typography>
+        <Typography variant="body2">{this.manifestDescription()}</Typography>
       </div>
     );
   }
 }
 
 WindowSideBarInfoPanel.propTypes = {
+  classes: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   manifest: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 
 
 WindowSideBarInfoPanel.defaultProps = {
+  classes: {},
   manifest: {},
 };
+
+/**
+ * @private
+ */
+const styles = theme => ({
+  windowSideBarH2: theme.typography.h5,
+  windowSideBarH3: theme.typography.h6,
+});
+
+export default withStyles(styles)(WindowSideBarInfoPanel);