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

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

@@ -0,0 +1,166 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import '../../../../../react-core/src/components/Avatar/examples/./avatar.css';
+import { Fragment } from 'react';
+import avatarImg from '../../../../../react-core/src/components/Avatar/examples/../../assets/img_avatar-light.svg';
+import RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-chatbot-icon';
+const pageData = {
+  "id": "Avatar",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/avatar/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Avatar/examples/Avatar.md",
+  "relPath": "packages/react-core/src/components/Avatar/examples/Avatar.md",
+  "propComponents": [
+    {
+      "name": "Avatar",
+      "description": "",
+      "props": [
+        {
+          "name": "alt",
+          "type": "string",
+          "description": "Specifies the alternate text of the image for the avatar. Will instead set the aria-label when using children or initials; to hide the avatar\nfrom assistive technologies when passing children or initials, pass an empty string to the alt prop.",
+          "required": true
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the avatar, such as custom svgs or icons."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the avatar."
+        },
+        {
+          "name": "color",
+          "type": "'red' | 'orangered' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'gray'",
+          "description": "Color of the avatar."
+        },
+        {
+          "name": "initials",
+          "type": "string",
+          "description": "Initials of the avatar."
+        },
+        {
+          "name": "isBordered",
+          "type": "boolean",
+          "description": "Flag to indicate the avatar should have a border."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg' | 'xl'",
+          "description": "Size variant of avatar."
+        },
+        {
+          "name": "src",
+          "type": "string",
+          "description": "Specifies the URL of the image for the avatar.",
+          "defaultValue": "''"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-avatar"
+  ],
+  "examples": [
+    "Basic usage",
+    "Color modifiers",
+    "With initials",
+    "Bordered",
+    "Size variations"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  avatarImg,
+  RhUiAiChatbotIcon
+};
+pageData.relativeImports = "import 'react-core/src/components/Avatar/examples/./avatar.css';"
+pageData.examples = {
+  'Basic usage': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Avatar } from '@patternfly/react-core';\nimport avatarImg from '../../assets/img_avatar-light.svg';\n\nconst rhdsLogo = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\n    <g>\n      <rect width=\"48\" height=\"48\" fill=\"#147878\"></rect>\n      <rect x=\"36\" y=\"42\" width=\"6\" height=\"6\" fill=\"#004D4D\"></rect>\n      <rect x=\"6\" y=\"42\" width=\"6\" height=\"6\" fill=\"#004D4D\"></rect>\n      <rect x=\"12\" y=\"36\" width=\"24\" height=\"6\" fill=\"#004D4D\"></rect>\n      <rect x=\"18\" y=\"30\" width=\"12\" height=\"6\" fill=\"#004D4D\"></rect>\n      <rect width=\"6\" height=\"24\" transform=\"matrix(-1 0 0 1 48 12)\" fill=\"#004D4D\"></rect>\n      <rect width=\"6\" height=\"6\" transform=\"matrix(-1 0 0 1 42 30)\" fill=\"#004D4D\"></rect>\n      <rect width=\"6\" height=\"6\" transform=\"matrix(-1 0 0 1 36 24)\" fill=\"#004D4D\"></rect>\n      <rect width=\"6\" height=\"6\" transform=\"matrix(-1 0 0 1 42 18)\" fill=\"#004D4D\"></rect>\n      <rect width=\"6\" height=\"6\" transform=\"matrix(-1 0 0 1 36 12)\" fill=\"#004D4D\"></rect>\n      <rect width=\"6\" height=\"6\" transform=\"matrix(-1 0 0 1 42 6)\" fill=\"#004D4D\"></rect>\n      <rect x=\"18\" width=\"12\" height=\"12\" fill=\"#004D4D\"></rect>\n      <rect x=\"6\" y=\"30\" width=\"6\" height=\"6\" fill=\"#004D4D\"></rect>\n      <rect x=\"12\" y=\"24\" width=\"6\" height=\"6\" fill=\"#004D4D\"></rect>\n      <rect x=\"6\" y=\"18\" width=\"6\" height=\"6\" fill=\"#004D4D\"></rect>\n      <rect x=\"12\" y=\"12\" width=\"6\" height=\"6\" fill=\"#004D4D\"></rect>\n      <rect x=\"6\" y=\"6\" width=\"6\" height=\"6\" fill=\"#004D4D\"></rect>\n      <rect y=\"12\" width=\"6\" height=\"24\" fill=\"#004D4D\"></rect>\n    </g>\n  </svg>\n);\n\nexport const AvatarBasic: React.FunctionComponent = () => (\n  <>\n    <Avatar src={avatarImg} alt=\"Basic avatar with image\" />\n    <Avatar alt=\"Basic avatar with children\">{rhdsLogo}</Avatar>\n  </>\n);\n","title":"Basic usage","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Pass in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`src`}
+        </code>
+        {` property to apply an image for the avatar, or pass `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`children`}
+        </code>
+        {` for custom content such as icons or svg elements.`}
+      </p>
+    </Example>,
+  'Color modifiers': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Avatar } from '@patternfly/react-core';\n\nconst profileSvg = (\n  <svg aria-hidden=\"true\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 36 36\">\n    <path fill=\"currentColor\" d=\"M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z\" />\n    <path\n      fill=\"currentColor\"\n      d=\"M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z\"\n    />\n  </svg>\n);\n\nexport const AvatarColorModifiers: React.FunctionComponent = () => (\n  <>\n    <Avatar color=\"red\" alt=\"red avatar\">\n      {profileSvg}\n    </Avatar>\n    <Avatar color=\"orangered\" alt=\"orangered avatar\">\n      {profileSvg}\n    </Avatar>\n    <Avatar color=\"orange\" alt=\"orange avatar\">\n      {profileSvg}\n    </Avatar>\n    <Avatar color=\"yellow\" alt=\"yellow avatar\">\n      {profileSvg}\n    </Avatar>\n    <Avatar color=\"green\" alt=\"green avatar\">\n      {profileSvg}\n    </Avatar>\n    <Avatar color=\"teal\" alt=\"teal avatar\">\n      {profileSvg}\n    </Avatar>\n    <Avatar color=\"blue\" alt=\"blue avatar\">\n      {profileSvg}\n    </Avatar>\n    <Avatar color=\"purple\" alt=\"purple avatar\">\n      {profileSvg}\n    </Avatar>\n    <Avatar color=\"gray\" alt=\"gray avatar\">\n      {profileSvg}\n    </Avatar>\n  </>\n);\n","title":"Color modifiers","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Color modifiers add visual interest and automatically include a border. The available colors are: "red," "orangered," "orange," "yellow," "green," "teal," "blue," "purple," and "gray".`}
+      </p>
+    </Example>,
+  'With initials': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Avatar } from '@patternfly/react-core';\n\nexport const AvatarInitials: React.FunctionComponent = () => (\n  <>\n    <Avatar alt=\"non-color avatar with initial C\" isBordered initials=\"C\" />\n    <Avatar color=\"red\" alt=\"red avatar with initial C\" initials=\"C\" />\n    <Avatar color=\"orangered\" alt=\"orangered avatar with initial C\" initials=\"C\" />\n    <Avatar color=\"orange\" alt=\"orange avatar with initial C\" initials=\"C\" />\n    <Avatar color=\"yellow\" alt=\"yellow avatar with initial C\" initials=\"C\" />\n    <Avatar color=\"green\" alt=\"green avatar with initial C\" initials=\"C\" />\n    <Avatar color=\"teal\" alt=\"teal avatar with initial C\" initials=\"C\" />\n    <Avatar color=\"blue\" alt=\"blue avatar with initial C\" initials=\"C\" />\n    <Avatar color=\"purple\" alt=\"purple avatar with initial C\" initials=\"C\" />\n    <Avatar color=\"gray\" alt=\"gray avatar with initial C\" initials=\"C\" />\n  </>\n);\n","title":"With initials","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`An avatar can display initials by using the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`initials`}
+        </code>
+        {` property. It's recommended to pass only a single initial to ensure the text fits inside of the avatar.`}
+      </p>
+    </Example>,
+  'Bordered': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Avatar } from '@patternfly/react-core';\nimport RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-chatbot-icon';\n\nexport const AvatarBordered: React.FunctionComponent = () => (\n  <Avatar alt=\"Avatar with border\" isBordered>\n    <RhUiAiChatbotIcon />\n  </Avatar>\n);\n","title":"Bordered","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A border can be applied by passing the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isBordered`}
+        </code>
+        {` property to a non-colorful avatar.`}
+      </p>
+    </Example>,
+  'Size variations': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Avatar } from '@patternfly/react-core';\n\nexport const AvatarSizeVariations: React.FunctionComponent = () => (\n  <>\n    <Avatar alt=\"small red avatar with initial C\" initials=\"C\" color=\"red\" size=\"sm\" />\n    <Avatar alt=\"medium red avatar with initial C\" initials=\"C\" color=\"red\" size=\"md\" />\n    <Avatar alt=\"large red avatar with initial C\" initials=\"C\" color=\"red\" size=\"lg\" />\n    <Avatar alt=\"extra large red avatar with initial C\" initials=\"C\" color=\"red\" size=\"xl\" />\n  </>\n);\n","title":"Size variations","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`An avatar can be rendered at different sizes by passing the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`size`}
+        </code>
+        {` property. The available sizes are: "sm," "md" (the default size), "lg," and "xl".`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic usage"])}
+    {React.createElement(pageData.examples["Color modifiers"])}
+    {React.createElement(pageData.examples["With initials"])}
+    {React.createElement(pageData.examples["Bordered"])}
+    {React.createElement(pageData.examples["Size variations"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsAvatarReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/back-to-top/react-demos.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import srcImportdefaulttoscrollwindow from './react-demos/default-to-scroll-window.png';
+import srcImportusingnameselector from './react-demos/using-name-selector.png';
+const pageData = {
+  "id": "Back to top",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/back-to-top/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/BackToTop.md",
+  "relPath": "packages/react-core/src/demos/BackToTop.md",
+  "fullscreenExamples": [
+    "Using name selector"
+  ]
+};
+pageData.liveContext = {
+  useState,
+  DashboardWrapper
+};
+pageData.examples = {
+  'Using name selector': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportusingnameselector} {...{"code":"import { useState } from 'react';\nimport { BackToTop, Card, CardBody, Content, Gallery, GalleryItem, PageSection, Switch } from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\n\nexport const BacktoTopNameDemo: React.FunctionComponent = () => {\n  const [isAlwaysVisible, setIsAlwaysVisible] = useState(false);\n\n  const handleChange = (_event, isChecked) => {\n    setIsAlwaysVisible(isChecked);\n  };\n\n  return (\n    <DashboardWrapper breadcrumb={null}>\n      <PageSection aria-labelledby=\"main-title\">\n        <Content>\n          <h1 id=\"main-title\">Main title</h1>\n          <p>\n            Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />\n            of it’s relative line height of 1.5.\n          </p>\n          <Switch label=\"Always show BackToTopButton\" onChange={handleChange} isChecked={isAlwaysVisible} />\n        </Content>\n      </PageSection>\n      <PageSection\n        hasOverflowScroll\n        tabIndex={0}\n        aria-label=\"Scrollable container of demonstration cards with a back to top element\"\n      >\n        <Gallery hasGutter>\n          {Array.from({ length: 60 }).map((_value, index) => (\n            <GalleryItem key={index}>\n              <Card key={index}>\n                <CardBody>\n                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum et urna eget semper. Sed\n                  tincidunt purus diam, id sollicitudin est pellentesque eget. Ut eget massa dignissim dolor pretium\n                  finibus at sit amet purus. Duis vulputate odio ac tristique convallis. Praesent porttitor condimentum\n                  varius. Duis pharetra in ligula nec ornare. Vivamus tincidunt nulla a semper semper. Duis tincidunt\n                  gravida elit non vehicula. Nunc eu sem venenatis, lobortis lorem sed, consectetur erat. Nulla\n                  accumsan, justo ac fringilla imperdiet, risus magna mollis libero, sit amet malesuada quam enim vel\n                  odio. Nullam vitae feugiat sem. Suspendisse potenti. Mauris dolor enim, pretium a pulvinar ut, commodo\n                  at risus.\n                </CardBody>\n              </Card>\n            </GalleryItem>\n          ))}\n        </Gallery>\n      </PageSection>\n      <BackToTop scrollableSelector=\".pf-v6-c-page__main-container\" isAlwaysVisible={isAlwaysVisible} />\n    </DashboardWrapper>\n  );\n};\n","title":"Using name selector","lang":"ts","isFullscreen":true,"className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Note that `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tabIndex={0}`}
+        </code>
+        {` is added to the scrolling `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`PageSection`}
+        </code>
+        {` of the page to allow keyboard users the ability to focus and scroll.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Using name selector"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsBackToTopReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/back-to-top/react.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import '../../../../../react-core/src/components/BackToTop/examples/./BackToTop.css'
+const pageData = {
+  "id": "Back to top",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/back-to-top/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/BackToTop/examples/BackToTop.md",
+  "relPath": "packages/react-core/src/components/BackToTop/examples/BackToTop.md",
+  "propComponents": [
+    {
+      "name": "BackToTop",
+      "description": "",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the back to top."
+        },
+        {
+          "name": "isAlwaysVisible",
+          "type": "boolean",
+          "description": "Flag to always show back to top button, defaults to false."
+        },
+        {
+          "name": "scrollableSelector",
+          "type": "string",
+          "description": "Selector for the scrollable element to spy on. Not passing a selector defaults to spying on window scroll events."
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "description": "Title to appear in back to top button."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-back-to-top"
+  ],
+  "examples": [
+    "Basic"
+  ]
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { BackToTop } from '@patternfly/react-core';\n\nexport const BackToTopBasic: React.FunctionComponent = () => <BackToTop isAlwaysVisible />;\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Below example does not demonstrate functionality see React demos for a full demonstration.`}
+    </p>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Back to top only shows after overflowing element has been scrolled 400px.`}
+    </p>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsBackToTopReactDocs';
+Component.pageData = pageData;
+
+export default Component;

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import srcImportbasic from './react/basic.png';
+import srcImportwithspinner from './react/with-spinner.png';
+const pageData = {
+  "id": "Backdrop",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/backdrop/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Backdrop/examples/Backdrop.md",
+  "relPath": "packages/react-core/src/components/Backdrop/examples/Backdrop.md",
+  "propComponents": [
+    {
+      "name": "Backdrop",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the backdrop",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the backdrop",
+          "defaultValue": "''"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-backdrop"
+  ],
+  "fullscreenExamples": [
+    "Basic"
+  ]
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportbasic} {...{"code":"import { Backdrop } from '@patternfly/react-core';\n\nexport const BackdropBasic: React.FunctionComponent = () => <Backdrop />;\n","title":"Basic","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsBackdropReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/background-image/react.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import srcImportbasic from './react/basic.png';
+const pageData = {
+  "id": "Background image",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/background-image/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/BackgroundImage/examples/BackgroundImage.md",
+  "relPath": "packages/react-core/src/components/BackgroundImage/examples/BackgroundImage.md",
+  "propComponents": [
+    {
+      "name": "BackgroundImage",
+      "description": "",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the background image."
+        },
+        {
+          "name": "src",
+          "type": "string",
+          "description": "The URL or file path of the image for the background",
+          "required": true
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-background-image"
+  ],
+  "fullscreenExamples": [
+    "Basic"
+  ]
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportbasic} {...{"code":"import { BackgroundImage } from '@patternfly/react-core';\n\nexport const BackgroundImageBasic: React.FunctionComponent = () => (\n  <BackgroundImage src=\"/assets/images/pf-background.svg\" />\n);\n","title":"Basic","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsBackgroundImageReactDocs';
+Component.pageData = pageData;
+
+export default Component;

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment } from 'react';
+import '../../../../../react-core/src/components/Badge/examples/./Badge.css';
+const pageData = {
+  "id": "Badge",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/badge/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Badge/examples/Badge.md",
+  "relPath": "packages/react-core/src/components/Badge/examples/Badge.md",
+  "propComponents": [
+    {
+      "name": "Badge",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "content rendered inside the Badge",
+          "defaultValue": "''"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "additional classes added to the Badge",
+          "defaultValue": "''"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Adds styling to the badge to indicate it is disabled",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isRead",
+          "type": "boolean",
+          "description": "Adds styling to the badge to indicate it has been read",
+          "defaultValue": "false"
+        },
+        {
+          "name": "screenReaderText",
+          "type": "string",
+          "description": "Text announced by screen readers to indicate the current content/status of the badge."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-badge"
+  ],
+  "examples": [
+    "Read",
+    "Unread",
+    "Disabled"
+  ]
+};
+pageData.liveContext = {
+  Fragment
+};
+pageData.relativeImports = "import 'react-core/src/components/Badge/examples/./Badge.css';"
+pageData.examples = {
+  'Read': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Badge } from '@patternfly/react-core';\n\nexport const BadgeRead: React.FunctionComponent = () => (\n  <Fragment>\n    <Badge key={1} isRead>\n      7\n    </Badge>\n    <Badge key={2} isRead>\n      24\n    </Badge>\n    <Badge key={3} isRead>\n      240\n    </Badge>\n    <Badge key={4} isRead>\n      999+\n    </Badge>\n  </Fragment>\n);\n","title":"Read","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Unread': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Badge } from '@patternfly/react-core';\n\nexport const BadgeUnread: React.FunctionComponent = () => (\n  <Fragment>\n    <Badge key={1} screenReaderText=\"Unread Messages\">\n      7\n    </Badge>\n    <Badge key={2} screenReaderText=\"Unread Messages\">\n      24\n    </Badge>\n    <Badge key={3} screenReaderText=\"Unread Messages\">\n      240\n    </Badge>\n    <Badge key={4} screenReaderText=\"Unread Messages\">\n      999+\n    </Badge>\n  </Fragment>\n);\n","title":"Unread","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Disabled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Badge } from '@patternfly/react-core';\n\nexport const BadgeRead: React.FunctionComponent = () => (\n  <Fragment>\n    <Badge key={1} isDisabled isRead>\n      7\n    </Badge>\n    <Badge key={2} isDisabled isRead>\n      24\n    </Badge>\n    <Badge key={3} isDisabled>\n      240\n    </Badge>\n    <Badge key={4} isDisabled>\n      999+\n    </Badge>\n  </Fragment>\n);\n","title":"Disabled","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Read"])}
+    {React.createElement(pageData.examples["Unread"])}
+    {React.createElement(pageData.examples["Disabled"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsBadgeReactDocs';
+Component.pageData = pageData;
+
+export default Component;

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment } from 'react';
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import srcImportbasicstickybanner from './react-demos/basic-sticky-banner.png';
+import srcImporttopandbottombanner from './react-demos/top-and-bottom-banner.png';
+const pageData = {
+  "id": "Banner",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/banner/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Banner.md",
+  "relPath": "packages/react-core/src/demos/Banner.md",
+  "fullscreenExamples": [
+    "Basic sticky banner",
+    "Top and bottom banner"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  css,
+  display,
+  DashboardWrapper
+};
+pageData.examples = {
+  'Basic sticky banner': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportbasicstickybanner} {...{"code":"import { Fragment } from 'react';\nimport { Banner, Card, CardBody, Flex, Gallery, GalleryItem, PageSection, Content } from '@patternfly/react-core';\n\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\nimport { css } from '@patternfly/react-styles';\nimport display from '@patternfly/react-styles/css/utilities/Display/display';\n\nexport const BannerBasicSticky: React.FunctionComponent = () => {\n  const banner = (\n    <Banner isSticky>\n      <Flex\n        justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}\n        flexWrap={{ default: 'nowrap' }}\n      >\n        <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>\n\n        <div className={css(display.displayNone, display.displayBlockOnLg)}>\n          This message is sticky to the top of the page.\n        </div>\n\n        <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>\n\n        <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>\n      </Flex>\n    </Banner>\n  );\n\n  return (\n    <Fragment>\n      <DashboardWrapper banner={banner} breadcrumb={null}>\n        <PageSection aria-labelledby=\"main-title\">\n          <Content>\n            <h1 id=\"main-title\">Main title</h1>\n            <p>\n              Body text should be Red Hat Text at 1rem (16px). It should have leading of 1.5rem (24px) because <br />\n              of its relative line height of 1.5.\n            </p>\n          </Content>\n        </PageSection>\n\n        <PageSection aria-label=\"Cards gallery\">\n          <Gallery hasGutter>\n            {Array.from({ length: 30 }).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    </Fragment>\n  );\n};\n","title":"Basic sticky banner","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Top and bottom banner': props => 
+    <Example {...pageData} {...props} thumbnail={srcImporttopandbottombanner} {...{"code":"import { Fragment } from 'react';\nimport {\n  Banner,\n  Card,\n  CardBody,\n  Flex,\n  FlexItem,\n  Gallery,\n  GalleryItem,\n  PageSection,\n  Content\n} from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\nimport { css } from '@patternfly/react-styles';\nimport display from '@patternfly/react-styles/css/utilities/Display/display';\n\nexport const BannerTopBottom: React.FunctionComponent = () => (\n  <Fragment>\n    <Flex\n      direction={{ default: 'column' }}\n      flexWrap={{ default: 'nowrap' }}\n      spaceItems={{ default: 'spaceItemsNone' }}\n      style={{ height: '100%' }}\n    >\n      <FlexItem>\n        <Banner isSticky>\n          <Flex\n            justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}\n            flexWrap={{ default: 'nowrap' }}\n          >\n            <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>\n            <div className={css(display.displayNone, display.displayBlockOnLg)}>\n              This message is sticky to the top of the page.\n            </div>\n            <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>\n            <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>\n          </Flex>\n        </Banner>\n      </FlexItem>\n      <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>\n        <DashboardWrapper breadcrumb={null}>\n          <PageSection aria-labelledby=\"main-title\">\n            <Content>\n              <h1 id=\"main-title\">Main title</h1>\n              <p>\n                Body text should be Red Hat Text at 1rem (16px). It should have leading of 1.5rem(24px) because <br />\n                of it's relative line height of 1.5.\n              </p>\n            </Content>\n          </PageSection>\n          <PageSection aria-label=\"Cards gallery\">\n            <Gallery hasGutter>\n              {Array.from({ length: 30 }).map((_value, index) => (\n                <GalleryItem key={index}>\n                  <Card key={index}>\n                    <CardBody>This is a card</CardBody>\n                  </Card>\n                </GalleryItem>\n              ))}\n            </Gallery>\n          </PageSection>\n        </DashboardWrapper>\n      </FlexItem>\n      <FlexItem>\n        <Banner isSticky>\n          <Flex\n            justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}\n            flexWrap={{ default: 'nowrap' }}\n          >\n            <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>\n            <div className={css(display.displayNone, display.displayBlockOnLg)}>\n              This message is sticky to the bottom of the page.\n            </div>\n            <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>\n            <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>\n          </Flex>\n        </Banner>\n      </FlexItem>\n    </Flex>\n  </Fragment>\n);\n","title":"Top and bottom banner","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["Basic sticky banner"])}
+    {React.createElement(pageData.examples["Top and bottom banner"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsBannerReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;