feat(Banner): add support for custom icons when variant="upsell" (#4838)

* Update Banner.tsx * feat(Banner): add support for custom icons when variant="upsell" * chore: add changeset * test(Banner): update test for info and upsell custom icons --------- Co-authored-by: Josh Black <[email protected]>
primer · Aug 13, 2024 · 7a3b55d · 7a3b55d
1 parent 529e1a3
commit 7a3b55d
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 9 deletions.
diff --git a/.changeset/twelve-tables-leave.md b/.changeset/twelve-tables-leave.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add support for custom icons when a Banner is variant="upsell"
diff --git a/packages/react/src/Banner/Banner.docs.json b/packages/react/src/Banner/Banner.docs.json
@@ -18,13 +18,13 @@
     },
     {
       "name": "hideTitle",
-       "type": "boolean",
+      "type": "boolean",
       "description": "Whether to hide the title visually."
     },
     {
       "name": "icon",
       "type": "React.ReactNode",
-      "description": "Provide an icon for the banner"
+      "description": "Provide a custom icon for the Banner. This is only available when `variant` is `info` or `upsell`"
     },
     {
       "name": "onDismiss",

diff --git a/packages/react/src/Banner/Banner.features.stories.tsx b/packages/react/src/Banner/Banner.features.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import {CopilotIcon} from '@primer/octicons-react'
 import {action} from '@storybook/addon-actions'
 import type {Meta} from '@storybook/react'
 import {Banner} from '../Banner'
@@ -202,3 +203,15 @@ export const WithActions = () => {
     />
   )
 }
+
+export const CustomIcon = () => {
+  return (
+    <Banner
+      title="Upsell"
+      description="An example banner with a custom icon"
+      icon={<CopilotIcon />}
+      onDismiss={action('onDismiss')}
+      variant="upsell"
+    />
+  )
+}
diff --git a/packages/react/src/Banner/Banner.test.tsx b/packages/react/src/Banner/Banner.test.tsx
@@ -160,22 +160,22 @@ describe('Banner', () => {
     expect(container.firstChild).toHaveAttribute('data-testid', 'test')
   })
 
-  it('should support a custom icon only for info variants', () => {
+  it('should support a custom icon for info and upsell variants', () => {
     const CustomIcon = jest.fn(() => <svg data-testid="icon" aria-hidden="true" />)
     const {rerender} = render(
       <Banner title="test" description="test-description" variant="info" icon={<CustomIcon />} />,
     )
     expect(screen.getByTestId('icon')).toBeInTheDocument()
 
+    rerender(<Banner title="test" description="test-description" variant="upsell" icon={<CustomIcon />} />)
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+
     rerender(<Banner title="test" description="test-description" variant="critical" icon={<CustomIcon />} />)
     expect(screen.queryByTestId('icon')).toBe(null)
 
     rerender(<Banner title="test" description="test-description" variant="success" icon={<CustomIcon />} />)
     expect(screen.queryByTestId('icon')).toBe(null)
 
-    rerender(<Banner title="test" description="test-description" variant="upsell" icon={<CustomIcon />} />)
-    expect(screen.queryByTestId('icon')).toBe(null)
-
     rerender(<Banner title="test" description="test-description" variant="warning" icon={<CustomIcon />} />)
     expect(screen.queryByTestId('icon')).toBe(null)
   })

diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
@@ -28,8 +28,7 @@ export type BannerProps = React.ComponentPropsWithoutRef<'section'> & {
   hideTitle?: boolean
 
   /**
-   * Provide an icon for the banner.
-   * Note: Only `variant="info"` banners should use custom icons
+   * Provide a custom icon for the Banner. This is only available when `variant` is `info` or `upsell`
    */
   icon?: React.ReactNode
 
@@ -99,6 +98,7 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
   const hasActions = primaryAction || secondaryAction
   const bannerRef = React.useRef<HTMLElement>(null)
   const ref = useMergedRefs(forwardRef, bannerRef)
+  const supportsCustomIcon = variant === 'info' || variant === 'upsell'
 
   if (__DEV__) {
     // This hook is called consistently depending on the environment
@@ -134,7 +134,7 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
       ref={ref}
     >
       <style>{BannerContainerQuery}</style>
-      <div className="BannerIcon">{icon && variant === 'info' ? icon : iconForVariant[variant]}</div>
+      <div className="BannerIcon">{icon && supportsCustomIcon ? icon : iconForVariant[variant]}</div>
       <div className="BannerContainer">
         <div className="BannerContent">
           {title ? (