From a48b85a443c974e1da8518ff4027357eda79f94f Mon Sep 17 00:00:00 2001
From: Michael Kuhn <michael.kuhn@appfolio.com>
Date: Thu, 18 Dec 2025 11:27:20 -0800
Subject: [PATCH] feat: expose dismissable prop for feature banner

---
 .../FeatureBanner/FeatureBanner.spec.tsx        | 14 +++++++++++++-
 .../FeatureBanner/FeatureBanner.stories.tsx     |  1 +
 src/components/FeatureBanner/FeatureBanner.tsx  | 17 ++++++++++++++---
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/FeatureBanner/FeatureBanner.spec.tsx b/src/components/FeatureBanner/FeatureBanner.spec.tsx
index 9690fe1b9..2d749b6f2 100644
--- a/src/components/FeatureBanner/FeatureBanner.spec.tsx
+++ b/src/components/FeatureBanner/FeatureBanner.spec.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import React from 'react';
 import FeatureBanner from './FeatureBanner';
 
@@ -38,4 +38,16 @@ describe('<FeatureBanner />', () => {
 
     expect(queryByText('FeatureBannerChildElement')).not.toBeNull();
   });
+
+  describe('when dismissable', () => {
+    it('can be closed', async () => {
+      const { getByRole, queryByRole } = render(<FeatureBanner {...commonProps} dismissable />);
+      const closeButton = getByRole('button');
+      expect(queryByRole('alert')).not.toBeNull();
+      closeButton.click();
+      await waitFor(() => {
+        expect(queryByRole('alert')).toBeNull();
+      });
+    });
+  });
 });
diff --git a/src/components/FeatureBanner/FeatureBanner.stories.tsx b/src/components/FeatureBanner/FeatureBanner.stories.tsx
index 98f17b361..c87bbf938 100644
--- a/src/components/FeatureBanner/FeatureBanner.stories.tsx
+++ b/src/components/FeatureBanner/FeatureBanner.stories.tsx
@@ -26,6 +26,7 @@ export const LiveExample: Story = {
   args: {
     alertText: 'New',
     color: 'info',
+    dismissable: false,
     title: 'Company-Wide View of Text Messages',
     subtitle: 'View all text messages sent by your company from this page.',
   },
diff --git a/src/components/FeatureBanner/FeatureBanner.tsx b/src/components/FeatureBanner/FeatureBanner.tsx
index e1ea0c353..632adabaa 100644
--- a/src/components/FeatureBanner/FeatureBanner.tsx
+++ b/src/components/FeatureBanner/FeatureBanner.tsx
@@ -1,10 +1,11 @@
-import React, { FC, ReactNode } from 'react';
+import React, { FC, ReactNode, useState } from 'react';
 import { Alert } from 'reactstrap';
 
 interface FeatureBannerProps {
   alertText?: string;
   children?: ReactNode;
   color?: string;
+  dismissable?: boolean;
   subtitle: ReactNode;
   title: string;
 }
@@ -12,20 +13,30 @@ interface FeatureBannerProps {
 const defaultProps = {
   alertText: 'new',
   color: 'info',
+  dismissable: false,
 };
 
 const FeatureBanner: FC<FeatureBannerProps> = ({
   alertText = defaultProps.alertText,
   color = defaultProps.color,
+  dismissable = defaultProps.dismissable,
   title,
   subtitle,
   children,
 }) => {
   const alertStyle = 'fw-bold text-uppercase';
+  const [visible, setVisible] = useState(true);
+  const toggle = dismissable ? () => setVisible(!visible) : undefined;
   return (
-    <Alert color={color} className="align-items-center d-flex p-0" fade={false}>
+    <Alert
+      color={color}
+      className="align-items-center d-flex p-0"
+      fade={false}
+      toggle={toggle}
+      isOpen={visible}
+    >
       <h2 className={`${alertStyle} text-center m-0 px-3 d-none d-sm-block`}>{alertText}</h2>
-      <div className="d-flex flex-row flex-wrap p-3 w-100">
+      <div className={`d-flex flex-row flex-wrap p-3 w-100 ${dismissable ? 'pe-5' : ''}`}>
         <div className="flex-fill me-auto">
           <div className="d-inline-block m-0">
             <h2 className={`${alertStyle} d-inline d-sm-none me-2`}>{alertText}</h2>