From 7d20148d6189bf7d01b9044d014d442dc6ce938a Mon Sep 17 00:00:00 2001
From: Boris <BobbyCGD@users.noreply.github.com>
Date: Fri, 16 Jul 2021 10:18:58 +0100
Subject: [PATCH] add display text option for sidebar component

* add display text option for sidebar component

* update package version
---
 app/components/side-navigation/index.njk         |  8 ++++----
 package.json                                     |  2 +-
 packages/components/side-navigation/README.md    | 11 ++++++-----
 packages/components/side-navigation/template.njk |  2 +-
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/components/side-navigation/index.njk b/app/components/side-navigation/index.njk
index f3c726ed..cdc97647 100644
--- a/app/components/side-navigation/index.njk
+++ b/app/components/side-navigation/index.njk
@@ -13,10 +13,10 @@
           <div class="nhsuk-side-navigation-container" >
             {{ sideNavigation({
               items: [
-                { id: "about" },
-                { id: "features" },
-                { id: "testimonials" },
-                { id: "next_steps" }
+                { id: "about", display: "About" },
+                { id: "features", display: "Features" },
+                { id: "testimonials", display: "Testimonials" },
+                { id: "next_steps", display: "Next Steps" }
               ]
             }) }}
 
diff --git a/package.json b/package.json
index df88f05c..10abdf2a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nwisbeta/nhswales-frontend",
-  "version": "0.0.7-alpha",
+  "version": "0.0.8-alpha",
   "description": "NHS.Wales frontend contains the code you need to start building user interfaces for NHS websites and services.",
   "scripts": {
     "prepare": "gulp bundle",
diff --git a/packages/components/side-navigation/README.md b/packages/components/side-navigation/README.md
index 0eb020b2..c59ac446 100644
--- a/packages/components/side-navigation/README.md
+++ b/packages/components/side-navigation/README.md
@@ -15,8 +15,8 @@ Find out more about the Side Navigation component and when to use it in the[NHS
 <div class="nhsuk-side-navigation-container" >
   {{ sideNavigation({
     items: [
-      { id: "about" },
-      { id: "features" }
+      { id: "about", display: "About" },
+      { id: "features", display: "Features" }
     ]
   }) }}
   <div class="nhsuk-side-navigation-options">
@@ -51,8 +51,8 @@ Find out more about the Side Navigation component and when to use it in the[NHS
 <div class="nhsuk-side-navigation-container" >
   {{ sideNavigation({
     items: [
-      { id: "about" },
-      { id: "features" }
+      { id: "about", display: "About" },
+      { id: "features", display: "Features" }
     ]
   }) }}
 
@@ -76,6 +76,7 @@ The Side Navigation Nunjucks macro takes the following arguments:
 | Name                    | Type     | Required  | Description  |
 | ------------------------|----------|-----------|--------------|
 | **items**               | array    | Yes       | Array of items in the Side Navigation. |
-| **items.[].id**       | string   | Yes       | Id value of a section to point to. |
+| **items.[].id**         | string   | Yes       | Id value of a section to point to. |
+| **items.[].display**    | string   | Yes       | Display text for the menu option. |
 
 If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).
diff --git a/packages/components/side-navigation/template.njk b/packages/components/side-navigation/template.njk
index d4b7dbf5..4a6a4464 100644
--- a/packages/components/side-navigation/template.njk
+++ b/packages/components/side-navigation/template.njk
@@ -2,7 +2,7 @@
   <ul class="nhsuk-side-navigation__list">
     {%- for item in params.items %}
       <li class="nhsuk-side-navigation__item">
-        <a class="nhsuk-side-navigation__link" href="#{{ item.id }}">{{ item.id | replace("_", " ") | capitalize }}</a>
+        <a class="nhsuk-side-navigation__link" href="#{{ item.id }}">{{ item.display }}</a>
       </li>
     {%- endfor %}
   </ul>