[Nav] Flyout Responsive Menu (#935)

Mobile menu is working. Functionality matches cfpb.gov. Closes #918 --------- Co-authored-by: Meis <meissadia@gmail.com>
cfpb · Oct 29, 2024 · fe8efda · fe8efda
1 parent ce3fc42
commit fe8efda
Show file tree

Hide file tree

Showing 28 changed files with 106 additions and 127 deletions.
diff --git a/.yarn/cache/@babel-runtime-npm-7.23.8-c8503a23a8-0bd5543c26.zip b/.yarn/cache/@babel-runtime-npm-7.23.8-c8503a23a8-0bd5543c26.zip
diff --git a/.yarn/cache/@remix-run-router-npm-1.19.2-3b51b8b09c-fb2f297b39.zip b/.yarn/cache/@remix-run-router-npm-1.19.2-3b51b8b09c-fb2f297b39.zip
diff --git a/.yarn/cache/@remix-run-router-npm-1.20.0-facc350fa9-6bff41117e.zip b/.yarn/cache/@remix-run-router-npm-1.20.0-facc350fa9-6bff41117e.zip
diff --git a/.yarn/cache/@remix-run-router-npm-1.6.1-23c5c37534-4ca65d9c7d.zip b/.yarn/cache/@remix-run-router-npm-1.6.1-23c5c37534-4ca65d9c7d.zip
diff --git a/.yarn/cache/@rollup-rollup-linux-x64-gnu-npm-4.16.4-57015b6961-8.zip b/.yarn/cache/@rollup-rollup-linux-x64-gnu-npm-4.16.4-57015b6961-8.zip
diff --git a/.yarn/cache/@tanstack-query-core-npm-4.13.4-06c6632de9-5cef6289ef.zip b/.yarn/cache/@tanstack-query-core-npm-4.13.4-06c6632de9-5cef6289ef.zip
diff --git a/.yarn/cache/@tanstack-query-core-npm-4.29.7-f55047b190-f28441a1fc.zip b/.yarn/cache/@tanstack-query-core-npm-4.29.7-f55047b190-f28441a1fc.zip
diff --git a/.yarn/cache/@tanstack-query-core-npm-4.36.1-7594b7a096-47672094da.zip b/.yarn/cache/@tanstack-query-core-npm-4.36.1-7594b7a096-47672094da.zip
diff --git a/.yarn/cache/@tanstack-react-query-npm-4.13.5-d478a3e963-0e10a0aafa.zip b/.yarn/cache/@tanstack-react-query-npm-4.13.5-d478a3e963-0e10a0aafa.zip
diff --git a/.yarn/cache/@tanstack-react-query-npm-4.29.7-915f204251-9db2fb78e1.zip b/.yarn/cache/@tanstack-react-query-npm-4.29.7-915f204251-9db2fb78e1.zip
diff --git a/.yarn/cache/@tanstack-react-query-npm-4.36.1-435eddf619-1aff0a4768.zip b/.yarn/cache/@tanstack-react-query-npm-4.36.1-435eddf619-1aff0a4768.zip
diff --git a/...tem-react-https-51efcb97b6-2ef0aeb545.zip → ...tem-react-https-a633c06944-097cf362d5.zip b/...tem-react-https-51efcb97b6-2ef0aeb545.zip → ...tem-react-https-a633c06944-097cf362d5.zip
diff --git a/.yarn/cache/history-npm-5.3.0-00136b6a63-d73c35df49.zip b/.yarn/cache/history-npm-5.3.0-00136b6a63-d73c35df49.zip
diff --git a/.yarn/cache/react-router-dom-npm-6.11.1-c723cae389-44566e10cb.zip b/.yarn/cache/react-router-dom-npm-6.11.1-c723cae389-44566e10cb.zip
diff --git a/.yarn/cache/react-router-dom-npm-6.26.2-f8b4afffaf-d65507ffb9.zip b/.yarn/cache/react-router-dom-npm-6.26.2-f8b4afffaf-d65507ffb9.zip
diff --git a/.yarn/cache/react-router-dom-npm-6.27.0-de32a53fc4-de3dcc5629.zip b/.yarn/cache/react-router-dom-npm-6.27.0-de32a53fc4-de3dcc5629.zip
diff --git a/.yarn/cache/react-router-dom-npm-6.3.0-508f6547e5-77603a654f.zip b/.yarn/cache/react-router-dom-npm-6.3.0-508f6547e5-77603a654f.zip
diff --git a/.yarn/cache/react-router-npm-6.11.1-6464a80fbc-c5cafbaac1.zip b/.yarn/cache/react-router-npm-6.11.1-6464a80fbc-c5cafbaac1.zip
diff --git a/.yarn/cache/react-router-npm-6.26.2-3f4f7686d6-80ad9db316.zip b/.yarn/cache/react-router-npm-6.26.2-3f4f7686d6-80ad9db316.zip
diff --git a/.yarn/cache/react-router-npm-6.27.0-1707eacc21-d22eedc33b.zip b/.yarn/cache/react-router-npm-6.27.0-1707eacc21-d22eedc33b.zip
diff --git a/.yarn/cache/react-router-npm-6.3.0-5ffd519487-7be673f5e7.zip b/.yarn/cache/react-router-npm-6.3.0-5ffd519487-7be673f5e7.zip
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.2.0",
     "@playwright/test": "^1.45.0",
-    "@tanstack/react-query": "4.29.7",
+    "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-table": "^8.9.1",
     "axios": "^1.7.4",
     "byte-size": "^8.1.1",
@@ -52,7 +52,7 @@
     "react-keycloak-js": "^1.0.3",
     "react-markdown": "^9.0.1",
     "react-oidc-context": "^3.1.0",
-    "react-router-dom": "6.11.1",
+    "react-router-dom": "^6.11.1",
     "react-scroll": "^1.8.9",
     "react-select": "^5.7.4",
     "vite-plugin-svgr": "^3.2.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -149,7 +149,7 @@ function BasicLayout(): Promise<void> | ReactElement {
         <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='o-banner pl-[0.9375rem] pr-[0.9375rem]'>
           <div className='wrapper wrapper__match-content'>
             <Alert
               message='This is a beta for the Small Business Lending Data Filing Platform'
@@ -290,6 +290,7 @@ export default function App(): ReactElement {
                       </InstitutionProtectedRoute>
                     </ProtectedRoute>
                   }
+                  // eslint-disable-next-line react/no-array-index-key
                   key={index}
                 />
               ))}

