@ministryofjustice/hmpps-arns-frontend-components-lib 0.0.13 → 0.0.15

package/dist/_all.scss

@@ -5,3 +5,5 @@
 @import "./arns/components/predictor-badge/predictor-badge";
 @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";
+@import "./arns/components/predictor-scores-accordion/predictor-scores-accordion";

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

@@ -50,7 +50,7 @@ In template:
       {% endswitch %}
 
       {% set staticOrDynamicClass = 'arns-predictor-badge__static_or_dynamic' %}
-      {% if shouldShowScore and predictor.band in ['VERY HIGH', 'MEDIUM'] and predictor.staticOrDynamic === 'DYNAMIC' %}
+      {% if shouldShowScore and predictor.band in ['VERY HIGH', 'MEDIUM'] and predictor.staticOrDynamic | upper === 'DYNAMIC' %}
         {% set staticOrDynamicClass = staticOrDynamicClass + ' arns-predictor-badge__wrapped_static_or_dynamic' %}
       {% endif %}
 
@@ -67,24 +67,26 @@ In template:
         {% set band = predictor.band | replace('_', ' ') %}
       {% endif %}
 
-      <div class="{{ badgeClass }} {{ badgeWidthClass }}">
+      <div class="{{ badgeClass }} {{ badgeWidthClass }}"
+           data-expanded-predictor-badge="{{ predictor.name }} {{ band }}">
+
         <span
-          class="arns-predictor-badge__type">{{ predictor.name }}</span>
+          class="arns-predictor-badge__type" data-test-id="name">{{ predictor.name }}</span>
 
         <div class="arns-predictor-badge__stats">
-          <span class="arns-predictor-badge__level">{{ band }}</span>
+          <span class="arns-predictor-badge__level" data-test-id="band">{{ band }}</span>
 
           {% if shouldShowScore and badgeClass != 'arns-expanded-predictor-badge--default' %}
-            <span class="arns-predictor-badge__score">{{ predictor.score }}%</span>
+            <span class="arns-predictor-badge__score" data-test-id="score">{{ predictor.score }}%</span>
           {% endif %}
 
           {% if predictor.staticOrDynamic and badgeClass != 'arns-expanded-predictor-badge--default' %}
-            <span class="{{ staticOrDynamicClass }}">{{ predictor.staticOrDynamic }}</span>
+            <span class="{{ staticOrDynamicClass }}" data-test-id="staticOrDynamic">{{ predictor.staticOrDynamic }}</span>
           {% endif %}
 
         </div>
 
-        <span class="arns-predictor-badge__last_updated">Last updated: {{ predictor.completedDate }}</span>
+        <span class="arns-predictor-badge__last_updated" data-test-id="completedDate">Last updated: {{ predictor.completedDate }}</span>
 
       </div>
     {% endif %}

package/dist/arns/components/predictor-scale/_predictor-scale.scss

@@ -1,42 +1,5 @@
-$very-high-score-colour: #942514;
-$very-high-score-colour--light: #ffac9f;
-$very-high-score-colour__text: #711a0d;
-$high-score-colour: #d4351c;
-$high-score-colour--light: #f6d7d2;
-$high-score-colour__text: #942514;
-$medium-score-colour: #f47738;
-$medium-score-colour--light: #f9e8bd;
-$medium-score-colour__text: #a34e00;
-$low-score-colour: #85994b;
-$low-score-colour--light: #dee9bd;
-$low-score-colour__text: #485b10;
 $border-colour: #B1B4B6;
 
