From 1fc011ee1c17d02c385099ad6b267745ba1cb510 Mon Sep 17 00:00:00 2001
From: Jessie Keck <jessie.keck@gmail.com>
Date: Wed, 6 Feb 2019 13:13:05 -0800
Subject: [PATCH] Use MUI's Typography component and withStyles HOC to make the
 SideBarInfoPanel themeable.

---
 .../components/WindowSideBarInfoPanel.test.js | 25 ++++++++++++++++---
 .../src/components/WindowSideBarPanel.test.js |  4 +--
 src/components/WindowSideBarInfoPanel.js      | 23 ++++++++++++++---
 3 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/__tests__/src/components/WindowSideBarInfoPanel.test.js b/__tests__/src/components/WindowSideBarInfoPanel.test.js
index e74a3e799..5180d0f50 100644
--- a/__tests__/src/components/WindowSideBarInfoPanel.test.js
+++ b/__tests__/src/components/WindowSideBarInfoPanel.test.js
@@ -1,5 +1,6 @@
 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);
   });
 });
diff --git a/__tests__/src/components/WindowSideBarPanel.test.js b/__tests__/src/components/WindowSideBarPanel.test.js
index 1478f900e..d262ecd0f 100644
--- a/__tests__/src/components/WindowSideBarPanel.test.js
+++ b/__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);
     });
   });
 });
diff --git a/src/components/WindowSideBarInfoPanel.js b/src/components/WindowSideBarInfoPanel.js
index 83de8502b..80904da99 100644
--- a/src/components/WindowSideBarInfoPanel.js
+++ b/src/components/WindowSideBarInfoPanel.js
@@ -1,11 +1,13 @@
 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);
-- 
GitLab