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

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

@@ -0,0 +1,211 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import '../../../../../react-core/src/components/Truncate/examples/./TruncateExamples.css';
+const pageData = {
+  "id": "Truncate",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/truncate/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Truncate/examples/Truncate.md",
+  "relPath": "packages/react-core/src/components/Truncate/examples/Truncate.md",
+  "propComponents": [
+    {
+      "name": "Truncate",
+      "description": "",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Class to add to outer span"
+        },
+        {
+          "name": "content",
+          "type": "string",
+          "description": "Text to truncate",
+          "required": true
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "description": "An HREF to turn the truncate wrapper into an anchor element. For more custom control, use the\ntooltipProps with a triggerRef property passed in."
+        },
+        {
+          "name": "maxCharsDisplayed",
+          "type": "number",
+          "description": "The maximum number of characters to display before truncating. This will always truncate content\nwhen its length exceeds the value passed to this prop, and container width/resizing will not affect truncation."
+        },
+        {
+          "name": "omissionContent",
+          "type": "string",
+          "description": "The content to use to signify omission of characters when using the maxCharsDisplayed prop.\nBy default this will render an ellipsis."
+        },
+        {
+          "name": "position",
+          "type": "'start' | 'middle' | 'end'",
+          "description": "Where the text will be truncated"
+        },
+        {
+          "name": "tooltipPosition",
+          "type": "| TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
+          "description": "Tooltip position"
+        },
+        {
+          "name": "tooltipProps",
+          "type": "Omit<TooltipProps, 'content'>",
+          "description": "Additional props to pass to the tooltip."
+        },
+        {
+          "name": "trailingNumChars",
+          "type": "number",
+          "description": "The number of characters displayed in the second half of a middle truncation. This will be overridden by\nthe maxCharsDisplayed prop."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-truncate"
+  ],
+  "examples": [
+    "Default",
+    "Middle",
+    "Start",
+    "With custom tooltip position",
+    "Based on max characters",
+    "With links"
+  ]
+};
+pageData.relativeImports = "import 'react-core/src/components/Truncate/examples/./TruncateExamples.css';"
+pageData.examples = {
+  'Default': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Truncate } from '@patternfly/react-core';\n\nexport const TruncateDefault: React.FunctionComponent = () => (\n  <div className=\"truncate-example-resize\">\n    <Truncate content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'} />\n  </div>\n);\n","title":"Default","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`By default content will be truncated at its end when it cannot fit entirely inside its parent container.`}
+      </p>
+    </Example>,
+  'Middle': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Truncate } from '@patternfly/react-core';\n\nexport const TruncateMiddle: React.FunctionComponent = () => (\n  <div className=\"truncate-example-resize\">\n    <Truncate\n      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}\n      trailingNumChars={10}\n      position={'middle'}\n    />\n  </div>\n);\n","title":"Middle","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When passing a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`position`}
+        </code>
+        {` property with a value of "middle", the position of the truncation will change based on the parent container's width and the amount of `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`trailingNumChars`}
+        </code>
+        {` passed in. The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`trailingNumChars`}
+        </code>
+        {` will always be displayed, while the rest of the content will be truncated based on the parent container width.`}
+      </p>
+    </Example>,
+  'Start': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Truncate } from '@patternfly/react-core';\n\nexport const TruncateStart: React.FunctionComponent = () => (\n  <div className=\"truncate-example-resize\">\n    <Truncate content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'} position={'start'} />\n  </div>\n);\n","title":"Start","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can truncate content at its start by passing the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`position`}
+        </code>
+        {` property with a value of "start". This can be useful if you have several strings to truncate that have similar text at the start, but unique text at the end that you want to have visible.`}
+      </p>
+    </Example>,
+  'With custom tooltip position': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Truncate } from '@patternfly/react-core';\n\nexport const TruncateCustomTooltipPosition: React.FunctionComponent = () => (\n  <div className=\"truncate-example-resize\">\n    <Truncate\n      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}\n      tooltipPosition={'bottom'}\n    />\n  </div>\n);\n","title":"With custom tooltip position","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can customize the position of the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Tooltip>`}
+        </code>
+        {` that is rendered by passing in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tooltipPosition`}
+        </code>
+        {` property. The following example overrides the default "top" position with a "bottom" position.`}
+      </p>
+    </Example>,
+  'Based on max characters': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Truncate, TruncatePosition } from '@patternfly/react-core';\n\nexport const TruncateMaxChars: React.FunctionComponent = () => (\n  <>\n    <div>Truncated at end position:</div>\n    <Truncate\n      maxCharsDisplayed={15}\n      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}\n    />\n    <br />\n    <br />\n    <div>Truncated at middle position:</div>\n    <Truncate\n      maxCharsDisplayed={15}\n      position={TruncatePosition.middle}\n      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}\n    />\n    <br />\n    <br />\n    <div>Truncated at start position:</div>\n    <Truncate\n      maxCharsDisplayed={15}\n      position={TruncatePosition.start}\n      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}\n    />\n  </>\n);\n","title":"Based on max characters","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Rather than observing container width, you can have truncation be based on a maximum amount of characters that should always be displayed via the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`maxCharsDisplayed`}
+        </code>
+        {` property. While the content's parent container width will not have an affect on whether truncation occurs, it will affect whether the content wraps. This property must be set to a value larger than `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`0`}
+        </code>
+        {`, otherwise the component will fall back to observing container width.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Truncating based on a maximum amount of characters will truncate the content at the end by default. When the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`position`}
+        </code>
+        {` property is set to "middle", the truncation will split the content as evenly as possible, providing a more "true middle" truncation.`}
+      </p>
+    </Example>,
+  'With links': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Truncate } from '@patternfly/react-core';\n\nexport const TruncateLinks: React.FunctionComponent = () => {\n  const content = 'A very lengthy anchor text content to trigger truncation';\n  return (\n    <>\n      <div>With default width-observing truncation:</div>\n      <div className=\"truncate-example-resize\">\n        <Truncate href=\"#\" content={content} />\n        <Truncate position=\"start\" href=\"#\" content={content} />\n        <Truncate position=\"middle\" href=\"#\" content={content} />\n      </div>\n      <br />\n      <div>With max characters truncation:</div>\n      <Truncate maxCharsDisplayed={15} href=\"#\" content={content} />\n      <br />\n      <Truncate maxCharsDisplayed={15} position=\"start\" href=\"#\" content={content} />\n      <br />\n      <Truncate maxCharsDisplayed={15} position=\"middle\" href=\"#\" content={content} />\n    </>\n  );\n};\n","title":"With links","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To truncate link text, you can pass the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`href`}
+        </code>
+        {` property in.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`The default behavior of the `}
+      <code {...{"className":"ws-code "}}>
+        {`Truncate`}
+      </code>
+      {` component is to truncate based on whether the content can fit within the width of its parent container, and to prevent text from wrapping. The following examples that use this default behavior render the `}
+      <code {...{"className":"ws-code "}}>
+        {`<Truncate>`}
+      </code>
+      {` component inside a resizable container, allowing you to see how the parent container width affects the truncation.`}
+    </p>
+    {React.createElement(pageData.examples["Default"])}
+    {React.createElement(pageData.examples["Middle"])}
+    {React.createElement(pageData.examples["Start"])}
+    {React.createElement(pageData.examples["With custom tooltip position"])}
+    {React.createElement(pageData.examples["Based on max characters"])}
+    {React.createElement(pageData.examples["With links"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsTruncateReactDocs';
+Component.pageData = pageData;
+
+export default Component;

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useRef, useState } from 'react';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
+import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-menu-bars-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import srcImportinmodalwithdrawerandinformationalstep from './react-demos/in-modal-with-drawer-and-informational-step.png';
+import srcImportinmodalwithdrawer from './react-demos/in-modal-with-drawer.png';
+import srcImportinmodal from './react-demos/in-modal.png';
+import srcImportinpagewithdrawerandinformationalstep from './react-demos/in-page-with-drawer-and-informational-step.png';
+import srcImportinpagewithdrawer from './react-demos/in-page-with-drawer.png';
+import srcImportinpage from './react-demos/in-page.png';
+const pageData = {
+  "id": "Wizard",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/wizard/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Wizard/WizardDemo.md",
+  "relPath": "packages/react-core/src/demos/Wizard/WizardDemo.md",
+  "fullscreenExamples": [
+    "In modal",
+    "In modal, with drawer",
+    "In modal, with drawer and informational step",
+    "In page",
+    "In page, with drawer",
+    "In page, with drawer and informational step"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useRef,
+  useState,
+  pfLogo,
+  RhUiMenuBarsIcon,
+  DashboardWrapper
+};
+pageData.examples = {
+  'In modal': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportinmodal} {...{"code":"import {\n  Card,\n  CardBody,\n  Gallery,\n  GalleryItem,\n  PageSection,\n  Modal,\n  ModalVariant,\n  Wizard,\n  WizardHeader,\n  WizardStep\n} from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\n\nexport const WizardInModalDemo: React.FunctionComponent = () => (\n  <>\n    <DashboardWrapper hasPageTemplateTitle>\n      <PageSection isWidthLimited aria-label=\"Card gallery\">\n        <Gallery hasGutter>\n          {Array.from({ length: 10 }).map((_value, index) => (\n            <GalleryItem key={index}>\n              <Card>\n                <CardBody>This is a card</CardBody>\n              </Card>\n            </GalleryItem>\n          ))}\n        </Gallery>\n      </PageSection>\n    </DashboardWrapper>\n    <Modal\n      isOpen\n      variant={ModalVariant.large}\n      showClose={false}\n      hasNoBodyWrapper\n      aria-describedby=\"wiz-modal-demo-description\"\n      aria-labelledby=\"wiz-modal-demo-title\"\n    >\n      <Wizard\n        header={\n          <WizardHeader\n            title=\"Wizard in modal\"\n            titleId=\"wiz-modal-demo-title\"\n            description=\"Simple wizard description\"\n            descriptionId=\"wiz-modal-demo-description\"\n            closeButtonAriaLabel=\"Close wizard\"\n          />\n        }\n      >\n        <WizardStep name=\"Information\" id=\"wizard-step-1\">\n          <p>Step 1 content</p>\n        </WizardStep>\n        <WizardStep\n          name=\"Configuration\"\n          id=\"wizard-step-2\"\n          steps={[\n            <WizardStep name=\"Substep A\" id=\"wizard-step-2a\" key=\"wizard-step-2a\">\n              <p>Configuration substep A</p>\n            </WizardStep>,\n            <WizardStep name=\"Substep B\" id=\"wizard-step-2b\" key=\"wizard-step-2b\">\n              <p>Configuration substep B</p>\n            </WizardStep>\n          ]}\n        />\n        <WizardStep name=\"Additional\" id=\"wizard-step-3\">\n          <p>Step 3 content</p>\n        </WizardStep>\n        <WizardStep name=\"Review\" id=\"wizard-step-4\" footer={{ nextButtonText: 'Finish' }}>\n          <p>Review step content</p>\n        </WizardStep>\n      </Wizard>\n    </Modal>\n  </>\n);\n","title":"In modal","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'In modal, with drawer': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportinmodalwithdrawer} {...{"code":"import { useRef, useState } from 'react';\nimport {\n  Button,\n  Drawer,\n  DrawerContent,\n  DrawerPanelContent,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Flex,\n  Modal,\n  ModalVariant,\n  Wizard,\n  WizardHeader,\n  WizardStep\n} from '@patternfly/react-core';\n\nexport const WizardModalWithDrawerDemo: React.FunctionComponent = () => {\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement | null>(null);\n\n  const onExpand = () => {\n    if (drawerRef.current) {\n      drawerRef.current.focus();\n    }\n  };\n\n  const onOpenClick = () => {\n    setIsDrawerExpanded(true);\n  };\n\n  const onCloseClick = () => {\n    setIsDrawerExpanded(false);\n  };\n\n  const createStepContentWithDrawer = (stepName: string) => (\n    <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>\n      <DrawerContent\n        panelContent={\n          <DrawerPanelContent widths={{ default: 'width_33' }}>\n            <DrawerHead>\n              <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>\n                Drawer content: {stepName}\n              </span>\n              <DrawerActions>\n                <DrawerCloseButton onClick={onCloseClick} />\n              </DrawerActions>\n            </DrawerHead>\n          </DrawerPanelContent>\n        }\n      >\n        <Flex\n          className=\"pf-v6-c-wizard__main-body\"\n          direction={{ default: 'column' }}\n          spaceItems={{ default: 'spaceItemsLg' }}\n          height=\"100%\"\n        >\n          {!isDrawerExpanded && (\n            <Button isInline variant=\"link\" onClick={onOpenClick}>\n              Open drawer\n            </Button>\n          )}\n          <div>{stepName} content</div>\n        </Flex>\n      </DrawerContent>\n    </Drawer>\n  );\n\n  return (\n    <Modal\n      isOpen\n      variant={ModalVariant.large}\n      showClose={false}\n      hasNoBodyWrapper\n      aria-describedby=\"wiz-modal-demo-description\"\n      aria-labelledby=\"wiz-modal-demo-title\"\n    >\n      <Wizard\n        header={\n          <WizardHeader\n            closeButtonAriaLabel=\"Close wizard\"\n            title=\"Wizard in modal with drawer\"\n            titleId=\"wiz-modal-demo-title\"\n            description=\"Simple wizard description\"\n            descriptionId=\"wiz-modal-demo-description\"\n          />\n        }\n      >\n        <WizardStep body={{ hasNoPadding: true }} name=\"Information\" id=\"wizard-step-1\">\n          {createStepContentWithDrawer('Information step')}\n        </WizardStep>\n        <WizardStep\n          name=\"Configuration\"\n          id=\"wizard-step-2\"\n          steps={[\n            <WizardStep body={{ hasNoPadding: true }} name=\"Substep A\" id=\"wizard-step-2a\" key=\"wizard-step-2a\">\n              {createStepContentWithDrawer('Configuration substep A')}\n            </WizardStep>,\n            <WizardStep body={{ hasNoPadding: true }} name=\"Substep B\" id=\"wizard-step-2b\" key=\"wizard-step-2b\">\n              {createStepContentWithDrawer('Configuration substep B')}\n            </WizardStep>\n          ]}\n        />\n        <WizardStep body={{ hasNoPadding: true }} name=\"Additional\" id=\"wizard-step-3\">\n          {createStepContentWithDrawer('Additional step')}\n        </WizardStep>\n        <WizardStep\n          body={{ hasNoPadding: true }}\n          name=\"Review\"\n          id=\"wizard-step-4\"\n          footer={{ nextButtonText: 'Finish' }}\n        >\n          {createStepContentWithDrawer('Review step')}\n        </WizardStep>\n      </Wizard>\n    </Modal>\n  );\n};\n","title":"In modal, with drawer","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'In modal, with drawer and informational step': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportinmodalwithdrawerandinformationalstep} {...{"code":"import { useRef, useState } from 'react';\nimport {\n  Button,\n  Content,\n  Drawer,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerContent,\n  DrawerPanelContent,\n  DrawerHead,\n  Flex,\n  Modal,\n  ModalVariant,\n  Wizard,\n  WizardHeader,\n  WizardStep\n} from '@patternfly/react-core';\n\nexport const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () => {\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement | null>(null);\n\n  const onExpand = () => {\n    if (drawerRef.current) {\n      drawerRef.current.focus();\n    }\n  };\n\n  const onOpenClick = () => {\n    setIsDrawerExpanded(true);\n  };\n\n  const onCloseClick = () => {\n    setIsDrawerExpanded(false);\n  };\n\n  const createStepContentWithDrawer = (stepName: string) => (\n    <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>\n      <DrawerContent\n        panelContent={\n          <DrawerPanelContent widths={{ default: 'width_33' }}>\n            <DrawerHead>\n              <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>\n                Drawer content: {stepName}\n              </span>\n              <DrawerActions>\n                <DrawerCloseButton onClick={onCloseClick} />\n              </DrawerActions>\n            </DrawerHead>\n          </DrawerPanelContent>\n        }\n      >\n        <Flex\n          className=\"pf-v6-c-wizard__main-body\"\n          direction={{ default: 'column' }}\n          spaceItems={{ default: 'spaceItemsLg' }}\n          height=\"100%\"\n        >\n          <Content>\n            <h1>{stepName} content</h1>\n            <p>\n              Wizard description goes here. If you need more assistance,{' '}\n              <Button isInline variant=\"link\" onClick={onOpenClick}>\n                see more information\n              </Button>{' '}\n              in the side drawer.{' '}\n            </p>\n          </Content>\n        </Flex>\n      </DrawerContent>\n    </Drawer>\n  );\n\n  return (\n    <Modal\n      isOpen\n      variant={ModalVariant.large}\n      showClose={false}\n      hasNoBodyWrapper\n      aria-describedby=\"wiz-modal-demo-description\"\n      aria-labelledby=\"wiz-modal-demo-title\"\n    >\n      <Wizard\n        header={\n          <WizardHeader\n            closeButtonAriaLabel=\"Close wizard\"\n            title=\"Wizard in modal with drawer and info step\"\n            titleId=\"wiz-modal-demo-title\"\n            description=\"Simple wizard description\"\n            descriptionId=\"wiz-modal-demo-description\"\n          />\n        }\n      >\n        <WizardStep body={{ hasNoPadding: true }} name=\"Information\" id=\"wizard-step-1\">\n          {createStepContentWithDrawer('Information step')}\n        </WizardStep>\n        <WizardStep\n          name=\"Configuration\"\n          id=\"wizard-step-2\"\n          steps={[\n            <WizardStep body={{ hasNoPadding: true }} name=\"Substep A\" id=\"wizard-step-2a\" key=\"wizard-step-2a\">\n              {createStepContentWithDrawer('Configuration substep A')}\n            </WizardStep>,\n            <WizardStep body={{ hasNoPadding: true }} name=\"Substep B\" id=\"wizard-step-2b\" key=\"wizard-step-2b\">\n              {createStepContentWithDrawer('Configuration substep B')}\n            </WizardStep>\n          ]}\n        />\n        <WizardStep body={{ hasNoPadding: true }} name=\"Additional\" id=\"wizard-step-3\">\n          {createStepContentWithDrawer('Additional step')}\n        </WizardStep>\n        <WizardStep\n          body={{ hasNoPadding: true }}\n          name=\"Review\"\n          id=\"wizard-step-4\"\n          footer={{ nextButtonText: 'Finish' }}\n        >\n          {createStepContentWithDrawer('Review step')}\n        </WizardStep>\n      </Wizard>\n    </Modal>\n  );\n};\n","title":"In modal, with drawer and informational step","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'In page': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportinpage} {...{"code":"import { Fragment } from 'react';\nimport { PageSection, PageSectionTypes, Wizard, WizardStep } from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';\n\nexport const WizardFullPage: React.FunctionComponent = () => (\n  <Fragment>\n    <DashboardWrapper hasPageTemplateTitle>\n      <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} aria-label=\"Wizard container\">\n        <Wizard>\n          <WizardStep name=\"Information\" id=\"wizard-step-1\">\n            <p>Step 1 content</p>\n          </WizardStep>\n          <WizardStep\n            name=\"Configuration\"\n            id=\"wizard-step-2\"\n            steps={[\n              <WizardStep name=\"Substep A\" id=\"wizard-step-2a\" key=\"wizard-step-2a\">\n                <p>Configuration substep A</p>\n              </WizardStep>,\n              <WizardStep name=\"Substep B\" id=\"wizard-step-2b\" key=\"wizard-step-2b\">\n                <p>Configuration substep B</p>\n              </WizardStep>\n            ]}\n          />\n          <WizardStep name=\"Additional\" id=\"wizard-step-3\">\n            <p>Step 3 content</p>\n          </WizardStep>\n          <WizardStep name=\"Review\" id=\"wizard-step-4\" footer={{ nextButtonText: 'Finish' }}>\n            <p>Review step content</p>\n          </WizardStep>\n        </Wizard>\n      </PageSection>\n    </DashboardWrapper>\n  </Fragment>\n);\n","title":"In page","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'In page, with drawer': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportinpagewithdrawer} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  Content,\n  Drawer,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerContent,\n  DrawerPanelContent,\n  DrawerHead,\n  Flex,\n  Nav,\n  NavItem,\n  NavList,\n  Page,\n  PageSection,\n  PageSectionTypes,\n  PageSidebar,\n  PageSidebarBody,\n  SkipToContent,\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  PageToggleButton,\n  Wizard,\n  WizardStep\n} from '@patternfly/react-core';\nimport pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';\n\nexport const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n  const [activeItem, setActiveItem] = useState(0);\n\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    if (drawerRef.current) {\n      drawerRef.current.focus();\n    }\n  };\n\n  const onOpenClick = () => {\n    setIsDrawerExpanded(true);\n  };\n\n  const onCloseClick = () => {\n    setIsDrawerExpanded(false);\n  };\n\n  const onNavSelect = (_event: React.FormEvent<HTMLElement>, result: { itemId: number | string }) => {\n    setActiveItem(result.itemId as number);\n  };\n\n  const PageNav = (\n    <Nav onSelect={onNavSelect} aria-label=\"Nav\">\n      <NavList>\n        <NavItem itemId={0} isActive={activeItem === 0}>\n          System Panel\n        </NavItem>\n        <NavItem itemId={1} isActive={activeItem === 1}>\n          Policy\n        </NavItem>\n        <NavItem itemId={2} isActive={activeItem === 2}>\n          Authentication\n        </NavItem>\n        <NavItem itemId={3} isActive={activeItem === 3}>\n          Network Services\n        </NavItem>\n        <NavItem itemId={4} isActive={activeItem === 4}>\n          Server\n        </NavItem>\n      </NavList>\n    </Nav>\n  );\n\n  const masthead = (\n    <Masthead id=\"basic\">\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton isHamburgerButton aria-label=\"Global navigation\" />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo>\n            <Brand src={pfLogo} alt=\"PatternFly\" heights={{ default: '36px' }} />\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n    </Masthead>\n  );\n\n  const Sidebar = (\n    <PageSidebar>\n      <PageSidebarBody>{PageNav}</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  const pageId = 'main-content-page-layout-default-nav';\n\n  const handleClick = (event) => {\n    event.preventDefault();\n\n    const mainContentElement = document.getElementById(pageId);\n    if (mainContentElement) {\n      mainContentElement.focus();\n    }\n  };\n\n  const PageSkipToContent = (\n    <SkipToContent onClick={handleClick} href={`#${pageId}`}>\n      Skip to content\n    </SkipToContent>\n  );\n\n  const PageBreadcrumb = (\n    <Breadcrumb>\n      <BreadcrumbItem>Section home</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\" isActive>\n        Section landing\n      </BreadcrumbItem>\n    </Breadcrumb>\n  );\n\n  const createStepContentWithDrawer = (stepName: string) => (\n    <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>\n      <DrawerContent\n        panelContent={\n          <DrawerPanelContent widths={{ default: 'width_33' }}>\n            <DrawerHead>\n              <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>\n                Drawer content: {stepName}\n              </span>\n              <DrawerActions>\n                <DrawerCloseButton onClick={onCloseClick} />\n              </DrawerActions>\n            </DrawerHead>\n          </DrawerPanelContent>\n        }\n      >\n        <Flex\n          className=\"pf-v6-c-wizard__main-body\"\n          direction={{ default: 'column' }}\n          spaceItems={{ default: 'spaceItemsLg' }}\n          height=\"100%\"\n        >\n          {!isDrawerExpanded && (\n            <Button isInline variant=\"link\" onClick={onOpenClick}>\n              Open drawer\n            </Button>\n          )}\n          <div>{stepName} content</div>\n        </Flex>\n      </DrawerContent>\n    </Drawer>\n  );\n\n  return (\n    <Fragment>\n      <Page\n        masthead={masthead}\n        sidebar={Sidebar}\n        isManagedSidebar\n        skipToContent={PageSkipToContent}\n        breadcrumb={PageBreadcrumb}\n        mainContainerId={pageId}\n      >\n        <PageSection aria-labelledby=\"main-title\">\n          <Content>\n            <h1 id=\"main-title\">Main title</h1>\n            <p>A demo of a wizard in a page.</p>\n          </Content>\n        </PageSection>\n        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} aria-label=\"Wizard container\">\n          <Wizard>\n            <WizardStep body={{ hasNoPadding: true }} name=\"Information\" id=\"wizard-step-1\">\n              {createStepContentWithDrawer('Information step')}\n            </WizardStep>\n            <WizardStep\n              name=\"Configuration\"\n              id=\"wizard-step-2\"\n              steps={[\n                <WizardStep body={{ hasNoPadding: true }} name=\"Substep A\" id=\"wizard-step-2a\" key=\"wizard-step-2a\">\n                  {createStepContentWithDrawer('Configuration substep A')}\n                </WizardStep>,\n                <WizardStep body={{ hasNoPadding: true }} name=\"Substep B\" id=\"wizard-step-2b\" key=\"wizard-step-2b\">\n                  {createStepContentWithDrawer('Configuration substep B')}\n                </WizardStep>\n              ]}\n            />\n            <WizardStep body={{ hasNoPadding: true }} name=\"Additional\" id=\"wizard-step-3\">\n              {createStepContentWithDrawer('Additional step')}\n            </WizardStep>\n            <WizardStep\n              body={{ hasNoPadding: true }}\n              name=\"Review\"\n              id=\"wizard-step-4\"\n              footer={{ nextButtonText: 'Finish' }}\n            >\n              {createStepContentWithDrawer('Review step')}\n            </WizardStep>\n          </Wizard>\n        </PageSection>\n      </Page>\n    </Fragment>\n  );\n};\n","title":"In page, with drawer","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'In page, with drawer and informational step': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportinpagewithdrawerandinformationalstep} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  Content,\n  Drawer,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerContent,\n  DrawerHead,\n  DrawerPanelContent,\n  Flex,\n  Nav,\n  NavItem,\n  NavList,\n  Page,\n  PageSection,\n  PageSectionTypes,\n  PageSidebar,\n  PageSidebarBody,\n  SkipToContent,\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  PageToggleButton,\n  Wizard,\n  WizardStep\n} from '@patternfly/react-core';\nimport pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';\n\nexport const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = () => {\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n  const [activeItem, setActiveItem] = useState(0);\n\n  const drawerRef = useRef<HTMLSpanElement | null>(null);\n\n  const onExpand = () => {\n    if (drawerRef.current) {\n      drawerRef.current.focus();\n    }\n  };\n\n  const onOpenClick = () => {\n    setIsDrawerExpanded(true);\n  };\n\n  const onCloseClick = () => {\n    setIsDrawerExpanded(false);\n  };\n\n  const onNavSelect = (_event: any, result: any) => {\n    setActiveItem(result.itemId);\n  };\n\n  const PageNav = (\n    <Nav onSelect={onNavSelect} aria-label=\"Nav\">\n      <NavList>\n        <NavItem itemId={0} isActive={activeItem === 0}>\n          System Panel\n        </NavItem>\n        <NavItem itemId={1} isActive={activeItem === 1}>\n          Policy\n        </NavItem>\n        <NavItem itemId={2} isActive={activeItem === 2}>\n          Authentication\n        </NavItem>\n        <NavItem itemId={3} isActive={activeItem === 3}>\n          Network Services\n        </NavItem>\n        <NavItem itemId={4} isActive={activeItem === 4}>\n          Server\n        </NavItem>\n      </NavList>\n    </Nav>\n  );\n\n  const masthead = (\n    <Masthead id=\"basic\">\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton isHamburgerButton aria-label=\"Global navigation\" />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo>\n            <Brand src={pfLogo} alt=\"PatternFly\" heights={{ default: '36px' }} />\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n    </Masthead>\n  );\n\n  const Sidebar = (\n    <PageSidebar>\n      <PageSidebarBody>{PageNav}</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  const pageId = 'main-content-page-layout-default-nav';\n\n  const handleClick = (event) => {\n    event.preventDefault();\n\n    const mainContentElement = document.getElementById(pageId);\n    if (mainContentElement) {\n      mainContentElement.focus();\n    }\n  };\n\n  const PageSkipToContent = (\n    <SkipToContent onClick={handleClick} href={`#${pageId}`}>\n      Skip to content\n    </SkipToContent>\n  );\n\n  const PageBreadcrumb = (\n    <Breadcrumb>\n      <BreadcrumbItem>Section home</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\" isActive>\n        Section landing\n      </BreadcrumbItem>\n    </Breadcrumb>\n  );\n\n  const createStepContentWithDrawer = (stepName: string) => (\n    <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>\n      <DrawerContent\n        panelContent={\n          <DrawerPanelContent widths={{ default: 'width_33' }}>\n            <DrawerHead>\n              <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>\n                Drawer content: {stepName}\n              </span>\n              <DrawerActions>\n                <DrawerCloseButton onClick={onCloseClick} />\n              </DrawerActions>\n            </DrawerHead>\n          </DrawerPanelContent>\n        }\n      >\n        <Flex\n          className=\"pf-v6-c-wizard__main-body\"\n          direction={{ default: 'column' }}\n          spaceItems={{ default: 'spaceItemsLg' }}\n          height=\"100%\"\n        >\n          <Content>\n            <p>{stepName} content</p>\n            <p>\n              Wizard description goes here. If you need more assistance,{' '}\n              <Button isInline variant=\"link\" onClick={onOpenClick}>\n                see more information\n              </Button>{' '}\n              in the side drawer.{' '}\n            </p>\n          </Content>\n        </Flex>\n      </DrawerContent>\n    </Drawer>\n  );\n\n  return (\n    <Fragment>\n      <Page\n        masthead={masthead}\n        sidebar={Sidebar}\n        isManagedSidebar\n        skipToContent={PageSkipToContent}\n        breadcrumb={PageBreadcrumb}\n        mainContainerId={pageId}\n      >\n        <PageSection aria-labelledby=\"main-title\">\n          <Content>\n            <h1 id=\"main-title\">Main title</h1>\n            <p>A demo of a wizard in a page.</p>\n          </Content>\n        </PageSection>\n        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} ß aria-label=\"Wizard container\">\n          <Wizard>\n            <WizardStep body={{ hasNoPadding: true }} name=\"Information\" id=\"wizard-step-1\">\n              {createStepContentWithDrawer('Information step')}\n            </WizardStep>\n            <WizardStep\n              name=\"Configuration\"\n              id=\"wizard-step-2\"\n              steps={[\n                <WizardStep body={{ hasNoPadding: true }} name=\"Substep A\" id=\"wizard-step-2a\" key=\"wizard-step-2a\">\n                  {createStepContentWithDrawer('Configuration substep A')}\n                </WizardStep>,\n                <WizardStep body={{ hasNoPadding: true }} name=\"Substep B\" id=\"wizard-step-2b\" key=\"wizard-step-2b\">\n                  {createStepContentWithDrawer('Configuration substep B')}\n                </WizardStep>\n              ]}\n            />\n            <WizardStep body={{ hasNoPadding: true }} name=\"Additional\" id=\"wizard-step-3\">\n              {createStepContentWithDrawer('Additional step')}\n            </WizardStep>\n            <WizardStep\n              body={{ hasNoPadding: true }}\n              name=\"Review\"\n              id=\"wizard-step-4\"\n              footer={{ nextButtonText: 'Finish' }}\n            >\n              {createStepContentWithDrawer('Review step')}\n            </WizardStep>\n          </Wizard>\n        </PageSection>\n      </Page>\n    </Fragment>\n  );\n};\n","title":"In page, with drawer and informational step","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["In modal"])}
+    {React.createElement(pageData.examples["In modal, with drawer"])}
+    {React.createElement(pageData.examples["In modal, with drawer and informational step"])}
+    {React.createElement(pageData.examples["In page"])}
+    {React.createElement(pageData.examples["In page, with drawer"])}
+    {React.createElement(pageData.examples["In page, with drawer and informational step"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsWizardReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;