feat: new accordion variant (#1941)

* feat: new icon

* feat: new accordion variant

* feat: new chevron right filled icon

* fix: linter issue

src/components/designSystem/Accordion.tsx

@@ -1,7 +1,6 @@
 import { AccordionDetails, AccordionSummary, Accordion as MuiAccordion } from '@mui/material'
 import { TransitionProps } from '@mui/material/transitions'
-import { useState } from 'react'
-import { ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
 
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { NAV_HEIGHT, theme } from '~/styles'
@@ -17,39 +16,59 @@ enum AccordionSizeEnum {
 
 type AccordionSize = keyof typeof AccordionSizeEnum
 
-interface AccordionProps {
+interface AccordionBaseProps {
   id?: string
   className?: string
   summary: ReactNode
   children: ReactNode | ((args: { isOpen: boolean }) => ReactNode)
   initiallyOpen?: boolean
-  size?: AccordionSize
-  noContentMargin?: boolean
   transitionProps?: TransitionProps
   onOpen?: () => void
 }
 
+interface AccordionCardProps extends AccordionBaseProps {
+  variant?: 'card'
+  size?: AccordionSize
+  noContentMargin?: boolean
+}
+
+interface AccordionBorderlessProps extends AccordionBaseProps {
+  variant?: 'borderless'
+  size?: never
+  noContentMargin?: never
+}
+
+type AccordionProps = AccordionCardProps | AccordionBorderlessProps
+
 export const Accordion = ({
   id,
   className,
   summary,
   children,
   initiallyOpen = false,
-  size = AccordionSizeEnum.medium,
+  size: localSize,
   noContentMargin = false,
   transitionProps = {},
+  variant = 'card',
   onOpen,
   ...props
 }: AccordionProps) => {
   const [isOpen, setIsOpen] = useState(initiallyOpen)
   const { translate } = useInternationalization()
 
+  const size = localSize ?? (variant === 'card' ? 'medium' : undefined)
+
   return (
     <MuiAccordion
       square
       id={id}
       expanded={isOpen}
-      className={tw('border border-solid border-grey-400', className)}
+      className={tw(
+        {
+          'border border-solid border-grey-400': variant === 'card',
+        },
+        className,
+      )}
       onChange={(_, expanded) => {
         setIsOpen(expanded)
 
@@ -59,13 +78,33 @@ export const Accordion = ({
       {...props}
     >
       <AccordionSummary
-        className={tw('h-23 rounded-xl', {
-          'h-18': size === AccordionSizeEnum.medium,
-        })}
+        className={tw(
+          {
+            'h-23': size === AccordionSizeEnum.large,
+            'h-18': size === AccordionSizeEnum.medium,
+          },
+          variant === 'card' && (isOpen ? 'rounded-t-xl' : 'rounded-xl'),
+          {
+            'hover:bg-grey-100 active:bg-grey-200': variant === 'card',
+            'h-auto focus:rounded-lg': variant === 'borderless',
+          },
+          'focus:bg-inherit focus-visible:ring focus-visible:hover:bg-grey-100',
+        )}
         sx={{
           '& .MuiAccordionSummary-content': {
-            height: size === AccordionSizeEnum.medium ? NAV_HEIGHT : 92,
-            padding: size === AccordionSizeEnum.medium ? theme.spacing(4) : theme.spacing(8),
+            padding:
+              size === AccordionSizeEnum.medium
+                ? theme.spacing(4)
+                : size === AccordionSizeEnum.large
+                  ? theme.spacing(8)
+                  : undefined,
+            alignItems: variant === 'borderless' ? 'baseline' : 'center',
+            height:
+              size === AccordionSizeEnum.medium
+                ? NAV_HEIGHT
+                : size === AccordionSizeEnum.large
+                  ? 92
+                  : undefined,
           },
         }}
       >
@@ -81,15 +120,28 @@ export const Accordion = ({
             data-test="open-charge"
             variant="quaternary"
             size="small"
-            icon={isOpen ? 'chevron-down' : 'chevron-right'}
+            icon={
+              variant === 'card'
+                ? isOpen
+                  ? 'chevron-down'
+                  : 'chevron-right'
+                : variant === 'borderless'
+                  ? isOpen
+                    ? 'chevron-down-filled'
+                    : 'chevron-right-filled'
+                  : undefined
+            }
           />
         </Tooltip>
         {summary}
       </AccordionSummary>
       <AccordionDetails
-        className={tw('flex flex-col p-8 shadow-t', {
-          '!p-0': noContentMargin,
+        className={tw('flex flex-col', {
+          'shadow-t': variant === 'card',
+          'mt-6': variant === 'borderless',
           'p-4': size === AccordionSizeEnum.medium,
+          'p-8': size === AccordionSizeEnum.large,
+          'p-0': noContentMargin,
         })}
       >
         {typeof children === 'function' ? children({ isOpen }) : children}

src/components/designSystem/Icon/mapping.tsx

@@ -18,6 +18,7 @@ import Burger from '~/public/icons/burger.svg'
 import Calendar from '~/public/icons/calendar.svg'
 import ChartBar from '~/public/icons/chart-bar.svg'
 import Checkmark from '~/public/icons/checkmark.svg'
+import ChevronDownFilled from '~/public/icons/chevron-down-filled.svg'
 import ChevronDown from '~/public/icons/chevron-down.svg'
 import ChevronLeft from '~/public/icons/chevron-left.svg'
 import ChevronRightFilled from '~/public/icons/chevron-right-filled.svg'
@@ -138,6 +139,7 @@ export const ALL_ICONS = {
   'chart-bar': ChartBar,
   checkmark: Checkmark,
   'chevron-down': ChevronDown,
+  'chevron-down-filled': ChevronDownFilled,
   'chevron-left': ChevronLeft,
   'chevron-right': ChevronRight,
   'chevron-right-filled': ChevronRightFilled,

src/pages/__devOnly/DesignSystem.tsx

@@ -163,6 +163,19 @@ const DesignSystem = () => {
                   <Accordion size="large" summary="large accordion">
                     <Typography variant="body">Content of the accordion</Typography>
                   </Accordion>
+                  <Accordion
+                    variant="borderless"
+                    summary={
+                      <div>
+                        <Typography variant="subhead" className="mb-2">
+                          borderless accordion
+                        </Typography>
+                        <Typography variant="caption">Caption</Typography>
+                      </div>
+                    }
+                  >
+                    <Typography variant="body">Content of the accordion</Typography>
+                  </Accordion>
                 </Stack>
 
                 <GroupTitle variant="headline">Alert</GroupTitle>

src/styles/muiTheme.ts

@@ -416,6 +416,7 @@ export const theme = createTheme({
           },
           '&.Mui-expanded': {
             margin: '0',
+            minHeight: 'auto',
           },
           '&.MuiPaper-elevation1': {
             boxShadow: 'none',
@@ -429,30 +430,9 @@ export const theme = createTheme({
           overflow: 'inherit',
           minHeight: 'auto',
           padding: '0',
-          '&:hover': {
-            backgroundColor: palette.grey[100],
-          },
-          '&:active': {
-            backgroundColor: palette.grey[200],
-          },
+
           '&.Mui-expanded': {
             minHeight: 'auto',
-            borderRadius: '12px 12px 0 0',
-          },
-          '&.Mui-focused': {
-            '&.Mui-expanded': {
-              minHeight: 'auto',
-            },
-            backgroundColor: 'transparent',
-            boxShadow: `0px 0px 0px 4px ${palette.primary[200]} !important`,
-            borderRadius: '12px',
-          },
-          '&.Mui-focusVisible': {
-            backgroundColor: 'inherit',
-            boxShadow: `0px 0px 0px 4px ${palette.primary[200]}`,
-            '&:hover': {
-              backgroundColor: palette.grey[100],
-            },
           },
         },
         content: {