Skip to content

Commit 0b97915

Browse files
Mash707Mash707
authored
chore(alert): move examples to individual files (#11957)
1 parent 7d045b8 commit 0b97915

File tree

12 files changed

+312
-275
lines changed

12 files changed

+312
-275
lines changed

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

Lines changed: 26 additions & 275 deletions
Large diffs are not rendered by default.

‎packages/react-core/src/components/Alert/examples/AlertCustomIcons.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Fragment } from 'react';
2+
import { Alert } from '@patternfly/react-core';
3+
import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
4+
import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
5+
import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
6+
import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
7+
import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
8+
9+
export const AlertCustomIcons: React.FunctionComponent = () => (
10+
<Fragment>
11+
<Alert customIcon={<UsersIcon />} title="Default alert title" />
12+
<Alert customIcon={<BoxIcon />} variant="info" title="Info alert title" />
13+
<Alert customIcon={<DatabaseIcon />} variant="success" title="Success alert title" />
14+
<Alert customIcon={<ServerIcon />} variant="warning" title="Warning alert title" />
15+
<Alert customIcon={<LaptopIcon />} variant="danger" title="Danger alert title" />
16+
</Fragment>
17+
);

‎packages/react-core/src/components/Alert/examples/AlertExpandable.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Fragment } from 'react';
2+
import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
3+
4+
export const AlertExpandable: React.FunctionComponent = () => (
5+
<Fragment>
6+
<Alert
7+
isExpandable
8+
variant="success"
9+
title="Success alert title"
10+
// eslint-disable-next-line no-console
11+
actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
12+
>
13+
<p>Success alert description. This should tell the user more information about the alert.</p>
14+
</Alert>
15+
<Alert
16+
isExpandable
17+
isInline
18+
variant="success"
19+
title="Success alert title"
20+
actionLinks={
21+
<Fragment>
22+
<AlertActionLink component="a" href="#">
23+
View details
24+
</AlertActionLink>
25+
<AlertActionLink // eslint-disable-next-line no-console
26+
onClick={() => console.log('Clicked on Ignore')}
27+
>
28+
Ignore
29+
</AlertActionLink>
30+
</Fragment>
31+
}
32+
>
33+
<p>Success alert description. This should tell the user more information about the alert.</p>
34+
</Alert>
35+
</Fragment>
36+
);

‎packages/react-core/src/components/Alert/examples/AlertInlineVariants.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Fragment } from 'react';
2+
import { Alert } from '@patternfly/react-core';
3+
4+
export const AlertInlineVariants: React.FunctionComponent = () => (
5+
<Fragment>
6+
<Alert variant="custom" isInline title="Custom inline alert title" />
7+
<Alert variant="info" isInline title="Info inline alert title" />
8+
<Alert variant="success" isInline title="Success inline alert title" />
9+
<Alert variant="warning" isInline title="Warning inline alert title" />
10+
<Alert variant="danger" isInline title="Danger inline alert title" />
11+
</Fragment>
12+
);

‎packages/react-core/src/components/Alert/examples/AlertInlineVariations.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Fragment } from 'react';
2+
import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
3+
4+
export const AlertInlineVariations: React.FunctionComponent = () => (
5+
<Fragment>
6+
<Alert
7+
isInline
8+
variant="success"
9+
title="Success alert title"
10+
actionLinks={
11+
<Fragment>
12+
<AlertActionLink component="a" href="#">
13+
View details
14+
</AlertActionLink>
15+
<AlertActionLink // eslint-disable-next-line no-console
16+
onClick={() => console.log('Clicked on Ignore')}
17+
>
18+
Ignore
19+
</AlertActionLink>
20+
</Fragment>
21+
}
22+
>
23+
<p>Success alert description. This should tell the user more information about the alert.</p>
24+
</Alert>
25+
<Alert isInline variant="success" title="Success alert title">
26+
<p>
27+
Success alert description. This should tell the user more information about the alert.{' '}
28+
<a href="#">This is a link.</a>
29+
</p>
30+
</Alert>
31+
<Alert
32+
isInline
33+
variant="success"
34+
title="Success alert title"
35+
// eslint-disable-next-line no-console
36+
actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
37+
>
38+
<p>Short alert description.</p>
39+
</Alert>
40+
<Alert isInline variant="success" title="div success alert title" component="div" />
41+
<Alert isInline variant="success" title="h6 Success alert title" component="h6">
42+
<p>Short alert description.</p>
43+
</Alert>
44+
</Fragment>
45+
);

