Banner: Allow Banner.Title to be set as <p>

.changeset/tidy-banners-title-element.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Banner: Add support for rendering `Banner.Title` as a paragraph.

packages/react/src/Banner/Banner.docs.json

@@ -131,7 +131,8 @@
       "props": [
         {
           "name": "as",
-          "type": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'"
+          "type": "'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'",
+          "defaultValue": "'h2'"
         }
       ]
     },

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

@@ -319,7 +319,7 @@ describe('Banner', () => {
       expect(screen.getByRole('heading', {level: 2, name: 'test'})).toBeInTheDocument()
     })
 
-    it('should support rendering as any heading element above level 2', () => {
+    it('should support rendering as any supported heading element', () => {
       const levels = [2, 3, 4, 5, 6] as const
 
       render(
@@ -347,6 +347,15 @@ describe('Banner', () => {
       }
     })
 
+    it('should support rendering as a paragraph element', () => {
+      render(
+        <Banner>
+          <Banner.Title as="p">test paragraph</Banner.Title>
+        </Banner>,
+      )
+      expect(screen.getByText('test paragraph')).toHaveRole('paragraph')
+    })
+
     it('should support a custom `className` on the container element', () => {
       render(
         <Banner>

packages/react/src/Banner/Banner.tsx

@@ -202,28 +202,28 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
   )
 })
 
-type HeadingElement = 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+type TitleElement = 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'
 
-export type BannerTitleProps<As extends HeadingElement> = {
+export type BannerTitleProps<As extends TitleElement = 'h2'> = {
   as?: As
   className?: string
-} & React.ComponentPropsWithoutRef<As extends 'h2' ? 'h2' : As>
+} & React.ComponentPropsWithoutRef<As>
 
-export function BannerTitle<As extends HeadingElement>(props: BannerTitleProps<As>) {
-  const {as: Heading = 'h2', className, children, id, ...rest} = props
+export function BannerTitle<As extends TitleElement = 'h2'>(props: BannerTitleProps<As>) {
+  const {as: Element = 'h2', className, children, id, ...rest} = props
   const context = React.useContext(BannerContext)
   const titleId = id ?? context?.titleId
 
   return (
-    <Heading
+    <Element
       {...rest}
       id={titleId}
       className={clsx(className, classes.BannerTitle)}
       data-component="Banner.Title"
       data-banner-title=""
     >
       {children}
-    </Heading>
+    </Element>
   )
 }