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

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

@@ -0,0 +1,148 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+const pageData = {
+  "id": "Banner",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/banner/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Banner/examples/Banner.md",
+  "relPath": "packages/react-core/src/components/Banner/examples/Banner.md",
+  "propComponents": [
+    {
+      "name": "Banner",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the banner."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the banner."
+        },
+        {
+          "name": "color",
+          "type": "'red' | 'orangered' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple'",
+          "description": "Color options for the banner, will be overwritten by any applied using the status prop."
+        },
+        {
+          "name": "isPill",
+          "type": "boolean",
+          "description": "If set to true, the banner will have a pill shape",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isSticky",
+          "type": "boolean",
+          "description": "If set to true, the banner sticks to the top of its container",
+          "defaultValue": "false"
+        },
+        {
+          "name": "screenReaderText",
+          "type": "string",
+          "description": "Text announced by screen readers to indicate the type of banner. This prop should only\nbe passed in when the banner conveys status/severity."
+        },
+        {
+          "name": "status",
+          "type": "'success' | 'warning' | 'danger' | 'info' | 'custom'",
+          "description": "Status style options for the banner, will overwrite any color applied using the color prop."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-banner"
+  ],
+  "examples": [
+    "Basic",
+    "Status",
+    "Pill"
+  ]
+};
+pageData.liveContext = {
+  RhUiCheckCircleFillIcon,
+  RhUiErrorFillIcon,
+  RhUiWarningFillIcon,
+  RhUiInformationFillIcon,
+  RhUiNotificationFillIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Banner } from '@patternfly/react-core';\n\nexport const BannerBasic: React.FunctionComponent = () => (\n  <>\n    <Banner>Default banner</Banner>\n    <br />\n    <Banner color=\"red\">Red banner</Banner>\n    <br />\n    <Banner color=\"orangered\">Orangered banner</Banner>\n    <br />\n    <Banner color=\"orange\">Orange banner</Banner>\n    <br />\n    <Banner color=\"yellow\">Yellow banner</Banner>\n    <br />\n    <Banner color=\"green\">Green banner</Banner>\n    <br />\n    <Banner color=\"teal\">Teal banner</Banner>\n    <br />\n    <Banner color=\"blue\">Blue banner</Banner>\n    <br />\n    <Banner color=\"purple\">Purple banner</Banner>\n  </>\n);\n","title":"Basic","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Banners can be styled with one of 9 different colors using the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`color`}
+        </code>
+        {` prop. A basic banner should only be used when the banner color does not represent status or severity.`}
+      </p>
+    </Example>,
+  'Status': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Banner, Flex, FlexItem } from '@patternfly/react-core';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';\nimport RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';\nimport RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';\nimport RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';\n\nexport const BannerStatus: React.FunctionComponent = () => (\n  <>\n    <Banner screenReaderText=\"Success banner\" status=\"success\">\n      <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n        <FlexItem>\n          <RhUiCheckCircleFillIcon />\n        </FlexItem>\n        <FlexItem>Success banner</FlexItem>\n      </Flex>\n    </Banner>\n    <br />\n    <Banner screenReaderText=\"Warning banner\" status=\"warning\">\n      <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n        <FlexItem>\n          <RhUiWarningFillIcon />\n        </FlexItem>\n        <FlexItem>Warning banner</FlexItem>\n      </Flex>\n    </Banner>\n    <br />\n    <Banner screenReaderText=\"Danger banner\" status=\"danger\">\n      <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n        <FlexItem>\n          <RhUiErrorFillIcon />\n        </FlexItem>\n        <FlexItem>Danger banner</FlexItem>\n      </Flex>\n    </Banner>\n    <br />\n    <Banner screenReaderText=\"Info banner\" status=\"info\">\n      <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n        <FlexItem>\n          <RhUiInformationFillIcon />\n        </FlexItem>\n        <FlexItem>Info banner</FlexItem>\n      </Flex>\n    </Banner>\n    <br />\n    <Banner screenReaderText=\"Custom banner\" status=\"custom\">\n      <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n        <FlexItem>\n          <RhUiNotificationFillIcon />\n        </FlexItem>\n        <FlexItem>Custom banner</FlexItem>\n      </Flex>\n    </Banner>\n  </>\n);\n","title":"Status","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When a banner is used to convey status it should be styled using the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`status`}
+        </code>
+        {` prop. Additionally, it is advised to pass an icon inside the banner to convey the status in a way besides just color.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`screenReaderText`}
+        </code>
+        {` prop should also be passed in to convey the status/severity of the banner to users of certain assistive technologies such as screen readers.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`In the following example, a flex layout is used inside the banner content to show one possible way to create spacing between the icons and banner text.`}
+      </p>
+    </Example>,
+  'Pill': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Banner, Flex, FlexItem } from '@patternfly/react-core';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';\n\nexport const BannerPill: React.FunctionComponent = () => (\n  <>\n    <Banner isPill>Default pill banner</Banner>\n    <br />\n    <Banner color=\"red\" isPill>\n      Red pill banner\n    </Banner>\n    <br />\n    <Banner isPill screenReaderText=\"Success pill banner\" status=\"success\">\n      <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n        <FlexItem>\n          <RhUiCheckCircleFillIcon />\n        </FlexItem>\n        <FlexItem>Success pill banner</FlexItem>\n      </Flex>\n    </Banner>\n  </>\n);\n","title":"Pill","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Banners may also have a rounded pill style by passing the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isPill`}
+        </code>
+        {` prop.`}
+      </p>
+    </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["Status"])}
+    {React.createElement(pageData.examples["Pill"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsBannerReactDocs';
+Component.pageData = pageData;
+
+export default Component;

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

@@ -0,0 +1,142 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import '../../../../../react-core/src/components/Brand/examples/./Brand.css';
+import pfLogo from '../../../../../react-core/src/components/Brand/examples/../../assets/PF-HorizontalLogo-Color.svg';
+import pfLogoDark from '../../../../../react-core/src/components/Brand/examples/../../assets/PF-HorizontalLogo-Reverse.svg';
+import pfLogoSm from '../../../../../react-core/src/components/Brand/examples/../../assets/PF-IconLogo-color.svg';
+import pfLogoSmDark from '../../../../../react-core/src/components/Brand/examples/../../assets/PF-IconLogo-Reverse.svg';
+const pageData = {
+  "id": "Brand",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/brand/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Brand/examples/Brand.md",
+  "relPath": "packages/react-core/src/components/Brand/examples/Brand.md",
+  "propComponents": [
+    {
+      "name": "Brand",
+      "description": "",
+      "props": [
+        {
+          "name": "alt",
+          "type": "string",
+          "description": "Attribute that specifies the alt text of a <img> Brand. For a <picture> Brand this specifies the fallback <img> alt text.",
+          "required": true
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Transforms the Brand into a <picture> element from an <img> element. Container for <source> child elements."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the either type of Brand.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "heights",
+          "type": "{\n  default?: string;\n  sm?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n  '2xl'?: string;\n}",
+          "description": "Heights at various breakpoints for a <picture> Brand."
+        },
+        {
+          "name": "src",
+          "type": "string",
+          "description": "Attribute that specifies the URL of a <img> Brand. For a <picture> Brand this specifies the fallback <img> URL.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "widths",
+          "type": "{\n  default?: string;\n  sm?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n  '2xl'?: string;\n}",
+          "description": "Widths at various breakpoints for a <picture> Brand."
+        }
+      ]
+    }
+  ],
+  "examples": [
+    "Basic",
+    "Responsive"
+  ]
+};
+pageData.liveContext = {
+  pfLogo,
+  pfLogoDark,
+  pfLogoSm,
+  pfLogoSmDark
+};
+pageData.relativeImports = "import 'react-core/src/components/Brand/examples/./Brand.css';"
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Brand } from '@patternfly/react-core';\nimport pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';\nimport pfLogoDark from '../../assets/PF-HorizontalLogo-Reverse.svg';\n\nexport const BrandBasic: React.FunctionComponent = () => (\n  <>\n    <div className=\"show-light\">\n      <Brand src={pfLogo} alt=\"Patternfly\" widths={{ default: '200px', md: '400px', xl: '600px' }} />\n    </div>\n    <div className=\"show-dark\">\n      <Brand src={pfLogoDark} alt=\"Patternfly\" widths={{ default: '200px', md: '400px', xl: '600px' }} />\n    </div>\n  </>\n);\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Responsive': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Brand } from '@patternfly/react-core';\n\nimport pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';\nimport pfLogoDark from '../../assets/PF-HorizontalLogo-Reverse.svg';\nimport pfLogoSm from '../../assets/PF-IconLogo-color.svg';\nimport pfLogoSmDark from '../../assets/PF-IconLogo-Reverse.svg';\n\nexport const BrandBasic: React.FunctionComponent = () => (\n  <>\n    <div className=\"show-light\">\n      <Brand src={pfLogo} alt=\"Patternfly\" widths={{ default: '40px', sm: '60px', md: '220px' }}>\n        <source media=\"(min-width: 1200px)\" srcSet={pfLogo} />\n        <source media=\"(min-width: 992px)\" srcSet={pfLogo} />\n        <source media=\"(min-width: 768px)\" srcSet={pfLogo} />\n        <source media=\"(min-width: 576px)\" srcSet={pfLogoSm} />\n        <source media=\"(min-width: 320px)\" srcSet={pfLogoSm} />\n        <source srcSet={pfLogo} />\n      </Brand>\n    </div>\n    <div className=\"show-dark\">\n      <Brand src={pfLogoDark} alt=\"Patternfly\" widths={{ default: '40px', sm: '60px', md: '220px' }}>\n        <source media=\"(min-width: 1200px)\" srcSet={pfLogoDark} />\n        <source media=\"(min-width: 992px)\" srcSet={pfLogoDark} />\n        <source media=\"(min-width: 768px)\" srcSet={pfLogoDark} />\n        <source media=\"(min-width: 576px)\" srcSet={pfLogoSmDark} />\n        <source media=\"(min-width: 320px)\" srcSet={pfLogoSmDark} />\n        <source srcSet={pfLogoDark} />\n      </Brand>\n    </div>\n  </>\n);\n","title":"Responsive","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Passing `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<source>`}
+        </code>
+        {` elements as children to `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`Brand`}
+        </code>
+        {` will change the component from an `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<img>`}
+        </code>
+        {` to a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<picture>`}
+        </code>
+        {` element. The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`src`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`alt`}
+        </code>
+        {` properties should still be passed to populate the fallback `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`img`}
+        </code>
+        {` of the brand.`}
+      </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 brand component does not have any built-in theme support. If a brand should be dynamically styled, you must manually set up the necessary logic on your own.`}
+    </p>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`These examples adjust styling when the PatternFly website is toggled between the light and dark theme.`}
+    </p>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Responsive"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsBrandReactDocs';
+Component.pageData = pageData;
+
+export default Component;

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

@@ -0,0 +1,206 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useRef, useState } from 'react';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+const pageData = {
+  "id": "Breadcrumb",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/breadcrumb/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md",
+  "relPath": "packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md",
+  "propComponents": [
+    {
+      "name": "Breadcrumb",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Aria label added to the breadcrumb nav.",
+          "defaultValue": "'Breadcrumb'"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Children nodes be rendered to the BreadCrumb. Should be of type BreadCrumbItem.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the breadcrumb nav.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.",
+          "defaultValue": "true"
+        }
+      ]
+    },
+    {
+      "name": "BreadcrumbItem",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the breadcrumb item.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the breadcrumb item.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "component",
+          "type": "React.ElementType",
+          "description": "Sets the base component to render. Defaults to <a>",
+          "defaultValue": "'a'"
+        },
+        {
+          "name": "isActive",
+          "type": "boolean",
+          "description": "Flag indicating whether the item is active.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isDropdown",
+          "type": "boolean",
+          "description": "Flag indicating whether the item contains a dropdown.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "render",
+          "type": "(props: BreadcrumbItemRenderArgs) => React.ReactNode",
+          "description": "A render function to render the component inside the breadcrumb item.",
+          "defaultValue": "undefined"
+        },
+        {
+          "name": "showDivider",
+          "type": "boolean",
+          "description": "Internal prop set by Breadcrumb on all but the first crumb"
+        },
+        {
+          "name": "target",
+          "type": "string",
+          "description": "Target for breadcrumb link.",
+          "defaultValue": "undefined"
+        },
+        {
+          "name": "to",
+          "type": "string",
+          "description": "HREF for breadcrumb link.",
+          "defaultValue": "undefined"
+        }
+      ]
+    },
+    {
+      "name": "BreadcrumbHeading",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the breadcrumb title.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the breadcrumb item.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "component",
+          "type": "React.ReactNode",
+          "description": "Sets the base component to render. Defaults to <a>",
+          "defaultValue": "'a'"
+        },
+        {
+          "name": "showDivider",
+          "type": "boolean",
+          "description": "Internal prop set by Breadcrumb on all but the first crumb"
+        },
+        {
+          "name": "target",
+          "type": "string",
+          "description": "Target for breadcrumb link.",
+          "defaultValue": "undefined"
+        },
+        {
+          "name": "to",
+          "type": "string",
+          "description": "HREF for breadcrumb link.",
+          "defaultValue": "undefined"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-breadcrumb"
+  ],
+  "examples": [
+    "Basic",
+    "Without home link",
+    "With heading",
+    "With dropdown"
+  ]
+};
+pageData.liveContext = {
+  useRef,
+  useState,
+  RhMicronsCaretLeftIcon,
+  RhMicronsCaretDownIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';\n\nexport const BreadcrumbBasic: React.FunctionComponent = () => (\n  <Breadcrumb ouiaId=\"BasicBreadcrumb\">\n    <BreadcrumbItem to=\"#\">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","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Without home link': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';\n\nexport const BreadcrumbHomeLink: React.FunctionComponent = () => (\n  <Breadcrumb>\n    <BreadcrumbItem>Section Home</BreadcrumbItem>\n    <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n    <BreadcrumbItem to=\"#\">Section title</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","title":"Without home link","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With heading': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';\n\nexport const BreadcrumbWithHeading: React.FunctionComponent = () => (\n  <Breadcrumb>\n    <BreadcrumbItem to=\"#\">Section home</BreadcrumbItem>\n    <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n    <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n    <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n    <BreadcrumbHeading to=\"#\">Section title</BreadcrumbHeading>\n  </Breadcrumb>\n);\n","title":"With heading","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With dropdown': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useRef, useState } from 'react';\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbHeading,\n  Badge,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  Icon,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';\n\nconst dropdownItems = [\n  <DropdownItem\n    icon={\n      <Icon shouldMirrorRTL>\n        <RhMicronsCaretLeftIcon />\n      </Icon>\n    }\n    key=\"edit\"\n  >\n    Edit\n  </DropdownItem>,\n  <DropdownItem\n    icon={\n      <Icon shouldMirrorRTL>\n        <RhMicronsCaretLeftIcon />\n      </Icon>\n    }\n    key=\"action\"\n  >\n    Deployment\n  </DropdownItem>,\n  <DropdownItem\n    icon={\n      <Icon shouldMirrorRTL>\n        <RhMicronsCaretLeftIcon />\n      </Icon>\n    }\n    key=\"apps\"\n  >\n    Applications\n  </DropdownItem>\n];\n\nexport const BreadcrumbDropdown: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const badgeToggleRef = useRef<HTMLButtonElement>(undefined);\n\n  const onToggle = () => setIsOpen(!isOpen);\n\n  const onSelect = () => {\n    setIsOpen((prevIsOpen: boolean) => !prevIsOpen);\n    badgeToggleRef?.current?.focus();\n  };\n\n  return (\n    <Breadcrumb>\n      <BreadcrumbItem component=\"button\">Section home</BreadcrumbItem>\n      <BreadcrumbItem isDropdown>\n        <Dropdown\n          onSelect={onSelect}\n          onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n            <MenuToggle\n              size=\"sm\"\n              badge={\n                <Badge isRead screenReaderText=\"additional items\">\n                  {dropdownItems.length}\n                </Badge>\n              }\n              ref={toggleRef}\n              onClick={onToggle}\n              isExpanded={isOpen}\n              variant=\"plainText\"\n            />\n          )}\n          isOpen={isOpen}\n        >\n          <DropdownList>{dropdownItems.map((dropdownItem) => dropdownItem)}</DropdownList>\n        </Dropdown>\n      </BreadcrumbItem>\n      <BreadcrumbHeading component=\"button\">Section title</BreadcrumbHeading>\n    </Breadcrumb>\n  );\n};\n","title":"With dropdown","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["Without home link"])}
+    {React.createElement(pageData.examples["With heading"])}
+    {React.createElement(pageData.examples["With dropdown"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsBreadcrumbReactDocs';
+Component.pageData = pageData;
+
+export default Component;

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+const pageData = {
+  "id": "Button",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/button/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Button/Button.md",
+  "relPath": "packages/react-core/src/demos/Button/Button.md",
+  "examples": [
+    "Progress button"
+  ]
+};
+pageData.liveContext = {
+  useState,
+  RhUiCheckCircleFillIcon
+};
+pageData.examples = {
+  'Progress button': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';\n\nexport const ButtonProgress: React.FunctionComponent = () => {\n  const [loginState, setLoginState] = useState<'notLoggedIn' | 'loading' | 'loggedIn'>('notLoggedIn');\n\n  return (\n    <Form>\n      <FormGroup label=\"Username\" isRequired fieldId=\"progress-button-initial-login\">\n        <TextInput\n          isRequired\n          type=\"text\"\n          id=\"progress-button-initial-login\"\n          name=\"progress-button-initial-login\"\n          value=\"johndoe\"\n          aria-label=\"username input\"\n        />\n      </FormGroup>\n      <FormGroup label=\"Password\" isRequired fieldId=\"progress-button-initial-password\">\n        <TextInput\n          isRequired\n          type=\"password\"\n          value=\"p@ssw0rd\"\n          id=\"progress-button-initial-password\"\n          name=\"progress-button-initial-password\"\n          aria-label=\"password input\"\n        />\n      </FormGroup>\n      <ActionGroup>\n        <Button\n          variant=\"primary\"\n          onClick={\n            loginState === 'notLoggedIn'\n              ? () => {\n                  setLoginState('loading');\n                  setTimeout(() => {\n                    setLoginState('loggedIn');\n                  }, 3000);\n                }\n              : null\n          }\n          isLoading={loginState === 'loading'}\n          icon={loginState === 'loggedIn' ? <RhUiCheckCircleFillIcon /> : null}\n          spinnerAriaValueText=\"Loading...\"\n        >\n          {loginState === 'notLoggedIn' && 'Link account and log in'}\n          {loginState === 'loading' && 'Linking account'}\n          {loginState === 'loggedIn' && 'Logged in'}\n        </Button>\n      </ActionGroup>\n    </Form>\n  );\n};\n","title":"Progress button","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The following demo shows the intended flow for a button that visually indicates progress. This example demonstrates a login process, which updates the button label based on the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`loginState`}
+        </code>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Progress button"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsButtonReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;