@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.2

package/src/demos/PrimaryDetail.md

@@ -3,955 +3,41 @@ id: Primary-detail
 section: patterns
 ---
 
-import { Select as SelectDeprecated, SelectOption as SelectOptionDeprecated, SelectVariant } from '@patternfly/react-core/deprecated';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
-import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-import pfIcon from './Card/pf-logo-small.svg';
-import activeMQIcon from './Card/activemq-core_200x150.png';
-import avroIcon from './Card/camel-avro_200x150.png';
-import dropBoxIcon from './Card/camel-dropbox_200x150.png';
-import infinispanIcon from './Card/camel-infinispan_200x150.png';
-import saxonIcon from './Card/camel-saxon_200x150.png';
-import sparkIcon from './Card/camel-spark_200x150.png';
-import swaggerIcon from './Card/camel-swagger-java_200x150.png';
-import azureIcon from './Card/FuseConnector_Icons_AzureServices.png';
-import restIcon from './Card/FuseConnector_Icons_REST.png';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-## Demos
-
-### Primary-detail full page
-
-```js isFullscreen
-import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  DataList,
-  DataListAction,
-  DataListCell,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Toolbar,
-  ToolbarItem,
-  ToolbarContent,
-  ToolbarToggleGroup,
-  ToolbarGroup,
-  Divider,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerHead,
-  DrawerPanelBody,
-  DrawerPanelContent,
-  Flex,
-  FlexItem,
-  InputGroup,
-  PageSection,
-  PageSectionVariants,
-  Progress,
-  Stack,
-  StackItem,
-  Text,
-  TextContent,
-  TextInput,
-  Title
-} from '@patternfly/react-core';
-import {
-  Select as SelectDeprecated,
-  SelectOption as SelectOptionDeprecated,
-  SelectVariant
-} from '@patternfly/react-core/deprecated';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-class PrimaryDetailFullPage extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDrawerExpanded: false,
-      drawerPanelBodyContent: '',
-      isDropdownOpen: false,
-      isKebabDropdownOpen: false,
-      activeItem: 0,
-      inputValue: '',
-      statusIsExpanded: false,
-      statusSelected: null,
-      riskIsExpanded: false,
-      riskSelected: null,
-      selectedDataListItemId: ''
-    };
-
-    this.statusOptions = [
-      { value: 'Status', disabled: false, isPlaceholder: true },
-      { value: 'New', disabled: false },
-      { value: 'Pending', disabled: false },
-      { value: 'Running', disabled: false },
-      { value: 'Cancelled', disabled: false }
-    ];
-
-    this.riskOptions = [
-      { value: 'Risk', disabled: false, isPlaceholder: true },
-      { value: 'Low', disabled: false },
-      { value: 'Medium', disabled: false },
-      { value: 'High', disabled: false }
-    ];
-
-    this.onInputChange = (newValue) => {
-      this.setState({ inputValue: newValue });
-    };
-
-    this.onStatusToggle = (_event, isExpanded) => {
-      this.setState({
-        statusIsExpanded: isExpanded
-      });
-    };
-
-    this.onStatusSelect = (event, selection, isPlaceholder) => {
-      if (isPlaceholder) this.clearStatusSelection();
-      this.setState({
-        statusSelected: selection,
-        statusIsExpanded: false
-      });
-    };
-
-    this.clearStatusSelection = () => {
-      this.setState({
-        statusSelected: null,
-        statusIsExpanded: false
-      });
-    };
-
-    this.onRiskToggle = (_event, isExpanded) => {
-      this.setState({
-        riskIsExpanded: isExpanded
-      });
-    };
-
-    this.onRiskSelect = (event, selection, isPlaceholder) => {
-      if (isPlaceholder) this.clearRiskSelection();
-      this.setState({
-        riskSelected: selection,
-        riskIsExpanded: false
-      });
-    };
-
-    this.clearRiskSelection = () => {
-      this.setState({
-        riskSelected: null,
-        riskIsExpanded: false
-      });
-    };
-
-    this.onSelectDataListItem = (_event, id) => {
-      this.setState({
-        selectedDataListItemId: id,
-        isDrawerExpanded: true,
-        drawerPanelBodyContent: id.charAt(id.length - 1)
-      });
-    };
-
-    this.onCloseDrawerClick = () => {
-      this.setState({
-        isDrawerExpanded: false,
-        selectedDataListItemId: ''
-      });
-    };
-  }
-
-  render() {
-    const {
-      isDrawerExpanded,
-      drawerPanelBodyContent,
-      isDropdownOpen,
-      isKebabDropdownOpen,
-      activeItem,
-      inputValue,
-      statusIsExpanded,
-      statusSelected,
-      riskIsExpanded,
-      riskSelected,
-      selectedDataListItemId
-    } = this.state;
-
-    const toggleGroupItems = (
-      <React.Fragment>
-        <ToolbarItem>
-          <InputGroup>
-            <TextInput
-              name="full-page-data-toolbar-input1"
-              id="full-page-data-toolbar-input1"
-              type="search"
-              aria-label="search input example"
-              onChange={this.onInputChange}
-              value={inputValue}
-            />
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
-          </InputGroup>
-        </ToolbarItem>
-        <ToolbarGroup variant="filter-group">
-          <ToolbarItem>
-            <SelectDeprecated
-              variant={SelectVariant.single}
-              aria-label="Select Input"
-              onToggle={this.onStatusToggle}
-              onSelect={this.onStatusSelect}
-              selections={statusSelected}
-              isExpanded={statusIsExpanded}
-            >
-              {this.statusOptions.map((option, index) => (
-                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
-              ))}
-            </SelectDeprecated>
-          </ToolbarItem>
-          <ToolbarItem>
-            <SelectDeprecated
-              variant={SelectVariant.single}
-              aria-label="Select Input"
-              onToggle={this.onRiskToggle}
-              onSelect={this.onRiskSelect}
-              selections={riskSelected}
-              isExpanded={riskIsExpanded}
-            >
-              {this.riskOptions.map((option, index) => (
-                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
-              ))}
-            </SelectDeprecated>
-          </ToolbarItem>
-        </ToolbarGroup>
-      </React.Fragment>
-    );
-
-    const ToolbarItems = (
-      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
-        {toggleGroupItems}
-      </ToolbarToggleGroup>
-    );
-
-    const panelContent = (
-      <DrawerPanelContent>
-        <DrawerHead>
-          <Title headingLevel="h2" size="xl">
-            node-{drawerPanelBodyContent}
-          </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={drawerPanelBodyContent * 10} title="Title" />
-            </FlexItem>
-            <FlexItem>
-              <Progress value={drawerPanelBodyContent * 5} title="Title" />
-            </FlexItem>
-          </Flex>
-        </DrawerPanelBody>
-      </DrawerPanelContent>
-    );
-    const drawerContent = (
-      <React.Fragment>
-        <Toolbar id="full-page-data-toolbar" usePageInsets>
-          <ToolbarContent>{ToolbarItems}</ToolbarContent>
-        </Toolbar>
-        <DataList
-          aria-label="data list"
-          selectedDataListItemId={selectedDataListItemId}
-          onSelectDataListItem={this.onSelectDataListItem}
-        >
-          <DataListItem id="full-page-item1">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly</p>
-                        <small>
-                          Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a>
-                        </small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="full-page-item2">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly-elements</p>
-                        <small>PatternFly elements</small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <CheckCircleIcon /> 7
-                        </FlexItem>
-                        <FlexItem>
-                          <ExclamationTriangleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <TimesCircleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="full-page-item3">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly</p>
-                        <small>
-                          Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a>
-                        </small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="full-page-item4">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly-elements</p>
-                        <small>PatternFly elements</small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <CheckCircleIcon /> 7
-                        </FlexItem>
-                        <FlexItem>
-                          <ExclamationTriangleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <TimesCircleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-        </DataList>
-      </React.Fragment>
-    );
-
-    return (
-      <DashboardWrapper mainContainerId="main-content-page-layout-default-nav">
-        <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 variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
-          <Drawer isExpanded={isDrawerExpanded}>
-            <DrawerContent panelContent={panelContent}>
-              <DrawerContentBody>{drawerContent}</DrawerContentBody>
-            </DrawerContent>
-          </Drawer>
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
-```
-
-### Primary-detail content padding
-
-```js isFullscreen
-import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  DataList,
-  DataListAction,
-  DataListCell,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Toolbar,
-  ToolbarItem,
-  ToolbarContent,
-  ToolbarToggleGroup,
-  ToolbarGroup,
-  Divider,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerHead,
-  DrawerPanelBody,
-  DrawerPanelContent,
-  Flex,
-  FlexItem,
-  InputGroup,
-  PageSection,
-  PageSectionVariants,
-  Progress,
-  Stack,
-  StackItem,
-  Text,
-  TextContent,
-  TextInput,
-  Title
-} from '@patternfly/react-core';
-import {
-  Select as SelectDeprecated,
-  SelectOption as SelectOptionDeprecated,
-  SelectVariant
-} from '@patternfly/react-core/deprecated';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-
-class PrimaryDetailContentPadding extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDrawerExpanded: false,
-      drawerPanelBodyContent: '',
-      isDropdownOpen: false,
-      isKebabDropdownOpen: false,
-      activeItem: 0,
-      inputValue: '',
-      statusIsExpanded: false,
-      statusSelected: null,
-      riskIsExpanded: false,
-      riskSelected: null,
-      selectedDataListItemId: ''
-    };
-
-    this.statusOptions = [
-      { value: 'Status', disabled: false, isPlaceholder: true },
-      { value: 'New', disabled: false },
-      { value: 'Pending', disabled: false },
-      { value: 'Running', disabled: false },
-      { value: 'Cancelled', disabled: false }
-    ];
-
-    this.riskOptions = [
-      { value: 'Risk', disabled: false, isPlaceholder: true },
-      { value: 'Low', disabled: false },
-      { value: 'Medium', disabled: false },
-      { value: 'High', disabled: false }
-    ];
-
-    this.onInputChange = (newValue) => {
-      this.setState({ inputValue: newValue });
-    };
-
-    this.onStatusToggle = (_event, isExpanded) => {
-      this.setState({
-        statusIsExpanded: isExpanded
-      });
-    };
-
-    this.onStatusSelect = (event, selection, isPlaceholder) => {
-      if (isPlaceholder) this.clearStatusSelection();
-      this.setState({
-        statusSelected: selection,
-        statusIsExpanded: false
-      });
-    };
-
-    this.clearStatusSelection = () => {
-      this.setState({
-        statusSelected: null,
-        statusIsExpanded: false
-      });
-    };
-
-    this.onRiskToggle = (_event, isExpanded) => {
-      this.setState({
-        riskIsExpanded: isExpanded
-      });
-    };
-
-    this.onRiskSelect = (event, selection, isPlaceholder) => {
-      if (isPlaceholder) this.clearRiskSelection();
-      this.setState({
-        riskSelected: selection,
-        riskIsExpanded: false
-      });
-    };
-
-    this.clearRiskSelection = () => {
-      this.setState({
-        riskSelected: null,
-        riskIsExpanded: false
-      });
-    };
-
-    this.onSelectDataListItem = (_event, id) => {
-      this.setState({
-        selectedDataListItemId: id,
-        isDrawerExpanded: true,
-        drawerPanelBodyContent: id.charAt(id.length - 1)
-      });
-    };
-
-    this.onCloseDrawerClick = () => {
-      this.setState({
-        isDrawerExpanded: false,
-        selectedDataListItemId: ''
-      });
-    };
-  }
-
-  render() {
-    const {
-      isDrawerExpanded,
-      drawerPanelBodyContent,
-      isDropdownOpen,
-      isKebabDropdownOpen,
-      activeItem,
-      inputValue,
-      statusIsExpanded,
-      statusSelected,
-      riskIsExpanded,
-      riskSelected,
-      selectedDataListItemId
-    } = this.state;
-
-    const toggleGroupItems = (
-      <React.Fragment>
-        <ToolbarItem>
-          <InputGroup>
-            <TextInput
-              name="content-padding-data-toolbar-input1"
-              id="content-padding-data-toolbar-input1"
-              type="search"
-              aria-label="search input example"
-              onChange={this.onInputChange}
-              value={inputValue}
-            />
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
-          </InputGroup>
-        </ToolbarItem>
-        <ToolbarGroup variant="filter-group">
-          <ToolbarItem>
-            <SelectDeprecated
-              variant={SelectVariant.single}
-              aria-label="Select Input"
-              onToggle={this.onStatusToggle}
-              onSelect={this.onStatusSelect}
-              selections={statusSelected}
-              isExpanded={statusIsExpanded}
-            >
-              {this.statusOptions.map((option, index) => (
-                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
-              ))}
-            </SelectDeprecated>
-          </ToolbarItem>
-          <ToolbarItem>
-            <SelectDeprecated
-              variant={SelectVariant.single}
-              aria-label="Select Input"
-              onToggle={this.onRiskToggle}
-              onSelect={this.onRiskSelect}
-              selections={riskSelected}
-              isExpanded={riskIsExpanded}
-            >
-              {this.riskOptions.map((option, index) => (
-                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
-              ))}
-            </SelectDeprecated>
-          </ToolbarItem>
-        </ToolbarGroup>
-      </React.Fragment>
-    );
-
-    const ToolbarItems = (
-      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
-        {toggleGroupItems}
-      </ToolbarToggleGroup>
-    );
-
-    const panelContent = (
-      <DrawerPanelContent>
-        <DrawerHead>
-          <Title headingLevel="h2" size="xl">
-            node-{drawerPanelBodyContent}
-          </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={drawerPanelBodyContent * 10} title="Title" />
-            </FlexItem>
-            <FlexItem>
-              <Progress value={drawerPanelBodyContent * 5} title="Title" />
-            </FlexItem>
-          </Flex>
-        </DrawerPanelBody>
-      </DrawerPanelContent>
-    );
-
-    const drawerContent = (
-      <React.Fragment>
-        <Toolbar id="content-padding-data-toolbar" usePageInsets>
-          <ToolbarContent>{ToolbarItems}</ToolbarContent>
-        </Toolbar>
-        <DataList
-          aria-label="data list"
-          selectedDataListItemId={selectedDataListItemId}
-          onSelectDataListItem={this.onSelectDataListItem}
-        >
-          <DataListItem id="content-padding-item1">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly</p>
-                        <small>
-                          Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a>
-                        </small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="content-padding-item2">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly-elements</p>
-                        <small>PatternFly elements</small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <CheckCircleIcon /> 7
-                        </FlexItem>
-                        <FlexItem>
-                          <ExclamationTriangleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <TimesCircleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="content-padding-item3">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly</p>
-                        <small>
-                          Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a>
-                        </small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="content-padding-item4">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly-elements</p>
-                        <small>PatternFly elements</small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <CheckCircleIcon /> 7
-                        </FlexItem>
-                        <FlexItem>
-                          <ExclamationTriangleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <TimesCircleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-        </DataList>
-      </React.Fragment>
-    );
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import pfIcon from './Card/pf-logo-small.svg';
+import activeMQIcon from './Card/activemq-core_200x150.png';
+import avroIcon from './Card/camel-avro_200x150.png';
+import dropBoxIcon from './Card/camel-dropbox_200x150.png';
+import infinispanIcon from './Card/camel-infinispan_200x150.png';
+import saxonIcon from './Card/camel-saxon_200x150.png';
+import sparkIcon from './Card/camel-spark_200x150.png';
+import swaggerIcon from './Card/camel-swagger-java_200x150.png';
+import azureIcon from './Card/FuseConnector_Icons_AzureServices.png';
+import restIcon from './Card/FuseConnector_Icons_REST.png';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { data } from '@patternfly/react-core/src/demos/Card/CardData.jsx';
+import DashboardWrapper from './examples/DashboardWrapper';
+
+## Demos
+
+### Primary-detail full page
+
+```js file="./examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen
+
+```
+
+### Primary-detail content padding
+
+```js file="./examples/PrimaryDetail/PrimaryDetailContentPadding.tsx" isFullscreen
 
