Accordion component

package.json

@@ -27,7 +27,7 @@
     "react-media": "^1.10.0"
   },
   "devDependencies": {
-    "@material-ui/core": "^4.11.0",
+    "@material-ui/core": "^4.11.2",
     "@storybook/addon-actions": "^6.1.0",
     "@storybook/addon-docs": "^6.1.0",
     "@storybook/addon-links": "^6.1.0",

src/dataDisplay/Accordion/accordion.stories.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+
+import Accordion from './index';
+import { Card, Text, IconText } from '../../index';
+
+export default {
+  title: 'Data Display/Accordion',
+  component: Accordion,
+  parameters: {
+    componentSubtitle: 'Expansion panels with Summary and Detail content.',
+  },
+};
+
+export const SimpleAccordion = (): React.ReactElement => (
+  <Card>
+    <Accordion
+      summaryContent={
+        <IconText
+          iconSize="sm"
+          textSize="xl"
+          iconType="code"
+          text="Transaction 1"
+        />
+      }
+      detailsContent={
+        <Text size="lg">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          malesuada lacus ex, sit amet blandit leo lobortis eget.
+        </Text>
+      }
+    />
+    <Accordion
+      summaryContent={
+        <IconText
+          iconSize="sm"
+          textSize="xl"
+          iconType="code"
+          text="Transaction 2"
+        />
+      }
+      detailsContent={
+        <Text size="lg">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          malesuada lacus ex, sit amet blandit leo lobortis eget.
+        </Text>
+      }
+    />
+    <Accordion
+      summaryContent={
+        <IconText
+          iconSize="sm"
+          textSize="xl"
+          iconType="code"
+          text="Transaction 3"
+        />
+      }
+      detailsContent={
+        <Text size="lg">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          malesuada lacus ex, sit amet blandit leo lobortis eget.
+        </Text>
+      }
+    />
+  </Card>
+);
+
+export const CompactAccordion = (): React.ReactElement => (
+  <div
+    style={{
+      display: 'flex',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexDirection: 'column',
+    }}>
+    <Accordion
+      compact
+      summaryContent={
+        <IconText
+          iconSize="sm"
+          textSize="xl"
+          iconType="code"
+          text="Transaction 1"
+        />
+      }
+      detailsContent={
+        <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={
+        <IconText
+          iconSize="sm"
+          textSize="xl"
+          iconType="code"
+          text="Transaction 2"
+        />
+      }
+      detailsContent={
+        <Text size="lg">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          malesuada lacus ex, sit amet blandit leo lobortis eget.
+        </Text>
+      }
+    />
+  </div>
+);

src/dataDisplay/Accordion/index.tsx

@@ -0,0 +1,101 @@
+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 styled from 'styled-components';
+
+import FixedIcon from '../FixedIcon';
+
+type AccordionProps = {
+  compact?: boolean;
+};
+
+export const StyledAccordion = styled(AccordionMUI)<AccordionProps>`
+  &.MuiAccordion-root {
+    border-radius: ${({ compact }) => (compact ? '8px' : '0')};
+    border: ${({ compact, theme }) =>
+      compact ? '2px solid ' + theme.colors.separator : 'none'};
+    border-bottom: 2px solid ${({ theme }) => theme.colors.separator};
+    margin-bottom: ${({ compact }) => (compact ? '16px' : '0')};
+    overflow: hidden;
+
+    &:before {
+      height: 0;
+    }
+
+    &:first-child {
+      border-top: 2px solid ${({ theme }) => theme.colors.separator};
+    }
+
+    &.Mui-expanded {
+      margin: ${({ compact }) => (compact ? '0 0 16px 0' : '0')};
+    }
+  }
+`;
+export const AccordionSummary = styled(AccordionSummaryMUI)<AccordionProps>`
+  &.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 {
+      &.Mui-expanded {
+        margin: 0;
+      }
+    }
+    .MuiIconButton-root {
+      font-size: 0;
+    }
+  }
+`;
+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 = ({
+  compact,
+  id,
+  onChange,
+  summaryContent,
+  detailsContent,
+  ...props
+}: Props): 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>
+  );
+};
+
+export default Accordion;

src/dataDisplay/index.ts

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

yarn.lock

@@ -1172,7 +1172,7 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
-"@material-ui/core@^4.11.0":
+"@material-ui/core@^4.11.2":
   version "4.11.2"
   resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.2.tgz#f8276dfa40d88304e6ceb98962af73803d27d42d"
   integrity sha512-/D1+AQQeYX/WhT/FUk78UCRj8ch/RCglsQLYujYTIqPSJlwZHKcvHidNeVhODXeApojeXjkl0tWdk5C9ofwOkQ==
@@ -1190,6 +1190,13 @@
     react-is "^16.8.0 || ^17.0.0"
     react-transition-group "^4.4.0"
 
+"@material-ui/icons@^4.11.2":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
+  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
 "@material-ui/styles@^4.11.2":
   version "4.11.2"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb"