[View Payments] Upgrade web components to their V3 versions (#28025)

* Upgrading web components to their V3 versions
department-of-veterans-affairs · Mar 14, 2024 · 7df98fe · 7df98fe
1 parent e73a340
commit 7df98fe
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git a/src/applications/disability-benefits/view-payments/components/IdentityNotVerified.jsx b/src/applications/disability-benefits/view-payments/components/IdentityNotVerified.jsx
@@ -27,7 +27,7 @@ const IdentityNotVerified = () => {
   );
 
   return (
-    <va-alert status="warning" uswds="false">
+    <va-alert status="warning" uswds>
       <h2 slot="headline" className="vads-u-fontsize--h3">
         Verify your identity to view your VA payments
       </h2>

diff --git a/...ns/disability-benefits/view-payments/components/view-payments-lists/ViewPaymentsLists.jsx b/...ns/disability-benefits/view-payments/components/view-payments-lists/ViewPaymentsLists.jsx
@@ -48,7 +48,7 @@ class ViewPaymentsLists extends Component {
       );
     } else {
       paymentsReturnedTable = (
-        <va-alert status="info">
+        <va-alert status="info" uswds>
           <h2 slot="headline" className="vads-u-font-size--h3">
             We don’t have a record of returned payments
           </h2>
@@ -81,7 +81,7 @@ class ViewPaymentsLists extends Component {
       );
     } else {
       paymentsReceivedTable = (
-        <va-alert status="info">
+        <va-alert status="info" uswds>
           <h2 slot="headline" className="vads-u-font-size--h3">
             We don’t have a record of VA payments made to you
           </h2>
@@ -114,14 +114,22 @@ class ViewPaymentsLists extends Component {
       const alertContent = isClientError(this.props.error.code)
         ? NoPaymentsContent
         : ServerErrorAlertContent;
-      content = <va-alert status={status}>{alertContent}</va-alert>;
+      content = (
+        <va-alert status={status} uswds>
+          {alertContent}
+        </va-alert>
+      );
     } else {
       // Deconstruct payments props object
       // If there are no payments AND no payments returned, render an Alertbox
       // If there are either payments OR payments returned, run payment list builders
       const { returnPayments, payments } = this.props.payments;
       if (returnPayments.length === 0 && payments.length === 0) {
-        content = <va-alert status="info">{NoPaymentsContent}</va-alert>;
+        content = (
+          <va-alert status="info" uswds>
+            {NoPaymentsContent}
+          </va-alert>
+        );
       } else {
         // run payments returned list builder
         paymentsReturnedTable = this.buildReturnedPaymentListContent(

diff --git a/...ns/disability-benefits/view-payments/components/view-payments-lists/payments/Payments.jsx b/...ns/disability-benefits/view-payments/components/view-payments-lists/payments/Payments.jsx
@@ -46,15 +46,15 @@ const Payments = ({ data, fields, tableVersion, textContent }) => {
         <p className="vads-u-font-size--lg vads-u-font-family--serif">
           Displaying {fromToNums[0]} - {fromToNums[1]} of {data.length}
         </p>
-        <va-table uswds="false">
-          <va-table-row slot="headers" uswds="false">
+        <va-table>
+          <va-table-row slot="headers">
             {fields.map(field => (
               <span key={field.value}>{field.label}</span>
             ))}
           </va-table-row>
           {currentData.map((row, index) => {
             return (
-              <va-table-row key={`payments-${index}`} uswds="false">
+              <va-table-row key={`payments-${index}`}>
                 {fields.map(field => (
                   <span key={`${field.value}-${index}`}>
                     {row[field.value]}
@@ -70,14 +70,14 @@ const Payments = ({ data, fields, tableVersion, textContent }) => {
           pages={totalPages.current}
           maxPageListLength={MAX_PAGE_LIST_LENGTH}
           showLastPage
-          uswds="false"
+          uswds
         />
       </>
     );
   }
 
   return (
-    <va-alert status="info" uswds="false">
+    <va-alert status="info" uswds>
       {clientServerErrorContent(tableVersion)}
     </va-alert>
   );

diff --git a/src/applications/disability-benefits/view-payments/utils.js b/src/applications/disability-benefits/view-payments/utils.js
@@ -18,8 +18,8 @@ export const ServerErrorAlertContent = (
     </p>
     <p className="vads-u-font-size--base">
       If you get this error again, please call the VA.gov help desk at{' '}
-      <va-telephone contact={CONTACTS.VA_311} uswds="false" /> (
-      <va-telephone contact={CONTACTS['711']} tty uswds="false" />
+      <va-telephone contact={CONTACTS.VA_311} /> (
+      <va-telephone contact={CONTACTS['711']} tty />
       ). We’re here Monday through Friday, 8:00 a.m. to 8:00 p.m. ET
     </p>
   </>
@@ -36,7 +36,7 @@ export const NoPaymentsContent = (
       less than $1 for direct deposit, or $5 for mailed checks, will not show in
       your online payment history. If you think this is an error, or if you have
       questions about your payment history, please call{' '}
-      <va-telephone contact={CONTACTS.VA_BENEFITS} uswds="false" />
+      <va-telephone contact={CONTACTS.VA_BENEFITS} />
     </p>
     <p className="vads-u-font-size--base">
       VA pays benefits on the first day of the month for the previous month.