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

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

@@ -1,148 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1,206 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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;