Skip to content

chore: Convert examples to typescript #6791

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tlabaj merged 3 commits into from
Jan 20, 2022
Merged

chore: Convert examples to typescript #6791

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
392ef37
chore(BackToTop/Backdrop/BackgroundImage/Badge/Banner/Brand/Breadcrum…
Jan 13, 2022
82ee717
allow for SVG imports in react-core for TSX examples
Jan 19, 2022
ec9ca43
removing all flexbox usages
Jan 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/react-core/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
declare module '*.svg' {
const content: string;
export default content;
}
6 changes: 3 additions & 3 deletions packages/react-core/src/components/BackToTop/examples/BackToTop.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#ws-react-c-back-to-top-basic {
height: 300px;
position: relative;
}
height: 300px;
position: relative;
}
6 changes: 1 addition & 5 deletions packages/react-core/src/components/BackToTop/examples/BackToTop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,5 @@ Back to top only shows after overflowing element has been scrolled 400px.

### Basic

```js
import React from 'react';
import { BackToTop } from '@patternfly/react-core';

<BackToTop isAlwaysVisible/>
```ts file="./BackToTopBasic.tsx"
```
4 changes: 4 additions & 0 deletions packages/react-core/src/components/BackToTop/examples/BackToTopBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import React from 'react';
import { BackToTop } from '@patternfly/react-core';

export const BackToTopBasic: React.FunctionComponent = () => <BackToTop isAlwaysVisible />;
15 changes: 3 additions & 12 deletions packages/react-core/src/components/Backdrop/examples/Backdrop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,13 @@ propComponents: ['Backdrop']
---

## Examples

### Basic
```js isFullscreen
import React from 'react';
import { Backdrop } from '@patternfly/react-core';

<Backdrop />
```ts isFullscreen file="./BackdropBasic.tsx"
```

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

<Backdrop>
<Bullseye>
<Spinner />
</Bullseye>
</Backdrop>
```ts isFullscreen file="./BackdropSpinner.tsx"
```
4 changes: 4 additions & 0 deletions packages/react-core/src/components/Backdrop/examples/BackdropBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import React from 'react';
import { Backdrop } from '@patternfly/react-core';

export const BackdropBasic: React.FunctionComponent = () => <Backdrop />;
10 changes: 10 additions & 0 deletions packages/react-core/src/components/Backdrop/examples/BackdropSpinner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react';
import { Backdrop, Spinner, Bullseye } from '@patternfly/react-core';

export const BackdropSpinner: React.FunctionComponent = () => (
<Backdrop>
<Bullseye>
<Spinner />
</Bullseye>
</Backdrop>
);
23 changes: 2 additions & 21 deletions packages/react-core/src/components/BackgroundImage/examples/BackgroundImage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,8 @@ propComponents: ['BackgroundImage']
---

## Examples

### Basic
```js isFullscreen
import React from 'react';
import { BackgroundImage } from '@patternfly/react-core';

class SimpleBackgroundImage extends React.Component {
constructor(props) {
super(props);
/**
* Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
*/
this.images = {
'xs': '/assets/images/pfbg_576.jpg',
'xs2x': '/assets/images/pfbg_576@2x.jpg',
'sm': '/assets/images/pfbg_768.jpg',
'sm2x': '/assets/images/pfbg_768@2x.jpg',
'lg': '/assets/images/pfbg_1200.jpg'
};
}
render() {
return <BackgroundImage src={this.images} />;
}
}
```ts isFullscreen file="./BackgroundImageBasic.tsx"
```
15 changes: 15 additions & 0 deletions packages/react-core/src/components/BackgroundImage/examples/BackgroundImageBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';
import { BackgroundImage } from '@patternfly/react-core';

/**
* Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
*/
const images = {
xs: '/assets/images/pfbg_576.jpg',
xs2x: '/assets/images/pfbg_576@2x.jpg',
sm: '/assets/images/pfbg_768.jpg',
sm2x: '/assets/images/pfbg_768@2x.jpg',
lg: '/assets/images/pfbg_1200.jpg'
};

export const BackgroundImageBasic: React.FunctionComponent = () => <BackgroundImage src={images} />;
27 changes: 3 additions & 24 deletions packages/react-core/src/components/Badge/examples/Badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,13 @@ propComponents: ['Badge']
---

## Examples

### Read
```js
import React from 'react';
import { Badge } from '@patternfly/react-core';

<React.Fragment>
<Badge key={1} isRead>7</Badge>
{' '}
<Badge key={2} isRead>24</Badge>
{' '}
<Badge key={3} isRead>240</Badge>
{' '}
<Badge key={4} isRead>999+</Badge>
</React.Fragment>
```ts file="./BadgeRead.tsx"
```

### Unread
```js
import React from 'react';
import { Badge } from '@patternfly/react-core';

<React.Fragment>
<Badge key={1}>7</Badge>
{' '}
<Badge key={2}>24</Badge>
{' '}
<Badge key={3}>240</Badge>
{' '}
<Badge key={4}>999+</Badge>
</React.Fragment>
```ts file="./BadgeUnread.tsx"
```
19 changes: 19 additions & 0 deletions packages/react-core/src/components/Badge/examples/BadgeRead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import { Badge } from '@patternfly/react-core';

export const BadgeRead: React.FunctionComponent = () => (
<React.Fragment>
<Badge key={1} isRead>
7
</Badge>{' '}
<Badge key={2} isRead>
24
</Badge>{' '}
<Badge key={3} isRead>
240
</Badge>{' '}
<Badge key={4} isRead>
999+
</Badge>
</React.Fragment>
);
8 changes: 8 additions & 0 deletions packages/react-core/src/components/Badge/examples/BadgeUnread.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react';
import { Badge } from '@patternfly/react-core';

export const BadgeUnread: React.FunctionComponent = () => (
<React.Fragment>
<Badge key={1}>7</Badge> <Badge key={2}>24</Badge> <Badge key={3}>240</Badge> <Badge key={4}>999+</Badge>
</React.Fragment>
);
15 changes: 1 addition & 14 deletions packages/react-core/src/components/Banner/examples/Banner.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,6 @@ propComponents: ['Banner']
## Examples

### Basic
```js
import React from 'react';
import { Banner } from '@patternfly/react-core';

