Merge pull request #434 from mlibrary/remove-classnames

Remove `classnames` dependency.
mlibrary · Mar 4, 2024 · 823d90e · 823d90e
2 parents 59e524a + d469d0f
commit 823d90e
Show file tree

Hide file tree

Showing 24 changed files with 127 additions and 195 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE/dependency_updates_template.md b/.github/PULL_REQUEST_TEMPLATE/dependency_updates_template.md
@@ -8,7 +8,6 @@ These dependencies have been updated to their latest versions:
 - `@redux-devtools/extension`
 - `@reduxjs/toolkit`
 - `citeproc`
-- `classnames`
 - `connected-react-router`
 - `core-js`
 - `eslint`

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,6 @@
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "^2.2.1",
     "citeproc": "^2.4.63",
-    "classnames": "^2.5.1",
     "connected-react-router": "^6.9.3",
     "core-js": "^3.36.0",
     "history": "^4.10.1",

diff --git a/src/modules/advanced/components/AdvancedSearchForm/index.js b/src/modules/advanced/components/AdvancedSearchForm/index.js
@@ -2,7 +2,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Icon, Button, Alert } from '../../../reusable';
+import { Icon, Alert } from '../../../reusable';
 import { withRouter } from 'react-router-dom';
 import FieldInput from '../FieldInput';
 import FiltersContainer from '../FiltersContainer';
@@ -35,7 +35,8 @@ class AdvancedSearchForm extends React.Component {
     });
   };
 
-  handleAddAnotherFieldedSearch = () => {
+  handleAddAnotherFieldedSearch = (e) => {
+    e.preventDefault();
     this.props.addFieldedSearch({
       datastoreUid: this.props.datastore.uid,
       field: this.props.fields[0].uid
@@ -176,18 +177,21 @@ class AdvancedSearchForm extends React.Component {
             justifyContent: 'space-around'
           }}
         >
-          <Button
-            kind='secondary'
-            small
+          <button
+            className='btn btn--small btn--secondary'
             onClick={this.handleAddAnotherFieldedSearch}
           >
             Add another field
-          </Button>
+          </button>
         </div>
 
-        <Button style={{ marginTop: '1rem' }} type='submit'>
+        <button
+          className='btn btn--primary'
+          style={{ marginTop: '1rem' }}
+          type='submit'
+        >
           <Icon icon='search' size={24} /> Advanced Search
-        </Button>
+        </button>
 
         <FiltersContainer datastore={datastore} />
       </form>

diff --git a/src/modules/advanced/components/FiltersContainer/index.js b/src/modules/advanced/components/FiltersContainer/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector, connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
-import { Icon, Button } from '../../../reusable';
+import { Icon } from '../../../reusable';
 import getFilters from './getFilters';
 import AdvancedFilter from '../AdvancedFilter';
 import { setAdvancedFilter } from '../../../advanced';
@@ -128,12 +128,13 @@ class FiltersContainer extends React.Component {
           })}
         </div>
 
-        <Button
+        <button
           style={{ marginTop: '1rem' }}
+          className='btn btn--primary'
           type='submit'
         >
           <Icon icon='search' size={24} /> Advanced Search
-        </Button>
+        </button>
       </>
     );
   }

diff --git a/src/modules/affiliation/components/choose-affiliation.js b/src/modules/affiliation/components/choose-affiliation.js
@@ -4,7 +4,7 @@ import { useCookies } from 'react-cookie';
 import { useSelector } from 'react-redux';
 import qs from 'qs';
 import { COLORS } from '../../reusable/umich-lib-core-temp';
