feat(Card): Refactor card header

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

@@ -64,9 +64,9 @@ export const CardContext = React.createContext<Partial<CardContextProps>>({
 });
 
 export const Card: React.FunctionComponent<CardProps> = ({
-  children = null,
+  children,
   id = '',
-  className = '',
+  className,
   component = 'div',
   isCompact = false,
   isSelectable = false,

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

@@ -3,17 +3,17 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 
 export interface CardActionsProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the Card Action */
+  /** Content rendered inside the card action */
   children?: React.ReactNode;
-  /** Additional classes added to the Action */
+  /** Additional classes added to the action */
   className?: string;
   /** Flag indicating that the actions have no offset */
   hasNoOffset?: boolean;
 }
 
 export const CardActions: React.FunctionComponent<CardActionsProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   hasNoOffset = false,
   ...props
 }: CardActionsProps) => (

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

@@ -14,8 +14,8 @@ export interface CardBodyProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardBody: React.FunctionComponent<CardBodyProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   component = 'div',
   isFilled = true,
   ...props

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

@@ -11,8 +11,8 @@ export interface CardExpandableContentProps extends React.HTMLProps<HTMLDivEleme
 }
 
 export const CardExpandableContent: React.FunctionComponent<CardExpandableContentProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   ...props
 }: CardExpandableContentProps) => (
   <CardContext.Consumer>

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

@@ -12,8 +12,8 @@ export interface CardFooterProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardFooter: React.FunctionComponent<CardFooterProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   component = 'div',
   ...props
 }: CardFooterProps) => {

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

@@ -2,14 +2,27 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { CardContext } from './Card';
+import { CardHeaderMain } from './CardHeaderMain';
+import { CardActions } from './CardActions';
 import { Button } from '../Button';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
+export interface CardHeaderActionsObject {
+  /** Actions of the card header */
+  actions: React.ReactNode;
+  /** Flag indicating that the actions have no offset */
+  hasNoOffset?: boolean;
+  /** Additional classes added to the actions wrapper */
+  className?: string;
+}
+
 export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the CardHeader */
+  /** Content rendered inside the card header */
   children?: React.ReactNode;
-  /** Additional classes added to the CardHeader */
+  /** Additional classes added to the card header */
   className?: string;
+  /** Actions of the card header */
+  actions?: CardHeaderActionsObject;
   /** ID of the card header. */
   id?: string;
   /** Callback expandable card */
@@ -21,8 +34,9 @@ export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
+  actions,
   id,
   onExpand,
   toggleButtonProps,
@@ -36,7 +50,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           <Button
             variant="plain"
             type="button"
-            onClick={evt => {
+            onClick={(evt) => {
               onExpand(evt, cardId);
             }}
             {...toggleButtonProps}
@@ -55,7 +69,8 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           {...props}
         >
           {onExpand && !isToggleRightAligned && cardHeaderToggle}
-          {children}
+          {actions && <CardActions className={actions?.className} hasNoOffset={actions?.hasNoOffset}> {actions.actions} </CardActions>}
+          {children && <CardHeaderMain>{children}</CardHeaderMain>}
           {onExpand && isToggleRightAligned && cardHeaderToggle}
         </div>
       );

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

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Card/card';
 
 export interface CardHeaderMainProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Card Head Main */
@@ -8,11 +10,11 @@ export interface CardHeaderMainProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardHeaderMain: React.FunctionComponent<CardHeaderMainProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   ...props
 }: CardHeaderMainProps) => (
-  <div className={className} {...props}>
+  <div className={css(styles.cardHeaderMain ,className)} {...props}>
     {children}
   </div>
 );

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

