update debt letters to v3

Signed-off-by: Micah Chiang <micahkchiang@gmail.com>
department-of-veterans-affairs · Mar 12, 2024 · afbfccb · afbfccb
1 parent 12d91f1
commit afbfccb
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 19 deletions.
diff --git a/src/applications/debt-letters/components/DebtDetails.jsx b/src/applications/debt-letters/components/DebtDetails.jsx
@@ -57,12 +57,28 @@ const DebtDetails = ({ selectedDebt, debts }) => {
 
   return (
     <div className="vads-u-display--flex vads-u-flex-direction--column">
-      <VaBreadcrumbs uswds="false" label="Breadcrumb">
-        <a href="/">Home</a>
-        <a href="/manage-va-debt">Manage your VA debt</a>
-        <a href="/manage-va-debt/your-debt">Your VA debt</a>
-        <a href="/manage-va-debt/your-debt/debt-detail">Details</a>
-      </VaBreadcrumbs>
+      <VaBreadcrumbs
+        label="Breadcrumb"
+        breadcrumbList={[
+          {
+            href: '/',
+            label: 'VA.gov home',
+          },
+          {
+            href: '/manage-va-debt',
+            label: 'Manage your VA debt',
+          },
+          {
+            href: '/manage-va-debt/your-debt',
+            label: 'Your VA debt',
+          },
+          {
+            href: '/manage-va-debt/your-debt/debt-detail',
+            label: 'Details',
+          },
+        ]}
+        uswds
+      />
       <h1
         className="vads-u-font-family--serif vads-u-margin-bottom--2"
         tabIndex="-1"

diff --git a/src/applications/debt-letters/components/DebtLettersDownload.jsx b/src/applications/debt-letters/components/DebtLettersDownload.jsx
@@ -24,14 +24,28 @@ const DebtLettersDownload = ({
   return (
     <div className="vads-l-row large-screen:vads-u-margin-x--neg2p5">
       <div className="vads-u-font-family--sans">
-        <VaBreadcrumbs uswds="false" label="Breadcrumb">
-          <a href="/">Home</a>
-          <a href="/manage-va-debt">Manage your VA debt</a>
-          <a href="/manage-va-debt/your-debt">Your debt</a>
-          <a href="/manage-va-debt/your-debt/debt-letters">
-            Download debt letters
-          </a>
-        </VaBreadcrumbs>
+        <VaBreadcrumbs
+          label="Breadcrumb"
+          breadcrumbList={[
+            {
+              href: '/',
+              label: 'VA.gov home',
+            },
+            {
+              href: '/manage-va-debt',
+              label: 'Manage your VA debt',
+            },
+            {
+              href: '/manage-va-debt/your-debt',
+              label: 'Your VA debt',
+            },
+            {
+              href: '/manage-va-debt/your-debt/debt-letters',
+              label: 'Download debt letters',
+            },
+          ]}
+          uswds
+        />
       </div>
       <div className="large-screen:vads-l-col--8">
         <h1

diff --git a/src/applications/debt-letters/components/DebtLettersSummary.jsx b/src/applications/debt-letters/components/DebtLettersSummary.jsx
@@ -112,11 +112,24 @@ const DebtLettersSummary = ({ isError, isVBMSError, debts, debtLinks }) => {
 
   return (
     <>
-      <VaBreadcrumbs uswds="false" label="Breadcrumb">
-        <a href="/">Home</a>
-        <a href="/manage-va-debt">Manage your VA debt</a>
-        <a href="/manage-va-debt/your-debt">Your VA debt</a>
-      </VaBreadcrumbs>
+      <VaBreadcrumbs
+        label="Breadcrumb"
+        breadcrumbList={[
+          {
+            href: '/',
+            label: 'VA.gov home',
+          },
+          {
+            href: '/manage-va-debt',
+            label: 'Manage your VA debt',
+          },
+          {
+            href: '/manage-va-debt/your-debt',
+            label: 'Your VA debt',
+          },
+        ]}
+        uswds
+      />
 
       <section
         className="vads-l-row vads-u-margin-x--neg2p5"