-    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 padding={{ default: 'noPadding' }}>
-          <Drawer isExpanded={isDrawerExpanded}>
-            <DrawerContent panelContent={panelContent} className={'pf-m-no-background'}>
-              <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
-            </DrawerContent>
-          </Drawer>
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
 ```
 
 ### Primary-detail card view
@@ -1009,6 +95,7 @@ import swaggerIcon from './camel-swagger-java_200x150.png';
 import azureIcon from './FuseConnector_Icons_AzureServices.png';
 import restIcon from './FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { data } from '@patternfly/react-core/src/demos/Card/CardData.jsx';
 
 class PrimaryDetailCardView extends React.Component {
   constructor(props) {
@@ -1027,7 +114,7 @@ class PrimaryDetailCardView extends React.Component {
       filters: {
         products: []
       },
-      res: [],
+      cardData: data,
       isUpperToolbarDropdownOpen: false,
       isUpperToolbarKebabDropdownOpen: false,
       isLowerToolbarDropdownOpen: false,
@@ -1253,9 +340,9 @@ class PrimaryDetailCardView extends React.Component {
     this.deleteItem = (event, item) => {
       event.stopPropagation();
       const filter = (getter) => (val) => getter(val) !== item.id;
-      const filteredCards = this.state.res.filter(filter(({ id }) => id));
+      const filteredCards = this.state.cardData.filter(filter(({ id }) => id));
       this.setState({
-        res: filteredCards,
+        cardData: filteredCards,
         selectedItems: this.state.selectedItems.filter(filter((id) => id)),
         totalItemCount: this.state.totalItemCount - 1,
         isDrawerExpanded: false,
@@ -1287,27 +374,15 @@ class PrimaryDetailCardView extends React.Component {
   }
 
   getAllItems() {
-    const { res } = this.state;
+    const { cardData } = this.state;
     const collection = [];
-    for (const items of res) {
+    for (const items of cardData) {
       collection.push(items.id);
     }
 
     return collection;
   }
 
-  fetch(page, perPage) {
-    fetch(`https://my-json-server.typicode.com/jenny-s51/cardviewdata/posts?_page=${page}&_limit=${perPage}`)
-      .then((resp) => resp.json())
-      .then((resp) => this.setState({ res: resp, perPage, page }))
-      .then(() => this.updateSelected())
-      .catch((err) => this.setState({ error: err }));
-  }
-
-  componentDidMount() {
-    this.fetch(this.state.page, this.state.perPage);
-  }
-
   buildSelectDropdown() {
     const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state;
     const numSelected = selectedItems.length;
@@ -1362,16 +437,23 @@ class PrimaryDetailCardView extends React.Component {
   }
 
   render() {
-    const { isDrawerExpanded, isChecked, selectedItems, activeCard, isLowerToolbarKebabDropdownOpen, filters, res } =
-      this.state;
+    const {
+      isDrawerExpanded,
+      isChecked,
+      selectedItems,
+      activeCard,
+      isLowerToolbarKebabDropdownOpen,
+      filters,
+      cardData
+    } = this.state;
 
     const toolbarKebabDropdownItems = (
       <>
-        <DropdownItem itemId={0} key="action">
+        <DropdownItem value={0} key="action">
           Action
         </DropdownItem>
         <DropdownItem
-          itemId={1}
+          value={1}
           key="link"
           to="#default-link2"
           // Prevent the default onClick functionality for example purposes
@@ -1379,17 +461,17 @@ class PrimaryDetailCardView extends React.Component {
         >
           Link
         </DropdownItem>
-        <DropdownItem itemId={2} isDisabled key="disabled action">
+        <DropdownItem value={2} isDisabled key="disabled action">
           Disabled Action
         </DropdownItem>
-        <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+        <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
           Disabled Link
         </DropdownItem>
         <Divider component="li" key="separator" />
-        <DropdownItem itemId={4} key="separated action">
+        <DropdownItem value={4} key="separated action">
           Separated Action
         </DropdownItem>
-        <DropdownItem itemId={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+        <DropdownItem value={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
           Separated Link
         </DropdownItem>
       </>
@@ -1428,8 +510,8 @@ class PrimaryDetailCardView extends React.Component {
 
     const filtered =
       filters.products.length > 0
-        ? res.filter((card) => filters.products.length === 0 || filters.products.includes(card.name))
-        : res;
+        ? cardData.filter((card) => filters.products.length === 0 || filters.products.includes(card.name))
+        : cardData;
 
     const icons = {
       pfIcon,
@@ -1968,462 +1050,6 @@ class PrimaryDetailDataListInCard extends React.Component {
 
 ### Primary-detail inline modifier
 
-```js isFullscreen
-import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  DataList,
-  DataListAction,
-  DataListCell,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Toolbar,
-  ToolbarItem,
-  ToolbarContent,
-  ToolbarToggleGroup,
-  ToolbarGroup,
-  Divider,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerHead,
-  DrawerPanelBody,
-  DrawerPanelContent,
-  Flex,
-  FlexItem,
-  InputGroup,
-  PageSection,
-  PageSectionVariants,
-  Progress,
-  Stack,
-  StackItem,
-  Text,
-  TextContent,
-  TextInput,
-  Title
-} from '@patternfly/react-core';
-import {
-  Select as SelectDeprecated,
-  SelectOption as SelectOptionDeprecated,
-  SelectVariant
-} from '@patternfly/react-core/deprecated';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-
-class PrimaryDetailInlineModifier extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDrawerExpanded: false,
-      drawerPanelBodyContent: '',
-      isDropdownOpen: false,
-      isKebabDropdownOpen: false,
-      activeItem: 0,
-      inputValue: '',
-      statusIsExpanded: false,
-      statusSelected: null,
-      riskIsExpanded: false,
-      riskSelected: null,
-      selectedDataListItemId: ''
-    };
-
-    this.statusOptions = [
-      { value: 'Status', disabled: false, isPlaceholder: true },
-      { value: 'New', disabled: false },
-      { value: 'Pending', disabled: false },
-      { value: 'Running', disabled: false },
-      { value: 'Cancelled', disabled: false }
-    ];
-
-    this.riskOptions = [
-      { value: 'Risk', disabled: false, isPlaceholder: true },
-      { value: 'Low', disabled: false },
-      { value: 'Medium', disabled: false },
-      { value: 'High', disabled: false }
-    ];
-
-    this.onInputChange = (newValue) => {
-      this.setState({ inputValue: newValue });
-    };
-
-    this.onStatusToggle = (_event, isExpanded) => {
-      this.setState({
-        statusIsExpanded: isExpanded
-      });
-    };
-
-    this.onStatusSelect = (event, selection, isPlaceholder) => {
-      if (isPlaceholder) this.clearStatusSelection();
-      this.setState({
-        statusSelected: selection,
-        statusIsExpanded: false
-      });
-    };
-
-    this.clearStatusSelection = () => {
-      this.setState({
-        statusSelected: null,
-        statusIsExpanded: false
-      });
-    };
-
-    this.onRiskToggle = (_event, isExpanded) => {
-      this.setState({
-        riskIsExpanded: isExpanded
-      });
-    };
-
-    this.onRiskSelect = (event, selection, isPlaceholder) => {
-      if (isPlaceholder) this.clearRiskSelection();
-      this.setState({
-        riskSelected: selection,
-        riskIsExpanded: false
-      });
-    };
-
-    this.clearRiskSelection = () => {
-      this.setState({
-        riskSelected: null,
-        riskIsExpanded: false
-      });
-    };
-
-    this.onSelectDataListItem = (_event, id) => {
-      this.setState({
-        selectedDataListItemId: id,
-        isDrawerExpanded: true,
-        drawerPanelBodyContent: id.charAt(id.length - 1)
-      });
-    };
-
-    this.onCloseDrawerClick = () => {
-      this.setState({
-        isDrawerExpanded: false,
-        selectedDataListItemId: ''
-      });
-    };
-  }
-
-  render() {
-    const {
-      isDrawerExpanded,
-      drawerPanelBodyContent,
-      isDropdownOpen,
-      isKebabDropdownOpen,
-      activeItem,
-      inputValue,
-      statusIsExpanded,
-      statusSelected,
-      riskIsExpanded,
-      riskSelected,
-      selectedDataListItemId
-    } = this.state;
-
-    const toggleGroupItems = (
-      <React.Fragment>
-        <ToolbarItem>
-          <InputGroup>
-            <TextInput
-              name="inline-modifier-input"
-              id="inline-modifier-input"
-              type="search"
-              aria-label="search input example"
-              onChange={this.onInputChange}
-              value={inputValue}
-            />
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
-          </InputGroup>
-        </ToolbarItem>
-        <ToolbarGroup variant="filter-group">
-          <ToolbarItem>
-            <SelectDeprecated
-              variant={SelectVariant.single}
-              aria-label="Select Input"
-              onToggle={this.onStatusToggle}
-              onSelect={this.onStatusSelect}
-              selections={statusSelected}
-              isExpanded={statusIsExpanded}
-            >
-              {this.statusOptions.map((option, index) => (
-                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
-              ))}
-            </SelectDeprecated>
-          </ToolbarItem>
-          <ToolbarItem>
-            <SelectDeprecated
-              variant={SelectVariant.single}
-              aria-label="Select Input"
-              onToggle={this.onRiskToggle}
-              onSelect={this.onRiskSelect}
-              selections={riskSelected}
-              isExpanded={riskIsExpanded}
-            >
-              {this.riskOptions.map((option, index) => (
-                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
-              ))}
-            </SelectDeprecated>
-          </ToolbarItem>
-        </ToolbarGroup>
-      </React.Fragment>
-    );
-
-    const ToolbarItems = (
-      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
-        {toggleGroupItems}
-      </ToolbarToggleGroup>
-    );
-
-    const panelContent = (
-      <DrawerPanelContent>
-        <DrawerHead>
-          <Title headingLevel="h2" size="xl">
-            node-{drawerPanelBodyContent}
-          </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={drawerPanelBodyContent * 10} title="Title" />
-            </FlexItem>
-            <FlexItem>
-              <Progress value={drawerPanelBodyContent * 5} title="Title" />
-            </FlexItem>
-          </Flex>
-        </DrawerPanelBody>
-      </DrawerPanelContent>
-    );
-    const drawerContent = (
-      <React.Fragment>
-        <Toolbar id="inline-modifier-data-toolbar" usePageInsets>
-          <ToolbarContent>{ToolbarItems}</ToolbarContent>
-        </Toolbar>
-        <DataList
-          aria-label="data list"
-          selectedDataListItemId={selectedDataListItemId}
-          onSelectDataListItem={this.onSelectDataListItem}
-        >
-          <DataListItem id="inline-modifier-item1">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly</p>
-                        <small>
-                          Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a>
-                        </small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="inline-modifier-item2">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly-elements</p>
-                        <small>PatternFly elements</small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <CheckCircleIcon /> 7
-                        </FlexItem>
-                        <FlexItem>
-                          <ExclamationTriangleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <TimesCircleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="inline-modifier-item3">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly</p>
-                        <small>
-                          Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a>
-                        </small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="inline-modifier-item4">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly-elements</p>
-                        <small>PatternFly elements</small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <CheckCircleIcon /> 7
-                        </FlexItem>
-                        <FlexItem>
-                          <ExclamationTriangleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <TimesCircleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-        </DataList>
-      </React.Fragment>
-    );
+```js file="./examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx" isFullscreen
 
-    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 variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
-          <Drawer isExpanded={isDrawerExpanded} isInline>
-            <DrawerContent panelContent={panelContent}>
-              <DrawerContentBody>{drawerContent}</DrawerContentBody>
-            </DrawerContent>
-          </Drawer>
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
 ```