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

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

@@ -0,0 +1,236 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+
+const pageData = {
+  "id": "Sidebar",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/sidebar/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Sidebar/examples/Sidebar.md",
+  "relPath": "packages/react-core/src/components/Sidebar/examples/Sidebar.md",
+  "propComponents": [
+    {
+      "name": "Sidebar",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": ""
+        },
+        {
+          "name": "hasBorder",
+          "type": "boolean",
+          "description": "Adds a border between the panel and content."
+        },
+        {
+          "name": "hasGutter",
+          "type": "boolean",
+          "description": "Adds space between the panel and content."
+        },
+        {
+          "name": "hasNoBackground",
+          "type": "boolean",
+          "description": "Removes the background color."
+        },
+        {
+          "name": "isPanelRight",
+          "type": "boolean",
+          "description": "Indicates that the panel is displayed to the right of the content when the oritentation is split.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "orientation",
+          "type": "'stack' | 'split'",
+          "description": "Indicates the direction of the layout. Default orientation is stack on small screens, and split on medium screens and above."
+        }
+      ]
+    },
+    {
+      "name": "SidebarContent",
+      "description": "",
+      "props": [
+        {
+          "name": "backgroundVariant",
+          "type": "'default' | 'secondary'",
+          "description": "Variant of the sidebar content background.",
+          "defaultValue": "'default'"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "",
+          "required": true
+        },
+        {
+          "name": "hasNoBackground",
+          "type": "boolean",
+          "description": "Removes the background color."
+        },
+        {
+          "name": "hasPadding",
+          "type": "boolean",
+          "description": "Adds padding to the content."
+        }
+      ]
+    },
+    {
+      "name": "SidebarPanel",
+      "description": "",
+      "props": [
+        {
+          "name": "backgroundVariant",
+          "type": "'default' | 'secondary'",
+          "description": "Variant of the sidebar panel background.",
+          "defaultValue": "'default'"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "",
+          "required": true
+        },
+        {
+          "name": "hasNoBackground",
+          "type": "boolean",
+          "description": "Removes the background color."
+        },
+        {
+          "name": "hasPadding",
+          "type": "boolean",
+          "description": "Adds padding to the panel."
+        },
+        {
+          "name": "variant",
+          "type": "'default' | 'sticky' | 'static'",
+          "description": "Indicates whether the panel is positioned statically or sticky to the top. Default is sticky on small screens when the orientation is stack, and static on medium and above screens when the orientation is split.",
+          "defaultValue": "'default'"
+        },
+        {
+          "name": "width",
+          "type": "{\n  default?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n  sm?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n  md?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n  lg?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n  xl?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n  '2xl'?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n}",
+          "description": "Sets the panel width at various breakpoints. Default is 250px when the orientation is split."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-sidebar"
+  ],
+  "examples": [
+    "Basic",
+    "Stack",
+    "Panel right with gutter",
+    "Sticky panel",
+    "Static panel",
+    "Responsive panel width",
+    "Border",
+    "Padding on panel",
+    "Padding on content"
+  ]
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarBasic: React.FunctionComponent = () => (\n  <Sidebar>\n    <SidebarPanel>Sidebar panel</SidebarPanel>\n    <SidebarContent>\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n        vulputate.\n      </p>\n      <p>\n        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n        vulputate bibendum a ut magna.\n      </p>\n    </SidebarContent>\n  </Sidebar>\n);\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Stack': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarStack: React.FunctionComponent = () => (\n  <Sidebar orientation=\"stack\">\n    <SidebarPanel>Sidebar panel stacked on top</SidebarPanel>\n    <SidebarContent>\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n        vulputate.\n      </p>\n      <p>\n        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n        vulputate bibendum a ut magna.\n      </p>\n    </SidebarContent>\n  </Sidebar>\n);\n","title":"Stack","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Panel right with gutter': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarPanelRightGutter: React.FunctionComponent = () => (\n  <Sidebar isPanelRight hasGutter>\n    <SidebarPanel>Sidebar panel on the right</SidebarPanel>\n    <SidebarContent>\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n        vulputate.\n      </p>\n      <p>\n        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n        vulputate bibendum a ut magna.\n      </p>\n    </SidebarContent>\n  </Sidebar>\n);\n","title":"Panel right with gutter","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Sticky panel': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarStickyPanel: React.FunctionComponent = () => (\n  <Sidebar style={{ height: '200px', overflow: 'auto' }} tabIndex={0}>\n    <SidebarPanel variant=\"sticky\">Sticky sidebar panel</SidebarPanel>\n    <SidebarContent>\n      <p>Scroll me!</p>\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n        vulputate.\n      </p>\n      <p>\n        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n        vulputate bibendum a ut magna.\n      </p>\n    </SidebarContent>\n  </Sidebar>\n);\n","title":"Sticky panel","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tabIndex`}
+        </code>
+        {` should be added to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`Sidebar`}
+        </code>
+        {` when there is scrollable content in order for the  overflow content to be accessible by keyboard.`}
+      </p>
+    </Example>,
+  'Static panel': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarStaticPanel: React.FunctionComponent = () => (\n  <Sidebar style={{ height: '200px', overflow: 'auto' }} tabIndex={0}>\n    <SidebarPanel variant=\"static\">Static sidebar panel</SidebarPanel>\n    <SidebarContent>\n      <p>Scroll me!</p>\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n        vulputate.\n      </p>\n      <p>\n        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n        vulputate bibendum a ut magna.\n      </p>\n    </SidebarContent>\n  </Sidebar>\n);\n","title":"Static panel","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tabIndex`}
+        </code>
+        {` should be added to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`Sidebar`}
+        </code>
+        {` when there is scrollable content in order for the  overflow content to be accessible by keyboard.`}
+      </p>
+    </Example>,
+  'Responsive panel width': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarResponsivePanel: React.FunctionComponent = () => (\n  <Sidebar style={{ height: '200px', overflow: 'auto' }} tabIndex={0}>\n    <SidebarPanel width={{ default: 'width_50', lg: 'width_33', xl: 'width_75' }}>Sidebar panel</SidebarPanel>\n    <SidebarContent>\n      <p>Resize me!</p>\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n        vulputate.\n      </p>\n      <p>\n        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n        vulputate bibendum a ut magna.\n      </p>\n    </SidebarContent>\n  </Sidebar>\n);\n","title":"Responsive panel width","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tabIndex`}
+        </code>
+        {` should be added to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`Sidebar`}
+        </code>
+        {` when there is scrollable content in order for the  overflow content to be accessible by keyboard.`}
+      </p>
+    </Example>,
+  'Border': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarBorder: React.FunctionComponent = () => (\n  <Sidebar hasBorder hasGutter>\n    <SidebarPanel>Sidebar panel</SidebarPanel>\n    <SidebarContent>\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n        vulputate.\n      </p>\n      <p>\n        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n        vulputate bibendum a ut magna.\n      </p>\n    </SidebarContent>\n  </Sidebar>\n);\n","title":"Border","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Padding on panel': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarPaddingPanel: React.FunctionComponent = () => (\n  <Sidebar>\n    <SidebarPanel hasPadding>Sidebar panel, with padding</SidebarPanel>\n    <SidebarContent>\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n        vulputate.\n      </p>\n      <p>\n        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n        vulputate bibendum a ut magna.\n      </p>\n    </SidebarContent>\n  </Sidebar>\n);\n","title":"Padding on panel","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Padding on content': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarPaddingContent: React.FunctionComponent = () => (\n  <Sidebar>\n    <SidebarPanel>Sidebar panel</SidebarPanel>\n    <SidebarContent hasPadding>\n      <p>Sidebar content, with padding.</p>\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n        vulputate.\n      </p>\n      <p>\n        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n        vulputate bibendum a ut magna.\n      </p>\n    </SidebarContent>\n  </Sidebar>\n);\n","title":"Padding on content","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["Stack"])}
+    {React.createElement(pageData.examples["Panel right with gutter"])}
+    {React.createElement(pageData.examples["Sticky panel"])}
+    {React.createElement(pageData.examples["Static panel"])}
+    {React.createElement(pageData.examples["Responsive panel width"])}
+    {React.createElement(pageData.examples["Border"])}
+    {React.createElement(pageData.examples["Padding on panel"])}
+    {React.createElement(pageData.examples["Padding on content"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsSidebarReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/simple-list/react.js

@@ -0,0 +1,200 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+const pageData = {
+  "id": "Simple list",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/simple-list/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/SimpleList/examples/SimpleList.md",
+  "relPath": "packages/react-core/src/components/SimpleList/examples/SimpleList.md",
+  "propComponents": [
+    {
+      "name": "SimpleList",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "aria-label for the <ul> element that wraps the SimpleList items."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the SimpleList",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the SimpleList container",
+          "defaultValue": "''"
+        },
+        {
+          "name": "isControlled",
+          "type": "boolean",
+          "description": "Indicates whether component is controlled by its internal state",
+          "defaultValue": "true"
+        },
+        {
+          "name": "onSelect",
+          "type": "(\n  ref: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>,\n  props: SimpleListItemProps\n) => void",
+          "description": "Callback when an item is selected"
+        }
+      ]
+    },
+    {
+      "name": "SimpleListGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the SimpleList group",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the SimpleList <ul>",
+          "defaultValue": "''"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "ID of SimpleList group",
+          "defaultValue": "''"
+        },
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Title of the SimpleList group",
+          "defaultValue": "''"
+        },
+        {
+          "name": "titleClassName",
+          "type": "string",
+          "description": "Additional classes added to the SimpleList group title",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "SimpleListItem",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the SimpleList item",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the SimpleList <li>",
+          "defaultValue": "''"
+        },
+        {
+          "name": "component",
+          "type": "'button' | 'a'",
+          "description": "Component type of the SimpleList item",
+          "defaultValue": "'button'"
+        },
+        {
+          "name": "componentClassName",
+          "type": "string",
+          "description": "Additional classes added to the SimpleList <a> or <button>",
+          "defaultValue": "''"
+        },
+        {
+          "name": "componentProps",
+          "type": "any",
+          "description": "Additional props added to the SimpleList <a> or <button>"
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "description": "Default hyperlink location",
+          "defaultValue": "''"
+        },
+        {
+          "name": "isActive",
+          "type": "boolean",
+          "description": "Indicates if the link is current/highlighted",
+          "defaultValue": "false"
+        },
+        {
+          "name": "itemId",
+          "type": "number | string",
+          "description": "id for the item."
+        },
+        {
+          "name": "onClick",
+          "type": "(event: React.MouseEvent | React.ChangeEvent) => void",
+          "description": "OnClick callback for the SimpleList item",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "type",
+          "type": "'button' | 'submit' | 'reset'",
+          "description": "Type of button SimpleList item",
+          "defaultValue": "'button'"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-simple-list"
+  ],
+  "examples": [
+    "Simple list",
+    "Simple list with links",
+    "Grouped list",
+    "Uncontrolled simple list"
+  ]
+};
+pageData.liveContext = {
+  useState
+};
+pageData.examples = {
+  'Simple list': props => 
+    <Example {...pageData} {...props} {...{"code":"import { SimpleList, SimpleListItem } from '@patternfly/react-core';\n\nexport const SimpleListBasic: React.FunctionComponent = () => {\n  const items = [\n    <SimpleListItem key=\"item1\" isActive>\n      List item 1\n    </SimpleListItem>,\n    <SimpleListItem key=\"item2\">List item 2</SimpleListItem>,\n    <SimpleListItem key=\"item3\">List item 3</SimpleListItem>\n  ];\n\n  return <SimpleList aria-label=\"Simple List Example\">{items}</SimpleList>;\n};\n","title":"Simple list","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Simple list with links': props => 
+    <Example {...pageData} {...props} {...{"code":"import { SimpleList, SimpleListItem } from '@patternfly/react-core';\n\nexport const SimpleListLinks: React.FunctionComponent = () => {\n  const items = [\n    <SimpleListItem key=\"item1\" component=\"a\" href=\"#\" isActive>\n      List item 1\n    </SimpleListItem>,\n    <SimpleListItem key=\"item2\" component=\"a\" href=\"#\">\n      List item 2\n    </SimpleListItem>,\n    <SimpleListItem key=\"item3\" component=\"a\" href=\"#\">\n      List item 3\n    </SimpleListItem>\n  ];\n\n  return <SimpleList aria-label=\"Simple List Links Example\">{items}</SimpleList>;\n};\n","title":"Simple list with links","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Grouped list': props => 
+    <Example {...pageData} {...props} {...{"code":"import { SimpleList, SimpleListItem, SimpleListGroup } from '@patternfly/react-core';\n\nexport const SimpleListGrouped: React.FunctionComponent = () => {\n  const group1Items = [\n    <SimpleListItem key=\"item1\" isActive>\n      List item 1\n    </SimpleListItem>,\n    <SimpleListItem key=\"item2\">List item 2</SimpleListItem>,\n    <SimpleListItem key=\"item3\">List item 3</SimpleListItem>,\n    <SimpleListItem key=\"item4\">List item 4</SimpleListItem>\n  ];\n\n  const group2Items = [\n    <SimpleListItem key=\"item5\">List item 1</SimpleListItem>,\n    <SimpleListItem key=\"item6\" component=\"a\" href=\"#\">\n      List item 2\n    </SimpleListItem>,\n    <SimpleListItem key=\"item7\" component=\"a\" href=\"#\">\n      List item 3\n    </SimpleListItem>,\n    <SimpleListItem key=\"item8\">List item 4</SimpleListItem>\n  ];\n\n  return (\n    <SimpleList aria-label=\"Grouped simple list example\">\n      <SimpleListGroup title=\"Group 1\" id=\"group-1\">\n        {group1Items}\n      </SimpleListGroup>\n      <SimpleListGroup title=\"Group 2\" id=\"group-2\">\n        {group2Items}\n      </SimpleListGroup>\n    </SimpleList>\n  );\n};\n","title":"Grouped list","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Uncontrolled simple list': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { SimpleList, SimpleListItem, SimpleListItemProps } from '@patternfly/react-core';\n\nexport const SimpleListUncontrolled: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (\n    selectedItem: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>,\n    selectedItemProps: SimpleListItemProps\n  ) => {\n    setActiveItem(selectedItemProps.itemId as number);\n  };\n\n  const items = [\n    <SimpleListItem key=\"item1\" itemId={0} isActive={activeItem === 0}>\n      List item 1\n    </SimpleListItem>,\n    <SimpleListItem key=\"item2\" itemId={1} isActive={activeItem === 1}>\n      List item 2\n    </SimpleListItem>,\n    <SimpleListItem key=\"item3\" itemId={2} isActive={activeItem === 2}>\n      List item 3\n    </SimpleListItem>\n  ];\n\n  return (\n    <SimpleList onSelect={onSelect} isControlled={false} aria-label=\"Uncontrolled Simple List Example\">\n      {items}\n    </SimpleList>\n  );\n};\n","title":"Uncontrolled simple list","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Simple list"])}
+    {React.createElement(pageData.examples["Simple list with links"])}
+    {React.createElement(pageData.examples["Grouped list"])}
+    {React.createElement(pageData.examples["Uncontrolled simple list"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsSimpleListReactDocs';
+Component.pageData = pageData;
+
+export default Component;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import srcImportskeletoncard from './react-demos/skeleton-card.png';
+const pageData = {
+  "id": "Skeleton",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/skeleton/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Skeleton.md",
+  "relPath": "packages/react-core/src/demos/Skeleton.md",
+  "fullscreenExamples": [
+    "Skeleton card"
+  ]
+};
+pageData.liveContext = {
+  DashboardWrapper
+};
+pageData.examples = {
+  'Skeleton card': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportskeletoncard} {...{"code":"import { Gallery, Flex, PageSection, Content, Card, CardBody, Skeleton } from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';\n\nexport const SkeletonCard: React.FunctionComponent = () => {\n  const card = (index: number) => (\n    <Card key={index} isCompact>\n      <CardBody>\n        <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>\n          <Skeleton screenreaderText=\"Loading content\" />\n          <Skeleton width=\"66%\" />\n          <Skeleton width=\"25%\" />\n          <Skeleton width=\"50%\" />\n        </Flex>\n      </CardBody>\n      <CardBody>\n        <Skeleton shape=\"square\" width=\"75%\" screenreaderText=\"Loading medium square contents\" />\n      </CardBody>\n      <CardBody>\n        <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>\n          <Skeleton screenreaderText=\"Loading content\" />\n          <Skeleton width=\"25%\" />\n          <Skeleton width=\"75%\" />\n          <Skeleton width=\"50%\" />\n        </Flex>\n      </CardBody>\n    </Card>\n  );\n  return (\n    <DashboardWrapper isBreadcrumbWidthLimited>\n      <PageSection isWidthLimited aria-label=\"main-title\">\n        <Content component=\"h1\" id=\"main-title\">\n          Main title\n        </Content>\n        <Content component=\"p\">This is a full page demo.</Content>\n      </PageSection>\n      <PageSection aria-label=\"Card gallery\">\n        <Gallery hasGutter>{Array.from({ length: 7 }).map((_value, index) => card(index))}</Gallery>\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Skeleton card","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["Skeleton card"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsSkeletonReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;

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

@@ -0,0 +1,122 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment } from 'react';
+import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';
+import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';
+import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';
+import t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl';
+import t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg';
+import t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md';
+import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';
+const pageData = {
+  "id": "Skeleton",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/skeleton/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Skeleton/examples/Skeleton.md",
+  "relPath": "packages/react-core/src/components/Skeleton/examples/Skeleton.md",
+  "propComponents": [
+    {
+      "name": "Skeleton",
+      "description": "",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Skeleton"
+        },
+        {
+          "name": "fontSize",
+          "type": "'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'",
+          "description": "The font size height of the Skeleton"
+        },
+        {
+          "name": "height",
+          "type": "string",
+          "description": "The height of the Skeleton. Must specify pixels or percentage."
+        },
+        {
+          "name": "screenreaderText",
+          "type": "string",
+          "description": "Text read just to screen reader users"
+        },
+        {
+          "name": "shape",
+          "type": "'circle' | 'square'",
+          "description": "The shape of the Skeleton"
+        },
+        {
+          "name": "width",
+          "type": "string",
+          "description": "The width of the Skeleton. Must specify pixels or percentage."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-skeleton"
+  ],
+  "examples": [
+    "Default",
+    "Percentage widths",
+    "Percentage heights",
+    "Text modifiers",
+    "Shapes"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  t_global_font_size_4xl,
+  t_global_font_size_3xl,
+  t_global_font_size_2xl,
+  t_global_font_size_xl,
+  t_global_font_size_lg,
+  t_global_font_size_md,
+  t_global_font_size_sm
+};
+pageData.examples = {
+  'Default': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Skeleton } from '@patternfly/react-core';\n\nexport const SkeletonDefault: React.FunctionComponent = () => <Skeleton screenreaderText=\"Loading default content\" />;\n","title":"Default","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Percentage widths': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Skeleton } from '@patternfly/react-core';\n\nexport const SkeletonPercentageWidth: React.FunctionComponent = () => (\n  <Fragment>\n    <Skeleton width=\"25%\" screenreaderText=\"Loading percentage width content\" />\n    <br />\n    <Skeleton width=\"33%\" />\n    <br />\n    <Skeleton width=\"50%\" />\n    <br />\n    <Skeleton width=\"66%\" />\n    <br />\n    <Skeleton width=\"75%\" />\n    <br />\n    <Skeleton />\n  </Fragment>\n);\n","title":"Percentage widths","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Percentage heights': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Skeleton } from '@patternfly/react-core';\n\nexport const SkeletonPercentageHeight: React.FunctionComponent = () => (\n  <div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>\n    <Skeleton height=\"25%\" width=\"15%\" screenreaderText=\"Loading percentage height content\" />\n    <Skeleton height=\"33%\" width=\"15%\" />\n    <Skeleton height=\"50%\" width=\"15%\" />\n    <Skeleton height=\"66%\" width=\"15%\" />\n    <Skeleton height=\"75%\" width=\"15%\" />\n    <Skeleton height=\"100%\" width=\"15%\" />\n  </div>\n);\n","title":"Percentage heights","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Text modifiers': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Skeleton } from '@patternfly/react-core';\nimport t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';\nimport t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';\nimport t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';\nimport t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl';\nimport t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg';\nimport t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md';\nimport t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';\n\nexport const SkeletonText: React.FunctionComponent = () => (\n  <Fragment>\n    {t_global_font_size_4xl.name}\n    <Skeleton fontSize=\"4xl\" screenreaderText=\"Loading text content\" />\n    <br />\n    {t_global_font_size_3xl.name}\n    <Skeleton fontSize=\"3xl\" />\n    <br />\n    {t_global_font_size_2xl.name}\n    <Skeleton fontSize=\"2xl\" />\n    <br />\n    {t_global_font_size_xl.name}\n    <Skeleton fontSize=\"xl\" />\n    <br />\n    {t_global_font_size_lg.name}\n    <Skeleton fontSize=\"lg\" />\n    <br />\n    {t_global_font_size_md.name}\n    <Skeleton fontSize=\"md\" />\n    <br />\n    {t_global_font_size_sm.name}\n    <Skeleton fontSize=\"sm\" />\n  </Fragment>\n);\n","title":"Text modifiers","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Shapes': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Skeleton } from '@patternfly/react-core';\n\nexport const SkeletonShapes: React.FunctionComponent = () => (\n  <Fragment>\n    Small circle\n    <Skeleton shape=\"circle\" width=\"15%\" screenreaderText=\"Loading circle content\" />\n    <br />\n    Medium circle\n    <Skeleton shape=\"circle\" width=\"30%\" />\n    <br />\n    Large circle\n    <Skeleton shape=\"circle\" width=\"50%\" />\n    <br />\n    Small square\n    <Skeleton shape=\"square\" width=\"15%\" screenreaderText=\"Loading square content\" />\n    <br />\n    Medium square\n    <Skeleton shape=\"square\" width=\"30%\" />\n    <br />\n    Large square\n    <Skeleton shape=\"square\" width=\"50%\" />\n    <br />\n    Small rectangle\n    <div style={{ height: '200px' }}>\n      <Skeleton height=\"50%\" width=\"50%\" screenreaderText=\"Loading rectangle content\" />\n    </div>\n    <br />\n    Medium rectangle\n    <div style={{ height: '200px' }}>\n      <Skeleton height=\"75%\" width=\"75%\" />\n    </div>\n    <br />\n    Large rectangle\n    <div style={{ height: '200px' }}>\n      <Skeleton height=\"100%\" />\n    </div>\n  </Fragment>\n);\n","title":"Shapes","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Default"])}
+    {React.createElement(pageData.examples["Percentage widths"])}
+    {React.createElement(pageData.examples["Percentage heights"])}
+    {React.createElement(pageData.examples["Text modifiers"])}
+    {React.createElement(pageData.examples["Shapes"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsSkeletonReactDocs';
+Component.pageData = pageData;
+
+export default Component;