@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.31

package/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx

@@ -14,17 +14,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
 
   return (
     <Accordion asDefinitionList={false}>
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle1'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle1');
           }}
-          isExpanded={expanded === 'ex-toggle1'}
           id="ex-toggle1"
         >
           Item one
         </AccordionToggle>
-        <AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
+        <AccordionContent id="ex-expand1">
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
@@ -32,17 +31,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle2'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle2');
           }}
-          isExpanded={expanded === 'ex-toggle2'}
           id="ex-toggle2"
         >
           Item two
         </AccordionToggle>
-        <AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
+        <AccordionContent id="ex-expand2">
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
@@ -50,32 +48,30 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle3'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle3');
           }}
-          isExpanded={expanded === 'ex-toggle3'}
           id="ex-toggle3"
         >
           Item three
         </AccordionToggle>
-        <AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
+        <AccordionContent id="ex-expand3">
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle4'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle4');
           }}
-          isExpanded={expanded === 'ex-toggle4'}
           id="ex-toggle4"
         >
           Item four
         </AccordionToggle>
-        <AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'}>
+        <AccordionContent id="ex-expand4">
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -88,17 +84,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle5'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle5');
           }}
-          isExpanded={expanded === 'ex-toggle5'}
           id="ex-toggle5"
         >
           Item five
         </AccordionToggle>
-        <AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
+        <AccordionContent id="ex-expand5">
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>

package/src/components/Accordion/examples/AccordionToggleIconAtStart.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
+
+export const AccordionToggleIconAtStart: React.FunctionComponent = () => {
+  const [expanded, setExpanded] = React.useState('start-toggle-toggle2');
+
+  const onToggle = (id: string) => {
+    if (id === expanded) {
+      setExpanded('');
+    } else {
+      setExpanded(id);
+    }
+  };
+
+  return (
+    <Accordion togglePosition="start">
+      <AccordionItem isExpanded={expanded === 'start-toggle-toggle1'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle1');
+          }}
+          id="start-toggle-toggle1"
+        >
+          Item one
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand1">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'start-toggle-toggle2'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle2');
+          }}
+          id="start-toggle-toggle2"
+        >
+          Item two
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand2">
+          <p>
+            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+            ultrices, faucibus erat id, maximus nunc.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'start-toggle-toggle3'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle3');
+          }}
+          id="start-toggle-toggle3"
+        >
+          Item three
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand3">
+          <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'start-toggle-toggle4'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle4');
+          }}
+          id="start-toggle-toggle4"
+        >
+          Item four
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand4">
+          <p>
+            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis
+            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero
+            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis
+            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'start-toggle-toggle5'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle5');
+          }}
+          id="start-toggle-toggle5"
+        >
+          Item five
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand5">
+          <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};

package/src/components/Avatar/Avatar.tsx

@@ -4,36 +4,30 @@ import { css } from '@patternfly/react-styles';
 
 export interface AvatarProps
   extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
-  /** Additional classes added to the Avatar. */
+  /** Additional classes added to the avatar. */
   className?: string;
-  /** Attribute that specifies the URL of the image for the Avatar. */
+  /** Attribute that specifies the URL of the image for the avatar. */
   src?: string;
-  /** Attribute that specifies the alternate text of the image for the Avatar. */
+  /** Attribute that specifies the alternate text of the image for the avatar. */
   alt: string;
-  /** Border to add */
-  border?: 'light' | 'dark';
+  /** Flag to indicate the avatar should have a border. */
+  isBordered?: boolean;
   /** Size variant of avatar. */
   size?: 'sm' | 'md' | 'lg' | 'xl';
 }
 
 export const Avatar: React.FunctionComponent<AvatarProps> = ({
-  className = '',
+  className,
   src = '',
   alt,
-  border,
+  isBordered,
   size,
   ...props
 }: AvatarProps) => (
   <img
     src={src}
     alt={alt}
-    className={css(
-      styles.avatar,
-      styles.modifiers[size],
-      border === 'light' && styles.modifiers.light,
-      border === 'dark' && styles.modifiers.dark,
-      className
-    )}
+    className={css(styles.avatar, styles.modifiers[size], isBordered && styles.modifiers.bordered, className)}
     {...props}
   />
 );