<React.Fragment>
<Banner>Default banner</Banner>
<br />
<Banner variant="info">Info banner</Banner>
<br />
<Banner variant="danger">Danger banner</Banner>
<br />
<Banner variant="success">Success banner</Banner>
<br />
<Banner variant="warning">Warning banner</Banner>
</React.Fragment>
```ts file="./BannerBasic.tsx"
```
16 changes: 16 additions & 0 deletions packages/react-core/src/components/Banner/examples/BannerBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react';
import { Banner } from '@patternfly/react-core';

export const BannerBasic: React.FunctionComponent = () => (
<React.Fragment>
<Banner>Default banner</Banner>
Copy link
Contributor

@tlabaj tlabaj Jan 20, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Usually our examples match the core examples. For that reason, I would add back the <br />

Copy link
Contributor Author

@jpuzz0 jpuzz0 Jan 20, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. And updated other recent instances where I was using flexbox instead of breaks and empty spaces as well.

<br />
<Banner variant="info">Info banner</Banner>
<br />
<Banner variant="danger">Danger banner</Banner>
<br />
<Banner variant="success">Success banner</Banner>
<br />
<Banner variant="warning">Warning banner</Banner>
</React.Fragment>
);
8 changes: 3 additions & 5 deletions packages/react-core/src/components/Brand/examples/Brand.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,12 @@ section: components
cssPrefix: null
propComponents: ['Brand']
---

import pfLogo from './pfLogo.svg';

## Examples

### Basic
```js
import React from 'react';
import { Brand } from '@patternfly/react-core';
import pfLogo from './examples/pfLogo.svg';

<Brand src={pfLogo} alt="Patternfly Logo" />
```ts file="./BrandBasic.tsx"
```
5 changes: 5 additions & 0 deletions packages/react-core/src/components/Brand/examples/BrandBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import React from 'react';
import { Brand } from '@patternfly/react-core';
import pfLogo from './pfLogo.svg';

export const BrandBasic: React.FunctionComponent = () => <Brand src={pfLogo} alt="Patternfly Logo" />;
109 changes: 4 additions & 105 deletions packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,121 +12,20 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico

### Basic

```js
import React from 'react';
import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';

<Breadcrumb>
<BreadcrumbItem to="#">Section home</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbItem to="#" isActive>
Section landing
</BreadcrumbItem>
</Breadcrumb>;
```ts file="./BreadcrumbBasic.tsx"
```

### Without home link

```js
import React from 'react';
import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';

<Breadcrumb>
<BreadcrumbItem>Section Home</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbItem to="#" isActive>
Section landing
</BreadcrumbItem>
</Breadcrumb>;
```ts file="./BreadcrumbWithoutHomeLink.tsx"
```

### With heading

```js
import React from 'react';
import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';

<Breadcrumb>
<BreadcrumbItem to="#">Section home</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbHeading to="#">Section title</BreadcrumbHeading>
</Breadcrumb>;
```ts file="./BreadcrumbWithHeading.tsx"
```

### With dropdown

```js
import React from 'react';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbHeading,
Dropdown,
DropdownItem,
BadgeToggle
} from '@patternfly/react-core';
import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';

class BreadcrumbDropdown extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: false
};
this.onToggle = isOpen => {
this.setState({
isOpen
});
};
this.onSelect = event => {
this.setState({
isOpen: !this.state.isOpen
});
this.onFocus();
};
this.onFocus = () => {
const element = document.getElementById('toggle-id');
element.focus();
};
}

render() {
const { isOpen } = this.state;
const dropdownItems = [
<DropdownItem key="edit" component="button" icon={<AngleLeftIcon />}>
Edit
</DropdownItem>,
<DropdownItem key="action" component="button" icon={<AngleLeftIcon />}>
Deployment
</DropdownItem>,
<DropdownItem key="apps" component="button" icon={<AngleLeftIcon />}>
Applications
</DropdownItem>
];
return (
<Breadcrumb>
<BreadcrumbItem comopnent="button">Section home</BreadcrumbItem>
<BreadcrumbItem isDropdown>
<Dropdown
onSelect={this.onSelect}
toggle={
<BadgeToggle id="toggle-id" onToggle={this.onToggle}>
{dropdownItems.length}
</BadgeToggle>
}
isOpen={isOpen}
dropdownItems={dropdownItems}
/>
</BreadcrumbItem>
<BreadcrumbHeading component="button">Section title</BreadcrumbHeading>
</Breadcrumb>
);
}
}
```ts file="./BreadcrumbDropdown.tsx"
```
13 changes: 13 additions & 0 deletions packages/react-core/src/components/Breadcrumb/examples/BreadcrumbBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';
import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';

export const BreadcrumbBasic: React.FunctionComponent = () => (
<Breadcrumb>
<BreadcrumbItem to="#">Section home</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbItem to="#" isActive>
Section landing
</BreadcrumbItem>
</Breadcrumb>
);
Loading