[OWNER-54] Make Feature Banner Optionally Dismissable

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();
+      });
+    });
+  });
 });

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,31 +1,42 @@
-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;
 }
 
 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>