Fixes #2894 by using theme conforming <Link> component

__tests__/src/components/AttributionPanel.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
 import Img from 'react-image';
 import { AttributionPanel } from '../../../src/components/AttributionPanel';
 import { LabelValueMetadata } from '../../../src/components/LabelValueMetadata';
@@ -38,14 +39,14 @@ describe('AttributionPanel', () => {
     expect(
       wrapper.find(Typography).at(1).matchesElement(
         <Typography>
-          <a href="http://example.com">http://example.com</a>
+          <Link href="http://example.com">http://example.com</Link>
         </Typography>,
       ),
     ).toBe(true);
     expect(
       wrapper.find(Typography).at(2).matchesElement(
         <Typography>
-          <a href="http://stanford.edu">http://stanford.edu</a>
+          <Link href="http://stanford.edu">http://stanford.edu</Link>
         </Typography>,
       ),
     ).toBe(true);

__tests__/src/components/ManifestRelatedLinks.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
 import CollapsibleSection from '../../../src/containers/CollapsibleSection';
 import { ManifestRelatedLinks } from '../../../src/components/ManifestRelatedLinks';
 
@@ -56,7 +57,7 @@ describe('ManifestRelatedLinks', () => {
       expect(
         wrapper.find(Typography).at(2)
           .matchesElement(
-            <Typography component="dd"><a href="http://example.com/">Home page</a></Typography>,
+            <Typography component="dd"><Link href="http://example.com/">Home page</Link></Typography>,
           ),
       ).toBe(true);
     });
@@ -73,7 +74,7 @@ describe('ManifestRelatedLinks', () => {
         wrapper.find(Typography).at(4)
           .matchesElement(
             <Typography component="dd">
-              <a href="http://example.com/pdf">PDF Version</a>
+              <Link href="http://example.com/pdf">PDF Version</Link>
             </Typography>,
           ),
       ).toBe(true);
@@ -91,7 +92,7 @@ describe('ManifestRelatedLinks', () => {
         wrapper.find(Typography).at(6)
           .matchesElement(
             <Typography component="dd">
-              <a href="http://example.com/a">A</a>
+              <Link href="http://example.com/a">A</Link>
               <Typography>(text/html)</Typography>
             </Typography>,
           ),
@@ -100,7 +101,7 @@ describe('ManifestRelatedLinks', () => {
       expect(
         wrapper.find(Typography).at(8)
           .matchesElement(
-            <Typography component="dd"><a href="http://example.com/b">http://example.com/b</a></Typography>,
+            <Typography component="dd"><Link href="http://example.com/b">http://example.com/b</Link></Typography>,
           ),
       ).toBe(true);
     });
@@ -116,7 +117,7 @@ describe('ManifestRelatedLinks', () => {
       expect(
         wrapper.find(Typography).at(10)
           .matchesElement(
-            <Typography component="dd"><a href="http://example.com/">http://example.com/</a></Typography>,
+            <Typography component="dd"><Link href="http://example.com/">http://example.com/</Link></Typography>,
           ),
       ).toBe(true);
     });

src/components/AttributionPanel.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
 import Skeleton from '@material-ui/lab/Skeleton';
 import Img from 'react-image';
 import CompanionWindow from '../containers/CompanionWindow';
@@ -44,7 +45,9 @@ export class AttributionPanel extends Component {
                 <Typography variant="subtitle2" component="dt">{t('rights')}</Typography>
                 { rights.map(v => (
                   <Typography variant="body1" component="dd">
-                    <a target="_blank" rel="noopener noreferrer" href={v}>{v}</a>
+                    <Link target="_blank" rel="noopener noreferrer" href={v}>
+                      {v}
+                    </Link>
                   </Typography>
                 )) }
               </>

src/components/ManifestRelatedLinks.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
 import CollapsibleSection from '../containers/CollapsibleSection';
 import ns from '../config/css-ns';
 
@@ -42,7 +43,9 @@ export class ManifestRelatedLinks extends Component {
               {
                 homepage.map(page => (
                   <Typography key={page.value} variant="body1" component="dd">
-                    <a target="_blank" rel="noopener noreferrer" href={page.value}>{page.label || page.value}</a>
+                    <Link target="_blank" rel="noopener noreferrer" href={page.value}>
+                      {page.label || page.value}
+                    </Link>
                   </Typography>
                 ))
               }
@@ -54,7 +57,9 @@ export class ManifestRelatedLinks extends Component {
               {
                 renderings.map(rendering => (
                   <Typography key={rendering.value} variant="body1" component="dd">
-                    <a target="_blank" rel="noopener noreferrer" href={rendering.value}>{rendering.label || rendering.value}</a>
+                    <Link target="_blank" rel="noopener noreferrer" href={rendering.value}>
+                      {rendering.label || rendering.value}
+                    </Link>
                   </Typography>
                 ))
               }
@@ -66,9 +71,11 @@ export class ManifestRelatedLinks extends Component {
               {
                 seeAlso.map(related => (
                   <Typography key={related.value} variant="body1" component="dd">
-                    <a target="_blank" rel="noopener noreferrer" href={related.value}>{related.label || related.value}</a>
+                    <Link target="_blank" rel="noopener noreferrer" href={related.value}>
+                      {related.label || related.value}
+                    </Link>
                     { related.format && (
-                      <Typography variant="body2" component="span">{`(${related.format})`}</Typography>
+                      <Typography variant="a" component="span">{`(${related.format})`}</Typography>
                     )}
                   </Typography>
                 ))
@@ -79,7 +86,9 @@ export class ManifestRelatedLinks extends Component {
             <>
               <Typography variant="subtitle2" component="dt">{t('iiif_manifest')}</Typography>
               <Typography variant="body1" component="dd">
-                <a target="_blank" rel="noopener noreferrer" href={manifestUrl}>{manifestUrl}</a>
+                <Link target="_blank" rel="noopener noreferrer" href={manifestUrl}>
+                  {manifestUrl}
+                </Link>
               </Typography>
             </>
           )}

src/config/settings.js

@@ -194,6 +194,9 @@ export default {
       MuiButtonBase: {
         disableTouchRipple: true,
       },
+      MuiLink: {
+        underline: 'always'
+      },
     },
   },
   language: 'en', // The default language set in the application