Merge branch 'integration-sandbox' into feature/FSR-1293

server/src/js/components/chart.js

@@ -777,23 +777,24 @@ function LineChart (containerId, stationId, data, options = {}) {
         .attr('aria-hidden', true)
         .attr('x2', xScale(xExtent[1])).attr('y2', 0)
 
-      // Label
-      const copy = `${threshold.level}m ${threshold.name}`.match(/[\s\S]{1,35}(?!\S)/g, '$&\n')
-      const label = thresholdContainer.append('g')
-        .attr('class', 'threshold-label')
+      // Construct label text and split into lines of up to 35 characters
+      const thresholdLabel = `${threshold.level}m ${threshold.name}`
+      const labelSegments = thresholdLabel.match(/.{1,35}(\s|$)/g).map(line => line.trim())
+      const label = thresholdContainer.append('g').attr('class', 'threshold-label')
       const path = label.append('path')
         .attr('aria-hidden', true)
         .attr('class', 'threshold-label__bg')
       const text = label.append('text')
         .attr('class', 'threshold-label__text')
       text.append('tspan').attr('font-size', 0).text('Threshold: ')
-      copy.map((l, i) => text.append('tspan').attr('x', 10).attr('y', (i + 1) * 22).text(l.trim()))
+      // Add each line of the split text (up to 35 characters per line) as separate tspans
+      labelSegments.forEach((line, i) => {
+        text.append('tspan').attr('x', 10).attr('y', (i + 1) * 22).text(line.trim())
+      })
       const textWidth = Math.round(text.node().getBBox().width)
       const textHeight = Math.round(text.node().getBBox().height)
-      path.attr('d', `m-0.5,-0.5 l${textWidth + 20},0 l0,36 l-${((textWidth + 20) / 2) - 7.5},0 l-7.5,7.5 l-7.5,-7.5 l-${((textWidth + 20) / 2) - 7.5},0 l0,-36 l0,0`)
+      path.attr('d', `m-0.5,-0.5 l${textWidth + 20},0 l0,${19 + textHeight} l-${((textWidth + 20) / 2) - 7.5},0 l-7.5,7.5 l-7.5,-7.5 l-${((textWidth + 20) / 2) - 7.5},0 l0,-${19 + textHeight} l0,0`)
       label.attr('transform', `translate(${Math.round(width / 2 - ((textWidth + 20) / 2))}, -${29 + textHeight})`)
-
-      // Remove button
       const remove = thresholdContainer.append('a')
         .attr('role', 'button')
         .attr('class', 'threshold__remove')

server/src/js/core.js

@@ -44,7 +44,7 @@ document.addEventListener('readystatechange', () => {
     if (document.getElementById('map-outlook')) {
       window.flood.maps.createOutlookMap('map-outlook', {
         btnText: 'View map showing flood risk areas',
-        btnClass: 'defra-button-secondary defra-button-secondary--icon',
+        btnClass: 'defra-button-secondary',
         days: model.outlookDays,
         data: model.outlookData || null
       })

server/src/sass/components/_latest-levels-box.scss

@@ -13,6 +13,14 @@
     text-transform: uppercase;
     background-color: #1C70B8;
     color: white;
+    word-spacing: 0.15em;
+
+    // Add contrast-specific styles for high contrast mode
+    @media (forced-colors: active) {
+      background-color: Canvas; // Ensures light background in contrast mode
+      border: 2px solid ButtonText; // Adds a visible border in high contrast
+      color: ButtonText; // Uses the system's high-contrast text color
+    }
   }  
   &__supplementary {
     @include govuk-font($size: 16);

server/src/sass/objects/_buttons.scss

@@ -14,8 +14,7 @@
 }
 
 // Secondoary button
-a.defra-button-secondary,
-button.defra-button-secondary {
+.defra-button-secondary {
     position: relative;
     display: inline-block;
     @include govuk-font($size: 16);
@@ -27,7 +26,7 @@ button.defra-button-secondary {
         background-color: white;
         padding: 10px;
         cursor: pointer;
-        color: govuk-colour('black');
+        color: govuk-colour('blue');
         text-decoration: none;
     }
     &:visited {
@@ -52,7 +51,7 @@ button.defra-button-secondary {
         color: govuk-colour('black');
     }
     svg {
-        color: currentColor;
+        // color: currentColor;
         position: relative;
         display: inline-block;
         vertical-align: middle;
@@ -144,3 +143,19 @@ button.defra-button-secondary {
         top: 0px;
     }
 }
+
+.defra-button-blue-text-black-icon {
+    @extend .defra-button-secondary;
+    color: govuk-colour('blue') !important;
+
+    svg {
+        color: govuk-colour('black') !important;
+    }
+
+    &:focus,
+    &:active,
+    &:visited {
+        color: govuk-colour('black') !important;
+    }
+}
+

server/views/alerts-and-warnings.html

@@ -127,7 +127,7 @@ <h2 class="govuk-heading-m">
   window.flood = {}
   window.flood.model = {{ model.expose | dump(2) | safe }}
   window.flood.model.mapButtonText = 'View map of flood warning and alert areas'
-  window.flood.model.mapButtonClass = 'defra-button-secondary defra-button-secondary--icon'
+  window.flood.model.mapButtonClass = 'defra-button-secondary'
   window.flood.model.mapLayers = 'ts,tw,ta,mv'
   window.flood.model.extent = window.flood.model.placeBbox
 </script>

server/views/location.html

@@ -137,7 +137,7 @@ <h2 class="govuk-heading-m">River, sea, groundwater and rainfall levels</h2>
     window.flood = {}
     window.flood.model = {{ model.expose | dump(2) | safe }}
     window.flood.model.mapButtonText = {{ model.expose.mapButtonText | dump | safe }}
-    window.flood.model.mapButtonClass = 'defra-button-secondary defra-button-secondary--icon govuk-!-margin-bottom-4'
+    window.flood.model.mapButtonClass = 'defra-button-secondary govuk-!-margin-bottom-4'
     window.flood.model.data = {
       button: 'Location:Map view:Location - View national warning map'
     }

server/views/national.html

@@ -121,7 +121,7 @@ <h2 class="govuk-heading-m">River, sea, groundwater and rainfall levels</h2>
   window.flood = {}
   window.flood.model = {{ model | dump(2) | safe }}
   window.flood.model.mapButtonText = {{ model.mapButtonText | dump | safe }}
-  window.flood.model.mapButtonClass = 'defra-button-secondary defra-button-secondary--icon'
+  window.flood.model.mapButtonClass = 'defra-button-secondary'
   window.flood.model.mapLayers = 'mv,ts,tw,ta'
   window.flood.model.outlookDays = {{ model.outlook.days | dump | safe }}
   window.flood.model.data = {

server/views/partials/latest-levels.html

@@ -3,18 +3,18 @@ <h2 class="defra-live__title">Latest level{% if model.latestLevels.length > 1 %}
   {% for warnings in model.latestLevels %}
   <div class="defra-live__item">
     {% if warnings.isSuspendedOrOffline %}
-      <p class="defra-flood-meta defra-flood-meta--no-border govuk-!-margin-bottom-0"><strong>Latest Level</strong></p>
+      <p class="defra-flood-meta defra-flood-meta--no-border govuk-!-margin-bottom-0"><strong>{{ warnings.formatted_time }}</strong></p>
       <p>The {{ warnings.river_name }} level at {{ warnings.agency_name }} is currently unavailable.</p>
     {% else %}
       <p class="defra-flood-meta defra-flood-meta--no-border govuk-!-margin-bottom-0"><strong>{{ warnings.formatted_time }}</strong></p>
       <p>The {{ warnings.river_name }} level at {{ warnings.agency_name }} was {{ warnings.latest_level | toFixed(2) }} metres. Property flooding is possible when it goes above {{ warnings.threshold_value | toFixed(2) }} metres.
         {% if model.latestLevels.length > 1 %}
-        <a href="/station/{{ warnings.rloi_id }}{% if warnings.direction == 'd' %}-downstage{% endif %}?tid={{warnings.station_threshold_id}}">Monitor the {{ warnings.river_name }} level at {{ warnings.agency_name }}</a>
+        <a href="/station/{{ warnings.rloi_id }}{% if warnings.direction == 'd' %}-downstage{% endif %}">Monitor the {{ warnings.river_name }} level at {{ warnings.agency_name }}{% if warnings.iswales %} (Natural Resources Wales){% endif %}.</a>
         {% endif %}
       </p>
       {% if model.latestLevels.length == 1 %}
       <p>
-        <a href="/station/{{ warnings.rloi_id }}{% if warnings.direction == 'd' %}-downstage{% endif %}">Monitor the latest{% if model.latestLevels.length > 1 %} {{ warnings.river_name }}{% endif %} level at {{ warnings.agency_name }}</a>
+        <a href="/station/{{ warnings.rloi_id }}{% if warnings.direction == 'd' %}-downstage{% endif %}">Monitor the latest{% if model.latestLevels.length > 1 %} {{ warnings.river_name }}{% endif %} level at {{ warnings.agency_name }}{% if warnings.iswales %} (Natural Resources Wales){% endif %}</a>
       </p>
       {% endif %}
     {% endif %}

server/views/rainfall-station.html

@@ -111,7 +111,7 @@ <h2 class="govuk-heading-s govuk-!-margin-bottom-0">
         <div class="govuk-grid-column-full">
           <h2 class="govuk-heading-s govuk-!-margin-top-4 govuk-!-margin-bottom-4">Rainfall over the last 5 days in millimetres</h2>
           <div id="bar-chart" class="defra-bar-chart"></div>
-          <a data-journey-click="Rainfall:Station data:Rainfall - Download csv" href="/rainfall-station-csv/{{model.stationId}}" class="defra-button-secondary defra-button-secondary--icon govuk-!-margin-bottom-0">
+          <a data-journey-click="Rainfall:Station data:Rainfall - Download csv" href="/rainfall-station-csv/{{model.stationId}}" class="defra-button-secondary govuk-!-margin-bottom-0">
             <svg focusable="false" aria-hidden="true" width="14" height="20" viewBox="0 0 14 20"><path d="M1.929 9L7 14.071 12.071 9M7 14.071V1M1 18h12" fill="none" stroke="currentColor" stroke-width="2"/></svg>Download data CSV (12KB)</a>
         </div>
       </div>

server/views/river-and-sea-levels.html

@@ -159,7 +159,7 @@ <h2 class="govuk-heading-m govuk-!-margin-top-7">
     window.flood = {}
     window.flood.model = {{ model.clientModel | dump(2) | safe }}
     window.flood.model.mapButtonText = 'View map of levels'
-    window.flood.model.mpaButtonClass = 'defra-button-secondary defra-button-secondary--icon'
+    window.flood.model.mpaButtonClass = 'defra-button-secondary'
     window.flood.model.mapLayers = 'mv,ri,ti,gr,rf'
     window.flood.model.extent = window.flood.model.placeBox
     window.flood.model.data = {

server/views/station.html

@@ -252,7 +252,7 @@ <h2 class="govuk-heading-s govuk-!-margin-top-4 govuk-!-margin-bottom-4">Height
       <p class="govuk-body-s govuk-!-margin-top-0 govuk-!-margin-bottom-2">Levels that are very low or below zero are normal for some stations.</p>
       {% endif %}
 
-      <a data-journey-click="Station:Station data:Station - Download csv" href="/station-csv/{{model.station.id}}{% if model.station.qualifier == 'd' %}/downstream{% endif %}" class="defra-button-secondary defra-button-secondary--icon govuk-!-margin-bottom-4"><svg focusable="false" aria-hidden="true" width="14" height="20" viewBox="0 0 14 20"><path d="M1.929 9L7 14.071 12.071 9M7 14.071V1M1 18h12" fill="none" stroke="currentColor" stroke-width="2"/></svg>Download data CSV ({% if model.isFfoi %}16{% else %}12{% endif %}KB)</a>
+      <a data-journey-click="Station:Station data:Station - Download csv" href="/station-csv/{{model.station.id}}{% if model.station.qualifier == 'd' %}/downstream{% endif %}" class="defra-button-secondary govuk-!-margin-bottom-4"><svg focusable="false" aria-hidden="true" width="14" height="20" viewBox="0 0 14 20"><path d="M1.929 9L7 14.071 12.071 9M7 14.071V1M1 18h12" fill="none" stroke="currentColor" stroke-width="2"/></svg>Download data CSV ({% if model.isFfoi %}16{% else %}12{% endif %}KB)</a>
     </div>
   </div>
 </div>

server/views/target-area.html

@@ -51,22 +51,35 @@
 
       <!-- Page title -->
       <h1 class="govuk-heading-xl govuk-!-margin-bottom-1">{{ model.pageTitle }}</h1>
+
+      <!-- Sign-up -->
+      <p>{% include "partials/sign-up-for-flood-warnings.html" %}</p>
+
       <!-- Last situation change time -->
       <p class="defra-flood-meta defra-flood-meta--no-border govuk-!-margin-top-1 govuk-!-margin-bottom-0">
          <time datetime="{{model.situationChanged}}">{{model.situationChanged}}</time>
       </p>
 
-      <!-- Map placeholder -->
-      <span id="map-live"></span>
-
       <!-- Situation description -->
       <div class="govuk-!-padding-top-6">
          {{ model.situation | safe }}
       </div>
 
+      <!-- Map placeholder -->
+      <span id="map-live" ></span>
+
       <!-- Area description -->
       <p>{{ model.areaDescription | safe }}</p>
 
+      <!-- Feedback link  -->
+      {% if model.severity %}
+      <p>
+         <a href="https://defragroup.eu.qualtrics.com/jfe/form/SV_26xlu1fVwKTHkwu?Source={{fullUrl}}">
+            Give feedback on this flood warning information
+         </a>
+      </p>
+      {% endif %}
+
       <!-- Latest water level information -->
       {% if model.latestLevels and model.latestLevels.length > 0 and model.latestLevels.length <= 4 %}
       {% include "partials/latest-levels.html" %}
@@ -75,22 +88,9 @@ <h1 class="govuk-heading-xl govuk-!-margin-bottom-1">{{ model.pageTitle }}</h1>
       <!-- Link to river, sea, groundwater, or rainfall levels in the area -->
       <p>
          <a data-journey-click="Target Area:Station list:TA - View station list" href="/river-and-sea-levels/target-area/{{ model.targetArea }}">
-            Find other river and sea levels
-         </a>
-      </p>
-
-      <!-- Sign-up -->
-      {% include "partials/sign-up-for-flood-warnings.html" %}
-
-      <!-- Feedback link  -->
-      {% if model.severity %}
-      <p>
-         Could this information be better? 
-         <a href="https://defragroup.eu.qualtrics.com/jfe/form/SV_26xlu1fVwKTHkwu?Source={{fullUrl}}">
-         Tell us how to improve it.
+            Find a river, sea, groundwater or rainfall level in this area
          </a>
       </p>
-      {% endif %}
 
       <!-- Context footer -->
       {% include "partials/context-footer.html" %}
@@ -111,7 +111,7 @@ <h1 class="govuk-heading-xl govuk-!-margin-bottom-1">{{ model.pageTitle }}</h1>
     window.flood = {}
     window.flood.model = {{ model | dump(2) | safe }}
     window.flood.model.mapButtonText = {{ model.mapButtonText | dump | safe }}
-    window.flood.model.mapButtonClass = 'defra-button-secondary defra-button-secondary--icon govuk-!-margin-top-4'
+    window.flood.model.mapButtonClass = 'defra-button-secondary govuk-!-margin-top-4';
     window.flood.model.mapLayers = 'mv,ts,tw,ta',
     window.flood.model.data = {
       button: 'Target Area:Map view:TA - Map view'

test/routes/station.js

@@ -388,7 +388,7 @@ lab.experiment('Test - /station/{id}', () => {
     Code.expect(response.payload).to.contain('Normal range 0.15m to 3.50m')
     Code.expect(response.payload).to.contain('<a data-journey-click="Station:Station navigation:Station - Nearby levels" href="/river-and-sea-levels/rloi/5146">Nearby levels</a>')
     Code.expect(response.payload).to.contain('<a href="/station/5122">Upstream</a>')
-    Code.expect(response.payload).to.contain('<a data-journey-click="Station:Station data:Station - Download csv" href="/station-csv/5146" class="defra-button-secondary defra-button-secondary--icon govuk-!-margin-bottom-4"><svg focusable="false" aria-hidden="true" width="14" height="20" viewBox="0 0 14 20"><path d="M1.929 9L7 14.071 12.071 9M7 14.071V1M1 18h12" fill="none" stroke="currentColor" stroke-width="2"/></svg>Download data CSV (12KB)</a>')
+    Code.expect(response.payload).to.contain('<a data-journey-click="Station:Station data:Station - Download csv" href="/station-csv/5146" class="defra-button-secondary govuk-!-margin-bottom-4"><svg focusable="false" aria-hidden="true" width="14" height="20" viewBox="0 0 14 20"><path d="M1.929 9L7 14.071 12.071 9M7 14.071V1M1 18h12" fill="none" stroke="currentColor" stroke-width="2"/></svg>Download data CSV (12KB)</a>')
     fullRelatedContentChecker(parse(response.payload))
     validateFooterPresent(response)
   })
@@ -1897,7 +1897,7 @@ lab.experiment('Test - /station/{id}', () => {
     Code.expect(response.payload).to.contain('This data feed was interrupted')
     Code.expect(response.payload).to.contain('<a data-journey-click="Station:Station navigation:Station - Nearby levels" href="/river-and-sea-levels/rloi/5146">Nearby levels</a>')
     Code.expect(response.payload).to.contain('<a href="/station/5122">Upstream</a>')
-    Code.expect(response.payload).to.contain('<a data-journey-click="Station:Station data:Station - Download csv" href="/station-csv/5146" class="defra-button-secondary defra-button-secondary--icon govuk-!-margin-bottom-4"><svg focusable="false" aria-hidden="true" width="14" height="20" viewBox="0 0 14 20"><path d="M1.929 9L7 14.071 12.071 9M7 14.071V1M1 18h12" fill="none" stroke="currentColor" stroke-width="2"/></svg>Download data CSV (12KB)</a>')
+    Code.expect(response.payload).to.contain('<a data-journey-click="Station:Station data:Station - Download csv" href="/station-csv/5146" class="defra-button-secondary govuk-!-margin-bottom-4"><svg focusable="false" aria-hidden="true" width="14" height="20" viewBox="0 0 14 20"><path d="M1.929 9L7 14.071 12.071 9M7 14.071V1M1 18h12" fill="none" stroke="currentColor" stroke-width="2"/></svg>Download data CSV (12KB)</a>')
   })
   lab.test('GET station/5146 with Normal river level does no show IMTD thresholds if not present', async () => {
     const floodService = require('../../server/services/flood')
@@ -2162,7 +2162,7 @@ lab.experiment('Test - /station/{id}', () => {
     Code.expect(response.payload).to.not.contain('Normal range ')
     Code.expect(response.payload).to.contain('<a data-journey-click="Station:Station navigation:Station - Nearby levels" href="/river-and-sea-levels/rloi/5146">Nearby levels</a>')
     Code.expect(response.payload).to.contain('<a href="/station/5122">Upstream</a>')
-    Code.expect(response.payload).to.contain('<a data-journey-click="Station:Station data:Station - Download csv" href="/station-csv/5146" class="defra-button-secondary defra-button-secondary--icon govuk-!-margin-bottom-4"><svg focusable="false" aria-hidden="true" width="14" height="20" viewBox="0 0 14 20"><path d="M1.929 9L7 14.071 12.071 9M7 14.071V1M1 18h12" fill="none" stroke="currentColor" stroke-width="2"/></svg>Download data CSV (12KB)</a>')
+    Code.expect(response.payload).to.contain('<a data-journey-click="Station:Station data:Station - Download csv" href="/station-csv/5146" class="defra-button-secondary govuk-!-margin-bottom-4"><svg focusable="false" aria-hidden="true" width="14" height="20" viewBox="0 0 14 20"><path d="M1.929 9L7 14.071 12.071 9M7 14.071V1M1 18h12" fill="none" stroke="currentColor" stroke-width="2"/></svg>Download data CSV (12KB)</a>')
   })
   lab.test('GET station/1034 - Coastal River title check  ', async () => {
     const floodService = require('../../server/services/flood')

test/routes/target-area-2.js

@@ -147,7 +147,7 @@ describe('target-area route', () => {
     expect(response.statusCode).to.equal(200)
     const root = parse(response.payload)
     linkChecker(root.querySelectorAll('a'),
-      'Find other river and sea levels',
+      'Find a river, sea, groundwater or rainfall level in this area',
       `/river-and-sea-levels/target-area/${AREA_CODE}`
     )
   })
@@ -175,7 +175,7 @@ describe('target-area route', () => {
     expect(response.statusCode).to.equal(200)
     const root = parse(response.payload)
     linkChecker(root.querySelectorAll('a'),
-      'Find other river and sea levels',
+      'Find a river, sea, groundwater or rainfall level in this area',
       `/river-and-sea-levels/target-area/${AREA_CODE}`
     )
   })