feat: Added card description component to card.

Author: dlabaj

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

@@ -0,0 +1,23 @@
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Card/card';
+
+export interface CardDescriptionProps {
+  /** Content rendered inside the description. */
+  children?: React.ReactNode;
+  /** Additional classes added to the description. */
+  className?: string;
+  /** Id of the description. */
+  id?: string;
+}
+
+export const CardDescription: React.FunctionComponent<CardDescriptionProps> = ({
+  children = null,
+  className = '',
+  id = '',
+  ...props
+}: ModalBoxDescriptionProps) => (
+  <div {...props} id={id} className={css(styles.cardDescription, className)}>
+    {children}
+  </div>
+);
+CardDescription.displayName = 'CardDescription';

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

@@ -9,6 +9,7 @@ propComponents:
     'CardHeaderActionsObject',
     'CardHeaderSelectableActionsObject',
     'CardTitle',
+    'CardDescription',
     'CardBody',
     'CardFooter',
     'CardExpandableContent'
@@ -26,7 +27,7 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 ### Basic cards
 
-Basic cards typically have a `<CardTitle>`, `<CardBody>` and `<CardFooter>`. You may omit these components as needed, but it is recommended to at least include a `<CardBody>` to provide details about the card item.
+Basic cards typically have a `<CardTitle>`, `<CardDescription>`, `<CardBody>` and `<CardFooter>`. You may omit these components as needed, but it is recommended to at least include a `<CardBody>` to provide details about the card item.
 
 ```ts file='./CardBasic.tsx'
 

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

@@ -1,8 +1,9 @@
-import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+import { Card, CardTitle, CardDescription, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardBasic: React.FunctionComponent = () => (
   <Card ouiaId="BasicCard">
     <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
     <CardBody>Body</CardBody>
     <CardFooter>Footer</CardFooter>
   </Card>