@ministryofjustice/hmpps-mpop-frontend-components-lib 0.0.37 → 0.0.38

package/dist/assets/js/person-header.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/js/all.js

@@ -0,0 +1,6 @@
+/* global document */
+import * as personHeader from './person-header.js'
+
+export function initAll(scope = document) {
+  personHeader.init(scope)
+}

package/dist/js/person-header.js

@@ -0,0 +1,33 @@
+/* global document */
+const MODULE_NAME = 'mpop-risk-flags-toggle'
+
+/*
+ * Show/hide toggle for the person header's NDelius risk flags (transactional variant).
+ * The toggle is rendered hidden so that without JS the risk flags are always shown.
+ * State is not persisted - the flags are shown again on every page load.
+ */
+
+function setExpanded($toggle, $flags, expanded) {
+  $toggle.setAttribute('aria-expanded', String(expanded))
+  $toggle.replaceChildren($toggle.getAttribute(expanded ? 'data-hide-text' : 'data-show-text'))
+  $flags.toggleAttribute('hidden', !expanded)
+}
+
+function initToggle($toggle) {
+  const $flags = $toggle.parentElement.querySelector(`[id="${$toggle.getAttribute('aria-controls')}"]`)
+
+  if (!$flags || $toggle.hasAttribute(`data-${MODULE_NAME}-init`)) {
+    return
+  }
+
+  $toggle.setAttribute(`data-${MODULE_NAME}-init`, '')
+  $toggle.addEventListener('click', () =>
+    setExpanded($toggle, $flags, $toggle.getAttribute('aria-expanded') !== 'true'),
+  )
+  setExpanded($toggle, $flags, true)
+  $toggle.removeAttribute('hidden')
+}
+
+export function init(scope = document) {
+  scope.querySelectorAll(`[data-module="${MODULE_NAME}"]`).forEach(initToggle)
+}

package/dist/mpop/components/person-header/_person-header.scss

@@ -55,4 +55,24 @@
 .person-header__risk-panel + .person-header__risk-panel {
   margin-top: 0 !important;
   padding-top: 0 !important;
-}
+}
+
+.person-header__risk-tags[hidden] {
+  display: none;
+}
+
+.person-header__risk-flags-toggle {
+  @include govuk-font($size: 19);
+  align-self: flex-start;
+  margin: -2px 0;
+  padding: 2px 0;
+  border: 0;
+  background: none;
+  color: govuk-functional-colour(link);
+  text-align: left;
+  cursor: pointer;
+
+  @media (forced-colors: active) {
+    color: LinkText;
+  }
+}

package/dist/mpop/components/person-header/_risk-flag-badge.scss

@@ -97,5 +97,6 @@ $risk-badge-colours: (
 
 /* More risk flags link */
 .person-header__risk-tags .risk-badge-more {
+  @include govuk-font($size: 19);
   white-space: nowrap;
 }

package/dist/mpop/components/person-header/template.njk

@@ -103,8 +103,12 @@
             params.personRiskFlags.groups and
             (params.personRiskFlags.groups | length) > 0 %}
 
+    {# Unique per person so each toggle's aria-controls points at its own risk flags #}
+    {% set riskFlagsId = 'person-header-risk-flags-' + params.crn %}
+
     <div class='person-header__risk-panel'>
         <div
+                {% if params.collapsibleRiskFlags %}id='{{ riskFlagsId }}'{% endif %}
                 class='person-header__risk-tags'
                 data-qa='personRiskBadges'
         >
@@ -142,6 +146,22 @@
             </a>
             {% endif %}
         </div>
+
+        {% if params.collapsibleRiskFlags %}
+        <button
+                type='button'
+                class='govuk-link person-header__risk-flags-toggle'
+                data-module='mpop-risk-flags-toggle'
+                data-show-text='Show active NDelius risk flags'
+                data-hide-text='Hide active NDelius risk flags'
+                aria-controls='{{ riskFlagsId }}'
+                aria-expanded='true'
+                data-qa='riskFlagsToggle'
+                hidden
+        >
+            Hide active NDelius risk flags
+        </button>
+        {% endif %}
     </div>
     {% endif %}
     {% endif %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ministryofjustice/hmpps-mpop-frontend-components-lib",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "description": "MPOP front-end components library",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",