add display text option for sidebar component

* add display text option for sidebar component

* update package version

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" }
               ]
             }) }}
 

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",

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).

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>