Skip to content

Commit 7810ad9

Browse files
Mash707Mash707
authored
chore(panel): move examples to separate files (#12036)
1 parent e78f9c4 commit 7810ad9

File tree

11 files changed

+159
-159
lines changed

11 files changed

+159
-159
lines changed

‎packages/react-core/src/components/Panel/examples/Panel.md‎

Lines changed: 10 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -9,199 +9,50 @@ propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
99

1010
### Basic
1111

12-
```js
13-
import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
14-
15-
const BasicPanel = () => (
16-
<Panel>
17-
<PanelMain>
18-
<PanelMainBody>Main content</PanelMainBody>
19-
</PanelMain>
20-
</Panel>
21-
);
12+
```ts file="PanelBasic.tsx"
2213
```
2314

2415
### Header
2516

26-
```js
27-
import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider } from '@patternfly/react-core';
28-
29-
const HeaderPanel = () => (
30-
<Panel>
31-
<PanelHeader>Header content</PanelHeader>
32-
<Divider />
33-
<PanelMain>
34-
<PanelMainBody>Main content</PanelMainBody>
35-
</PanelMain>
36-
</Panel>
37-
);
17+
```ts file="PanelHeaderExample.tsx"
3818
```
3919

4020
### Footer
4121

42-
```js
43-
import { Panel, PanelMain, PanelMainBody, PanelFooter } from '@patternfly/react-core';
44-
45-
const FooterPanel = () => (
46-
<Panel>
47-
<PanelMain>
48-
<PanelMainBody>Main content</PanelMainBody>
49-
</PanelMain>
50-
<PanelFooter>Footer content</PanelFooter>
51-
</Panel>
52-
);
22+
```ts file="PanelFooterExample.tsx"
5323
```
5424

5525
### Header and footer
5626

57-
```js
58-
import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
59-
60-
const HeaderFooterPanel = () => (
61-
<Panel>
62-
<PanelHeader>Header content</PanelHeader>
63-
<Divider />
64-
<PanelMain>
65-
<PanelMainBody>Main content</PanelMainBody>
66-
</PanelMain>
67-
<PanelFooter>Footer content</PanelFooter>
68-
</Panel>
69-
);
27+
```ts file="PanelHeaderFooter.tsx"
7028
```
7129

7230
### No body
7331

74-
```js
75-
import { Panel, PanelMain } from '@patternfly/react-core';
76-
77-
const NoBodyPanel = () => (
78-
<Panel>
79-
<PanelMain>Main content</PanelMain>
80-
</Panel>
81-
);
32+
```ts file="PanelNoBody.tsx"
8233
```
8334

8435
### Raised
8536

86-
```js
87-
import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
88-
89-
const RaisedPanel = () => (
90-
<Panel variant="raised">
91-
<PanelMain>
92-
<PanelMainBody>Main content</PanelMainBody>
93-
</PanelMain>
94-
</Panel>
95-
);
37+
```ts file="PanelRaised.tsx"
9638
```
9739

9840
### Bordered
9941

100-
```js
101-
import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
102-
103-
const BorderedPanel = () => (
104-
<Panel variant="bordered">
105-
<PanelMain>
106-
<PanelMainBody>Main content</PanelMainBody>
107-
</PanelMain>
108-
</Panel>
109-
);
42+
```ts file="PanelBordered.tsx"
11043
```
11144

11245
### Secondary variant
11346

114-
```js
115-
import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
116-
117-
const PanelSecondaryVariant = () => (
118-
<Panel variant="secondary">
119-
<PanelMain>
120-
<PanelMainBody>Main content</PanelMainBody>
121-
</PanelMain>
122-
</Panel>
123-
);
47+
```ts file="PanelSecondaryVariant.tsx"
12448
```
12549

12650
### Scrollable
12751

128-
```js
129-
import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
130-
131-
const ScrollablePanel = () => (
132-
<Panel isScrollable>
133-
<PanelMain tabIndex={0}>
134-
<PanelMainBody>
135-
Main content
136-
<br />
137-
<br />
138-
Main content
139-
<br />
140-
<br />
141-
Main content
142-
<br />
143-
<br />
144-
Main content
145-
<br />
146-
<br />
147-
Main content
148-
<br />
149-
<br />
150-
Main content
151-
<br />
152-
<br />
153-
Main content
154-
<br />
155-
<br />
156-
Main content
157-
<br />
158-
<br />
159-
Main content
160-
</PanelMainBody>
161-
</PanelMain>
162-
</Panel>
163-
);
52+
```ts file="PanelScrollable.tsx"
16453
```
16554

16655
### Scrollable with header and footer
16756

168-
```js
169-
import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
170-
171-
const ScrollableHeaderFooterPanel = () => (
172-
<Panel isScrollable>
173-
<PanelHeader>Header content</PanelHeader>
174-
<Divider />
175-
<PanelMain tabIndex={0}>
176-
<PanelMainBody>
177-
Main content
178-
<br />
179-
<br />
180-
Main content
181-
<br />
182-
<br />
183-
Main content
184-
<br />
185-
<br />
186-
Main content
187-
<br />
188-
<br />
189-
Main content
190-
<br />
191-
<br />
192-
Main content
193-
<br />
194-
<br />
195-
Main content
196-
<br />
197-
<br />
198-
Main content
199-
<br />
200-
<br />
201-
Main content
202-
</PanelMainBody>
203-
</PanelMain>
204-
<PanelFooter>Footer content</PanelFooter>
205-
</Panel>
206-
);
57+
```ts file="PanelScrollableHeaderFooter.tsx"
20758
```

