Merge branch 'main' into sc-2066/feat-add-last-login-at-to-portal-user

.github/settings.yml

@@ -161,13 +161,12 @@ branches:
         strict: true
         # Required. The list of status checks to require in order to merge into this branch
         contexts:
-          # TODO Temporarily removing e2e tests from required builds as they are flakey and need to be stabilized first
-          # ['lint-and-test', 'action-semantic-pull-request', 'Happo', 'run-e2e-tests']
           [
-            'lint-and-test',
-            'action-semantic-pull-request',
-            'Happo'
-          ]
+            "lint-and-test", "action-semantic-pull-request", "Happo",
+            "run-e2e-tests / run-e2e-tests (chromium)",
+            "run-e2e-tests / run-e2e-tests (chrome)",
+            "run-e2e-tests / run-e2e-tests (msedge)",
+             ]
       # Required. Allow owners to by pass restrictions for PRs that are just release notes or github settings changes which do not affect tests
       # Enforce all configured restrictions for administrators. Set to true to enforce required status checks for repository administrators.
       enforce_admins: false

src/__tests__/pages/guardian-directory.test.tsx

@@ -96,7 +96,9 @@ describe('GuardianDirectory', () => {
       })
     })
 
-    test('has no a11y violations', async () => {
+    // TODO: There is an a11y violation in the Search component we are importing from the
+    // react-uswds library. We will re-enable this test once the violation is fixed there.
+    test.skip('has no a11y violations', async () => {
       const html = renderWithAuthAndApollo(
         <GuardianDirectory />,
         {},

src/__tests__/pages/landing/[landingPage]/[article]/index.test.tsx

@@ -1,6 +1,7 @@
 /**
  * @jest-environment jsdom
  */
+import { screen, render } from '@testing-library/react'
 import { useRouter } from 'next/router'
 import type { GetServerSidePropsContext } from 'next'
 
@@ -9,7 +10,9 @@ import { client } from '../../../../../lib/keystoneClient'
 
 import { cmsLandingPageArticle as mockLandingPageArticle } from '../../../../../__fixtures__/data/cmsLandingPageArticle'
 
-import { getServerSideProps } from 'pages/landing/[landingPage]/[article]'
+import LandingPageArticle, {
+  getServerSideProps,
+} from 'pages/landing/[landingPage]/[article]'
 import * as useUserHooks from 'hooks/useUser'
 import { testPortalUser1, testUser1, cmsUser } from '__fixtures__/authUsers'
 import { getSession } from 'lib/session'
@@ -130,6 +133,19 @@ describe('LandingPageArticle getServerSideProps', () => {
         notFound: true,
       })
     })
+
+    test('renders the article', async () => {
+      Object.defineProperty(window, 'location', {
+        value: {
+          pathname: '/landing/test-landing-page/test-article',
+        },
+        writable: true,
+      })
+
+      render(<LandingPageArticle article={mockLandingPageArticle} />)
+
+      expect(screen.getByText(mockLandingPageArticle.title)).toBeInTheDocument()
+    })
   })
 
   describe('as cms user', () => {

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 () => {