Added clickable and selectable example

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

@@ -109,22 +109,42 @@ A common use case of this is to set all but one body section to `isFilled={false
 
 ### Clickable cards
 
+A card can perform an action or navigate to an external link by clicking anywhere within the card.
+
+When a card is meant to be clickable only, you must avoid rendering any other interactive content within the `<Card>`.
+
 ```ts file='./CardClickable.tsx'
 
 ```
 
 ### Selectable cards
 
+A card can also be selected by clicking anywhere within the card.
+
+Similar to clickable only cards, you must avoid rendering any other interactive content within the `<Card>` when it is meant to be selectable only. Refer to our [clickable and selectable example](#clickable-and-selectable-cards) if you need a card that is both selectable and has other interactive content.
+
 ```ts file='./CardSelectable.tsx'
 
 ```
 
-### Single Selectable cards
+### Single selectable cards
+
+When a group of single selectable cards are related, you should pass the same `name` property to each card's `selectableActions` property.
 
 ```ts file='./CardSingleSelectable.tsx'
 
 ```
 
+### Clickable and selectable cards
+
+A card can be selectable and have additional interactive content by passing both the `isClickable` and `isSelectable` properties to `<Card>`. The following example shows how the "clickable" functionality can be rendered anywhere within a selectable card.
+
+When passing interactive content to a clickable and selectable card that is disabled, you should also ensure the interactive content is disabled as well, if applicable.
+
+```ts file='./CardClickableSelectable.tsx'
+
+```
+
 ### Legacy selectable cards
 
 The following example shows a legacy implementation of selectable cards. This example uses the `isSelectable` property instead of `isSelectableRaised`, which is the current recommendation for implementation. `isSelectable` applies selectable styling, but does not apply raised styling on hover and selection as `isSelectableRaised` does.

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Card, CardHeader, CardTitle, CardBody, Button } from '@patternfly/react-core';
+
+export const CardClickable: React.FunctionComponent = () => {
+  const [isChecked1, setIsChecked1] = React.useState(false);
+  const [isChecked2, setIsChecked2] = React.useState(false);
+  const [isChecked3, setIsChecked3] = React.useState(false);
+  const [isSelected1, setIsSelected1] = React.useState(false);
+
+  const id1 = 'clickable-selectable-card-input-1';
+  const id2 = 'clickable-selectable-card-input-2';
+  const id3 = 'clickable-selectable-card-input-3';
+
+  const onClick = () => {
+    setIsSelected1((prevState) => !prevState);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    const name = event.currentTarget.name;
+
+    switch (name) {
+      case id1:
+        setIsChecked1(checked);
+        break;
+      case id2:
+        setIsChecked2(checked);
+        break;
+      case id3:
+        setIsChecked3(checked);
+        break;
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <Card id="clickable-selectable-card-example-1" isClickable isSelectable isSelected={isSelected1}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'clickable-selectable-card-example-1',
+            name: id1,
+            isChecked: isChecked1,
+            onChange
+          }}
+        />
+        <CardTitle>
+          <Button variant="link" isInline onClick={onClick}>
+            First card
+          </Button>
+        </CardTitle>
+        <CardBody>This card performs an action upon clicking the card title and is selectable.</CardBody>
+      </Card>
+      <Card id="clickable-selectable-card-example-2" isClickable isSelectable>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'clickable-selectable-card-example-2',
+            name: id2,
+            isChecked: isChecked2,
+            onChange
+          }}
+        />
+        <CardTitle>Second Card</CardTitle>
+        <CardBody>
+          This card is selectable and has a link in the card body that navigates to
+          <Button variant="link" isInline component="a" href="https://www.patternfly.org/">
+            Patternfly
+          </Button>
+          .
+        </CardBody>
+      </Card>
+      <Card id="clickable-selectable-card-example-3" isClickable isSelectable isDisabled>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'clickable-selectable-card-example-3',
+            name: id3,
+            isChecked: isChecked3,
+            onChange
+          }}
+        />
+        <CardTitle>
+          <Button isDisabled variant="link" isInline component="a" href="https://www.patternfly.org/">
+            Third card
+          </Button>
+        </CardTitle>
+        <CardBody>This card is clickable and selectable, but disabled.</CardBody>
+      </Card>
+    </React.Fragment>
+  );
+};