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

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

@@ -0,0 +1,440 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useRef, useState, useEffect } from 'react';
+import '../../../../../react-core/src/components/Compass/examples/./compass.css';
+const pageData = {
+  "id": "Compass",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": true,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/compass/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Compass/examples/Compass.md",
+  "relPath": "packages/react-core/src/components/Compass/examples/Compass.md",
+  "propComponents": [
+    {
+      "name": "Compass",
+      "description": "",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Compass."
+        },
+        {
+          "name": "dock",
+          "type": "React.ReactNode",
+          "description": "Content of the docked navigation area of the layout"
+        },
+        {
+          "name": "drawerContent",
+          "type": "React.ReactNode",
+          "description": "Content rendered in an optional drawer wrapping the layout"
+        },
+        {
+          "name": "drawerProps",
+          "type": "DrawerProps",
+          "description": "Additional props passed to the drawer"
+        },
+        {
+          "name": "footer",
+          "type": "React.ReactNode",
+          "description": "Content placed at the bottom of the layout"
+        },
+        {
+          "name": "header",
+          "type": "React.ReactNode",
+          "description": "Content placed at the top of the compass layout"
+        },
+        {
+          "name": "isDockExpanded",
+          "type": "boolean",
+          "description": "Flag indicating the docked nav is expanded on mobile. Only applies when dock content is passed.",
+          "beta": true
+        },
+        {
+          "name": "isDockTextExpanded",
+          "type": "boolean",
+          "description": "Flag indicating the docked nav should display text on desktop. Only applies when dock content is passed, and\nwill handle toggling the visibility of the text in individual isDocked components.",
+          "beta": true
+        },
+        {
+          "name": "isFooterExpanded",
+          "type": "boolean",
+          "description": "Flag indicating if the footer is expanded",
+          "defaultValue": "true"
+        },
+        {
+          "name": "isHeaderExpanded",
+          "type": "boolean",
+          "description": "Flag indicating if the header is expanded",
+          "defaultValue": "true"
+        },
+        {
+          "name": "isSidebarEndExpanded",
+          "type": "boolean",
+          "description": "Flag indicating if the end sidebar is expanded",
+          "defaultValue": "true"
+        },
+        {
+          "name": "isSidebarStartExpanded",
+          "type": "boolean",
+          "description": "Flag indicating if the start sidebar is expanded",
+          "defaultValue": "true"
+        },
+        {
+          "name": "main",
+          "type": "React.ReactNode",
+          "description": "Content placed at the center of the layout"
+        },
+        {
+          "name": "masthead",
+          "type": "React.ReactNode",
+          "description": "The horizontal masthead content (e.g. <Masthead />). This masthead will only render when dock content is passed and only at mobile viewports."
+        },
+        {
+          "name": "sidebarEnd",
+          "type": "React.ReactNode",
+          "description": "Content placed at the horizontal end of the layout, after the main content"
+        },
+        {
+          "name": "sidebarStart",
+          "type": "React.ReactNode",
+          "description": "Content placed at the horizontal start of the layout, before the main content"
+        }
+      ]
+    },
+    {
+      "name": "CompassHeader",
+      "description": "",
+      "props": [
+        {
+          "name": "logo",
+          "type": "React.ReactNode",
+          "description": "Content of the logo area"
+        },
+        {
+          "name": "nav",
+          "type": "React.ReactNode",
+          "description": "Content of the navigation area"
+        },
+        {
+          "name": "profile",
+          "type": "React.ReactNode",
+          "description": "Content of the profile area"
+        }
+      ]
+    },
+    {
+      "name": "CompassContent",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content of the main Compass area. Typically one or more `Panel` components.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the CompassContent"
+        },
+        {
+          "name": "drawerContent",
+          "type": "React.ReactNode",
+          "description": "Content rendered in an optional drawer wrapping the CompassContent"
+        },
+        {
+          "name": "drawerProps",
+          "type": "DrawerProps",
+          "description": "Additional props passed to the drawer"
+        }
+      ]
+    },
+    {
+      "name": "CompassHero",
+      "description": "A wrapper component to pass a PatternFly Hero component into.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content of the hero"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the hero"
+        }
+      ]
+    },
+    {
+      "name": "CompassMainHeader",
+      "description": "The wrapper component for header content in the main Compass area. When building out a custom implementation,\nyou should ensure any content within the main header is rendered inside a Panel, PanelMain, PanelMainBody stack and main header content wrappers.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Custom main header content. To opt into a default styling, use the title and toolbar props instead."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the main header"
+        },
+        {
+          "name": "panelProps",
+          "type": "Omit<PanelProps, 'children'>",
+          "description": "Additional props passed to the Panel that wraps the main header content when using the title or toolbar props. When using the\nchildren prop, you should pass your own Panel."
+        },
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Styled title. If title or toolbar is provided, the children will be ignored."
+        },
+        {
+          "name": "toolbar",
+          "type": "React.ReactNode",
+          "description": "Styled toolbar. If title or toolbar is provided, the children will be ignored."
+        }
+      ]
+    },
+    {
+      "name": "CompassMessageBar",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content of the message bar. Typically a @patternfly/chatbot MessageBar component."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the message bar"
+        }
+      ]
+    },
+    {
+      "name": "CompassMainFooter",
+      "description": "",
+      "props": [
+        {
+          "name": "isExpanded",
+          "type": "No type info",
+          "defaultValue": "true"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-compass"
+  ],
+  "examples": [
+    "Basic",
+    "With alternate footer",
+    "With docked nav"
+  ]
+};
+pageData.liveContext = {
+  useRef,
+  useState,
+  useEffect
+};
+pageData.relativeImports = "import 'react-core/src/components/Compass/examples/./compass.css';"
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Compass,\n  CompassHeader,\n  CompassHero,\n  CompassContent,\n  CompassMainHeader,\n  Panel,\n  PanelMain,\n  PanelMainBody,\n  CompassMainHeaderContent\n} from '@patternfly/react-core';\nimport './compass.css';\n\nexport const CompassBasic: React.FunctionComponent = () => {\n  const headerContent = <CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />;\n  const sidebarStartContent = <div>Sidebar start</div>;\n  // TODO: simplify mainContent to only a div string\n  const mainContent = (\n    <>\n      <CompassHero>\n        <div>Hero</div>\n      </CompassHero>\n      <CompassContent>\n        <CompassMainHeader>\n          <Panel>\n            <PanelMain>\n              <PanelMainBody>\n                <CompassMainHeaderContent>\n                  <div>Content title</div>\n                </CompassMainHeaderContent>\n              </PanelMainBody>\n            </PanelMain>\n          </Panel>\n        </CompassMainHeader>\n        <div>Content</div>\n      </CompassContent>\n    </>\n  );\n  const sidebarEndContent = <div>Sidebar end</div>;\n  const footerContent = <div>Footer</div>;\n\n  return (\n    <Compass\n      header={headerContent}\n      sidebarStart={sidebarStartContent}\n      main={mainContent}\n      sidebarEnd={sidebarEndContent}\n      footer={footerContent}\n      style={{ height: '600px' }}\n    />\n  );\n};\n","title":"Basic","lang":"ts","isBeta":true,"className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`In a basic Compass layout, content can be passed to the following props to populate different areas of the page:`}
+      </p>
+      
+      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          
+          <code {...{"className":"ws-code "}}>
+            {`header`}
+          </code>
+          {`: Content rendered at the top of the page, typically including a `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`<CompassHeader>`}
+          </code>
+          {` component that divides the header into 3 areas, with a logo or brand, middle navigation, and profile.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          
+          <code {...{"className":"ws-code "}}>
+            {`sidebarStart`}
+          </code>
+          {`: Content rendered at the horizontal start of the page (by default, the left side).`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          
+          <code {...{"className":"ws-code "}}>
+            {`main`}
+          </code>
+          {`: Content rendered in the center of the page, typically including a `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`<CompassMainHeader>`}
+          </code>
+          {` or `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`<CompassHero>`}
+          </code>
+          {`, along with a `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`<CompassContent>`}
+          </code>
+          {` filled with 1 or more `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`<Panel>`}
+          </code>
+          {` components.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          
+          <code {...{"className":"ws-code "}}>
+            {`sidebarEnd`}
+          </code>
+          {`: Content rendered at the horizontal end of the page (by default, the right side).`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          
+          <code {...{"className":"ws-code "}}>
+            {`footer`}
+          </code>
+          {`: Content rendered at the bottom of the page.`}
+        </li>
+        
+
+      </ul>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The background image of `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Compass>`}
+        </code>
+        {` is set at a global level alongside the theme. You can customize the background image of the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Hero>`}
+        </code>
+        {` inside `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<CompassHero>`}
+        </code>
+        {` by using its `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`backgroundSrcLight`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`backgroundSrcDark`}
+        </code>
+        {` props, or you may set a gradient using the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`gradientLight`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`gradientDark`}
+        </code>
+        {` props.`}
+      </p>
+    </Example>,
+  'With alternate footer': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Compass,\n  CompassHeader,\n  CompassHero,\n  CompassContent,\n  CompassMainHeader,\n  CompassMainFooter\n} from '@patternfly/react-core';\nimport './compass.css';\n\nexport const CompassMainFooterDemo: React.FunctionComponent = () => {\n  const headerContent = <CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />;\n  const sidebarStartContent = <div>Sidebar start</div>;\n  // TODO: simplify mainContent to only a div string\n  const mainContent = (\n    <>\n      <CompassHero>\n        <div>Hero</div>\n      </CompassHero>\n      <CompassContent>\n        <CompassMainHeader>\n          <div>Content title</div>\n        </CompassMainHeader>\n        <div>Content</div>\n      </CompassContent>\n      <CompassMainFooter>\n        <div>Footer</div>\n      </CompassMainFooter>\n    </>\n  );\n  const sidebarEndContent = <div>Sidebar end</div>;\n\n  return (\n    <Compass\n      header={headerContent}\n      sidebarStart={sidebarStartContent}\n      main={mainContent}\n      sidebarEnd={sidebarEndContent}\n      isFooterExpanded={false}\n      style={{ height: '600px' }}\n    />\n  );\n};\n","title":"With alternate footer","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`footer`}
+        </code>
+        {` is used, its content will fill the width of the screen. By default, when content inside the footer grows, the height and placement of the start and end sidebars will adjust to allow for the change. To modify this behavior and render footer content without interfering with the sidebars, instead place a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<CompassMainFooter>`}
+        </code>
+        {` inside the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`main`}
+        </code>
+        {` section. This will render content at the bottom of the page between the 2 sidebars, rather than across the entire bottom of the page.`}
+      </p>
+    </Example>,
+  'With docked nav': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Compass,\n  CompassContent,\n  CompassMainHeader,\n  Panel,\n  PanelMain,\n  PanelMainBody,\n  CompassMainHeaderContent\n} from '@patternfly/react-core';\nimport './compass.css';\n\nexport const CompassBasic: React.FunctionComponent = () => {\n  const dockContent = <div>Content</div>;\n  const mainContent = (\n    <CompassContent>\n      <CompassMainHeader>\n        <Panel>\n          <PanelMain>\n            <PanelMainBody>\n              <CompassMainHeaderContent>\n                <div>Content title</div>\n              </CompassMainHeaderContent>\n            </PanelMainBody>\n          </PanelMain>\n        </Panel>\n      </CompassMainHeader>\n      <div>Content</div>\n    </CompassContent>\n  );\n  return <Compass dock={dockContent} main={mainContent} />;\n};\n","title":"With docked nav","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["With alternate footer"])}
+    {React.createElement(pageData.examples["With docked nav"])}
+    <AutoLinkHeader {...{"id":"composable-structure","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Composable structure`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`When building a more custom implementation with Compass components, there are some intended or expected structures that must remain present.`}
+    </p>
+    <AutoLinkHeader {...{"id":"compassmainheader-structure","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`CompassMainHeader structure`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`When using the `}
+      <code {...{"className":"ws-code "}}>
+        {`children`}
+      </code>
+      {` property in the `}
+      <code {...{"className":"ws-code "}}>
+        {`<CompassMainHeader>`}
+      </code>
+      {` component, there are specific structural patterns that you should follow, as shown this general code structure.`}
+    </p>
+    <Example {...{"code":"<CompassMainHeader>\n  <Panel>\n    <PanelMain>\n      <PanelMainBody>\n        <CompassMainHeaderContent>\n          {Your custom content goes here, which can include the <CompassMainHeaderTitle> and/or <CompassMainHeaderToolbar> sub-components}\n        </CompassMainHeaderContent>\n      </PanelMainBody>\n    </PanelMain>\n  </Panel>\n</CompassMainHeader>","lang":"noLive","className":""}}>
+    </Example>
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsCompassReactDocs';
+Component.pageData = pageData;
+
+export default Component;