Update to breadcrumbs.html to use va-breadcrumbs (#2254)

* Update to breadcrumbs.html to use va-breadcrumbs

* Improvements to breadcrumbs.html filter
Added missing "home" crumb

* Fix to link capitalization when there's a "custom" title

* Fix to capitalization processing

* Updates to liquid filter unit tests

* Adding some light type annotations to try and kick off another review instance deploy

src/site/filters/liquid.js

@@ -757,6 +757,56 @@ module.exports = function registerFilters() {
     return JSON.stringify(JSON.stringify(newBC));
   };
 
+  liquid.filters.formatForBreadcrumbsHTML = breadcrumbs => {
+    // return early if no breadcrumbs
+    if (!breadcrumbs) return '';
+
+    // Remove "empty path" breadcrumbs
+    const filteredCrumbs = breadcrumbs.filter(
+      ({ path }) => path !== '' && path !== null,
+    );
+
+    // Add "Home" path since it's not included by default
+    filteredCrumbs.unshift({
+      path: '',
+      name: 'VA.gov home',
+    });
+
+    const mappedCrumbs = filteredCrumbs.map(crumb => {
+      const {
+        path,
+        children,
+      } = /** @type {{path: string, children: array}} */ (crumb);
+      let { name } = /** @type {{name: string}} */ (crumb);
+
+      // Replace hyphens in the name with spaces
+      name = name.replace('-', ' ');
+
+      // Capitalize the first letter of the name
+      name = name.charAt(0).toUpperCase() + name.slice(1);
+
+      const { display_title: displayTitle, title } =
+        (children && children[0]?.file) ?? {};
+      // Assigns the first non-null value, defaulting back to the original name
+      const label = displayTitle || title || name;
+
+      // Set language to Spanish if "-esp" is at the end of the url,
+      // or Tagalog if "-tag" is at the end of the url
+      let lang = 'en-US';
+      if (path.endsWith('-esp')) lang = 'es';
+      if (path.endsWith('-tag')) lang = 'tl';
+
+      return {
+        href: `/${path}`,
+        isRouterLink: false,
+        label,
+        lang,
+      };
+    });
+
+    return JSON.stringify(JSON.stringify(mappedCrumbs));
+  };
+
   // used to get a base url path of a health care region from entityUrl.path
   liquid.filters.regionBasePath = path => path.split('/')[1];
 

src/site/filters/liquid.unit.spec.js

@@ -927,6 +927,90 @@ describe('formatForBreadcrumbs', () => {
   });
 });
 
