isolating 21a sub app

package.json

@@ -397,9 +397,11 @@
       "src/platform/mhv",
       "src/applications/check-in",
       "src/applications/vaos",
-      "src/applications/claims-status"
+      "src/applications/claims-status",
+      "src/applications/accredited-representative-portal/accreditation/21a"
     ],
     "nohoist": [
+      "**/applications/accredited-representative-portal/accreditation/21a/react-router",
       "**/applications-check-in/i18next-resources-to-backend",
       "**/applications-check-in/react-i18next",
       "**/applications-claims-status/@department-of-veterans-affairs/component-library",

src/applications/accredited-representative-portal/accreditation/21a/README.md

@@ -1,6 +1,2 @@
 ### 🚨WIP Status and Dependency on the `representative` Application🚨
-This sub-application is incomplete and its development has been paused. It is almost dependency-free from the `representative` application that it might eventually live under except for the following imports:
-- `Header`
-- `Footer`
-- `createReduxStore`
-- `SIGN_IN_URL`
+This sub-application is incomplete and its development has been paused. It is dependency-free from the `representative` application that it might eventually live under.

src/applications/accredited-representative-portal/accreditation/21a/app-entry.jsx

@@ -12,7 +12,7 @@ import './sass/21a.scss';
 
 import manifest from './manifest.json';
 import routes from './routes';
-import createReduxStore from '../../store';
+import createReduxStore from './store';
 import rootReducer from './reducers';
 
 window.appName = manifest.entryName;

src/applications/accredited-representative-portal/accreditation/21a/components/common/Footer/Footer.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { replaceWithStagingDomain } from '~/platform/utilities/environment/stagingDomains';
+
+const Footer = () => {
+  return (
+    <footer data-testid="arp-footer" className="footer arp-footer">
+      <div className="footer-inner">
+        <div className="usa-grid usa-grid-full footer-banner vads-u-padding-top--2">
+          <h3>Accredited Representative Portal</h3>
+          <p>
+            An official website of the{' '}
+            <a className="vads-u-color--white" href="https://va.gov">
+              U.S. Department of Veterans Affairs
+            </a>
+          </p>
+          <a href="/" title="Go to VA.gov">
+            <img
+              src={replaceWithStagingDomain(
+                'https://www.va.gov/img/homepage/va-logo-white.png',
+              )}
+              alt="VA logo and Seal, U.S. Department of Veterans Affairs"
+              width="200"
+              className="vads-u-height--auto"
+              data-testid="footer-full-logo"
+            />
+          </a>
+        </div>
+        <div
+          className="usa-grid usa-grid-full va-footer-links-bottom"
+          data-testid="footer-full-links-bottom"
+        >
+          <ul>
+            <li>
+              <a href="https://department.va.gov/about/">About VA</a>
+            </li>
+            <li>
+              <a href="https://va.gov/accessibility-at-va">Accessibility</a>
+            </li>
+            <li>
+              <a href="https://department.va.gov/foia/">
+                Freedom of Information Act (FOIA)
+              </a>
+            </li>
+            <li>
+              <a href="https://va.gov/oig/">Office of Inspector General</a>
+            </li>
+            <li>
+              <a href="https://va.gov/privacy-policy/">
+                Privacy, policies, and legal information
+              </a>
+            </li>
+            <li>
+              <a href="https://va.gov/ormdi/NOFEAR_Select.asp">
+                No FEAR Act Data
+              </a>
+            </li>
+            <li>
+              <a href="https://va.gov/performance-dashboard/">
+                VA performance dashboard
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div className="usa-grid usa-grid-full">
+          <p>
+            Looking for U.S. government information and services? Visit{' '}
+            <a className="vads-u-color--white" href="https://usa.gov">
+              USA.gov
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/applications/accredited-representative-portal/accreditation/21a/components/common/Header/Header.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import MobileHeader from './MobileHeader/MobileHeader';
+import WiderThanMobileHeader from './WiderThanMobileHeader/WiderThanMobileHeader';
+
+import './Header.scss';
+
+const Header = () => {
+  return (
+    <header data-testid="arp-header" className="header arp-header">
+      <MobileHeader />
+      <WiderThanMobileHeader />
+    </header>
+  );
+};
+
+export default Header;

src/applications/accredited-representative-portal/accreditation/21a/components/common/Header/Header.scss

@@ -0,0 +1,106 @@
+@import "~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables";
+@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/mixins";
+
+.arp-header {
+  min-height: 78px;
+
+  @media (min-width: $medium-screen) {
+    min-height: 98px;
+  }
+
+  .va-header-logo-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  .user-nav {
+    white-space: nowrap;
+
+    .loading-icon-container {
+      color: var(--vads-color-white);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-grow: 1;
+    }
+
+    .icon {
+      width: 26px;
+      height: 24px;
+    }
+
+    .user-dropdown-email {
+      margin-left: 4px;
+      display: block;
+      max-width: 120px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .mobile {
+    .header-us-flag {
+      height: 20px;
+    }
+
+    .expand-official-govt-explanation {
+      font-size: 12px;
+    }
+
+    .govt-expanded-arrow {
+      transform: rotate(180deg);
+      transform-origin: 50% 50%;
+    }
+
+    .va-crisis-line-container {
+      margin: 0px;
+    }
+
+    .arp-logo {
+      width: 320px;
+    }
+
+    .user-nav {
+      margin-left: 10px;
+
+      .user-dropdown-email {
+        max-width: 64px;
+      }
+    }
+
+    @media (min-width: $medium-screen) {
+      display: none !important;
+    }
+  }
+
+  .wider-than-mobile {
+    display: none;
+
+    @media (min-width: $medium-screen) {
+      display: block;
+
+      .arp-logo {
+        width: 480px;
+      }
+
+      .vet-toolbar {
+        display: flex;
+        justify-content: flex-end;
+        flex: 0 1 300px;
+
+        .user-nav {
+          margin-inline: 10px;
+
+          .loading-icon-container {
+            width: 88px;
+          }
+        }
+      }
+
+      .va-header-logo-menu {
+        padding-left: 10px;
+      }
+    }
+  }
+}

src/applications/accredited-representative-portal/accreditation/21a/components/common/Header/MobileHeader/MobileHeader.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import MobileOfficialGovtWebsite from './MobileOfficialGovtWebsite';
+import MobileLogoRow from './MobileLogoRow';
+
+const MobileHeader = () => {
+  return (
+    <div
+      data-testid="mobile-header"
+      className="vads-u-display--flex vads-u-flex-direction--column vads-u-margin--0 vads-u-padding--0 mobile"
+    >
+      <div className="vads-u-display--flex vads-u-flex-direction--column">
+        <MobileOfficialGovtWebsite />
+      </div>
+      <MobileLogoRow />
+    </div>
+  );
+};
+
+export default MobileHeader;

src/applications/accredited-representative-portal/accreditation/21a/components/common/Header/MobileHeader/MobileLogoRow.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import UserNav from '../common/UserNav';
+
+export const MobileLogoRow = () => {
+  return (
+    <nav className="vads-u-display--flex vads-u-flex-direction--column vads-u-margin--0 vads-u-padding--0">
+      <div className="header-logo-row vads-u-background-color--primary-darker vads-u-display--flex vads-u-align-items--center vads-u-justify-content--space-between vads-u-padding-y--1p5 vads-u-padding-left--1p5 vads-u-padding-right--1">
+        <a
+          data-testid="mobile-logo-row-logo-link"
+          aria-label="VA logo"
+          className="header-logo vads-u-display--flex vads-u-align-items--center vads-u-justify-content--center"
+          href="/representative"
+        >
+          <img
+            data-testid="mobile-logo-row-logo"
+            className="arp-logo"
+            src="/img/arp-header-logo.png"
+            alt="VA Accredited Representative Portal Logo, U.S. Department of Veterans Affairs"
+          />
+        </a>
+        <div className="vads-u-display--flex vads-u-flex-direction--row vads-u-align-items--center">
+          <div className="profile-nav-container">
+            <div className="hidden-header vads-u-display--flex vads-u-align-items--center">
+              <div className="sign-in-nav">
+                <div className="sign-in-links">
+                  <UserNav isMobile />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default MobileLogoRow;

src/applications/accredited-representative-portal/accreditation/21a/components/common/Header/MobileHeader/MobileOfficialGovtWebsite.jsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import recordEvent from '~/platform/monitoring/record-event';
+
+export const MobileOfficialGovtWebsite = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  const onToggle = () => {
+    if (expanded) {
+      recordEvent({ event: 'int-accordion-collapse' });
+    } else {
+      recordEvent({ event: 'int-accordion-expand' });
+    }
+
+    setExpanded(!expanded);
+  };
+
+  return (
+    <div className="vads-u-display--flex vads-u-flex-direction--column">
+      {/* Banner */}
+      <div className="vads-u-background-color--gray-lightest vads-u-display--flex vads-u-align-items--center vads-u-justify-content--center vads-u-text-align--center vads-u-padding--0p5">
+        <img
+          alt="U.S. flag"
+          className="header-us-flag vads-u-margin-right--1"
+          src="https://www.va.gov/img/tiny-usa-flag.png"
+        />
+        {/* eslint-disable-next-line @department-of-veterans-affairs/prefer-button-component */}
+        <button
+          data-testid="official-govt-website-toggle-mobile"
+          aria-controls="official-govt-site-explanation"
+          aria-expanded={expanded ? 'true' : 'false'}
+          className="expand-official-govt-explanation va-button-link vads-u-text-decoration--none vads-u-display--flex vads-u-align-items--center"
+          onClick={onToggle}
+          type="button"
+        >
+          An official website of the United States government.
+          <svg
+            aria-hidden="true"
+            className={`vads-u-margin-left--0p5${
+              expanded ? ' govt-expanded-arrow' : ''
+            }`}
+            focusable="false"
+            width="12"
+            viewBox="6 6 12 12"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill="#005ea2"
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z"
+            />
+          </svg>
+        </button>
+      </div>
+      {/* Expanded section */}
+      {expanded && (
+        <div
+          data-testid="official-govt-website-content-mobile"
+          aria-hidden={expanded ? 'false' : 'true'}
+          className="vads-u-background-color--gray-lightest vads-u-display--flex vads-u-flex-direction--column vads-u-padding--1p5 vads-u-padding-y--2"
+          id="official-govt-site-explanation"
+        >
+          <div className="vads-u-display--flex vads-u-flex-direction--row vads-u-align-items--flex-start">
+            <img
+              alt="Dot gov"
+              className="usa-banner-icon usa-media_block-img"
+              src="https://www.va.gov/img/icon-dot-gov.svg"
+            />
+            <p className="vads-u-margin-top--0">
+              <strong>The .gov means it’s official.</strong>
+              <br />
+              Federal government websites often end in .gov or .mil. Before
+              sharing sensitive information, make sure you’re on a federal
+              government site.
+            </p>
+          </div>
+          <div className="vads-u-display--flex vads-u-flex-direction--row vads-u-align-items--flex-start vads-u-margin-top--2">
+            <img
+              alt="SSL"
+              className="usa-banner-icon usa-media_block-img"
+              src="https://www.va.gov/img/icon-https.svg"
+            />
+            <p className="vads-u-margin-top--0">
+              <strong>The site is secure.</strong>
+              <br /> The <strong>https://</strong> ensures that you’re
+              connecting to the official website and that any information you
+              provide is encrypted and sent securely.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MobileOfficialGovtWebsite;