-@mixin arns-scale-marker-card-colour($primary-colour, $secondary-colour, $text-colour) {
-  & .arns-scale-marker__card {
-    border: 2px solid $primary-colour;
-
-    & .arns-scale-marker__card-top {
-      & h3,
-      & p {
-        color: $text-colour;
-      }
-    }
-
-    & .arns-scale-marker__card-bottom {
-      background-color: $secondary-colour;
-    }
-
-    & .arns-scale-marker__card-pointer {
-      border-top: 16px solid $primary-colour;
-    }
-
-    & .arns-scale-marker__card-pointer::after {
-      border-top: 14px solid $secondary-colour;
-    }
-  }
-}
-
 @mixin arns-scale-bar-label {
   position: relative;
   text-align: center;
@@ -70,259 +33,4 @@ $border-colour: #B1B4B6;
   padding: 30px 40px 10px;
   box-sizing: border-box;
   border: 1px solid $border-colour;
-}
-
-.arns-scale-marker__card-pointer {
-  width: 0;
-  height: 0;
-  border-right: 16px solid transparent;
-  border-left: 16px solid transparent;
-  border-top: 16px solid govuk-colour("black");
-  position: relative;
-  top: 0;
-  left: 23px;
-  float: left;
-}
-
-.arns-scale-marker__card-pointer--white::after {
-  border-top: 14px solid govuk-colour("white") !important;
-}
-
-.arns-scale-marker__card-pointer::after {
-  width: 0;
-  height: 0;
-  border-right: 14px solid transparent;
-  border-left: 14px solid transparent;
-  border-top: 14px solid govuk-colour("white");
-  position: absolute;
-  top: -17px;
-  left: -14px;
-  content: "";
-}
-
-.arns-scale-marker {
-  margin-bottom: 22px;
-  width: 100%;
-}
-
-.arns-scale-marker-wrapper {
-  position: relative;
-  left: calc(-40px + (var(--margin) / 100) * (100% - 1px));
-}
-
-.arns-scale-marker-wrapper[data-margin] {
-  --margin: attr(data-margin number);
-}
-
-.arns-scale-marker-wrapper--very-high {
-  @include arns-scale-marker-card-colour(
-      $very-high-score-colour,
-      $very-high-score-colour--light,
-      $very-high-score-colour__text
-  );
-}
-
-.arns-scale-marker-wrapper--high {
-  @include arns-scale-marker-card-colour($high-score-colour, $high-score-colour--light, $high-score-colour__text);
-}
-
-.arns-scale-marker-wrapper--medium {
-  @include arns-scale-marker-card-colour($medium-score-colour, $medium-score-colour--light, $medium-score-colour__text);
-}
-
-.arns-scale-marker-wrapper--low {
-  @include arns-scale-marker-card-colour($low-score-colour, $low-score-colour--light, $low-score-colour__text);
-}
-
-.arns-scale-marker__card {
-  width: 78px;
-  bottom: 30px;
-  background-color: govuk-colour("white");
-  border: 2px solid govuk-colour("black");
-}
-
-.arns-scale-marker__card-top {
-  width: 100%;
-
-  & h3,
-  & p {
-    margin: 0;
-    text-align: center;
-    text-transform: uppercase;
-  }
-
-  & h3 {
-    @include govuk-font(14, "bold");
-  }
-
-  & p {
-    @include govuk-font(14, "regular");
-  }
-}
-
-.arns-scale-marker__card-bottom p {
-  @include govuk-font(14, "bold");
-
-  margin: 0;
-}
-
-.arns-scale-marker__card-top,
-.arns-scale-marker__card-bottom {
-  padding: 3px;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-.arns-scale-bar--small {
-  @include arns-scale-bar-base;
-
-  margin-bottom: 15px;
-
-  & > div {
-    width: calc(100%/3);
-    padding-left: 1px;
-    padding-right: 1px;
-    display: inline;
-    float: left;
-    box-sizing: border-box;
-  }
-
-  & > div:nth-child(4n + 1) > span:first-child {
-    &::after{
-      @include govuk-font(16);
-      @include arns-scale-bar-label;
-
-      content:"LOW";
-      bottom: -15px;
-      color: $govuk-secondary-text-colour;
-    }
-    background-color: $low-score-colour;
-  }
-
-  & > div:nth-child(4n + 2) > span:first-child {
-    &::after{
-      @include govuk-font(16);
-      @include arns-scale-bar-label;
-
-      content:"MEDIUM";
-      bottom: -15px;
-      color: $govuk-secondary-text-colour;
-    }
-    background-color: $medium-score-colour;
-  }
-
-  & > div:nth-child(4n + 3) > span:first-child {
-    &::after{
-      @include govuk-font(16);
-      @include arns-scale-bar-label;
-
-      content:"HIGH";
-      bottom: -15px;
-      color: $govuk-secondary-text-colour;
-    }
-    background-color: $high-score-colour;
-  }
-}
-
-.arns-scale-bar--small-fourths {
-  & > div {
-    width: calc(100%/4);
-    padding-bottom: 20px;
-  }
-
-  & > div:nth-child(4n + 4) > span:first-child {
-    &::after{
-      @include govuk-font(16);
-      @include arns-scale-bar-label;
-
-      content:"VERY HIGH";
-      bottom: -15px;
-      color: $govuk-secondary-text-colour;
-    }
-    background-color: $very-high-score-colour;
-  }
-}
-
-.arns-scale-bar {
-  @include arns-scale-bar-base;
-  margin-bottom: 50px;
-  display: block;
-  clear: both;
-
-  & > div {
-    width: calc(100%/3);
-    height: 30px;
-    float: left;
-    border-left: 1px solid govuk-colour("black");
-    box-sizing: border-box;
-    position: relative;
-
-    & > span:first-child {
-      display: block;
-      width: 100%;
-      position: relative;
-
-      &::after {
-        @include govuk-font(16);
-        @include arns-scale-bar-label;
-        position: absolute;
-        bottom: -20px;
-        left: 50%;
-        transform: translateX(-50%);
-        white-space: nowrap;
-        color: $govuk-secondary-text-colour;
-      }
-    }
-
-    &::after {
-      @include govuk-font(16);
-      @include arns-scale-bar-label;
-      content: attr(data-band-percentage);
-      position: absolute;
-      bottom: -25px;
-      right: 0;
-      transform: translateX(50%);
-      white-space: nowrap;
-    }
-
-    &:first-child::before {
-      @include govuk-font(16);
-      @include arns-scale-bar-label;
-      content: attr(data-band-percentage-start);
-      position: absolute;
-      bottom: -25px;
-      left: 0;
-      transform: translateX(-50%);
-      white-space: nowrap;
-    }
-  }
-
-  & > div:nth-child(1) {
-    & > span:first-child { background-color: $low-score-colour; &::after { content: "LOW"; } }
-  }
-  & > div:nth-child(2) {
-    & > span:first-child { background-color: $medium-score-colour; &::after { content: "MEDIUM"; } }
-  }
-  & > div:nth-child(3) {
-    & > span:first-child { background-color: $high-score-colour; &::after { content: "HIGH"; } }
-  }
-}
-
-.arns-scale-bar--fourths {
-  & > div {
-    width: calc(100%/4) !important;
-  }
-  & > div:nth-child(4) {
-    border-right: 1px solid govuk-colour("black");
-    & > span:first-child {
-      background-color: $very-high-score-colour;
-      &::after { content: "VERY HIGH"; }
-    }
-  }
-}
-
-.arns-scale-bar--thirds {
-  & > div:nth-child(3) {
-    border-right: 1px solid govuk-colour("black");
-  }
-}
+}

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

