From d3b4b41e7480a1fa7dc35dc83141996eda5ff40b Mon Sep 17 00:00:00 2001
From: fernandomg <fernando.greco@gmail.com>
Date: Wed, 6 Jan 2021 17:05:48 -0300
Subject: [PATCH 1/2] refactor Accordion component

- Export a composable API (with `AccordionSummary`, `AccordionDetails` and `AccordionActions`)
- preserve the overridden styles and setup
- allow to use the MUI element's props
---
 .../Accordion/accordion.stories.tsx           | 80 ++++++++++-------
 src/dataDisplay/Accordion/index.tsx           | 85 +++++++++----------
 src/dataDisplay/index.ts                      |  2 +-
 3 files changed, 89 insertions(+), 78 deletions(-)

diff --git a/src/dataDisplay/Accordion/accordion.stories.tsx b/src/dataDisplay/Accordion/accordion.stories.tsx
index 71663c8d..d4b69ce7 100644
--- a/src/dataDisplay/Accordion/accordion.stories.tsx
+++ b/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>
 );
diff --git a/src/dataDisplay/Accordion/index.tsx b/src/dataDisplay/Accordion/index.tsx
index 45ba9738..9597bde7 100644
--- a/src/dataDisplay/Accordion/index.tsx
+++ b/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,29 @@ export const StyledAccordion = styled(AccordionMUI)<AccordionProps>`
     &.Mui-expanded {
       margin: ${({ compact }) => (compact ? '0 0 16px 0' : '0')};
     }
+
+    & .MuiAccordionSummary-root {
+      &.Mui-expanded {
+        margin-bottom: ${({ compact }) => (compact ? '16px' : '0')};
+      }
+
+      &:hover {
+        border-radius: ${({ compact }) => (compact ? '8px' : '0')};
+      }
+    }
   }
 `;
-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 +69,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';
diff --git a/src/dataDisplay/index.ts b/src/dataDisplay/index.ts
index bb6afd7c..5a38ec43 100644
--- a/src/dataDisplay/index.ts
+++ b/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';

From 8801d6739fd876a9fbff690347477da45c8d40e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 7 Jan 2021 14:39:25 -0300
Subject: [PATCH 2/2] delete boder-radius on hover and fix paddings

---
 src/dataDisplay/Accordion/index.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/dataDisplay/Accordion/index.tsx b/src/dataDisplay/Accordion/index.tsx
index 9597bde7..8dc64ec2 100644
--- a/src/dataDisplay/Accordion/index.tsx
+++ b/src/dataDisplay/Accordion/index.tsx
@@ -34,14 +34,8 @@ const StyledAccordion = styled(AccordionMUI)<StyledAccordionProps>`
       margin: ${({ compact }) => (compact ? '0 0 16px 0' : '0')};
     }
 
-    & .MuiAccordionSummary-root {
-      &.Mui-expanded {
-        margin-bottom: ${({ compact }) => (compact ? '16px' : '0')};
-      }
-
-      &:hover {
-        border-radius: ${({ compact }) => (compact ? '8px' : '0')};
-      }
+    .MuiAccordionDetails-root {
+      padding: 16px;
     }
   }
 `;