@patternfly/react-docs 7.6.0-prerelease.8 → 7.6.0-prerelease.9

package/patternfly-docs/generated/components/card/react-demos.js

@@ -1,201 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { Fragment, useState } from 'react';
-import { RhUiEllipsisVerticalFillIcon, RhMicronsCaretRightIcon, RhUiCheckCircleFillIcon, RhUiErrorFillIcon, RhMicronsExternalLinkIcon, RhUiInformationFillIcon, RhUiWarningFillIcon, RhUiNotificationFillIcon } from '@patternfly/react-icons';
-import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
-import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts/victory';
-import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';
-import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
-import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
-import chart_color_red_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_red_orange_400';
-import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
-import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';
-import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
-import text from '@patternfly/react-styles/css/utilities/Text/text';
-import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
-import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
-import srcImportcardview from './react-demos/card-view.png';
-const pageData = {
-  "id": "Card",
-  "section": "components",
-  "subsection": "",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react-demos",
-  "tabName": null,
-  "slug": "/components/card/react-demos",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/CardDemos.md",
-  "relPath": "packages/react-core/src/demos/CardDemos.md",
-  "examples": [
-    "Horizontal card grid",
-    "Horizontal split",
-    "Details card",
-    "Aggregate status card",
-    "Status",
-    "Status Tabbed",
-    "Utilization card 1",
-    "Utilization card 2",
-    "Utilization card 3",
-    "Utilization card 4",
-    "Nested cards",
-    "With accordion",
-    "Trend card 1",
-    "Trend card 2",
-    "Log view",
-    "Events view"
-  ]
-};
-pageData.liveContext = {
-  Fragment,
-  useState,
-  RhUiEllipsisVerticalFillIcon,
-  RhMicronsCaretRightIcon,
-  RhUiCheckCircleFillIcon,
-  RhUiErrorFillIcon,
-  RhMicronsExternalLinkIcon,
-  RhUiInformationFillIcon,
-  RhUiWarningFillIcon,
-  RhUiNotificationFillIcon,
-  Table,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-  ExpandableRowContent,
-  Chart,
-  ChartAxis,
-  ChartGroup,
-  ChartVoronoiContainer,
-  ChartStack,
-  ChartBar,
-  ChartTooltip,
-  ChartDonutThreshold,
-  ChartDonutUtilization,
-  ChartArea,
-  ChartContainer,
-  ChartLabel,
-  chart_color_yellow_100,
-  chart_color_yellow_300,
-  chart_color_orange_300,
-  chart_color_red_orange_400,
-  cssGridTemplateColumnsMin,
-  t_global_text_color_subtle,
-  flex,
-  text,
-  sizing,
-  accessibility
-};
-pageData.examples = {
-  'Horizontal card grid': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardBody,\n  CardExpandableContent,\n  Level,\n  LabelGroup,\n  Label,\n  LabelColor,\n  Grid,\n  Flex,\n  List,\n  ListItem,\n  Button,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';\nimport RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';\nimport RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const CardHorizontalGrid: React.FunctionComponent = () => {\n  const [isCardExpanded, setIsCardExpanded] = useState(false);\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n  const onCardExpand = () => {\n    setIsCardExpanded(!isCardExpanded);\n  };\n\n  const onActionToggle = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onActionSelect = () => {\n    setIsDropdownOpen(false);\n  };\n\n  const dropdownItems = (\n    <>\n      <DropdownItem key=\"action1\">Action 1</DropdownItem>\n      <DropdownItem key=\"action2\">Action 2</DropdownItem>\n      <DropdownItem key=\"disabled action3\" isDisabled>\n        Disabled Action 3\n      </DropdownItem>\n      <DropdownItem key=\"action4\">Action 4</DropdownItem>\n    </>\n  );\n  const headerActions = (\n    <Dropdown\n      onSelect={onActionSelect}\n      isOpen={isDropdownOpen}\n      popperProps={{ position: 'right' }}\n      onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}\n      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n        <MenuToggle\n          ref={toggleRef}\n          isExpanded={isDropdownOpen}\n          onClick={onActionToggle}\n          variant=\"plain\"\n          aria-label=\"Horizontal card grid demo kebab toggle\"\n          icon={<RhUiEllipsisVerticalFillIcon />}\n        />\n      )}\n    >\n      <DropdownList>{dropdownItems}</DropdownList>\n    </Dropdown>\n  );\n\n  return (\n    <Card id=\"horizontal card\" isExpanded={isCardExpanded}>\n      <CardHeader\n        actions={{ actions: headerActions }}\n        onExpand={onCardExpand}\n        toggleButtonProps={{\n          id: 'toggle-button',\n          'aria-label': 'Actions',\n          'aria-labelledby': 'titleId toggle-button',\n          'aria-expanded': isCardExpanded\n        }}\n      >\n        {isCardExpanded && <CardTitle id=\"titleId\">Getting Started</CardTitle>}\n        {!isCardExpanded && (\n          <Level hasGutter>\n            <CardTitle id=\"titleId\">Getting Started</CardTitle>\n            <LabelGroup isCompact>\n              <Label isCompact icon={<RhUiInformationFillIcon />} color={LabelColor.blue}>\n                Set up your cluster\n              </Label>\n              <Label isCompact icon={<RhUiInformationFillIcon />} color={LabelColor.purple}>\n                Guided tours\n              </Label>\n              <Label isCompact icon={<RhUiInformationFillIcon />} color={LabelColor.green}>\n                Quick starts\n              </Label>\n              <Label isCompact icon={<RhUiInformationFillIcon />} color={LabelColor.orange}>\n                Learning resources\n              </Label>\n            </LabelGroup>\n          </Level>\n        )}\n      </CardHeader>\n      <CardExpandableContent>\n        <CardBody>\n          <Grid md={6} lg={3} hasGutter>\n            <Flex\n              spaceItems={{ default: 'spaceItemsLg' }}\n              alignItems={{ default: 'alignItemsFlexStart' }}\n              direction={{ default: 'column' }}\n            >\n              <Flex\n                spaceItems={{ default: 'spaceItemsSm' }}\n                alignItems={{ default: 'alignItemsFlexStart' }}\n                direction={{ default: 'column' }}\n                grow={{ default: 'grow' }}\n              >\n                <Label icon={<RhUiInformationFillIcon />} color={LabelColor.blue}>\n                  Set up your cluster\n                </Label>\n                <p>Continue setting up your cluster to access all you cain in the Console</p>\n                <List isPlain>\n                  <ListItem>\n                    <a href=\"#\">Add identity provider</a>\n                  </ListItem>\n                  <ListItem>\n                    <a href=\"#\">Configure alert receivers</a>\n                  </ListItem>\n                  <ListItem>\n                    <a href=\"#\">Configure default ingress certificate</a>\n                  </ListItem>\n                </List>\n              </Flex>\n              <Button\n                href=\"#\"\n                component=\"a\"\n                variant=\"link\"\n                isInline\n                icon={<RhMicronsCaretRightIcon />}\n                iconPosition=\"right\"\n              >\n                View all set up cluster steps\n              </Button>\n            </Flex>\n            <Flex\n              spaceItems={{ default: 'spaceItemsLg' }}\n              alignItems={{ default: 'alignItemsFlexStart' }}\n              direction={{ default: 'column' }}\n            >\n              <Flex\n                spaceItems={{ default: 'spaceItemsSm' }}\n                alignItems={{ default: 'alignItemsFlexStart' }}\n                direction={{ default: 'column' }}\n                grow={{ default: 'grow' }}\n              >\n                <Label icon={<RhUiInformationFillIcon />} color={LabelColor.purple}>\n                  Guided tours\n                </Label>\n                <p>Tour some of the key features around the console</p>\n                <List isPlain>\n                  <ListItem>\n                    <a href=\"#\">Tour the console</a>\n                  </ListItem>\n                  <ListItem>\n                    <a href=\"#\">Getting started with Serverless</a>\n                  </ListItem>\n                </List>\n              </Flex>\n              <Button\n                href=\"#\"\n                component=\"a\"\n                variant=\"link\"\n                isInline\n                icon={<RhMicronsCaretRightIcon />}\n                iconPosition=\"right\"\n              >\n                View all guided tours\n              </Button>\n            </Flex>\n            <Flex\n              spaceItems={{ default: 'spaceItemsLg' }}\n              alignItems={{ default: 'alignItemsFlexStart' }}\n              direction={{ default: 'column' }}\n            >\n              <Flex\n                spaceItems={{ default: 'spaceItemsSm' }}\n                alignItems={{ default: 'alignItemsFlexStart' }}\n                direction={{ default: 'column' }}\n                grow={{ default: 'grow' }}\n              >\n                <Label icon={<RhUiInformationFillIcon />} color={LabelColor.green}>\n                  Quick starts\n                </Label>\n                <p>Get started with features using our step-by-step documentation</p>\n                <List isPlain>\n                  <ListItem>\n                    <a href=\"#\">Getting started with Serverless</a>\n                  </ListItem>\n                  <ListItem>\n                    <a href=\"#\">Explore virtualization</a>\n                  </ListItem>\n                  <ListItem>\n                    <a href=\"#\">Build pipelines</a>\n                  </ListItem>\n                </List>\n              </Flex>\n              <Button\n                href=\"#\"\n                component=\"a\"\n                variant=\"link\"\n                isInline\n                icon={<RhMicronsCaretRightIcon />}\n                iconPosition=\"right\"\n              >\n                View all quick starts\n              </Button>\n            </Flex>\n            <Flex\n              spaceItems={{ default: 'spaceItemsLg' }}\n              alignItems={{ default: 'alignItemsFlexStart' }}\n              direction={{ default: 'column' }}\n            >\n              <Flex\n                spaceItems={{ default: 'spaceItemsSm' }}\n                alignItems={{ default: 'alignItemsFlexStart' }}\n                direction={{ default: 'column' }}\n                grow={{ default: 'grow' }}\n              >\n                <Label icon={<RhUiInformationFillIcon />} color={LabelColor.orange}>\n                  Learning resources\n                </Label>\n                <p>Learn about new features within the Console and get started with demo apps</p>\n                <List isPlain>\n                  <ListItem>\n                    <a href=\"#\">See what's possible with the Explore page</a>\n                  </ListItem>\n                  <ListItem>\n                    <a href=\"#\">\n                      OpenShift 4.5: Top Tasks\n                      <RhMicronsExternalLinkIcon />\n                    </a>\n                  </ListItem>\n                  <ListItem>\n                    <a href=\"#\">Try a demo app</a>\n                  </ListItem>\n                </List>\n              </Flex>\n              <Button\n                href=\"#\"\n                component=\"a\"\n                variant=\"link\"\n                isInline\n                icon={<RhMicronsCaretRightIcon />}\n                iconPosition=\"right\"\n              >\n                View all learning resources\n              </Button>\n            </Flex>\n          </Grid>\n        </CardBody>\n      </CardExpandableContent>\n    </Card>\n  );\n};\n","title":"Horizontal card grid","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`The following demo shows how you may use a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Grid>`}
-        </code>
-        {` within a card for scenarios that require multiple subsections.`}
-      </p>
-    </Example>,
-  'Horizontal split': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Card, CardTitle, CardBody, CardFooter, Grid, GridItem, Button } from '@patternfly/react-core';\n\nexport const CardHorizontalSplitDemo: React.FunctionComponent = () => (\n  <Card id=\"card-demo-horizontal-split-example\">\n    <Grid md={6}>\n      <GridItem\n        style={{\n          minHeight: '200px',\n          backgroundPosition: 'center',\n          backgroundSize: 'cover',\n          backgroundImage:\n            'url(https://raw.githubusercontent.com/patternfly/patternfly-react/main/packages/react-integration/demo-app-ts/src/assets/images/pfbg_992.jpg)'\n        }}\n      />\n      <GridItem>\n        <CardTitle>Headline</CardTitle>\n        <CardBody>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu,\n          tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in tempus\n          diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non faucibus odio.\n          Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget.\n        </CardBody>\n        <CardFooter>\n          <Button variant=\"tertiary\">Call to action</Button>\n        </CardFooter>\n      </GridItem>\n    </Grid>\n  </Card>\n);\n","title":"Horizontal split","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`The following demo shows how you may utilize `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Grid>`}
-        </code>
-        {` to split a card into two halves, one with an image, and one with text content.`}
-      </p>
-    </Example>,
-  'Details card': props => 
-    <Example {...pageData} {...props} {...{"code":"import {\n  Card,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  Gallery,\n  Title,\n  DescriptionList,\n  DescriptionListGroup,\n  DescriptionListTerm,\n  DescriptionListDescription,\n  Divider\n} from '@patternfly/react-core';\nimport cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';\n\nexport const CardDetailsDemo: React.FunctionComponent = () => (\n  <Gallery hasGutter style={{ [cssGridTemplateColumnsMin.name]: '260px' } as React.CSSProperties}>\n    <Card>\n      <CardTitle>\n        <Title headingLevel=\"h4\" size=\"xl\">\n          Details\n        </Title>\n      </CardTitle>\n      <CardBody>\n        <DescriptionList aria-label=\"Cluster details for API1\">\n          <DescriptionListGroup>\n            <DescriptionListTerm>Cluster API Address</DescriptionListTerm>\n            <DescriptionListDescription>\n              <a href=\"#\">https://api1.devcluster.openshift.com</a>\n            </DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Cluster ID</DescriptionListTerm>\n            <DescriptionListDescription>63b97ac1-b850-41d9-8820-239becde9e86</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Provide</DescriptionListTerm>\n            <DescriptionListDescription>AWS</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>OpenShift Version</DescriptionListTerm>\n            <DescriptionListDescription>4.5.0.ci-2020-06-16-015028</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Update Channel</DescriptionListTerm>\n            <DescriptionListDescription>stable-4.5</DescriptionListDescription>\n          </DescriptionListGroup>\n        </DescriptionList>\n      </CardBody>\n      <Divider />\n      <CardFooter>\n        <a href=\"#\">View Settings</a>\n      </CardFooter>\n    </Card>\n    <Card>\n      <CardTitle>\n        <Title headingLevel=\"h4\" size=\"xl\">\n          Details\n        </Title>\n      </CardTitle>\n      <CardBody>\n        <DescriptionList aria-label=\"Cluster details for API2\">\n          <DescriptionListGroup>\n            <DescriptionListTerm>Cluster API Address</DescriptionListTerm>\n            <DescriptionListDescription>\n              <a href=\"#\">https://api2.devcluster.openshift.com</a>\n            </DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Cluster ID</DescriptionListTerm>\n            <DescriptionListDescription>08908908-b850-41d9-8820-239becde9e86</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Provider</DescriptionListTerm>\n            <DescriptionListDescription>Azure</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>OpenShift Version</DescriptionListTerm>\n            <DescriptionListDescription>4.5.0.ci-2020-06-16-015026</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Update Channel</DescriptionListTerm>\n            <DescriptionListDescription>stable-4.4</DescriptionListDescription>\n          </DescriptionListGroup>\n        </DescriptionList>\n      </CardBody>\n      <Divider />\n      <CardFooter>\n        <a href=\"#\">View Settings</a>\n      </CardFooter>\n    </Card>\n  </Gallery>\n);\n","title":"Details card","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Aggregate status card': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport {\n  Card,\n  CardBody,\n  CardTitle,\n  Divider,\n  Flex,\n  FlexItem,\n  Gallery,\n  Grid,\n  GridItem,\n  Stack,\n  Icon\n} from '@patternfly/react-core';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-error-fill-icon';\nimport RhUiWarningFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-warning-fill-icon';\nimport cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';\n\ninterface ContentType {\n  icon?: React.ReactNode;\n  count?: number;\n  status?: string;\n  subtitle?: string;\n}\ninterface CardData {\n  [attribute: string]: {\n    title: string;\n    content: {\n      icon: React.JSX.Element;\n      count?: number;\n      status?: string;\n      subtitle?: string;\n    }[];\n    layout: string;\n  }[];\n}\n\nconst cardData: CardData = {\n  iconOnly: [\n    {\n      title: '5 Clusters',\n      content: [\n        {\n          icon: (\n            <Icon status=\"success\">\n              <RhUiCheckCircleFillIcon />\n            </Icon>\n          )\n        }\n      ],\n      layout: 'icon'\n    },\n    {\n      title: '15 Clusters',\n      content: [\n        {\n          icon: (\n            <Icon status=\"warning\">\n              <RhUiWarningFillIcon />\n            </Icon>\n          )\n        }\n      ],\n      layout: 'icon'\n    },\n    {\n      title: '3 Clusters',\n      content: [\n        {\n          icon: (\n            <Icon status=\"danger\">\n              <RhUiErrorFillIcon />\n            </Icon>\n          )\n        }\n      ],\n      layout: 'icon'\n    }\n  ],\n  iconWithCount: [\n    {\n      title: '10 Hosts',\n      content: [\n        {\n          icon: (\n            <Icon status=\"success\">\n              <RhUiCheckCircleFillIcon />\n            </Icon>\n          ),\n          count: 2\n        },\n        {\n          icon: (\n            <Icon status=\"warning\">\n              <RhUiWarningFillIcon />\n            </Icon>\n          ),\n          count: 1\n        }\n      ],\n      layout: 'multiIcon'\n    },\n    {\n      title: '50 Hosts',\n      content: [\n        {\n          icon: (\n            <Icon status=\"success\">\n              <RhUiCheckCircleFillIcon />\n            </Icon>\n          ),\n          count: 5\n        },\n        {\n          icon: (\n            <Icon status=\"danger\">\n              <RhUiErrorFillIcon />\n            </Icon>\n          ),\n          count: 12\n        }\n      ],\n      layout: 'multiIcon'\n    },\n    {\n      title: '12 Hosts',\n      content: [\n        {\n          icon: (\n            <Icon status=\"warning\">\n              <RhUiWarningFillIcon />\n            </Icon>\n          ),\n          count: 3\n        },\n        {\n          icon: (\n            <Icon status=\"danger\">\n              <RhUiErrorFillIcon />\n            </Icon>\n          ),\n          count: 7\n        }\n      ],\n      layout: 'multiIcon'\n    }\n  ],\n  withSubtitle: [\n    {\n      title: '13 Hosts',\n      content: [\n        {\n          icon: (\n            <Icon status=\"danger\">\n              <RhUiErrorFillIcon />\n            </Icon>\n          ),\n          status: '2 errors',\n          subtitle: 'subtitle'\n        },\n        {\n          icon: (\n            <Icon status=\"warning\">\n              <RhUiWarningFillIcon />\n            </Icon>\n          ),\n          status: '1 warning',\n          subtitle: 'subtitle'\n        }\n      ],\n      layout: 'withSubtitle'\n    },\n    {\n      title: '3 Hosts',\n      content: [\n        {\n          icon: (\n            <Icon status=\"success\">\n              <RhUiCheckCircleFillIcon />\n            </Icon>\n          ),\n          status: '2 successes',\n          subtitle: 'subtitle'\n        },\n        {\n          icon: (\n            <Icon status=\"warning\">\n              <RhUiWarningFillIcon />\n            </Icon>\n          ),\n          status: '3 warnings',\n          subtitle: 'subtitle'\n        }\n      ],\n      layout: 'withSubtitle'\n    },\n    {\n      title: '50 Hosts',\n      content: [\n        {\n          icon: (\n            <Icon status=\"warning\">\n              <RhUiWarningFillIcon />\n            </Icon>\n          ),\n          status: '7 warnings',\n          subtitle: 'subtitle'\n        },\n        {\n          icon: (\n            <Icon status=\"danger\">\n              <RhUiErrorFillIcon />\n            </Icon>\n          ),\n          status: '1 error',\n          subtitle: 'subtitle'\n        }\n      ],\n      layout: 'withSubtitle'\n    }\n  ]\n};\n\nexport const CardAggregateStatus: React.FunctionComponent = () => {\n  const renderContent = (content: ContentType[], layout: string) => {\n    if (layout === 'icon') {\n      return content[0].icon;\n    }\n    if (layout === 'multiIcon') {\n      return (\n        <Flex display={{ default: 'inlineFlex' }}>\n          {content.map(({ icon, count }, index: number) => (\n            <Fragment key={index}>\n              <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n                <FlexItem>{icon}</FlexItem>\n                <FlexItem>\n                  <a href=\"#\">{count}</a>\n                </FlexItem>\n              </Flex>\n              {content.length > 1 && index === 0 && (\n                <Divider\n                  key={`${index}_d`}\n                  orientation={{\n                    default: 'vertical'\n                  }}\n                />\n              )}\n            </Fragment>\n          ))}\n        </Flex>\n      );\n    }\n    if (layout === 'withSubtitle') {\n      return (\n        <Flex justifyContent={{ default: 'justifyContentSpaceAround' }}>\n          {content.map(({ icon, status, subtitle }, index: number) => (\n            <Flex key={index}>\n              <FlexItem>{icon}</FlexItem>\n              <Stack>\n                <a href=\"#\">{status}</a>\n                <span>{subtitle}</span>\n              </Stack>\n            </Flex>\n          ))}\n        </Flex>\n      );\n    }\n  };\n  return (\n    <Grid hasGutter>\n      {Object.keys(cardData).map((cardGroup, groupIndex) => {\n        let galleryWidth: string = '';\n        let cardAlign: string;\n        let titleAlign: string;\n        if (cardGroup === 'withSubtitle') {\n          galleryWidth = '260px';\n          cardAlign = '';\n          titleAlign = 'center';\n        } else {\n          cardAlign = 'center';\n        }\n        return (\n          <GridItem key={groupIndex}>\n            <Gallery hasGutter style={{ [cssGridTemplateColumnsMin.name]: galleryWidth } as React.CSSProperties}>\n              {cardData[cardGroup].map(({ title, content, layout }, cardIndex: number) => (\n                <Card\n                  style={{ textAlign: cardAlign } as React.CSSProperties}\n                  key={`${groupIndex}${cardIndex}`}\n                  component=\"div\"\n                >\n                  <CardTitle style={{ textAlign: titleAlign } as React.CSSProperties}>{title}</CardTitle>\n                  <CardBody>{renderContent(content, layout)}</CardBody>\n                </Card>\n              ))}\n            </Gallery>\n          </GridItem>\n        );\n      })}\n    </Grid>\n  );\n};\n","title":"Aggregate status card","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Status': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Alert,\n  Card,\n  CardBody,\n  CardHeader,\n  Divider,\n  Flex,\n  FlexItem,\n  Grid,\n  GridItem,\n  Label,\n  LabelStatus,\n  NotificationDrawer,\n  NotificationDrawerBody,\n  NotificationDrawerGroup,\n  NotificationDrawerList,\n  NotificationDrawerListItem,\n  NotificationDrawerListItemBody,\n  NotificationDrawerListItemHeader,\n  Popover,\n  Title,\n  Icon\n} from '@patternfly/react-core';\nimport { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-error-fill-icon';\nimport t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';\n\nexport const CardStatus: React.FunctionComponent = () => {\n  const [drawerExpanded, setDrawerExpanded] = useState(false);\n  const handleDrawerToggleClick = () => {\n    setDrawerExpanded(!drawerExpanded);\n  };\n\n  const [rowsExpanded, setRowsExpanded] = useState([false, false, false]);\n  const handleToggleExpand = (_: any, rowIndex: number) => {\n    const newRowsExpanded = [...rowsExpanded];\n    newRowsExpanded[rowIndex] = !rowsExpanded[rowIndex];\n    setRowsExpanded(newRowsExpanded);\n  };\n\n  const header = (\n    <CardHeader>\n      <Title headingLevel=\"h4\" size=\"lg\">\n        Status\n      </Title>\n    </CardHeader>\n  );\n\n  const columns = ['Components', 'Response Rate'];\n\n  const rows = [\n    {\n      content: ['API Servers', '20%'],\n      child: (\n        <Alert\n          title=\"This is a critical alert that can be associated with the control panel.\"\n          variant=\"danger\"\n          isInline\n        ></Alert>\n      )\n    },\n    {\n      content: ['Controller Managers', '100%'],\n      child: (\n        <Alert\n          title=\"This is a critical alert that can be associated with the control panel.\"\n          variant=\"danger\"\n          isInline\n        ></Alert>\n      )\n    },\n    {\n      content: ['etcd', '91%'],\n      child: (\n        <Alert\n          title=\"This is a critical alert that can be associated with the control panel.\"\n          variant=\"danger\"\n          isInline\n        ></Alert>\n      )\n    }\n  ];\n\n  const popoverBodyContent = (\n    <>\n      <div>\n        Components of the Control Panel are responsible for maintaining and reconciling the state of the cluster.\n      </div>\n      <Table variant=\"compact\">\n        <Thead>\n          <Tr>\n            <Th screenReaderText=\"Row expansion\" />\n            {columns.map((column, columnIndex) => (\n              <Th key={columnIndex} modifier=\"fitContent\">\n                {column}\n              </Th>\n            ))}\n          </Tr>\n        </Thead>\n        {rows.map((row, rowIndex) => {\n          const parentRow = (\n            <Tr key={rowIndex}>\n              <Td\n                key={`${rowIndex}_0`}\n                expand={row.child && { isExpanded: rowsExpanded[rowIndex], rowIndex, onToggle: handleToggleExpand }}\n              />\n              {row.content.map((cell, cellIndex) => (\n                <Td key={`${rowIndex}_${cellIndex}`} dataLabel={columns[cellIndex]} modifier=\"fitContent\">\n                  {cell}\n                </Td>\n              ))}\n            </Tr>\n          );\n          const childRow = row.child ? (\n            <Tr key={`${rowIndex}_child`} isExpanded={rowsExpanded[rowIndex]}>\n              <Td key={`${rowIndex}_1`} colSpan={3} dataLabel={`${rowIndex}_child`}>\n                <ExpandableRowContent>{row.child}</ExpandableRowContent>\n              </Td>\n            </Tr>\n          ) : null;\n          return (\n            <Tbody key={rowIndex} isExpanded={rowsExpanded[rowIndex]}>\n              {parentRow}\n              {childRow}\n            </Tbody>\n          );\n        })}\n      </Table>\n    </>\n  );\n\n  const body = (\n    <CardBody>\n      <Grid hasGutter sm={6} lg={3}>\n        <GridItem>\n          <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n            <FlexItem>\n              <Icon status=\"success\">\n                <RhUiCheckCircleFillIcon />\n              </Icon>\n            </FlexItem>\n            <FlexItem>\n              <span>Cluster</span>\n            </FlexItem>\n          </Flex>\n        </GridItem>\n        <GridItem>\n          <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n            <FlexItem>\n              <Icon status=\"danger\">\n                <RhUiErrorFillIcon />\n              </Icon>\n            </FlexItem>\n            <FlexItem>\n              <Popover headerContent=\"Control Panel Status\" bodyContent={popoverBodyContent} minWidth=\"400px\">\n                <a href=\"#\" onClick={(e) => e.preventDefault()}>\n                  Control Panel\n                </a>\n              </Popover>\n            </FlexItem>\n          </Flex>\n        </GridItem>\n        <GridItem>\n          <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n            <FlexItem>\n              <Icon status=\"danger\">\n                <RhUiErrorFillIcon />\n              </Icon>\n            </FlexItem>\n            <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>\n              <FlexItem>\n                <a href=\"#\">Operators</a>\n              </FlexItem>\n              <FlexItem>\n                <span style={{ color: t_global_text_color_subtle.var }}>1 degraded</span>\n              </FlexItem>\n            </Flex>\n          </Flex>\n        </GridItem>\n        <GridItem>\n          <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n            <FlexItem>\n              <Icon status=\"success\">\n                <RhUiCheckCircleFillIcon />\n              </Icon>\n            </FlexItem>\n            <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>\n              <FlexItem>\n                <a href=\"#\">Image Vulnerabilities</a>\n              </FlexItem>\n              <FlexItem>\n                <span style={{ color: t_global_text_color_subtle.var }}>0 vulnerabilities</span>\n              </FlexItem>\n            </Flex>\n          </Flex>\n        </GridItem>\n      </Grid>\n    </CardBody>\n  );\n\n  const drawerTitle = (\n    <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n      <FlexItem spacer={{ default: 'spacerMd' }}>\n        <span>Notifications</span>\n      </FlexItem>\n      <Label status={LabelStatus.danger}>1</Label>\n      <Label status={LabelStatus.warning}>3</Label>\n      <Label status={LabelStatus.success}>3</Label>\n      <Label status={LabelStatus.danger}>3</Label>\n      <Label status={LabelStatus.info}>3</Label>\n    </Flex>\n  );\n\n  const drawer = (\n    <NotificationDrawer>\n      <NotificationDrawerBody>\n        <NotificationDrawerGroup\n          count={0}\n          onExpand={handleDrawerToggleClick}\n          isExpanded={drawerExpanded}\n          title={drawerTitle}\n          headingLevel=\"h4\"\n        >\n          <NotificationDrawerList isHidden={!drawerExpanded}>\n            <NotificationDrawerListItem variant=\"danger\">\n              <NotificationDrawerListItemHeader\n                variant=\"danger\"\n                headingLevel=\"h5\"\n                title=\"Critical alert regarding control plane\"\n              />\n              <NotificationDrawerListItemBody>\n                This is a long description to show how the title will wrap if it is long and wraps to multiple lines.\n              </NotificationDrawerListItemBody>\n            </NotificationDrawerListItem>\n            <NotificationDrawerListItem variant=\"warning\">\n              <NotificationDrawerListItemHeader variant=\"warning\" headingLevel=\"h5\" title=\"Warning alert\" />\n              <NotificationDrawerListItemBody>\n                This is a warning notification description.\n              </NotificationDrawerListItemBody>\n            </NotificationDrawerListItem>\n          </NotificationDrawerList>\n        </NotificationDrawerGroup>\n      </NotificationDrawerBody>\n    </NotificationDrawer>\n  );\n\n  return (\n    <Card>\n      {header}\n      {body}\n      <Divider />\n      {drawer}\n    </Card>\n  );\n};\n","title":"Status","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Status Tabbed': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Card,\n  CardBody,\n  CardHeader,\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListGroup,\n  DescriptionListTerm,\n  Flex,\n  FlexItem,\n  Icon,\n  Tab,\n  TabContent,\n  Tabs,\n  TabTitleText,\n  Title\n} from '@patternfly/react-core';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';\n\nconst descriptionListData = [\n  {\n    status: 'Running',\n    resourceName: 'Resource name that is long and can wrap',\n    detail: '121 Systems',\n    icon: (\n      <Icon status=\"success\">\n        <RhUiCheckCircleFillIcon />\n      </Icon>\n    )\n  },\n  {\n    status: 'Failed',\n    resourceName: 'Resource name that is long and can wrap',\n    detail: '123 Systems',\n    icon: (\n      <Icon status=\"danger\">\n        <RhUiErrorFillIcon />\n      </Icon>\n    )\n  },\n  {\n    status: 'Running',\n    resourceName: 'Resource name that is long and can wrap',\n    detail: '122 Systems',\n    icon: (\n      <Icon status=\"success\">\n        <RhUiCheckCircleFillIcon />\n      </Icon>\n    )\n  },\n  {\n    status: 'Failed',\n    resourceName: 'Resource name that is long and can wrap',\n    detail: '124 Systems',\n    icon: (\n      <Icon status=\"danger\">\n        <RhUiErrorFillIcon />\n      </Icon>\n    )\n  }\n];\n\nexport const CardStatusTabbed: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState(0);\n  const handleTabClick = (_e: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {\n    setActiveTabKey(Number(tabIndex));\n  };\n\n  const tabContent = (tabIndex: number) => (\n    <DescriptionList isHorizontal columnModifier={{ lg: '2Col' }} aria-label={`Object ${tabIndex + 1} status`}>\n      {descriptionListData.map(({ status, resourceName, detail, icon }, index) => (\n        <DescriptionListGroup key={index}>\n          <DescriptionListTerm>\n            <Flex>\n              <FlexItem>{icon}</FlexItem>\n              <FlexItem>\n                <Title headingLevel=\"h4\" size=\"md\">\n                  {status}\n                </Title>\n              </FlexItem>\n            </Flex>\n          </DescriptionListTerm>\n          <DescriptionListDescription>\n            <a href=\"#\">{resourceName}</a>\n            <div>{detail}</div>\n          </DescriptionListDescription>\n        </DescriptionListGroup>\n      ))}\n    </DescriptionList>\n  );\n\n  return (\n    <>\n      <Card>\n        <CardHeader>\n          <Title headingLevel=\"h4\" size=\"lg\">\n            Status\n          </Title>\n        </CardHeader>\n        <CardBody>\n          <Tabs isFilled id=\"status-tabs\" activeKey={activeTabKey} onSelect={handleTabClick}>\n            {[1, 2, 3].map((tab, tabIndex) => (\n              <Tab\n                key={tabIndex}\n                eventKey={tabIndex}\n                title={<TabTitleText>{`Object ${tabIndex + 1}`}</TabTitleText>}\n                tabContentId={`tabContent${tabIndex}`}\n              />\n            ))}\n          </Tabs>\n        </CardBody>\n        <CardBody>\n          {[1, 2, 3].map((tab, tabIndex) => (\n            <TabContent\n              key={tabIndex}\n              eventKey={tabIndex}\n              id={`tabContent${tabIndex}`}\n              activeKey={activeTabKey}\n              hidden={tabIndex !== activeTabKey}\n            >\n              {tabContent(tabIndex)}\n            </TabContent>\n          ))}\n        </CardBody>\n      </Card>\n    </>\n  );\n};\n","title":"Status Tabbed","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Utilization card 1': props => 
-    <Example {...pageData} {...props} {...{"code":"import {\n  Card,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  Title,\n  Gallery,\n  GalleryItem,\n  Flex,\n  FlexItem,\n  Stack,\n  Divider\n} from '@patternfly/react-core';\nimport { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';\n\nexport const CardUtilizationDemo1: React.FunctionComponent = () => (\n  <Gallery hasGutter minWidths={{ default: '360px' }}>\n    <GalleryItem>\n      <Card id=\"utilization-card-1-card\" component=\"div\">\n        <CardTitle>\n          <Title headingLevel=\"h4\" size=\"lg\">\n            Top Utilized Clusters\n          </Title>\n        </CardTitle>\n        <CardBody>\n          <Flex direction={{ default: 'column' }}>\n            <FlexItem>\n              <Stack>\n                <b>Cluster-1204</b>\n                <span>27.3 cores available</span>\n              </Stack>\n            </FlexItem>\n            <FlexItem>\n              <ChartGroup\n                ariaDesc=\"Mock average cluster utilization\"\n                ariaTitle=\"Mock cluster sparkline chart\"\n                containerComponent={\n                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n                }\n                height={100}\n                maxDomain={{ y: 9 }}\n                padding={0}\n                width={400}\n              >\n                <ChartArea\n                  data={[\n                    { name: 'Cluster', x: '2015', y: 7 },\n                    { name: 'Cluster', x: '2016', y: 6 },\n                    { name: 'Cluster', x: '2017', y: 8 },\n                    { name: 'Cluster', x: '2018', y: 3 },\n                    { name: 'Cluster', x: '2019', y: 4 },\n                    { name: 'Cluster', x: '2020', y: 1 },\n                    { name: 'Cluster', x: '2021', y: 0 }\n                  ]}\n                />\n              </ChartGroup>\n            </FlexItem>\n            <FlexItem>\n              <a href=\"#\">View details</a>\n            </FlexItem>\n          </Flex>\n        </CardBody>\n        <CardBody>\n          <Flex direction={{ default: 'column' }}>\n            <FlexItem>\n              <Stack>\n                <b>Abcdef-1204</b>\n                <span>50.6 cores available</span>\n              </Stack>\n            </FlexItem>\n            <FlexItem>\n              <ChartGroup\n                ariaDesc=\"Mock average cluster utilization\"\n                ariaTitle=\"Mock cluster sparkline chart\"\n                containerComponent={\n                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n                }\n                height={100}\n                maxDomain={{ y: 9 }}\n                padding={0}\n                width={400}\n              >\n                <ChartArea\n                  data={[\n                    { name: 'Cluster', x: '2015', y: 7 },\n                    { name: 'Cluster', x: '2016', y: 6 },\n                    { name: 'Cluster', x: '2017', y: 8 },\n                    { name: 'Cluster', x: '2018', y: 3 },\n                    { name: 'Cluster', x: '2019', y: 4 },\n                    { name: 'Cluster', x: '2020', y: 1 },\n                    { name: 'Cluster', x: '2021', y: 0 }\n                  ]}\n                />\n              </ChartGroup>\n            </FlexItem>\n            <FlexItem>\n              <a href=\"#\">View details</a>\n            </FlexItem>\n          </Flex>\n        </CardBody>\n        <Divider />\n        <CardFooter>\n          <a href=\"#\">View all clusters</a>\n        </CardFooter>\n      </Card>\n    </GalleryItem>\n  </Gallery>\n);\n","title":"Utilization card 1","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Utilization card 2': props => 
-    <Example {...pageData} {...props} {...{"code":"import {\n  Card,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  Title,\n  Gallery,\n  GalleryItem,\n  Flex,\n  FlexItem,\n  Stack,\n  Divider\n} from '@patternfly/react-core';\nimport { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';\n\nexport const CardUtilizationDemo2: React.FunctionComponent = () => (\n  <Gallery hasGutter minWidths={{ default: '360px' }}>\n    <GalleryItem>\n      <Card id=\"utilization-card-2-card\" component=\"div\">\n        <CardTitle>\n          <Title headingLevel=\"h4\" size=\"lg\">\n            Top Utilized Clusters\n          </Title>\n        </CardTitle>\n        <CardBody>\n          <Flex direction={{ default: 'column' }}>\n            <FlexItem>\n              <Stack>\n                <a href=\"#\">Cluster-1204</a>\n                <span>27.3 cores available</span>\n              </Stack>\n            </FlexItem>\n            <FlexItem>\n              <ChartGroup\n                ariaDesc=\"Mock average cluster utilization\"\n                ariaTitle=\"Mock cluster sparkline chart\"\n                containerComponent={\n                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n                }\n                height={100}\n                maxDomain={{ y: 9 }}\n                padding={0}\n                width={400}\n              >\n                <ChartArea\n                  data={[\n                    { name: 'Cluster', x: '2015', y: 7 },\n                    { name: 'Cluster', x: '2016', y: 6 },\n                    { name: 'Cluster', x: '2017', y: 8 },\n                    { name: 'Cluster', x: '2018', y: 3 },\n                    { name: 'Cluster', x: '2019', y: 4 },\n                    { name: 'Cluster', x: '2020', y: 1 },\n                    { name: 'Cluster', x: '2021', y: 0 }\n                  ]}\n                />\n              </ChartGroup>\n            </FlexItem>\n          </Flex>\n        </CardBody>\n        <CardBody>\n          <Flex direction={{ default: 'column' }}>\n            <FlexItem>\n              <Stack>\n                <a href=\"#\">Abcdef-1204</a>\n                <span>50.6 cores available</span>\n              </Stack>\n            </FlexItem>\n            <FlexItem>\n              <ChartGroup\n                ariaDesc=\"Mock average cluster utilization\"\n                ariaTitle=\"Mock cluster sparkline chart\"\n                containerComponent={\n                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n                }\n                height={100}\n                maxDomain={{ y: 9 }}\n                padding={0}\n                width={400}\n              >\n                <ChartArea\n                  data={[\n                    { name: 'Cluster', x: '2015', y: 7 },\n                    { name: 'Cluster', x: '2016', y: 6 },\n                    { name: 'Cluster', x: '2017', y: 8 },\n                    { name: 'Cluster', x: '2018', y: 3 },\n                    { name: 'Cluster', x: '2019', y: 4 },\n                    { name: 'Cluster', x: '2020', y: 1 },\n                    { name: 'Cluster', x: '2021', y: 0 }\n                  ]}\n                />\n              </ChartGroup>\n            </FlexItem>\n          </Flex>\n        </CardBody>\n        <Divider />\n        <CardFooter>\n          <a href=\"#\">View all clusters</a>\n        </CardFooter>\n      </Card>\n    </GalleryItem>\n  </Gallery>\n);\n","title":"Utilization card 2","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Utilization card 3': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Card,\n  CardTitle,\n  CardHeader,\n  CardBody,\n  CardFooter,\n  Title,\n  Gallery,\n  GalleryItem,\n  Flex,\n  FlexItem,\n  Select,\n  SelectList,\n  SelectOption,\n  MenuToggle,\n  MenuToggleElement,\n  Icon\n} from '@patternfly/react-core';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';\nimport { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts/victory';\nimport chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';\nimport chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';\nimport chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';\nimport chart_color_red_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_red_orange_400';\nimport flex from '@patternfly/react-styles/css/utilities/Flex/flex';\n\nexport const CardUtilizationDemo3: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const selectItems = (\n    <SelectList>\n      <SelectOption key=\"option1\" value=\"Last hour\">\n        Last hour\n      </SelectOption>\n      <SelectOption key=\"option2\" value=\"Last 6 hours\">\n        Last 6 hours\n      </SelectOption>\n      <SelectOption key=\"option3\" value=\"Last 24 hours\">\n        Last 24 hours\n      </SelectOption>\n      <SelectOption key=\"option4\" value=\"Last 7 days\">\n        Last 7 days\n      </SelectOption>\n    </SelectList>\n  );\n\n  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (\n    <MenuToggle ref={toggleRef} onClick={() => setIsOpen(!isOpen)} isExpanded={isOpen} variant=\"plainText\">\n      Filter\n    </MenuToggle>\n  );\n\n  const headerActions = (\n    <Select onSelect={() => setIsOpen(!isOpen)} onOpenChange={setIsOpen} isOpen={isOpen} toggle={toggle}>\n      {selectItems}\n    </Select>\n  );\n\n  return (\n    <Fragment>\n      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}\n      <code>baseline</code> alignment.\n      <br />\n      <br />\n      <Gallery hasGutter minWidths={{ default: '360px' }}>\n        <GalleryItem>\n          <Card id=\"utilization-card-3-card\" component=\"div\">\n            <CardHeader className={flex.alignItemsFlexStart} actions={{ actions: headerActions, hasNoOffset: true }}>\n              <CardTitle>\n                <Title headingLevel=\"h4\" size=\"lg\" style={{ paddingTop: '3px' }}>\n                  Recommendations\n                </Title>\n              </CardTitle>\n            </CardHeader>\n            <CardBody>\n              <Flex direction={{ default: 'column' }}>\n                <FlexItem>\n                  <span>System</span>\n                </FlexItem>\n                <Flex>\n                  <Icon status=\"danger\">\n                    <RhUiErrorFillIcon />\n                  </Icon>\n                  <a href=\"#\">25 incidents detected</a>\n                </Flex>\n                <FlexItem>\n                  <Chart\n                    ariaDesc=\"Mock incidents chart\"\n                    ariaTitle=\"Mock stack chart\"\n                    domainPadding={{ x: [30, 25] }}\n                    legendData={[\n                      { name: 'Low', symbol: { fill: chart_color_yellow_100.value } },\n                      { name: 'Important', symbol: { fill: chart_color_yellow_300.value } },\n                      { name: 'Moderate', symbol: { fill: chart_color_orange_300.value } },\n                      { name: 'Critical', symbol: { fill: chart_color_red_orange_400.value } }\n                    ]}\n                    legendPosition=\"bottom-left\"\n                    height={50}\n                    padding={{\n                      bottom: 40,\n                      left: 0,\n                      right: 0,\n                      top: 0\n                    }}\n                    width={350}\n                    showAxis={false}\n                  >\n                    <ChartStack\n                      horizontal\n                      colorScale={[\n                        chart_color_yellow_100.value,\n                        chart_color_yellow_300.value,\n                        chart_color_orange_300.value,\n                        chart_color_red_orange_400.value\n                      ]}\n                    >\n                      <ChartBar\n                        data={[\n                          {\n                            name: 'Low',\n                            x: 'Cluster A',\n                            y: 6,\n                            label: 'Low: 6'\n                          }\n                        ]}\n                        labelComponent={<ChartTooltip constrainToVisibleArea />}\n                      />\n                      <ChartBar\n                        data={[\n                          {\n                            name: 'Important',\n                            x: 'Cluster A',\n                            y: 2,\n                            label: 'Important: 2'\n                          }\n                        ]}\n                        labelComponent={<ChartTooltip constrainToVisibleArea />}\n                      />\n                      <ChartBar\n                        data={[\n                          {\n                            name: 'Moderate',\n                            x: 'Cluster A',\n                            y: 4,\n                            label: 'Moderate: 4'\n                          }\n                        ]}\n                        labelComponent={<ChartTooltip constrainToVisibleArea />}\n                      />\n                      <ChartBar\n                        data={[\n                          {\n                            name: 'Critical',\n                            x: 'Cluster A',\n                            y: 2,\n                            label: 'Critical: 2'\n                          }\n                        ]}\n                        labelComponent={<ChartTooltip constrainToVisibleArea />}\n                      />\n                    </ChartStack>\n                  </Chart>\n                </FlexItem>\n              </Flex>\n            </CardBody>\n            <CardFooter>\n              <a href=\"#\">See details</a>\n            </CardFooter>\n          </Card>\n        </GalleryItem>\n      </Gallery>\n    </Fragment>\n  );\n};\n","title":"Utilization card 3","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Utilization card 4': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Card, CardTitle, CardBody, CardFooter, Title, Gallery, GalleryItem } from '@patternfly/react-core';\nimport { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory';\n\nexport const CardUtilizationDemo4: React.FunctionComponent = () => (\n  <Gallery hasGutter minWidths={{ default: '360px' }}>\n    <GalleryItem>\n      <Card id=\"utilization-card-4-card\" component=\"div\">\n        <CardTitle>\n          <Title headingLevel=\"h4\" size=\"lg\">\n            CPU Usage\n          </Title>\n        </CardTitle>\n        <CardBody>\n          <ChartDonutThreshold\n            ariaDesc=\"Mock storage capacity\"\n            ariaTitle=\"Mock donut utilization chart\"\n            constrainToVisibleArea={true}\n            data={[\n              { x: 'Warning at 60%', y: 60 },\n              { x: 'Danger at 90%', y: 90 }\n            ]}\n            height={200}\n            labels={({ datum }) => (datum.x ? datum.x : null)}\n            padding={{\n              bottom: 0,\n              left: 10,\n              right: 150,\n              top: 0\n            }}\n            width={350}\n          >\n            <ChartDonutUtilization\n              data={{ x: 'Storage capacity', y: 80 }}\n              labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}\n              legendData={[{ name: `Capacity: 80%` }, { name: 'Warning at 60%' }, { name: 'Danger at 90%' }]}\n              legendOrientation=\"vertical\"\n              title=\"80%\"\n              subTitle=\"of 100 GBps\"\n              thresholds={[{ value: 60 }, { value: 90 }]}\n            />\n          </ChartDonutThreshold>{' '}\n        </CardBody>\n        <CardFooter>\n          <a href=\"#\">See details</a>\n        </CardFooter>\n      </Card>\n    </GalleryItem>\n  </Gallery>\n);\n","title":"Utilization card 4","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Nested cards': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardBody,\n  CardExpandableContent,\n  Checkbox,\n  Title,\n  Divider,\n  Grid,\n  GridItem,\n  Flex,\n  FlexItem\n} from '@patternfly/react-core';\nimport { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';\nimport sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';\nimport accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';\n\nexport const CardNested: React.FunctionComponent = () => {\n  const [isCardExpanded1, onCardExpand1] = useState(true);\n  const [isCardExpanded2, onCardExpand2] = useState(false);\n  const [isCardExpanded3, onCardExpand3] = useState(false);\n  const [isToggleOnRight, onCheckClick] = useState(false);\n\n  return (\n    <>\n      <div style={{ marginBottom: '12px' }}>\n        <Checkbox\n          id=\"isToggleRightAligned\"\n          key=\"isToggleRightAligned\"\n          label=\"Align expand toggle on right\"\n          isChecked={isToggleOnRight}\n          onChange={(_event) => onCheckClick(!isToggleOnRight)}\n        />\n      </div>\n      <Card id=\"nested-cards-card\">\n        <CardHeader>\n          <CardTitle id=\"nested-cards-toggle-title\">\n            <Title headingLevel=\"h4\" size=\"lg\">\n              {' '}\n              Hardware Monitor{' '}\n            </Title>\n          </CardTitle>\n        </CardHeader>\n        <Card id=\"nested-cards-toggle-group-1\" isPlain isExpanded={isCardExpanded1}>\n          <CardHeader\n            onExpand={() => onCardExpand1(!isCardExpanded1)}\n            isToggleRightAligned={isToggleOnRight}\n            toggleButtonProps={{\n              id: 'toggle-button-1',\n              'aria-label': 'Details',\n              'aria-labelledby': 'nested-cards-toggle-group-1-title toggle-button-1',\n              'aria-expanded': isCardExpanded1\n            }}\n          >\n            <CardTitle id=\"nested-cards-toggle-group-1-title\">\n              <span className=\"pf-v6-u-font-weight-light\">CPU 1</span>\n            </CardTitle>\n          </CardHeader>\n          <CardExpandableContent>\n            <CardBody>\n              <Grid hasGutter>\n                <Grid hasGutter>\n                  <GridItem md={4}>\n                    <Flex\n                      className={sizing.h_100OnMd}\n                      direction={{ md: 'column' }}\n                      spaceItems={{ md: 'spaceItemsNone' }}\n                      justifyContent={{ md: 'justifyContentCenter' }}\n                    >\n                      <FlexItem>\n                        <b>Temperature</b>\n                      </FlexItem>\n                      <Divider\n                        className={accessibility.hiddenOnMd}\n                        orientation={{\n                          default: 'vertical'\n                        }}\n                        inset={{ default: 'insetSm' }}\n                      />\n                      <FlexItem>\n                        <span>64C</span>\n                      </FlexItem>\n                    </Flex>\n                  </GridItem>\n                  <GridItem md={8}>\n                    <Grid hasGutter>\n                      <GridItem span={2}>\n                        <Flex\n                          direction={{ default: 'column' }}\n                          spaceItems={{ default: 'spaceItemsNone' }}\n                          alignItems={{ md: 'alignItemsFlexEnd' }}\n                        >\n                          <FlexItem>100C</FlexItem>\n                          <FlexItem>50C</FlexItem>\n                          <FlexItem>0C</FlexItem>\n                        </Flex>\n                      </GridItem>\n                      <GridItem span={10}>\n                        <ChartGroup\n                          ariaDesc=\"Mock CPU temperature\"\n                          ariaTitle=\"Mock CPU temperature sparkline chart\"\n                          containerComponent={\n                            <ChartVoronoiContainer\n                              labels={({ datum }) => `${datum.name}: ${datum.y}`}\n                              constrainToVisibleArea\n                            />\n                          }\n                          height={60}\n                          maxDomain={{ y: 100 }}\n                          padding={0}\n                          width={400}\n                        >\n                          <ChartArea\n                            data={[\n                              { name: 'Temp', x: '1', y: 25 },\n                              { name: 'Temp', x: '2', y: 40 },\n                              { name: 'Temp', x: '3', y: 20 },\n                              { name: 'Temp', x: '4', y: 60 },\n                              { name: 'Temp', x: '5', y: 20 },\n                              { name: 'Temp', x: '6', y: 41 },\n                              { name: 'Temp', x: '7', y: 45 },\n                              { name: 'Temp', x: '8', y: 41 },\n                              { name: 'Temp', x: '9', y: 62 }\n                            ]}\n                          />\n                        </ChartGroup>\n                      </GridItem>\n                    </Grid>\n                  </GridItem>\n                </Grid>\n                <Divider className={accessibility.hiddenOnMd} />\n                <Grid hasGutter>\n                  <GridItem md={4}>\n                    <Flex\n                      className={sizing.h_100OnMd}\n                      direction={{ md: 'column' }}\n                      spaceItems={{ md: 'spaceItemsNone' }}\n                      justifyContent={{ md: 'justifyContentCenter' }}\n                    >\n                      <FlexItem>\n                        <b>Speed</b>\n                      </FlexItem>\n                      <Divider\n                        className={accessibility.hiddenOnMd}\n                        orientation={{\n                          default: 'vertical'\n                        }}\n                        inset={{ default: 'insetSm' }}\n                      />\n                      <FlexItem>\n                        <span>2.3Ghz</span>\n                      </FlexItem>\n                    </Flex>\n                  </GridItem>\n                  <GridItem md={8}>\n                    <Grid hasGutter>\n                      <GridItem span={2}>\n                        <Flex\n                          direction={{ default: 'column' }}\n                          spaceItems={{ default: 'spaceItemsNone' }}\n                          alignItems={{ md: 'alignItemsFlexEnd' }}\n                        >\n                          <FlexItem>3.6Ghz</FlexItem>\n                          <FlexItem>1.5Ghz</FlexItem>\n                          <FlexItem>0GHZ</FlexItem>\n                        </Flex>\n                      </GridItem>\n                      <GridItem span={10}>\n                        <ChartGroup\n                          ariaDesc=\"Mock CPU speed\"\n                          ariaTitle=\"Mock CPU speed sparkline chart\"\n                          containerComponent={\n                            <ChartVoronoiContainer\n                              labels={({ datum }) => `${datum.name}: ${datum.y}`}\n                              constrainToVisibleArea\n                            />\n                          }\n                          height={60}\n                          maxDomain={{ y: 3.6 }}\n                          padding={0}\n                          width={400}\n                        >\n                          <ChartArea\n                            data={[\n                              { name: 'Temp', x: '1', y: 0.9 },\n                              { name: 'Temp', x: '2', y: 1.44 },\n                              { name: 'Temp', x: '3', y: 0.72 },\n                              { name: 'Temp', x: '4', y: 2.16 },\n                              { name: 'Temp', x: '5', y: 0.72 },\n                              { name: 'Temp', x: '6', y: 1.48 },\n                              { name: 'Temp', x: '7', y: 1.62 },\n                              { name: 'Temp', x: '8', y: 1.48 },\n                              { name: 'Temp', x: '9', y: 2.23 }\n                            ]}\n                          />\n                        </ChartGroup>\n                      </GridItem>\n                    </Grid>\n                  </GridItem>\n                </Grid>\n              </Grid>\n            </CardBody>\n          </CardExpandableContent>\n        </Card>\n        <Card id=\"nested-cards-toggle-group-2\" isPlain isExpanded={isCardExpanded3}>\n          <CardHeader\n            onExpand={() => onCardExpand3(!isCardExpanded3)}\n            isToggleRightAligned={isToggleOnRight}\n            toggleButtonProps={{\n              id: 'toggle-button-2',\n              'aria-label': 'Details',\n              'aria-labelledby': 'nested-cards-toggle-group-2-title toggle-button-2',\n              'aria-expanded': isCardExpanded3\n            }}\n          >\n            <CardTitle id=\"nested-cards-toggle-group-2-title\">\n              <span className=\"pf-v6-u-font-weight-light\">CPU 2</span>\n            </CardTitle>\n          </CardHeader>\n          <CardExpandableContent>\n            <CardBody>\n              <Grid hasGutter>\n                <Grid hasGutter>\n                  <GridItem md={4}>\n                    <Flex\n                      className={sizing.h_100OnMd}\n                      direction={{ md: 'column' }}\n                      spaceItems={{ md: 'spaceItemsNone' }}\n                      justifyContent={{ md: 'justifyContentCenter' }}\n                    >\n                      <FlexItem>\n                        <b>Temperature</b>\n                      </FlexItem>\n                      <Divider\n                        className={accessibility.hiddenOnMd}\n                        orientation={{\n                          default: 'vertical'\n                        }}\n                        inset={{ default: 'insetSm' }}\n                      />\n                      <FlexItem>\n                        <span>64C</span>\n                      </FlexItem>\n                    </Flex>\n                  </GridItem>\n                  <GridItem md={8}>\n                    <Grid hasGutter>\n                      <GridItem span={2}>\n                        <Flex\n                          direction={{ default: 'column' }}\n                          spaceItems={{ default: 'spaceItemsNone' }}\n                          alignItems={{ md: 'alignItemsFlexEnd' }}\n                        >\n                          <FlexItem>100C</FlexItem>\n                          <FlexItem>50C</FlexItem>\n                          <FlexItem>0C</FlexItem>\n                        </Flex>\n                      </GridItem>\n                      <GridItem span={10}>\n                        <ChartGroup\n                          ariaDesc=\"Mock CPU temperature\"\n                          ariaTitle=\"Mock CPU temperature sparkline chart\"\n                          containerComponent={\n                            <ChartVoronoiContainer\n                              labels={({ datum }) => `${datum.name}: ${datum.y}`}\n                              constrainToVisibleArea\n                            />\n                          }\n                          height={60}\n                          maxDomain={{ y: 100 }}\n                          padding={0}\n                          width={400}\n                        >\n                          <ChartArea\n                            data={[\n                              { name: 'Temp', x: '1', y: 25 },\n                              { name: 'Temp', x: '2', y: 40 },\n                              { name: 'Temp', x: '3', y: 20 },\n                              { name: 'Temp', x: '4', y: 60 },\n                              { name: 'Temp', x: '5', y: 20 },\n                              { name: 'Temp', x: '6', y: 41 },\n                              { name: 'Temp', x: '7', y: 45 },\n                              { name: 'Temp', x: '8', y: 41 },\n                              { name: 'Temp', x: '9', y: 62 }\n                            ]}\n                          />\n                        </ChartGroup>\n                      </GridItem>\n                    </Grid>\n                  </GridItem>\n                </Grid>\n                <Divider className={accessibility.hiddenOnMd} />\n                <Grid hasGutter>\n                  <GridItem md={4}>\n                    <Flex\n                      className={sizing.h_100OnMd}\n                      direction={{ md: 'column' }}\n                      spaceItems={{ md: 'spaceItemsNone' }}\n                      justifyContent={{ md: 'justifyContentCenter' }}\n                    >\n                      <FlexItem>\n                        <b>Speed</b>\n                      </FlexItem>\n                      <Divider\n                        className={accessibility.hiddenOnMd}\n                        orientation={{\n                          default: 'vertical'\n                        }}\n                        inset={{ default: 'insetSm' }}\n                      />\n                      <FlexItem>\n                        <span>2.3Ghz</span>\n                      </FlexItem>\n                    </Flex>\n                  </GridItem>\n                  <GridItem md={8}>\n                    <Grid hasGutter>\n                      <GridItem span={2}>\n                        <Flex\n                          direction={{ default: 'column' }}\n                          spaceItems={{ default: 'spaceItemsNone' }}\n                          alignItems={{ md: 'alignItemsFlexEnd' }}\n                        >\n                          <FlexItem>3.6Ghz</FlexItem>\n                          <FlexItem>1.5Ghz</FlexItem>\n                          <FlexItem>0GHZ</FlexItem>\n                        </Flex>\n                      </GridItem>\n                      <GridItem span={10}>\n                        <ChartGroup\n                          ariaDesc=\"Mock CPU speed\"\n                          ariaTitle=\"Mock CPU speed sparkline chart\"\n                          containerComponent={\n                            <ChartVoronoiContainer\n                              labels={({ datum }) => `${datum.name}: ${datum.y}`}\n                              constrainToVisibleArea\n                            />\n                          }\n                          height={60}\n                          maxDomain={{ y: 3.6 }}\n                          padding={0}\n                          width={400}\n                        >\n                          <ChartArea\n                            data={[\n                              { name: 'Temp', x: '1', y: 0.9 },\n                              { name: 'Temp', x: '2', y: 1.44 },\n                              { name: 'Temp', x: '3', y: 0.72 },\n                              { name: 'Temp', x: '4', y: 2.16 },\n                              { name: 'Temp', x: '5', y: 0.72 },\n                              { name: 'Temp', x: '6', y: 1.48 },\n                              { name: 'Temp', x: '7', y: 1.62 },\n                              { name: 'Temp', x: '8', y: 1.48 },\n                              { name: 'Temp', x: '9', y: 2.23 }\n                            ]}\n                          />\n                        </ChartGroup>\n                      </GridItem>\n                    </Grid>\n                  </GridItem>\n                </Grid>\n              </Grid>\n            </CardBody>\n          </CardExpandableContent>\n        </Card>\n        <Card id=\"nested-cards-toggle-group-3\" isPlain isExpanded={isCardExpanded2}>\n          <CardHeader\n            onExpand={() => onCardExpand2(!isCardExpanded2)}\n            isToggleRightAligned={isToggleOnRight}\n            toggleButtonProps={{\n              id: 'toggle-button-3',\n              'aria-label': 'Details',\n              'aria-labelledby': 'nested-cards-toggle-group-3-title toggle-button-3',\n              'aria-expanded': isCardExpanded2\n            }}\n          >\n            <CardTitle id=\"nested-cards-toggle-group-3-title\">\n              <span className=\"pf-v6-u-font-weight-light\">CPU 3</span>\n            </CardTitle>\n          </CardHeader>\n          <CardExpandableContent>\n            <CardBody>\n              <Grid hasGutter>\n                <Grid hasGutter>\n                  <GridItem md={4}>\n                    <Flex\n                      className={sizing.h_100OnMd}\n                      direction={{ md: 'column' }}\n                      spaceItems={{ md: 'spaceItemsNone' }}\n                      justifyContent={{ md: 'justifyContentCenter' }}\n                    >\n                      <FlexItem>\n                        <b>Temperature</b>\n                      </FlexItem>\n                      <Divider\n                        className={accessibility.hiddenOnMd}\n                        orientation={{\n                          default: 'vertical'\n                        }}\n                        inset={{ default: 'insetSm' }}\n                      />\n                      <FlexItem>\n                        <span>64C</span>\n                      </FlexItem>\n                    </Flex>\n                  </GridItem>\n                  <GridItem md={8}>\n                    <Grid hasGutter>\n                      <GridItem span={2}>\n                        <Flex\n                          direction={{ default: 'column' }}\n                          spaceItems={{ default: 'spaceItemsNone' }}\n                          alignItems={{ md: 'alignItemsFlexEnd' }}\n                        >\n                          <FlexItem>100C</FlexItem>\n                          <FlexItem>50C</FlexItem>\n                          <FlexItem>0C</FlexItem>\n                        </Flex>\n                      </GridItem>\n                      <GridItem span={10}>\n                        <ChartGroup\n                          ariaDesc=\"Mock CPU temperature\"\n                          ariaTitle=\"Mock CPU temperature sparkline chart\"\n                          containerComponent={\n                            <ChartVoronoiContainer\n                              labels={({ datum }) => `${datum.name}: ${datum.y}`}\n                              constrainToVisibleArea\n                            />\n                          }\n                          height={60}\n                          maxDomain={{ y: 100 }}\n                          padding={0}\n                          width={400}\n                        >\n                          <ChartArea\n                            data={[\n                              { name: 'Temp', x: '1', y: 25 },\n                              { name: 'Temp', x: '2', y: 40 },\n                              { name: 'Temp', x: '3', y: 20 },\n                              { name: 'Temp', x: '4', y: 60 },\n                              { name: 'Temp', x: '5', y: 20 },\n                              { name: 'Temp', x: '6', y: 41 },\n                              { name: 'Temp', x: '7', y: 45 },\n                              { name: 'Temp', x: '8', y: 41 },\n                              { name: 'Temp', x: '9', y: 62 }\n                            ]}\n                          />\n                        </ChartGroup>\n                      </GridItem>\n                    </Grid>\n                  </GridItem>\n                </Grid>\n                <Divider className={accessibility.hiddenOnMd} />\n                <Grid hasGutter>\n                  <GridItem md={4}>\n                    <Flex\n                      className={sizing.h_100OnMd}\n                      direction={{ md: 'column' }}\n                      spaceItems={{ md: 'spaceItemsNone' }}\n                      justifyContent={{ md: 'justifyContentCenter' }}\n                    >\n                      <FlexItem>\n                        <b>Speed</b>\n                      </FlexItem>\n                      <Divider\n                        className={accessibility.hiddenOnMd}\n                        orientation={{\n                          default: 'vertical'\n                        }}\n                        inset={{ default: 'insetSm' }}\n                      />\n                      <FlexItem>\n                        <span>2.3Ghz</span>\n                      </FlexItem>\n                    </Flex>\n                  </GridItem>\n                  <GridItem md={8}>\n                    <Grid hasGutter>\n                      <GridItem span={2}>\n                        <Flex\n                          direction={{ default: 'column' }}\n                          spaceItems={{ default: 'spaceItemsNone' }}\n                          alignItems={{ md: 'alignItemsFlexEnd' }}\n                        >\n                          <FlexItem>3.6Ghz</FlexItem>\n                          <FlexItem>1.5Ghz</FlexItem>\n                          <FlexItem>0GHZ</FlexItem>\n                        </Flex>\n                      </GridItem>\n                      <GridItem span={10}>\n                        <ChartGroup\n                          ariaDesc=\"Mock CPU speed\"\n                          ariaTitle=\"Mock CPU speed sparkline chart\"\n                          containerComponent={\n                            <ChartVoronoiContainer\n                              labels={({ datum }) => `${datum.name}: ${datum.y}`}\n                              constrainToVisibleArea\n                            />\n                          }\n                          height={60}\n                          maxDomain={{ y: 3.6 }}\n                          padding={0}\n                          width={400}\n                        >\n                          <ChartArea\n                            data={[\n                              { name: 'Temp', x: '1', y: 0.9 },\n                              { name: 'Temp', x: '2', y: 1.44 },\n                              { name: 'Temp', x: '3', y: 0.72 },\n                              { name: 'Temp', x: '4', y: 2.16 },\n                              { name: 'Temp', x: '5', y: 0.72 },\n                              { name: 'Temp', x: '6', y: 1.48 },\n                              { name: 'Temp', x: '7', y: 1.62 },\n                              { name: 'Temp', x: '8', y: 1.48 },\n                              { name: 'Temp', x: '9', y: 2.23 }\n                            ]}\n                          />\n                        </ChartGroup>\n                      </GridItem>\n                    </Grid>\n                  </GridItem>\n                </Grid>\n              </Grid>\n            </CardBody>\n          </CardExpandableContent>\n        </Card>\n      </Card>\n    </>\n  );\n};\n","title":"Nested cards","lang":"ts","className":""}}>
-      
-    </Example>,
-  'With accordion': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Card,\n  CardTitle,\n  CardBody,\n  CardHeader,\n  Title,\n  Accordion,\n  AccordionItem,\n  AccordionToggle,\n  AccordionContent,\n  Divider,\n  Grid,\n  GridItem,\n  Flex,\n  FlexItem\n} from '@patternfly/react-core';\nimport { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';\nimport sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';\nimport accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';\n\nexport const CardWithAccordion: React.FunctionComponent = () => {\n  const [openCPU, setOpenCPU] = useState('cpu1');\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>\n          <Title headingLevel=\"h4\" size=\"lg\">\n            Hardware Monitor\n          </Title>\n        </CardTitle>\n      </CardHeader>\n      <CardBody>\n        <Accordion>\n          <AccordionItem isExpanded={openCPU === 'cpu1'}>\n            <AccordionToggle\n              id=\"cpu1-toggle\"\n              onClick={() => {\n                if (openCPU === 'cpu1') {\n                  setOpenCPU(null);\n                } else {\n                  setOpenCPU('cpu1');\n                }\n              }}\n            >\n              CPU 1\n            </AccordionToggle>\n            <AccordionContent>\n              <Grid hasGutter>\n                <Grid hasGutter>\n                  <GridItem md={4}>\n                    <Flex\n                      className={sizing.h_100OnMd}\n                      direction={{ md: 'column' }}\n                      spaceItems={{ md: 'spaceItemsNone' }}\n                      justifyContent={{ md: 'justifyContentCenter' }}\n                    >\n                      <FlexItem>\n                        <b>Temperature</b>\n                      </FlexItem>\n                      <Divider\n                        className={accessibility.hiddenOnMd}\n                        orientation={{\n                          default: 'vertical'\n                        }}\n                        inset={{ default: 'insetSm' }}\n                      />\n                      <FlexItem>\n                        <span>64C</span>\n                      </FlexItem>\n                    </Flex>\n                  </GridItem>\n                  <GridItem md={8}>\n                    <Grid hasGutter>\n                      <GridItem span={2}>\n                        <Flex\n                          direction={{ default: 'column' }}\n                          spaceItems={{ default: 'spaceItemsNone' }}\n                          alignItems={{ md: 'alignItemsFlexEnd' }}\n                        >\n                          <FlexItem>100C</FlexItem>\n                          <FlexItem>50C</FlexItem>\n                          <FlexItem>0C</FlexItem>\n                        </Flex>\n                      </GridItem>\n                      <GridItem span={10}>\n                        <ChartGroup\n                          ariaDesc=\"Mock CPU temperature\"\n                          ariaTitle=\"Mock CPU temperature sparkline chart\"\n                          containerComponent={\n                            <ChartVoronoiContainer\n                              labels={({ datum }) => `${datum.name}: ${datum.y}`}\n                              constrainToVisibleArea\n                            />\n                          }\n                          height={60}\n                          maxDomain={{ y: 100 }}\n                          padding={0}\n                          width={400}\n                        >\n                          <ChartArea\n                            data={[\n                              { name: 'Temp', x: '1', y: 25 },\n                              { name: 'Temp', x: '2', y: 40 },\n                              { name: 'Temp', x: '3', y: 20 },\n                              { name: 'Temp', x: '4', y: 60 },\n                              { name: 'Temp', x: '5', y: 20 },\n                              { name: 'Temp', x: '6', y: 41 },\n                              { name: 'Temp', x: '7', y: 45 },\n                              { name: 'Temp', x: '8', y: 41 },\n                              { name: 'Temp', x: '9', y: 62 }\n                            ]}\n                          />\n                        </ChartGroup>\n                      </GridItem>\n                    </Grid>\n                  </GridItem>\n                </Grid>\n                <Divider className={accessibility.hiddenOnMd} />\n                <Grid hasGutter>\n                  <GridItem md={4}>\n                    <Flex\n                      className={sizing.h_100OnMd}\n                      direction={{ md: 'column' }}\n                      spaceItems={{ md: 'spaceItemsNone' }}\n                      justifyContent={{ md: 'justifyContentCenter' }}\n                    >\n                      <FlexItem>\n                        <b>Speed</b>\n                      </FlexItem>\n                      <Divider\n                        className={accessibility.hiddenOnMd}\n                        orientation={{\n                          default: 'vertical'\n                        }}\n                        inset={{ default: 'insetSm' }}\n                      />\n                      <FlexItem>\n                        <span>2.3Ghz</span>\n                      </FlexItem>\n                    </Flex>\n                  </GridItem>\n                  <GridItem md={8}>\n                    <Grid hasGutter>\n                      <GridItem span={2}>\n                        <Flex\n                          direction={{ default: 'column' }}\n                          spaceItems={{ default: 'spaceItemsNone' }}\n                          alignItems={{ md: 'alignItemsFlexEnd' }}\n                        >\n                          <FlexItem>3.6Ghz</FlexItem>\n                          <FlexItem>1.5Ghz</FlexItem>\n                          <FlexItem>0GHZ</FlexItem>\n                        </Flex>\n                      </GridItem>\n                      <GridItem span={10}>\n                        <ChartGroup\n                          ariaDesc=\"Mock CPU speed\"\n                          ariaTitle=\"Mock CPU speed sparkline chart\"\n                          containerComponent={\n                            <ChartVoronoiContainer\n                              labels={({ datum }) => `${datum.name}: ${datum.y}`}\n                              constrainToVisibleArea\n                            />\n                          }\n                          height={60}\n                          maxDomain={{ y: 3.6 }}\n                          padding={0}\n                          width={400}\n                        >\n                          <ChartArea\n                            data={[\n                              { name: 'Temp', x: '1', y: 0.9 },\n                              { name: 'Temp', x: '2', y: 1.44 },\n                              { name: 'Temp', x: '3', y: 0.72 },\n                              { name: 'Temp', x: '4', y: 2.16 },\n                              { name: 'Temp', x: '5', y: 0.72 },\n                              { name: 'Temp', x: '6', y: 1.48 },\n                              { name: 'Temp', x: '7', y: 1.62 },\n                              { name: 'Temp', x: '8', y: 1.48 },\n                              { name: 'Temp', x: '9', y: 2.23 }\n                            ]}\n                          />\n                        </ChartGroup>\n                      </GridItem>\n                    </Grid>\n                  </GridItem>\n                </Grid>\n              </Grid>\n            </AccordionContent>\n          </AccordionItem>\n          <AccordionItem isExpanded={openCPU === 'cpu2'}>\n            <AccordionToggle\n              id=\"cpu2-toggle\"\n              onClick={() => {\n                if (openCPU === 'cpu2') {\n                  setOpenCPU(null);\n                } else {\n                  setOpenCPU('cpu2');\n                }\n              }}\n            >\n              CPU 2\n            </AccordionToggle>\n            <AccordionContent>\n              <Grid hasGutter>\n                <Grid hasGutter>\n                  <GridItem md={4}>\n                    <Flex\n                      className={sizing.h_100OnMd}\n                      direction={{ md: 'column' }}\n                      spaceItems={{ md: 'spaceItemsNone' }}\n                      justifyContent={{ md: 'justifyContentCenter' }}\n                    >\n                      <FlexItem>\n                        <b>Temperature</b>\n                      </FlexItem>\n                      <Divider\n                        className={accessibility.hiddenOnMd}\n                        orientation={{\n                          default: 'vertical'\n                        }}\n                        inset={{ default: 'insetSm' }}\n                      />\n                      <FlexItem>\n                        <span>64C</span>\n                      </FlexItem>\n                    </Flex>\n                  </GridItem>\n                  <GridItem md={8}>\n                    <Grid hasGutter>\n                      <GridItem span={2}>\n                        <Flex\n                          direction={{ default: 'column' }}\n                          spaceItems={{ default: 'spaceItemsNone' }}\n                          alignItems={{ md: 'alignItemsFlexEnd' }}\n                        >\n                          <FlexItem>100C</FlexItem>\n                          <FlexItem>50C</FlexItem>\n                          <FlexItem>0C</FlexItem>\n                        </Flex>\n                      </GridItem>\n                      <GridItem span={10}>\n                        <ChartGroup\n                          ariaDesc=\"Mock CPU temperature\"\n                          ariaTitle=\"Mock CPU temperature sparkline chart\"\n                          containerComponent={\n                            <ChartVoronoiContainer\n                              labels={({ datum }) => `${datum.name}: ${datum.y}`}\n                              constrainToVisibleArea\n                            />\n                          }\n                          height={60}\n                          maxDomain={{ y: 100 }}\n                          padding={0}\n                          width={400}\n                        >\n                          <ChartArea\n                            data={[\n                              { name: 'Temp', x: '1', y: 25 },\n                              { name: 'Temp', x: '2', y: 40 },\n                              { name: 'Temp', x: '3', y: 20 },\n                              { name: 'Temp', x: '4', y: 60 },\n                              { name: 'Temp', x: '5', y: 20 },\n                              { name: 'Temp', x: '6', y: 41 },\n                              { name: 'Temp', x: '7', y: 45 },\n                              { name: 'Temp', x: '8', y: 41 },\n                              { name: 'Temp', x: '9', y: 62 }\n                            ]}\n                          />\n                        </ChartGroup>\n                      </GridItem>\n                    </Grid>\n                  </GridItem>\n                </Grid>\n                <Divider className={accessibility.hiddenOnMd} />\n                <Grid hasGutter>\n                  <GridItem md={4}>\n                    <Flex\n                      className={sizing.h_100OnMd}\n                      direction={{ md: 'column' }}\n                      spaceItems={{ md: 'spaceItemsNone' }}\n                      justifyContent={{ md: 'justifyContentCenter' }}\n                    >\n                      <FlexItem>\n                        <b>Speed</b>\n                      </FlexItem>\n                      <Divider\n                        className={accessibility.hiddenOnMd}\n                        orientation={{\n                          default: 'vertical'\n                        }}\n                        inset={{ default: 'insetSm' }}\n                      />\n                      <FlexItem>\n                        <span>2.3Ghz</span>\n                      </FlexItem>\n                    </Flex>\n                  </GridItem>\n                  <GridItem md={8}>\n                    <Grid hasGutter>\n                      <GridItem span={2}>\n                        <Flex\n                          direction={{ default: 'column' }}\n                          spaceItems={{ default: 'spaceItemsNone' }}\n                          alignItems={{ md: 'alignItemsFlexEnd' }}\n                        >\n                          <FlexItem>3.6Ghz</FlexItem>\n                          <FlexItem>1.5Ghz</FlexItem>\n                          <FlexItem>0GHZ</FlexItem>\n                        </Flex>\n                      </GridItem>\n                      <GridItem span={10}>\n                        <ChartGroup\n                          ariaDesc=\"Mock CPU speed\"\n                          ariaTitle=\"Mock CPU speed sparkline chart\"\n                          containerComponent={\n                            <ChartVoronoiContainer\n                              labels={({ datum }) => `${datum.name}: ${datum.y}`}\n                              constrainToVisibleArea\n                            />\n                          }\n                          height={60}\n                          maxDomain={{ y: 3.6 }}\n                          padding={0}\n                          width={400}\n                        >\n                          <ChartArea\n                            data={[\n                              { name: 'Temp', x: '1', y: 0.9 },\n                              { name: 'Temp', x: '2', y: 1.44 },\n                              { name: 'Temp', x: '3', y: 0.72 },\n                              { name: 'Temp', x: '4', y: 2.16 },\n                              { name: 'Temp', x: '5', y: 0.72 },\n                              { name: 'Temp', x: '6', y: 1.48 },\n                              { name: 'Temp', x: '7', y: 1.62 },\n                              { name: 'Temp', x: '8', y: 1.48 },\n                              { name: 'Temp', x: '9', y: 2.23 }\n                            ]}\n                          />\n                        </ChartGroup>\n                      </GridItem>\n                    </Grid>\n                  </GridItem>\n                </Grid>\n              </Grid>\n            </AccordionContent>\n          </AccordionItem>\n          <AccordionItem isExpanded={openCPU === 'cpu3'}>\n            <AccordionToggle\n              id=\"cpu3-toggle\"\n              onClick={() => {\n                if (openCPU === 'cpu3') {\n                  setOpenCPU(null);\n                } else {\n                  setOpenCPU('cpu3');\n                }\n              }}\n            >\n              CPU 3\n            </AccordionToggle>\n            <AccordionContent>\n              <Grid hasGutter>\n                <Grid hasGutter>\n                  <GridItem md={4}>\n                    <Flex\n                      className={sizing.h_100OnMd}\n                      direction={{ md: 'column' }}\n                      spaceItems={{ md: 'spaceItemsNone' }}\n                      justifyContent={{ md: 'justifyContentCenter' }}\n                    >\n                      <FlexItem>\n                        <b>Temperature</b>\n                      </FlexItem>\n                      <Divider\n                        className={accessibility.hiddenOnMd}\n                        orientation={{\n                          default: 'vertical'\n                        }}\n                        inset={{ default: 'insetSm' }}\n                      />\n                      <FlexItem>\n                        <span>64C</span>\n                      </FlexItem>\n                    </Flex>\n                  </GridItem>\n                  <GridItem md={8}>\n                    <Grid hasGutter>\n                      <GridItem span={2}>\n                        <Flex\n                          direction={{ default: 'column' }}\n                          spaceItems={{ default: 'spaceItemsNone' }}\n                          alignItems={{ md: 'alignItemsFlexEnd' }}\n                        >\n                          <FlexItem>100C</FlexItem>\n                          <FlexItem>50C</FlexItem>\n                          <FlexItem>0C</FlexItem>\n                        </Flex>\n                      </GridItem>\n                      <GridItem span={10}>\n                        <ChartGroup\n                          ariaDesc=\"Mock CPU temperature\"\n                          ariaTitle=\"Mock CPU temperature sparkline chart\"\n                          containerComponent={\n                            <ChartVoronoiContainer\n                              labels={({ datum }) => `${datum.name}: ${datum.y}`}\n                              constrainToVisibleArea\n                            />\n                          }\n                          height={60}\n                          maxDomain={{ y: 100 }}\n                          padding={0}\n                          width={400}\n                        >\n                          <ChartArea\n                            data={[\n                              { name: 'Temp', x: '1', y: 25 },\n                              { name: 'Temp', x: '2', y: 40 },\n                              { name: 'Temp', x: '3', y: 20 },\n                              { name: 'Temp', x: '4', y: 60 },\n                              { name: 'Temp', x: '5', y: 20 },\n                              { name: 'Temp', x: '6', y: 41 },\n                              { name: 'Temp', x: '7', y: 45 },\n                              { name: 'Temp', x: '8', y: 41 },\n                              { name: 'Temp', x: '9', y: 62 }\n                            ]}\n                          />\n                        </ChartGroup>\n                      </GridItem>\n                    </Grid>\n                  </GridItem>\n                </Grid>\n                <Divider className={accessibility.hiddenOnMd} />\n                <Grid hasGutter>\n                  <GridItem md={4}>\n                    <Flex\n                      className={sizing.h_100OnMd}\n                      direction={{ md: 'column' }}\n                      spaceItems={{ md: 'spaceItemsNone' }}\n                      justifyContent={{ md: 'justifyContentCenter' }}\n                    >\n                      <FlexItem>\n                        <b>Speed</b>\n                      </FlexItem>\n                      <Divider\n                        className={accessibility.hiddenOnMd}\n                        orientation={{\n                          default: 'vertical'\n                        }}\n                        inset={{ default: 'insetSm' }}\n                      />\n                      <FlexItem>\n                        <span>2.3Ghz</span>\n                      </FlexItem>\n                    </Flex>\n                  </GridItem>\n                  <GridItem md={8}>\n                    <Grid hasGutter>\n                      <GridItem span={2}>\n                        <Flex\n                          direction={{ default: 'column' }}\n                          spaceItems={{ default: 'spaceItemsNone' }}\n                          alignItems={{ md: 'alignItemsFlexEnd' }}\n                        >\n                          <FlexItem>3.6Ghz</FlexItem>\n                          <FlexItem>1.5Ghz</FlexItem>\n                          <FlexItem>0GHZ</FlexItem>\n                        </Flex>\n                      </GridItem>\n                      <GridItem span={10}>\n                        <ChartGroup\n                          ariaDesc=\"Mock CPU speed\"\n                          ariaTitle=\"Mock CPU speed sparkline chart\"\n                          containerComponent={\n                            <ChartVoronoiContainer\n                              labels={({ datum }) => `${datum.name}: ${datum.y}`}\n                              constrainToVisibleArea\n                            />\n                          }\n                          height={60}\n                          maxDomain={{ y: 3.6 }}\n                          padding={0}\n                          width={400}\n                        >\n                          <ChartArea\n                            data={[\n                              { name: 'Temp', x: '1', y: 0.9 },\n                              { name: 'Temp', x: '2', y: 1.44 },\n                              { name: 'Temp', x: '3', y: 0.72 },\n                              { name: 'Temp', x: '4', y: 2.16 },\n                              { name: 'Temp', x: '5', y: 0.72 },\n                              { name: 'Temp', x: '6', y: 1.48 },\n                              { name: 'Temp', x: '7', y: 1.62 },\n                              { name: 'Temp', x: '8', y: 1.48 },\n                              { name: 'Temp', x: '9', y: 2.23 }\n                            ]}\n                          />\n                        </ChartGroup>\n                      </GridItem>\n                    </Grid>\n                  </GridItem>\n                </Grid>\n              </Grid>\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      </CardBody>\n    </Card>\n  );\n};\n","title":"With accordion","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Trend card 1': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Card,\n  CardTitle,\n  CardBody,\n  CardHeader,\n  Title,\n  Gallery,\n  GalleryItem,\n  Flex,\n  FlexItem,\n  Select,\n  SelectList,\n  SelectOption,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';\n\nexport const CardTrendDemo1: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const selectItems = (\n    <SelectList>\n      <SelectOption key=\"option1\" value=\"Last hour\">\n        Last hour\n      </SelectOption>\n      <SelectOption key=\"option2\" value=\"Last 6 hours\">\n        Last 6 hours\n      </SelectOption>\n      <SelectOption key=\"option3\" value=\"Last 24 hours\">\n        Last 24 hours\n      </SelectOption>\n      <SelectOption key=\"option4\" value=\"Last 7 days\">\n        Last 7 days\n      </SelectOption>\n    </SelectList>\n  );\n\n  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (\n    <MenuToggle ref={toggleRef} onClick={() => setIsOpen(!isOpen)} isExpanded={isOpen} variant=\"plainText\">\n      Filter\n    </MenuToggle>\n  );\n\n  const headerActions = (\n    <Select onSelect={() => setIsOpen(!isOpen)} onOpenChange={setIsOpen} isOpen={isOpen} toggle={toggle}>\n      {selectItems}\n    </Select>\n  );\n\n  return (\n    <Fragment>\n      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}\n      <code>baseline</code> alignment.\n      <br />\n      <br />\n      <Gallery hasGutter minWidths={{ default: '360px' }}>\n        <GalleryItem>\n          <Card id=\"trend-card-1-card\" component=\"div\">\n            <CardHeader actions={{ actions: headerActions, hasNoOffset: true }}>\n              <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>\n                <FlexItem>\n                  <CardTitle>\n                    <Title headingLevel=\"h4\" size=\"lg\">\n                      1,050,765 IOPS\n                    </Title>\n                  </CardTitle>\n                </FlexItem>\n                <FlexItem>\n                  <span>Workload</span>\n                </FlexItem>\n              </Flex>\n            </CardHeader>\n            <CardBody>\n              <ChartGroup\n                ariaDesc=\"Mock average cluster utilization\"\n                ariaTitle=\"Mock cluster sparkline chart\"\n                containerComponent={\n                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n                }\n                height={100}\n                maxDomain={{ y: 9 }}\n                padding={0}\n                width={400}\n              >\n                <ChartArea\n                  data={[\n                    { name: 'Cluster', x: '2015', y: 7 },\n                    { name: 'Cluster', x: '2016', y: 6 },\n                    { name: 'Cluster', x: '2017', y: 8 },\n                    { name: 'Cluster', x: '2018', y: 3 },\n                    { name: 'Cluster', x: '2019', y: 4 },\n                    { name: 'Cluster', x: '2020', y: 1 },\n                    { name: 'Cluster', x: '2021', y: 0 }\n                  ]}\n                />\n              </ChartGroup>\n            </CardBody>\n          </Card>\n        </GalleryItem>\n      </Gallery>\n    </Fragment>\n  );\n};\n","title":"Trend card 1","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Trend card 2': props => 
-    <Example {...pageData} {...props} {...{"code":"import {\n  Card,\n  CardTitle,\n  CardFooter,\n  CardHeader,\n  Title,\n  Gallery,\n  GalleryItem,\n  Flex,\n  FlexItem\n} from '@patternfly/react-core';\nimport { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';\n\nexport const CardTrendDemo2: React.FunctionComponent = () => (\n  <Gallery hasGutter minWidths={{ default: '360px' }}>\n    <GalleryItem>\n      <Card id=\"trend-card-2-card\" component=\"div\">\n        <CardHeader>\n          <Flex alignItems={{ default: 'alignItemsCenter' }}>\n            <FlexItem flex={{ default: 'flexNone' }}>\n              <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>\n                <FlexItem>\n                  <CardTitle>\n                    <Title headingLevel=\"h4\" size=\"2xl\">\n                      842 TB\n                    </Title>\n                  </CardTitle>\n                </FlexItem>\n                <FlexItem>\n                  <span>Storage capacity</span>\n                </FlexItem>\n              </Flex>\n            </FlexItem>\n            <FlexItem flex={{ default: 'flex_1' }}>\n              <ChartGroup\n                ariaDesc=\"Mock average cluster utilization\"\n                ariaTitle=\"Mock cluster sparkline chart\"\n                containerComponent={\n                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n                }\n                height={100}\n                maxDomain={{ y: 9 }}\n                padding={0}\n                width={400}\n              >\n                <ChartArea\n                  data={[\n                    { name: 'Cluster', x: '2015', y: 7 },\n                    { name: 'Cluster', x: '2016', y: 6 },\n                    { name: 'Cluster', x: '2017', y: 8 },\n                    { name: 'Cluster', x: '2018', y: 3 },\n                    { name: 'Cluster', x: '2019', y: 4 },\n                    { name: 'Cluster', x: '2020', y: 1 },\n                    { name: 'Cluster', x: '2021', y: 0 }\n                  ]}\n                />\n              </ChartGroup>\n            </FlexItem>\n          </Flex>\n        </CardHeader>\n        <CardFooter>\n          <Flex>\n            <FlexItem>\n              <a href=\"#\">Action 1</a>\n            </FlexItem>\n            <FlexItem>\n              <a href=\"#\">Action 2</a>\n            </FlexItem>\n          </Flex>\n        </CardFooter>\n      </Card>\n    </GalleryItem>\n  </Gallery>\n);\n","title":"Trend card 2","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Log view': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  DescriptionList,\n  DescriptionListGroup,\n  DescriptionListTerm,\n  DescriptionListDescription,\n  Divider,\n  Gallery,\n  MenuToggle,\n  MenuToggleElement,\n  Select,\n  SelectList,\n  SelectOption,\n  Timestamp,\n  Title\n} from '@patternfly/react-core';\nimport flex from '@patternfly/react-styles/css/utilities/Flex/flex';\nimport cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';\n\nexport const CardLogView: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const selectItems = (\n    <SelectList>\n      <SelectOption key=\"option1\" value=\"Last hour\">\n        Last hour\n      </SelectOption>\n      <SelectOption key=\"option2\" value=\"Last 6 hours\">\n        Last 6 hours\n      </SelectOption>\n      <SelectOption key=\"option3\" value=\"Last 24 hours\">\n        Last 24 hours\n      </SelectOption>\n      <SelectOption key=\"option4\" value=\"Last 7 days\">\n        Last 7 days\n      </SelectOption>\n    </SelectList>\n  );\n\n  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (\n    <MenuToggle ref={toggleRef} onClick={() => setIsOpen(!isOpen)} isExpanded={isOpen} variant=\"plainText\">\n      Filter\n    </MenuToggle>\n  );\n\n  const headerActions = (\n    <Select onSelect={() => setIsOpen(!isOpen)} onOpenChange={setIsOpen} isOpen={isOpen} toggle={toggle}>\n      {selectItems}\n    </Select>\n  );\n\n  return (\n    <Fragment>\n      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}\n      <code>baseline</code> alignment.\n      <br />\n      <br />\n      <Gallery hasGutter style={{ [cssGridTemplateColumnsMin.name]: '360px' } as React.CSSProperties}>\n        <Card id=\"card-log-view-example\">\n          <CardHeader className={flex.alignItemsFlexStart} actions={{ actions: headerActions, hasNoOffset: true }}>\n            <CardTitle>\n              <Title headingLevel=\"h4\" size=\"xl\" style={{ paddingTop: '3px' }}>\n                Activity\n              </Title>\n            </CardTitle>\n          </CardHeader>\n          <CardBody>\n            <DescriptionList aria-label=\"Activity logs\">\n              <DescriptionListGroup>\n                <DescriptionListTerm>Readiness probe failed</DescriptionListTerm>\n                <DescriptionListDescription>\n                  Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect:\n                  connection refused\n                </DescriptionListDescription>\n                <DescriptionListDescription>\n                  <Timestamp date={new Date('2023-06-17T11:02')} dateFormat=\"medium\" timeFormat=\"short\" />\n                </DescriptionListDescription>\n              </DescriptionListGroup>\n              <DescriptionListGroup>\n                <DescriptionListTerm>Successful assignment</DescriptionListTerm>\n                <DescriptionListDescription>\n                  Successfully assigned default/example to ip-10-0-130-149.ec2.internal\n                </DescriptionListDescription>\n                <DescriptionListDescription>\n                  <Timestamp date={new Date('2023-06-17T11:13')} dateFormat=\"medium\" timeFormat=\"short\" />\n                </DescriptionListDescription>\n              </DescriptionListGroup>\n              <DescriptionListGroup>\n                <DescriptionListTerm>Pulling image</DescriptionListTerm>\n                <DescriptionListDescription>Pulling image \"openshift/hello-openshift\"</DescriptionListDescription>\n                <DescriptionListDescription>\n                  <Timestamp date={new Date('2023-06-17T10:59')} dateFormat=\"medium\" timeFormat=\"short\" />\n                </DescriptionListDescription>\n              </DescriptionListGroup>\n              <DescriptionListGroup>\n                <DescriptionListTerm>Created container</DescriptionListTerm>\n                <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>\n                <DescriptionListDescription>\n                  <Timestamp date={new Date('2023-06-17T10:45')} dateFormat=\"medium\" timeFormat=\"short\" />\n                </DescriptionListDescription>\n              </DescriptionListGroup>\n            </DescriptionList>\n          </CardBody>\n          <Divider />\n          <CardFooter>\n            <a href=\"#\">View all activity</a>\n          </CardFooter>\n        </Card>\n      </Gallery>\n    </Fragment>\n  );\n};\n","title":"Log view","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Events view': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  DescriptionList,\n  DescriptionListGroup,\n  DescriptionListTerm,\n  DescriptionListDescription,\n  Divider,\n  Flex,\n  FlexItem,\n  Gallery,\n  Icon,\n  MenuToggle,\n  Select,\n  SelectList,\n  SelectOption,\n  Spinner,\n  Timestamp,\n  Title\n} from '@patternfly/react-core';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';\nimport flex from '@patternfly/react-styles/css/utilities/Flex/flex';\nimport cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';\n\nexport const CardEventsView: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const selectItems = (\n    <SelectList>\n      <SelectOption value=\"Success\" key=\"option1\">\n        Success\n      </SelectOption>\n      <SelectOption value=\"Error\" key=\"option2\">\n        Error\n      </SelectOption>\n      <SelectOption value=\"Warning\" key=\"option3\">\n        Warning\n      </SelectOption>\n    </SelectList>\n  );\n\n  const toggle = (toggleRef) => (\n    <MenuToggle ref={toggleRef} onClick={() => setIsOpen(!isOpen)} isExpanded={isOpen} variant=\"plainText\">\n      Status\n    </MenuToggle>\n  );\n\n  const headerActions = (\n    <Select onSelect={() => setIsOpen(!isOpen)} onOpenChange={setIsOpen} isOpen={isOpen} toggle={toggle}>\n      {selectItems}\n    </Select>\n  );\n  return (\n    <Fragment>\n      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}\n      <code>baseline</code> alignment.\n      <br />\n      <br />\n      <Gallery hasGutter style={{ [cssGridTemplateColumnsMin.name]: '360px' } as React.CSSProperties}>\n        <Card id=\"card-events-view-example\">\n          <CardHeader className={flex.alignItemsFlexStart} actions={{ actions: headerActions, hasNoOffset: true }}>\n            <CardTitle>\n              <Title headingLevel=\"h4\" size=\"xl\" style={{ paddingTop: '3px' }}>\n                Events\n              </Title>\n            </CardTitle>\n          </CardHeader>\n          <CardBody>\n            <DescriptionList aria-label=\"Events view\">\n              <DescriptionListGroup>\n                <DescriptionListTerm>\n                  <Flex flexWrap={{ default: 'nowrap' }}>\n                    <FlexItem>\n                      <Icon status=\"danger\">\n                        <RhUiErrorFillIcon />\n                      </Icon>\n                    </FlexItem>\n                    <FlexItem>\n                      <span>Readiness probe failed</span>\n                    </FlexItem>\n                  </Flex>\n                </DescriptionListTerm>\n                <DescriptionListDescription>\n                  Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect:\n                  connection refused\n                </DescriptionListDescription>\n                <DescriptionListDescription>\n                  <Timestamp date={new Date('2023-06-17T11:02')} dateFormat=\"medium\" timeFormat=\"short\" />\n                </DescriptionListDescription>\n              </DescriptionListGroup>\n              <DescriptionListGroup>\n                <DescriptionListTerm>\n                  <Flex flexWrap={{ default: 'nowrap' }}>\n                    <FlexItem>\n                      <Icon status=\"success\">\n                        <RhUiCheckCircleFillIcon />\n                      </Icon>\n                    </FlexItem>\n                    <FlexItem>\n                      <span>Successful assignment</span>\n                    </FlexItem>\n                  </Flex>\n                </DescriptionListTerm>\n                <DescriptionListDescription>\n                  Successfully assigned default/example to ip-10-0-130-149.ec2.internal\n                </DescriptionListDescription>\n                <DescriptionListDescription>\n                  <Timestamp date={new Date('2023-06-17T11:13')} dateFormat=\"medium\" timeFormat=\"short\" />\n                </DescriptionListDescription>\n              </DescriptionListGroup>\n              <DescriptionListGroup>\n                <DescriptionListTerm>\n                  <Flex flexWrap={{ default: 'nowrap' }}>\n                    <FlexItem>\n                      <Spinner size=\"md\" aria-label=\"loading spinner\" />\n                    </FlexItem>\n                    <FlexItem>\n                      <span>Pulling image</span>\n                    </FlexItem>\n                  </Flex>\n                </DescriptionListTerm>\n                <DescriptionListDescription>Pulling image \"openshift/hello-openshift\"</DescriptionListDescription>\n                <DescriptionListDescription>\n                  <Timestamp date={new Date('2023-06-17T10:59')} dateFormat=\"medium\" timeFormat=\"short\" />\n                </DescriptionListDescription>\n              </DescriptionListGroup>\n              <DescriptionListGroup>\n                <DescriptionListTerm>\n                  <Flex flexWrap={{ default: 'nowrap' }}>\n                    <FlexItem>\n                      <Icon status=\"success\">\n                        <RhUiCheckCircleFillIcon />\n                      </Icon>\n                    </FlexItem>\n                    <FlexItem>\n                      <span>Created container</span>\n                    </FlexItem>\n                  </Flex>\n                </DescriptionListTerm>\n                <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>\n                <DescriptionListDescription>\n                  <Timestamp date={new Date('2023-06-17T10:45')} dateFormat=\"medium\" timeFormat=\"short\" />\n                </DescriptionListDescription>\n              </DescriptionListGroup>\n            </DescriptionList>\n          </CardBody>\n          <Divider />\n          <CardFooter>\n            <a href=\"#\">View all events</a>\n          </CardFooter>\n        </Card>\n      </Gallery>\n    </Fragment>\n  );\n};\n","title":"Events view","lang":"ts","className":""}}>
-      
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Demos`}
-    </AutoLinkHeader>
-    {React.createElement(pageData.examples["Horizontal card grid"])}
-    {React.createElement(pageData.examples["Horizontal split"])}
-    {React.createElement(pageData.examples["Details card"])}
-    {React.createElement(pageData.examples["Aggregate status card"])}
-    {React.createElement(pageData.examples["Status"])}
-    {React.createElement(pageData.examples["Status Tabbed"])}
-    {React.createElement(pageData.examples["Utilization card 1"])}
-    {React.createElement(pageData.examples["Utilization card 2"])}
-    {React.createElement(pageData.examples["Utilization card 3"])}
-    {React.createElement(pageData.examples["Utilization card 4"])}
-    {React.createElement(pageData.examples["Nested cards"])}
-    {React.createElement(pageData.examples["With accordion"])}
-    {React.createElement(pageData.examples["Trend card 1"])}
-    {React.createElement(pageData.examples["Trend card 2"])}
-    {React.createElement(pageData.examples["Log view"])}
-    {React.createElement(pageData.examples["Events view"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsCardReactDemosDocs';
-Component.pageData = pageData;
-
-export default Component;