Banner allows critical variant to use ondismiss (#5583)

* Allow critical on dismiss, ready to test

* add changeset

* Update .changeset/blue-actors-rule.md

Co-authored-by: Josh Black <joshblack@github.com>

* Remove onDismiss action from Banner story

* refactor(test): update to address eslint warnings

---------

Co-authored-by: Josh Black <joshblack@github.com>

.changeset/blue-actors-rule.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Banner now supports onDismiss used when using variant critical.

packages/react/src/Banner/Banner.test.tsx

@@ -169,11 +169,14 @@ describe('Banner', () => {
     expect(onDismiss).toHaveBeenCalledTimes(3)
   })
 
-  it('should not support onDismiss when `variant="critical"`', () => {
-    const onDismiss = jest.fn()
-    render(<Banner title="test" description="test-description" onDismiss={onDismiss} variant="critical" />)
-    expect(screen.queryByRole('button', {name: 'Dismiss banner'})).toBe(null)
-  })
+  it.each(['critical', 'info', 'success', 'upsell', 'warning'] as const)(
+    'should support onDismiss for the %s variant',
+    variant => {
+      const onDismiss = jest.fn()
+      render(<Banner title="test" description="test-description" onDismiss={onDismiss} variant={variant} />)
+      expect(screen.queryByRole('button', {name: 'Dismiss banner'})).toBeInTheDocument()
+    },
+  )
 
   it('should pass extra props onto the container element', () => {
     const {container} = render(<Banner title="test" data-testid="test" />)

packages/react/src/Banner/Banner.tsx

@@ -7,7 +7,7 @@ import {useMergedRefs} from '../internal/hooks/useMergedRefs'
 import classes from './Banner.module.css'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
-type BannerVariant = 'critical' | 'info' | 'success' | 'upsell' | 'warning'
+export type BannerVariant = 'critical' | 'info' | 'success' | 'upsell' | 'warning'
 
 export type BannerProps = React.ComponentPropsWithoutRef<'section'> & {
   /**
@@ -41,8 +41,6 @@ export type BannerProps = React.ComponentPropsWithoutRef<'section'> & {
   /**
    * Optionally provide a handler to be called when the banner is dismissed.
    * Providing this prop will show a dismiss button.
-   *
-   * Note: This is not available for critical banners.
    */
   onDismiss?: () => void
 
@@ -101,7 +99,7 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
   },
   forwardRef,
 ) {
-  const dismissible = variant !== 'critical' && onDismiss
+  const dismissible = !!onDismiss
   const hasActions = primaryAction || secondaryAction
   const bannerRef = React.useRef<HTMLElement>(null)
   const ref = useMergedRefs(forwardRef, bannerRef)