@@ -22,103 +22,31 @@ In template:
   @param {string} params.predictor - The name of the specific predictor to display
 #}
 {%- from "govuk/components/tag/macro.njk" import govukTag -%}
-{% set latestAssessment = params.data.assessments | first if params.data.assessments else null %}
+{%- from "../predictor-scale-bar/macro.njk" import predictorScaleBar -%}
 
-{% macro predictorScaleMarker(predictor, showScore) %}
-  <div class="arns-scale-marker__card">
-    <div class="arns-scale-marker__card-top">
-      <h3>{{ predictor.band }}</h3>
-    </div>
-    {% if showScore and predictor.score %}
-      <div class="arns-scale-marker__card-bottom">
-        <p>{{ predictor.score }}%</p>
-      </div>
-      <div class="arns-scale-marker__card-pointer"></div>
-    {% else %}
-      <div class="arns-scale-marker__card-pointer arns-scale-marker__card-pointer--white"></div>
-    {% endif %}
-  </div>
-{% endmacro %}
+{% set latestAssessment = params.data.assessments | first if params.data.assessments else null %}
 
 {% if latestAssessment %}
   {% for key, predictor in latestAssessment %}
     {% if key == params.predictor %}
 
-      {% set config = predictorConfig[key] %}
-
-      {% set scaleMarkerClass = '' %}
-
-      {% switch predictor.band %}
-      {% case 'LOW' %}
-        {% set scaleMarkerClass = 'arns-scale-marker-wrapper--low' %}
-      {% case 'MEDIUM' %}
-        {% set scaleMarkerClass = 'arns-scale-marker-wrapper--medium' %}
-      {% case 'HIGH' %}
-        {% set scaleMarkerClass = 'arns-scale-marker-wrapper--high' %}
-      {% case 'VERY HIGH' %}
-        {% set scaleMarkerClass = 'arns-scale-marker-wrapper--very-high' %}
-      {% endswitch %}
-
-      {% set barTypeClass = '' %}
-      {% if config.hasVeryHighBand !== true and config.showBandThresholdPercentages !== true %}
-        {% set barTypeClass = 'arns-scale-bar--small' %}
-      {% elif config.hasVeryHighBand === true and config.showBandThresholdPercentages !== true %}
-        {% set barTypeClass = 'arns-scale-bar--small arns-scale-bar--small-fourths' %}
-      {% elif config.hasVeryHighBand === true and config.showBandThresholdPercentages === true %}
-        {% set barTypeClass = 'arns-scale-bar arns-scale-bar--fourths' %}
-      {% elif config.hasVeryHighBand !== true and config.showBandThresholdPercentages === true %}
-        {% set barTypeClass = 'arns-scale-bar arns-scale-bar--thirds' %}
-      {% endif %}
-
-      {% set scalePosition = '' %}
-      {% if config.showBandThresholdPercentages == true %}
-        {% set scalePosition = predictor.score | scoreToScaleMarkerPosition(config.bandThresholdPercentages) %}
-      {% else %}
-        {% set scalePosition = predictor.band | bandToScaleMarkerPosition(config.hasVeryHighBand) %}
-      {% endif %}
-
-      {% if predictor.band === 'NOT APPLICABLE' %}
-        <div class="arns-predictor-scale govuk-body">
-          <h2 class="govuk-heading-m">{{ predictor.name }}</h2>
-          <p class="govuk-body">Not applicable</p>
-        </div>
-      {% else %}
-        <div class="arns-predictor-scale govuk-body">
+      <div class="arns-predictor-scale govuk-body" data-predictor-scale="{{ predictor.name }}">
+        {% if predictor.band === 'NOT APPLICABLE' %}
+          <h2 class="govuk-heading-m" data-test-id="name">{{ predictor.name }}</h2>
+          <p class="govuk-body" data-test-id="notApplicable">Not applicable</p>
+        {% else %}
           <div class="arns-predictor-scale-header-wrapper">
             <div>
