Use an MUI accordion for the sidebar collapsing sections

ProjectMirador · Nov 28, 2023 · e3c7992 · e3c7992
1 parent ea70a21
commit e3c7992
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 37 deletions.
diff --git a/src/components/CollapsibleSection.js b/src/components/CollapsibleSection.js
@@ -1,17 +1,10 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
-import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDownSharp';
-import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUpSharp';
-import MiradorMenuButton from '../containers/MiradorMenuButton';
-
-const StyledContainer = styled('div')(() => ({
-  alignItems: 'flex-start',
-  cursor: 'pointer', // This style will be applied to Typography
-  display: 'flex',
-  justifyContent: 'space-between',
-}));
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 /**
  * CollapsableSection ~
@@ -22,14 +15,12 @@ export class CollapsibleSection extends Component {
     super(props);
 
     this.state = { open: true };
-    this.toggleSection = this.toggleSection.bind(this);
+    this.handleChange = this.handleChange.bind(this);
   }
 
-  /** */
-  toggleSection() {
-    const { open } = this.state;
-
-    this.setState({ open: !open });
+  /** Control the accordion state so we can provide aria labeling */
+  handleChange(event, isExpanded) {
+    this.setState({ open: isExpanded });
   }
 
   /**
@@ -42,28 +33,16 @@ export class CollapsibleSection extends Component {
     const { open } = this.state;
 
     return (
-      <>
-        <StyledContainer sx={{ padding: 0 }}>
-          <Typography
-            sx={{ alignSelf: 'center', cursor: 'pointer' }}
-            id={id}
-            onClick={this.toggleSection}
-            variant="overline"
-            component="h4"
-          >
+      <Accordion id={id} elevation={0} expanded={open} onChange={this.handleChange} disableGutters square variant="compact">
+        <AccordionSummary id={`${id}-header`} aria-controls={`${id}-content`} aria-label={t(open ? 'collapseSection' : 'expandSection', { section: label })} expandIcon={<ExpandMoreIcon />}>
+          <Typography variant="overline" component="h4">
             {label}
           </Typography>
-          <MiradorMenuButton
-            aria-label={t(open ? 'collapseSection' : 'expandSection', { section: label })}
-            aria-expanded={open}
-            sx={{ padding: 0 }}
-            onClick={this.toggleSection}
-          >
-            {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
-          </MiradorMenuButton>
-        </StyledContainer>
-        {open && children}
-      </>
+        </AccordionSummary>
+        <AccordionDetails>
+          {children}
+        </AccordionDetails>
+      </Accordion>
     );
   }
 }

diff --git a/src/config/settings.js b/src/config/settings.js
@@ -176,6 +176,25 @@ export default {
           },
         },
       },
+      MuiAccordion: {
+        variants: [
+          {
+            props: { variant: 'compact' },
+            style: {
+              '& .MuiAccordionSummary-root': {
+                minHeight: 'unset',
+                padding: 0,
+              },
+              '& .MuiAccordionSummary-content': {
+                margin: 0,
+              },
+              '& .MuiAccordionDetails-root': {
+                padding: 0,
+              },
+            },
+          },
+        ],
+      },
       MuiButtonBase: {
         defaultProps: {
           disableTouchRipple: true,