‎packages/react-core/src/components/Panel/examples/PanelBasic.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
2+
3+
export const PanelBasic: React.FunctionComponent = () => (
4+
<Panel>
5+
<PanelMain>
6+
<PanelMainBody>Main content</PanelMainBody>
7+
</PanelMain>
8+
</Panel>
9+
);

‎packages/react-core/src/components/Panel/examples/PanelBordered.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
2+
3+
export const PanelBordered: React.FunctionComponent = () => (
4+
<Panel variant="bordered">
5+
<PanelMain>
6+
<PanelMainBody>Main content</PanelMainBody>
7+
</PanelMain>
8+
</Panel>
9+
);

‎packages/react-core/src/components/Panel/examples/PanelFooterExample.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Panel, PanelMain, PanelMainBody, PanelFooter } from '@patternfly/react-core';
2+
3+
export const PanelFooterExample: React.FunctionComponent = () => (
4+
<Panel>
5+
<PanelMain>
6+
<PanelMainBody>Main content</PanelMainBody>
7+
</PanelMain>
8+
<PanelFooter>Footer content</PanelFooter>
9+
</Panel>
10+
);

‎packages/react-core/src/components/Panel/examples/PanelHeaderExample.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider } from '@patternfly/react-core';
2+
3+
export const PanelHeaderExample: React.FunctionComponent = () => (
4+
<Panel>
5+
<PanelHeader>Header content</PanelHeader>
6+
<Divider />
7+
<PanelMain>
8+
<PanelMainBody>Main content</PanelMainBody>
9+
</PanelMain>
10+
</Panel>
11+
);

‎packages/react-core/src/components/Panel/examples/PanelHeaderFooter.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
2+
3+
export const PanelHeaderFooter: React.FunctionComponent = () => (
4+
<Panel>
5+
<PanelHeader>Header content</PanelHeader>
6+
<Divider />
7+
<PanelMain>
8+
<PanelMainBody>Main content</PanelMainBody>
9+
</PanelMain>
10+
<PanelFooter>Footer content</PanelFooter>
11+
</Panel>
12+
);

‎packages/react-core/src/components/Panel/examples/PanelNoBody.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Panel, PanelMain } from '@patternfly/react-core';
2+
3+
export const PanelNoBody: React.FunctionComponent = () => (
4+
<Panel>
5+
<PanelMain>Main content</PanelMain>
6+
</Panel>
7+
);

‎packages/react-core/src/components/Panel/examples/PanelRaised.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
2+
3+
export const PanelRaised: React.FunctionComponent = () => (
4+
<Panel variant="raised">
5+
<PanelMain>
6+
<PanelMainBody>Main content</PanelMainBody>
7+
</PanelMain>
8+
</Panel>
9+
);

‎packages/react-core/src/components/Panel/examples/PanelScrollable.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
2+
3+
export const PanelScrollable: React.FunctionComponent = () => (
4+
<Panel isScrollable>
5+
<PanelMain tabIndex={0}>
6+
<PanelMainBody>
7+
Main content
8+
<br />
9+
<br />
10+
Main content
11+
<br />
12+
<br />
13+
Main content
14+
<br />
15+
<br />
16+
Main content
17+
<br />
18+
<br />
19+
Main content
20+
<br />
21+
<br />
22+
Main content
23+
<br />
24+
<br />
25+
Main content
26+
<br />
27+
<br />
28+
Main content
29+
<br />
30+
<br />
31+
Main content
32+
</PanelMainBody>
33+
</PanelMain>
34+
</Panel>
35+
);

‎packages/react-core/src/components/Panel/examples/PanelScrollableHeaderFooter.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
2+
3+
export const PanelScrollableHeaderFooter: React.FunctionComponent = () => (
4+
<Panel isScrollable>
5+
<PanelHeader>Header content</PanelHeader>
6+
<Divider />
7+
<PanelMain tabIndex={0}>
8+
<PanelMainBody>
9+
Main content
10+
<br />
11+
<br />
12+
Main content
13+
<br />
14+
<br />
15+
Main content
16+
<br />
17+
<br />
18+
Main content
19+
<br />
20+
<br />
21+
Main content
22+
<br />
23+
<br />
24+
Main content
25+
<br />
26+
<br />
27+
Main content
28+
<br />
29+
<br />
30+
Main content
31+
<br />
32+
<br />
33+
Main content
34+
</PanelMainBody>
35+
</PanelMain>
36+
<PanelFooter>Footer content</PanelFooter>
37+
</Panel>
38+
);

0 commit comments

Comments
 (0)