-              <h2 class="govuk-heading-m">{{ predictor.name }}</h2>
-              <p class="govuk-hint">Last updated: {{ predictor.completedDate }}</p>
+              <h2 class="govuk-heading-m" data-test-id="name">{{ predictor.name }}</h2>
+              <p class="govuk-hint" data-test-id="LastUpdatedDate">Last updated: {{ predictor.completedDate }}</p>
             </div>
             {% if predictor.staticOrDynamic %}
-            <div>{{ govukTag({ text: predictor.staticOrDynamic, classes: "govuk-tag--grey"}) }}</div>
+              <div data-test-id="staticOrDynamic">{{ govukTag({ text: predictor.staticOrDynamic, classes: "govuk-tag--grey"}) }}</div>
             {%  endif %}
           </div>
-
-          <div class="arns-scale-marker">
-            <div class="{{ scaleMarkerClass }} arns-scale-marker-wrapper" data-margin="{{ scalePosition }}">
-              {{ predictorScaleMarker(predictor, config.showScore) }}
-            </div>
-          </div>
-
-          <div class="{{ barTypeClass }}">
-            <div data-band-percentage-start="{{ config.bandThresholdPercentages[0] }}"
-                 data-band-percentage="{{ config.bandThresholdPercentages[1] }}">
-              <span></span>
-            </div>
-            <div data-band-percentage="{{ config.bandThresholdPercentages[2] }}">
-              <span></span>
-            </div>
-            <div data-band-percentage="{{ config.bandThresholdPercentages[3] }}">
-              <span></span>
-            </div>
-            {% if config.hasVeryHighBand === true %}
-              <div data-band-percentage="{{ config.bandThresholdPercentages[4] }}">
-                <span></span>
-              </div>
-            {% endif %}
-          </div>
-        </div>
-      {% endif %}
+          {{ predictorScaleBar(predictor, key) }}
+        {% endif %}
+      </div>
 
     {% endif %}
   {% endfor %}