diff --git a/src/components/RadioButtonGroup.tsx b/src/components/RadioButtonGroup.tsx
@@ -3,7 +3,7 @@ import { Label } from 'design-system-react';
 function RadioButtonGroup({
   id = 'radio-button-group',
   label = 'Radio Group',
-  onChange = undefined,
+  onChange,
   children,
 }: {
   id?: string | null | undefined;

diff --git a/src/pages/Filing/FilingApp/FilingOverviewPage.tsx b/src/pages/Filing/FilingApp/FilingOverviewPage.tsx
@@ -53,42 +53,46 @@ export default function FilingOverview(): ReactElement {
 
   return (
     <div className='mx-auto max-w-[48.125rem]'>
-      <Head title='File your small business lending data' />
-      <CrumbTrail>
-        <Link href='/landing'>Home</Link>
-      </CrumbTrail>
-      <main id='main' className='u-mt30 u-mb60'>
-        <div className='max-w-[41.875rem]'>
-          <TextIntroduction
-            heading='File your small business lending data'
-            subheading='You may use this platform to upload your small business lending application register, review the results of validation checks, certify the accuracy and completeness of the data reported, and submit your filing to the CFPB.'
-            description={
-              <Paragraph>
-                If the financial institution you are authorized to file for is
-                not listed or if you are authorized to file for additional
-                financial institutions,{' '}
-                <Links.EmailSupportStaff subject='Associated financial institutions' />
-                . For detailed filing specifications, reference the{' '}
-                <Link href='https://www.consumerfinance.gov/data-research/small-business-lending/filing-instructions-guide/2024-guide/'>
-                  filing instructions guide for small business lending data
-                </Link>
-                .
-              </Paragraph>
-            }
-          />
-        </div>
-        <DisplayErrors errors={!!associatedInstitutionsError} />
-        <div className='associated_institutions u-mt60'>
-          {associatedInstitutions?.map(({ lei, name }) => (
-            <InstitutionCard
-              key={lei}
-              lei={lei}
-              name={name}
-              filingPeriod={defaultFilingPeriod}
+      <div className=' ml-[0.9375rem] mr-[0.9375rem]'>
+        <Head title='File your small business lending data' />
+        <CrumbTrail>
+          <Link isRouterLink href='/landing'>
+            Home
+          </Link>
+        </CrumbTrail>
+        <main id='main' className='u-mt30 u-mb60'>
+          <div className='max-w-[41.875rem]'>
+            <TextIntroduction
+              heading='File your small business lending data'
+              subheading='You may use this platform to upload your small business lending application register, review the results of validation checks, certify the accuracy and completeness of the data reported, and submit your filing to the CFPB.'
+              description={
+                <Paragraph>
+                  If the financial institution you are authorized to file for is
+                  not listed or if you are authorized to file for additional
+                  financial institutions,{' '}
+                  <Links.EmailSupportStaff subject='Associated financial institutions' />
+                  . For detailed filing specifications, reference the{' '}
+                  <Link href='https://www.consumerfinance.gov/data-research/small-business-lending/filing-instructions-guide/2024-guide/'>
+                    filing instructions guide for small business lending data
+                  </Link>
+                  .
+                </Paragraph>
+              }
             />
-          ))}
-        </div>
-      </main>
+          </div>
+          <DisplayErrors errors={!!associatedInstitutionsError} />
+          <div className='associated_institutions u-mt60'>
+            {associatedInstitutions?.map(({ lei, name }) => (
+              <InstitutionCard
+                key={lei}
+                lei={lei}
+                name={name}
+                filingPeriod={defaultFilingPeriod}
+              />
+            ))}
+          </div>
+        </main>
+      </div>
     </div>
   );
 }
diff --git a/src/pages/Filing/ViewUserProfile/index.tsx b/src/pages/Filing/ViewUserProfile/index.tsx
@@ -52,7 +52,10 @@ export default function ViewUserProfile(): JSX.Element | null {
     <Grid.Wrapper center>
       <Grid.Row>
         <Grid.Column width={8}>
-          <main id='main' className='mb-[2.813rem] mt-[1.875rem]'>
+          <main
+            id='main'
+            className='mb-[2.813rem] ml-[0.9375rem] mr-[0.9375rem] mt-[1.875rem]'
+          >
             <CrumbTrail>
               <Link href='/landing' key='home'>
                 Home

diff --git a/src/utils/useHeaderAuthLinks.tsx b/src/utils/useHeaderAuthLinks.tsx
@@ -27,8 +27,16 @@ export const useHeaderAuthLinks = (): ReactElement[] => {
       <NavLink key='filing' className='nav-item a-link' to='/filing'>
         Filing
       </NavLink>,
-      <NavLink key='user-name' className='nav-item a-link' to='/profile/view'>
-        {auth.user?.profile.name ?? auth.user?.profile.email ?? 'User profile'}
+      <NavLink
+        key='user-name'
+        className='nav-item a-link profile'
+        to='/profile/view'
+      >
+        <span>
+          {auth.user?.profile.name ??
+            auth.user?.profile.email ??
+            'User profile'}
+        </span>
       </NavLink>,
       <Button label='LOG OUT' asLink onClick={onLogout} />,
     );

diff --git a/yarn.lock b/yarn.lock
@@ -1420,15 +1420,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.7.6":
-  version: 7.23.8
-  resolution: "@babel/runtime@npm:7.23.8"
-  dependencies:
-    regenerator-runtime: ^0.14.0
-  checksum: 0bd5543c26811153822a9f382fd39886f66825ff2a397a19008011376533747cd05c33a91f6248c0b8b0edf0448d7c167ebfba34786088f1b7eb11c65be7dfc3
-  languageName: node
-  linkType: hard
-
 "@babel/template@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/template@npm:7.22.15"
@@ -2663,10 +2654,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.6.1":
-  version: 1.6.1
-  resolution: "@remix-run/router@npm:1.6.1"
-  checksum: 4ca65d9c7d6fa277227ad8fd4ef53bebab99460b714d835b609c998f9a7e7c33a964ce2b8af853b50025a60d9113968f256abc5f71f451939ff14a5187d327fe
+"@remix-run/router@npm:1.19.2":
+  version: 1.19.2
+  resolution: "@remix-run/router@npm:1.19.2"
+  checksum: fb2f297b392c75b34c73981e1ef3ce31edd88448bc4ffc2fbc3386e705470d7537ca89e901ec57c07f3cca3a771151f58f7ed6bfcb3e8ef929596637984f068b
+  languageName: node
+  linkType: hard
+
+"@remix-run/router@npm:1.20.0":
+  version: 1.20.0
+  resolution: "@remix-run/router@npm:1.20.0"
+  checksum: 6bff41117eabb867b17c89baa727580f0a431368b309cd9a1f69767aafa68ea9cac95ff0eeb86d37c2c8655f5cd7c6283d37ae5e6d93e94f648c6112ddb24ede
   languageName: node
   linkType: hard
 
@@ -3060,25 +3058,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/query-core@npm:4.13.4":
-  version: 4.13.4
-  resolution: "@tanstack/query-core@npm:4.13.4"
-  checksum: 5cef6289ef815bd87f100408f413170fde0d2a1ebce84d51cf7551f023bf2ec91b90c98d14bfd4ac9436cc879792c61266ec97b63300d02f943964dc1743a84d
+"@tanstack/query-core@npm:4.36.1":
+  version: 4.36.1
+  resolution: "@tanstack/query-core@npm:4.36.1"
+  checksum: 47672094da20d89402d9fe03bb7b0462be73a76ff9ca715169738bc600a719d064d106d083a8eedae22a2c22de22f87d5eb5d31ef447aba771d9190f2117ed10
   languageName: node
   linkType: hard
 
-"@tanstack/query-core@npm:4.29.7":
-  version: 4.29.7
-  resolution: "@tanstack/query-core@npm:4.29.7"
-  checksum: f28441a1fc17881d770ebacbe3a2fcf58bd065ac0cf58f8dc544d367f00d7f65213e09a1a1280e021eef25a50b307cac6884173b5acf32570e755baf29b741aa
-  languageName: node
-  linkType: hard
-
-"@tanstack/react-query@npm:4.13.5":
-  version: 4.13.5
-  resolution: "@tanstack/react-query@npm:4.13.5"
+"@tanstack/react-query@npm:^4.13.5, @tanstack/react-query@npm:^4.29.7":
+  version: 4.36.1
+  resolution: "@tanstack/react-query@npm:4.36.1"
   dependencies:
-    "@tanstack/query-core": 4.13.4
+    "@tanstack/query-core": 4.36.1
     use-sync-external-store: ^1.2.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -3089,26 +3080,7 @@ __metadata:
       optional: true
     react-native:
       optional: true
-  checksum: 0e10a0aafa8f1d2810b6359a315f83a074f376b4359c4b5f4b3e378c87ea4832efecfc385aca692cd66fa3db91c840b27e51ed3a1987f2c37440380496aa2e29
-  languageName: node
-  linkType: hard
-
-"@tanstack/react-query@npm:4.29.7":
-  version: 4.29.7
-  resolution: "@tanstack/react-query@npm:4.29.7"
-  dependencies:
-    "@tanstack/query-core": 4.29.7
-    use-sync-external-store: ^1.2.0
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-native: "*"
-  peerDependenciesMeta:
-    react-dom:
-      optional: true
-    react-native:
-      optional: true
-  checksum: 9db2fb78e18f299c0e58f3c177261f6010fdea63a5f950e4c93a7cf7a46da019aa3171c77759fa7b327e35763e3379f0a885c71dafd9aa99bf2ddda9f264de90
+  checksum: 1aff0a476859386f8d32253fa0d0bde7b81769a6d4d4d9cbd78778f0f955459a3bdb7ee27a0d2ee7373090f12998b45df80db0b5b313bd0a7a39d36c6e8e51c5
   languageName: node
   linkType: hard
 
@@ -4759,7 +4731,7 @@ __metadata:
     "@playwright/test": ^1.45.0
     "@s3pweb/keycloak-admin-client-cjs": ^22.0.1
     "@tailwindcss/forms": 0.5.3
-    "@tanstack/react-query": 4.29.7
+    "@tanstack/react-query": ^4.29.7
     "@tanstack/react-table": ^8.9.1
     "@testing-library/dom": 8.20.0
     "@testing-library/jest-dom": 5.16.5
@@ -4827,7 +4799,7 @@ __metadata:
     react-keycloak-js: ^1.0.3
     react-markdown: ^9.0.1
     react-oidc-context: ^3.1.0
-    react-router-dom: 6.11.1
+    react-router-dom: ^6.11.1
     react-scroll: ^1.8.9
     react-select: ^5.7.4
     start-server-and-test: ^2.0.3
@@ -5700,20 +5672,20 @@ __metadata:
 
 "design-system-react@https://github.com/cfpb/design-system-react":
   version: 0.0.0
-  resolution: "design-system-react@https://github.com/cfpb/design-system-react.git#commit=e3362110c994ac9ca8d53461f706393dd4c6ed10"
+  resolution: "design-system-react@https://github.com/cfpb/design-system-react.git#commit=d97478347c925f5f7ffb407c6f34b5760304cb3e"
   dependencies:
     "@cfpb/cfpb-design-system": ^0.35.0
     "@cfpb/cfpb-expandables": ^0.35.0
     "@cfpb/cfpb-forms": ^0.35.0
     "@cfpb/cfpb-icons": ^1.2.0
-    "@tanstack/react-query": 4.13.5
+    "@tanstack/react-query": ^4.13.5
     classnames: ^2.3.2
     display-element-css: cfpb/storybook-addon-display-element-css
     react: 18.2.0
     react-dom: 18.2.0
-    react-router-dom: 6.3.0
+    react-router-dom: ^6.3.0
     react-select: ^5.7.2
-  checksum: 2ef0aeb545347c4fedc0d23bbb10cb76f27fe480804e55e58fe2eb05ac6bc77538d8e41f8b56abd1b7bbc7dc75853d6013be8612cab5f64322fa3865ba87849c
+  checksum: 097cf362d5330a30470ea1911522c3e0924c38d7593120707077be954ec84ced99ef881fb7ce30b2a3d89fe179761f2d12a5d613d5eb2e8547f61c98f5b5e88f
   languageName: node
   linkType: hard
 
@@ -7622,15 +7594,6 @@ display-element-css@cfpb/storybook-addon-display-element-css:
   languageName: node
   linkType: hard
 
-"history@npm:^5.2.0":
-  version: 5.3.0
-  resolution: "history@npm:5.3.0"
-  dependencies:
-    "@babel/runtime": ^7.7.6
-  checksum: d73c35df49d19ac172f9547d30a21a26793e83f16a78386d99583b5bf1429cc980799fcf1827eb215d31816a6600684fba9686ce78104e23bd89ec239e7c726f
-  languageName: node
-  linkType: hard
-
 "hoist-non-react-statics@npm:^3.3.1":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
@@ -11329,51 +11292,51 @@ display-element-css@cfpb/storybook-addon-display-element-css:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:6.11.1":
-  version: 6.11.1
-  resolution: "react-router-dom@npm:6.11.1"
+"react-router-dom@npm:^6.11.1":
+  version: 6.26.2
+  resolution: "react-router-dom@npm:6.26.2"
   dependencies:
-    "@remix-run/router": 1.6.1
-    react-router: 6.11.1
+    "@remix-run/router": 1.19.2
+    react-router: 6.26.2
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: 44566e10cb1ff475c73be47425dba66e8e834e695e80c572c63ca82543ad03d41f4a1d8e974bf998143150f497792f74ba99714b1219df1c923c62a3b67f187b
+  checksum: d65507ffb920e03212bf32d294eb608df7f6cb85c26ec24f88e8f2a2718ffedeccfe0a8e1bc8d23561d6d796f8af61a8bed4a9a0541fbfd83096ecc93eaad5c7
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:6.3.0":
-  version: 6.3.0
-  resolution: "react-router-dom@npm:6.3.0"
+"react-router-dom@npm:^6.3.0":
+  version: 6.27.0
+  resolution: "react-router-dom@npm:6.27.0"
   dependencies:
-    history: ^5.2.0
-    react-router: 6.3.0
+    "@remix-run/router": 1.20.0
+    react-router: 6.27.0
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: 77603a654f8a8dc7f65535a2e5917a65f8d9ffcb06546d28dd297e52adcc4b8a84377e0115f48dca330b080af2da3e78f29d590c89307094d36927d2b1751ec3
+  checksum: de3dcc56297a2879a0e3997fa34ba0f3e1b9986a2ad3ef7991f913902ecf38da0282c98f7834f344ce2d881dbab0a382201a57e9f9ef5e9816febdb26dc038b7
   languageName: node
   linkType: hard
 
-"react-router@npm:6.11.1":
-  version: 6.11.1
-  resolution: "react-router@npm:6.11.1"
+"react-router@npm:6.26.2":
+  version: 6.26.2
+  resolution: "react-router@npm:6.26.2"
   dependencies:
-    "@remix-run/router": 1.6.1
+    "@remix-run/router": 1.19.2
   peerDependencies:
     react: ">=16.8"
-  checksum: c5cafbaac13564d0e325f84ce6e4cbc42de5c381b0f619209f3b101d2b6eae4a8f9ee87b492875e869909dd9bb549d05d2f677085708f79622b872bd45d14bbb
+  checksum: 80ad9db316ad11761b7d5de0c9ed61f3e4345d8984929db802d37d9a6a2174b42a952b0b01ba45833b00f8cd7b5755f198d2f0a8a62a486ebbfbacabbe379be5
   languageName: node
   linkType: hard
 
-"react-router@npm:6.3.0":
-  version: 6.3.0
-  resolution: "react-router@npm:6.3.0"
+"react-router@npm:6.27.0":
+  version: 6.27.0
+  resolution: "react-router@npm:6.27.0"
   dependencies:
-    history: ^5.2.0
+    "@remix-run/router": 1.20.0
   peerDependencies:
     react: ">=16.8"
-  checksum: 7be673f5e72104be01e6ab274516bdb932efd93305243170690f6560e3bd1035dd1df3d3c9ce1e0f452638a2529f43a1e77dcf0934fc8031c4783da657be13ca
+  checksum: d22eedc33bcb11891b431655f90eed2d52c2fb3165ad11ca625f62970caf59c4859e6b1a3f92e78902b31ff1a8b2482ebf97ddebb82e9687d1f98730c14e04e6
   languageName: node
   linkType: hard