package/src/components/Avatar/__tests__/Avatar.test.tsx

@@ -12,19 +12,14 @@ test('Renders simple avatar', () => {
   expect(screen.getByTestId('avatar').firstChild).toBeVisible();
 });
 
-test('Renders without any modifier class when border and size props are not passed', () => {
+test('Renders without any modifier class when isBordered and size props are not passed', () => {
   render(<Avatar alt="avatar" />);
   expect(screen.getByRole('img')).toHaveClass(styles.avatar, { exact: true });
 });
 
-test('Renders with class name pf-m-light when "light" is passed as border prop', () => {
-  render(<Avatar alt="avatar" border="light" />);
-  expect(screen.getByRole('img')).toHaveClass('pf-m-light');
-});
-
-test('Renders with class name pf-m-dark when "dark" is passed as border prop', () => {
-  render(<Avatar alt="avatar" border="dark" />);
-  expect(screen.getByRole('img')).toHaveClass('pf-m-dark');
+test('Renders with class name pf-m-bordered when isBordered is passed', () => {
+  render(<Avatar alt="avatar" isBordered />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-bordered');
 });
 
 test('Renders with class name pf-m-xl when "xl" is passed as size prop', () => {

package/src/components/Avatar/examples/Avatar.md

@@ -6,63 +6,20 @@ propComponents: ['Avatar']
 ---
 
 import avatarImg from '../../assets/avatarImg.svg';
-import avatarImgDark from '../../assets/avatarImgDark.svg';
-import './example.css';
 
 ## Examples
 
 ### Basic
 
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
-
-<Avatar src={avatarImg} alt="avatar" />;
-```
-
-### Size variations
-
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
-
-<React.Fragment>
-  Small
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="sm" />
-  <br />
-  Medium
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="md" />
-  <br />
-  Large
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="lg" />
-  <br />
-  Extra Large
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="xl" />
-</React.Fragment>;
+```ts file="./AvatarBasic.tsx"
 ```
 
-### Bordered - light
-
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
+### Bordered 
 
-<Avatar src={avatarImg} alt="avatar" border="light" />;
+```ts file="./AvatarBordered.tsx"
 ```
 
-### Bordered - dark
-
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImgDark from '../../assets/avatarImgDark.svg';
+### Size variations
 
-<Avatar src={avatarImgDark} alt="avatar" border="dark" />;
+```ts file="./AvatarSizeVariations.tsx"
 ```

package/src/components/Avatar/examples/AvatarBasic.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Avatar } from '@patternfly/react-core';
+import avatarImg from '../../assets/avatarImg.svg';
+
+<Avatar src={avatarImg} alt="avatar" />;

package/src/components/Avatar/examples/AvatarBordered.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Avatar } from '@patternfly/react-core';
+import avatarImg from '../../assets/avatarImg.svg';
+
+<Avatar src={avatarImg} alt="avatar" isBordered />;

package/src/components/Avatar/examples/AvatarSizeVariations.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Avatar } from '@patternfly/react-core';
+import avatarImg from '../../assets/avatarImg.svg';
+
+<React.Fragment>
+  Small
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="sm" />
+  <br />
+  Medium
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="md" />
+  <br />
+  Large
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="lg" />
+  <br />
+  Extra Large
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="xl" />
+</React.Fragment>;

package/src/components/BackgroundImage/examples/BackgroundImageBasic.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { BackgroundImage } from '@patternfly/react-core';
 
 export const BackgroundImageBasic: React.FunctionComponent = () => (
-  <BackgroundImage src="/assets/images/pfbg-icon.svg" />
+  <BackgroundImage src="/assets/images/pf-background.svg" />
 );

package/src/components/Badge/Badge.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Badge/badge';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
   /** Text announced by screen readers to indicate the current content/status of the badge. */
   screenReaderText?: string;
   /**  Adds styling to the badge to indicate it has been read */
   isRead?: boolean;
+  /**  Adds styling to the badge to indicate it has a toggle. A badge with a toggle must be passed to a MenuToggle component. */
+  isToggle?: boolean;
   /** content rendered inside the Badge */
   children?: React.ReactNode;
   /** additional classes added to the Badge */
@@ -15,6 +18,7 @@ export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
 
 export const Badge: React.FunctionComponent<BadgeProps> = ({
   isRead = false,
+  isToggle = false,
   className = '',
   children = '',
   screenReaderText,
@@ -26,6 +30,11 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
   >
     {children}
     {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
+    {isToggle && (
+      <span className={css(styles.badgeToggleIcon)}>
+        <CaretDownIcon />
+      </span>
+    )}
   </span>
 );
 Badge.displayName = 'Badge';

package/src/components/Badge/__tests__/Badge.test.tsx

@@ -32,6 +32,15 @@ test('Renders with class name pf-m-read when isRead prop is true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-read');
 });
 
+test('Renders with toggle styles and icon when isToggle prop is true', () => {
+  render(
+    <Badge isRead={true} isToggle={true}>
+      Test
+    </Badge>
+  );
+  expect(screen.getByText('Test').lastChild).toHaveClass(styles.badgeToggleIcon);
+});
+
 test('Does not render pf-v5-screen-reader class by default', () => {
   render(<Badge>Test</Badge>);
   expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');

package/src/components/Badge/examples/Badge.css

@@ -0,0 +1,6 @@
+#ws-react-c-badge-read .pf-v5-c-badge,
+#ws-react-c-badge-unread .pf-v5-c-badge,
+#ws-react-c-badge-badge-as-toggle .pf-v5-c-badge {
+    margin-inline-end: var(--pf-t--global--spacer--xs); 
+    margin-block-end: var(--pf-t--global--spacer--xs); 
+}

package/src/components/Badge/examples/Badge.md

@@ -5,6 +5,8 @@ cssPrefix: pf-v5-c-badge
 propComponents: ['Badge']
 ---
 
+import './Badge.css';
+
 ## Examples
 
 ### Read
@@ -16,3 +18,8 @@ propComponents: ['Badge']
 
 ```ts file="./BadgeUnread.tsx"
 ```
+
+### Badge as toggle
+
+```ts file="./BadgeToggle.tsx"
+```

package/src/components/Badge/examples/BadgeRead.tsx

@@ -5,13 +5,13 @@ export const BadgeRead: React.FunctionComponent = () => (
   <React.Fragment>
     <Badge key={1} isRead>
       7
-    </Badge>{' '}
+    </Badge>
     <Badge key={2} isRead>
       24
-    </Badge>{' '}
+    </Badge>
     <Badge key={3} isRead>
       240
-    </Badge>{' '}
+    </Badge>
     <Badge key={4} isRead>
       999+
     </Badge>

package/src/components/Badge/examples/BadgeToggle.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Badge } from '@patternfly/react-core';
+
+export const BadgeToggle: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Badge key={1} screenReaderText="Unread Messages" isToggle>
+      7
+    </Badge>
+    <Badge key={2} screenReaderText="Read Messages" isRead isToggle>
+      7
+    </Badge>
+  </React.Fragment>
+);

package/src/components/Banner/Banner.tsx

@@ -2,6 +2,10 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Banner/banner';
 import { css } from '@patternfly/react-styles';
 
+export type BannerColor = 'red' | 'orangered' | 'orange' | 'gold' | 'green' | 'cyan' | 'blue' | 'purple';
+
+export type BannerStatus = 'success' | 'warning' | 'danger' | 'info' | 'custom';
+
 export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the banner. */
   children?: React.ReactNode;
@@ -13,29 +17,48 @@ export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
    * be passed in when the banner conveys status/severity.
    */
   screenReaderText?: string;
-  /** Variant styles for the banner. */
-  variant?: 'default' | 'blue' | 'red' | 'green' | 'gold';
+  /** Color options for the banner, will be overwritten by any applied using the status prop. */
+  color?: BannerColor;
+  /** Status style options for the banner, will overwrite any color applied using the color prop. */
+  status?: BannerStatus;
+}
+interface StatusBanner extends BannerProps {
+  color?: never;
+  status?: BannerStatus;
 }
 
-export const Banner: React.FunctionComponent<BannerProps> = ({
+interface NonStatusBanner extends BannerProps {
+  color?: BannerColor;
+  status?: never;
+}
+
+export const Banner: React.FunctionComponent<StatusBanner | NonStatusBanner> = ({
   children,
   className,
-  variant = 'default',
   screenReaderText,
   isSticky = false,
+  color,
+  status,
   ...props
-}: BannerProps) => (
-  <div
-    className={css(
-      styles.banner,
-      styles.modifiers[variant as 'green' | 'red' | 'gold' | 'blue'],
-      isSticky && styles.modifiers.sticky,
-      className
-    )}
-    {...props}
-  >
-    {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
-    {children}
-  </div>
-);
+}: BannerProps) => {
+  const getStatusOrColorModifier = () => {
+    if (status) {
+      return styles.modifiers[status];
+    }
+
+    if (color) {
+      return styles.modifiers[color];
+    }
+  };
+
+  return (
+    <div
+      className={css(styles.banner, getStatusOrColorModifier(), isSticky && styles.modifiers.sticky, className)}
+      {...props}
+    >
+      {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
+      {children}
+    </div>
+  );
+};
 Banner.displayName = 'Banner';

package/src/components/Banner/__tests__/Banner.test.tsx

@@ -27,31 +27,76 @@ test('Renders with custom class name when className prop is provided', () => {
   expect(screen.getByText('Test')).toHaveClass('custom-class');
 });
 
-test('Renders without any modifier class when variant prop is not passed', () => {
+test('Renders without any modifier class when color and status props are not passed', () => {
   render(<Banner>Test</Banner>);
   expect(screen.getByText('Test')).toHaveClass(styles.banner, { exact: true });
 });
 
-test('Renders with class name pf-m-green when "green" is passed to variant prop', () => {
-  render(<Banner variant="green">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-green');
+test('Renders with class name pf-m-red when "red" is passed to color prop', () => {
+  render(<Banner color="red">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-red');
 });
 
-test('Renders with class name pf-m-red when "red" is passed to variant prop', () => {
-  render(<Banner variant="red">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-red');
+test('Renders with class name pf-m-orangered when "orangered" is passed to color prop', () => {
+  render(<Banner color="orangered">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-orangered');
 });
 
-test('Renders with class name pf-m-gold when "gold" is passed to variant prop', () => {
-  render(<Banner variant="gold">Test</Banner>);
+test('Renders with class name pf-m-orange when "orange" is passed to color prop', () => {
+  render(<Banner color="orange">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-orange');
+});
+
+test('Renders with class name pf-m-gold when "gold" is passed to color prop', () => {
+  render(<Banner color="gold">Test</Banner>);
   expect(screen.getByText('Test')).toHaveClass('pf-m-gold');
 });
 
-test('Renders with class name pf-m-blue when "blue" is passed to variant prop', () => {
-  render(<Banner variant="blue">Test</Banner>);
+test('Renders with class name pf-m-green when "green" is passed to color prop', () => {
+  render(<Banner color="green">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-green');
+});
+
+test('Renders with class name pf-m-cyan when "cyan" is passed to color prop', () => {
+  render(<Banner color="cyan">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-cyan');
+});
+
+test('Renders with class name pf-m-blue when "blue" is passed to color prop', () => {
+  render(<Banner color="blue">Test</Banner>);
   expect(screen.getByText('Test')).toHaveClass('pf-m-blue');
 });
 
+test('Renders with class name pf-m-purple when "purple" is passed to color prop', () => {
+  render(<Banner color="purple">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-purple');
+});
+
+test('Renders with class name pf-m-success when "success" is passed to status prop', () => {
+  render(<Banner status="success">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-success');
+});
+
+test('Renders with class name pf-m-warning when "warning" is passed to status prop', () => {
+  render(<Banner status="warning">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-warning');
+});
+
+test('Renders with class name pf-m-danger when "danger" is passed to status prop', () => {
+  render(<Banner status="danger">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-danger');
+});
+
+test('Renders with class name pf-m-info when "info" is passed to status prop', () => {
+  render(<Banner status="info">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-info');
+});
+
+test('Renders with class name pf-m-custom when "custom" is passed to status prop', () => {
+  render(<Banner status="custom">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-custom');
+});
+
 test('Does not render pf-v5-screen-reader class by default', () => {
   render(<Banner>Test</Banner>);
   expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');