From 267e05e44ac7da385c90ee28e5c5aec32e2862c3 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Tue, 31 Oct 2023 17:04:14 -0400
Subject: [PATCH] chore(PrimaryDetail): convert demos to TS

---
 .../react-core/src/demos/PrimaryDetail.md     | 978 +-----------------
 .../PrimaryDetail/PrimaryDetailCardView.tsx   | 659 ++++++++++++
 .../PrimaryDetailDataListInCard.tsx           | 207 ++++
 .../PrimaryDetailSimpleListInCard.tsx         | 116 +++
 4 files changed, 985 insertions(+), 975 deletions(-)
 create mode 100644 packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
 create mode 100644 packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx
 create mode 100644 packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx

diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
index 732b5c4e3f0..2746dd3bb86 100644
--- a/packages/react-core/src/demos/PrimaryDetail.md
+++ b/packages/react-core/src/demos/PrimaryDetail.md
@@ -40,989 +40,17 @@ import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardVie
 
 ### Primary-detail card view
 
-```js isFullscreen
-import React from 'react';
-import {
-  Button,
-  Card,
-  CardHeader,
-  CardBody,
-  CardTitle,
-  Divider,
-  Drawer,
-  DrawerActions,
-  DrawerPanelBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerHead,
-  DrawerPanelContent,
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  Flex,
-  FlexItem,
-  Gallery,
-  MenuToggle,
-  MenuToggleCheckbox,
-  PageSection,
-  PageSectionVariants,
-  Pagination,
-  Progress,
-  TextContent,
-  Text,
-  Title,
-  Toolbar,
-  ToolbarItem,
-  ToolbarContent
-} from '@patternfly/react-core';
-import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
-import pfIcon from './assets/pf-logo-small.svg';
-import activeMQIcon from './assets/activemq-core_200x150.png';
-import avroIcon from './assets/camel-avro_200x150.png';
-import dropBoxIcon from './assets/camel-dropbox_200x150.png';
-import infinispanIcon from './assets/camel-infinispan_200x150.png';
-import saxonIcon from './assets/camel-saxon_200x150.png';
-import sparkIcon from './assets/camel-spark_200x150.png';
-import swaggerIcon from './assets/camel-swagger-java_200x150.png';
-import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
-import restIcon from './assets/FuseConnector_Icons_REST.png';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
-import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
-
-class PrimaryDetailCardView extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      page: 1,
-      perPage: 10,
-      totalItemCount: 10,
-      isDrawerExpanded: false,
-      isChecked: false,
-      selectedItems: [],
-      areAllSelected: false,
-      splitButtonDropdownIsOpen: false,
-      activeCard: null,
-      filters: {
-        products: []
-      },
-      cardData: data,
-      isUpperToolbarDropdownOpen: false,
-      isUpperToolbarKebabDropdownOpen: false,
-      isLowerToolbarDropdownOpen: false,
-      isLowerToolbarKebabDropdownOpen: false,
-      isCardKebabDropdownOpen: false,
-      activeItem: 0
-    };
-
-    this.onToolbarDropdownToggle = (_event, isLowerToolbarDropdownOpen) => {
-      this.setState((prevState) => ({
-        isLowerToolbarDropdownOpen
-      }));
-    };
-
-    this.onToolbarDropdownSelect = (_event) => {
-      this.setState({
-        isLowerToolbarDropdownOpen: !this.state.isLowerToolbarDropdownOpen
-      });
-    };
-
-    this.onToolbarKebabDropdownToggle = () => {
-      this.setState((prevState) => ({
-        isLowerToolbarKebabDropdownOpen: !prevState.isLowerToolbarKebabDropdownOpen
-      }));
-    };
-
-    this.onToolbarKebabDropdownSelect = () => {
-      this.setState({
-        isLowerToolbarKebabDropdownOpen: false
-      });
-    };
-
-    this.checkAllSelected = (selected, total) => {
-      if (selected && selected < total) {
-        return null;
-      }
-      return selected === total;
-    };
-
-    this.onNameSelect = (event, selection) => {
-      const checked = event.target.checked;
-      this.setState((prevState) => {
-        const prevSelections = prevState.filters.products;
-        return {
-          filters: {
-            ...prevState.filters,
-            ['products']: checked
-              ? [...prevSelections, selection]
-              : prevSelections.filter((value) => value !== selection)
-          }
-        };
-      });
-    };
-
-    this.onDelete = (type = '', id = '') => {
-      if (type) {
-        this.setState((prevState) => {
-          prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter((s) => s !== id);
-          return {
-            filters: prevState.filters
-          };
-        });
-      } else {
-        this.setState({
-          filters: {
-            products: []
-          }
-        });
-      }
-    };
-
-    this.onCloseDrawerClick = () => {
-      this.setState({
-        activeCard: null,
-        isDrawerExpanded: false
-      });
-    };
-
-    this.onCheckboxClick = (event, productId) => {
-      this.setState((prevState) =>
-        prevState.selectedItems.includes(productId * 1) || this.state.selectedItems.includes(productId * 1)
-          ? {
-              selectedItems: [...this.state.selectedItems.filter((id) => productId * 1 !== id)],
-              areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
-            }
-          : {
-              selectedItems: [...prevState.selectedItems, productId * 1],
-              areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount)
-            }
-      );
-    };
-
-    this.onClick = (productId) => {
-      this.setState((prevState) =>
-        prevState.selectedItems.includes(productId * 1)
-          ? {
-              selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 !== id)],
-              areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
-            }
-          : {
-              selectedItems: [...prevState.selectedItems, productId * 1],
-              areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount)
-            }
-      );
-    };
-
-    this.onCardClick = (productId) => {
-
-      if (productId === this.state.activeCard) {
-        this.setState({
-          isDrawerExpanded: !this.state.isDrawerExpanded,
-          activeCard: null
-        });
-        return;
-      }
-
-      this.setState({
-        activeCard: productId,
-        isDrawerExpanded: true
-      });
-    };
-
-    this.onChange = (_event, labelledById) => {
-      if (labelledById === this.state.activeCard) {
-        return;
-      }
-
-      this.setState({
-        activeCard: labelledById,
-        isDrawerExpanded: true
-      });
-    };
-
-    this.onPerPageSelect = (_evt, perPage) => {
-      this.setState({ page: 1, perPage });
-    };
-
-    this.onSetPage = (_evt, page) => {
-      this.setState({ page });
-    };
-
-    this.selectPage = () => {
-      const { totalItemCount, perPage } = this.state;
-      let collection = [];
-
-      collection = this.getAllItems();
-
-      this.setState(
-        {
-          selectedItems: collection,
-          areAllSelected: totalItemCount === perPage ? true : false
-        },
-        this.updateSelected
-      );
-    };
-
-    this.selectAll = () => {
-      let collection = [];
-      for (let i = 0; i <= 9; i++) {
-        collection = [...collection, i];
-      }
-
-      this.setState(
-        {
-          selectedItems: collection,
-          isChecked: true,
-          areAllSelected: true
-        },
-        this.updateSelected
-      );
-    };
-
-    this.selectNone = () => {
-      this.setState(
-        {
-          selectedItems: [],
-          isChecked: false,
-          areAllSelected: false,
-          isDrawerExpanded: false,
-          activeCard: null
-        },
-        this.updateSelected
-      );
-    };
-
-    this.splitCheckboxSelectAll = (e) => {
-      const { checked } = e.target;
-      const { isChecked } = this.state;
-      let collection = [];
-
-      if (checked) {
-        for (let i = 0; i <= 9; i++) {
-          collection = [...collection, i];
-        }
-      }
-
-      this.setState(
-        {
-          selectedItems: collection,
-          areAllSelected: checked,
-          isDrawerExpanded: false,
-          activeCard: null,
-          isChecked
-        },
-        this.updateSelected
-      );
-    };
-
-    this.onSplitButtonSelect = () => {
-      this.setState(() => ({
-        splitButtonDropdownIsOpen: false,
-        isDrawerExpanded: false,
-        activeCard: null
-      }));
-    };
-
-    this.onSplitButtonToggle = () => {
-      this.setState((prevState) => ({
-        splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen
-      }));
-    };
-
-    this.onCardKebabDropdownToggle = (key) => {
-      this.setState((prevState) => ({
-        [key]: !prevState[key]
-      }));
-    };
-
-    this.onCardKebabDropdownSelect = (key) => {
-      this.setState({
-        [key]: false
-      });
-    };
-
-    this.deleteItem = (event, item) => {
-      const filter = (getter) => (val) => getter(val) !== item.id;
-      const filteredCards = this.state.cardData.filter(filter(({ id }) => id));
-      this.setState({
-        cardData: filteredCards,
-        selectedItems: this.state.selectedItems.filter(filter((id) => id)),
-        totalItemCount: this.state.totalItemCount - 1,
-        isDrawerExpanded: false,
-        activeCard: null
-      });
-    };
-  }
-
-  getAllItems() {
-    const { cardData } = this.state;
-    const collection = [];
-    for (const items of cardData) {
-      collection.push(items.id);
-    }
-
-    return collection;
-  }
-
-  buildSelectDropdown() {
-    const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state;
-    const numSelected = selectedItems.length;
-    const allSelected = areAllSelected;
-    const anySelected = numSelected > 0;
-    const someChecked = anySelected ? null : false;
-    const isChecked = allSelected ? true : someChecked;
-    const splitButtonDropdownItems = (
-      <>
-        <DropdownItem key="item-1" onClick={this.selectNone.bind(this)}>
-          Select none (0 items)
-        </DropdownItem>
-        <DropdownItem key="item-2" onClick={this.selectPage.bind(this)}>
-          Select page ({this.state.perPage} items)
-        </DropdownItem>
-        <DropdownItem key="item-3" onClick={this.selectAll.bind(this)}>
-          Select all ({this.state.totalItemCount} items)
-        </DropdownItem>
-      </>
-    );
-
-    return (
-      <Dropdown
-        onSelect={this.onSplitButtonSelect}
-        isOpen={splitButtonDropdownIsOpen}
-        onOpenChange={(isOpen) => this.setState({ splitButtonDropdownIsOpen: isOpen })}
-        toggle={(toggleRef) => (
-          <MenuToggle
-            ref={toggleRef}
-            isExpanded={splitButtonDropdownIsOpen}
-            onClick={this.onSplitButtonToggle}
-            aria-label="Select cards"
-            splitButtonOptions={{
-              items: [
-                <MenuToggleCheckbox
-                  id="split-dropdown-checkbox"
-                  key="split-dropdown-checkbox"
-                  aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
-                  isChecked={areAllSelected}
-                  onClick={this.splitCheckboxSelectAll.bind(this)}
-                >
-                  {numSelected !== 0 && `${numSelected} selected`}
-                </MenuToggleCheckbox>
-              ]
-            }}
-          ></MenuToggle>
-        )}
-      >
-        <DropdownList>{splitButtonDropdownItems}</DropdownList>
-      </Dropdown>
-    );
-  }
-
-  render() {
-    const {
-      isDrawerExpanded,
-      isChecked,
-      selectedItems,
-      activeCard,
-      isLowerToolbarKebabDropdownOpen,
-      filters,
-      cardData
-    } = this.state;
-
-    const toolbarKebabDropdownItems = (
-      <>
-        <DropdownItem value={0} key="action">
-          Action
-        </DropdownItem>
-        <DropdownItem
-          value={1}
-          key="link"
-          to="#default-link2"
-          // Prevent the default onClick functionality for example purposes
-          onClick={(ev) => ev.preventDefault()}
-        >
-          Link
-        </DropdownItem>
-        <DropdownItem value={2} isDisabled key="disabled action">
-          Disabled Action
-        </DropdownItem>
-        <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
-          Disabled Link
-        </DropdownItem>
-        <Divider component="li" key="separator" />
-        <DropdownItem value={4} key="separated action">
-          Separated Action
-        </DropdownItem>
-        <DropdownItem value={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
-          Separated Link
-        </DropdownItem>
-      </>
-    );
-    const toolbarItems = (
-      <React.Fragment>
-        <ToolbarItem>{this.buildSelectDropdown()}</ToolbarItem>
-        <ToolbarItem>
-          <Button variant="primary">Create instance</Button>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Button variant="secondary">Action</Button>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Dropdown
-            onSelect={this.onToolbarKebabDropdownSelect}
-            isOpen={isLowerToolbarKebabDropdownOpen}
-            onOpenChange={(isOpen) => this.setState({ isLowerToolbarKebabDropdownOpen: isOpen })}
-            toggle={(toggleRef) => (
-              <MenuToggle
-                ref={toggleRef}
-                isExpanded={isLowerToolbarKebabDropdownOpen}
-                variant="plain"
-                onClick={this.onToolbarKebabDropdownToggle}
-                aria-label="Toolbar actions"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
-            )}
-          >
-            <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
-          </Dropdown>
-        </ToolbarItem>
-      </React.Fragment>
-    );
-
-    const filtered =
-      filters.products.length > 0
-        ? cardData.filter((card) => filters.products.length === 0 || filters.products.includes(card.name))
-        : cardData;
-
-    const icons = {
-      pfIcon,
-      activeMQIcon,
-      sparkIcon,
-      avroIcon,
-      azureIcon,
-      saxonIcon,
-      dropBoxIcon,
-      infinispanIcon,
-      restIcon,
-      swaggerIcon
-    };
-
-    const drawerContent = (
-      <Gallery hasGutter role="region" aria-label="Selectable card container">
-        {filtered.map((product, key) => (
-          <Card
-            key={product.name}
-            id={'card-view-' + key}
-            isClickable
-            isSelectable
-            isSelected={activeCard === product.id}
-          >
-            <CardHeader
-              actions={{
-                actions: (
-                  <>
-                    <Dropdown
-                      onSelect={() => this.onCardKebabDropdownSelect(key)}
-                      isOpen={this.state[key] || false}
-                      onOpenChange={(isOpen) => this.setState({ [key]: isOpen })}
-                      popperProps={{ position: 'right' }}
-                      toggle={(toggleRef) => (
-                        <MenuToggle
-                          ref={toggleRef}
-                          isExpanded={this.state[key] || false}
-                          aria-label={`${product.name} actions`}
-                          variant="plain"
-                          onClick={() => this.onCardKebabDropdownToggle(key)}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
-                      )}
-                    >
-                      <DropdownList>
-                        <DropdownItem key="trash" onClick={(e) => this.deleteItem(e, product)}>
-                          <TrashIcon />
-                          Delete
-                        </DropdownItem>
-                      </DropdownList>
-                    </Dropdown>
-                  </>
-                )
-              }}
-              selectableActions={{ isChecked: selectedItems.includes(product.id), selectableActionId: `selectable-actions-item-${product.id}`, selectableActionAriaLabelledby: `${'card-view-' + key}`, name: `check-${product.id}`, onChange: () => this.onClick(product.id) }}
-            >
-              <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
-            </CardHeader>
-            <CardTitle>
-              <Button variant="link" isInline onClick={() => this.onCardClick(product.id)} aria-expanded={activeCard === product.id}>
-                {product.name}
-              </Button>
-            </CardTitle>
-            <CardBody>{product.description}</CardBody>
-          </Card>
-        ))}
-      </Gallery>
-    );
-
-    const panelContent = (
-      <DrawerPanelContent>
-        <DrawerHead>
-          <Title headingLevel="h2" size="xl">
-            node-{activeCard}
-          </Title>
-          <DrawerActions>
-            <DrawerCloseButton onClick={this.onCloseDrawerClick} />
-          </DrawerActions>
-        </DrawerHead>
-        <DrawerPanelBody>
-          <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
-            <FlexItem>
-              <p>
-                The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
-                labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here,
-                and can also make the drawer scrollable.
-              </p>
-            </FlexItem>
-            <FlexItem>
-              <Progress value={activeCard * 10} title="Title" />
-            </FlexItem>
-            <FlexItem>
-              <Progress value={activeCard * 5} title="Title" />
-            </FlexItem>
-          </Flex>
-        </DrawerPanelBody>
-      </DrawerPanelContent>
-    );
-
-    return (
-      <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
-        <PageSection variant={PageSectionVariants.light}>
-          <TextContent>
-            <Text component="h1">Projects</Text>
-            <Text component="p">This is a demo that showcases Patternfly Cards.</Text>
-          </TextContent>
-        </PageSection>
-        <PageSection isFilled padding={{ default: 'noPadding' }}>
-          <Toolbar id="card-view-data-toolbar-group-types" usePageInsets clearAllFilters={this.onDelete}>
-            <ToolbarContent>{toolbarItems}</ToolbarContent>
-          </Toolbar>
-          <Divider component="div" />
-        </PageSection>
-        <PageSection isFilled padding={{ default: 'noPadding' }}>
-          <Drawer isExpanded={isDrawerExpanded} className={'pf-m-inline-on-2xl'}>
-            <DrawerContent panelContent={panelContent} colorVariant="no-background">
-              <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
-            </DrawerContent>
-          </Drawer>
-        </PageSection>
-        <PageSection isFilled={false} sticky="bottom" padding={{ default: 'noPadding' }} variant="light">
-          <Pagination
-            itemCount={filtered.length}
-            page={this.state.page}
-            perPage={this.state.perPage}
-            onPerPageSelect={this.onPerPageSelect}
-            onSetPage={this.onSetPage}
-            variant="bottom"
-          />
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
+```js file="./examples/PrimaryDetail/PrimaryDetailCardView.tsx" isFullscreen
 ```
 
 ### Primary-detail simple list in card
 
-```js isFullscreen
-import React from 'react';
-import {
-  Card,
-  CardBody,
-  Divider,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerHead,
-  DrawerPanelBody,
-  DrawerPanelContent,
-  Flex,
-  FlexItem,
-  PageSection,
-  PageSectionVariants,
-  Progress,
-  SimpleList,
-  SimpleListGroup,
-  SimpleListItem,
-  Text,
-  TextContent,
-  TextInput,
-  Title
-} from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
-
-class PrimaryDetailSimpleListInCard extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      drawerPanelBodyContent: 1,
-      activeItem: 0,
-      isKebabDropdownOpen: false,
-      isDropdownOpen: false,
-      isExpanded: false
-    };
-
-    this.onSelectListItem = (listItem, listItemProps) => {
-      const id = listItemProps.id;
-      this.setState({
-        drawerPanelBodyContent: id.charAt(id.length - 1),
-        isExpanded: true
-      });
-    };
-
-    this.onClose = () => {
-      this.setState({
-        isExpanded: false
-      });
-    };
-  }
-
-  render() {
-    const { drawerPanelBodyContent, selectedListItemId, activeItem, isExpanded } = this.state;
-
-    const panelContent = (
-      <DrawerPanelContent widthOnXl={75}>
-        <DrawerHead>
-          <Title headingLevel="h2" size="xl">
-            {`List item ${drawerPanelBodyContent} details`}
-          </Title>
-          <DrawerActions>
-            <DrawerCloseButton onClick={this.onClose} />
-          </DrawerActions>
-        </DrawerHead>
-        <DrawerPanelBody>
-          <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
-            <FlexItem>
-              <p>
-                The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
-                labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here,
-                and can also make the drawer scrollable.
-              </p>
-            </FlexItem>
-            <FlexItem>
-              <Progress value={drawerPanelBodyContent * 10} title="Title" />
-            </FlexItem>
-            <FlexItem>
-              <Progress value={drawerPanelBodyContent * 5} title="Title" />
-            </FlexItem>
-          </Flex>
-        </DrawerPanelBody>
-      </DrawerPanelContent>
-    );
-
-    const drawerContent = (
-      <React.Fragment>
-        <SimpleList onSelect={this.onSelectListItem}>
-          <SimpleListGroup title="Section 1" id="simple-list-section-1">
-            <SimpleListItem key="item1" id="simple-list-item1" isCurrent>
-              List item 1
-            </SimpleListItem>
-            <SimpleListItem key="item2" id="simple-list-item2">
-              List item 2
-            </SimpleListItem>
-            <SimpleListItem key="item3" id="simple-list-item3">
-              List item 3
-            </SimpleListItem>
-            <SimpleListItem key="item4" id="simple-list-item4">
-              List item 4
-            </SimpleListItem>
-          </SimpleListGroup>
-          <SimpleListGroup title="Section 2" id="section-2">
-            <SimpleListItem key="item5" id="simple-list-item5">
-              List item 5
-            </SimpleListItem>
-            <SimpleListItem key="item6" id="simple-list-item6">
-              List item 6
-            </SimpleListItem>
-            <SimpleListItem key="item7" id="simple-list-item7">
-              List item 7
-            </SimpleListItem>
-            <SimpleListItem key="item8" id="simple-list-item8">
-              List item 8
-            </SimpleListItem>
-            <SimpleListItem key="item9" id="simple-list-item9">
-              List item 9
-            </SimpleListItem>
-          </SimpleListGroup>
-        </SimpleList>
-      </React.Fragment>
-    );
-
-    return (
-      <DashboardWrapper>
-        <PageSection variant={PageSectionVariants.light}>
-          <TextContent>
-            <Text component="h1">Main title</Text>
-            <Text component="p">
-              Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
-              of it’s relative line height of 1.5.
-            </Text>
-          </TextContent>
-        </PageSection>
-        <Divider component="div" />
-        <PageSection>
-          <Card>
-            <Drawer isStatic isExpanded={isExpanded}>
-              <DrawerContent panelContent={panelContent}>
-                <DrawerContentBody>{drawerContent}</DrawerContentBody>
-              </DrawerContent>
-            </Drawer>
-          </Card>
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
+```js file="./examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx" isFullscreen
 ```
 
 ### Primary-detail data list in card
 
-```js isFullscreen
-import React from 'react';
-import {
-  Card,
-  DataList,
-  DataListCell,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem,
-  Divider,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerHead,
-  DrawerPanelBody,
-  DrawerPanelContent,
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  Flex,
-  FlexItem,
-  MenuToggle,
-  PageSection,
-  PageSectionVariants,
-  Progress,
-  Text,
-  TextContent,
-  Title
-} from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
-
-class PrimaryDetailDataListInCard extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      drawerPanelBodyContent: 1,
-      activeItem: 0,
-      isKebabDropdownOpen: false,
-      isDropdownOpen: false,
-      selectedDataListItemId: 'dataListItem1',
-      isExpanded: false
-    };
-
-    this.onDropdownToggle = () => {
-      this.setState((prevState) => ({
-        isDropdownOpen: !prevState.isDropdownOpen
-      }));
-    };
-    this.onDropdownSelect = () => {
-      this.setState({
-        isDropdownOpen: false
-      });
-      this.onDropdownFocus();
-    };
-    this.onDropdownFocus = () => {
-      const element = document.getElementById('toggle-id');
-      element.focus();
-    };
-    this.onSelectDataListItem = (_event, id) => {
-      this.setState({
-        selectedDataListItemId: id,
-        drawerPanelBodyContent: id.charAt(id.length - 1),
-        isExpanded: true
-      });
-    };
-    this.onClose = () => {
-      this.setState({
-        isExpanded: false
-      });
-    };
-  }
-
-  render() {
-    const {
-      drawerPanelBodyContent,
-      selectedListItemId,
-      activeItem,
-      isDropdownOpen,
-      selectedDataListItemId,
-      isExpanded
-    } = this.state;
-
-    const panelContent = (
-      <DrawerPanelContent widthOn2Xl={75}>
-        <DrawerHead>
-          <Title size="lg" headingLevel="h2">
-            Patternfly-elements
-          </Title>
-          <DrawerActions>
-            <DrawerCloseButton onClick={this.onClose} />
-          </DrawerActions>
-        </DrawerHead>
-        <DrawerPanelBody>
-          <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
-            <FlexItem>
-              <p>
-                The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
-                labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here,
-                and can also make the drawer scrollable.
-              </p>
-            </FlexItem>
-            <FlexItem>
-              <Progress value={drawerPanelBodyContent * 10} title="Title" />
-            </FlexItem>
-            <FlexItem>
-              <Progress value={drawerPanelBodyContent * 5} title="Title" />
-            </FlexItem>
-          </Flex>
-        </DrawerPanelBody>
-      </DrawerPanelContent>
-    );
-
-    const drawerContent = (
-      <React.Fragment>
-        <Toolbar id="data-list-data-toolbar" usePageInsets>
-          <ToolbarContent>
-            <ToolbarItem>
-              <Dropdown
-                onSelect={this.onDropdownSelect}
-                isOpen={isDropdownOpen}
-                onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })}
-                toggle={(toggleRef) => (
-                  <MenuToggle ref={toggleRef} isExpanded={isDropdownOpen} onClick={this.onDropdownToggle}>
-                    Dropdown
-                  </MenuToggle>
-                )}
-              >
-                <DropdownList>
-                  <DropdownItem key="option1">Option 1</DropdownItem>
-                  <DropdownItem key="option2">Option 2</DropdownItem>
-                </DropdownList>
-              </Dropdown>
-            </ToolbarItem>
-          </ToolbarContent>
-        </Toolbar>
-        <DataList
-          aria-label="selectable data list example"
-          selectedDataListItemId={selectedDataListItemId}
-          onSelectDataListItem={this.onSelectDataListItem}
-        >
-          <DataListItem aria-label="data-list-item1-in-card" id="data-list-item1">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell>
-                    <div>Node 1</div>
-                    <a href="#">siemur/test-space</a>
-                  </DataListCell>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem aria-label="data-list-item2-in-card" id="data-list-item2">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell>
-                    <div>Node 2</div>
-                    <a href="#">siemur/test-space</a>
-                  </DataListCell>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem aria-label="data-list-item3-in-card" id="data-list-item3">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell>
-                    <div>Node 3</div>
-                    <a href="#">siemur/test-space</a>
-                  </DataListCell>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem aria-label="data-list-item4-in-card" id="data-list-item4">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell>
-                    <div>Node 4</div>
-                    <a href="#">siemur/test-space</a>
-                  </DataListCell>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem aria-label="data-list-item5-in-card" id="data-list-item5">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell>
-                    <div>Node 5</div>
-                    <a href="#">siemur/test-space</a>
-                  </DataListCell>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-        </DataList>
-      </React.Fragment>
-    );
-
-    return (
-      <DashboardWrapper>
-        <PageSection variant={PageSectionVariants.light}>
-          <TextContent>
-            <Text component="h1">Main title</Text>
-            <Text component="p">
-              Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
-              of it’s relative line height of 1.5.
-            </Text>
-          </TextContent>
-        </PageSection>
-        <Divider component="div" />
-        <PageSection>
-          <Card>
-            <Drawer isStatic isExpanded={isExpanded}>
-              <DrawerContent panelContent={panelContent}>
-                <DrawerContentBody>{drawerContent}</DrawerContentBody>
-              </DrawerContent>
-            </Drawer>
-          </Card>
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
+```js file="./examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx" isFullscreen
 ```
 
 ### Primary-detail inline modifier
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
new file mode 100644
index 00000000000..1bf60cf0904
--- /dev/null
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
@@ -0,0 +1,659 @@
+import React from 'react';
+import {
+  Badge,
+  Button,
+  Card,
+  CardHeader,
+  CardBody,
+  CardTitle,
+  Divider,
+  Drawer,
+  DrawerActions,
+  DrawerPanelBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerPanelContent,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Flex,
+  FlexItem,
+  Gallery,
+  MenuToggle,
+  MenuToggleCheckbox,
+  PageSection,
+  PageSectionVariants,
+  Pagination,
+  Progress,
+  Select,
+  SelectList,
+  SelectOption,
+  TextContent,
+  Text,
+  Title,
+  Toolbar,
+  ToolbarFilter,
+  ToolbarItem,
+  ToolbarContent,
+  MenuToggleElement
+} from '@patternfly/react-core';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import pfIcon from './assets/pf-logo-small.svg';
+import activeMQIcon from './assets/activemq-core_200x150.png';
+import avroIcon from './assets/camel-avro_200x150.png';
+import dropBoxIcon from './assets/camel-dropbox_200x150.png';
+import infinispanIcon from './assets/camel-infinispan_200x150.png';
+import saxonIcon from './assets/camel-saxon_200x150.png';
+import sparkIcon from './assets/camel-spark_200x150.png';
+import swaggerIcon from './assets/camel-swagger-java_200x150.png';
+import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
+import restIcon from './assets/FuseConnector_Icons_REST.png';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
+
+export const PrimaryDetailCardView: React.FunctionComponent = () => {
+  const [totalItemCount, setTotalItemCount] = React.useState(10);
+  const [cardData, setCardData] = React.useState(data);
+  const [isChecked, setIsChecked] = React.useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
+  const [areAllSelected, setAreAllSelected] = React.useState<boolean>(false);
+  const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = React.useState(false);
+  const [isLowerToolbarDropdownOpen, setIsLowerToolbarDropdownOpen] = React.useState(false);
+  const [isLowerToolbarKebabDropdownOpen, setIsLowerToolbarKebabDropdownOpen] = React.useState(false);
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(10);
+  const [filters, setFilters] = React.useState<Record<string, string[]>>({ products: [] });
+  const [state, setState] = React.useState({});
+  const [activeCard, setActiveCard] = React.useState(-1);
+
+  interface ProductType {
+    id: number;
+    name: string;
+    icon: string;
+    description: string;
+  }
+
+  const onToolbarDropdownToggle = () => {
+    setIsLowerToolbarDropdownOpen(!isLowerToolbarDropdownOpen);
+  };
+
+  const onToolbarKebabDropdownToggle = () => {
+    setIsLowerToolbarKebabDropdownOpen(!isLowerToolbarKebabDropdownOpen);
+  };
+
+  const onToolbarKebabDropdownSelect = () => {
+    setIsLowerToolbarKebabDropdownOpen(!isLowerToolbarKebabDropdownOpen);
+  };
+
+  const onCardKebabDropdownToggle = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<HTMLDivElement, MouseEvent>,
+    key: string
+  ) => {
+    setState({
+      [key]: !state[key as keyof Object]
+    });
+  };
+
+  const checkAllSelected = (selected: number, total: number) => {
+    if (selected && selected < total) {
+      return null;
+    }
+    return selected === total;
+  };
+
+  const onNameSelect = (event: any, selection = '') => {
+    const checked = event.target.checked;
+    const prevSelections = filters.products;
+
+    setFilters({
+      ...filters,
+      products: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection)
+    });
+  };
+
+  const onDelete = (type = '', _id = '') => {
+    if (type) {
+      setFilters(filters);
+    } else {
+      setFilters({ products: [] });
+    }
+  };
+
+  const deleteItem = (item: ProductType) => {
+    const filter = (getter) => (val) => getter(val) !== item.id;
+
+    setCardData(cardData.filter(filter(({ id }) => id)));
+
+    setSelectedItems(selectedItems.filter(filter((id) => id)));
+
+    setTotalItemCount(totalItemCount - 1);
+    setIsDrawerExpanded(false);
+    setActiveCard(-1);
+  };
+
+  const onSetPage = (_event: any, pageNumber: number) => {
+    setPage(pageNumber);
+  };
+
+  const onPerPageSelect = (_event: any, perPage: number) => {
+    setPerPage(perPage);
+    setPage(1);
+  };
+
+  const onSplitButtonToggle = () => {
+    setSplitButtonDropdownIsOpen(!splitButtonDropdownIsOpen);
+  };
+
+  const onSplitButtonSelect = () => {
+    setSplitButtonDropdownIsOpen(false);
+    setIsDrawerExpanded(false);
+    setActiveCard(-1);
+  };
+
+  const onCloseDrawerClick = () => {
+    setActiveCard(-1);
+    setIsDrawerExpanded(false);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const name = event.currentTarget.name;
+    const productId = Number(name.charAt(name.length - 1));
+
+    if (selectedItems.includes(productId * 1)) {
+      setSelectedItems(selectedItems.filter((id) => productId * 1 !== id));
+
+      const checkAll = checkAllSelected(selectedItems.length - 1, totalItemCount);
+      setAreAllSelected(!!checkAll);
+    } else {
+      setSelectedItems([...selectedItems, productId * 1]);
+      const checkAll = checkAllSelected(selectedItems.length + 1, totalItemCount);
+      setAreAllSelected(!!checkAll);
+    }
+  };
+
+  const onCardClick = (productId) => {
+    if (productId === activeCard) {
+      setIsDrawerExpanded(!isDrawerExpanded);
+      setActiveCard(-1);
+    } else {
+      setActiveCard(productId);
+      setIsDrawerExpanded(true);
+    }
+  };
+
+  const selectPage = (e: { target: { checked: any } }) => {
+    const { checked } = e.target;
+    let collection: number[] = [];
+
+    collection = getAllItems();
+
+    setSelectedItems(collection);
+    setIsChecked(checked);
+    setAreAllSelected(totalItemCount === perPage ? true : false);
+
+    updateSelected();
+  };
+
+  const selectAll = () => {
+    let collection: number[] = [];
+    for (let i = 0; i <= 9; i++) {
+      collection = [...collection, i];
+    }
+
+    setSelectedItems(collection);
+    setIsChecked(true);
+    setAreAllSelected(true);
+
+    updateSelected();
+  };
+
+  const selectNone = () => {
+    setSelectedItems([]);
+    setIsChecked(false);
+    setAreAllSelected(false);
+    setIsDrawerExpanded(false);
+    setActiveCard(-1);
+
+    updateSelected();
+  };
+
+  const updateSelected = () => {
+    const rows = cardData.map((post) => {
+      post.selected = selectedItems.includes(post.id);
+      return post;
+    });
+
+    setCardData(rows);
+  };
+
+  const getAllItems = () => {
+    const collection: number[] = [];
+    for (const items of cardData) {
+      collection.push(items.id);
+    }
+
+    return collection;
+  };
+
+  const splitCheckboxSelectAll = (e: any) => {
+    let collection: number[] = [];
+
+    if (e.target.checked) {
+      for (let i = 0; i <= 9; i++) {
+        collection = [...collection, i];
+      }
+    }
+
+    setSelectedItems(collection);
+    setIsChecked(isChecked);
+    setAreAllSelected(e.target.checked);
+    setIsDrawerExpanded(false);
+    setActiveCard(-1);
+
+    updateSelected();
+  };
+
+  const renderPagination = () => {
+    const defaultPerPageOptions = [
+      {
+        title: '1',
+        value: 1
+      },
+      {
+        title: '5',
+        value: 5
+      },
+      {
+        title: '10',
+        value: 10
+      }
+    ];
+
+    return (
+      <Pagination
+        itemCount={totalItemCount}
+        page={page}
+        perPage={perPage}
+        perPageOptions={defaultPerPageOptions}
+        onSetPage={onSetPage}
+        onPerPageSelect={onPerPageSelect}
+        variant="top"
+        isCompact
+      />
+    );
+  };
+
+  const buildSelectDropdown = () => {
+    const numSelected = selectedItems.length;
+    const anySelected = numSelected > 0;
+    const splitButtonDropdownItems = (
+      <>
+        <DropdownItem key="item-1" onClick={selectNone}>
+          Select none (0 items)
+        </DropdownItem>
+        <DropdownItem key="item-2" onClick={selectPage}>
+          Select page ({perPage} items)
+        </DropdownItem>
+        <DropdownItem key="item-3" onClick={selectAll}>
+          Select all ({totalItemCount} items)
+        </DropdownItem>
+      </>
+    );
+
+    return (
+      <Dropdown
+        onSelect={onSplitButtonSelect}
+        isOpen={splitButtonDropdownIsOpen}
+        onOpenChange={(isOpen) => setSplitButtonDropdownIsOpen(isOpen)}
+        toggle={(toggleRef) => (
+          <MenuToggle
+            ref={toggleRef}
+            isExpanded={splitButtonDropdownIsOpen}
+            onClick={onSplitButtonToggle}
+            aria-label="Select cards"
+            splitButtonOptions={{
+              items: [
+                <MenuToggleCheckbox
+                  id="split-dropdown-checkbox"
+                  key="split-dropdown-checkbox"
+                  aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
+                  isChecked={areAllSelected}
+                  onClick={splitCheckboxSelectAll.bind(this)}
+                >
+                  {numSelected !== 0 && `${numSelected} selected`}
+                </MenuToggleCheckbox>
+              ]
+            }}
+          ></MenuToggle>
+        )}
+      >
+        <DropdownList>{splitButtonDropdownItems}</DropdownList>
+      </Dropdown>
+    );
+  };
+
+  const buildFilterDropdown = () => {
+    const filterDropdownItems = (
+      <SelectList>
+        <SelectOption
+          hasCheckbox
+          key="patternfly"
+          value="PatternFly"
+          isSelected={filters.products.includes('PatternFly')}
+        >
+          PatternFly
+        </SelectOption>
+        <SelectOption hasCheckbox key="activemq" value="ActiveMQ" isSelected={filters.products.includes('ActiveMQ')}>
+          ActiveMQ
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="apachespark"
+          value="Apache Spark"
+          isSelected={filters.products.includes('Apache Spark')}
+        >
+          Apache Spark
+        </SelectOption>
+        <SelectOption hasCheckbox key="avro" value="Avro" isSelected={filters.products.includes('Avro')}>
+          Avro
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="azureservices"
+          value="Azure Services"
+          isSelected={filters.products.includes('Azure Services')}
+        >
+          Azure Services
+        </SelectOption>
+        <SelectOption hasCheckbox key="crypto" value="Crypto" isSelected={filters.products.includes('Crypto')}>
+          Crypto
+        </SelectOption>
+        <SelectOption hasCheckbox key="dropbox" value="DropBox" isSelected={filters.products.includes('DropBox')}>
+          DropBox
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="jbossdatagrid"
+          value="JBoss Data Grid"
+          isSelected={filters.products.includes('JBoss Data Grid')}
+        >
+          JBoss Data Grid
+        </SelectOption>
+        <SelectOption hasCheckbox key="rest" value="REST" isSelected={filters.products.includes('REST')}>
+          REST
+        </SelectOption>
+        <SelectOption hasCheckbox key="swagger" value="SWAGGER" isSelected={filters.products.includes('SWAGGER')}>
+          SWAGGER
+        </SelectOption>
+      </SelectList>
+    );
+
+    return (
+      <ToolbarFilter
+        categoryName="Products"
+        chips={filters.products}
+        deleteChip={(type, id) => onDelete(type as string, id as string)}
+      >
+        <Select
+          aria-label="Products"
+          role="menu"
+          toggle={(toggleRef) => (
+            <MenuToggle ref={toggleRef} onClick={onToolbarDropdownToggle} isExpanded={isLowerToolbarDropdownOpen}>
+              Filter by creator name
+              {filters.products.length > 0 && <Badge isRead>{filters.products.length}</Badge>}
+            </MenuToggle>
+          )}
+          onSelect={(event, selection) => onNameSelect(event, selection?.toString())}
+          onOpenChange={(isOpen) => {
+            setIsLowerToolbarDropdownOpen(isOpen);
+          }}
+          selected={filters.products}
+          isOpen={isLowerToolbarDropdownOpen}
+        >
+          {filterDropdownItems}
+        </Select>
+      </ToolbarFilter>
+    );
+  };
+
+  const toolbarKebabDropdownItems = (
+    <>
+      <DropdownItem value={0} key="action">
+        Action
+      </DropdownItem>
+      <DropdownItem
+        value={1}
+        key="link"
+        to="#default-link2"
+        // Prevent the default onClick functionality for example purposes
+        onClick={(ev) => ev.preventDefault()}
+      >
+        Link
+      </DropdownItem>
+      <DropdownItem value={2} isDisabled key="disabled action">
+        Disabled Action
+      </DropdownItem>
+      <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
+        Disabled Link
+      </DropdownItem>
+      <Divider component="li" key="separator" />
+      <DropdownItem value={4} key="separated action">
+        Separated Action
+      </DropdownItem>
+      <DropdownItem value={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+        Separated Link
+      </DropdownItem>
+    </>
+  );
+  const toolbarItems = (
+    <React.Fragment>
+      <ToolbarItem>{buildSelectDropdown()}</ToolbarItem>
+      <ToolbarItem>{buildFilterDropdown()}</ToolbarItem>
+      <ToolbarItem>
+        <Button variant="primary">Create instance</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Dropdown
+          onSelect={onToolbarKebabDropdownSelect}
+          isOpen={isLowerToolbarKebabDropdownOpen}
+          onOpenChange={(isOpen) => setIsLowerToolbarKebabDropdownOpen(isOpen)}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              isExpanded={isLowerToolbarKebabDropdownOpen}
+              variant="plain"
+              onClick={onToolbarKebabDropdownToggle}
+              aria-label="Toolbar actions"
+            >
+              <EllipsisVIcon aria-hidden="true" />
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
+        </Dropdown>
+      </ToolbarItem>
+      <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+        {renderPagination()}
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const filtered =
+    filters.products.length > 0
+      ? data.filter((card: { name: string }) => filters.products.length === 0 || filters.products.includes(card.name))
+      : cardData.slice((page - 1) * perPage, perPage === 1 ? page * perPage : page * perPage - 1);
+
+  const icons = {
+    pfIcon,
+    activeMQIcon,
+    sparkIcon,
+    avroIcon,
+    azureIcon,
+    saxonIcon,
+    dropBoxIcon,
+    infinispanIcon,
+    restIcon,
+    swaggerIcon
+  };
+
+  const drawerContent = (
+    <Gallery hasGutter role="region" aria-label="Selectable card container">
+      {filtered.map((product, key) => (
+        <Card
+          key={product.name}
+          id={'card-view-' + key}
+          isClickable
+          isSelectable
+          isSelected={activeCard === product.id}
+        >
+          <CardHeader
+            actions={{
+              actions: (
+                <>
+                  <Dropdown
+                    isOpen={!!state[key] ?? false}
+                    onOpenChange={(isOpen) => setState({ [key]: isOpen })}
+                    popperProps={{ position: 'right' }}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
+                        aria-label={`${product.name} actions`}
+                        variant="plain"
+                        onClick={(e) => {
+                          onCardKebabDropdownToggle(e, key.toString());
+                        }}
+                        isExpanded={!!state[key]}
+                      >
+                        <EllipsisVIcon />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>
+                      <DropdownItem
+                        key="trash"
+                        onClick={() => {
+                          deleteItem(product);
+                        }}
+                      >
+                        <TrashIcon />
+                        Delete
+                      </DropdownItem>
+                    </DropdownList>
+                  </Dropdown>
+                </>
+              )
+            }}
+            selectableActions={{
+              isChecked: selectedItems.includes(product.id),
+              selectableActionId: `selectable-actions-item-${product.id}`,
+              selectableActionAriaLabelledby: `${'card-view-' + key}`,
+              name: `check-${product.id}`,
+              onChange
+            }}
+          >
+            <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
+          </CardHeader>
+          <CardTitle>
+            <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
+              <FlexItem>
+                <Button
+                  variant="link"
+                  isInline
+                  onClick={() => onCardClick(product.id)}
+                  aria-expanded={activeCard === product.id}
+                >
+                  {product.name}
+                </Button>
+              </FlexItem>
+              <FlexItem>
+                <TextContent>
+                  <Text component="small" className="pf-v5-u-color-200 pf-v5-u-font-family-text">
+                    Provided by Red Hat
+                  </Text>
+                </TextContent>
+              </FlexItem>
+            </Flex>
+          </CardTitle>
+
+          <CardBody>{product.description}</CardBody>
+        </Card>
+      ))}
+    </Gallery>
+  );
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <Title headingLevel="h2" size="xl">
+          node-{activeCard}
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseDrawerClick} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
+          <FlexItem>
+            <p>
+              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
+              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and
+              can also make the drawer scrollable.
+            </p>
+          </FlexItem>
+          <FlexItem>
+            <Progress value={activeCard * 10} title="Title" />
+          </FlexItem>
+          <FlexItem>
+            <Progress value={activeCard * 5} title="Title" />
+          </FlexItem>
+        </Flex>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  return (
+    <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Text component="h1">Projects</Text>
+          <Text component="p">This is a demo that showcases Patternfly Cards.</Text>
+        </TextContent>
+      </PageSection>
+      <PageSection isFilled padding={{ default: 'noPadding' }}>
+        <Toolbar id="card-view-data-toolbar-group-types" usePageInsets clearAllFilters={onDelete}>
+          <ToolbarContent>{toolbarItems}</ToolbarContent>
+        </Toolbar>
+        <Divider component="div" />
+      </PageSection>
+      <PageSection isFilled padding={{ default: 'noPadding' }}>
+        <Drawer isExpanded={isDrawerExpanded} className={'pf-m-inline-on-2xl'}>
+          <DrawerContent panelContent={panelContent} colorVariant="no-background">
+            <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </PageSection>
+      <PageSection
+        isFilled={false}
+        stickyOnBreakpoint={{ default: 'bottom' }}
+        padding={{ default: 'noPadding' }}
+        variant="light"
+      >
+        <Pagination
+          itemCount={filtered.length}
+          page={page}
+          perPage={perPage}
+          onPerPageSelect={onPerPageSelect}
+          onSetPage={onSetPage}
+          variant="bottom"
+        />
+      </PageSection>
+    </DashboardWrapper>
+  );
+};
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx
new file mode 100644
index 00000000000..52e5a51696f
--- /dev/null
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx
@@ -0,0 +1,207 @@
+import React from 'react';
+import {
+  Card,
+  DataList,
+  DataListCell,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  Divider,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  PageSection,
+  PageSectionVariants,
+  Progress,
+  Text,
+  TextContent,
+  Title
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(1);
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('dataListItem1');
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(false);
+    onDropdownFocus();
+  };
+  const onDropdownFocus = () => {
+    const element = document.getElementById('toggle-id');
+    element?.focus();
+  };
+  const onSelectDataListItem = (_event, id) => {
+    setSelectedDataListItemId(id);
+    setDrawerPanelBodyContent(id.charAt(id.length - 1));
+    setIsExpanded(true);
+  };
+  const onClose = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent widths={{ '2xl': 'width_75' }}>
+      <DrawerHead>
+        <Title size="lg" headingLevel="h2">
+          Patternfly-elements
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onClose} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
+          <FlexItem>
+            <p>
+              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
+              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and
+              can also make the drawer scrollable.
+            </p>
+          </FlexItem>
+          <FlexItem>
+            <Progress value={drawerPanelBodyContent * 10} title="Title" />
+          </FlexItem>
+          <FlexItem>
+            <Progress value={drawerPanelBodyContent * 5} title="Title" />
+          </FlexItem>
+        </Flex>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent = (
+    <React.Fragment>
+      <Toolbar id="data-list-data-toolbar" usePageInsets>
+        <ToolbarContent>
+          <ToolbarItem>
+            <Dropdown
+              onSelect={onDropdownSelect}
+              isOpen={isDropdownOpen}
+              onOpenChange={(isOpen) => setIsDropdownOpen(isOpen)}
+              toggle={(toggleRef) => (
+                <MenuToggle ref={toggleRef} isExpanded={isDropdownOpen} onClick={onDropdownToggle}>
+                  Dropdown
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>
+                <DropdownItem key="option1">Option 1</DropdownItem>
+                <DropdownItem key="option2">Option 2</DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <DataList
+        aria-label="selectable data list example"
+        selectedDataListItemId={selectedDataListItemId}
+        onSelectDataListItem={onSelectDataListItem}
+      >
+        <DataListItem aria-label="data-list-item1-in-card" id="data-list-item1">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 1">
+                  <div>Node 1</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-label="data-list-item2-in-card" id="data-list-item2">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 2">
+                  <div>Node 2</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-label="data-list-item3-in-card" id="data-list-item3">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 3">
+                  <div>Node 3</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-label="data-list-item4-in-card" id="data-list-item4">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 4">
+                  <div>Node 4</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-label="data-list-item5-in-card" id="data-list-item5">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 5">
+                  <div>Node 5</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    </React.Fragment>
+  );
+
+  return (
+    <DashboardWrapper>
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Text component="h1">Main title</Text>
+          <Text component="p">
+            Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+            of it’s relative line height of 1.5.
+          </Text>
+        </TextContent>
+      </PageSection>
+      <Divider component="div" />
+      <PageSection>
+        <Card>
+          <Drawer isStatic isExpanded={isExpanded}>
+            <DrawerContent panelContent={panelContent}>
+              <DrawerContentBody>{drawerContent}</DrawerContentBody>
+            </DrawerContent>
+          </Drawer>
+        </Card>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx
new file mode 100644
index 00000000000..9f500d6ea1c
--- /dev/null
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import {
+  Card,
+  Divider,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  Flex,
+  FlexItem,
+  PageSection,
+  PageSectionVariants,
+  Progress,
+  SimpleList,
+  SimpleListGroup,
+  SimpleListItem,
+  Text,
+  TextContent,
+  Title
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => {
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(1);
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onSelectListItem = (_listItem, listItemProps) => {
+    const id = listItemProps.children;
+    setDrawerPanelBodyContent(id.charAt(id.length - 1));
+    setIsExpanded(true);
+  };
+
+  const onClose = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent widths={{ xl: 'width_75' }}>
+      <DrawerHead>
+        <Title headingLevel="h2" size="xl">
+          {`List item ${drawerPanelBodyContent} details`}
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onClose} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
+          <FlexItem>
+            <p>
+              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
+              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and
+              can also make the drawer scrollable.
+            </p>
+          </FlexItem>
+          <FlexItem>
+            <Progress value={drawerPanelBodyContent * 10} title="Title" />
+          </FlexItem>
+          <FlexItem>
+            <Progress value={drawerPanelBodyContent * 5} title="Title" />
+          </FlexItem>
+        </Flex>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent = (
+    <React.Fragment>
+      <SimpleList onSelect={onSelectListItem}>
+        <SimpleListGroup title="Section 1" id="simple-list-section-1">
+          <SimpleListItem key="item1" isActive>
+            List item 1
+          </SimpleListItem>
+          <SimpleListItem key="item2">List item 2</SimpleListItem>
+          <SimpleListItem key="item3">List item 3</SimpleListItem>
+          <SimpleListItem key="item4">List item 4</SimpleListItem>
+        </SimpleListGroup>
+        <SimpleListGroup title="Section 2" id="section-2">
+          <SimpleListItem key="item5">List item 5</SimpleListItem>
+          <SimpleListItem key="item6">List item 6</SimpleListItem>
+          <SimpleListItem key="item7">List item 7</SimpleListItem>
+          <SimpleListItem key="item8">List item 8</SimpleListItem>
+          <SimpleListItem key="item9">List item 9</SimpleListItem>
+        </SimpleListGroup>
+      </SimpleList>
+    </React.Fragment>
+  );
+
+  return (
+    <DashboardWrapper>
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Text component="h1">Main title</Text>
+          <Text component="p">
+            Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+            of it’s relative line height of 1.5.
+          </Text>
+        </TextContent>
+      </PageSection>
+      <Divider component="div" />
+      <PageSection>
+        <Card>
+          <Drawer isStatic isExpanded={isExpanded}>
+            <DrawerContent panelContent={panelContent}>
+              <DrawerContentBody>{drawerContent}</DrawerContentBody>
+            </DrawerContent>
+          </Drawer>
+        </Card>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};