Wrap contents inside dt/dd with a Typography component.

This reverts commit acdb28ec.

__tests__/src/components/LabelValueMetadata.test.js

@@ -31,8 +31,8 @@ describe('LabelValueMetadata', () => {
     });
 
     it('renders correct labels in dt', () => {
-      expect(wrapper.find('dt').first().text()).toEqual('Label 1');
-      expect(wrapper.find('dt').last().text()).toEqual('Label 2');
+      expect(wrapper.find('dt WithStyles(Typography)').first().children().text()).toEqual('Label 1');
+      expect(wrapper.find('dt WithStyles(Typography)').last().children().text()).toEqual('Label 2');
     });
 
     it('renders SanitizedHtml component in dt for each value', () => {

__tests__/src/components/WindowSideBarInfoPanel.test.js

@@ -52,17 +52,15 @@ describe('WindowSideBarInfoPanel', () => {
 
     it('renders canvas metadata in LabelValueMetadata component', () => {
       expect(
-        wrapper.find(Typography).at(3).matchesElement(
-          <Typography>
-            <LabelValueMetadata labelValuePairs={metadata} />
-          </Typography>,
+        wrapper.find(LabelValueMetadata).at(0).matchesElement(
+          <LabelValueMetadata labelValuePairs={metadata} />,
         ),
       ).toBe(true);
     });
 
     it('renders manifest label', () => {
       expect(
-        wrapper.find(Typography).at(4).matchesElement(
+        wrapper.find(Typography).at(3).matchesElement(
           <Typography>The Manifest Label</Typography>,
         ),
       ).toBe(true);
@@ -70,7 +68,7 @@ describe('WindowSideBarInfoPanel', () => {
 
     it('renders manifest description in SanitizedHtml component', () => {
       expect(
-        wrapper.find(Typography).at(5).matchesElement(
+        wrapper.find(Typography).at(4).matchesElement(
           <Typography>
             <SanitizedHtml htmlString="The Manifest Description" ruleSet="iiif" />
           </Typography>,
@@ -80,10 +78,8 @@ describe('WindowSideBarInfoPanel', () => {
 
     it('renders manifest metadata in LabelValueMetadata component', () => {
       expect(
-        wrapper.find(Typography).at(6).matchesElement(
-          <Typography>
-            <LabelValueMetadata labelValuePairs={metadata} />
-          </Typography>,
+        wrapper.find(LabelValueMetadata).at(1).matchesElement(
+          <LabelValueMetadata labelValuePairs={metadata} />,
         ),
       ).toBe(true);
     });

src/components/LabelValueMetadata.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Typography from '@material-ui/core/Typography';
 import { SanitizedHtml } from './SanitizedHtml';
 
 /**
@@ -26,10 +27,12 @@ export class LabelValueMetadata extends Component {
       <dl>
         {labelValuePairs.reduce((acc, labelValuePair, i) => acc.concat([
           <dt key={`label-${i}`}>
-            {labelValuePair.label}
+            <Typography variant="body2">{labelValuePair.label}</Typography>
           </dt>,
           <dd key={`value-${i}`}>
+            <Typography variant="body2">
               <SanitizedHtml htmlString={labelValuePair.value} ruleSet="iiif" />
+            </Typography>
           </dd>,
         ]), [])}
       </dl>

src/components/WindowSideBarInfoPanel.js

@@ -47,9 +47,7 @@ export class WindowSideBarInfoPanel extends Component {
         )}
 
         {canvasMetadata.length > 0 && (
-          <Typography variant="body2">
           <LabelValueMetadata labelValuePairs={canvasMetadata} />
-          </Typography>
         )}
 
         <Divider />
@@ -67,9 +65,7 @@ export class WindowSideBarInfoPanel extends Component {
         )}
 
         {manifestMetadata.length > 0 && (
-          <Typography variant="body2">
           <LabelValueMetadata labelValuePairs={manifestMetadata} />
-          </Typography>
         )}
 
       </div>