Merge pull request #981 from logonoff/onexpand

feat(multicontentcard): add callback passing to onExpand

Author: kmcfaul

packages/module/src/MultiContentCard/MultiContentCard.test.tsx

@@ -1,5 +1,5 @@
 import type { Ref } from 'react';
-import { screen, render } from '@testing-library/react';
+import { screen, render, act } from '@testing-library/react';
 import { Button, Card, CardHeader, CardBody, Content, ContentVariants, Icon, List, ListItem, CardFooter, Dropdown, MenuToggle, DropdownList, DropdownItem, MenuToggleElement } from '@patternfly/react-core';
 import { ArrowRightIcon, BellIcon, CogIcon, EllipsisVIcon, LockIcon } from '@patternfly/react-icons';
 import MultiContentCard, { MultiContentCardDividerVariant } from './MultiContentCard';
@@ -126,6 +126,29 @@ describe('MultiContentCard component', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  it('should call onExpand when expanding the multi-content card', () => {
+    const onExpand = jest.fn();
+
+    render(
+      <MultiContentCard
+        isExpandable
+        defaultExpanded={false}
+        toggleText='Expandable card toggle text'
+        cards={cards}
+        onExpand={onExpand}
+      />
+    );
+    expect(screen.queryByText('Getting Started')).toBe(null);
+
+    act(() => {
+      screen.getByRole('button', { name: 'Details' }).click();
+    });
+
+    expect(onExpand).toHaveBeenCalled();
+
+    expect(screen.getByText('Getting Started')).toBeInTheDocument();
+  });
+
   it('should render expandable multi-content card - with actions', () => {
     const { container } = render(
       <MultiContentCard

packages/module/src/MultiContentCard/MultiContentCard.tsx

@@ -40,6 +40,8 @@ export interface MultiContentCardProps extends Omit<CardProps, 'children' | 'tit
   withDividers?: boolean;
   /** Indicates whether the card is expandable */
   isExpandable?: boolean;
+  /** Callback expandable card */
+  onExpand?: () => void;
   /** Indicates whether the card is expanded by default */
   defaultExpanded?: boolean;
   /** Indicates whether the actions toggle is right aligned */
@@ -67,13 +69,15 @@ const MultiContentCard: FunctionComponent<MultiContentCardProps> = ({
   withDividers = false,
   isExpandable = false,
   defaultExpanded = true,
+  onExpand,
   ouiaId = 'MultiContentCard',
   ...props
 }: MultiContentCardProps) => {
   const [ isExpanded, setIsExpanded ] = useState(defaultExpanded);
   const classes = useStyles();
-  const onExpand = () => {
+  const onExpandChange = () => {
     setIsExpanded(!isExpanded);
+    onExpand && onExpand();
   };
 
   const renderCards = (cards: (ReactElement | MutliContentCardProps)[], withDividers?: boolean) =>  (
@@ -105,7 +109,7 @@ const MultiContentCard: FunctionComponent<MultiContentCardProps> = ({
       {isExpandable && (
         <CardHeader
           data-ouia-component-id={`${ouiaId}-header`}
-          onExpand={onExpand}
+          onExpand={onExpandChange}
           isToggleRightAligned={isToggleRightAligned}
           toggleButtonProps={{
             'aria-label': 'Details',