From 337283fcd30db56a87cfe30962c6ef3277a9b9c5 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Fri, 3 Oct 2025 16:56:04 +0530
Subject: [PATCH] chore(panel): move examples to separate files

---
 .../src/components/Panel/examples/Panel.md    | 169 ++----------------
 .../components/Panel/examples/PanelBasic.tsx  |   9 +
 .../Panel/examples/PanelBordered.tsx          |   9 +
 .../Panel/examples/PanelFooterExample.tsx     |  10 ++
 .../Panel/examples/PanelHeaderExample.tsx     |  11 ++
 .../Panel/examples/PanelHeaderFooter.tsx      |  12 ++
 .../components/Panel/examples/PanelNoBody.tsx |   7 +
 .../components/Panel/examples/PanelRaised.tsx |   9 +
 .../Panel/examples/PanelScrollable.tsx        |  35 ++++
 .../examples/PanelScrollableHeaderFooter.tsx  |  38 ++++
 .../Panel/examples/PanelSecondaryVariant.tsx  |   9 +
 11 files changed, 159 insertions(+), 159 deletions(-)
 create mode 100644 packages/react-core/src/components/Panel/examples/PanelBasic.tsx
 create mode 100644 packages/react-core/src/components/Panel/examples/PanelBordered.tsx
 create mode 100644 packages/react-core/src/components/Panel/examples/PanelFooterExample.tsx
 create mode 100644 packages/react-core/src/components/Panel/examples/PanelHeaderExample.tsx
 create mode 100644 packages/react-core/src/components/Panel/examples/PanelHeaderFooter.tsx
 create mode 100644 packages/react-core/src/components/Panel/examples/PanelNoBody.tsx
 create mode 100644 packages/react-core/src/components/Panel/examples/PanelRaised.tsx
 create mode 100644 packages/react-core/src/components/Panel/examples/PanelScrollable.tsx
 create mode 100644 packages/react-core/src/components/Panel/examples/PanelScrollableHeaderFooter.tsx
 create mode 100644 packages/react-core/src/components/Panel/examples/PanelSecondaryVariant.tsx

diff --git a/packages/react-core/src/components/Panel/examples/Panel.md b/packages/react-core/src/components/Panel/examples/Panel.md
index a3cd9c5fc6d..ac1847c7723 100644
--- a/packages/react-core/src/components/Panel/examples/Panel.md
+++ b/packages/react-core/src/components/Panel/examples/Panel.md
@@ -9,199 +9,50 @@ propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
 
 ### Basic
 
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const BasicPanel = () => (
-  <Panel>
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);
+```ts file="PanelBasic.tsx"
 ```
 
 ### Header
 
-```js
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider } from '@patternfly/react-core';
-
-const HeaderPanel = () => (
-  <Panel>
-    <PanelHeader>Header content</PanelHeader>
-    <Divider />
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);
+```ts file="PanelHeaderExample.tsx"
 ```
 
 ### Footer
 
-```js
-import { Panel, PanelMain, PanelMainBody, PanelFooter } from '@patternfly/react-core';
-
-const FooterPanel = () => (
-  <Panel>
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-    <PanelFooter>Footer content</PanelFooter>
-  </Panel>
-);
+```ts file="PanelFooterExample.tsx"
 ```
 
 ### Header and footer
 
-```js
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
-
-const HeaderFooterPanel = () => (
-  <Panel>
-    <PanelHeader>Header content</PanelHeader>
-    <Divider />
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-    <PanelFooter>Footer content</PanelFooter>
-  </Panel>
-);
+```ts file="PanelHeaderFooter.tsx"
 ```
 
 ### No body
 
-```js
-import { Panel, PanelMain } from '@patternfly/react-core';
-
-const NoBodyPanel = () => (
-  <Panel>
-    <PanelMain>Main content</PanelMain>
-  </Panel>
-);
+```ts file="PanelNoBody.tsx"
 ```
 
 ### Raised
 
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const RaisedPanel = () => (
-  <Panel variant="raised">
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);
+```ts file="PanelRaised.tsx"
 ```
 
 ### Bordered
 
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const BorderedPanel = () => (
-  <Panel variant="bordered">
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);
+```ts file="PanelBordered.tsx"
 ```
 
 ### Secondary variant
 
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const PanelSecondaryVariant = () => (
-  <Panel variant="secondary">
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);
+```ts file="PanelSecondaryVariant.tsx"
 ```
 
 ### Scrollable
 
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const ScrollablePanel = () => (
-  <Panel isScrollable>
-    <PanelMain tabIndex={0}>
-      <PanelMainBody>
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-      </PanelMainBody>
-    </PanelMain>
-  </Panel>
-);
+```ts file="PanelScrollable.tsx"
 ```
 
 ### Scrollable with header and footer
 
