Merge pull request #2169 from ProjectMirador/2138-typography-adjustments

Implement typography adjustments

__tests__/integration/mirador/annotations.test.js

@@ -28,7 +28,7 @@ describe('Annotations in Mirador', () => {
     await expect(page).toClick(`#${windowId} button[aria-label="Open annotation companion window"]`);
 
     await expect(page).toMatchElement(`#${windowId} h3`, { text: 'Annotations' });
-    await expect(page).toMatchElement(`#${windowId} p`, { text: 'Showing 2 annotations' });
+    await expect(page).toMatchElement(`#${windowId} h6`, { text: 'Showing 2 annotations' });
     await expect(page).toMatchElement(`#${windowId} .mirador-companion-window-left.mirador-window-sidebar-annotation-panel ul li`, { count: 2 });
   });
 });

__tests__/src/components/CompanionWindowFactory.test.js

@@ -23,7 +23,7 @@ describe('CompanionWindowFactory', () => {
         content: 'info',
       });
 
-      expect(wrapper.find('WithStyles(Connect(WindowSideBarInfoPanel))').length).toBe(1);
+      expect(wrapper.find('Connect(WindowSideBarInfoPanel)').length).toBe(1);
     });
   });
 

__tests__/src/components/WindowList.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@material-ui/core/Typography';
 import { WindowList } from '../../../src/components/WindowList';
 
 describe('WindowList', () => {
@@ -51,7 +52,7 @@ describe('WindowList', () => {
       expect(wrapper.find('WithStyles(MenuItem)').length).toBe(1);
       expect(wrapper.find('WithStyles(MenuItem)').key()).toBe('xyz');
       expect(
-        wrapper.find('WithStyles(MenuItem)').matchesElement(<MenuItem>untitled</MenuItem>),
+        wrapper.find('WithStyles(MenuItem)').matchesElement(<MenuItem><Typography>untitled</Typography></MenuItem>),
       ).toBe(true);
       wrapper.find('WithStyles(MenuItem)').simulate('click', {});
       expect(handleClose).toBeCalled();
@@ -80,7 +81,7 @@ describe('WindowList', () => {
       expect(wrapper.find('WithStyles(MenuItem)').length).toBe(1);
       expect(wrapper.find('WithStyles(MenuItem)').key()).toBe('xyz');
       expect(
-        wrapper.find('WithStyles(MenuItem)').matchesElement(<MenuItem>Some title</MenuItem>),
+        wrapper.find('WithStyles(MenuItem)').matchesElement(<MenuItem><Typography>Some title</Typography></MenuItem>),
       ).toBe(true);
     });
   });

src/components/LanguageSettings.js

@@ -33,7 +33,7 @@ export class LanguageSettings extends Component {
                   && <ListItemIcon><CheckIcon /></ListItemIcon>
               }
               <ListItemText inset>
-                <Typography variant="inherit">
+                <Typography variant="body1">
                   {language.label}
                 </Typography>
               </ListItemText>

src/components/ManifestForm.js

@@ -66,7 +66,7 @@ export class ManifestForm extends Component {
    */
   render() {
     const { formValue } = this.state;
-    const { t, onCancel } = this.props;
+    const { classes, t, onCancel } = this.props;
     return (
       <form onSubmit={this.formSubmit}>
         <Grid container spacing={24}>
@@ -80,6 +80,12 @@ export class ManifestForm extends Component {
               variant="filled"
               label={t('addManifestUrl')}
               helperText={t('addManifestUrlHelp')}
+              InputLabelProps={{
+                shrink: true,
+              }}
+              InputProps={{
+                className: classes.input,
+              }}
             />
           </Grid>
           <Grid item sm={3}>
@@ -99,6 +105,7 @@ export class ManifestForm extends Component {
 }
 
 ManifestForm.propTypes = {
+  classes: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   fetchManifest: PropTypes.func.isRequired,
   onCancel: PropTypes.func,
   onSubmit: PropTypes.func,
@@ -106,6 +113,7 @@ ManifestForm.propTypes = {
 };
 
 ManifestForm.defaultProps = {
+  classes: {},
   t: key => key,
   onCancel: null,
   onSubmit: () => {},

src/components/ManifestListItem.js

@@ -106,7 +106,7 @@ export class ManifestListItem extends React.Component {
                     }
                   </Grid>
                   <Grid item xs={8} sm={9}>
-                    <Typography component="span" variant="subtitle1" color="secondary">
+                    <Typography component="span" variant="h6">
                       {title || manifestId}
                     </Typography>
                   </Grid>

src/components/NestedMenu.js

@@ -52,7 +52,7 @@ export class NestedMenu extends Component {
             && (<ListItemIcon>{icon}</ListItemIcon>)
           }
           <ListItemText>
-            <Typography varient="inherit">{label}</Typography>
+            <Typography varient="body1">{label}</Typography>
           </ListItemText>
           {
             nestedMenuIsOpen

src/components/WindowList.js

 import React, { Component } from 'react';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@material-ui/core/Typography';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import PropTypes from 'prop-types';
 import ns from '../config/css-ns';
@@ -49,9 +50,11 @@ export class WindowList extends Component {
               selected={i === 0}
               onClick={(e) => { focusWindow(window.id); handleClose(e); }}
             >
+              <Typography variant="body1">
                 {
                   this.titleContent(window)
                 }
+              </Typography>
             </MenuItem>
           ))
         }

src/components/WindowSideBarAnnotationsPanel.js

@@ -41,7 +41,7 @@ export class WindowSideBarAnnotationsPanel extends Component {
     } = this.props;
     return (
       <CompanionWindow title={t('annotations')} paperClassName={ns('window-sidebar-annotation-panel')} windowId={windowId} id={id}>
-        <Typography variant="body2">{t('showingNumAnnotations', { number: annotations.length })}</Typography>
+        <Typography variant="subtitle2">{t('showingNumAnnotations', { number: annotations.length })}</Typography>
         {this.sanitizedAnnotations()}
       </CompanionWindow>
     );

src/components/WindowSideBarCanvasPanel.js

@@ -40,7 +40,7 @@ export class WindowSideBarCanvasPanel extends Component {
       <>
         <Typography
           className={classNames(classes.label)}
-          variant="body2"
+          variant="body1"
         >
           {canvas.label}
         </Typography>
@@ -70,7 +70,7 @@ export class WindowSideBarCanvasPanel extends Component {
         </div>
         <Typography
           className={classNames(classes.label)}
-          variant="body2"
+          variant="body1"
         >
           {canvas.label}
         </Typography>
@@ -101,12 +101,11 @@ export class WindowSideBarCanvasPanel extends Component {
               value={variant}
               onChange={this.handleVariantChange}
               name="variant"
-              autoWidth
               variant="filled"
               input={<FilledInput name="variant" />}
             >
-              <MenuItem value="compact">{ t('compactList') }</MenuItem>
-              <MenuItem value="thumbnail">{ t('thumbnailList') }</MenuItem>
+              <MenuItem value="compact"><Typography variant="body2">{ t('compactList') }</Typography></MenuItem>
+              <MenuItem value="thumbnail"><Typography variant="body2">{ t('thumbnailList') }</Typography></MenuItem>
             </Select>
           </FormControl>
           )}

src/components/WindowSideBarInfoPanel.js

@@ -21,7 +21,6 @@ export class WindowSideBarInfoPanel extends Component {
       canvasDescription,
       canvasLabel,
       canvasMetadata,
-      classes,
       manifestDescription,
       manifestLabel,
       manifestMetadata,
@@ -35,14 +34,14 @@ export class WindowSideBarInfoPanel extends Component {
         {canvasLabel && (
           <>
             <Typography variant="overline" id={`${id}-currentItem`}>{t('currentItem')}</Typography>
-            <Typography aria-labelledby={`${id}-currentItem`} variant="h4" className={classes.windowSideBarHeading}>
+            <Typography aria-labelledby={`${id}-currentItem`} variant="h4">
               {canvasLabel}
             </Typography>
           </>
         )}
 
         {canvasDescription && (
-          <Typography variant="body2">
+          <Typography variant="body1">
             <SanitizedHtml htmlString={canvasDescription} ruleSet="iiif" />
           </Typography>
         )}
@@ -55,8 +54,8 @@ export class WindowSideBarInfoPanel extends Component {
 
         {manifestLabel && (
           <>
-            <Typography variant="overline" id={`${id}-resource`} component="p" className={classes.sectionHeading}>{t('resource')}</Typography>
-            <Typography aria-labelledby={`${id}-resource`} variant="h4" className={classes.windowSideBarHeading}>
+            <Typography variant="overline" id={`${id}-resource`} component="p">{t('resource')}</Typography>
+            <Typography aria-labelledby={`${id}-resource`} variant="h4">
               {manifestLabel}
             </Typography>
           </>
@@ -81,7 +80,6 @@ WindowSideBarInfoPanel.propTypes = {
   canvasDescription: PropTypes.string,
   canvasLabel: PropTypes.string,
   canvasMetadata: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-  classes: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   manifestLabel: PropTypes.string,
   manifestDescription: PropTypes.string,
   manifestMetadata: PropTypes.array, // eslint-disable-line react/forbid-prop-types
@@ -94,7 +92,6 @@ WindowSideBarInfoPanel.defaultProps = {
   canvasDescription: null,
   canvasLabel: null,
   canvasMetadata: [],
-  classes: {},
   manifestLabel: null,
   manifestDescription: null,
   manifestMetadata: [],

src/components/WorkspaceMenu.js

@@ -111,14 +111,14 @@ export class WorkspaceMenu extends Component {
             onClick={(e) => { this.handleMenuItemClick('windowList', e); handleClose(e); }}
             aria-owns={windowList.anchorEl ? 'window-list-menu' : undefined}
           >
-            <Typography varient="inherit">{t('listAllOpenWindows')}</Typography>
+            <Typography variant="body1">{t('listAllOpenWindows')}</Typography>
           </MenuItem>
           <MenuItem
             aria-haspopup="true"
             onClick={(e) => { this.handleZoomToggleClick(e); handleClose(e); }}
             aria-owns={toggleZoom.anchorEl ? 'toggle-zoom-menu' : undefined}
           >
-            <Typography varient="inherit">
+            <Typography variant="body1">
               { showZoomControls ? t('hideZoomControls') : t('showZoomControls') }
             </Typography>
           </MenuItem>
@@ -127,7 +127,7 @@ export class WorkspaceMenu extends Component {
             onClick={(e) => { this.handleMenuItemClick('workspaceSelection', e); handleClose(e); }}
             aria-owns={workspaceSelection.anchorEl ? 'workspace-selection' : undefined}
           >
-            <Typography varient="inherit">{t('selectWorkspaceMenu')}</Typography>
+            <Typography variant="body1">{t('selectWorkspaceMenu')}</Typography>
           </MenuItem>
 
           <NestedMenu label={t('language')} divider>
@@ -142,7 +142,7 @@ export class WorkspaceMenu extends Component {
             <ListItemIcon>
               <SettingsIcon />
             </ListItemIcon>
-            <Typography varient="inherit">{t('settings')}</Typography>
+            <Typography variant="body1">{t('settings')}</Typography>
           </MenuItem>
           <MenuItem
             aria-haspopup="true"
@@ -152,7 +152,7 @@ export class WorkspaceMenu extends Component {
             <ListItemIcon>
               <SaveAltIcon />
             </ListItemIcon>
-            <Typography varient="inherit">{t('downloadExportWorkspace')}</Typography>
+            <Typography variant="body1">{t('downloadExportWorkspace')}</Typography>
           </MenuItem>
         </Menu>
         <WindowList

src/containers/ManifestForm.js

 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
+import { withStyles } from '@material-ui/core';
 import * as actions from '../state/actions';
 import { ManifestForm } from '../components/ManifestForm';
 
@@ -10,8 +11,18 @@ import { ManifestForm } from '../components/ManifestForm';
  * @private
  */
 const mapDispatchToProps = { fetchManifest: actions.fetchManifest };
+/**
+ *
+ * @param theme
+ */
+const styles = theme => ({
+  input: {
+    ...theme.typography.body1,
+  },
+});
 
 const enhance = compose(
+  withStyles(styles),
   withTranslation(),
   connect(null, mapDispatchToProps),
 );

src/containers/WindowSideBarInfoPanel.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
 import {
   getDestructuredMetadata,
   getCanvasLabel,
@@ -30,18 +29,8 @@ const mapStateToProps = (state, { windowId }) => ({
   manifestMetadata: getDestructuredMetadata(getWindowManifest(state, windowId).manifestation),
 });
 
-/**
- *
- * @param theme
- * @returns {{windowSideBarHeading: *}}
- */
-const styles = theme => ({
-  windowSideBarHeading: theme.typography.h6,
-});
-
 const enhance = compose(
   withTranslation(),
-  withStyles(styles),
   connect(mapStateToProps, null),
 );
 

src/containers/WorkspaceAdd.js

@@ -44,7 +44,6 @@ const styles = theme => ({
   },
   typographyBody: {
     flexGrow: 1,
-    fontSize: '1em',
   },
   menuButton: {
     marginLeft: -12,