feat(home): add beta banner, beta/legal alert (#560)

Adds the beta and legal alert to the unauthenticated home page.

Closes #559

## Changes

- adds a beta banner to all pages
- adds a beta/legal alert to the unauthenticated home page

## How to test this PR

1. Take a peek at the preview site
2. See if the banner and alert look like the designs
3. Test out the links in the alert
4. Make sure the banner appears correct on other pages in the app

## Design questions
- what should the subject line be for the `email our support staff` link
in the Alert box on the unauthenticated home page? I set it to `[BETA]
Home page: Questions or suggestions` for now @natalia-fitzgerald

## Screenshots
<img width="1884" alt="Screenshot 2024-05-21 at 11 32 50 PM"
src="https://github.com/cfpb/sbl-frontend/assets/19983248/5feffa85-e8ae-41fa-831a-57c776c0217d">



## Notes

- Future post-mvp related PRs
  - cfpb/design-system-react#352
  - cfpb/design-system-react#351

src/App.tsx

@@ -8,7 +8,7 @@ import FooterCfGovWrapper from 'components/FooterCfGovWrapper';
 import { Link } from 'components/Link';
 import { LoadingApp, LoadingContent } from 'components/Loading';
 import ScrollToTop from 'components/ScrollToTop';
-import { PageHeader, SkipNav } from 'design-system-react';
+import { Alert, PageHeader, SkipNav } from 'design-system-react';
 import 'design-system-react/style.css';
 import Error500 from 'pages/Error/Error500';
 import { NotFound404 } from 'pages/Error/NotFound404';
@@ -113,6 +113,16 @@ function BasicLayout(): ReactElement {
     <div className='flex flex-col bg-white'>
       <div>
         <SkipNav />
+        {/* TODO: Move this component to the DSR for other teams' use */}
+        {/* See: https://github.com/cfpb/design-system-react/issues/352 */}
+        <div className='o-banner'>
+          <div className='wrapper wrapper__match-content'>
+            <Alert
+              message='This is a beta for the small business lending data submission platform'
+              status='warning'
+            />
+          </div>
+        </div>
         <PageHeader links={headerLinks} />
         <Outlet />
       </div>

src/components/BetaAndLegalNotice.tsx

@@ -0,0 +1,39 @@
+import { Alert, Heading, Paragraph, Link } from 'design-system-react';
+
+export default function BetaAndLegalNotice(): ReactElement {
+  return (
+    <Alert
+      className='mb-[2.813rem]'
+      message={
+        <>
+          <Heading type='2' className='h4 mb-[0.313rem]'>
+            This is a beta for the small business lending data submission
+            platform
+          </Heading>
+          <Paragraph>
+            Thank you for participating. The data submission platform is
+            available to upload, test, and validate data. All uploaded data is
+            for testing purposes only and may be removed at any time. For
+            questions or feedback,{' '}
+            <Link href='mailto:[email protected]?subject=[BETA] Home page: Questions or suggestions'>
+              email our support staff
+            </Link>
+            .
+          </Paragraph>
+          <Paragraph>
+            In light of court orders in ongoing litigation, the CFPB plans to
+            issue an interim final rule to extend the compliance dates of the
+            small business lending rule.{' '}
+            <Link href='https://www.consumerfinance.gov/1071-rule/'>
+              Find out more
+            </Link>
+          </Paragraph>
+        </>
+      }
+      status='warning'
+      // TODO: allow setting to strip heading formatting in Alerts post-mvp
+      // @ts-expect-error - See issue: https://github.com/cfpb/design-system-react/issues/351
+      headingLevel={null}
+    />
+  );
+}

src/pages/AuthenticatedLanding/index.tsx

@@ -2,6 +2,7 @@ import { Divider, Hero, Layout, ListLink } from 'design-system-react';
 import './Landing.less';
 
 import AdditionalResources from 'components/AdditionalResources';
+import BetaAndLegalNotice from 'components/BetaAndLegalNotice';
 import type { ReactElement } from 'react';
 import { LoadingContent } from '../../components/Loading';
 import { useAssociatedInstitutions } from '../../utils/useAssociatedInstitutions';
@@ -32,6 +33,7 @@ function Landing(): ReactElement | null {
             <FileHMDA />
             <Divider/> 
             */}
+            <BetaAndLegalNotice />
             <FileSbl />
             <Divider />
             <ReviewInstitutions

src/pages/Filing/FilingHome.tsx

@@ -1,5 +1,6 @@
 import useSblAuth from 'api/useSblAuth';
 import AdditionalResources from 'components/AdditionalResources';
+import BetaAndLegalNotice from 'components/BetaAndLegalNotice';
 import { Link, ListLink } from 'components/Link';
 import {
   Button,
@@ -29,6 +30,7 @@ function Home(): ReactElement {
         />
         <Layout.Wrapper>
           <Layout.Content className='content_main u-mb15'>
+            <BetaAndLegalNotice />
             <div className='mb-[2.813rem]'>
               <Heading type='2'>Sign in with Login.gov</Heading>
               <Paragraph>