edm-627 628 update ui for national exams (#34458)

department-of-veterans-affairs · Feb 3, 2025 · 5b2abe1 · 5b2abe1
1 parent b81c0d5
commit 5b2abe1
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 68 deletions.
diff --git a/src/applications/gi/containers/NationalExamsList.jsx b/src/applications/gi/containers/NationalExamsList.jsx
@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import {
   VaPagination,
-  VaLinkAction,
+  VaLink,
 } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import { fetchNationalExams } from '../actions';
 import { formatNationalExamName } from '../utils/helpers';
@@ -74,90 +74,97 @@ const NationalExamsList = () => {
   if (error) {
     return (
       <div className="national-exams-container row vads-u-padding--1p5 mobile-lg:vads-u-padding--0">
-        <NationalExamsInfo />
-        <va-alert
-          style={{ marginTop: '18px', marginBottom: '32px' }}
-          status="error"
-          data-e2e-id="alert-box"
-        >
-          <h2 slot="headline">
-            We can’t load the national exams list right now
-          </h2>
-          <p>
-            We’re sorry. There’s a problem with our system. Try again later.
-          </p>
-        </va-alert>
+        <div className="usa-width-two-thirds">
+          <NationalExamsInfo />
+          <va-alert
+            style={{ marginTop: '18px', marginBottom: '32px' }}
+            status="error"
+            data-e2e-id="alert-box"
+          >
+            <h2 slot="headline">
+              We can’t load the national exams list right now
+            </h2>
+            <p>
+              We’re sorry. There’s a problem with our system. Try again later.
+            </p>
+          </va-alert>
+        </div>
       </div>
     );
   }
   if (loading) {
     return (
       <div className="national-exams-container row vads-u-margin-bottom--8 vads-u-padding--1p5 mobile-lg:vads-u-padding--0">
-        <NationalExamsInfo />
-        <va-loading-indicator
-          label="Loading"
-          message="Loading your national exams..."
-        />
+        <div className="usa-width-two-thirds">
+          <NationalExamsInfo />
+          <va-loading-indicator
+            label="Loading"
+            message="Loading your national exams..."
+          />
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="national-exams-container row vads-u-padding--1p5 mobile-lg:vads-u-padding--0">
-      <NationalExamsInfo />
-      <p
-        id="results-summary"
-        ref={resultsSummaryRef}
-        tabIndex="-1"
-        className="vads-u-margin-top--3 vads-u-margin-bottom--2"
-      >
-        {`Showing ${startIndex}-${endIndex} of ${
-          nationalExams.length
-        } national exams`}
-      </p>
-      {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
-      <ul className="remove-bullets" role="list">
-        {currentExams.map(exam => (
-          <li key={exam.enrichedId} className="vads-u-margin-bottom--2p5">
-            <va-card background>
-              <h3 className="vads-u-margin--0">
-                {formatNationalExamName(exam.name)}
-              </h3>
-              <VaLinkAction
-                href={`national-exams/${exam.enrichedId}`}
-                text={`View test amount details for ${formatNationalExamName(
-                  exam.name,
-                )}`}
-                type="secondary"
-                message-aria-describedby={`View test amount details for ${formatNationalExamName(
-                  exam.name,
-                )}`}
-                onClick={handleRouteChange(exam.enrichedId)}
-              />
-            </va-card>
-          </li>
-        ))}
-      </ul>
-      <VaPagination
-        page={currentPage}
-        pages={totalPages}
-        maxPageListLength={5}
-        data-testid="currentPage"
-        onPageSelect={e => handlePageChange(e.detail.page)}
-        className="vads-u-border-top--0 vads-u-margin-top--1 vads-u-padding-bottom--9"
-      />
+    <div className="national-exams-container  row vads-u-padding--1p5 mobile-lg:vads-u-padding--0">
+      <div className="usa-width-two-thirds">
+        <NationalExamsInfo />
+        <p
+          id="results-summary"
+          ref={resultsSummaryRef}
+          tabIndex="-1"
+          className="vads-u-margin-top--3 vads-u-margin-bottom--2"
+        >
+          {`Showing ${startIndex}-${endIndex} of ${
+            nationalExams.length
+          } national exams`}
+        </p>
+        {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
+        <ul className="remove-bullets" role="list">
+          {currentExams.map(exam => (
+            <li key={exam.enrichedId} className="vads-u-margin-bottom--2p5">
+              <va-card background>
+                <h3 className="vads-u-margin--0">
+                  {formatNationalExamName(exam.name)}
+                </h3>
+                <VaLink
+                  href={`national-exams/${exam.enrichedId}`}
+                  text={`View test amount details for ${formatNationalExamName(
+                    exam.name,
+                  )}`}
+                  type="secondary"
+                  message-aria-describedby={`View test amount details for ${formatNationalExamName(
+                    exam.name,
+                  )}`}
+                  onClick={handleRouteChange(exam.enrichedId)}
+                />
+              </va-card>
+            </li>
+          ))}
+        </ul>
+        <VaPagination
+          page={currentPage}
+          pages={totalPages}
+          maxPageListLength={5}
+          data-testid="currentPage"
+          onPageSelect={e => handlePageChange(e.detail.page)}
+          className="vads-u-border-top--0 vads-u-margin-top--1 vads-u-padding-bottom--9"
+        />
+      </div>
     </div>
   );
 };
 
-const ExamShape = PropTypes.shape({
-  enrichedId: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-});
 NationalExamsList.propTypes = {
   loading: PropTypes.bool,
   error: PropTypes.string,
-  nationalExams: PropTypes.arrayOf(ExamShape),
+  nationalExams: PropTypes.arrayOf(
+    PropTypes.shape({
+      enrichedId: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+    }),
+  ),
 };
 
 export default NationalExamsList;
diff --git a/src/applications/gi/tests/containers/NationalExams.unit.spec.jsx b/src/applications/gi/tests/containers/NationalExams.unit.spec.jsx
@@ -131,7 +131,7 @@ describe('NationalExamsList', () => {
   });
   it('should render the GI Bill reimbursement link correctly', () => {
     const wrapper = mountComponent();
-    const link = wrapper.find('va-link');
+    const link = wrapper.find('va-link').at(0);
     expect(link.prop('href')).to.equal(
       'https://www.va.gov/education/about-gi-bill-benefits/how-to-use-benefits/national-tests/',
     );