From f75fa1cac670c9872c0d066b619560a1ee5fd38d Mon Sep 17 00:00:00 2001
From: Jessie Keck <jessie.keck@gmail.com>
Date: Fri, 22 Feb 2019 17:30:07 -0800
Subject: [PATCH] Wrap contents inside dt/dd with a Typography component.
This reverts commit acdb28ec1bafcf763d96441c9094bfec29c5ad7a.
---
.../src/components/LabelValueMetadata.test.js | 4 ++--
.../components/WindowSideBarInfoPanel.test.js | 16 ++++++----------
src/components/LabelValueMetadata.js | 7 +++++--
src/components/WindowSideBarInfoPanel.js | 8 ++------
4 files changed, 15 insertions(+), 20 deletions(-)
diff --git a/__tests__/src/components/LabelValueMetadata.test.js b/__tests__/src/components/LabelValueMetadata.test.js
index 8e8f777c6..512cd0d55 100644
--- a/__tests__/src/components/LabelValueMetadata.test.js
+++ b/__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', () => {
diff --git a/__tests__/src/components/WindowSideBarInfoPanel.test.js b/__tests__/src/components/WindowSideBarInfoPanel.test.js
index a6c69f1a4..2153e1f86 100644
--- a/__tests__/src/components/WindowSideBarInfoPanel.test.js
+++ b/__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);
});
diff --git a/src/components/LabelValueMetadata.js b/src/components/LabelValueMetadata.js
index cefe0a32b..ccb5a18b8 100644
--- a/src/components/LabelValueMetadata.js
+++ b/src/components/LabelValueMetadata.js
@@ -1,5 +1,6 @@
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}`}>
- <SanitizedHtml htmlString={labelValuePair.value} ruleSet="iiif" />
+ <Typography variant="body2">
+ <SanitizedHtml htmlString={labelValuePair.value} ruleSet="iiif" />
+ </Typography>
</dd>,
]), [])}
</dl>
diff --git a/src/components/WindowSideBarInfoPanel.js b/src/components/WindowSideBarInfoPanel.js
index bcf3a89a7..b6168c9d5 100644
--- a/src/components/WindowSideBarInfoPanel.js
+++ b/src/components/WindowSideBarInfoPanel.js
@@ -47,9 +47,7 @@ export class WindowSideBarInfoPanel extends Component {
)}
{canvasMetadata.length > 0 && (
- <Typography variant="body2">
- <LabelValueMetadata labelValuePairs={canvasMetadata} />
- </Typography>
+ <LabelValueMetadata labelValuePairs={canvasMetadata} />
)}
<Divider />
@@ -67,9 +65,7 @@ export class WindowSideBarInfoPanel extends Component {
)}
{manifestMetadata.length > 0 && (
- <Typography variant="body2">
- <LabelValueMetadata labelValuePairs={manifestMetadata} />
- </Typography>
+ <LabelValueMetadata labelValuePairs={manifestMetadata} />
)}
</div>
--
GitLab