Add a heading the canvas index panel.

__tests__/src/components/WindowSideBarCanvasPanel.test.js

@@ -20,18 +20,35 @@ describe('WindowSideBarCanvasPanel', () => {
 
   beforeEach(() => {
     wrapper = shallow(
-      <WindowSideBarCanvasPanel canvasesIdAndLabel={canvasesIdAndLabel} windowId="xyz" />,
-    );
+      <WindowSideBarCanvasPanel
+        canvasesIdAndLabel={canvasesIdAndLabel}
+        classes={{}}
+        t={key => key}
+        windowId="xyz"
+      />,
+    ).dive();
   });
 
   it('renders all needed elements', () => {
+    expect(wrapper.find(Typography).at(0).render().text()).toBe('canvasIndex');
     expect(wrapper.find(List).length).toBe(1);
     expect(wrapper.find(ListItem).length).toBe(canvasesIdAndLabel.length);
-    expect(wrapper.find(Typography).length).toBe(canvasesIdAndLabel.length);
+    expect(wrapper.find(List).find(Typography).length).toBe(canvasesIdAndLabel.length);
   });
 
   it('should set the correct labels', () => {
-    expect(wrapper.find(Typography).at(0).render().text()).toBe(canvasesIdAndLabel[0].label);
-    expect(wrapper.find(Typography).at(1).render().text()).toBe(canvasesIdAndLabel[1].label);
+    expect(wrapper
+      .find(List)
+      .find(Typography)
+      .at(0)
+      .render()
+      .text()).toBe(canvasesIdAndLabel[0].label);
+
+    expect(wrapper
+      .find(List)
+      .find(Typography)
+      .at(1)
+      .render()
+      .text()).toBe(canvasesIdAndLabel[1].label);
   });
 });

locales/en/translation.json

@@ -4,6 +4,7 @@
     "add": "Add",
     "book": "Book",
     "bottom": "Bottom",
+    "canvasIndex": "Index",
     "closeCompanionWindow": "Close this companion window",
     "closeInfoCompanionWindow": "Close information companion window",
     "closeMenu": "Close Menu",

src/components/WindowSideBarCanvasPanel.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
+import { withStyles } from '@material-ui/core/styles';
 
 /**
  * a panel showing the canvases for a given manifest
@@ -12,8 +13,10 @@ class WindowSideBarCanvasPanel extends Component {
    * render
    */
   render() {
-    const { canvasesIdAndLabel } = this.props;
+    const { canvasesIdAndLabel, classes, t } = this.props;
     return (
+      <>
+        <Typography variant="h2" className={classes.windowSideBarH2}>{t('canvasIndex')}</Typography>
         <List>
           {
             canvasesIdAndLabel.map(canvas => (
@@ -23,6 +26,7 @@ class WindowSideBarCanvasPanel extends Component {
             ))
           }
         </List>
+      </>
     );
   }
 }
@@ -30,6 +34,15 @@ class WindowSideBarCanvasPanel extends Component {
 WindowSideBarCanvasPanel.propTypes = {
   windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
   canvasesIdAndLabel: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  t: PropTypes.func.isRequired,
 };
 
-export default WindowSideBarCanvasPanel;
+/**
+ * @private
+ */
+const styles = theme => ({
+  windowSideBarH2: theme.typography.h5,
+});
+
+export default withStyles(styles)(WindowSideBarCanvasPanel);

src/containers/WindowSideBarCanvasPanel.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { withNamespaces } from 'react-i18next';
 import WindowSideBarCanvasPanel from '../components/WindowSideBarCanvasPanel';
 import {
   getManifestCanvases,
@@ -20,6 +21,7 @@ const mapStateToProps = (state, { windowId }) => {
 
 const enhance = compose(
   connect(mapStateToProps),
+  withNamespaces(),
 );
 
 export default enhance(WindowSideBarCanvasPanel);