Add expand button to Callouts list.

src/core/ui/list/LinksList.tsx

@@ -1,10 +1,18 @@
-import React, { FC, ReactNode } from 'react';
+import React, { FC, ReactNode, useState } from 'react';
 import { styled } from '@mui/styles';
-import { List as MuiList, ListItem as MuiListItem, ListItemIcon as MuiListItemIcon, Skeleton } from '@mui/material';
+import {
+  Box,
+  Collapse,
+  List as MuiList,
+  ListItem as MuiListItem,
+  ListItemIcon as MuiListItemIcon,
+  Skeleton,
+} from '@mui/material';
 import { BlockSectionTitle, CaptionSmall } from '../typography';
 import RouterLink from '../link/RouterLink';
 import { gutters } from '../grid/utils';
 import { times } from 'lodash';
+import CardExpandButton from '../card/CardExpandButton';
 
 const List = styled(MuiList)(() => ({ padding: 0 }));
 
@@ -33,21 +41,51 @@ export interface LinksListProps {
   loading?: boolean;
 }
 
+const COLLAPSED_LIST_ITEM_LIMIT = 5;
+
 const LinksList: FC<LinksListProps> = ({ items = [], emptyListCaption, loading = false }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
   return (
     <List>
       {loading && times(3, i => <ListItem key={i} component={Skeleton} />)}
       {!loading && items.length === 0 && emptyListCaption && <CaptionSmall>{emptyListCaption}</CaptionSmall>}
       {!loading &&
         items.length > 0 &&
-        items.map(item => (
+        items.slice(0, COLLAPSED_LIST_ITEM_LIMIT).map(item => (
           <ListItem key={item.id} component={RouterLink} to={item.uri}>
             <ListItemIcon>{item.icon}</ListItemIcon>
             <BlockSectionTitle minWidth={0} noWrap>
               {item.title}
             </BlockSectionTitle>
           </ListItem>
         ))}
+      {!loading && items.length > COLLAPSED_LIST_ITEM_LIMIT && (
+        <Collapse in={isExpanded}>
+          {items.slice(COLLAPSED_LIST_ITEM_LIMIT).map(item => (
+            <ListItem key={item.id} component={RouterLink} to={item.uri}>
+              <ListItemIcon>{item.icon}</ListItemIcon>
+              <BlockSectionTitle minWidth={0} noWrap>
+                {item.title}
+              </BlockSectionTitle>
+            </ListItem>
+          ))}
+        </Collapse>
+      )}
+      <Box
+        flexGrow={1}
+        display="flex"
+        justifyContent="end"
+        paddingX={1.5}
+        sx={{ cursor: 'pointer' }}
+        onClick={handleExpand}
+      >
+        {!loading && items.length > COLLAPSED_LIST_ITEM_LIMIT && <CardExpandButton expanded={isExpanded} />}
+      </Box>
     </List>
   );
 };