Merge pull request #66 from KTH/feat/breadcrumbs

feat: update markup and documentation for breadcrumbs
KTH · Aug 28, 2024 · 433742e · 433742e
2 parents 926f5fd + f7161bd
commit 433742e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -56,6 +56,9 @@ registerBreadcrumbHelper()
 
 // Add breadcrumbs to res.render
 res.render(breadcrumbsPath: [{url: 'https://kth.se', label: 'KTH'}, ...], ...)
+
+// Import the needed css from @kth/style
+@use '@kth/style/scss/components/breadcrumbs.scss';
 ```
 
 ## Language Link Helper

diff --git a/lib/handlebars/helpers/__snapshots__/breadcrumbs.test.js.snap b/lib/handlebars/helpers/__snapshots__/breadcrumbs.test.js.snap
@@ -2,19 +2,19 @@
 
 exports[`getBreadcrumbsMarkup should generate breadcrumbs HTML for a valid path list in English 1`] = `
 "
-  <nav id="breadcrumbs" aria-label="Breadcrumbs" class="col-12 col-md-9">
-    <ol class="breadcrumb">
-      <li class="breadcrumb-item"><a href="/">Kth</a></li><li class="breadcrumb-item"><a href="/test1">Test 1</a></li><li class="breadcrumb-item"><a href="/test2">Test 2</a></li>
+  <nav id="breadcrumbs" aria-label="Breadcrumbs" class="kth-breadcrumbs">
+    <ol class="kth-breadcrumbs__list">
+      <li><a href="/">Kth</a></li><li><a href="/test1">Test 1</a></li><li><a href="/test2">Test 2</a></li>
     </ol>
   </nav>
 "
 `;
 
 exports[`getBreadcrumbsMarkup should generate breadcrumbs HTML for a valid path list in Swedish 1`] = `
 "
-  <nav id="breadcrumbs" aria-label="Brödsmulor" class="col-12 col-md-9">
-    <ol class="breadcrumb">
-      <li class="breadcrumb-item"><a href="/">Kth</a></li><li class="breadcrumb-item"><a href="/test1">Test 1</a></li><li class="breadcrumb-item"><a href="/test2">Test 2</a></li>
+  <nav id="breadcrumbs" aria-label="Brödsmulor" class="kth-breadcrumbs">
+    <ol class="kth-breadcrumbs__list">
+      <li><a href="/">Kth</a></li><li><a href="/test1">Test 1</a></li><li><a href="/test2">Test 2</a></li>
     </ol>
   </nav>
 "

diff --git a/lib/handlebars/helpers/breadcrumbs.js b/lib/handlebars/helpers/breadcrumbs.js
@@ -24,9 +24,9 @@ function getBreadcrumbsMarkup(pathList, lang) {
   const ariaLabel = /^sv/.test(lang) ? 'Brödsmulor' : 'Breadcrumbs'
 
   const output = `
-  <nav id="breadcrumbs" aria-label="${ariaLabel}" class="col-12 col-md-9">
-    <ol class="breadcrumb">
-      ${listItems.reduce((items, item) => items + `<li class="breadcrumb-item">${item}</li>`, '')}
+  <nav id="breadcrumbs" aria-label="${ariaLabel}" class="kth-breadcrumbs">
+    <ol class="kth-breadcrumbs__list">
+      ${listItems.reduce((items, item) => items + `<li>${item}</li>`, '')}
     </ol>
   </nav>
 `.replace(/,/g, '')