update 404 page to use ds classes (#334)

department-of-veterans-affairs · Jan 12, 2024 · 21a2b99 · 21a2b99
1 parent 437939a
commit 21a2b99
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 23 deletions.
diff --git a/playwright/tests/404page.spec.js b/playwright/tests/404page.spec.js
@@ -15,7 +15,7 @@ test.describe('404 Error Page', () => {
 
     await expect(page.locator('form#search_form')).toBeVisible()
 
-    await expect(page.locator('.va-quicklinks--commpop')).toBeVisible()
+    await expect(page.locator('h3 >> nth=1')).toHaveText('Common Questions')
   })
 
   test('Should render without a11y accessibility errors', async ({

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -15,39 +15,52 @@ const Error404Page = ({ headerFooterData }) => {
         <title>VA.gov | Veterans Affairs</title>
       </Head>
       <Wrapper bannerData={[]} headerFooterData={headerFooterData}>
-        <div className="main maintenance-page" role="main">
+        <div
+          className="main maintenance-page vads-u-padding-top--4"
+          role="main"
+        >
           <div className="primary">
             <div className="row">
-              <div className="text-center usa-content">
+              <div className="usa-content vads-u-text-align--center vads-u-margin-x--auto">
                 <h3>Sorry — we can’t find that page</h3>
                 <p>Try the search box or one of the common questions below.</p>
-                <div className="feature va-flex va-flex--ctr">
+                <div className="feature vads-u-display--flex vads-u-align-items--center">
                   <form
                     acceptCharset="UTF-8"
                     action="/search/"
                     id="search_form"
-                    className="full-width"
+                    className="full-width search-form-bottom-margin"
                     method="get"
                   >
-                    <div className="va-flex va-flex--top va-flex--jctr">
-                      <label htmlFor="mobile-query">Search:</label>
+                    <div
+                      className="vads-u-display--flex vads-u-align-items--flex-start vads-u-justify-content--center"
+                      style={{ height: '5.7rem' }}
+                    >
+                      <label htmlFor="mobile-query" className="sr-only">
+                        Search:
+                      </label>
                       <input
                         autoComplete="off"
-                        className="usagov-search-autocomplete full-width"
+                        className="usagov-search-autocomplete full-width vads-u-height--full vads-u-margin--0 vads-u-max-width--100"
                         id="mobile-query"
                         name="query"
                         type="text"
                       />
-                      <input type="submit" value="Search" />
+                      <input
+                        type="submit"
+                        value="Search"
+                        style={{ borderRadius: '0 3px 3px 0' }}
+                        className="vads-u-height--full vads-u-margin--0"
+                      />
                     </div>
                   </form>
                 </div>
               </div>
             </div>
           </div>
-
-          <CommonAndPopular />
         </div>
+
+        <CommonAndPopular />
       </Wrapper>
     </>
   )

diff --git a/src/templates/common/commonAndPopular/index.tsx b/src/templates/common/commonAndPopular/index.tsx
@@ -2,42 +2,46 @@ import Link from 'next/link'
 
 export function CommonAndPopular() {
   return (
-    <div className="row va-quicklinks va-quicklinks--commpop">
+    <div className="row vads-u-padding-bottom--9">
       <div className="small-12 usa-width-one-half medium-6 columns">
-        <h3 className="va-h-ruled">Common Questions</h3>
-        <ul className="va-list--plain">
-          <li>
+        <h3 className="va-h-ruled vads-u-margin-bottom--2 vads-u-padding-bottom--1 vads-u-font-size--xl">
+          Common Questions
+        </h3>
+        <ul className="va-list--plain vads-u-margin-top--1">
+          <li className="vads-u-padding-y--1">
             <Link href="/health-care/how-to-apply/">
               How do I apply for health care?
             </Link>
           </li>
-          <li>
+          <li className="vads-u-padding-y--1">
             <Link href="/disability/how-to-file-claim/">
               How do I file for disability benefits?
             </Link>
           </li>
-          <li>
+          <li className="vads-u-padding-y--1">
             <Link href="/education/how-to-apply/">
               How do I apply for education benefits?
             </Link>
           </li>
         </ul>
       </div>
       <div className="small-12 usa-width-one-half medium-6 columns">
-        <h3 className="va-h-ruled">Popular on VA.gov</h3>
-        <ul className="va-list--plain">
-          <li>
+        <h3 className="va-h-ruled vads-u-margin-bottom--2 vads-u-padding-bottom--1 vads-u-font-size--xl">
+          Popular on VA.gov
+        </h3>
+        <ul className="va-list--plain vads-u-margin-top--1">
+          <li className="vads-u-padding-y--1">
             <Link href="/find-locations/">Find nearby VA locations</Link>
           </li>
-          <li>
+          <li className="vads-u-padding-y--1">
             <Link href="/education/gi-bill-comparison-tool">
               View education benefits available by school
             </Link>
           </li>
-          <li>
+          <li className="vads-u-padding-y--1">
             <a
-              href="https://www.veteranscrisisline.net/"
               target="_blank"
+              href="https://www.veteranscrisisline.net/"
               rel="noopener noreferrer"
               className="external no-external-icon"
             >