Skip to content

Commit d796863

Browse files
author
Jeff Puzzo
committed
chore(BackToTop/Backdrop/BackgroundImage/Badge/Banner/Brand/Breadcrumb): Convert examples from JS to TS
1 parent b30c7c3 commit d796863

File tree

20 files changed

+188
-191
lines changed

20 files changed

+188
-191
lines changed

‎packages/react-core/src/components/BackToTop/examples/BackToTop.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
#ws-react-c-back-to-top-basic {
2-
height: 300px;
3-
position: relative;
4-
}
2+
height: 300px;
3+
position: relative;
4+
}

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,5 @@ Back to top only shows after overflowing element has been scrolled 400px.
1616

1717
### Basic
1818

19-
```js
20-
import React from 'react';
21-
import { BackToTop } from '@patternfly/react-core';
22-
23-
<BackToTop isAlwaysVisible/>
24-
```
19+
```ts file="./BackToTopBasic.tsx"
20+
```

‎packages/react-core/src/components/BackToTop/examples/BackToTopBasic.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from 'react';
2+
import { BackToTop } from '@patternfly/react-core';
3+
4+
export const BackToTopBasic: React.FunctionComponent = () => <BackToTop isAlwaysVisible />;

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

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,13 @@ propComponents: ['Backdrop']
66
---
77

88
## Examples
9+
910
### Basic
10-
```js isFullscreen
11-
import React from 'react';
12-
import { Backdrop } from '@patternfly/react-core';
1311

14-
<Backdrop />
12+
```ts isFullscreen file="./BackdropBasic.tsx"
1513
```
1614

1715
### With spinner
18-
```js isFullscreen
19-
import React from 'react';
20-
import { Backdrop, Spinner, Bullseye } from '@patternfly/react-core';
2116

22-
<Backdrop>
23-
<Bullseye>
24-
<Spinner />
25-
</Bullseye>
26-
</Backdrop>
17+
```ts isFullscreen file="./BackdropSpinner.tsx"
2718
```

‎packages/react-core/src/components/Backdrop/examples/BackdropBasic.tsx‎

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

‎packages/react-core/src/components/Backdrop/examples/BackdropSpinner.tsx‎

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

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

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,8 @@ propComponents: ['BackgroundImage']
66
---
77

88
## Examples
9+
910
### Basic
10-
```js isFullscreen
11-
import React from 'react';
12-
import { BackgroundImage } from '@patternfly/react-core';
1311

14-
class SimpleBackgroundImage extends React.Component {
15-
constructor(props) {
16-
super(props);
17-
/**
18-
* Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
19-
*/
20-
this.images = {
21-
'xs': '/assets/images/pfbg_576.jpg',
22-
'xs2x': '/assets/images/pfbg_576@2x.jpg',
23-
'sm': '/assets/images/pfbg_768.jpg',
24-
'sm2x': '/assets/images/pfbg_768@2x.jpg',
25-
'lg': '/assets/images/pfbg_1200.jpg'
26-
};
27-
}
28-
render() {
29-
return <BackgroundImage src={this.images} />;
30-
}
31-
}
12+
```ts isFullscreen file="./BackgroundImageBasic.tsx"
3213
```

‎packages/react-core/src/components/BackgroundImage/examples/BackgroundImageBasic.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { BackgroundImage } from '@patternfly/react-core';
3+
4+
/**
5+
* Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
6+
*/
7+
const images = {
8+
xs: '/assets/images/pfbg_576.jpg',
9+
xs2x: '/assets/images/pfbg_576@2x.jpg',
10+
sm: '/assets/images/pfbg_768.jpg',
11+
sm2x: '/assets/images/pfbg_768@2x.jpg',
12+
lg: '/assets/images/pfbg_1200.jpg'
13+
};
14+
15+
export const BackgroundImageBasic: React.FunctionComponent = () => <BackgroundImage src={images} />;

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

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,13 @@ propComponents: ['Badge']
66
---
77

88
## Examples
9+
910
### Read
10-
```js
11-
import React from 'react';
12-
import { Badge } from '@patternfly/react-core';
1311

14-
<React.Fragment>
15-
<Badge key={1} isRead>7</Badge>
16-
{' '}
17-
<Badge key={2} isRead>24</Badge>
18-
{' '}
19-
<Badge key={3} isRead>240</Badge>
20-
{' '}
21-
<Badge key={4} isRead>999+</Badge>
22-
</React.Fragment>
12+
```ts file="./BadgeRead.tsx"
2313
```
2414

2515
### Unread
26-
```js
27-
import React from 'react';
28-
import { Badge } from '@patternfly/react-core';
2916

30-
<React.Fragment>
31-
<Badge key={1}>7</Badge>
32-
{' '}
33-
<Badge key={2}>24</Badge>
34-
{' '}
35-
<Badge key={3}>240</Badge>
36-
{' '}
37-
<Badge key={4}>999+</Badge>
38-
</React.Fragment>
17+
```ts file="./BadgeUnread.tsx"
3918
```

‎packages/react-core/src/components/Badge/examples/BadgeRead.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import { Badge, Flex } from '@patternfly/react-core';
3+
4+
export const BadgeRead: React.FunctionComponent = () => (
5+
<Flex>
6+
<Badge isRead>7</Badge>
7+
<Badge isRead>24</Badge>
8+
<Badge isRead>240</Badge>
9+
<Badge isRead>999+</Badge>
10+
</Flex>
11+
);

0 commit comments

Comments
 (0)