feat(card): add hasHeaderWrap prop and test to support card header wrapping (#11663)

* feat(card): add hasHeaderWrap prop and test to support card header wrapping

* feat(card): use hasWrap to enable header elements to wrap and changes to tests

Author: sg00dwin

packages/react-core/src/components/Card/CardHeader.tsx

@@ -75,6 +75,8 @@ export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
   toggleButtonProps?: any;
   /** Whether to right-align expandable toggle button */
   isToggleRightAligned?: boolean;
+  /** Flag indicating that header wrapping is enabled */
+  hasWrap?: boolean;
 }
 
 export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
@@ -86,6 +88,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   onExpand,
   toggleButtonProps,
   isToggleRightAligned,
+  hasWrap,
   ...props
 }: CardHeaderProps) => (
   <GenerateId>
@@ -177,7 +180,12 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
 
           return (
             <div
-              className={css(styles.cardHeader, isToggleRightAligned && styles.modifiers.toggleRight, className)}
+              className={css(
+                styles.cardHeader,
+                isToggleRightAligned && styles.modifiers.toggleRight,
+                hasWrap && styles.modifiers.wrap,
+                className
+              )}
               id={id}
               {...props}
             >

packages/react-core/src/components/Card/__tests__/CardHeader.test.tsx

@@ -1,4 +1,6 @@
 import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Card/card';
+import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { CardHeader } from '../CardHeader';
 import { CardContext } from '../Card';
@@ -13,6 +15,18 @@ describe('CardHeader', () => {
     const { asFragment } = render(<CardHeader actions="test" />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test(`Should render CardHeader without ${styles.modifiers.wrap} by default`, () => {
+    render(<CardHeader data-testid="card-header" />);
+
+    expect(screen.getByTestId('card-header')).not.toHaveClass(styles.modifiers.wrap);
+  });
+
+  test(`Should render CardHeader with ${styles.modifiers.wrap} class when hasWrap is true`, () => {
+    render(<CardHeader data-testid="card-header-will-wrap" hasWrap />);
+
+    expect(screen.getByTestId('card-header-will-wrap')).toHaveClass(styles.modifiers.wrap);
+  });
 });
 
 // TODO: check if hasNoOffset for actions/selectableActions and className for selectableActions render