refactor: renames material-ui components expansionpanel to accordion

Author: itofarina

src/components/molecules/Accordion.tsx

@@ -1,13 +1,13 @@
 import React, { FC, useState } from 'react'
-import ExpansionPanel, { ExpansionPanelProps } from '@material-ui/core/ExpansionPanel'
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
+import { Accordion as MUIAccordion, AccordionProps as MUIAccordionProps } from '@material-ui/core'
+import AccordionDetails from '@material-ui/core/AccordionDetails'
+import AccordionSummary from '@material-ui/core/AccordionSummary'
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
 import { Typography } from '../atoms'
 import { colors } from '../../theme'
 
-interface AccordionProps extends ExpansionPanelProps {
+interface AccordionProps extends MUIAccordionProps {
   id: string
   title?: string
 }
@@ -24,7 +24,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
     fontWeight: theme.typography.fontWeightBold,
     width: '100%',
   },
-  expansionPanelSummary: {
+  accordionSummary: {
     borderBottom: `1px solid ${colors.gray2}`,
   },
 }))
@@ -38,23 +38,23 @@ const Accordion: FC<AccordionProps> = ({
   const onChange = (): void => setIsExpanded(!isExpanded)
 
   return (
-    <ExpansionPanel
+    <MUIAccordion
       className={classes.root}
       expanded={isExpanded}
       onChange={onChange}
     >
-      <ExpansionPanelSummary
-        className={classes.expansionPanelSummary}
+      <AccordionSummary
+        className={classes.accordionSummary}
         expandIcon={<ExpandMoreIcon />}
         aria-controls={`panel-${id}-content`}
         id={id}
       >
         <Typography className={classes.heading}>{title}</Typography>
-      </ExpansionPanelSummary>
-      <ExpansionPanelDetails>
+      </AccordionSummary>
+      <AccordionDetails>
         {children}
-      </ExpansionPanelDetails>
-    </ExpansionPanel>
+      </AccordionDetails>
+    </MUIAccordion>
   )
 }
 

src/components/molecules/FAQSection.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useState } from 'react'
 import { makeStyles, Theme } from '@material-ui/core/styles'
-import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary } from '@material-ui/core'
+import { Accordion, AccordionDetails, AccordionSummary } from '@material-ui/core'
 import AddIcon from '@material-ui/icons/Add'
 import RemoveIcon from '@material-ui/icons/Remove'
 import { Typography } from '../atoms'
@@ -55,18 +55,18 @@ const FAQSection: FC<FAQSectionProps> = ({
   const onChange = (): void => setIsExpanded(!isExpanded)
 
   return (
-    <ExpansionPanel className={`${classes.root} ${className}`.trim()} expanded={isExpanded} onChange={onChange}>
-      <ExpansionPanelSummary
+    <Accordion className={`${classes.root} ${className}`.trim()} expanded={isExpanded} onChange={onChange}>
+      <AccordionSummary
         expandIcon={isExpanded ? <RemoveIcon /> : <AddIcon />}
       >
         <Typography className={`${classes.heading} ${isExpanded ? classes.headingExpanded : classes.headingCollapsed}`.trim()}>{question}</Typography>
-      </ExpansionPanelSummary>
-      <ExpansionPanelDetails className={classes.panelDetails}>
+      </AccordionSummary>
+      <AccordionDetails className={classes.panelDetails}>
         <div className={classes.answerContainer}>
           <Typography className={classes.answerText}>{answer}</Typography>
         </div>
-      </ExpansionPanelDetails>
-    </ExpansionPanel>
+      </AccordionDetails>
+    </Accordion>
   )
 }