Skip to content

Commit f2d74b7

Browse files
Mash707Mash707
authored
chore(grid,stack): update examples flags from js to ts (#12199)
* chore(grid,stack): update examples flags from js to ts * chore(grid,stack): update examples flags from js to ts
1 parent bb43f01 commit f2d74b7

11 files changed

Lines changed: 139 additions & 120 deletions

File tree

‎packages/react-core/src/layouts/Grid/examples/Grid.md‎

Lines changed: 8 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -12,134 +12,38 @@ import './grid.css';
1212

1313
### Basic
1414

15-
```js
16-
import { Grid, GridItem } from '@patternfly/react-core';
17-
18-
<Grid>
19-
<GridItem span={8}>span = 8</GridItem>
20-
<GridItem span={4} rowSpan={2}>
21-
span = 4, rowSpan = 2
22-
</GridItem>
23-
<GridItem span={2} rowSpan={3}>
24-
span = 2, rowSpan = 3
25-
</GridItem>
26-
<GridItem span={2}>span = 2</GridItem>
27-
<GridItem span={4}>span = 4</GridItem>
28-
<GridItem span={2}>span = 2</GridItem>
29-
<GridItem span={2}>span = 2</GridItem>
30-
<GridItem span={2}>span = 2</GridItem>
31-
<GridItem span={4}>span = 4</GridItem>
32-
<GridItem span={2}>span = 2</GridItem>
33-
<GridItem span={4}>span = 4</GridItem>
34-
<GridItem span={4}>span = 4</GridItem>
35-
</Grid>;
15+
```ts file="GridBasic.tsx"
3616
```
3717

3818
### With gutters
3919

40-
```js
41-
import { Grid, GridItem } from '@patternfly/react-core';
42-
43-
<Grid hasGutter>
44-
<GridItem span={8}>span = 8</GridItem>
45-
<GridItem span={4} rowSpan={2}>
46-
span = 4, rowSpan = 2
47-
</GridItem>
48-
<GridItem span={2} rowSpan={3}>
49-
span = 2, rowSpan = 3
50-
</GridItem>
51-
<GridItem span={2}>span = 2</GridItem>
52-
<GridItem span={4}>span = 4</GridItem>
53-
<GridItem span={2}>span = 2</GridItem>
54-
<GridItem span={2}>span = 2</GridItem>
55-
<GridItem span={2}>span = 2</GridItem>
56-
<GridItem span={4}>span = 4</GridItem>
57-
<GridItem span={2}>span = 2</GridItem>
58-
<GridItem span={4}>span = 4</GridItem>
59-
<GridItem span={4}>span = 4</GridItem>
60-
</Grid>;
20+
```ts file="GridWithGutters.tsx"
6121
```
6222

6323
### With overrides
6424

65-
```js
66-
import { Grid, GridItem } from '@patternfly/react-core';
67-
68-
<Grid sm={6} md={4} lg={3} xl2={1}>
69-
<GridItem span={3} rowSpan={2}>
70-
span = 3 rowSpan= 2
71-
</GridItem>
72-
<GridItem>Grid Item</GridItem>
73-
<GridItem>Grid Item</GridItem>
74-
<GridItem>Grid Item</GridItem>
75-
<GridItem>Grid Item</GridItem>
76-
<GridItem>Grid Item</GridItem>
77-
<GridItem>Grid Item</GridItem>
78-
<GridItem>Grid Item</GridItem>
79-
<GridItem>Grid Item</GridItem>
80-
<GridItem>Grid Item</GridItem>
81-
<GridItem>Grid Item</GridItem>
82-
<GridItem>Grid Item</GridItem>
83-
</Grid>;
25+
```ts file="GridWithOverrides.tsx"
8426
```
8527

8628
## Ordering
8729

8830
### Standard ordering
8931

90-
```js
91-
import { Grid, GridItem } from '@patternfly/react-core';
92-
93-
<Grid hasGutter span={3}>
94-
<GridItem order={{ default: '2' }}>Item A</GridItem>
95-
<GridItem>Item B</GridItem>
96-
<GridItem order={{ default: '-1' }}>Item C</GridItem>
97-
</Grid>;
32+
```ts file="GridStandardOrdering.tsx"
9833
```
9934

10035
### Responsive ordering
10136

102-
```js
103-
import { Grid, GridItem } from '@patternfly/react-core';
104-
105-
<Grid hasGutter span={3}>
106-
<GridItem order={{ lg: '2' }}>Item A</GridItem>
107-
<GridItem>Item B</GridItem>
108-
<GridItem order={{ default: '-1', md: '1' }}>Item C</GridItem>
109-
</Grid>;
37+
```ts file="GridResponsiveOrdering.tsx"
11038
```
11139

11240
### Grouped ordering
11341

114-
```js
115-
import { Grid, GridItem } from '@patternfly/react-core';
116-
117-
<Grid hasGutter span={12}>
118-
<Grid hasGutter span={6} order={{ default: '2' }}>
119-
<GridItem order={{ default: '3' }}>Set 1, Item A</GridItem>
120-
<GridItem order={{ default: '1' }}>Set 1, Item B</GridItem>
121-
<GridItem>Set 1, Item C</GridItem>
122-
<GridItem order={{ default: '2' }}>Set 1, Item D</GridItem>
123-
</Grid>
124-
<Grid hasGutter span={6}>
125-
<GridItem order={{ default: '2' }}>Set 2, Item A</GridItem>
126-
<GridItem order={{ default: '1' }}>Set 2, Item B</GridItem>
127-
<GridItem>Set 2, Item C</GridItem>
128-
<GridItem order={{ default: '2' }}>Set 2, Item D</GridItem>
129-
</Grid>
130-
</Grid>;
42+
```ts file="GridGroupingOrdering.tsx"
43+
13144
```
13245

13346
### Alternative components
13447

135-
```js
136-
import { Grid, GridItem } from '@patternfly/react-core';
137-
138-
<Grid component="ul">
139-
<GridItem component="li">Grid item</GridItem>
140-
<GridItem component="li">Grid item</GridItem>
141-
<GridItem component="li">Grid item</GridItem>
142-
<GridItem component="li">Grid item</GridItem>
143-
<GridItem component="li">Grid item</GridItem>
144-
</Grid>;
48+
```ts file="GridAlternativeComponents.tsx"
14549
```

‎packages/react-core/src/layouts/Grid/examples/GridAlternativeComponents.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Grid, GridItem } from '@patternfly/react-core';
2+
3+
export const GridAlternativeComponents: React.FunctionComponent = () => (
4+
<Grid component="ul">
5+
<GridItem component="li">Grid item</GridItem>
6+
<GridItem component="li">Grid item</GridItem>
7+
<GridItem component="li">Grid item</GridItem>
8+
<GridItem component="li">Grid item</GridItem>
9+
<GridItem component="li">Grid item</GridItem>
10+
</Grid>
11+
);

‎packages/react-core/src/layouts/Grid/examples/GridBasic.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Grid, GridItem } from '@patternfly/react-core';
2+
3+
export const GridBasic: React.FunctionComponent = () => (
4+
<Grid>
5+
<GridItem span={8}>span = 8</GridItem>
6+
<GridItem span={4} rowSpan={2}>
7+
span = 4, rowSpan = 2
8+
</GridItem>
9+
<GridItem span={2} rowSpan={3}>
10+
span = 2, rowSpan = 3
11+
</GridItem>
12+
<GridItem span={2}>span = 2</GridItem>
13+
<GridItem span={4}>span = 4</GridItem>
14+
<GridItem span={2}>span = 2</GridItem>
15+
<GridItem span={2}>span = 2</GridItem>
16+
<GridItem span={2}>span = 2</GridItem>
17+
<GridItem span={4}>span = 4</GridItem>
18+
<GridItem span={2}>span = 2</GridItem>
19+
<GridItem span={4}>span = 4</GridItem>
20+
<GridItem span={4}>span = 4</GridItem>
21+
</Grid>
22+
);

‎packages/react-core/src/layouts/Grid/examples/GridGroupingOrdering.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Grid, GridItem } from '@patternfly/react-core';
2+
3+
export const GridGroupingOrdering: React.FunctionComponent = () => (
4+
<Grid hasGutter span={12}>
5+
<Grid hasGutter span={6} order={{ default: '2' }}>
6+
<GridItem order={{ default: '3' }}>Set 1, Item A</GridItem>
7+
<GridItem order={{ default: '1' }}>Set 1, Item B</GridItem>
8+
<GridItem>Set 1, Item C</GridItem>
9+
<GridItem order={{ default: '2' }}>Set 1, Item D</GridItem>
10+
</Grid>
11+
<Grid hasGutter span={6}>
12+
<GridItem order={{ default: '2' }}>Set 2, Item A</GridItem>
13+
<GridItem order={{ default: '1' }}>Set 2, Item B</GridItem>
14+
<GridItem>Set 2, Item C</GridItem>
15+
<GridItem order={{ default: '2' }}>Set 2, Item D</GridItem>
16+
</Grid>
17+
</Grid>
18+
);

‎packages/react-core/src/layouts/Grid/examples/GridResponsiveOrdering.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Grid, GridItem } from '@patternfly/react-core';
2+
3+
export const GridResponsiveOrdering: React.FunctionComponent = () => (
4+
<Grid hasGutter span={3}>
5+
<GridItem order={{ lg: '2' }}>Item A</GridItem>
6+
<GridItem>Item B</GridItem>
7+
<GridItem order={{ default: '-1', md: '1' }}>Item C</GridItem>
8+
</Grid>
9+
);

‎packages/react-core/src/layouts/Grid/examples/GridStandardOrdering.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Grid, GridItem } from '@patternfly/react-core';
2+
3+
export const GridStandardOrdering: React.FunctionComponent = () => (
4+
<Grid hasGutter span={3}>
5+
<GridItem order={{ default: '2' }}>Item A</GridItem>
6+
<GridItem>Item B</GridItem>
7+
<GridItem order={{ default: '-1' }}>Item C</GridItem>
8+
</Grid>
9+
);

‎packages/react-core/src/layouts/Grid/examples/GridWithGutters.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Grid, GridItem } from '@patternfly/react-core';
2+
3+
export const GridWithGutters: React.FunctionComponent = () => (
4+
<Grid hasGutter>
5+
<GridItem span={8}>span = 8</GridItem>
6+
<GridItem span={4} rowSpan={2}>
7+
span = 4, rowSpan = 2
8+
</GridItem>
9+
<GridItem span={2} rowSpan={3}>
10+
span = 2, rowSpan = 3
11+
</GridItem>
12+
<GridItem span={2}>span = 2</GridItem>
13+
<GridItem span={4}>span = 4</GridItem>
14+
<GridItem span={2}>span = 2</GridItem>
15+
<GridItem span={2}>span = 2</GridItem>
16+
<GridItem span={2}>span = 2</GridItem>
17+
<GridItem span={4}>span = 4</GridItem>
18+
<GridItem span={2}>span = 2</GridItem>
19+
<GridItem span={4}>span = 4</GridItem>
20+
<GridItem span={4}>span = 4</GridItem>
21+
</Grid>
22+
);

‎packages/react-core/src/layouts/Grid/examples/GridWithOverrides.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Grid, GridItem } from '@patternfly/react-core';
2+
3+
export const GridWithOverrides: React.FunctionComponent = () => (
4+
<Grid sm={6} md={4} lg={3} xl2={1}>
5+
<GridItem span={3} rowSpan={2}>
6+
span = 3 rowSpan= 2
7+
</GridItem>
8+
<GridItem>Grid Item</GridItem>
9+
<GridItem>Grid Item</GridItem>
10+
<GridItem>Grid Item</GridItem>
11+
<GridItem>Grid Item</GridItem>
12+
<GridItem>Grid Item</GridItem>
13+
<GridItem>Grid Item</GridItem>
14+
<GridItem>Grid Item</GridItem>
15+
<GridItem>Grid Item</GridItem>
16+
<GridItem>Grid Item</GridItem>
17+
<GridItem>Grid Item</GridItem>
18+
<GridItem>Grid Item</GridItem>
19+
</Grid>
20+
);

‎packages/react-core/src/layouts/Stack/examples/Stack.md‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,10 @@ import './stack.css';
1212

1313
### Basic
1414

15-
```js
16-
import { Stack, StackItem } from '@patternfly/react-core';
17-
18-
<Stack>
19-
<StackItem>content</StackItem>
20-
<StackItem isFilled>pf-m-fill</StackItem>
21-
<StackItem>content</StackItem>
22-
</Stack>;
15+
```ts file="StackBasic.tsx"
2316
```
2417

2518
### With gutter
2619

27-
```js
28-
import { Stack, StackItem } from '@patternfly/react-core';
29-
30-
<Stack hasGutter>
31-
<StackItem>content</StackItem>
32-
<StackItem isFilled>pf-m-fill</StackItem>
33-
<StackItem>content</StackItem>
34-
</Stack>;
20+
```ts file="StackWithGutter.tsx"
3521
```

‎packages/react-core/src/layouts/Stack/examples/StackBasic.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Stack, StackItem } from '@patternfly/react-core';
2+
3+
export const StackBasic: React.FunctionComponent = () => (
4+
<Stack>
5+
<StackItem>content</StackItem>
6+
<StackItem isFilled>pf-m-fill</StackItem>
7+
<StackItem>content</StackItem>
8+
</Stack>
9+
);

0 commit comments

Comments
 (0)