Returning Link component to Anchor if to property is defined. A…

…pplying new component to pages.
mlibrary · Sep 26, 2023 · b7315da · b7315da
1 parent 76766a4
commit b7315da
Show file tree

Hide file tree

Showing 12 changed files with 98 additions and 124 deletions.
diff --git a/src/modules/core/components/Alert/index.js b/src/modules/core/components/Alert/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Anchor } from '../../../reusable';
 import PropTypes from 'prop-types';
 
 const DatastoreInfo = ({ activeDatastore }) => {
@@ -36,7 +37,7 @@ const DatastoreInfo = ({ activeDatastore }) => {
     case 'website':
       return (
         <div className='alert datastore-info'>
-          <p><span className='strong'>Guides and more</span>: the place to learn about our services, spaces, and collections. Your results will include research guides, specialty sites, blogs and blogs posts, and online exhibits. Visit <a href='https://lib.umich.edu'>lib.umich.edu</a> to search the library website, including library staff, current news, events, and physical exhibits.</p>
+          <p><span className='strong'>Guides and more</span>: the place to learn about our services, spaces, and collections. Your results will include research guides, specialty sites, blogs and blogs posts, and online exhibits. Visit <Anchor href='https://lib.umich.edu'>lib.umich.edu</Anchor> to search the library website, including library staff, current news, events, and physical exhibits.</p>
         </div>
       );
     default:

diff --git a/src/modules/core/components/Footer/index.js b/src/modules/core/components/Footer/index.js
@@ -1,57 +1,44 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Anchor } from '../../../reusable';
 
-const footerLinks = [
-  {
-    text: 'Home',
-    to: '/everything'
-  },
-  {
-    text: 'Accessibility',
-    to: '/accessibility'
-  },
-  {
-    text: 'Tips for Using Library Search',
-    href: 'https://guides.lib.umich.edu/c.php?g=914690'
-  },
-  {
-    text: 'Get research help',
-    href:
-      'https://lib.umich.edu/research-and-scholarship/help-research/how-we-can-help'
-  },
-  {
-    text: 'About Library Search',
-    to: '/about-library-search'
-  },
-  {
-    text: 'Make an <abbr title="Interlibrary Loan">I.L.L.</abbr> Request',
-    href:
-      'https://ill.lib.umich.edu/'
-  }
-];
-
-const Footer = () => {
+function Footer () {
   return (
     <footer
       className='site-footer'
       role='contentinfo'
-      style={{ textAlign: 'center' }}
     >
       <div className='container container-medium'>
         <ul className='site-footer-nav-list'>
-          {footerLinks.map((item, i) => {
-            return (
-              <li key={i}>
-                {item.to
-                  ? (
-                    <Link to={item.to} dangerouslySetInnerHTML={{ __html: item.text }} />
-                    )
-                  : (
-                    <a href={item.href} dangerouslySetInnerHTML={{ __html: item.text }} />
-                    )}
-              </li>
-            );
-          })}
+          <li>
+            <Anchor to='/everything'>
+              Home
+            </Anchor>
+          </li>
+          <li>
+            <Anchor to='/accessibility'>
+              Accessibility
+            </Anchor>
+          </li>
+          <li>
+            <Anchor href='https://guides.lib.umich.edu/c.php?g=914690'>
+              Tips for Using Library Search
+            </Anchor>
+          </li>
+          <li>
+            <Anchor href='https://lib.umich.edu/research-and-scholarship/help-research/how-we-can-help'>
+              Get research help
+            </Anchor>
+          </li>
+          <li>
+            <Anchor to='/about-library-search'>
+              About Library Search
+            </Anchor>
+          </li>
+          <li>
+            <Anchor href='https://ill.lib.umich.edu/'>
+              Make an <abbr title='Interlibrary Loan'>I.L.L.</abbr> Request
+            </Anchor>
+          </li>
         </ul>
 
         <p>

diff --git a/src/modules/getthis/components/GetThisForm/index.js b/src/modules/getthis/components/GetThisForm/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Anchor } from '../../../reusable';
 import { connect } from 'react-redux';
 import { getField, getFieldValue } from '../../../records/utilities';
 import { placeHold } from '../../../pride';
@@ -142,23 +143,19 @@ class GetThisForm extends React.Component {
         return (
           <article className='alert alert-success'>
             <h4>You have successfully requested this item</h4>
-
             <ul className='u-margin-bottom-1 margin-left-2'>
               <li>We will email you when it is available for pickup.</li>
               <li>When it is available, we'll hold it for you for 7 days.</li>
             </ul>
-
-            <a href='https://account.lib.umich.edu/pending-requests/u-m-library'>View all your holds</a>
+            <Anchor href='https://account.lib.umich.edu/pending-requests/u-m-library'>View all your holds</Anchor>
           </article>
         );
       } else {
         return (
           <article className='alert alert-warning'>
             <h4>The hold/request could not be placed</h4>
-
             <p><span className='strong'>Status:</span> {response.status}</p>
-
-            <p className='u-margin-bottom-none'>Please contact the Graduate Library Circulation Desk at <a href='mailto:[email protected]'>[email protected]</a> or <a href='tel:7347640401'>(734) 764-0401</a> for assistance.</p>
+            <p className='u-margin-bottom-none'>Please contact the Graduate Library Circulation Desk at <Anchor href='mailto:[email protected]'>[email protected]</Anchor> or <Anchor href='tel:7347640401'>(734) 764-0401</Anchor> for assistance.</p>
           </article>
         );
       }
@@ -185,7 +182,6 @@ class GetThisForm extends React.Component {
         <div role='alert'>
           {this.renderResponse()}
         </div>
-
         {showForm && (
           <form action={form.action} method={form.method} onSubmit={this.handleSubmit}>
             {fields.map((field, key) => {

diff --git a/src/modules/pages/components/AboutLibrarySearch/index.js b/src/modules/pages/components/AboutLibrarySearch/index.js
@@ -1,19 +1,16 @@
 import React from 'react';
-import {
-  setDocumentTitle
-} from '../../../a11y';
+import { setDocumentTitle } from '../../../a11y';
+import { Anchor } from '../../../reusable';
 import schematicImage from './schematic.png';
 
-const AboutLibrarySearch = function NoMatch () {
+function AboutLibrarySearch () {
   setDocumentTitle(['About Library Search']);
 
   return (
     <div className='container container-narrow'>
       <main className='page'>
         <h1 className='u-margin-top-none' id='maincontent' tabIndex='-1'>About Library Search</h1>
-
         <p>Library Search is the University of Michigan Library's discovery interface. Launched in July 2018, it is designed to provide a consistent user experience across the physical and electronic resources the library provides. The Everything view displays a few results matching a user's keyword search under separate panels for each of the five categories of information: Catalog, Articles, Databases, Online Journals, and Guides & More. Each of these categories has an in-depth view that enables users to drill down into those materials to find what best meets their needs.</p>
-
         <h2>Overview</h2>
         <p>Although the user interface is intentionally similar across search categories, it contains a variety of information sources where each kind of data are managed:</p>
         <ul>
@@ -28,7 +25,6 @@ const AboutLibrarySearch = function NoMatch () {
           <li><em>Prejudice</em>, which handles integrations with the campus directory for authentication and other services</li>
         </ul>
         <p><img src={schematicImage} alt='' style={{ height: 'auto', maxWidth: '100%' }} /></p>
-
         <h2>Flexibility</h2>
         <p>Library Search is designed to separate the user experience from the particular system that provides or manages the data. This allowed us, in summer 2021, to switch library management systems and article discovery systems from Aleph and Summon to Alma and Primo with minimal need for changes to the user experience. This approach brings several other benefits, as well:</p>
         <ul>
@@ -37,23 +33,20 @@ const AboutLibrarySearch = function NoMatch () {
           <li>We are able to integrate delivery services for catalog materials at a much more granular level, offering different kinds of users different services, depending on the item type, circulation status, etc.</li>
           <li>We are able to keep user identities private from vendors, at least until such time as the user goes to a full-text site and interacts with content there.</li>
         </ul>
-
         <h2>Management</h2>
-        <p>Library Search's front- and back-end systems are managed by staff from the <a href='https://www.lib.umich.edu/about-us/our-divisions-and-departments/library-information-technology/design-and-discovery'>Design and Discovery</a>, <a href='https://www.lib.umich.edu/about-us/our-divisions-and-departments/library-information-technology/automation-indexing-and'>Automation, Indexing, and Metadata</a>, and <a href='https://www.lib.umich.edu/about-us/our-divisions-and-departments/library-information-technology/digital-library-applications'>Digital Library Applications</a> departments within the <a href='https://www.lib.umich.edu/about-us/our-divisions-and-departments/library-information-technology'>Library Information Technology</a> division. All of the software we have developed is <a href='https://github.com/mlibrary'>available in GitHub</a> under open source licenses.</p>
+        <p>Library Search's front- and back-end systems are managed by staff from the <Anchor href='https://www.lib.umich.edu/about-us/our-divisions-and-departments/library-information-technology/design-and-discovery'>Design and Discovery</Anchor>, <Anchor href='https://www.lib.umich.edu/about-us/our-divisions-and-departments/library-information-technology/automation-indexing-and'>Automation, Indexing, and Metadata</Anchor>, and <Anchor href='https://www.lib.umich.edu/about-us/our-divisions-and-departments/library-information-technology/digital-library-applications'>Digital Library Applications</Anchor> departments within the <Anchor href='https://www.lib.umich.edu/about-us/our-divisions-and-departments/library-information-technology'>Library Information Technology</Anchor> division. All of the software we have developed is <Anchor href='https://github.com/mlibrary'>available in GitHub</Anchor> under open source licenses.</p>
         <p>The overall Library Search service is stewarded by the Library Search Service Team, co-chaired by Karen Reiman-Sendi and Ken Varnum.</p>
-
         <h2>Code repositories</h2>
-        <p>The various applications developed at the University of Michigan Library are available through the <a href='https://github.com/mlibrary/'>University Library's GitHub</a> repository:</p>
+        <p>The various applications developed at the University of Michigan Library are available through the <Anchor href='https://github.com/mlibrary/'>University Library's GitHub</Anchor> repository:</p>
         <ul>
-          <li><a href='https://github.com/mlibrary/pride'>pride</a> -- A JavaScript library for interfacing with the U-M Library search backend</li>
-          <li><a href='https://github.com/mlibrary/prejudice'>prejudice</a> -- A companion to pride</li>
-          <li><a href='https://github.com/mlibrary/search'>search</a> -- A single-page web application that consolidates the library's multiple discovery interfaces into one</li>
-          <li><a href='https://github.com/mlibrary/spectrum'>spectrum</a> -- The backend for Search</li>
-          <li><a href='https://github.com/mlibrary/catalog-browse'>catalog-browse</a> -- The call number, author authority file, subject authority file application (under development as of April 2022)</li>
+          <li><Anchor href='https://github.com/mlibrary/pride'>pride</Anchor> -- A JavaScript library for interfacing with the U-M Library search backend</li>
+          <li><Anchor href='https://github.com/mlibrary/prejudice'>prejudice</Anchor> -- A companion to pride</li>
+          <li><Anchor href='https://github.com/mlibrary/search'>search</Anchor> -- A single-page web application that consolidates the library's multiple discovery interfaces into one</li>
+          <li><Anchor href='https://github.com/mlibrary/spectrum'>spectrum</Anchor> -- The backend for Search</li>
+          <li><Anchor href='https://github.com/mlibrary/catalog-browse'>catalog-browse</Anchor> -- The call number, author authority file, subject authority file application (under development as of April 2022)</li>
         </ul>
-
         <h2>More information</h2>
-        <p>If you are curious to know more about Library Search, please contact <a href='https://www.lib.umich.edu/users/varnum'>Ken Varnum</a>, Senior Program Manager and Discovery Strategist.</p>
+        <p>If you are curious to know more about Library Search, please contact <Anchor href='https://www.lib.umich.edu/users/varnum'>Ken Varnum</Anchor>, Senior Program Manager and Discovery Strategist.</p>
       </main>
     </div>
   );

diff --git a/src/modules/pages/components/AccessibilityPage/index.js b/src/modules/pages/components/AccessibilityPage/index.js
@@ -1,19 +1,16 @@
 import React from 'react';
+import { setDocumentTitle } from '../../../a11y';
+import { Anchor } from '../../../reusable';
 
-import {
-  setDocumentTitle
-} from '../../../a11y';
-
-const AccessibilityPage = function NoMatch () {
+function AccessibilityPage () {
   setDocumentTitle(['Accessibility']);
 
   return (
     <div className='container container-narrow'>
       <main className='page'>
         <h1 className='u-margin-top-none' id='maincontent' tabIndex='-1'>Accessibility</h1>
         <p>We are dedicated to creating inclusive services and products for all users. We are constantly working to make Library Search as accessible and usable as possible.</p>
-        <p>We aim to meet <a href='https://www.w3.org/WAI/WCAG20/quickref/'>WCAG 2.0 AA standards</a></p>
-
+        <p>We aim to meet <Anchor href='https://www.w3.org/WAI/WCAG20/quickref/'>WCAG 2.0 AA standards</Anchor></p>
         <h2>Compatibility with tools</h2>
         <p>Library Search should be compatible with recent version of the following screen readers:</p>
         <ul>
@@ -27,9 +24,8 @@ const AccessibilityPage = function NoMatch () {
           <li>speech recognition software</li>
           <li>operating system speech package</li>
         </ul>
-
         <h2>Provide feedback</h2>
-        <p>Are you having trouble using Library Search? <a href='https://umich.qualtrics.com/jfe/form/SV_bCwYIKueEXs8wBf'>Please let us know</a> so that we can make improvements to improve your experience.</p>
+        <p>Are you having trouble using Library Search? <Anchor href='https://umich.qualtrics.com/jfe/form/SV_bCwYIKueEXs8wBf'>Please let us know</Anchor> so that we can make improvements to improve your experience.</p>
       </main>
     </div>
   );

diff --git a/src/modules/pages/components/IndexPage/index.js b/src/modules/pages/components/IndexPage/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const IndexPage = function DatastorePage () {
+function IndexPage () {
   return (
     <div>
       <div className='container container-narrow'>

diff --git a/src/modules/pages/components/NoMatch/index.js b/src/modules/pages/components/NoMatch/index.js
@@ -1,9 +1,8 @@
-/** @jsxImportSource @emotion/react */
 import React from 'react';
-import { Link } from 'react-router-dom';
 import { setDocumentTitle } from '../../../a11y';
+import { Anchor } from '../../../reusable';
 
-const NoMatch = function NoMatch () {
+function NoMatch () {
   setDocumentTitle(['404']);
 
   return (
@@ -16,15 +15,9 @@ const NoMatch = function NoMatch () {
         <h2 className='heading-medium'>
           Try these options instead
         </h2>
-        <ul css={{
-          margin: '0',
-          padding: '0',
-          marginLeft: '1.5rem',
-          maxWidth: '32em'
-        }}
-        >
+        <ul className='margin-left-2 feedback-form-fieldset'>
           <li>
-            <p>Start over from <Link to='/everything'>the homepage</Link>.</p>
+            <p>Start over from <Anchor to='/everything'>the homepage</Anchor>.</p>
           </li>
           <li>
             <p>The link to the resource you're looking for may have changed, please
@@ -33,13 +26,13 @@ const NoMatch = function NoMatch () {
           </li>
           <li>
             <p>
-              <Link to='/databases/browse'>Browse all Databases</Link> or <Link to='/onlinejournals/browse'>Browse all Online Journals</Link> to view comprehensive lists
+              <Anchor to='/databases/browse'>Browse all Databases</Anchor> or <Anchor to='/onlinejournals/browse'>Browse all Online Journals</Anchor> to view comprehensive lists
               of current library resources.
             </p>
           </li>
           <li>
             <p>
-              <a href='https://www.lib.umich.edu/ask-librarian'>Ask a librarian</a> and we'll help you find what you're
+              <Anchor href='https://www.lib.umich.edu/ask-librarian'>Ask a librarian</Anchor> and we'll help you find what you're
               looking for!
             </p>
           </li>