(Refactor) Accordion component

src/dataDisplay/Accordion/accordion.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Accordion from './index';
+import { Accordion, AccordionSummary, AccordionDetails } from './index';
 import { Card, Text, IconText } from '../../index';
 
 export default {
@@ -13,54 +13,54 @@ export default {
 
 export const SimpleAccordion = (): React.ReactElement => (
   <Card>
-    <Accordion
-      summaryContent={
+    <Accordion>
+      <AccordionSummary>
         <IconText
           iconSize="sm"
           textSize="xl"
           iconType="code"
           text="Transaction 1"
         />
-      }
-      detailsContent={
+      </AccordionSummary>
+      <AccordionDetails>
         <Text size="lg">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
           malesuada lacus ex, sit amet blandit leo lobortis eget.
         </Text>
-      }
-    />
-    <Accordion
-      summaryContent={
+      </AccordionDetails>
+    </Accordion>
+    <Accordion>
+      <AccordionSummary>
         <IconText
           iconSize="sm"
           textSize="xl"
           iconType="code"
           text="Transaction 2"
         />
-      }
-      detailsContent={
+      </AccordionSummary>
+      <AccordionDetails>
         <Text size="lg">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
           malesuada lacus ex, sit amet blandit leo lobortis eget.
         </Text>
-      }
-    />
-    <Accordion
-      summaryContent={
+      </AccordionDetails>
+    </Accordion>
+    <Accordion>
+      <AccordionSummary>
         <IconText
           iconSize="sm"
           textSize="xl"
           iconType="code"
           text="Transaction 3"
         />
-      }
-      detailsContent={
+      </AccordionSummary>
+      <AccordionDetails>
         <Text size="lg">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
           malesuada lacus ex, sit amet blandit leo lobortis eget.
         </Text>
-      }
-    />
+      </AccordionDetails>
+    </Accordion>
   </Card>
 );
 
@@ -73,39 +73,53 @@ export const CompactAccordion = (): React.ReactElement => (
       alignItems: 'center',
       flexDirection: 'column',
     }}>
-    <Accordion
-      compact
-      summaryContent={
+    <Accordion compact>
+      <AccordionSummary>
         <IconText
           iconSize="sm"
           textSize="xl"
           iconType="code"
           text="Transaction 1"
         />
-      }
-      detailsContent={
+      </AccordionSummary>
+      <AccordionDetails>
         <Text size="lg">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
           malesuada lacus ex, sit amet blandit leo lobortis eget.
         </Text>
-      }
-    />
-    <Accordion
-      compact
-      summaryContent={
+      </AccordionDetails>
+    </Accordion>
+    <Accordion compact>
+      <AccordionSummary>
         <IconText
           iconSize="sm"
           textSize="xl"
           iconType="code"
           text="Transaction 2"
         />
-      }
-      detailsContent={
+      </AccordionSummary>
+      <AccordionDetails>
         <Text size="lg">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
           malesuada lacus ex, sit amet blandit leo lobortis eget.
         </Text>
-      }
-    />
+      </AccordionDetails>
+    </Accordion>
+    <Accordion compact>
+      <AccordionSummary>
+        <IconText
+          iconSize="sm"
+          textSize="xl"
+          iconType="code"
+          text="Transaction 3"
+        />
+      </AccordionSummary>
+      <AccordionDetails>
+        <Text size="lg">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          malesuada lacus ex, sit amet blandit leo lobortis eget.
+        </Text>
+      </AccordionDetails>
+    </Accordion>
   </div>
 );

src/dataDisplay/Accordion/index.tsx

@@ -1,16 +1,19 @@
-import React, { ReactNode, ReactElement } from 'react';
-import AccordionMUI from '@material-ui/core/Accordion';
-import AccordionSummaryMUI from '@material-ui/core/AccordionSummary';
-import AccordionDetailsMUI from '@material-ui/core/AccordionDetails';
+import React, { ReactElement } from 'react';
+import AccordionMUI, {
+  AccordionProps as AccordionMUIProps,
+} from '@material-ui/core/Accordion';
+import AccordionSummaryMUI, {
+  AccordionSummaryProps as AccordionSummaryMUIProps,
+} from '@material-ui/core/AccordionSummary';
 import styled from 'styled-components';
 
 import FixedIcon from '../FixedIcon';
 