-```js
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
-
-const ScrollableHeaderFooterPanel = () => (
-  <Panel isScrollable>
-    <PanelHeader>Header content</PanelHeader>
-    <Divider />
-    <PanelMain tabIndex={0}>
-      <PanelMainBody>
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-      </PanelMainBody>
-    </PanelMain>
-    <PanelFooter>Footer content</PanelFooter>
-  </Panel>
-);
+```ts file="PanelScrollableHeaderFooter.tsx"
 ```
diff --git a/packages/react-core/src/components/Panel/examples/PanelBasic.tsx b/packages/react-core/src/components/Panel/examples/PanelBasic.tsx
new file mode 100644
index 00000000000..b79523e7df8
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelBasic.tsx
@@ -0,0 +1,9 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelBasic: React.FunctionComponent = () => (
+  <Panel>
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelBordered.tsx b/packages/react-core/src/components/Panel/examples/PanelBordered.tsx
new file mode 100644
index 00000000000..7e6a961dade
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelBordered.tsx
@@ -0,0 +1,9 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelBordered: React.FunctionComponent = () => (
+  <Panel variant="bordered">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelFooterExample.tsx b/packages/react-core/src/components/Panel/examples/PanelFooterExample.tsx
new file mode 100644
index 00000000000..3252b4c9b36
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelFooterExample.tsx
@@ -0,0 +1,10 @@
+import { Panel, PanelMain, PanelMainBody, PanelFooter } from '@patternfly/react-core';
+
+export const PanelFooterExample: React.FunctionComponent = () => (
+  <Panel>
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelHeaderExample.tsx b/packages/react-core/src/components/Panel/examples/PanelHeaderExample.tsx
new file mode 100644
index 00000000000..eba0bf95cf2
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelHeaderExample.tsx
@@ -0,0 +1,11 @@
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider } from '@patternfly/react-core';
+
+export const PanelHeaderExample: React.FunctionComponent = () => (
+  <Panel>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelHeaderFooter.tsx b/packages/react-core/src/components/Panel/examples/PanelHeaderFooter.tsx
new file mode 100644
index 00000000000..22f7abde218
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelHeaderFooter.tsx
@@ -0,0 +1,12 @@
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
+
+export const PanelHeaderFooter: React.FunctionComponent = () => (
+  <Panel>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelNoBody.tsx b/packages/react-core/src/components/Panel/examples/PanelNoBody.tsx
new file mode 100644
index 00000000000..8a8cec8ec30
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelNoBody.tsx
@@ -0,0 +1,7 @@
+import { Panel, PanelMain } from '@patternfly/react-core';
+
+export const PanelNoBody: React.FunctionComponent = () => (
+  <Panel>
+    <PanelMain>Main content</PanelMain>
+  </Panel>
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelRaised.tsx b/packages/react-core/src/components/Panel/examples/PanelRaised.tsx
new file mode 100644
index 00000000000..c1e67a3d44b
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelRaised.tsx
@@ -0,0 +1,9 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelRaised: React.FunctionComponent = () => (
+  <Panel variant="raised">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelScrollable.tsx b/packages/react-core/src/components/Panel/examples/PanelScrollable.tsx
new file mode 100644
index 00000000000..35ee511c671
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelScrollable.tsx
@@ -0,0 +1,35 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelScrollable: React.FunctionComponent = () => (
+  <Panel isScrollable>
+    <PanelMain tabIndex={0}>
+      <PanelMainBody>
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+      </PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelScrollableHeaderFooter.tsx b/packages/react-core/src/components/Panel/examples/PanelScrollableHeaderFooter.tsx
new file mode 100644
index 00000000000..0875cec06eb
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelScrollableHeaderFooter.tsx
@@ -0,0 +1,38 @@
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
+
+export const PanelScrollableHeaderFooter: React.FunctionComponent = () => (
+  <Panel isScrollable>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <PanelMain tabIndex={0}>
+      <PanelMainBody>
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+      </PanelMainBody>
+    </PanelMain>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelSecondaryVariant.tsx b/packages/react-core/src/components/Panel/examples/PanelSecondaryVariant.tsx
new file mode 100644
index 00000000000..d24a822c3dc
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelSecondaryVariant.tsx
@@ -0,0 +1,9 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelSecondaryVariant: React.FunctionComponent = () => (
+  <Panel variant="secondary">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);