feat(sub-navigation): allow adding HTML classes to sub-navigation items

src/moj/components/sub-navigation/README.md

@@ -44,6 +44,7 @@ This component accepts the following arguments.
 |text|string|Yes|If `html` is set, this is not required. Text to use within the anchor. If `html` is provided, the `text` argument will be ignored.|
 |html|string|Yes|If `text` is set, this is not required. HTML to use within the anchor. If `html` is provided, the `text` argument will be ignored.|
 |active|boolean|No|Flag to mark the navigation item as active or not. Defaults to `false`.|
+|classes|string|No|Classes to add to the list `li` item.|
 |attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor.|
 
 *Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).*

src/moj/components/sub-navigation/template.njk

@@ -3,7 +3,7 @@
   <ul class="moj-sub-navigation__list">
 
     {%- for item in params.items %}
-      <li class="moj-sub-navigation__item">
+      <li class="moj-sub-navigation__item {{- ' ' + item.classes if item.classes}}">
         <a class="moj-sub-navigation__link" {{ 'aria-current="page"' | safe if item.active }} href="{{ item.href }}" {%- for attribute, value in item.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
           {{- item.html | safe if item.html else item.text -}}
         </a>