feat(Banner): add support for status icons

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

@@ -3,16 +3,18 @@ import styles from '@patternfly/react-styles/css/components/Banner/banner';
 import { css } from '@patternfly/react-styles';
 
 export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the banner */
+  /** Content rendered inside the banner. */
   children?: React.ReactNode;
-  /** Additional classes added to the banner */
+  /** Additional classes added to the banner. */
   className?: string;
-  /** Variant styles for the banner */
-  variant?: 'default' | 'info' | 'danger' | 'success' | 'warning';
   /** If set to true, the banner sticks to the top of its container */
   isSticky?: boolean;
-  /** Text announced by screen readers to indicate the type of banner. Defaults to "${variant} banner" if this prop is not passed in */
+  /** Text announced by screen readers to indicate the type of banner. This prop should only
+   * be passed in when the banner conveys status/severity.
+   */
   screenReaderText?: string;
+  /** Variant styles for the banner. */
+  variant?: 'default' | 'info' | 'danger' | 'success' | 'warning';
 }
 
 export const Banner: React.FunctionComponent<BannerProps> = ({
@@ -32,8 +34,8 @@ export const Banner: React.FunctionComponent<BannerProps> = ({
     )}
     {...props}
   >
+    {screenReaderText && <span className="pf-u-screen-reader">{screenReaderText}</span>}
     {children}
-    <span className="pf-u-screen-reader">{screenReaderText || `${variant} banner`}</span>
   </div>
 );
 Banner.displayName = 'Banner';

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

@@ -51,22 +51,12 @@ test('Renders with class name pf-m-info when "info" is passed to variant prop',
   expect(screen.getByText('Test')).toHaveClass('pf-m-info');
 });
 
-test('Renders pf-u-screen-reader class by default for screenReaderText', () => {
+test('Does not render pf-u-screen-reader class by default', () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('default banner')).toHaveClass('pf-u-screen-reader', { exact: true });
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-u-screen-reader"></span>');
 });
 
-test('Renders screenReaderText as "default banner" by default', () => {
-  render(<Banner>Test</Banner>);
-  expect(screen.getByText('default banner')).toBeInTheDocument();
-});
-
-test('Renders screenReaderText as "success banner" when variant="success"', () => {
-  render(<Banner variant="success">Test</Banner>);
-  expect(screen.getByText('success banner')).toBeInTheDocument();
-});
-
-test('Renders custom screenReaderText passed via prop', () => {
+test('Renders screenReaderText passed via prop', () => {
   render(<Banner screenReaderText="Custom screen reader text">Test</Banner>);
   expect(screen.getByText('Custom screen reader text')).toBeInTheDocument();
 });

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

@@ -6,11 +6,6 @@ exports[`Matches the snapshot 1`] = `
     class="pf-c-banner"
   >
     Test
-    <span
-      class="pf-u-screen-reader"
-    >
-      default banner
-    </span>
   </div>
 </DocumentFragment>
 `;

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

@@ -5,9 +5,28 @@ cssPrefix: pf-c-banner
 propComponents: ['Banner']
 ---
 
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
 ## Examples
 
 ### Basic
 
+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.
+
 ```ts file="./BannerBasic.tsx"
+
+```
+
+### Status
+
+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.
+
+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.
+
+```ts file="./BannerStatus.tsx"
+
 ```

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

@@ -2,17 +2,15 @@ import React from 'react';
 import { Banner } from '@patternfly/react-core';
 
 export const BannerBasic: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Banner screenReaderText="This is a default Banner">Default banner</Banner>
+  <>
+    <Banner>Default banner</Banner>
     <br />
-    <Banner variant="info" screenReaderText="This is an info Banner">
-      Info banner
-    </Banner>
+    <Banner variant="info">Blue banner</Banner>
     <br />
-    <Banner variant="danger">Danger banner</Banner>
+    <Banner variant="danger">Red banner</Banner>
     <br />
-    <Banner variant="success">Success banner</Banner>
+    <Banner variant="success">Green banner</Banner>
     <br />
-    <Banner variant="warning">Warning banner</Banner>
-  </React.Fragment>
+    <Banner variant="warning">Gold banner</Banner>
+  </>
 );

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Banner, Flex, FlexItem } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+export const BannerStatus: React.FunctionComponent = () => (
+  <>
+    <Banner screenReaderText="Default banner">
+      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <BellIcon />
+        </FlexItem>
+        <FlexItem>Default banner</FlexItem>
+      </Flex>
+    </Banner>
+    <br />
+    <Banner screenReaderText="Info banner" variant="info">
+      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <InfoCircleIcon />
+        </FlexItem>
+        <FlexItem>Info banner</FlexItem>
+      </Flex>
+    </Banner>
+    <br />
+    <Banner screenReaderText="Danger banner" variant="danger">
+      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <ExclamationCircleIcon />
+        </FlexItem>
+        <FlexItem>Danger banner</FlexItem>
+      </Flex>
+    </Banner>
+    <br />
+    <Banner screenReaderText="Success banner" variant="success">
+      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <CheckCircleIcon />
+        </FlexItem>
+        <FlexItem>Success banner</FlexItem>
+      </Flex>
+    </Banner>
+    <br />
+    <Banner screenReaderText="Warning banner" variant="warning">
+      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <ExclamationTriangleIcon />
+        </FlexItem>
+        <FlexItem>Warning banner</FlexItem>
+      </Flex>
+    </Banner>
+  </>
+);