Skip to content
Snippets Groups Projects
Unverified Commit ae14d7ad authored by Jack Reed's avatar Jack Reed Committed by GitHub
Browse files

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

Use MUI's Typography component and withStyles HOC to make the …
parents 4b4f4032 1fc011ee
No related branches found
No related tags found
No related merge requests found
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);
});
});
......@@ -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);
});
});
});
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);
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment