chore(release): 1.3.0 [skip ci]

# [1.3.0](v1.2.0...v1.3.0) (2022-03-31)

### Bug Fixes

* **components:** ensure that custom attributes get a space inserted before each one (INC-435) ([2b16360](2b16360))
* package.json & package-lock.json to reduce vulnerabilities ([f759d34](f759d34))

### Features

* **sub-navigation:** allow adding HTML classes to sub-navigation items ([81b60cb](81b60cb))

CHANGELOG.md

@@ -1,3 +1,16 @@
+# [1.3.0](https://github.com/ministryofjustice/moj-frontend/compare/v1.2.0...v1.3.0) (2022-03-31)
+
+
+### Bug Fixes
+
+* **components:** ensure that custom attributes get a space inserted before each one (INC-435) ([2b16360](https://github.com/ministryofjustice/moj-frontend/commit/2b163603854623d34a6c059e61676790ce9a2c3f))
+* package.json & package-lock.json to reduce vulnerabilities ([f759d34](https://github.com/ministryofjustice/moj-frontend/commit/f759d3471a2e673e1ebe3c47376e33ce2530aea7))
+
+
+### Features
+
+* **sub-navigation:** allow adding HTML classes to sub-navigation items ([81b60cb](https://github.com/ministryofjustice/moj-frontend/commit/81b60cb7c122508cd6bc60dd11e0acbb657ed192))
+
 # [1.2.0](https://github.com/ministryofjustice/moj-frontend/compare/v1.1.0...v1.2.0) (2022-01-10)
 
 

package/moj/components/badge/template.njk

@@ -1,3 +1,3 @@
-<span class="moj-badge {{- ' ' + params.classes if params.classes }}" {%- if (params.label) %} aria-label=""{% endif -%} {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<span class="moj-badge {{- ' ' + params.classes if params.classes }}" {%- if (params.label) %} aria-label=""{% endif -%} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{- params.html | safe if params.html else params.text -}}
-</span>
+</span>

package/moj/components/banner/template.njk

@@ -1,4 +1,4 @@
-<div class="moj-banner{% if params.type == 'success' %} moj-banner--success{% elif params.type == 'warning' %} moj-banner--warning{% else %} {{- ' ' + params.classes if params.classes}}{% endif %}" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-banner{% if params.type == 'success' %} moj-banner--success{% elif params.type == 'warning' %} moj-banner--warning{% else %} {{- ' ' + params.classes if params.classes}}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   {% if params.type == 'success' %}
     <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"/></svg>

package/moj/components/button-menu/template.njk

@@ -1,6 +1,6 @@
 {%- from "govuk/components/button/macro.njk" import govukButton %}
 
-<div class="moj-button-menu {{- ' ' + params.classes if params.classes }}" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-button-menu {{- ' ' + params.classes if params.classes }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="moj-button-menu__wrapper">
     {%- for item in params.items %}
       {{ govukButton({

package/moj/components/filter/template.njk

@@ -1,6 +1,6 @@
 {% from "govuk/components/button/macro.njk" import govukButton %}
 
-<div class="moj-filter" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-filter" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   <div class="moj-filter__header">
 
@@ -57,4 +57,4 @@
 
   </div>
 
-</div>
+</div>

package/moj/components/header/template.njk

@@ -1,4 +1,4 @@
-<header class="moj-header {{- ' ' + params.classes if params.classes}}" role="banner" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<header class="moj-header {{- ' ' + params.classes if params.classes}}" role="banner" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   <div class="moj-header__container {%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
 
@@ -51,13 +51,13 @@
     {%- if params.navigation %}
       <div class="moj-header__content">
 
-        <nav class="moj-header__navigation{% if params.navigation.classes %} {{ params.navigation.classes }}{% endif %}"{% if (params.navigation.label) %} aria-label="{{ params.navigation.label }}" {% endif %} {%- for attribute, value in params.navigation.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+        <nav class="moj-header__navigation{% if params.navigation.classes %} {{ params.navigation.classes }}{% endif %}"{% if (params.navigation.label) %} aria-label="{{ params.navigation.label }}" {% endif %} {%- for attribute, value in params.navigation.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
           <ul class="moj-header__navigation-list">
 
             {%- for item in params.navigation.items %}
               <li class="moj-header__navigation-item">
-                <a class="moj-header__navigation-link" href="{{ item.href }}" {{ 'aria-current="page"' | safe if item.active }} {%- for attribute, value in item.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+                <a class="moj-header__navigation-link" href="{{ item.href }}" {{ 'aria-current="page"' | safe if item.active }} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
                   {{- item.html | safe if item.html else item.text -}}
                 </a>
               </li>

package/moj/components/identity-bar/template.njk

@@ -1,6 +1,6 @@
 {%- from "moj/components/button-menu/macro.njk" import mojButtonMenu %}
 
-<div class="moj-identity-bar {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-identity-bar {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   <div class="moj-identity-bar__container">
 
@@ -22,4 +22,4 @@
 
   </div>
 
-</div>
+</div>

package/moj/components/messages/template.njk

@@ -1,4 +1,4 @@
-<div id="{{ params.id | default('messages') }}" class="moj-messages-container {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div id="{{ params.id | default('messages') }}" class="moj-messages-container {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   <div class="moj-message-list">
 
@@ -27,4 +27,4 @@
 
   </div>
 
-</div>
+</div>

package/moj/components/multi-file-upload/template.njk

@@ -1,4 +1,4 @@
-<div class="moj-multi-file-upload {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-multi-file-upload {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="moj-multi-file__uploaded-files {% if params.uploadedFiles.items.length == 0 %}moj-hidden{% endif%}">
     <h2 class="govuk-heading-m">{{ params.uploadedFiles.heading.html | safe if params.uploadedFiles.heading.html else params.uploadedFiles.heading.text }}</h2>
     <div class="govuk-summary-list moj-multi-file-upload__list">
@@ -22,4 +22,4 @@
   <div class="moj-multi-file-upload__upload">
     {{ params.uploadHtml | safe }}
   </div>
-</div>
+</div>

package/moj/components/notification-badge/template.njk

@@ -1,5 +1,5 @@
 {%- if params.text.length %}
-<span id="{{ params.id | default('notifications') }}" class="moj-notification-badge {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<span id="{{ params.id | default('notifications') }}" class="moj-notification-badge {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{- params.text | safe -}}
 </span>
-{% endif -%}
+{% endif -%}

package/moj/components/page-header-actions/template.njk

@@ -1,6 +1,6 @@
 {%- from "moj/components/button-menu/macro.njk" import mojButtonMenu %}
 
-<div class="moj-page-header-actions {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-page-header-actions {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   <div class="moj-page-header-actions__title">
     <h{{ params.heading.level | default(1) }} class="{{params.heading.classes | default('govuk-heading-xl')}}">
@@ -17,4 +17,4 @@
     </div>
   {% endif %}
 
-</div>
+</div>

package/moj/components/primary-navigation/template.njk

@@ -4,13 +4,13 @@
 
     <div class="moj-primary-navigation__nav">
 
-      <nav class="moj-primary-navigation {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+      <nav class="moj-primary-navigation {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
         <ul class="moj-primary-navigation__list">
 
           {%- for item in params.items %}
             <li class="moj-primary-navigation__item">
-              <a class="moj-primary-navigation__link" {{ 'aria-current="page"' | safe if item.active }} href="{{ item.href }}" {%- for attribute, value in item.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+              <a class="moj-primary-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>
             </li>

package/moj/components/progress-bar/template.njk

@@ -1,12 +1,12 @@
-<div id="{{ params.id | default('progress') }}" class="moj-progress-bar {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div id="{{ params.id | default('progress') }}" class="moj-progress-bar {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <ol class="moj-progress-bar__list">
     {%- for item in params.items %}
-    <li id="{{ item.id | default('progress-item-' + loop.index) }}" class="moj-progress-bar__item {{- ' ' + item.classes if item.classes }}" {{- ' aria-current="step"' | safe if item.active }} {%- for attribute, value in item.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+    <li id="{{ item.id | default('progress-item-' + loop.index) }}" class="moj-progress-bar__item {{- ' ' + item.classes if item.classes }}" {{- ' aria-current="step"' | safe if item.active }} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
       <span class="moj-progress-bar__icon {{- ' moj-progress-bar__icon--complete' if item.complete }}"></span>
       <span class="moj-progress-bar__label {{- ' ' + item.label.classes if item.label.classes }}">
         {{- item.label.html | safe if item.label.html else item.label.text -}}
       </span>
     </li>
     {% endfor -%}
   </ol>
-</div>
+</div>

package/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).*

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

@@ -1,10 +1,10 @@
-<nav class="moj-sub-navigation {{- ' ' + params.classes if params.classes}}" aria-label="{{ params.label or 'Secondary navigation region' }}" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<nav class="moj-sub-navigation {{- ' ' + params.classes if params.classes}}" aria-label="{{ params.label or 'Secondary navigation region' }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   <ul class="moj-sub-navigation__list">
 
     {%- for item in params.items %}
-      <li class="moj-sub-navigation__item">
-        <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 %}>
+      <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>
       </li>

package/moj/components/ticket-panel/template.njk

@@ -1,12 +1,12 @@
-<article 
+<article
   class="moj-ticket-panel {{- ' ' + params.classes if params.classes}}"
-      {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+      {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   {%- for item in params.items %}
 
-    <section 
+    <section
       class="moj-ticket-panel__content {{- ' ' + item.classes if item.classes}}"
-      {%- for attribute, value in item.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
       {{- item.html | safe if item.html else item.text -}}
     </section>