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

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useCallback, useRef, useState } from 'react';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
+import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
+import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import srcImportgraytabs from './react-demos/gray-tabs.png';
+import srcImportmodaltabs from './react-demos/modal-tabs.png';
+import srcImportnestedtabs from './react-demos/nested-tabs.png';
+import srcImportnestedunindentedtabs from './react-demos/nested-unindented-tabs.png';
+import srcImportopentabswithsecondarytabs from './react-demos/open-tabs-with-secondary-tabs.png';
+import srcImportopentabs from './react-demos/open-tabs.png';
+import srcImporttablesandtabsautowidthtabs from './react-demos/tables-and-tabs-auto-width-tabs.png';
+import srcImporttablesandtabs from './react-demos/tables-and-tabs.png';
+const pageData = {
+  "id": "Tabs",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/tabs/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Tabs.md",
+  "relPath": "packages/react-core/src/demos/Tabs.md",
+  "fullscreenExamples": [
+    "Open tabs",
+    "Open tabs with secondary tabs",
+    "Nested tabs",
+    "Nested, unindented tabs",
+    "Tables and tabs",
+    "Modal tabs"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useCallback,
+  useRef,
+  useState,
+  RhUiCheckCircleFillIcon,
+  RhUiInformationFillIcon,
+  RhUiCodeIcon,
+  RhUiBranchFillIcon,
+  CubeIcon,
+  FilterIcon,
+  RhMicronsSortDownLargeToSmallIcon,
+  RhUiEllipsisVerticalFillIcon,
+  display,
+  sizing,
+  spacing,
+  DashboardWrapper
+};
+pageData.examples = {
+  'Open tabs': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportopentabs} {...{"code":"import { useState } from 'react';\nimport {\n  PageSection,\n  PageBreadcrumb,\n  Breadcrumb,\n  BreadcrumbItem,\n  Tabs,\n  Tab,\n  TabContent,\n  TabContentBody,\n  TabTitleText,\n  Title,\n  DescriptionList,\n  DescriptionListGroup,\n  DescriptionListTerm,\n  DescriptionListDescription,\n  Label,\n  LabelColor,\n  LabelGroup,\n  Flex,\n  FlexItem\n} from '@patternfly/react-core';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';\nimport RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';\nimport spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\n\nexport const TabsOpen: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState(0);\n\n  // Toggle currently active tab\n  const handleTabClick = (_event: React.MouseEvent<HTMLElement>, tabIndex: number | string) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  const tabsBreadcrumb = (\n    <PageBreadcrumb isWidthLimited>\n      <Breadcrumb>\n        <BreadcrumbItem to=\"#\">Overview</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\">Pods</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\" isActive>\n          Pod details{' '}\n        </BreadcrumbItem>\n      </Breadcrumb>\n    </PageBreadcrumb>\n  );\n\n  const tabContent = (\n    <Flex direction={{ default: 'column' }}>\n      <FlexItem spacer={{ default: 'spacerLg' }}>\n        <Title headingLevel=\"h2\" size=\"lg\" className={spacing.mtSm} id=\"open-tabs-example-tabs-list-details-title\">\n          Pod details\n        </Title>\n      </FlexItem>\n      <FlexItem>\n        <DescriptionList columnModifier={{ lg: '2Col' }} aria-labelledby=\"open-tabs-example-tabs-list-details-title\">\n          <DescriptionListGroup>\n            <DescriptionListTerm>Name</DescriptionListTerm>\n            <DescriptionListDescription>3scale-control-fccb6ddb9-phyqv9</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Status</DescriptionListTerm>\n            <DescriptionListDescription>\n              <Flex spacer={{ default: 'spacerLg' }}>\n                <FlexItem>\n                  <RhUiCheckCircleFillIcon />\n                </FlexItem>\n                <FlexItem>Running</FlexItem>\n              </Flex>\n            </DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Namespace</DescriptionListTerm>\n            <DescriptionListDescription>\n              <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n                <FlexItem>\n                  <Label color={LabelColor.teal}>NS</Label>\n                </FlexItem>\n                <FlexItem>\n                  <a href=\"#\">knative-serving-ingress</a>\n                </FlexItem>\n              </Flex>\n            </DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Restart policy</DescriptionListTerm>\n            <DescriptionListDescription>Always restart</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Labels</DescriptionListTerm>\n            <DescriptionListDescription>\n              <LabelGroup>\n                <Label>app=3scale-gateway</Label>\n                <Label>pod-template-has=6747686899</Label>\n              </LabelGroup>\n            </DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Active deadline seconds</DescriptionListTerm>\n            <DescriptionListDescription>Not configured</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Tolerations</DescriptionListTerm>\n            <DescriptionListDescription>stuff</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Pod IP</DescriptionListTerm>\n            <DescriptionListDescription>10.345.2.197</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Annotations</DescriptionListTerm>\n            <DescriptionListDescription>stuff</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Node</DescriptionListTerm>\n            <DescriptionListDescription>\n              <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n                <FlexItem>\n                  <Label color={LabelColor.purple}>N</Label>\n                </FlexItem>\n                <FlexItem>ip-10-0-233-118.us-east-2.computer.external</FlexItem>\n              </Flex>\n            </DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Created at</DescriptionListTerm>\n            <DescriptionListDescription>\n              <time>Oct 15, 1:51 pm</time>\n            </DescriptionListDescription>\n          </DescriptionListGroup>\n        </DescriptionList>\n      </FlexItem>\n    </Flex>\n  );\n\n  return (\n    <DashboardWrapper hasNoBreadcrumb>\n      {tabsBreadcrumb}\n      <PageSection isWidthLimited aria-label=\"Pod header\">\n        <Flex\n          spaceItems={{ default: 'spaceItemsMd' }}\n          alignItems={{ default: 'alignItemsFlexStart' }}\n          flexWrap={{ default: 'noWrap' }}\n        >\n          <FlexItem>\n            <Label color={LabelColor.blue}>N</Label>\n          </FlexItem>\n          <FlexItem>\n            <Title headingLevel=\"h1\" size=\"2xl\">\n              3scale-control-fccb6ddb9-phyqv9\n            </Title>\n          </FlexItem>\n          <FlexItem flex={{ default: 'flexNone' }}>\n            <Label icon={<RhUiInformationFillIcon />}>Running</Label>\n          </FlexItem>\n        </Flex>\n      </PageSection>\n      <PageSection type=\"tabs\" isWidthLimited aria-label=\"Pod navigation tabs\">\n        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id=\"open-tabs-example-tabs-list\">\n          <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />\n          <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />\n          <Tab eventKey={2} title={<TabTitleText>Environment</TabTitleText>} tabContentId={`tabContent${2}`} />\n          <Tab eventKey={3} title={<TabTitleText>Events</TabTitleText>} tabContentId={`tabContent${3}`} />\n          <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />\n        </Tabs>\n      </PageSection>\n      <PageSection isWidthLimited aria-label=\"Pod content\">\n        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>\n          <TabContentBody>{tabContent}</TabContentBody>\n        </TabContent>\n        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>\n          <TabContentBody>YAML panel</TabContentBody>\n        </TabContent>\n        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>\n          <TabContentBody>Environment panel</TabContentBody>\n        </TabContent>\n        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>\n          <TabContentBody>Events panel</TabContentBody>\n        </TabContent>\n        <TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>\n          <TabContentBody>Terminal panel</TabContentBody>\n        </TabContent>\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Open tabs","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Open tabs with secondary tabs': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportopentabswithsecondarytabs} {...{"code":"import { useState } from 'react';\nimport {\n  PageSection,\n  PageBreadcrumb,\n  Breadcrumb,\n  BreadcrumbItem,\n  Tabs,\n  Tab,\n  TabContent,\n  TabContentBody,\n  TabTitleText,\n  Title,\n  DescriptionList,\n  DescriptionListGroup,\n  DescriptionListTerm,\n  DescriptionListDescription,\n  Label,\n  LabelColor,\n  LabelGroup,\n  Flex,\n  FlexItem\n} from '@patternfly/react-core';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';\nimport RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';\nimport spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\n\nexport const TabsOpenWithSecondaryTabs: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<number>(0);\n  const [activeTabKeySecondary, setActiveTabKeySecondary] = useState<number>(10);\n\n  // Toggle currently active tab\n  const handleTabClick = (_event: React.MouseEvent<HTMLElement>, tabIndex: number) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  // Toggle currently active secondary tab\n  const handleTabClickSecondary = (_event: React.MouseEvent<HTMLElement>, tabIndex: number) => {\n    setActiveTabKeySecondary(tabIndex);\n  };\n\n  const tabsBreadcrumb = (\n    <PageBreadcrumb isWidthLimited>\n      <Breadcrumb>\n        <BreadcrumbItem to=\"#\">Overview</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\">Pods</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\" isActive>\n          Pod details{' '}\n        </BreadcrumbItem>\n      </Breadcrumb>\n    </PageBreadcrumb>\n  );\n\n  const tabContent = (\n    <Flex direction={{ default: 'column' }}>\n      <FlexItem spacer={{ default: 'spacerLg' }}>\n        <Title headingLevel=\"h2\" size=\"lg\" className={spacing.mtSm} id=\"open-tabs-example-tabs-list-details-title\">\n          Pod details\n        </Title>\n      </FlexItem>\n      <FlexItem>\n        <DescriptionList columnModifier={{ lg: '2Col' }} aria-labelledby=\"open-tabs-example-tabs-list-details-title\">\n          <DescriptionListGroup>\n            <DescriptionListTerm>Name</DescriptionListTerm>\n            <DescriptionListDescription>3scale-control-fccb6ddb9-phyqv9</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Status</DescriptionListTerm>\n            <DescriptionListDescription>\n              <Flex spacer={{ default: 'spacerLg' }}>\n                <FlexItem>\n                  <RhUiCheckCircleFillIcon />\n                </FlexItem>\n                <FlexItem>Running</FlexItem>\n              </Flex>\n            </DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Namespace</DescriptionListTerm>\n            <DescriptionListDescription>\n              <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n                <FlexItem>\n                  <Label color={LabelColor.teal}>NS</Label>\n                </FlexItem>\n                <FlexItem>\n                  <a href=\"#\">knative-serving-ingress</a>\n                </FlexItem>\n              </Flex>\n            </DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Restart policy</DescriptionListTerm>\n            <DescriptionListDescription>Always restart</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Labels</DescriptionListTerm>\n            <DescriptionListDescription>\n              <LabelGroup>\n                <Label>app=3scale-gateway</Label>\n                <Label>pod-template-has=6747686899</Label>\n              </LabelGroup>\n            </DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Active deadline seconds</DescriptionListTerm>\n            <DescriptionListDescription>Not configured</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Tolerations</DescriptionListTerm>\n            <DescriptionListDescription>stuff</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Pod IP</DescriptionListTerm>\n            <DescriptionListDescription>10.345.2.197</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Annotations</DescriptionListTerm>\n            <DescriptionListDescription>stuff</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Node</DescriptionListTerm>\n            <DescriptionListDescription>\n              <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n                <FlexItem>\n                  <Label color={LabelColor.purple}>N</Label>\n                </FlexItem>\n                <FlexItem>ip-10-0-233-118.us-east-2.computer.external</FlexItem>\n              </Flex>\n            </DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Created at</DescriptionListTerm>\n            <DescriptionListDescription>\n              <time>Oct 15, 1:51 pm</time>\n            </DescriptionListDescription>\n          </DescriptionListGroup>\n        </DescriptionList>\n      </FlexItem>\n    </Flex>\n  );\n\n  return (\n    <DashboardWrapper hasNoBreadcrumb>\n      {tabsBreadcrumb}\n      <PageSection isWidthLimited aria-label=\"Pod header\">\n        <Flex\n          spaceItems={{ default: 'spaceItemsMd' }}\n          alignItems={{ default: 'alignItemsFlexStart' }}\n          flexWrap={{ default: 'noWrap' }}\n        >\n          <FlexItem>\n            <Label color={LabelColor.blue}>N</Label>\n          </FlexItem>\n          <FlexItem>\n            <Title headingLevel=\"h1\" size=\"2xl\">\n              3scale-control-fccb6ddb9-phyqv9\n            </Title>\n          </FlexItem>\n          <FlexItem flex={{ default: 'flexNone' }}>\n            <Label icon={<RhUiInformationFillIcon />}>Running</Label>\n          </FlexItem>\n        </Flex>\n      </PageSection>\n      <PageSection type=\"tabs\" isWidthLimited aria-label=\"Pod navigation tabs\">\n        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id=\"open-tabs-example-tabs-list\">\n          <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />\n          <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />\n          <Tab eventKey={2} title={<TabTitleText>Environment</TabTitleText>} tabContentId={`tabContent${2}`} />\n          <Tab eventKey={3} title={<TabTitleText>Events</TabTitleText>} tabContentId={`tabContent${3}`} />\n          <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />\n        </Tabs>\n      </PageSection>\n      <PageSection isWidthLimited padding={{ default: 'noPadding' }} aria-label=\"Pod content\">\n        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>\n          <TabContentBody>\n            <Tabs\n              isSecondary\n              activeKey={activeTabKeySecondary}\n              onSelect={handleTabClickSecondary}\n              usePageInsets\n              id=\"open-with-secondary-tabs-example-tabs-list-secondary\"\n            >\n              <Tab\n                eventKey={10}\n                title={<TabTitleText>Pod information</TabTitleText>}\n                tabContentId={`tabContent${10}`}\n              />\n              <Tab\n                eventKey={11}\n                title={<TabTitleText>Editable aspects</TabTitleText>}\n                tabContentId={`tabContent${11}`}\n              />\n            </Tabs>\n            <TabContent\n              key={10}\n              eventKey={10}\n              id={`tabContent${10}`}\n              activeKey={activeTabKeySecondary}\n              hidden={10 !== activeTabKeySecondary}\n            >\n              <TabContentBody hasPadding>{tabContent}</TabContentBody>\n            </TabContent>\n            <TabContent\n              key={11}\n              eventKey={11}\n              id={`tabContent${11}`}\n              activeKey={activeTabKeySecondary}\n              hidden={11 !== activeTabKeySecondary}\n            >\n              <TabContentBody>Editable aspects</TabContentBody>\n            </TabContent>\n          </TabContentBody>\n        </TabContent>\n        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>\n          <TabContentBody>YAML panel</TabContentBody>\n        </TabContent>\n        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>\n          <TabContentBody>Environment panel</TabContentBody>\n        </TabContent>\n        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>\n          <TabContentBody>Events panel</TabContentBody>\n        </TabContent>\n        <TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>\n          <TabContentBody>Terminal panel</TabContentBody>\n        </TabContent>\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Open tabs with secondary tabs","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Nested tabs': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportnestedtabs} {...{"code":"import { useState } from 'react';\nimport {\n  Card,\n  CardHeader,\n  CardBody,\n  Grid,\n  GridItem,\n  PageSection,\n  Tabs,\n  Tab,\n  TabContent,\n  TabContentBody,\n  TabTitleText,\n  Title,\n  TitleSizes,\n  Flex,\n  FlexItem\n} from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\nimport sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';\n\nexport const NestedTabs: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState(0);\n  const [activeNestedTabKey, setActiveNestedTabKey] = useState(10);\n\n  // Toggle currently active tab\n  const handleTabClick = (tabIndex: number) => setActiveTabKey(tabIndex);\n\n  // Toggle currently active nested tab\n  const handleNestedTabClick = (tabIndex: number) => setActiveNestedTabKey(tabIndex);\n\n  const tabContent = (\n    <Grid hasGutter>\n      <GridItem xl={8} md={6}>\n        <Card>\n          <CardHeader>\n            <Title headingLevel=\"h2\" size={TitleSizes.lg}>\n              Status\n            </Title>\n          </CardHeader>\n          <CardBody>\n            <Flex direction={{ default: 'column' }}>\n              <FlexItem>\n                <Tabs\n                  activeKey={activeNestedTabKey}\n                  onSelect={(_event, tabIndex) => handleNestedTabClick(Number(tabIndex))}\n                  id=\"nested-tabs-example-nested-tabs-list\"\n                >\n                  <Tab eventKey={10} title={<TabTitleText>Cluster</TabTitleText>} tabContentId={`tabContent${10}`} />\n                  <Tab\n                    eventKey={11}\n                    title={<TabTitleText>Control plane</TabTitleText>}\n                    tabContentId={`tabContent${11}`}\n                  />\n                  <Tab eventKey={12} title={<TabTitleText>Operators</TabTitleText>} tabContentId={`tabContent${12}`} />\n                  <Tab\n                    eventKey={13}\n                    title={<TabTitleText>Virtualization</TabTitleText>}\n                    tabContentId={`tabContent${13}`}\n                  />\n                </Tabs>\n              </FlexItem>\n              <FlexItem>\n                <TabContent\n                  key={10}\n                  eventKey={10}\n                  id={`tabContent${10}`}\n                  activeKey={activeNestedTabKey}\n                  hidden={10 !== activeNestedTabKey}\n                >\n                  <TabContentBody>\n                    {\n                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in odio porttitor, feugiat risus in, feugiat arcu. Nullam euismod enim eget fringilla condimentum. Maecenas tincidunt et metus id aliquet. Integer et fermentum purus. Nulla tempor velit arcu, vitae semper purus iaculis at. Sed malesuada auctor luctus. Pellentesque et leo urna. Aliquam vitae felis congue lacus mattis fringilla. Nullam et ultricies erat, sed dignissim elit. Cras mattis pulvinar aliquam. In ac est nulla. Pellentesque fermentum nibh ac sapien porta, ut congue orci aliquam. Sed nisl est, tempor eu pharetra eget, ullamcorper ut augue. Vestibulum eleifend libero eu nulla cursus lacinia.'\n                    }\n                  </TabContentBody>\n                </TabContent>\n                <TabContent\n                  key={11}\n                  eventKey={11}\n                  id={`tabContent${11}`}\n                  activeKey={activeNestedTabKey}\n                  hidden={11 !== activeNestedTabKey}\n                >\n                  <TabContentBody>Control plane panel</TabContentBody>\n                </TabContent>\n                <TabContent\n                  key={12}\n                  eventKey={12}\n                  id={`tabContent${12}`}\n                  activeKey={activeNestedTabKey}\n                  hidden={12 !== activeNestedTabKey}\n                >\n                  <TabContentBody>Operators panel</TabContentBody>\n                </TabContent>\n                <TabContent\n                  key={13}\n                  eventKey={13}\n                  id={`tabContent${13}`}\n                  activeKey={activeNestedTabKey}\n                  hidden={13 !== activeNestedTabKey}\n                >\n                  <TabContentBody>Virtualization panel</TabContentBody>\n                </TabContent>\n              </FlexItem>\n            </Flex>\n          </CardBody>\n        </Card>\n      </GridItem>\n      <GridItem xl={4} md={6}>\n        <Flex direction={{ default: 'column' }} className={sizing.h_100}>\n          <FlexItem flex={{ default: 'flex_1' }}>\n            <Card isFullHeight>\n              <CardHeader>\n                <Title headingLevel=\"h2\" size={TitleSizes.lg}>\n                  Title of card\n                </Title>\n              </CardHeader>\n            </Card>\n          </FlexItem>\n          <FlexItem flex={{ default: 'flex_1' }}>\n            <Card isFullHeight>\n              <CardHeader>\n                <Title headingLevel=\"h2\" size={TitleSizes.lg}>\n                  Title of card\n                </Title>\n              </CardHeader>\n            </Card>\n          </FlexItem>\n        </Flex>\n      </GridItem>\n    </Grid>\n  );\n\n  return (\n    <DashboardWrapper hasPageTemplateTitle>\n      <PageSection type=\"tabs\" isWidthLimited aria-label=\"Cluster navigation tabs\">\n        <Tabs\n          activeKey={activeTabKey}\n          onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}\n          usePageInsets\n          id=\"nested-tabs-example-tabs-list\"\n        >\n          <Tab eventKey={0} title={<TabTitleText>Cluster 1</TabTitleText>} tabContentId={`tabContent${0}`} />\n          <Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />\n        </Tabs>\n      </PageSection>\n      <PageSection isWidthLimited aria-label=\"Cluster tab panel content\">\n        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>\n          <TabContentBody>{tabContent}</TabContentBody>\n        </TabContent>\n        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>\n          <TabContentBody>Cluster 2 panel</TabContentBody>\n        </TabContent>\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Nested tabs","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Nested, unindented tabs': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportnestedunindentedtabs} {...{"code":"import { useState } from 'react';\nimport {\n  Card,\n  CardHeader,\n  CardBody,\n  Content,\n  Grid,\n  GridItem,\n  PageSection,\n  Tabs,\n  Tab,\n  TabContent,\n  TabContentBody,\n  TabTitleText,\n  Title,\n  TitleSizes,\n  CardTitle\n} from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\n\nexport const NestedUnindentedTabs: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState(1);\n  const [activeNestedTabKey, setActiveNestedTabKey] = useState(10);\n\n  // Toggle currently active tab\n  const handleTabClick = (tabIndex: number) => setActiveTabKey(tabIndex);\n\n  // Toggle currently active nested tab\n  const handleNestedTabClick = (tabIndex: number) => setActiveNestedTabKey(tabIndex);\n\n  const tabContent = (\n    <Grid hasGutter>\n      <GridItem>\n        <CardHeader>\n          <Title headingLevel=\"h1\" size={TitleSizes.lg}>\n            Get started with Red Hat Enterprise Linux\n          </Title>\n        </CardHeader>\n      </GridItem>\n      <GridItem>\n        <Tabs\n          activeKey={activeNestedTabKey}\n          onSelect={(_event, tabIndex) => handleNestedTabClick(Number(tabIndex))}\n          id=\"nested-tabs-example-nested-tabs-list\"\n        >\n          <Tab eventKey={10} title={<TabTitleText>x86 architecture</TabTitleText>} tabContentId={`tabContent${10}`} />\n          <Tab\n            eventKey={11}\n            title={<TabTitleText>Additional Architectures</TabTitleText>}\n            tabContentId={`tabContent${11}`}\n          />\n        </Tabs>\n      </GridItem>\n      <GridItem>\n        <TabContent\n          key={10}\n          eventKey={10}\n          id={`tabContent${10}`}\n          activeKey={activeNestedTabKey}\n          hidden={10 !== activeNestedTabKey}\n        >\n          <TabContentBody>\n            <Grid hasGutter>\n              <GridItem>\n                <Content component=\"p\">\n                  To perform a standard x86_64 installation using the GUI, you'll need to:\n                </Content>\n              </GridItem>\n              <Grid md={6} xl2={3} hasGutter>\n                <Card component=\"div\">\n                  <CardTitle>Check system requirements</CardTitle>\n                  <CardBody>\n                    Your physical or virtual machine should meet the <a href=\"#\">system requirement</a>.\n                  </CardBody>\n                </Card>\n                <Card component=\"div\">\n                  <CardTitle>Download an installation ISO image</CardTitle>\n                  <CardBody>\n                    {' '}\n                    <a href=\"#\">Download</a> the binary DVD ISO.\n                  </CardBody>\n                </Card>\n                <Card component=\"div\">\n                  <CardTitle>Create a bootable installation media</CardTitle>\n                  <CardBody>\n                    {' '}\n                    <a href=\"#\">Create</a> a bootable installation media, for example a USB flash drive.\n                  </CardBody>\n                </Card>\n              </Grid>\n            </Grid>\n          </TabContentBody>\n        </TabContent>\n        <TabContent\n          key={11}\n          eventKey={11}\n          id={`tabContent${11}`}\n          activeKey={activeNestedTabKey}\n          hidden={11 !== activeNestedTabKey}\n        >\n          <TabContentBody>Additional architectures panel</TabContentBody>\n        </TabContent>\n        <TabContent\n          key={12}\n          eventKey={12}\n          id={`tabContent${12}`}\n          activeKey={activeNestedTabKey}\n          hidden={12 !== activeNestedTabKey}\n        >\n          <TabContentBody>Operators panel</TabContentBody>\n        </TabContent>\n        <TabContent\n          key={13}\n          eventKey={13}\n          id={`tabContent${13}`}\n          activeKey={activeNestedTabKey}\n          hidden={13 !== activeNestedTabKey}\n        >\n          <TabContentBody>Virtualization panel</TabContentBody>\n        </TabContent>\n      </GridItem>\n    </Grid>\n  );\n\n  return (\n    <DashboardWrapper hasPageTemplateTitle>\n      <PageSection type=\"tabs\" isWidthLimited aria-label=\"Primary navigation tabs\">\n        <Tabs\n          activeKey={activeTabKey}\n          onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}\n          usePageInsets\n          id=\"nested-tabs-example-tabs-list\"\n        >\n          <Tab eventKey={0} title={<TabTitleText>What's new</TabTitleText>} tabContentId={`tabContent${0}`} />\n          <Tab eventKey={1} title={<TabTitleText>Get started</TabTitleText>} tabContentId={`tabContent${1}`} />\n          <Tab eventKey={2} title={<TabTitleText>Knowledge</TabTitleText>} tabContentId={`tabContent${2}`} />\n          <Tab eventKey={3} title={<TabTitleText>Support</TabTitleText>} tabContentId={`tabContent${3}`} />\n        </Tabs>\n      </PageSection>\n      <PageSection isWidthLimited aria-label=\"Primary tab content\">\n        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>\n          <TabContentBody>What's new panel</TabContentBody>\n        </TabContent>\n        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>\n          <TabContentBody>{tabContent}</TabContentBody>\n        </TabContent>\n        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>\n          <TabContentBody>Knowledge panel</TabContentBody>\n        </TabContent>\n        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>\n          <TabContentBody>Support Panel</TabContentBody>\n        </TabContent>\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Nested, unindented tabs","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Tables and tabs': props => 
+    <Example {...pageData} {...props} thumbnail={srcImporttablesandtabs} {...{"code":"import { Fragment, useRef, useState } from 'react';\n/* eslint-disable no-console */\nimport {\n  Button,\n  Divider,\n  Drawer,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerPanelContent,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerPanelBody,\n  Dropdown,\n  DropdownList,\n  Flex,\n  FlexItem,\n  Label,\n  LabelGroup,\n  MenuToggle,\n  OverflowMenu,\n  OverflowMenuContent,\n  OverflowMenuControl,\n  OverflowMenuGroup,\n  OverflowMenuItem,\n  PageSection,\n  Progress,\n  ProgressSize,\n  Tabs,\n  Tab,\n  TabContent,\n  TabContentBody,\n  TabTitleText,\n  Title,\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  ToolbarToggleGroup\n} from '@patternfly/react-core';\nimport {\n  Table,\n  Thead,\n  Tbody,\n  Tr,\n  Th,\n  Td,\n  IAction,\n  ActionsColumn,\n  CustomActionsToggleProps\n} from '@patternfly/react-table';\nimport RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';\nimport { KeyTypes } from '../../../helpers';\nimport { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';\n\ninterface Repository {\n  name: string;\n  branches: number | null;\n  prs: number | null;\n  workspaces: number;\n  lastCommit: string;\n}\n\nexport const TablesAndTabs = () => {\n  // secondary tab properties\n  const [secondaryActiveTabKey, setSecondaryActiveTabKey] = useState<number>(10);\n  const handleSecondaryTabClick = (tabIndex: number) => {\n    setSecondaryActiveTabKey(tabIndex);\n  };\n\n  // drawer properties\n  const [isExpanded, setIsExpanded] = useState<boolean>(true);\n\n  // table properties\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'Node 1', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' },\n    { name: 'Node 2', branches: 8, prs: 30, workspaces: 2, lastCommit: '2 days ago' },\n    { name: 'Node 3', branches: 12, prs: 48, workspaces: 13, lastCommit: '30 days ago' },\n    { name: 'Node 4', branches: 3, prs: 8, workspaces: 20, lastCommit: '8 days ago' },\n    { name: 'Node 5', branches: 33, prs: 21, workspaces: 2, lastCommit: '26 days ago' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  const [selectedRepoName, setSelectedRepoName] = useState<string>(repositories[0].name);\n  const isRepoSelected = (repo: Repository) => repo.name === selectedRepoName;\n  const setRepoSelected = (_event: React.FormEvent<HTMLInputElement>, repo: Repository) => {\n    setSelectedRepoName(repo.name);\n    setIsExpanded(true);\n  };\n\n  const defaultActions: IAction[] = [\n    {\n      title: 'Some action',\n      onClick: (event) => {\n        event.stopPropagation();\n        console.log('clicked on Some action');\n      }\n    },\n    {\n      title: <a href=\"https://www.patternfly.org\">Link action</a>,\n      onClick: (event) => {\n        event.stopPropagation();\n        console.log('clicked on Link action');\n      }\n    },\n    {\n      isSeparator: true\n    },\n    {\n      title: 'Third action',\n      onClick: (event) => {\n        event.stopPropagation();\n        console.log('clicked on Third action');\n      }\n    }\n  ];\n\n  const firstActionRef = useRef<HTMLButtonElement>(null);\n\n  /** Handles when the user clicks on the custom action toggle, stops propagation to prevent the drawer from opening */\n  const handleActionsToggleClick = (event: React.MouseEvent, ActionsToggleProps: CustomActionsToggleProps) => {\n    const { onToggle } = ActionsToggleProps;\n\n    onToggle(event);\n    event.stopPropagation();\n  };\n\n  /** Enables keyboard navigation of the custom actions toggle */\n  const handleActionsToggleKeyDown = (event: React.KeyboardEvent, ActionsToggleProps: CustomActionsToggleProps) => {\n    const { onToggle } = ActionsToggleProps;\n    const { Enter, Space, Escape, ArrowDown, ArrowUp } = KeyTypes;\n\n    const shouldToggle = [Enter, Space, Escape].includes(event.key);\n    const shouldFocus = [ArrowDown, ArrowUp, Enter, Space].includes(event.key);\n\n    if (shouldToggle) {\n      onToggle(event);\n    }\n\n    if (shouldFocus) {\n      setTimeout(() => {\n        firstActionRef.current?.focus();\n      }, 0);\n    }\n  };\n\n  const handleDrawerClose = () => {\n    setIsExpanded(false);\n    setSelectedRepoName('');\n  };\n\n  const customActionsToggle = (props: CustomActionsToggleProps, toggleName: string) => (\n    <MenuToggle\n      isDisabled={props.isDisabled}\n      onClick={(event: React.MouseEvent) => handleActionsToggleClick(event, props)}\n      onKeyDown={(event: React.KeyboardEvent) => handleActionsToggleKeyDown(event, props)}\n      variant=\"plain\"\n      aria-label={`${toggleName} actions`}\n      aria-haspopup=\"menu\"\n      isExpanded={props.isOpen}\n      ref={props.toggleRef}\n      icon={<RhUiEllipsisVerticalFillIcon />}\n    />\n  );\n\n  const toolbar = (\n    <Toolbar id=\"page-layout-table-column-management-action-toolbar-top\">\n      <ToolbarContent>\n        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint=\"xl\">\n          <ToolbarItem>\n            <MenuToggle>Name</MenuToggle>\n          </ToolbarItem>\n        </ToolbarToggleGroup>\n        <ToolbarItem>\n          <MenuToggle variant=\"plain\" aria-label=\"Sort columns\" icon={<RhMicronsSortDownLargeToSmallIcon />} />\n        </ToolbarItem>\n        <OverflowMenu breakpoint=\"md\">\n          <OverflowMenuContent>\n            <OverflowMenuGroup groupType=\"button\" isPersistent>\n              <OverflowMenuItem isPersistent>\n                <Button variant=\"primary\">Generate</Button>\n              </OverflowMenuItem>\n              <OverflowMenuItem isPersistent>\n                <Button variant=\"secondary\">Deploy</Button>\n              </OverflowMenuItem>\n            </OverflowMenuGroup>\n          </OverflowMenuContent>\n          <OverflowMenuControl hasAdditionalOptions>\n            <Dropdown\n              onSelect={() => {}}\n              toggle={(toggleRef) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  aria-label=\"overflow menu\"\n                  variant=\"plain\"\n                  onClick={() => {}}\n                  isExpanded={false}\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n              isOpen={false}\n            >\n              <DropdownList>{[]}</DropdownList>\n            </Dropdown>\n          </OverflowMenuControl>\n        </OverflowMenu>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const table = (\n    <Table aria-label=\"`Composable` table\">\n      <Thead noWrap>\n        <Tr>\n          <Th screenReaderText=\"Row select\" />\n          <Th>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.workspaces}</Th>\n          <Th>{columnNames.lastCommit}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {repositories.map((repo, rowIndex) => (\n          <Tr key={repo.name}>\n            <Td\n              key={`${rowIndex}_0`}\n              select={{\n                rowIndex,\n                onSelect: (event) => setRepoSelected(event, repo),\n                isSelected: isRepoSelected(repo),\n                variant: 'radio'\n              }}\n            />\n            <Td dataLabel={columnNames.name}>\n              {repo.name}\n              <div>\n                {/** Preventing default behavior for demo purposes only */}\n                <a onClick={(event) => event.preventDefault()} href=\"#\">\n                  siemur/test-space\n                </a>\n              </div>\n            </Td>\n            <Td dataLabel={columnNames.branches}>\n              <Flex>\n                <FlexItem>{repo.branches}</FlexItem>\n                <FlexItem>\n                  <RhUiBranchFillIcon key=\"icon\" />\n                </FlexItem>\n              </Flex>\n            </Td>\n            <Td dataLabel={columnNames.prs}>\n              <Flex>\n                <FlexItem>{repo.prs}</FlexItem>\n                <FlexItem>\n                  <RhUiCodeIcon key=\"icon\" />\n                </FlexItem>\n              </Flex>\n            </Td>\n            <Td dataLabel={columnNames.workspaces}>\n              <Flex>\n                <FlexItem>{repo.workspaces}</FlexItem>\n                <FlexItem>\n                  <CubeIcon key=\"icon\" />\n                </FlexItem>\n              </Flex>\n            </Td>\n            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n            <Td key={`${rowIndex}_5`}>\n              <ActionsColumn\n                items={defaultActions}\n                actionsToggle={(props: CustomActionsToggleProps) => customActionsToggle(props, repo.name)}\n                firstActionItemRef={firstActionRef}\n              />\n            </Td>\n          </Tr>\n        ))}\n      </Tbody>\n    </Table>\n  );\n\n  const panelContent = (\n    <DrawerPanelContent widths={{ default: 'width_33', xl: 'width_33' }}>\n      <DrawerHead>\n        <DrawerActions>\n          <DrawerCloseButton onClick={handleDrawerClose} />\n        </DrawerActions>\n        <Flex spaceItems={{ default: 'spaceItemsSm' }} direction={{ default: 'column' }}>\n          <FlexItem>\n            <Title headingLevel=\"h2\" size=\"lg\">\n              {selectedRepoName}\n            </Title>\n          </FlexItem>\n          <FlexItem>\n            {/** Preventing default behavior for demo purposes only */}\n            <a onClick={(event) => event.preventDefault()} href=\"#\">\n              siemur/test-space\n            </a>\n          </FlexItem>\n        </Flex>\n      </DrawerHead>\n      <DrawerPanelBody hasNoPadding>\n        <Tabs\n          activeKey={secondaryActiveTabKey}\n          onSelect={(_event, tabIndex) => handleSecondaryTabClick(Number(tabIndex))}\n          isBox\n          isFilled\n          id=\"tabs-tables-secondary-tabs\"\n        >\n          <Tab eventKey={10} title={<TabTitleText>Overview</TabTitleText>} tabContentId={`tabContent${10}`} />\n          <Tab eventKey={11} title={<TabTitleText>Activity</TabTitleText>} tabContentId={`tabContent${11}`} />\n        </Tabs>\n      </DrawerPanelBody>\n      <DrawerPanelBody>\n        <TabContent\n          key={10}\n          eventKey={10}\n          id={`tabContent${10}`}\n          activeKey={secondaryActiveTabKey}\n          hidden={10 !== secondaryActiveTabKey}\n        >\n          <TabContentBody>\n            <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsLg' }}>\n              <FlexItem>\n                <p>\n                  The content of the drawer really is up to you. It could have form fields, definition lists, text\n                  lists, labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in\n                  here, and can also make the drawer scrollable.\n                </p>\n              </FlexItem>\n              <FlexItem>\n                <Progress value={33} title=\"Capacity\" size={ProgressSize.sm} />\n              </FlexItem>\n              <FlexItem>\n                <Progress value={66} title=\"Modules\" size={ProgressSize.sm} />\n              </FlexItem>\n              <Flex direction={{ default: 'column' }}>\n                <FlexItem>\n                  <Title headingLevel=\"h3\">Tags</Title>\n                </FlexItem>\n                <FlexItem>\n                  <LabelGroup>\n                    {[1, 2, 3, 4, 5].map((labelNumber) => (\n                      <Label variant=\"outline\" key={`label-${labelNumber}`}>{`Tag ${labelNumber}`}</Label>\n                    ))}\n                  </LabelGroup>\n                </FlexItem>\n              </Flex>\n            </Flex>\n          </TabContentBody>\n        </TabContent>\n        <TabContent\n          key={11}\n          eventKey={11}\n          id={`tabContent${11}`}\n          activeKey={secondaryActiveTabKey}\n          hidden={11 !== secondaryActiveTabKey}\n        >\n          <TabContentBody>Activity panel</TabContentBody>\n        </TabContent>\n      </DrawerPanelBody>\n    </DrawerPanelContent>\n  );\n\n  const tabContent = (\n    <Drawer isExpanded={isExpanded} isInline>\n      <DrawerContent panelContent={panelContent}>\n        <DrawerContentBody>{table}</DrawerContentBody>\n      </DrawerContent>\n    </Drawer>\n  );\n\n  return (\n    <DashboardWrapper>\n      <Fragment>\n        <PageSection aria-labelledby=\"nodes\">\n          <Title headingLevel=\"h1\" size=\"2xl\" id=\"nodes\">\n            Nodes\n          </Title>\n        </PageSection>\n        <PageSection padding={{ default: 'noPadding' }} aria-label=\"Nodes toolbar and content\">\n          {toolbar}\n          <Divider />\n          {tabContent}\n        </PageSection>\n      </Fragment>\n    </DashboardWrapper>\n  );\n};\n","title":"Tables and tabs","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Modal tabs': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportmodaltabs} {...{"code":"import { Fragment, useCallback, useState } from 'react';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\nimport {\n  PageSection,\n  Content,\n  Gallery,\n  Card,\n  CardHeader,\n  CardBody,\n  CardTitle,\n  Modal,\n  ModalBody,\n  ModalHeader,\n  Tab,\n  Tabs,\n  TabTitleText,\n  List,\n  ListItem,\n  Grid,\n  GridItem,\n  TabContent\n} from '@patternfly/react-core';\n\ninterface Product {\n  id: string;\n  name: string;\n  description: string;\n}\n\nconst products: Product[] = [\n  {\n    id: 'pf-card',\n    name: 'PatternFly',\n    description: 'PatternFly is a community project that promotes design commonality and improves user experience.'\n  },\n  {\n    id: 'mq-card',\n    name: 'ActiveMQ',\n    description:\n      'The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.'\n  },\n  {\n    id: 'apache-card',\n    name: 'Apache Spark',\n    description: 'This documentation page covers the Apache Spark component for the Apache Camel.'\n  }\n];\n\nexport const ModalTabs: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(true);\n  const [selectedProduct, setSelectedProduct] = useState<Product | undefined>(products[0]);\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n\n  const onCardClick = useCallback(\n    (product: Product) => () => {\n      setSelectedProduct(product);\n      setIsModalOpen(true);\n    },\n    []\n  );\n\n  const closeModal = useCallback(() => {\n    setSelectedProduct(undefined);\n    setIsModalOpen(false);\n    setActiveTabKey(0);\n  }, []);\n\n  const onTabSelect = useCallback(\n    (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => setActiveTabKey(tabIndex),\n    []\n  );\n\n  return (\n    <Fragment>\n      <DashboardWrapper mainContainerId=\"main-content-card-view-default-nav\">\n        <PageSection aria-labelledby=\"projects-heading\">\n          <Content>\n            <h1 id=\"projects-heading\">Projects</h1>\n            <p>Click any project card to view tabs within modals.</p>\n          </Content>\n        </PageSection>\n        <PageSection isFilled aria-label=\"Selectable card gallery\">\n          <Gallery hasGutter aria-label=\"Selectable card container\">\n            {products.map((product) => (\n              <Card\n                isSelectable\n                isSelected={selectedProduct?.id === product.id}\n                isCompact\n                key={product.id}\n                id={product.name.replace(/ /g, '-')}\n              >\n                <CardHeader\n                  selectableActions={{\n                    selectableActionId: product.id,\n                    selectableActionAriaLabelledby: 'single-selectable-card-example-1',\n                    name: 'single-selectable-card-example',\n                    variant: 'single',\n                    onChange: onCardClick(product),\n                    hasNoOffset: true\n                  }}\n                >\n                  <CardTitle>{product.name}</CardTitle>\n                </CardHeader>\n                <CardBody>{product.description}</CardBody>\n              </Card>\n            ))}\n          </Gallery>\n        </PageSection>\n      </DashboardWrapper>\n\n      {selectedProduct && (\n        <Modal\n          variant=\"small\"\n          isOpen={isModalOpen}\n          onClose={closeModal}\n          ouiaId=\"TabsModal\"\n          aria-labelledby=\"tabs-modal-title\"\n          aria-describedby=\"tabs-modal-box-body-basic\"\n        >\n          <ModalHeader title={selectedProduct.name} labelId=\"tabs-modal-title\" />\n          <ModalBody id=\"tabs-modal-box-body-basic\">\n            <Grid hasGutter>\n              <GridItem>\n                <Tabs activeKey={activeTabKey} onSelect={onTabSelect}>\n                  <Tab eventKey={0} tabContentId=\"details-tab\" title={<TabTitleText>Details</TabTitleText>} />\n                  <Tab eventKey={1} tabContentId=\"doc-tab\" title={<TabTitleText>Documentation</TabTitleText>} />\n                </Tabs>\n              </GridItem>\n              <GridItem>\n                <TabContent eventKey={0} id=\"details-tab\" hidden={activeTabKey !== 0}>\n                  {selectedProduct.description}\n                </TabContent>\n                <TabContent eventKey={1} id=\"doc-tab\" hidden={activeTabKey !== 1}>\n                  <List>\n                    <ListItem>\n                      <a>Doc link 1</a>\n                    </ListItem>\n                    <ListItem>\n                      <a>Doc link 2</a>\n                    </ListItem>\n                    <ListItem>\n                      <a>Doc link 3</a>\n                    </ListItem>\n                  </List>\n                </TabContent>\n              </GridItem>\n            </Grid>\n          </ModalBody>\n        </Modal>\n      )}\n    </Fragment>\n  );\n};\n","title":"Modal tabs","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Open tabs"])}
+    {React.createElement(pageData.examples["Open tabs with secondary tabs"])}
+    {React.createElement(pageData.examples["Nested tabs"])}
+    {React.createElement(pageData.examples["Nested, unindented tabs"])}
+    {React.createElement(pageData.examples["Tables and tabs"])}
+    {React.createElement(pageData.examples["Modal tabs"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsTabsReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;