@@ -13,8 +13,8 @@ export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   component = 'div',
   ...props
 }: CardTitleProps) => {

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

@@ -7,4 +7,9 @@ describe('CardHeader', () => {
     const { asFragment } = render(<CardHeader onExpand={jest.fn()} />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('actions are rendered', () => {
+    const { asFragment } = render(<CardHeader actions="test" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`CardHeader actions are rendered 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-card__header"
+  >
+    <div
+      class="pf-c-card__actions"
+    >
+
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`CardHeader onExpand adds the toggle button 1`] = `
 <DocumentFragment>
   <div

packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CardHeaderMain renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class=""
+    class="pf-c-card__header-main"
   >
     text
   </div>

packages/react-core/src/components/Card/examples/Card.md

@@ -2,7 +2,7 @@
 id: Card
 section: components
 cssPrefix: pf-c-card
-propComponents: ['Card', 'CardActions', 'CardHeader', 'CardHeaderMain', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent']
+propComponents: ['Card', 'CardHeader', 'CardHeaderActionsObject', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent']
 ouia: true
 ---
 
@@ -40,11 +40,11 @@ Most modifiers can be used in combination with each other, except for `isCompact
 
 ### Header images and actions
 
-You can include header images within `<CardHeaderMain>` and header actions within `<CardActions>`. The following example includes an image using the [Brand](/components/brand) component, and also includes a kebab dropdown and a checkbox in `<CardActions>`.
+You can include header actions with the `actions` property of `<CardHeader>` . The following example includes an image using the [Brand](/components/brand) component, and also includes a kebab dropdown and a checkbox in `<CardHeader>` actions.
 
-`<CardActions>` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with `<CardActions>`. 
+The `actions` property for `<CardHeader>` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with card actions. 
 
-You may use `hasNoOffset` to remove this negative margin, which better aligns `<CardActions>` in implementations that use large card titles or tall header images, for example. 
+You may use `hasNoOffset` to remove this negative margin, which better aligns card actions in implementations that use large card titles or tall header images, for example. 
 
 Select the "actions hasNoOffset" checkbox in the example below to illustrate this behavior.
 
@@ -60,9 +60,9 @@ Moving `<CardTitle>` within the `<CardHeader>` will style it inline with any ima
 
 ### Card header without title
 
-`<CardActions>` can be placed in the card header even without a `<CardTitle>`.
+Card actions can be placed in the card header even without a `<CardTitle>`.
 
-Images can also be placed in the card header within `<CardHeaderMain>` without a `<CardTitle>`.
+Images can also be placed in the card header without a `<CardTitle>`.
 
 ```ts file='./CardOnlyActionsInCardHead.tsx'
 ```

packages/react-core/src/components/Card/examples/CardBasic.tsx

@@ -3,7 +3,7 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardBasic: React.FunctionComponent = () => (
   <Card>
-    <CardTitle>Header</CardTitle>
+    <CardTitle>Title</CardTitle>
     <CardBody>Body</CardBody>
     <CardFooter>Footer</CardFooter>
   </Card>

packages/react-core/src/components/Card/examples/CardExpandable.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   CardFooter,
@@ -56,6 +55,26 @@ export const CardExpandable: React.FunctionComponent = () => {
     </DropdownItem>
   ];
 
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
+        isOpen={isOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-4"
+        name="check4"
+      />
+    </>
+  );
+
   return (
     <React.Fragment>
       <div style={{ marginBottom: '12px' }}>
@@ -69,6 +88,7 @@ export const CardExpandable: React.FunctionComponent = () => {
       </div>
       <Card id="expandable-card" isExpanded={isExpanded}>
         <CardHeader
+          actions={{actions: headerActions}}
           onExpand={onExpand}
           isToggleRightAligned={isToggleRightAligned}
           toggleButtonProps={{
@@ -78,24 +98,7 @@ export const CardExpandable: React.FunctionComponent = () => {
             'aria-expanded': isExpanded
           }}
         >
-          <CardActions>
-            <Dropdown
-              onSelect={onSelect}
-              toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
-              isOpen={isOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              position={'right'}
-            />
-            <Checkbox
-              isChecked={isChecked}
-              onChange={(_event, checked) => onClick(checked)}
-              aria-label="card checkbox example"
-              id="check-4"
-              name="check4"
-            />
-          </CardActions>
-          <CardTitle id="expandable-card-title">Header</CardTitle>
+          <CardTitle id="expandable-card-title">Title</CardTitle>
         </CardHeader>
         <CardExpandableContent>
           <CardBody>Body</CardBody>