StyledSampleExpansionPanel.tsx

import React from 'react'
import ExpansionPanel from '@material-ui/core/ExpansionPanel'
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
import { withStyles } from '@material-ui/core/styles'

import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import ChevronOffIcon from 'assets/icons/ico/chevron-off.svg'

interface GenericExpansionPanelProps {
  summary: React.ReactFragment
  details: React.ReactFragment
  expanded: boolean
  onChange: (event: React.ChangeEvent<{}>, expanded: boolean) => void
}

const BaseExpansionPanel = withStyles({
  root: {
    display: 'block',
    width: '90%',
    margin: '0.5em auto 0.5em auto',
  },
})(ExpansionPanel)

const StyledExpansionPanel = withStyles({
  root: {
    background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
  },
  expanded: {
    background: 'var(--greyBright)',
  },
})(BaseExpansionPanel)

const StyledExpansionPanelSummary = withStyles({
  root: {
    color: 'var(--textWhite)',
    minHeight: '5rem',
    padding: '0 53px 0 15px',
    margin: '0',
  },
  expanded: {
    fontWeight: 'bold',
    color: 'var(--textBlack)',
  },
  content: {
    fontFamily: 'var(--textFont)',
  },
})(ExpansionPanelSummary)

const StyledExpansionPanelDetails = withStyles({
  root: {
    color: 'var(--textBlack)',
    flexDirection: 'column',
    margin: '0',
    padding: '0 15px 0 15px',
    paddingBottom: '15px',
  },
})(ExpansionPanelDetails)

const GenericExpansionPanel: React.ComponentType<GenericExpansionPanelProps> = props => {
  return (
    <>
      <StyledExpansionPanel
        expanded={props.expanded}
        onChange={props.onChange}
        {...props}
      >
        <StyledExpansionPanelSummary
          expandIcon={<StyledIcon icon={ChevronOffIcon} />}
        >
          {props.summary}
        </StyledExpansionPanelSummary>
        <StyledExpansionPanelDetails>
          {props.details}
        </StyledExpansionPanelDetails>
      </StyledExpansionPanel>
    </>
  )
}

export default GenericExpansionPanel