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

package/patternfly-docs/generated/components/panel/react.js

@@ -0,0 +1,236 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+
+const pageData = {
+  "id": "Panel",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/panel/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Panel/examples/Panel.md",
+  "relPath": "packages/react-core/src/components/Panel/examples/Panel.md",
+  "propComponents": [
+    {
+      "name": "Panel",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the panel"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Class to add to outer div"
+        },
+        {
+          "name": "hasNoBorder",
+          "type": "boolean",
+          "description": "Flag to remove the panel's border",
+          "beta": true
+        },
+        {
+          "name": "isAutoHeight",
+          "type": "boolean",
+          "description": "When used with a scrollable panel, sets the panel to auto height",
+          "beta": true
+        },
+        {
+          "name": "isFullHeight",
+          "type": "boolean",
+          "description": "Flag to make the panel fill the available height of its container",
+          "beta": true
+        },
+        {
+          "name": "isGlass",
+          "type": "boolean",
+          "description": "Modifies the panel to use glass styling when the glass theme is enabled",
+          "beta": true
+        },
+        {
+          "name": "isPill",
+          "type": "boolean",
+          "description": "Uses pill (fully rounded) border radius for the panel",
+          "beta": true
+        },
+        {
+          "name": "isScrollable",
+          "type": "boolean",
+          "description": "Flag to add scrollable styling to the panel"
+        },
+        {
+          "name": "variant",
+          "type": "'raised' | 'bordered' | 'secondary'",
+          "description": "Adds panel variant styles"
+        }
+      ]
+    },
+    {
+      "name": "PanelMain",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the panel main div"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Class to add to outer div"
+        },
+        {
+          "name": "maxHeight",
+          "type": "string",
+          "description": "Max height of the panel main div as a string with the value and unit"
+        }
+      ]
+    },
+    {
+      "name": "PanelMainBody",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the panel main body div"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Class to add to outer div"
+        }
+      ]
+    },
+    {
+      "name": "PanelHeader",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the panel header"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Class to add to outer div"
+        }
+      ]
+    },
+    {
+      "name": "PanelFooter",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the panel footer"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Class to add to outer div"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-panel"
+  ],
+  "examples": [
+    "Basic",
+    "Header",
+    "Footer",
+    "Header and footer",
+    "No body",
+    "Raised",
+    "Bordered",
+    "Secondary variant",
+    "Scrollable",
+    "Scrollable with auto height",
+    "Scrollable with header and footer",
+    "Pill"
+  ]
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';\n\nexport const PanelBasic: React.FunctionComponent = () => (\n  <Panel>\n    <PanelMain>\n      <PanelMainBody>Main content</PanelMainBody>\n    </PanelMain>\n  </Panel>\n);\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Header': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider } from '@patternfly/react-core';\n\nexport const PanelHeaderExample: React.FunctionComponent = () => (\n  <Panel>\n    <PanelHeader>Header content</PanelHeader>\n    <Divider />\n    <PanelMain>\n      <PanelMainBody>Main content</PanelMainBody>\n    </PanelMain>\n  </Panel>\n);\n","title":"Header","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Footer': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Panel, PanelMain, PanelMainBody, PanelFooter } from '@patternfly/react-core';\n\nexport const PanelFooterExample: React.FunctionComponent = () => (\n  <Panel>\n    <PanelMain>\n      <PanelMainBody>Main content</PanelMainBody>\n    </PanelMain>\n    <PanelFooter>Footer content</PanelFooter>\n  </Panel>\n);\n","title":"Footer","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Header and footer': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';\n\nexport const PanelHeaderFooter: React.FunctionComponent = () => (\n  <Panel>\n    <PanelHeader>Header content</PanelHeader>\n    <Divider />\n    <PanelMain>\n      <PanelMainBody>Main content</PanelMainBody>\n    </PanelMain>\n    <PanelFooter>Footer content</PanelFooter>\n  </Panel>\n);\n","title":"Header and footer","lang":"ts","className":""}}>
+      
+    </Example>,
+  'No body': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Panel, PanelMain } from '@patternfly/react-core';\n\nexport const PanelNoBody: React.FunctionComponent = () => (\n  <Panel>\n    <PanelMain>Main content</PanelMain>\n  </Panel>\n);\n","title":"No body","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Raised': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';\n\nexport const PanelRaised: React.FunctionComponent = () => (\n  <Panel variant=\"raised\">\n    <PanelMain>\n      <PanelMainBody>Main content</PanelMainBody>\n    </PanelMain>\n  </Panel>\n);\n","title":"Raised","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Bordered': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';\n\nexport const PanelBordered: React.FunctionComponent = () => (\n  <Panel variant=\"bordered\">\n    <PanelMain>\n      <PanelMainBody>Main content</PanelMainBody>\n    </PanelMain>\n  </Panel>\n);\n","title":"Bordered","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Secondary variant': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';\n\nexport const PanelSecondaryVariant: React.FunctionComponent = () => (\n  <Panel variant=\"secondary\">\n    <PanelMain>\n      <PanelMainBody>Main content</PanelMainBody>\n    </PanelMain>\n  </Panel>\n);\n","title":"Secondary variant","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Scrollable': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';\n\nexport const PanelScrollable: React.FunctionComponent = () => (\n  <Panel isScrollable>\n    <PanelMain tabIndex={0}>\n      <PanelMainBody>\n        Main content\n        <br />\n        <br />\n        Main content\n        <br />\n        <br />\n        Main content\n        <br />\n        <br />\n        Main content\n        <br />\n        <br />\n        Main content\n        <br />\n        <br />\n        Main content\n        <br />\n        <br />\n        Main content\n        <br />\n        <br />\n        Main content\n        <br />\n        <br />\n        Main content\n      </PanelMainBody>\n    </PanelMain>\n  </Panel>\n);\n","title":"Scrollable","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Scrollable with auto height': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';\n\nexport const PanelScrollableWithAutoHeight: React.FunctionComponent = () => (\n  <div style={{ height: '200px' }}>\n    <Panel isScrollable isAutoHeight>\n      <PanelMain tabIndex={0}>\n        <PanelMainBody>\n          Main content\n          <br />\n          <br />\n          Main content\n          <br />\n          <br />\n          Main content\n          <br />\n          <br />\n          Main content\n          <br />\n          <br />\n          Main content\n          <br />\n          <br />\n          Main content\n          <br />\n          <br />\n          Main content\n          <br />\n          <br />\n          Main content\n          <br />\n          <br />\n          Main content\n        </PanelMainBody>\n      </PanelMain>\n    </Panel>\n  </div>\n);\n","title":"Scrollable with auto height","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Scrollable with header and footer': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';\n\nexport const PanelScrollableHeaderFooter: React.FunctionComponent = () => (\n  <Panel isScrollable>\n    <PanelHeader>Header content</PanelHeader>\n    <Divider />\n    <PanelMain tabIndex={0}>\n      <PanelMainBody>\n        Main content\n        <br />\n        <br />\n        Main content\n        <br />\n        <br />\n        Main content\n        <br />\n        <br />\n        Main content\n        <br />\n        <br />\n        Main content\n        <br />\n        <br />\n        Main content\n        <br />\n        <br />\n        Main content\n        <br />\n        <br />\n        Main content\n        <br />\n        <br />\n        Main content\n      </PanelMainBody>\n    </PanelMain>\n    <PanelFooter>Footer content</PanelFooter>\n  </Panel>\n);\n","title":"Scrollable with header and footer","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Pill': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';\n\nexport const PanelPill: React.FunctionComponent = () => (\n  <Panel isPill>\n    <PanelMain>\n      <PanelMainBody>Main content</PanelMainBody>\n    </PanelMain>\n  </Panel>\n);\n","title":"Pill","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Header"])}
+    {React.createElement(pageData.examples["Footer"])}
+    {React.createElement(pageData.examples["Header and footer"])}
+    {React.createElement(pageData.examples["No body"])}
+    {React.createElement(pageData.examples["Raised"])}
+    {React.createElement(pageData.examples["Bordered"])}
+    {React.createElement(pageData.examples["Secondary variant"])}
+    {React.createElement(pageData.examples["Scrollable"])}
+    {React.createElement(pageData.examples["Scrollable with auto height"])}
+    {React.createElement(pageData.examples["Scrollable with header and footer"])}
+    {React.createElement(pageData.examples["Pill"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsPanelReactDocs';
+Component.pageData = pageData;
+
+export default Component;