Merge branch 'main' into sc-2474-guardian-directory-search

src/components/FeedbackCard/FeedbackCard.test.tsx

@@ -16,14 +16,11 @@ describe('Feedback Card component', () => {
     render(<FeedbackCard />)
 
     expect(
-      screen.getByRole('heading', { level: 2, name: 'Got feedback?' })
+      screen.getByRole('heading', { level: 3, name: 'Got Feedback?' })
     ).toBeInTheDocument()
     expect(
       screen.getByRole('link', { name: '[email protected]' })
     ).toBeInTheDocument()
-    expect(
-      screen.getByRole('link', { name: 'Send us feedback' })
-    ).toBeInTheDocument()
   })
 
   describe('trackEvent functions called', () => {
@@ -48,18 +45,6 @@ describe('Feedback Card component', () => {
       render(<FeedbackCard />)
     })
 
-    it("calls trackEvent when clicking 'Send us feedback' link", () => {
-      const link = screen.getByRole('link', { name: 'Send us feedback' })
-
-      fireEvent.click(link)
-
-      expect(mockTrackEvents).toHaveBeenCalledTimes(1)
-      expect(mockTrackEvents).toHaveBeenCalledWith(
-        'Feedback',
-        'Send us feedback'
-      )
-    })
-
     it("calls trackEvent when clicking '[email protected]' link", () => {
       const link = screen.getByRole('link', { name: '[email protected]' })
 

src/components/FeedbackCard/FeedbackCard.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
 
-import styles from './FeedbackCard.module.scss'
-
 import { useAnalytics } from 'stores/analyticsContext'
 
 const FEEDBACK_EMAIL = '[email protected]'
@@ -11,28 +9,19 @@ const FeedbackCard = () => {
   const { trackEvent } = useAnalytics()
 
   return (
-    <div className={styles.FeedbackCard}>
-      <h2>Got feedback?</h2>
+    <div>
+      <h3>Got Feedback?</h3>
       <p>
         We’d love to hear it! Contact us at{' '}
         <a
           href={`mailto:${FEEDBACK_EMAIL}?subject=${FEEDBACK_SUBJECT}`}
           target="_blank"
           rel="noreferrer noopener"
-          className="usa-link"
           onClick={() => trackEvent('Feedback', FEEDBACK_EMAIL)}>
           {FEEDBACK_EMAIL}
         </a>{' '}
         to send us your thoughts or schedule an interview.
       </p>
-      <a
-        href={`mailto:${FEEDBACK_EMAIL}?subject=${FEEDBACK_SUBJECT}`}
-        target="_blank"
-        rel="noreferrer noopener"
-        className="usa-button"
-        onClick={() => trackEvent('Feedback', 'Send us feedback')}>
-        Send us feedback
-      </a>
     </div>
   )
 }

src/components/Footer/Footer.module.scss

@@ -6,14 +6,61 @@
   color: var(--footer-text);
   @include u-font-size('body', '2xs');
 
+  .border {
+    border-bottom: 1px solid var(--footer-border);
+    padding-right: 0;
+    height: 1px;
+    margin: 1rem 1rem 2rem 1rem;
+    padding: 0 0;
+  }
+
+  h3 {
+    color: white;
+    margin: 0;
+    font-size: 18px;
+  }
+
+  p {
+    color: white;
+    max-width: 281px;
+  }
+
+  ul li a,
+  p {
+    font-size: 14px;
+  }
+
+  img {
+    width: 127px;
+    max-height: 200px;
+  }
+
+  .miniRow {
+    flex-direction: column;
+  }
+
+  .miniCol {
+    padding-bottom: 0;
+  }
+
   :global {
-    .usa-footer__logo img {
-      width: 200px;
-      max-height: 200px;
+    .usa-footer__secondary-link {
+      margin-left: 0;
+      a:hover,
+      a:focus {
+        text-decoration: underline;
+        color: white;
+      }
     }
-
-    .grid-col-auto {
-      align-self: center;
+    .usa-footer__return-to-top {
+      background: #000;
+      a {
+        color: $theme-ultraviolet-lighter;
+        &:hover,
+        &:focus {
+          color: #fff;
+        }
+      }
     }
 
     .usa-footer__secondary-section {
@@ -24,6 +71,11 @@
         color: var(--footer-text);
         text-decoration: none;
         font-weight: 600;
+        &:hover,
+        &:focus {
+          text-decoration: underline;
+          color: white;
+        }
       }
     }
 
@@ -40,38 +92,67 @@
       }
     }
   }
-}
 
-.footer {
-  :global {
-    @media (max-width: 1040px) {
-      .usa-footer__nav {
-        width: 100%;
-        .grid-row.grid-gap {
-          @include u-margin-x(0);
-        }
-        .grid-row {
-          flex-direction: column;
-          width: 100%;
-        }
-        .grid-col {
-          @include u-padding-y(2);
-          @include u-padding-x(0);
-          &:not(:last-child) {
-            border-bottom: 2px double var(--footer-border);
-          }
-        }
-        border-bottom: 0px;
-      }
+  @include sfds-at-media('desktop') {
+    .miniCol {
+      padding-bottom: 0;
+      flex-direction: row;
+    }
+    .miniRow {
+      flex-direction: row;
+    }
+  }
+
+  @include sfds-at-media('tablet-lg') {
+    //desktop only
+    h3 {
+      margin-bottom: 14px;
+    }
+    .border {
+      border-right: 1px solid var(--footer-border);
+      padding-right: 0;
+      width: 1px;
+      height: auto;
+      border-bottom: 0;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .miniCol {
+      padding-bottom: 1rem;
+    }
+    :global {
       .usa-footer__secondary-section {
-        flex-direction: column;
-      }
-      .usa-footer__primary-content {
-        border-top: 0px;
-      }
-      .usa-list--unstyled > li {
-        @include u-margin-x(0);
+        .grid-container {
+          padding: 2rem;
+          max-width: 1800px;
+        }
       }
     }
   }
+
+  //small only
+  @media (max-width: 1024px) {
+    h3 {
+      @include u-padding-y(2);
+    }
+
+    :global(.grid-row) {
+      flex-direction: column;
+      gap: 16px;
+    }
+    :global(.grid-col) {
+      @include u-padding-y(0);
+      @include u-padding-x(2);
+    }
+    .usa-footer__secondary-section {
+      flex-direction: column;
+    }
+    .usa-footer__primary-content {
+      border-top: 0px;
+    }
+    .usa-list--unstyled > li {
+      @include u-margin-x(0);
+    }
+  }
 }

src/components/Footer/Footer.test.tsx

@@ -15,7 +15,7 @@ describe('Footer component', () => {
       'alt',
       'USSF Portal'
     )
-    expect(screen.getAllByRole('link')).toHaveLength(15)
+    expect(screen.getAllByRole('link')).toHaveLength(17)
   })
 
   it('has no a11y violations', async () => {