‎packages/react-core/src/components/Alert/examples/AlertPlainInlineVariants.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Fragment } from 'react';
2+
import { Alert } from '@patternfly/react-core';
3+
4+
export const AlertPlainInlineVariants: React.FunctionComponent = () => (
5+
<Fragment>
6+
<Alert variant="custom" isInline isPlain title="Custom inline alert title" />
7+
<Alert variant="info" isInline isPlain title="Info inline alert title" />
8+
<Alert variant="success" isInline isPlain title="Success inline alert title" />
9+
<Alert variant="warning" isInline isPlain title="Warning inline alert title" />
10+
<Alert variant="danger" isInline isPlain title="Danger inline alert title" />
11+
</Fragment>
12+
);

‎packages/react-core/src/components/Alert/examples/AlertPlainInlineVariations.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Alert } from '@patternfly/react-core';
2+
3+
export const AlertPlainInlineVariations: React.FunctionComponent = () => (
4+
<Alert isInline isPlain variant="success" title="Success alert title">
5+
<p>Success alert description. This should tell the user more information about the alert.</p>
6+
</Alert>
7+
);

‎packages/react-core/src/components/Alert/examples/AlertStaticLiveRegion.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Fragment } from 'react';
2+
import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
3+
4+
export const AlertStaticLiveRegion: React.FunctionComponent = () => (
5+
<Fragment>
6+
<Alert
7+
isLiveRegion
8+
variant="info"
9+
title="Default live region configuration"
10+
// eslint-disable-next-line no-console
11+
actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
12+
>
13+
This alert uses the recommended <code>isLiveRegion</code> prop to automatically set ARIA attributes and CSS
14+
classes.
15+
</Alert>
16+
<Alert
17+
aria-live="assertive"
18+
aria-relevant="additions text"
19+
aria-atomic="true"
20+
variant="info"
21+
title="Customized live region"
22+
// eslint-disable-next-line no-console
23+
actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
24+
>
25+
You can alternatively omit the <code>isLiveRegion</code> prop to specify ARIA attributes and CSS manually on the
26+
containing element.
27+
</Alert>
28+
</Fragment>
29+
);

‎packages/react-core/src/components/Alert/examples/AlertTimeout.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Fragment, useState } from 'react';
2+
import { Alert, AlertActionLink, AlertGroup, Button } from '@patternfly/react-core';
3+
4+
export const AlertTimeout: React.FunctionComponent = () => {
5+
const [alerts, setAlerts] = useState<React.ReactNode[]>([]);
6+
const [newAlertKey, setNewAlertKey] = useState<number>(0);
7+
8+
const onClick = () => {
9+
const timeout = 8000;
10+
setNewAlertKey((key) => key + 1);
11+
setAlerts((prevAlerts) => [
12+
<Alert
13+
title="Default timeout Alert"
14+
timeout={timeout}
15+
actionLinks={
16+
<Fragment>
17+
<AlertActionLink component="a" href="#">
18+
View details
19+
</AlertActionLink>
20+
<AlertActionLink // eslint-disable-next-line no-console
21+
onClick={() => console.log('Clicked on Ignore')}
22+
>
23+
Ignore
24+
</AlertActionLink>
25+
</Fragment>
26+
}
27+
key={newAlertKey}
28+
>
29+
This alert will dismiss after {`${timeout / 1000} seconds`}
30+
</Alert>,
31+
...prevAlerts
32+
]);
33+
};
34+
35+
return (
36+
<Fragment>
37+
<Button variant="secondary" onClick={onClick}>
38+
Add alert
39+
</Button>
40+
<AlertGroup hasAnimations isLiveRegion>
41+
{alerts}
42+
</AlertGroup>
43+
</Fragment>
44+
);
45+
};

‎packages/react-core/src/components/Alert/examples/AlertTruncated.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Fragment } from 'react';
2+
import { Alert } from '@patternfly/react-core';
3+
4+
export const AlertTruncated: React.FunctionComponent = () => (
5+
<Fragment>
6+
<Alert
7+
variant="info"
8+
truncateTitle={1}
9+
title={`
10+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
11+
`}
12+
/>
13+
<Alert
14+
variant="warning"
15+
truncateTitle={2}
16+
title={`
17+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
18+
`}
19+
/>
20+
<Alert
21+
variant="danger"
22+
truncateTitle={3}
23+
title={`
24+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
25+
`}
26+
/>
27+
</Fragment>
28+
);

0 commit comments

Comments
 (0)