-import { Button, Dialog } from '../../reusable';
+import { Dialog } from '../../reusable';
 
 export default function ChooseAffiliation () {
   const { defaultAffiliation, affiliationOptions } = useSelector((state) => {
@@ -61,8 +61,8 @@ export default function ChooseAffiliation () {
   if (oldSafari) {
     return (
       <div>
-        <Button
-          kind='secondary'
+        <button
+          className='btn btn--secondary'
           css={{
             borderColor: COLORS.blue[300],
             color: 'white',
@@ -91,14 +91,14 @@ export default function ChooseAffiliation () {
             <span className='visually-hidden'>{affiliation === 'flint' ? 'Current' : 'Choose'} campus affiliation: </span>
             Flint
           </div>
-        </Button>
+        </button>
       </div>
     );
   }
   return (
     <div>
-      <Button
-        kind='secondary'
+      <button
+        className='btn btn--secondary'
         css={{
           borderColor: COLORS.blue[300],
           color: 'white',
@@ -127,7 +127,7 @@ export default function ChooseAffiliation () {
           <span className='visually-hidden'>{affiliation === 'flint' ? 'Current' : 'Choose'} campus affiliation: </span>
           Flint
         </div>
-      </Button>
+      </button>
       <Dialog open={dialogOpen} onRequestClose={closeDialog} closeOnOutsideClick>
         <div
           css={{
@@ -166,23 +166,22 @@ export default function ChooseAffiliation () {
                 }
               }}
             >
-              <Button onClick={closeDialog}>
+              <button className='btn btn--primary' onClick={closeDialog}>
                 Continue as {affiliationOptions[affiliation]}
-              </Button>
+              </button>
               or
-              <Button kind='secondary' onClick={changeAffiliation} role='link'>
+              <button className='btn btn--secondary' onClick={changeAffiliation} role='link'>
                 Change to {affiliationOptions[alternativeAffiliation]}
-              </Button>
+              </button>
             </div>
             <p className='font-small'>
               You can still use Library Search if you're not affiliated with
               either campus.
             </p>
           </div>
-          <Button
-            kind='secondary'
+          <button
+            className='btn btn--small btn--secondary'
             onClick={closeDialog}
-            small
             css={{
               border: 'none',
               flexShrink: '0',
@@ -193,7 +192,7 @@ export default function ChooseAffiliation () {
             }}
           >
             Dismiss
-          </Button>
+          </button>
         </div>
       </Dialog>
     </div>

diff --git a/src/modules/datastores/components/DatastoreAlerts/index.js b/src/modules/datastores/components/DatastoreAlerts/index.js
@@ -6,7 +6,7 @@ import {
   COLORS,
   Margins
 } from '../../../reusable/umich-lib-core-temp';
-import { Anchor, Button, Icon } from '../../../reusable/';
+import { Anchor, Icon } from '../../../reusable/';
 
 function COVIDAlert () {
   const [dismissed, setDismissed] = useState(false);
@@ -47,17 +47,17 @@ function COVIDAlert () {
           <p>
             Log in to view Get This options for items in our catalog while building access is limited. <Anchor href='https://guides.lib.umich.edu/c.php?g=914690&p=7402383'>Learn more about access changes due to COVID-19</Anchor>.
           </p>
-          <Button
+          <button
             onClick={() => {
               return setDismissed(true);
             }}
-            kind='secondary'
+            className='btn btn--secondary'
             css={{
               color: 'inherit'
             }}
           >
             Dismiss this message
-          </Button>
+          </button>
         </Margins>
       </div>
     );

diff --git a/src/modules/datastores/components/FlintAlerts/index.js b/src/modules/datastores/components/FlintAlerts/index.js
@@ -1,34 +1,35 @@
 import React, { useState } from 'react';
-import { Alert, Anchor, Button } from '../../../reusable';
+import { Alert, Anchor } from '../../../reusable';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
-function FlintAlerts (props) {
-  const [closed, setClosed] = useState(false);
-  const datastores = ['primo', 'databases', 'onlinejournals', 'website'];
+function FlintAlerts ({ datastore, profile }) {
+  const [dismiss, setDismiss] = useState([]);
+  const handleDismissClick = () => {
+    setDismiss((previousDismiss) => {
+      return [...previousDismiss, datastore];
+    });
+  };
+  const messages = {
+    primo: (<>U-M Flint users: You may not be able to access U-M Ann Arbor resources. For the best results use <Anchor href='https://umich.primo.exlibrisgroup.com/discovery/search?vid=01UMICH_INST:FLINT'>Thompson Library’s Search All</Anchor> to search for articles.</>),
+    databases: (<>We noticed you are affiliated with U-M Flint. For the best results use the <Anchor href='https://libguides.umflint.edu/az.php?a=all'>Thompson Library’s database listing</Anchor>.</>),
+    onlinejournals: (<>We noticed you are affiliated with U-M Flint. For the best results use the <Anchor href='https://umich.primo.exlibrisgroup.com/discovery/jsearch?vid=01UMICH_INST:FLINT'>Thompson Library’s Search All</Anchor> to search for articles.</>),
+    website: (<>We noticed you are affiliated with U-M Flint. For the best results use the <Anchor href='https://libguides.umflint.edu/library'>Thompson Library website</Anchor>.</>)
+  };
 
-  if (!datastores.includes(props.datastore) || !props.profile.institutions?.includes('Flint') || closed) {
+  if (!Object.keys(messages).includes(datastore) || !profile.institutions?.includes('Flint') || dismiss.includes(datastore)) {
     return null;
   }
 
   return (
     <Alert type='warning'>
-      <span>
-        {props.datastore === datastores[0] && <>U-M Flint users: You may not be able to access U-M Ann Arbor resources. For the best results use <Anchor href='https://umich.primo.exlibrisgroup.com/discovery/search?vid=01UMICH_INST:FLINT'>Thompson Library’s Search All</Anchor> to search for articles.</>}
-        {props.datastore === datastores[1] && <>We noticed you are affiliated with U-M Flint. For the best results use the <Anchor href='https://libguides.umflint.edu/az.php?a=all'>Thompson Library’s database listing</Anchor>.</>}
-        {props.datastore === datastores[2] && <>We noticed you are affiliated with U-M Flint. For the best results use the <Anchor href='https://umich.primo.exlibrisgroup.com/discovery/jsearch?vid=01UMICH_INST:FLINT'>Thompson Library’s Search All</Anchor> to search for articles.</>}
-        {props.datastore === datastores[3] && <>We noticed you are affiliated with U-M Flint. For the best results use the <Anchor href='https://libguides.umflint.edu/library'>Thompson Library website</Anchor>.</>}
-      </span>
-      <Button
-        kind='secondary'
-        small
-        onClick={(event) => {
-          event.preventDefault();
-          setClosed(true);
-        }}
+      <span>{messages[datastore]}</span>
+      <button
+        className='btn btn--small btn--secondary'
+        onClick={handleDismissClick}
       >
         Dismiss
-      </Button>
+      </button>
     </Alert>
   );
 }
@@ -38,10 +39,8 @@ FlintAlerts.propTypes = {
   datastore: PropTypes.string
 };
 
-function mapStateToProps (state) {
+export default connect((state) => {
   return {
     profile: state.profile
   };
-}
-
-export default connect(mapStateToProps)(FlintAlerts);
+})(FlintAlerts);
diff --git a/src/modules/filters/components/Filters/index.js b/src/modules/filters/components/Filters/index.js
@@ -353,8 +353,6 @@ function FilterGroupFilters ({ group, hidden = false, filters }) {
           <ExpandableButton
             name={group.metadata.name + ' filters'}
             count={filters.length}
-            kind='secondary'
-            small
             css={{
               marginBottom: SPACING.XS
             }}

diff --git a/src/modules/lists/components/CitationAction/index.js b/src/modules/lists/components/CitationAction/index.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Button, Tabs, TabList, Tab, TabPanel } from '../../../reusable';
+import { Tabs, TabList, Tab, TabPanel } from '../../../reusable';
 import { cite } from '../../../citations';
 import PropTypes from 'prop-types';
 
@@ -135,7 +135,13 @@ function CitationAction (props) {
                     >
                       These citations are generated from a variety of data sources. Remember to check citation format and content for accuracy before including them in your work.
                     </p>
-                    <Button type='submit' style={{ whiteSpace: 'nowrap' }}>Copy citation</Button>
+                    <button
+                      className='btn btn--primary'
+                      type='submit'
+                      style={{ whiteSpace: 'nowrap' }}
+                    >
+                      Copy citation
+                    </button>
                   </>
                   )
                 : (

diff --git a/src/modules/lists/components/EmailAction/index.js b/src/modules/lists/components/EmailAction/index.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import ActionStatusMessage from '../ActionStatusMessage';
-import { Button } from '../../../reusable';
 import PropTypes from 'prop-types';
 
 function EmailAction (props) {
@@ -40,7 +39,13 @@ function EmailAction (props) {
               autoComplete='on'
             />
           </div>
-          <Button type='submit' style={{ whiteSpace: 'nowrap' }}>Send email</Button>
+          <button
+            className='btn btn--primary'
+            type='submit'
+            style={{ whiteSpace: 'nowrap' }}
+          >
+            Send email
+          </button>
         </form>}
     </section>
   );

diff --git a/src/modules/lists/components/FileAction/index.js b/src/modules/lists/components/FileAction/index.js
@@ -1,24 +1,18 @@
 import React from 'react';
-import { Button } from '../../../reusable';
 import PropTypes from 'prop-types';
 
-function FileAction (props) {
+function FileAction ({ prejudice, datastore }) {
   return (
     <section className='lists-action'>
       <form
         className='lists-action-form' onSubmit={(event) => {
           event.preventDefault();
-          props.prejudice.act(
-            'file',
-            props.datastore.uid,
-            'export-ris',
-            () => {
-              // Must have a function for callback
-            }
-          );
+          prejudice.act('file', datastore.uid, 'export-ris', () => { /** Callback must be a function */ });
         }}
       >
-        <Button type='submit'>Download</Button>
+        <button className='btn btn--primary' type='submit'>
+          Download
+        </button>
       </form>
     </section>
   );

diff --git a/src/modules/lists/components/PermalinkAction/index.js b/src/modules/lists/components/PermalinkAction/index.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Button } from '../../../reusable';
 import PropTypes from 'prop-types';
 
 function PermalinkAction (props) {
@@ -29,9 +28,9 @@ function PermalinkAction (props) {
           autoComplete='off'
         />
       </div>
-      <Button type='submit'>
+      <button className='btn btn--primary' type='submit'>
         Copy link
-      </Button>
+      </button>
     </form>
   );
 }