From 85a07207a0fe4199e0c30dff9b78e5fba966b420 Mon Sep 17 00:00:00 2001
From: Ellen <ellen.widerstrand@gmail.com>
Date: Wed, 28 Aug 2024 10:24:41 +0200
Subject: [PATCH 1/2] feat: update markup and documentation for breadcrumbs

---
 README.md                                        |  3 +++
 .../__snapshots__/breadcrumbs.test.js.snap       | 16 ++++++++--------
 lib/handlebars/helpers/breadcrumbs.js            |  8 ++++----
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 3ba2ee1..403cb51 100644
--- 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
index 0e27852..c637d11 100644
--- a/lib/handlebars/helpers/__snapshots__/breadcrumbs.test.js.snap
+++ b/lib/handlebars/helpers/__snapshots__/breadcrumbs.test.js.snap
@@ -2,20 +2,20 @@
 
 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>
-    </ol>
+  <nav id="breadcrumbs" aria-label="Breadcrumbs" class="kth-breadcrumbs">
+    <ul 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>
+    </ul>
   </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>
-    </ol>
+  <nav id="breadcrumbs" aria-label="Brödsmulor" class="kth-breadcrumbs">
+    <ul 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>
+    </ul>
   </nav>
 "
 `;
diff --git a/lib/handlebars/helpers/breadcrumbs.js b/lib/handlebars/helpers/breadcrumbs.js
index e758bbc..1a8d6dc 100644
--- a/lib/handlebars/helpers/breadcrumbs.js
+++ b/lib/handlebars/helpers/breadcrumbs.js
@@ -24,10 +24,10 @@ 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>`, '')}
-    </ol>
+  <nav id="breadcrumbs" aria-label="${ariaLabel}" class="kth-breadcrumbs">
+    <ul class="kth-breadcrumbs__list">
+      ${listItems.reduce((items, item) => items + `<li>${item}</li>`, '')}
+    </ul>
   </nav>
 `.replace(/,/g, '')
   return output

From f7161bd9c831e02cb71dbf0411a6fa546e81394c Mon Sep 17 00:00:00 2001
From: Ellen <ellen.widerstrand@gmail.com>
Date: Wed, 28 Aug 2024 10:33:52 +0200
Subject: [PATCH 2/2] fix: use ol instead of ul

---
 .../helpers/__snapshots__/breadcrumbs.test.js.snap        | 8 ++++----
 lib/handlebars/helpers/breadcrumbs.js                     | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/handlebars/helpers/__snapshots__/breadcrumbs.test.js.snap b/lib/handlebars/helpers/__snapshots__/breadcrumbs.test.js.snap
index c637d11..a3c2d3c 100644
--- a/lib/handlebars/helpers/__snapshots__/breadcrumbs.test.js.snap
+++ b/lib/handlebars/helpers/__snapshots__/breadcrumbs.test.js.snap
@@ -3,9 +3,9 @@
 exports[`getBreadcrumbsMarkup should generate breadcrumbs HTML for a valid path list in English 1`] = `
 "
   <nav id="breadcrumbs" aria-label="Breadcrumbs" class="kth-breadcrumbs">
-    <ul class="kth-breadcrumbs__list">
+    <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>
-    </ul>
+    </ol>
   </nav>
 "
 `;
@@ -13,9 +13,9 @@ exports[`getBreadcrumbsMarkup should generate breadcrumbs HTML for a valid path
 exports[`getBreadcrumbsMarkup should generate breadcrumbs HTML for a valid path list in Swedish 1`] = `
 "
   <nav id="breadcrumbs" aria-label="Brödsmulor" class="kth-breadcrumbs">
-    <ul class="kth-breadcrumbs__list">
+    <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>
-    </ul>
+    </ol>
   </nav>
 "
 `;
diff --git a/lib/handlebars/helpers/breadcrumbs.js b/lib/handlebars/helpers/breadcrumbs.js
index 1a8d6dc..8b48788 100644
--- a/lib/handlebars/helpers/breadcrumbs.js
+++ b/lib/handlebars/helpers/breadcrumbs.js
@@ -25,9 +25,9 @@ function getBreadcrumbsMarkup(pathList, lang) {
 
   const output = `
   <nav id="breadcrumbs" aria-label="${ariaLabel}" class="kth-breadcrumbs">
-    <ul class="kth-breadcrumbs__list">
+    <ol class="kth-breadcrumbs__list">
       ${listItems.reduce((items, item) => items + `<li>${item}</li>`, '')}
-    </ul>
+    </ol>
   </nav>
 `.replace(/,/g, '')
   return output