Skip to content

Commit 6bd6c88

Browse files
thatblindgeyethatblindgeye
authored
feat(Banner): add support for status icons (#8195)
* feat(Banner): add support for status icons * Made icon support an example instead of new props * Added flex layout to status example * Updated snapshot after rebase * Updated logic for rendering sr text
1 parent b7e13a9 commit 6bd6c88

File tree

6 files changed

+93
-33
lines changed

6 files changed

+93
-33
lines changed

‎packages/react-core/src/components/Banner/Banner.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,18 @@ import styles from '@patternfly/react-styles/css/components/Banner/banner';
33
import { css } from '@patternfly/react-styles';
44

55
export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
6-
/** Content rendered inside the banner */
6+
/** Content rendered inside the banner. */
77
children?: React.ReactNode;
8-
/** Additional classes added to the banner */
8+
/** Additional classes added to the banner. */
99
className?: string;
10-
/** Variant styles for the banner */
11-
variant?: 'default' | 'info' | 'danger' | 'success' | 'warning';
1210
/** If set to true, the banner sticks to the top of its container */
1311
isSticky?: boolean;
14-
/** Text announced by screen readers to indicate the type of banner. Defaults to "${variant} banner" if this prop is not passed in */
12+
/** Text announced by screen readers to indicate the type of banner. This prop should only
13+
* be passed in when the banner conveys status/severity.
14+
*/
1515
screenReaderText?: string;
16+
/** Variant styles for the banner. */
17+
variant?: 'default' | 'info' | 'danger' | 'success' | 'warning';
1618
}
1719

1820
export const Banner: React.FunctionComponent<BannerProps> = ({
@@ -32,8 +34,8 @@ export const Banner: React.FunctionComponent<BannerProps> = ({
3234
)}
3335
{...props}
3436
>
37+
{screenReaderText && <span className="pf-u-screen-reader">{screenReaderText}</span>}
3538
{children}
36-
<span className="pf-u-screen-reader">{screenReaderText || `${variant} banner`}</span>
3739
</div>
3840
);
3941
Banner.displayName = 'Banner';

‎packages/react-core/src/components/Banner/__tests__/Banner.test.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -51,22 +51,12 @@ test('Renders with class name pf-m-info when "info" is passed to variant prop',
5151
expect(screen.getByText('Test')).toHaveClass('pf-m-info');
5252
});
5353

54-
test('Renders pf-u-screen-reader class by default for screenReaderText', () => {
54+
test('Does not render pf-u-screen-reader class by default', () => {
5555
render(<Banner>Test</Banner>);
56-
expect(screen.getByText('default banner')).toHaveClass('pf-u-screen-reader', { exact: true });
56+
expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-u-screen-reader"></span>');
5757
});
5858

59-
test('Renders screenReaderText as "default banner" by default', () => {
60-
render(<Banner>Test</Banner>);
61-
expect(screen.getByText('default banner')).toBeInTheDocument();
62-
});
63-
64-
test('Renders screenReaderText as "success banner" when variant="success"', () => {
65-
render(<Banner variant="success">Test</Banner>);
66-
expect(screen.getByText('success banner')).toBeInTheDocument();
67-
});
68-
69-
test('Renders custom screenReaderText passed via prop', () => {
59+
test('Renders screenReaderText passed via prop', () => {
7060
render(<Banner screenReaderText="Custom screen reader text">Test</Banner>);
7161
expect(screen.getByText('Custom screen reader text')).toBeInTheDocument();
7262
});

‎packages/react-core/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@ exports[`Matches the snapshot 1`] = `
66
class="pf-c-banner"
77
>
88
Test
9-
<span
10-
class="pf-u-screen-reader"
11-
>
12-
default banner
13-
</span>
149
</div>
1510
</DocumentFragment>
1611
`;

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,28 @@ cssPrefix: pf-c-banner
55
propComponents: ['Banner']
66
---
77

8+
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
9+
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
10+
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
11+
import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
12+
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
13+
814
## Examples
915

1016
### Basic
1117

18+
Banners can be styled with one of 5 different colors. A basic banner should only be used when the banner color does not represent status or severity.
19+
1220
```ts file="./BannerBasic.tsx"
21+
22+
```
23+
24+
### Status
25+
26+
When a banner is used to convey status, it is advised to pass in an icon inside the banner to convey the status in a way besides just color. The `screenReaderText` prop should also be passed in to convey the status/severity of the banner to users of certain assistive technologies such as screen readers.
27+
28+
In the following example, a flex layout is used inside the banner content to show one possible way to create spacing between the icons and banner text.
29+
30+
```ts file="./BannerStatus.tsx"
31+
1332
```

‎packages/react-core/src/components/Banner/examples/BannerBasic.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,15 @@ import React from 'react';
22
import { Banner } from '@patternfly/react-core';
33

44
export const BannerBasic: React.FunctionComponent = () => (
5-
<React.Fragment>
6-
<Banner screenReaderText="This is a default Banner">Default banner</Banner>
5+
<>
6+
<Banner>Default banner</Banner>
77
<br />
8-
<Banner variant="info" screenReaderText="This is an info Banner">
9-
Info banner
10-
</Banner>
8+
<Banner variant="info">Blue banner</Banner>
119
<br />
12-
<Banner variant="danger">Danger banner</Banner>
10+
<Banner variant="danger">Red banner</Banner>
1311
<br />
14-
<Banner variant="success">Success banner</Banner>
12+
<Banner variant="success">Green banner</Banner>
1513
<br />
16-
<Banner variant="warning">Warning banner</Banner>
17-
</React.Fragment>
14+
<Banner variant="warning">Gold banner</Banner>
15+
</>
1816
);

‎packages/react-core/src/components/Banner/examples/BannerStatus.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import { Banner, Flex, FlexItem } from '@patternfly/react-core';
3+
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
4+
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
5+
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
6+
import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
7+
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
8+
9+
export const BannerStatus: React.FunctionComponent = () => (
10+
<>
11+
<Banner screenReaderText="Default banner">
12+
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
13+
<FlexItem>
14+
<BellIcon />
15+
</FlexItem>
16+
<FlexItem>Default banner</FlexItem>
17+
</Flex>
18+
</Banner>
19+
<br />
20+
<Banner screenReaderText="Info banner" variant="info">
21+
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
22+
<FlexItem>
23+
<InfoCircleIcon />
24+
</FlexItem>
25+
<FlexItem>Info banner</FlexItem>
26+
</Flex>
27+
</Banner>
28+
<br />
29+
<Banner screenReaderText="Danger banner" variant="danger">
30+
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
31+
<FlexItem>
32+
<ExclamationCircleIcon />
33+
</FlexItem>
34+
<FlexItem>Danger banner</FlexItem>
35+
</Flex>
36+
</Banner>
37+
<br />
38+
<Banner screenReaderText="Success banner" variant="success">
39+
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
40+
<FlexItem>
41+
<CheckCircleIcon />
42+
</FlexItem>
43+
<FlexItem>Success banner</FlexItem>
44+
</Flex>
45+
</Banner>
46+
<br />
47+
<Banner screenReaderText="Warning banner" variant="warning">
48+
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
49+
<FlexItem>
50+
<ExclamationTriangleIcon />
51+
</FlexItem>
52+
<FlexItem>Warning banner</FlexItem>
53+
</Flex>
54+
</Banner>
55+
</>
56+
);

0 commit comments

Comments
 (0)