@ministryofjustice/hmpps-mpop-frontend-components-lib 0.0.36 → 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

@@ -60,12 +60,17 @@ $risk-badge-very-high: #711a0d;
 $risk-badge-high: #d4351c;
 $risk-badge-medium: #f2590d;
 $risk-badge-low: #85994b;
+$cohort-risk-badge: #54319f;
+$misc-risk-badge: #484949;
 
+/* Map badge classes to their border and hover colours */
 $risk-badge-colours: (
         'very-high': $risk-badge-very-high,
         'high': $risk-badge-high,
         'medium': $risk-badge-medium,
         'low': $risk-badge-low,
+        'cohort': $cohort-risk-badge,
+        'misc': $misc-risk-badge,
 );
 
 @each $level, $colour in $risk-badge-colours {
@@ -75,19 +80,23 @@ $risk-badge-colours: (
     &:hover {
       background-color: $colour;
       color: #fff;
-      text-decoration-thickness: 2px;
     }
   }
 }
 
-.person-header__risk-tags .dps-alert-status:focus {
-  outline: 3px solid transparent;
-  color: #0b0c0c;
-  background-color: #ffdd00;
-  box-shadow: 0 -2px #ffdd00, 0 4px #0b0c0c;
-  text-decoration: none;
+/* Keyboard focus state and Mouse hover state */
+.person-header__risk-tags a.dps-alert-status {
+  &:hover,
+  &:focus,
+  &:focus-visible {
+    border: 3px solid #0b0c0c !important;
+    outline: none !important;
+    box-shadow: 0 0 0 3px #ffdd00 !important;
+  }
 }
 
+/* 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

@@ -1,5 +1,5 @@
 
-<div class='person-header'>
+<div class='person-header govuk-body'>
     <div class='person-header__band{% if params.photo %} person-header__band--with-photo{% endif %}'>
         {% if params.photo %}
         <img
@@ -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'
         >
@@ -117,6 +121,8 @@
             >
                 {% if risk.text | replace(' - Very High', '') != risk.text %}
                 {{ risk.text | replace(' - Very High', ' -&nbsp;<strong>Very High</strong>') | safe }}
+                {% elif risk.text | replace(' - Very high', '') != risk.text %}
+                {{ risk.text | replace(' - Very high', ' -&nbsp;<strong>Very high</strong>') | safe }}
                 {% elif risk.text | replace(' - High', '') != risk.text %}
                 {{ risk.text | replace(' - High', ' -&nbsp;<strong>High</strong>') | safe }}
                 {% elif risk.text | replace(' - Medium', '') != risk.text %}
@@ -140,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/dist/mpop/components/supervision-package/partials/_early-engagement.njk

@@ -1,3 +1,5 @@
+{% set appointmentsRemaining = (params.currentYear.appointments.allowance | int) - (params.earlyEngagement.weeks | int) %}
+
 {% if forename and (params.earlyEngagement.completed | int < params.earlyEngagement.weeks | int) %}
     <p class='govuk-body'>
         You should see {{ forename }} every week for the first {{ params.earlyEngagement.weeks }} weeks of the sentence.
@@ -10,7 +12,7 @@
 
 {% if params.currentYear.appointments.allowance is defined and params.earlyEngagement.weeks is defined %}
     <p class='govuk-body'>
-        {{ forename }} will then have a maximum of {{ (params.currentYear.appointments.allowance | int) - (params.earlyEngagement.weeks | int) }} supervision appointments for the rest of this sentence year.
+        {{ forename }} will then have a maximum of {{ (appointmentsRemaining) if appointmentsRemaining > 0 else 0 }} supervision appointments for the rest of this sentence year.
     </p>
 {% endif %}
 

package/dist/mpop/components/supervision-package-summary/template.njk

@@ -98,8 +98,9 @@
      {% if completed < required %}
    <p class="govuk-body">You should see {{ forename }} every week for the first {{ params.earlyEngagement.weeks }} weeks of the sentence.</p>
  {% endif %}
-      <p class="govuk-body">Early engagement is expected to end on {{ params.earlyEngagement.endDate | dateWithYear }} if {{ forename }} attends the required appointments by then.</p>
-       <p class="govuk-body">{{ forename }} will then have a maximum of {{ (params.currentYear.appointments.allowance | int(0)) - (params.earlyEngagement.weeks | int(0)) }} supervision appointments for the rest of this sentence year.</p>
+      <p class="govuk-body">Early engagement is expected to end on {{ params.earlyEngagement.endDate | dateWithYear }}{% if completed < required %} if {{ forename }} attends the required appointments by then{% endif %}.</p>
+      {% set appointmentsRemaining = (params.currentYear.appointments.allowance | int(0)) - (params.earlyEngagement.weeks | int(0)) %}
+       <p class="govuk-body">{{ forename }} will then have a maximum of {{ (appointmentsRemaining) if appointmentsRemaining > 0 else 0 }} supervision appointments for the rest of this sentence year.</p>
     {% endif %}
     {% if params.currentPhase.phase.code == 'STD' %}
       <p class="govuk-body">{{ forename }} has a maximum of {{ remaining }} appointments remaining.</p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ministryofjustice/hmpps-mpop-frontend-components-lib",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "description": "MPOP front-end components library",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -35,10 +35,22 @@
   },
   "jest": {
     "transform": {
-      "^.+\\.(ts|js|mjs|tsx|jsx)$": "babel-jest"
+      "^.+\\.(ts|js|mjs|tsx|jsx)$": [
+        "ts-jest",
+        {
+          "tsconfig": {
+            "allowJs": true,
+            "ignoreDeprecations": "6.0",
+            "module": "commonjs",
+            "moduleResolution": "node",
+            "esModuleInterop": true,
+            "allowSyntheticDefaultImports": true
+          }
+        }
+      ]
     },
     "transformIgnorePatterns": [
-      "/node_modules/(?!(@exodus|@csstools|jsdom|parse5|abab|entities|nunjucks|@asamuzakjp)/)"
+      "/node_modules/(?!(@exodus|@csstools|parse5|abab|entities|nunjucks|@asamuzakjp)/)"
     ],
     "testMatch": [
       "<rootDir>/**/**/?(*.)(cy|test).{ts,js,jsx,mjs}"
@@ -60,9 +72,6 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.29.7",
-    "@babel/preset-env": "^7.29.7",
-    "@babel/preset-typescript": "^7.29.7",
     "@ministryofjustice/eslint-config-hmpps": "1.0.3",
     "@ministryofjustice/hmpps-npm-script-allowlist": "0.0.6",
     "@ministryofjustice/hmpps-precommit-hooks": "3.0.2",
@@ -74,7 +83,6 @@
     "@types/luxon": "3.7.5",
     "@types/node": "25.9.5",
     "@typescript-eslint/eslint-plugin": "8.69.0",
-    "babel-jest": "^30.5.1",
     "dotenv": "17.4.2",
     "eslint-import-resolver-typescript": "4.4.5",
     "eslint-plugin-no-only-tests": "3.4.0",
@@ -85,8 +93,8 @@
     "nunjucks": "^3.2.4",
     "prettier": "3.9.6",
     "rollup": "^4.63.1",
-    "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-dts": "^6.5.1",
+    "ts-jest": "^29.4.14",
     "tslib": "^2.8.1",
     "tsx": "4.23.13",
     "typescript": "^6.0.3"
@@ -106,11 +114,13 @@
     "brace-expansion@1": "1.1.21",
     "brace-expansion@2": "2.1.7",
     "brace-expansion@5": "5.0.12",
+    "handlebars": "4.7.10",
     "jsdom": {
       "undici": "7.29.1"
     },
     "node-gyp": {
       "undici": "6.28.1"
-    }
+    },
+    "source-map-js": "1.2.2"
   }
 }