optional dismissable prop for feature banner

Author: appf-mike

src/components/FeatureBanner/FeatureBanner.spec.tsx

@@ -38,4 +38,17 @@ describe('<FeatureBanner />', () => {
 
     expect(queryByText('FeatureBannerChildElement')).not.toBeNull();
   });
-});
+
+  describe('when dismissable', () => {
+    it('can be closed', () => {
+      const { getByRole, queryByText } = render(
+        <FeatureBanner {...commonProps} dismissable />
+      );
+      const closeButton = getByRole('button');
+
+      expect(queryByText('FeatureBannerTitle')).not.toBeNull();
+      closeButton.click();
+      expect(queryByText('FeatureBannerTitle')).toBeNull();
+    });
+  });
+});

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.',
   },

src/components/FeatureBanner/FeatureBanner.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import React, { FC, ReactNode, useState } from 'react';
 import { Alert } from 'reactstrap';
 
 interface FeatureBannerProps {
@@ -7,23 +7,28 @@ interface FeatureBannerProps {
   color?: string;
   subtitle: ReactNode;
   title: string;
+  toggle?: boolean;
 }
 
 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="flex-fill me-auto">