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

package/patternfly-docs/generated/components/description-list/react-demos.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useRef, useState } from 'react';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import srcImportbasic from './react-demos/basic.png';
+import srcImportindrawer from './react-demos/in-drawer.png';
+const pageData = {
+  "id": "Description list",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/description-list/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/DescriptionList/DescriptionList.md",
+  "relPath": "packages/react-core/src/demos/DescriptionList/DescriptionList.md",
+  "fullscreenExamples": [
+    "Basic",
+    "In drawer"
+  ]
+};
+pageData.liveContext = {
+  useRef,
+  useState,
+  RhUiCheckCircleFillIcon,
+  RhUiAddCircleFillIcon,
+  DashboardWrapper
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportbasic} {...{"code":"import {\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription,\n  PageSection,\n  Card,\n  CardBody,\n  CardHeader,\n  Content,\n  Title,\n  Divider,\n  Flex,\n  FlexItem\n} from '@patternfly/react-core';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\n\nexport const DescriptionListBasic: React.FunctionComponent = () => (\n  <DashboardWrapper>\n    <PageSection aria-labelledby=\"projects\">\n      <Content>\n        <h1 id=\"projects\">Projects</h1>\n        <Content component=\"p\">This is a full page demo</Content>\n      </Content>\n    </PageSection>\n    <PageSection aria-labelledby=\"details\">\n      <Card>\n        <CardHeader>\n          <Title headingLevel=\"h2\" size=\"lg\" id=\"details\">\n            Details\n          </Title>\n        </CardHeader>\n        <Divider />\n        <CardBody>\n          <DescriptionList isAutoFit aria-label=\"Details\">\n            <DescriptionListGroup>\n              <DescriptionListTerm>Name</DescriptionListTerm>\n              <DescriptionListDescription>mary-test</DescriptionListDescription>\n            </DescriptionListGroup>\n            <DescriptionListGroup>\n              <DescriptionListTerm>Status</DescriptionListTerm>\n              <DescriptionListDescription>\n                <Flex>\n                  <FlexItem spacer={{ lg: 'spacerSm' }}>\n                    <RhUiCheckCircleFillIcon color=\"green\" />\n                  </FlexItem>\n                  <FlexItem>Active</FlexItem>\n                </Flex>\n              </DescriptionListDescription>\n            </DescriptionListGroup>\n            <DescriptionListGroup>\n              <DescriptionListTerm>Default pull secret</DescriptionListTerm>\n              <DescriptionListDescription>Not configured</DescriptionListDescription>\n            </DescriptionListGroup>\n            <DescriptionListGroup>\n              <DescriptionListTerm>Tolerations</DescriptionListTerm>\n              <DescriptionListDescription>6 Tolerations</DescriptionListDescription>\n            </DescriptionListGroup>\n            <DescriptionListGroup>\n              <DescriptionListTerm>Network Policies</DescriptionListTerm>\n              <DescriptionListDescription>\n                <a href=\"#\">Network Policies</a>\n              </DescriptionListDescription>\n            </DescriptionListGroup>\n            <DescriptionListGroup>\n              <DescriptionListTerm>Display name</DescriptionListTerm>\n              <DescriptionListDescription>mary</DescriptionListDescription>\n            </DescriptionListGroup>\n            <DescriptionListGroup>\n              <DescriptionListTerm>Requester</DescriptionListTerm>\n              <DescriptionListDescription>kube:admin</DescriptionListDescription>\n            </DescriptionListGroup>\n            <DescriptionListGroup>\n              <DescriptionListTerm>Created at:</DescriptionListTerm>\n              <DescriptionListDescription>3 minutes ago</DescriptionListDescription>\n            </DescriptionListGroup>\n          </DescriptionList>\n        </CardBody>\n      </Card>\n    </PageSection>\n  </DashboardWrapper>\n);\n","title":"Basic","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'In drawer': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportindrawer} {...{"code":"import { useRef, useState } from 'react';\nimport {\n  Gallery,\n  Content,\n  PageSection,\n  GalleryItem,\n  Card,\n  CardBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerPanelBody,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription,\n  Button,\n  Title\n} from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListInDrawer: React.FunctionComponent = () => {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const btnRef = useRef<HTMLDivElement>(null);\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n    btnRef.current && btnRef.current.focus();\n  };\n\n  const onToggleDrawer = () => {\n    setIsExpanded((prevIsExpanded) => !prevIsExpanded);\n  };\n\n  const panelContent = (\n    <>\n      <DrawerHead>\n        <Title headingLevel=\"h2\">\n          <span ref={drawerRef} tabIndex={isExpanded ? 0 : -1}>\n            test\n          </span>\n        </Title>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n      <DrawerPanelBody>\n        <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }} aria-label=\"Details\">\n          <DescriptionListGroup>\n            <DescriptionListTerm>Name</DescriptionListTerm>\n            <DescriptionListDescription>test</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Namespace</DescriptionListTerm>\n            <DescriptionListDescription>\n              <a href=\"#\">mary-test</a>\n            </DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Labels</DescriptionListTerm>\n            <DescriptionListDescription>app=test</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Pod selector</DescriptionListTerm>\n            <DescriptionListDescription>Node selector is not available at this time</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Tolerations</DescriptionListTerm>\n            <DescriptionListDescription>No tolerations</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Annotations</DescriptionListTerm>\n            <DescriptionListDescription>No annotaions</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Status</DescriptionListTerm>\n            <DescriptionListDescription>Active</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Created at:</DescriptionListTerm>\n            <DescriptionListDescription>3 minutes agot</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Pod selector</DescriptionListTerm>\n            <DescriptionListDescription>\n              <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n                app=MyApp\n              </Button>\n            </DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Session affinity</DescriptionListTerm>\n            <DescriptionListDescription>None</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Latest version</DescriptionListTerm>\n            <DescriptionListDescription>1.0</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Update strategy</DescriptionListTerm>\n            <DescriptionListDescription>Rolling</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Timeout</DescriptionListTerm>\n            <DescriptionListDescription>600 seconds</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Max available</DescriptionListTerm>\n            <DescriptionListDescription>25% of 1 pod</DescriptionListDescription>\n          </DescriptionListGroup>\n          <DescriptionListGroup>\n            <DescriptionListTerm>Max surge</DescriptionListTerm>\n            <DescriptionListDescription>25% greater than 1 pod</DescriptionListDescription>\n          </DescriptionListGroup>\n        </DescriptionList>\n      </DrawerPanelBody>\n    </>\n  );\n\n  const drawerContent = (\n    <Gallery hasGutter>\n      <GalleryItem key={0}>\n        <Card>\n          <CardBody>\n            <Button variant=\"link\" isInline onClick={onToggleDrawer} ref={btnRef}>\n              {`${isExpanded ? 'Close' : 'Open'} drawer`}\n            </Button>\n          </CardBody>\n        </Card>\n      </GalleryItem>\n      {Array.from({ length: 30 }).map((_value, index) => (\n        <GalleryItem key={index + 1}>\n          <Card>\n            <CardBody>{`Card-${index + 1}`}</CardBody>\n          </Card>\n        </GalleryItem>\n      ))}\n    </Gallery>\n  );\n\n  return (\n    <DashboardWrapper\n      notificationDrawer={panelContent}\n      isNotificationDrawerExpanded={isExpanded}\n      onNotificationDrawerExpand={onExpand}\n    >\n      <PageSection aria-labelledby=\"main-title\">\n        <Content>\n          <Content component=\"h1\" id=\"main-title\">\n            Main title\n          </Content>\n          <Content component=\"p\">This is a full page demo.</Content>\n        </Content>\n      </PageSection>\n      <PageSection aria-label=\"Drawer Content\">{drawerContent}</PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"In drawer","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["Basic"])}
+    {React.createElement(pageData.examples["In drawer"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsDescriptionListReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;