+describe('formatForBreadcrumbsHTML', () => {
+  it('returns breadcrumbs formatted for va-breadcrumbs', () => {
+    // Define original breadcrumbs
+    const originalCrumbs = [
+      {
+        path: 'view-change-dependents/',
+        name: 'View or change dependents on your VA disability benefits',
+      },
+      {
+        path: 'view-change-dependents/add-remove-form-21-686c-v2/',
+        name: 'Add or remove dependents with VA Form 21-686C',
+      },
+    ];
+    // Process through filter
+    const output = liquid.filters.formatForBreadcrumbsHTML(originalCrumbs);
+    // Verify output
+    expect(output).to.eq(
+      JSON.stringify(
+        '[{"href":"/","isRouterLink":false,"label":"VA.gov home","lang":"en-US"},{"href":"/view-change-dependents/","isRouterLink":false,"label":"View or change dependents on your VA disability benefits","lang":"en-US"},{"href":"/view-change-dependents/add-remove-form-21-686c-v2/","isRouterLink":false,"label":"Add or remove dependents with VA Form 21 686C","lang":"en-US"}]',
+      ),
+    );
+  });
+  it('removes items with empty paths', () => {
+    // Define original breadcrumbs
+    const originalCrumbs = [
+      {
+        path: 'view-change-dependents/',
+        name: 'View or change dependents on your VA disability benefits',
+      },
+      {
+        path: null,
+        name: 'This path does not exist',
+      },
+      {
+        path: 'view-change-dependents/add-remove-form-21-686c-v2/',
+        name: 'Add or remove dependents with VA Form 21-686C',
+      },
+    ];
+    // Process through filter
+    const output = liquid.filters.formatForBreadcrumbsHTML(originalCrumbs);
+    // Verify output
+    expect(output).to.eq(
+      JSON.stringify(
+        '[{"href":"/","isRouterLink":false,"label":"VA.gov home","lang":"en-US"},{"href":"/view-change-dependents/","isRouterLink":false,"label":"View or change dependents on your VA disability benefits","lang":"en-US"},{"href":"/view-change-dependents/add-remove-form-21-686c-v2/","isRouterLink":false,"label":"Add or remove dependents with VA Form 21 686C","lang":"en-US"}]',
+      ),
+    );
+  });
+  it('correctly shows display_title or title if provided instead of default name', () => {
+    const originalCrumbs = [
+      {
+        name: 'cerner-staging',
+        path: 'cerner-staging',
+        children: [
+          {
+            file: {
+              // eslint-disable-next-line camelcase
+              display_title: 'Cerner',
+            },
+          },
+        ],
+      },
+      {
+        name: 'appointments',
+        path: 'cerner-staging/appointments',
+        children: [
+          {
+            file: {
+              title: 'Cerner appointments',
+            },
+          },
+        ],
+      },
+    ];
+    // Process through filter
+    const output = liquid.filters.formatForBreadcrumbsHTML(originalCrumbs);
+    // Verify output
+    expect(output).to.eq(
+      JSON.stringify(
+        '[{"href":"/","isRouterLink":false,"label":"VA.gov home","lang":"en-US"},{"href":"/cerner-staging","isRouterLink":false,"label":"Cerner","lang":"en-US"},{"href":"/cerner-staging/appointments","isRouterLink":false,"label":"Cerner appointments","lang":"en-US"}]',
+      ),
+    );
+  });
+});
+
 describe('deriveCLPTotalSections', () => {
   it('returns back max sections when everything is rendered', () => {
     expect(

src/site/includes/breadcrumbs.html

@@ -1,56 +1,20 @@
-{% if gatePage === true %}
-  {% assign gatePageClassName = 'va-nav-breadcrumbs--gate' %}
-{% endif %}
+<div class="vads-u-padding-x--1p5" data-template="includes/breadcrumbs">
+  {% if gatePage === true %}
+    {% assign gatePageClassName = 'va-nav-breadcrumbs--gate' %}
+  {% endif %}
 
-<nav aria-label="Breadcrumb" aria-live="polite" class="va-nav-breadcrumbs {{gatePageClassName}} {% if newGrid %}new-grid{% endif %}" id="va-breadcrumbs">
-  <ul class="row va-nav-breadcrumbs-list columns" id="va-breadcrumbs-list">
-    <li>
-      <a href="/" onClick="recordEvent({ event: 'nav-breadcrumb', 'nav-breadcrumb-section': 'home' });">
-        Home
-      </a>
-    </li>
+  {% assign crumbs = breadcrumb_path %}
+  {% if breadcrumbs_override %}
+    {% assign crumbs = breadcrumbs_override %}
+  {% endif %}
+  {% assign crumbs = crumbs | formatForBreadcrumbsHTML %}
 
-    {% assign crumbs = breadcrumb_path %}
+  <va-breadcrumbs class="row {{gatePageClassName}} {% if newGrid %}new-grid{% endif %}" wrapping />
 
-    {% if breadcrumbs_override %}
-      {% assign crumbs = breadcrumbs_override %}
-    {% endif %}
-
-    {% assign current_page = crumbs | last %}
-
-    {% for crumb in crumbs %}
-      <!-- Adding back in the last link as aria-current="page" -->
-      {% comment %}
-        Each breadcrumb item has a child object.
-        One of the properties of that object is `file` which loads the front matter metadata from the corresponding Markdown input file.
-        Below, we’ve assigned that object to a variable named 'crumb_child_meta'.
-        If these templates are still using tinyliquid, you can dump the properties of this object using {{ crumb | keys }}.
-      {% endcomment %}
-      {% assign crumb_child_meta = crumb.children.0.file %}
-
-      <li>
-        {% if current_page.name != crumb.name %}
-          <a href="/{{ crumb.path }}">
-            {% if crumb_child_meta.display_title %}
-              {{ crumb_child_meta.display_title }}
-            {% elsif crumb_child_meta.title %}
-              {{ crumb_child_meta.title }}
-            {% else %}
-              {{ crumb.name | replace: '-', ' ' | capitalize }}
-            {% endif %}
-          </a>
-        {% else %}
-          <a aria-current="page" href="/{{ crumb.path }}">
-            {% if crumb_child_meta.display_title %}
-              {{ crumb_child_meta.display_title }}
-            {% elsif crumb_child_meta.title %}
-              {{ crumb_child_meta.title }}
-            {% else %}
-              {{ crumb.name | replace: '-', ' ' | capitalize }}
-            {% endif %}
-          </a>
-        {% endif %}
-      </li>
-    {% endfor %}
-  </ul>
-</nav>
+  <script>
+    const bcComponent = document.querySelector('va-breadcrumbs');
+    if (bcComponent) {
+      bcComponent.setAttribute('breadcrumb-list', {{ crumbs }});
+    }
+  </script>
+</div>