New DS core component: accordion

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Not released
 
+- New DS core component: accordion [#632](https://github.com/CartoDB/carto-react/pull/632)
 - Storybook documentation and fixes [#629](https://github.com/CartoDB/carto-react/pull/629)
 - Note component cleaned styles from makeStyles [#630](https://github.com/CartoDB/carto-react/pull/630)
 - OpacityControl component migrated from makeStyles to styled-components + cleanup [#631](https://github.com/CartoDB/carto-react/pull/631)

packages/react-ui/src/components/molecules/AccordionGroup.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const AccordionContainer = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'variant'
+})(({ variant, theme }) => ({
+  width: '100%',
+  borderRadius: theme.spacing(0.5),
+
+  ...(variant === 'outlined' && {
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`
+  })
+}));
+
+const AccordionGroup = ({ variant, items, ...otherProps }) => {
+  return (
+    <AccordionContainer {...otherProps} variant={variant}>
+      {items.map((item, index) => (
+        <Accordion
+          key={index}
+          disabled={item.disabled}
+          defaultExpanded={item.defaultExpanded}
+          onChange={item.onChange}
+        >
+          <AccordionSummary aria-controls={`${index}-content`} id={`${index}-header`}>
+            {item.summary}
+          </AccordionSummary>
+          <AccordionDetails>{item.content}</AccordionDetails>
+        </Accordion>
+      ))}
+    </AccordionContainer>
+  );
+};
+
+AccordionGroup.defaultProps = {
+  variant: 'standard'
+};
+AccordionGroup.propTypes = {
+  variant: PropTypes.oneOf(['standard' | 'outlined']),
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      summary: PropTypes.string.isRequired,
+      content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
+      disabled: PropTypes.boolean,
+      defaultExpanded: PropTypes.boolean,
+      onChange: PropTypes.func
+    })
+  ).isRequired
+};
+
+export default AccordionGroup;

packages/react-ui/src/index.d.ts

@@ -38,7 +38,8 @@ import {
   ICON_SIZE_SMALL,
   ICON_SIZE_MEDIUM,
   ICON_SIZE_LARGE
-} from './theme/themeconstants';
+} from './theme/themeConstants';
+import AccordionGroup from './components/molecules/AccordionGroup';
 
 export {
   theme,
@@ -80,5 +81,6 @@ export {
   Avatar,
   ICON_SIZE_SMALL,
   ICON_SIZE_MEDIUM,
-  ICON_SIZE_LARGE
+  ICON_SIZE_LARGE,
+  AccordionGroup
 };

packages/react-ui/src/index.js

@@ -40,6 +40,7 @@ import {
   ICON_SIZE_MEDIUM,
   ICON_SIZE_LARGE
 } from './theme/themeConstants';
+import AccordionGroup from './components/molecules/AccordionGroup';
 
 const featureSelectionIcons = {
   CursorIcon,
@@ -87,5 +88,6 @@ export {
   Avatar,
   ICON_SIZE_SMALL,
   ICON_SIZE_MEDIUM,
-  ICON_SIZE_LARGE
+  ICON_SIZE_LARGE,
+  AccordionGroup
 };

packages/react-ui/src/theme/sections/components/surfaces.js

@@ -1,7 +1,10 @@
+import React from 'react';
 import { getSpacing } from '../../themeUtils';
 import { APPBAR_SIZE } from '../../themeConstants';
 import { commonPalette } from '../palette';
 import { themeShadows } from '../shadows';
+import { ExpandMoreOutlined } from '@mui/icons-material';
+import { themeTypography } from '../typography';
 
 export const surfacesOverrides = {
   // AppBar
@@ -34,5 +37,63 @@ export const surfacesOverrides = {
         }
       }
     }
+  },
+
+  // MuiAccordion
+  MuiAccordion: {
+    defaultProps: {
+      disableGutters: true,
+      elevation: 0
+    },
+    styleOverrides: {
+      root: {
+        ...themeTypography.body2,
+        backgroundColor: 'transparent',
+        boxShadow: `inset 0 -1px 0 0 ${commonPalette.divider}`,
+
+        '&:last-of-type': {
+          boxShadow: 'none'
+        },
+        '&::before': {
+          content: 'none'
+        },
+        '&.Mui-disabled': {
+          backgroundColor: 'transparent'
+        }
+      }
+    }
+  },
+  // MuiAccordionSummary
+  MuiAccordionSummary: {
+    defaultProps: {
+      expandIcon: <ExpandMoreOutlined />
+    },
+    styleOverrides: {
+      root: {
+        ...themeTypography.button,
+
+        '&.Mui-disabled': {
+          opacity: 1,
+          color: commonPalette.text.disabled
+        }
+      },
+      expandIconWrapper: {
+        '& svg': {
+          color: commonPalette.text.secondary,
+
+          '.Mui-disabled &': {
+            color: commonPalette.text.disabled
+          }
+        }
+      }
+    }
+  },
+  // MuiAccordionDetails
+  MuiAccordionDetails: {
+    styleOverrides: {
+      root: {
+        paddingBottom: getSpacing(3)
+      }
+    }
   }
 };

packages/react-ui/src/types.d.ts

@@ -330,3 +330,17 @@ export type LabelWithIndicatorProps = {
 export interface AvatarProps extends MuiAvatarProps {
   size?: 'large' | 'medium' | 'small' | 'xsmall';
 }
+
+// AccordionGroup
+export type AccordionGroupProps = {
+  variant?: 'standard' | 'outlined';
+  items: [
+    {
+      summary: string;
+      content: string | React.ReactElement;
+      disabled?: boolean;
+      defaultExpanded?: boolean;
+      onChange?: Function;
+    }
+  ];
+};