-type AccordionProps = {
+type StyledAccordionProps = AccordionMUIProps & {
   compact?: boolean;
 };
 
-export const StyledAccordion = styled(AccordionMUI)<AccordionProps>`
+const StyledAccordion = styled(AccordionMUI)<StyledAccordionProps>`
   &.MuiAccordion-root {
     border-radius: ${({ compact }) => (compact ? '8px' : '0')};
     border: ${({ compact, theme }) =>
@@ -30,20 +33,23 @@ export const StyledAccordion = styled(AccordionMUI)<AccordionProps>`
     &.Mui-expanded {
       margin: ${({ compact }) => (compact ? '0 0 16px 0' : '0')};
     }
+
+    .MuiAccordionDetails-root {
+      padding: 16px;
+    }
   }
 `;
-export const AccordionSummary = styled(AccordionSummaryMUI)<AccordionProps>`
+
+const StyledAccordionSummary = styled(AccordionSummaryMUI)`
   &.MuiAccordionSummary-root {
     &.Mui-expanded {
       min-height: 48px;
       border-bottom: 2px solid ${({ theme }) => theme.colors.separator};
-      margin-bottom: ${({ compact }) => (compact ? '16px' : '0')};
       background-color: ${({ theme }) => theme.colors.background};
     }
 
     &:hover {
       background-color: ${({ theme }) => theme.colors.background};
-      border-radius: ${({ compact }) => (compact ? '8px' : '0')};
     }
 
     .MuiAccordionSummary-content {
@@ -57,46 +63,31 @@ export const AccordionSummary = styled(AccordionSummaryMUI)<AccordionProps>`
     }
   }
 `;
-export const AccordionDetails = styled(AccordionDetailsMUI)``;
-
-type Props = {
-  compact?: boolean;
-  id?: string;
-  onChange?: (
-    event: React.ChangeEvent<Record<string, unknown>>,
-    expanded: boolean,
-    id?: string
-  ) => void;
-  summaryContent: ReactNode;
-  detailsContent: ReactNode;
-};
 
-const Accordion = ({
+export const Accordion = ({
   compact,
-  id,
-  onChange,
-  summaryContent,
-  detailsContent,
+  children,
   ...props
-}: Props): ReactElement => {
+}: StyledAccordionProps): ReactElement => {
   return (
-    <StyledAccordion
-      square
-      elevation={0}
-      compact={compact}
-      {...props}
-      onChange={(event, expanded) => {
-        onChange?.(event, expanded, id);
-      }}>
-      <AccordionSummary
-        expandIcon={<FixedIcon type="chevronDown" />}
-        aria-controls="panel1a-content"
-        id="panel1a-header">
-        {summaryContent}
-      </AccordionSummary>
-      <AccordionDetails>{detailsContent}</AccordionDetails>
+    <StyledAccordion square elevation={0} compact={compact} {...props}>
+      {children}
     </StyledAccordion>
   );
 };
 
-export default Accordion;
+export const AccordionSummary = ({
+  children,
+  ...props
+}: AccordionSummaryMUIProps): ReactElement => {
+  return (
+    <StyledAccordionSummary
+      expandIcon={<FixedIcon type="chevronDown" />}
+      {...props}>
+      {children}
+    </StyledAccordionSummary>
+  );
+};
+
+export { default as AccordionActions } from '@material-ui/core/AccordionActions';
+export { default as AccordionDetails } from '@material-ui/core/AccordionDetails';

src/dataDisplay/index.ts

@@ -1,5 +1,5 @@
 export { default as Card } from './Card';
-export { default as Accordion } from './Accordion';
+export * from './Accordion';
 export { default as Divider } from './Divider';
 export { default as Dot } from './Dot';
 export { default as FixedIcon } from './FixedIcon';