chore(Card): convert examples to TypeScript/functional components

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

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

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardActions,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  CardExpandableContent,
+  Checkbox,
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core';
+
+export const CardExpandable: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
+  const [isToggleRightAligned, setIsToggleRightAligned] = React.useState<boolean>(false);
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onClick = (checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const onExpand = (event: React.MouseEvent, id: string) => {
+    // eslint-disable-next-line no-console
+    console.log(id);
+    setIsExpanded(!isExpanded);
+  };
+
+  const onRightAlign = () => {
+    setIsToggleRightAligned(!isToggleRightAligned);
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
+
+  return (
+    <React.Fragment>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          id={'isToggleRightAligned-1'}
+          key={'isToggleRightAligned'}
+          label={'isToggleRightAligned'}
+          isChecked={isToggleRightAligned}
+          onChange={onRightAlign}
+        />
+      </div>
+      <Card id="expandable-card" isExpanded={isExpanded}>
+        <CardHeader
+          onExpand={onExpand}
+          isToggleRightAligned={isToggleRightAligned}
+          toggleButtonProps={{
+            id: 'toggle-button1',
+            'aria-label': 'Details',
+            'aria-labelledby': 'expandable-card-title toggle-button1',
+            'aria-expanded': isExpanded
+          }}
+        >
+          <CardActions>
+            <Dropdown
+              onSelect={onSelect}
+              toggle={<KebabToggle onToggle={setIsOpen} />}
+              isOpen={isOpen}
+              isPlain
+              dropdownItems={dropdownItems}
+              position={'right'}
+            />
+            <Checkbox
+              isChecked={isChecked}
+              onChange={onClick}
+              aria-label="card checkbox example"
+              id="check-4"
+              name="check4"
+            />
+          </CardActions>
+          <CardTitle id="expandable-card-title">Header</CardTitle>
+        </CardHeader>
+        <CardExpandableContent>
+          <CardBody>Body</CardBody>
+          <CardFooter>Footer</CardFooter>
+        </CardExpandableContent>
+      </Card>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardActions,
+  CardBody,
+  CardFooter,
+  CardExpandableContent,
+  Checkbox,
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core';
+import pfLogoSmall from './pf-logo-small.svg';
+
+export const CardExpandableWithIcon: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onClick = (checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const onExpand = (event: React.MouseEvent, id: string) => {
+    // eslint-disable-next-line no-console
+    console.log(id);
+    setIsExpanded(!isExpanded);
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
+
+  return (
+    <Card id="expandable-card-icon" isExpanded={isExpanded}>
+      <CardHeader
+        onExpand={onExpand}
+        toggleButtonProps={{
+          id: 'toggle-button2',
+          'aria-label': 'Patternfly Details',
+          'aria-expanded': isExpanded
+        }}
+      >
+        <img src={pfLogoSmall} alt="PatternFly logo" width="27px" />
+        <CardActions>
+          <Dropdown
+            onSelect={onSelect}
+            toggle={<KebabToggle onToggle={setIsOpen} />}
+            isOpen={isOpen}
+            isPlain
+            dropdownItems={dropdownItems}
+            position={'right'}
+          />
+          <Checkbox
+            isChecked={isChecked}
+            onChange={onClick}
+            aria-label="card checkbox example"
+            id="check-5"
+            name="check5"
+          />
+        </CardActions>
+      </CardHeader>
+      <CardExpandableContent>
+        <CardBody>Body</CardBody>
+        <CardFooter>Footer</CardFooter>
+      </CardExpandableContent>
+    </Card>
+  );
+};

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardActions,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  Checkbox,
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core';
+
+export const CardTitleInHeader: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+  const onClick = (checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardActions>
+          <Dropdown
+            onSelect={onSelect}
+            toggle={<KebabToggle onToggle={setIsOpen} />}
+            isOpen={isOpen}
+            isPlain
+            dropdownItems={dropdownItems}
+            position={'right'}
+          />
+          <Checkbox
+            isChecked={isChecked}
+            onChange={onClick}
+            aria-label="card checkbox example"
+            id="check-2"
+            name="check2"
+          />
+        </CardActions>
+        <CardTitle>
+          This is a really really really really really really really really really really long header
+        </CardTitle>
+      </CardHeader>
+      <CardBody>Body</CardBody>
+      <CardFooter>Footer</CardFooter>
+    </Card>
+  );
+};

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardActions,
+  CardTitle,
+  CardBody,
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core';
+
+export const CardLegacySelectable: React.FunctionComponent = () => {
+  const [selected, setSelected] = React.useState<string>('');
+  const [isKebabOpen, setIsKebabOpen] = React.useState<boolean>(false);
+
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    if ([13, 32].includes(event.keyCode)) {
+      event.preventDefault();
+      const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+      setSelected(newSelected);
+    }
+  };
+
+  const onClick = (event: React.MouseEvent) => {
+    const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+    setSelected(newSelected);
+  };
+
+  const onToggle = (isOpen: boolean, event: any) => {
+    event.stopPropagation();
+    setIsKebabOpen(isOpen);
+  };
+
+  const onSelect = (event: React.SyntheticEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    setIsKebabOpen(!isKebabOpen);
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
+
+  return (
+    <>
+      <Card
+        id="legacy-first-card"
+        onKeyDown={onKeyDown}
+        onClick={onClick}
+        isSelectable
+        isSelected={selected === 'legacy-first-card'}
+      >
+        <CardHeader>
+          <CardActions>
+            <Dropdown
+              onSelect={onSelect}
+              toggle={<KebabToggle onToggle={onToggle} />}
+              isOpen={isKebabOpen}
+              isPlain
+              dropdownItems={dropdownItems}
+              position={'right'}
+            />
+          </CardActions>
+        </CardHeader>
+        <CardTitle>First card</CardTitle>
+        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
+      </Card>
+      <br />
+      <Card
+        id="legacy-second-card"
+        onKeyDown={onKeyDown}
+        onClick={onClick}
+        isSelectable
+        isSelected={selected === 'legacy-second-card'}
+      >
+        <CardTitle>Second card</CardTitle>
+        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
+      </Card>
+    </>
+  );
+};