@ministryofjustice/hmpps-arns-frontend-components-lib 2.0.1 → 2.1.0

package/dist/_all.scss

@@ -2,7 +2,7 @@
 // Import this file into your project's main SCSS file
 // Requires govuk-frontend to be imported first
 
-@import "./arns/components/predictor-badge/predictor-badge";
+@import "./arns/components/badge-base/badge-base";
 @import "./arns/components/expanded-predictor-badge/expanded-predictor-badge";
 @import "./arns/components/predictor-scale/predictor-scale";
 @import "./arns/components/predictor-scale-bar/predictor-scale-bar";

package/dist/arns/components/{predictor-badge/_predictor-badge.scss → badge-base/_badge-base.scss}

@@ -14,18 +14,18 @@ $default-colour: govuk-colour("mid-grey");
 $default-colour--light: govuk-colour("light-grey");
 $default-colour__text: govuk-colour("black");
 
-@mixin arns-predictor-badge-base($primary-colour, $secondary-colour, $text-colour) {
+@mixin arns-badge-base-base($primary-colour, $secondary-colour, $text-colour) {
   display: inline-flex;
   outline: 2px solid $primary-colour;
 
-  & .arns-predictor-badge__type_and_level {
+  & .arns-badge-base__type_and_level {
     @include govuk-font(19, "regular");
     color: $text-colour;
 
     padding: 2px 10px;
   }
 
-  & .arns-predictor-badge__score {
+  & .arns-badge-base__score {
     @include govuk-font(19, "bold");
     color: govuk-colour("black");
 
@@ -36,7 +36,7 @@ $default-colour__text: govuk-colour("black");
     align-content: center;
   }
 
-  & .arns-predictor-badge__static_or_dynamic {
+  & .arns-badge-base__static_or_dynamic {
     @include govuk-font(19, "regular");
     color: #282D30;
     background-color: #cecece;
@@ -49,26 +49,26 @@ $default-colour__text: govuk-colour("black");
   }
 }
 
-.arns-predictor-badge--very-high {
-  @include arns-predictor-badge-base(
+.arns-badge-base--very-high {
+  @include arns-badge-base-base(
       $very-high-score-colour,
       $very-high-score-colour--light,
       $very-high-score-colour__text
   );
 }
 
-.arns-predictor-badge--high {
-  @include arns-predictor-badge-base($high-score-colour, $high-score-colour--light, $high-score-colour__text);
+.arns-badge-base--high {
+  @include arns-badge-base-base($high-score-colour, $high-score-colour--light, $high-score-colour__text);
 }
 
-.arns-predictor-badge--medium {
-  @include arns-predictor-badge-base($medium-score-colour, $medium-score-colour--light, $medium-score-colour__text);
+.arns-badge-base--medium {
+  @include arns-badge-base-base($medium-score-colour, $medium-score-colour--light, $medium-score-colour__text);
 }
 
-.arns-predictor-badge--low {
-  @include arns-predictor-badge-base($low-score-colour, $low-score-colour--light, $low-score-colour__text);
+.arns-badge-base--low {
+  @include arns-badge-base-base($low-score-colour, $low-score-colour--light, $low-score-colour__text);
 }
 
-.arns-predictor-badge--default {
-  @include arns-predictor-badge-base($default-colour, $default-colour--light, $default-colour__text);
+.arns-badge-base--default {
+  @include arns-badge-base-base($default-colour, $default-colour--light, $default-colour__text);
 }

package/dist/arns/components/badge-base/macro.njk

@@ -0,0 +1,3 @@
+{% macro badgeBase(name, band, score, staticOrDynamic, shouldShowScore) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/dist/arns/components/badge-base/template.njk

@@ -0,0 +1,62 @@
+{#
+  ARNS Badge Base Component
+
+  @name badgeBase
+
+  @description Common component for displaying a specified risk predictor score badge.
+  It uses the latest assessment from the provided data set.
+
+  @example
+  In template:
+    {% from "components/badge-base/macro.njk" import badgeBase %}
+    {{ badgeBase({
+      name: string,
+      band: "LOW",
+      score: "12.84",
+      staticOrDynamic: "Static",
+      shouldShowScore: true,
+    }) }}
+
+  @param {object} params
+    @param {string} name: Predictor name or Risk of Serious Harm text
+    @param {BandLevel} band: Risk level,
+    @param {number | undefined} score: Percentage score,
+    @param {StaticOrDynamicContent} staticOrDynamic: Static or Dynamic,
+    @param {boolean | undefined} shouldShowScore: Optional config override - If true, displays the percentage score
+#}
+{%- from "govuk/components/tag/macro.njk" import govukTag -%}
+
+{% set badgeClass = '' %}
+{% switch band %}
+  {% case 'VERY HIGH' %}
+    {% set badgeClass = 'arns-badge-base--very-high' %}
+  {% case 'HIGH' %}
+    {% set badgeClass = 'arns-badge-base--high' %}
+  {% case 'MEDIUM' %}
+    {% set badgeClass = 'arns-badge-base--medium' %}
+  {% case 'LOW' %}
+    {% set badgeClass = 'arns-badge-base--low' %}
+  {% default %}
+    {% set badgeClass = 'arns-badge-base--default' %}
+{% endswitch %}
+{% if band == null or (shouldShowScore == true and score == null) %}
+  {% set band = 'UNKNOWN' %}
+  {% set badgeClass = 'arns-badge-base--default' %}
+{% else %}
+  {% set band = band | replace('_', ' ') %}
+{% endif %}
+<div class="{{ badgeClass }}"
+           data-badge-base="{{ name }} {{ band }}">
+
+        <span class="arns-badge-base__type_and_level" data-test-id="nameAndBand">{{ name }} <strong>{{ band }}</strong></span>
+
+        {% if shouldShowScore and badgeClass != 'arns-badge-base--default' %}
+          <span class="arns-badge-base__score" data-test-id="score">{{ score }}%</span>
+        {% endif %}
+
+        {% if staticOrDynamic and badgeClass !== 'arns-badge-base--default' %}
+          <span class="arns-badge-base__static_or_dynamic" data-test-id="staticOrDynamic">
+            {{ govukTag({ text: staticOrDynamic, classes: "govuk-tag--grey arns-badge-base__govuk-tag-sizing"}) }}
+          </span>
+        {% endif %}
+      </div>

package/dist/arns/components/predictor-badge/template.njk

@@ -26,8 +26,7 @@
     @param {boolean} [params.showScore] - Optional config override - If true, displays the percentage score
     @param {boolean} [params.legacyFallback] - Optional (default false) - If true and predictor requested is OGRS4-gen, fallback to showing the OGRS3-gen predictor if the latest assessment is OGRS3-gen.
 #}
-{%- from "govuk/components/tag/macro.njk" import govukTag -%}
-
+{%- from "../badge-base/macro.njk" import badgeBase -%}
 {% set latestAssessment = params.data.assessments | first if params.data.assessments else null %}
 
 {% if latestAssessment %}
@@ -44,43 +43,7 @@
     {% if key == predictorToRender %}
 
       {% set shouldShowScore = params.showScore if params.showScore is defined else config.showScore %}
-
-      {% set badgeClass = '' %}
-      {% switch predictor.band %}
-      {% case 'VERY HIGH' %}
-        {% set badgeClass = 'arns-predictor-badge--very-high' %}
-      {% case 'HIGH' %}
-        {% set badgeClass = 'arns-predictor-badge--high' %}
-      {% case 'MEDIUM' %}
-        {% set badgeClass = 'arns-predictor-badge--medium' %}
-      {% case 'LOW' %}
-        {% set badgeClass = 'arns-predictor-badge--low' %}
-      {% default %}
-          {% set badgeClass = 'arns-predictor-badge--default' %}
-      {% endswitch %}
-
-      {% if predictor.band == null or (shouldShowScore == true and predictor.score == null) %}
-        {% set band = 'UNKNOWN' %}
-        {% set badgeClass = 'arns-predictor-badge--default' %}
-      {% else %}
-        {% set band = predictor.band | replace('_', ' ') %}
-      {% endif %}
-
-      <div class="{{ badgeClass }}"
-           data-predictor-badge="{{ predictor.name }} {{ band }}">
-
-        <span class="arns-predictor-badge__type_and_level" data-test-id="nameAndBand">{{ predictor.name }} <strong>{{ band }}</strong></span>
-
-        {% if shouldShowScore and badgeClass != 'arns-predictor-badge--default' %}
-          <span class="arns-predictor-badge__score" data-test-id="score">{{ predictor.score }}%</span>
-        {% endif %}
-
-        {% if predictor.staticOrDynamic and badgeClass !== 'arns-predictor-badge--default' %}
-          <span class="arns-predictor-badge__static_or_dynamic" data-test-id="staticOrDynamic">
-            {{ govukTag({ text: predictor.staticOrDynamic, classes: "govuk-tag--grey arns-predictor-badge__govuk-tag-sizing"}) }}
-          </span>
-        {% endif %}
-      </div>
+      {{ badgeBase(predictor.name, predictor.band, predictor.score, predictor.staticOrDynamic, shouldShowScore) }}
     {% endif %}
   {% endfor %}
 {% endif %}

package/dist/arns/components/rosh-badge/macro.njk

@@ -0,0 +1,3 @@
+{% macro roshBadge(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/dist/arns/components/rosh-badge/template.njk

@@ -0,0 +1,27 @@
+{#
+  ARNS Rosh Badge Component
+
+  @name roshBadge
+
+  @description Displays a specified rosh badge.
+  It uses the latest assessment from the provided data set.
+
+  @example
+  In route handler:
+    const riskData = await arnsComponents.getRoshData(token, 'crn', 'X123456')
+    res.render('page', { riskData })
+
+  In template:
+    {% from "components/rosh-badge/macro.njk" import roshBadge %}
+    {{ roshBadge({
+      data: roshData
+    }) }}
+
+  @param {object} params
+    @param {RoshData} params.data - Rosh data object from ArnsComponents.getRoshData() containing an 'assessment' object
+#}
+{%- from "../badge-base/macro.njk" import badgeBase -%}
+{% set assessment = params.data.assessment if params.data.assessment else "null" %}
+{% if assessment %}
+  {{ badgeBase("Risk of serious harm", assessment.overallRisk, null, null, false) }}
+{% endif %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ministryofjustice/hmpps-arns-frontend-components-lib",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "ARNS front-end library for risk score visualisations",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",