Merge branch 'main' into ai-prompts

MetroStar · Jul 31, 2024 · 2a654f7 · 2a654f7
2 parents 1e28c27 + d52ce7b
commit 2a654f7
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 81 deletions.
diff --git a/public/img/logo--white.svg b/public/img/logo--white.svg
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
@@ -4,7 +4,7 @@ import instagramIcon from '~uswds/dist/img/usa-icons/instagram.svg';
 import rssIcon from '~uswds/dist/img/usa-icons/rss_feed.svg';
 import twitterIcon from '~uswds/dist/img/usa-icons/twitter.svg';
 import youtubeIcon from '~uswds/dist/img/usa-icons/youtube.svg';
-import logo from '/img/logo.svg';
+import logo from '/img/logo--white.svg';
 
 export const Footer = (): React.ReactElement => {
   const scrollToTop = (event: React.MouseEvent<HTMLAnchorElement>): void => {
@@ -24,72 +24,6 @@ export const Footer = (): React.ReactElement => {
           Return to top
         </a>
       </div>
-      <div className="usa-footer__primary-section">
-        <nav className="usa-footer__nav" aria-label="Footer navigation">
-          <ul className="grid-row grid-gap">
-            <li
-              className="
-                mobile-lg:grid-col-4
-                desktop:grid-col-auto
-                usa-footer__primary-content
-              "
-            >
-              <a className="usa-footer__primary-link" href="/#">
-                &lt;Primary link&gt;
-              </a>
-            </li>
-
-            <li
-              className="
-                mobile-lg:grid-col-4
-                desktop:grid-col-auto
-                usa-footer__primary-content
-              "
-            >
-              <a className="usa-footer__primary-link" href="/#">
-                &lt;Primary link&gt;
-              </a>
-            </li>
-
-            <li
-              className="
-                mobile-lg:grid-col-4
-                desktop:grid-col-auto
-                usa-footer__primary-content
-              "
-            >
-              <a className="usa-footer__primary-link" href="/#">
-                &lt;Primary link&gt;
-              </a>
-            </li>
-
-            <li
-              className="
-                mobile-lg:grid-col-4
-                desktop:grid-col-auto
-                usa-footer__primary-content
-              "
-            >
-              <a className="usa-footer__primary-link" href="/#">
-                &lt;Primary link&gt;
-              </a>
-            </li>
-
-            <li
-              className="
-                mobile-lg:grid-col-4
-                desktop:grid-col-auto
-                usa-footer__primary-content
-              "
-            >
-              <a className="usa-footer__primary-link" href="/#">
-                &lt;Primary link&gt;
-              </a>
-            </li>
-          </ul>
-        </nav>
-      </div>
-
       <div className="usa-footer__secondary-section">
         <div className="grid-container">
           <div className="grid-row grid-gap">
@@ -162,16 +96,16 @@ export const Footer = (): React.ReactElement => {
                 </div>
               </div>
               <h2 className="usa-footer__contact-heading">
-                &lt;Agency Contact Center&gt;
+                Contact Information
               </h2>
               <address className="usa-footer__address">
                 <div className="usa-footer__contact-info grid-row grid-gap">
                   <div className="grid-col-auto">
-                    <a href="tel:1-800-555-5555"> &lt;(800) 555-GOVT&gt; </a>
+                    <a href="tel:(703) 292-5111">(703) 292-5111</a>
                   </div>
                   <div className="grid-col-auto">
                     <a href="mailto:&lt;[email protected]&gt;">
-                      &lt;[email protected]&gt;
+                      Sign up for email updates
                     </a>
                   </div>
                 </div>
@@ -180,6 +114,89 @@ export const Footer = (): React.ReactElement => {
           </div>
         </div>
       </div>
+      <div className="usa-footer__primary-section">
+        <nav className="usa-footer__nav" aria-label="Footer navigation">
+          <ul className="grid-row grid-gap">
+            <li
+              className="
+                mobile-lg:grid-col-4
+                desktop:grid-col-auto
+                usa-footer__primary-content
+              "
+            >
+              <a className="usa-footer__primary-link" href="/#">
+                Vulnerability Disclosures
+              </a>
+            </li>
+            <li
+              className="
+                mobile-lg:grid-col-4
+                desktop:grid-col-auto
+                usa-footer__primary-content
+              "
+            >
+              <a className="usa-footer__primary-link" href="/#">
+                Inspector General
+              </a>
+            </li>
+            <li
+              className="
+                mobile-lg:grid-col-4
+                desktop:grid-col-auto
+                usa-footer__primary-content
+              "
+            >
+              <a className="usa-footer__primary-link" href="/#">
+                Privacy
+              </a>
+            </li>
+            <li
+              className="
+                mobile-lg:grid-col-4
+                desktop:grid-col-auto
+                usa-footer__primary-content
+              "
+            >
+              <a className="usa-footer__primary-link" href="/#">
+                FOIA
+              </a>
+            </li>
+            <li
+              className="
+                mobile-lg:grid-col-4
+                desktop:grid-col-auto
+                usa-footer__primary-content
+              "
+            >
+              <a className="usa-footer__primary-link" href="/#">
+                No FEAT Act
+              </a>
+            </li>
+            <li
+              className="
+                mobile-lg:grid-col-4
+                desktop:grid-col-auto
+                usa-footer__primary-content
+              "
+            >
+              <a className="usa-footer__primary-link" href="/#">
+                USA.gov
+              </a>
+            </li>
+            <li
+              className="
+                mobile-lg:grid-col-4
+                desktop:grid-col-auto
+                usa-footer__primary-content
+              "
+            >
+              <a className="usa-footer__primary-link" href="/#">
+                Accessibility
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
     </footer>
   );
 };
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -67,7 +67,7 @@ export const Header = (): React.ReactElement => {
               <li className="usa-nav__primary-item">
                 <NavLink
                   id="simple-link"
-                  to="/"
+                  to="/results"
                   className={`usa-nav__link ${
                     location.pathname === '/results' ? 'usa-current' : ''
                   }`}
@@ -78,7 +78,7 @@ export const Header = (): React.ReactElement => {
               <li className="usa-nav__primary-item">
                 <NavLink
                   id="advanced-link"
-                  to="/"
+                  to="/advanced"
                   className={`usa-nav__link ${
                     location.pathname === '/advanced' ? 'usa-current' : ''
                   }`}

diff --git a/src/pages/results/results.test.tsx b/src/pages/results/results.test.tsx
@@ -58,7 +58,7 @@ describe('Results', () => {
     });
 
     expect(baseElement.querySelector('h1')?.textContent).toEqual(
-      'Search Results',
+      'Simple Search Results',
     );
   });
 });
diff --git a/src/pages/results/results.tsx b/src/pages/results/results.tsx
@@ -1,14 +1,19 @@
+import { Card } from '@metrostar/comet-uswds';
 import { Search } from '@src/components/search/search';
 import { mockData } from '@src/data/award';
 import { Award } from '@src/types/award';
 import { useQuery } from '@tanstack/react-query';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import ErrorNotification from '../../components/error-notification/error-notification';
 import useAuth from '../../hooks/use-auth';
 // import axios from '@src/utils/axios';
 
 export const Results = (): React.ReactElement => {
+  const [searchParams] = useSearchParams();
   const { isSignedIn } = useAuth();
+  const [currentResults, setCurrentResults] = useState<Award[]>([]);
+
   const {
     isLoading,
     error,
@@ -31,26 +36,48 @@ export const Results = (): React.ReactElement => {
   });
 
   useEffect(() => {
-    if (!isLoading && items) {
-      console.log(items);
+    if (items && !isLoading) {
+      setCurrentResults(
+        items.filter((result) =>
+          result.title.toLowerCase().includes(searchParams.get('query') || ''),
+        ),
+      );
     }
-  }, [isLoading, items]);
+  }, [items, isLoading, searchParams]);
 
   return (
     <div className="grid-container">
-      <div className="grid-row padding-bottom-2">
+      <div className="grid-row padding-bottom-4">
         <div className="grid-col">
-          <h1>Search Results</h1>
+          <h1>Simple Search Results</h1>
           <Search />
         </div>
       </div>
       {error && (
-        <div className="grid-row padding-bottom-2">
+        <div className="grid-row padding-bottom-4">
           <div className="grid-col">
             <ErrorNotification error={error.message} />
           </div>
         </div>
       )}
+      <div className="grid-row">
+        <div className="grid-col">
+          <div className="width-full">
+            {currentResults.length > 0 ? (
+              currentResults.map((result) => (
+                <Card id={`${result.id}`} key={result.id} className="padding-2">
+                  <a href="#">{result.title}</a>
+                  <p>
+                    {result.awardeeName} | {result.agency}
+                  </p>
+                </Card>
+              ))
+            ) : (
+              <div>No results</div>
+            )}
+          </div>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/providers/uswds/uswds-settings.scss b/src/providers/uswds/uswds-settings.scss
@@ -38,7 +38,7 @@
   // Primary colors
   $theme-color-primary-lighter: #d9e8f6,
   $theme-color-primary-light: #73b3e7,
-  $theme-color-primary: #005ea2,
+  $theme-color-primary: #0076d6,
   $theme-color-primary-vivid: #0050d8,
   $theme-color-primary-dark: #1a4480,
   $theme-color-primary-darker: #162e51,

diff --git a/src/styles.scss b/src/styles.scss
@@ -20,8 +20,43 @@ body {
   max-width: unset;
 }
 
+.usa-banner {
+  background-color: #162e51;
+  .usa-banner__header-text,
+  .usa-media-block__body {
+    color: #fff;
+  }
+  .usa-banner__button-text {
+    color: #73b3e7;
+  }
+}
+
+.usa-header {
+  .usa-nav__primary > .usa-nav__primary-item > a {
+    color: #0076d6;
+  }
+}
+
 .usa-footer {
   overflow: visible;
+  .usa-footer__primary-section {
+    background-color: #162e51;
+    .usa-footer__primary-link {
+      color: #fff;
+    }
+  }
+  .usa-footer__secondary-section {
+    background-color: #005ea2;
+    .usa-footer__contact-heading {
+      color: #fff !important;
+    }
+  }
+  .usa-footer__secondary-section a {
+    color: #fff !important;
+  }
+  .usa-social-link__icon {
+    background-color: #fff;
+  }
 }
 
 .usa-section {