Merge branch 'release-6.2.1'

DEFRA · Mar 21, 2023 · 8a3642e · 8a3642e
2 parents 12b3f3a + ba652ed
commit 8a3642e
Show file tree

Hide file tree

Showing 10 changed files with 207 additions and 94 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flood-app",
-  "version": "6.2.0",
+  "version": "6.2.1",
   "description": "Flood risk app",
   "main": "index.js",
   "repository": "github:defra/flood-app",

diff --git a/release-docs/CFF-6.2.1.txt b/release-docs/CFF-6.2.1.txt
@@ -0,0 +1,18 @@
+# Check for flooding 6.2.1 Wednesday 22nd February 2023
+
+# Release
+
+6.2.1
+
+# Tickets
+
+https://eaflood.atlassian.net/browse/FSR-781
+
+
+# Instructions
+
+Straight forward application build for release
+
+1 - Execute LFW_{STAGE}_04_UPDATE_FLOOD_APP_AND_SERVICE_PIPELINE
+
+Execute smoke tests and forward results
diff --git a/server/models/targetAreaTwitter.js b/server/models/targetAreaTwitter.js
@@ -0,0 +1,18 @@
+const twitLink = [
+  { area: 'Herts and North London', link: 'EnvAgencySE' },
+  { area: 'Lincs and Northants', link: 'EnvAgencyMids' },
+  { area: 'Devon and Cornwall', link: 'EnvAgencySW' },
+  { area: 'West Midlands', link: 'EnvAgencyMids' },
+  { area: 'East Midlands', link: 'EnvAgencyMids' },
+  { area: 'East Anglia', link: 'EnvAgencyAnglia' },
+  { area: 'Kent S London and E Sussex', link: 'EnvAgencySE' },
+  { area: 'North East', link: 'EnvAgencyYNE' },
+  { area: 'Yorkshire', link: 'EnvAgencyYNE' },
+  { area: 'Solent and South Downs', link: 'EnvAgencySE' },
+  { area: 'Gtr Mancs Mersey and Ches', link: 'EnvAgencyNW' },
+  { area: 'Wessex', link: 'EnvAgencySW' },
+  { area: 'Cumbria and Lancashire', link: 'EnvAgencyNW' },
+  { area: 'Thames', link: 'EnvAgencySE' }
+]
+
+module.exports = twitLink
diff --git a/server/models/views/target-area.js b/server/models/views/target-area.js
@@ -1,5 +1,6 @@
 const severity = require('../severity')
 const moment = require('moment-timezone')
+const twitLink = require('../targetAreaTwitter')
 const { bingKeyMaps, floodRiskUrl } = require('../../config')
 
 class ViewModel {
@@ -25,7 +26,15 @@ class ViewModel {
       fallbackText = '<p>We\'ll update this page when there\'s a flood warning in the area.</p><p>A flood warning means flooding to some property is expected. A severe flood warning means there\'s a danger to life.</p>'
     }
 
-    const situation = flood && flood.situation !== '' ? `<p>${flood.situation}</p>` : fallbackText
+    const eaTwitter = twitLink.find(t => t.area === area.area)
+
+    let situation = fallbackText
+    if (flood && flood.situation) {
+      flood.situation = flood.situation.trim()
+      const message = flood.situation.endsWith('.') ? flood.situation.slice(0, -1) : flood.situation
+      situation = `<p>${message}. Follow <a class="govuk-link" href="https://twitter.com/${eaTwitter.link}">@${eaTwitter.link}</a> on 
+      Twitter for information for your area.</p>`
+    }
 
     const dateSituationChanged = flood
       ? moment.tz(flood.situation_changed, 'Europe/London').format('D MMMM YYYY')
@@ -35,7 +44,10 @@ class ViewModel {
       ? moment.tz(flood.situation_changed, 'Europe/London').format('h:mma')
       : moment.tz('Europe/London').format('h:mma')
 
-    const areaDescription = `Flood ${type} area: ${area.description}`
+    area.description = area.description.trim()
+    const description = area.description.endsWith('.') ? area.description.slice(0, -1) : area.description
+    const areaDescription = `Flood ${type} area: ${description}.`
+
     const parentAreaAlert = (!!(((flood && severityLevel.id === 4) && (type === 'warning')) || !flood) && (parentSeverityLevel && parentSeverityLevel.isActive))
 
     let situationChanged = flood

diff --git a/server/src/js/pages/target-area.js b/server/src/js/pages/target-area.js
@@ -10,7 +10,7 @@ import '../components/map/live'
 // Create LiveMap
 window.flood.maps.createLiveMap('map', {
   btnText: `View map of the flood ${window.flood.model.area.code.slice(4, 5).toLowerCase() === 'w' ? 'warning' : 'alert'} area`,
-  btnClasses: 'defra-button-secondary defra-button-secondary--icon govuk-!-margin-top-0 govuk-!-margin-bottom-4',
+  btnClasses: 'defra-button-secondary defra-button-secondary--icon govuk-!-margin-top-4',
   data: {
     button: 'Target Area:Map view:TA - Map view'
   },

diff --git a/server/src/sass/objects/_buttons.scss b/server/src/sass/objects/_buttons.scss
@@ -2,54 +2,15 @@
 .defra-button-start {
     @extend .govuk-button;
     @extend .govuk-button--secondary;
-    &:after {
-        content: '';
+    svg {
+        color: govuk-colour('black');
         display: inline-block;
         position:relative;
         margin-left:5px;
         vertical-align: middle;
         top:-1px;
-        width:13px;
-        height:15px;
-        background-image: svg-url('<svg width="13" height="15" viewBox="0 0 13 15" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M0.325,0l4.875,0l7.5,7.5l-7.5,7.5l-4.875,0l7.5,-7.5l-7.5,-7.5Z" style="fill-rule:nonzero;"/></svg>');
-        background-color:transparent;
-        background-size:13px 15px;
-        background-repeat: no-repeat;
-        background-position: top left;
-    }
-}
-
-// Text button
-.defra-button-text {
-    @extend .govuk-body;
-    position: relative;
-    margin:0px;
-    color:$govuk-link-colour;
-    background-color: transparent;
-    border:0px;
-    text-align:left;
-    text-decoration: underline;
-    padding:0;
-    border-radius: 0;
-    cursor:pointer;
-    &:focus {
-        outline:3px solid transparent;
-        background-color: $govuk-focus-colour;
-        color: $govuk-text-colour !important;
-        box-shadow: 0 -2px #ffdd00, 0 4px currentColor;
-        text-decoration: none;
-    }
-    &:active {
-        color: $govuk-text-colour !important;
-    }
-    &:hover {
-        color:$govuk-link-hover-colour;
     }
 }
-.defra-button-text-s {
-    @extend .defra-button-text;
-    @include govuk-font($size: 16);
-}
 
 // Secondoary button
 a.defra-button-secondary,
@@ -63,20 +24,25 @@ button.defra-button-secondary {
     box-shadow: none;
     background-color: white;
     padding: 9px 10px 10px;
-    outline: 3px solid transparent;
     cursor: pointer;
     color: $govuk-text-colour;
     text-decoration: none;
     &:visited {
         color: $govuk-text-colour;
     }
     &:hover {
-        background-color: #dbdad9;
+        background-color: govuk-colour('light-grey');
     }
     &:focus {
         background-color: $govuk-focus-colour;
         border-color: $govuk-focus-colour;
-        box-shadow: 0 4px 0 govuk-colour('black');
+        box-shadow: 0 2px 0 govuk-colour('black');
+        outline: 3px solid transparent;
+    }
+    &:not([keyboard-focus]):focus {
+        background-color: white;
+        border: 1px solid govuk-colour('mid-grey');
+        box-shadow: none;
     }
     &--icon {
         padding-left: 31px;
@@ -95,29 +61,50 @@ button.defra-button-secondary {
     padding: 6px 7px 7px;
 }
 
-// Text buttons with icons
-.defra-link-s {
+// Buttons like hyperlinks
+.defra-button-text {
+    @extend .govuk-link;
+    position: relative;
+    margin:0px;
+    padding:0;
+    color:$govuk-link-colour;
+    background-color: transparent;
+    border:0px;
+    text-align:left;
+    border-radius: 0;
+    cursor:pointer;
+}
+.defra-button-text-s {
+    @extend .defra-button-text;
+    @include govuk-font($size: 19);
+    @include mq ($from: tablet) {
+      @include govuk-font($size: 16);
+    }
+}
+
+// Hyperlinks with icons
+.defra-link-icon {
     position:relative;
     display:inline-block;
     margin-right: 5px;
-    margin-bottom: 10px;
-    @include govuk-font($size: 16);
+    @include govuk-font($size: 19);
     &:last-of-type {
         margin-right: 0px;
     }
     @include mq ($from: tablet) {
         margin-right: 10px;
     }
-}
-.defra-link-icon-s {
-    @extend .defra-link-s;
-    padding-left:21px;
     svg {
-        position: absolute;
+        position: relative;
+        display: inline-block;
         color: govuk-colour('black');
-        top:50%;
-        margin-top: -10px;
-        left:1px;
+        vertical-align: top;
+        margin-right: 7px;
+        top: 1px;
+        @include mq ($from: tablet) {
+            margin-right: 8px;
+            top: 4px;
+        }
     }
     &:hover svg {
         color: $govuk-link-hover-colour;
@@ -127,3 +114,15 @@ button.defra-button-secondary {
         color: govuk-colour('black');
     }
 }
+.defra-link-icon-s {
+    @extend .defra-link-icon;
+    @include govuk-font($size: 19);
+    @include mq ($from: tablet) {
+      @include govuk-font($size: 16);
+    }
+    svg {
+        margin-right: 6px;
+        margin-bottom: -4px;
+        top: 0px;
+    }
+}
diff --git a/server/views/500.html b/server/views/500.html
@@ -2,18 +2,14 @@
 {% extends 'layout.html' %}
 
 {% block content %}
-  <div class="govuk-width-container">
-    <div class="govuk-main-wrapper">
-      <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-          <h1 class="govuk-heading-xl">
-            Sorry, there is a problem with the service
-          </h1>
-          <p class="govuk-body">Try again later or contact Floodline to check for flooding.</p>
-          <h2 class="govuk-heading-s">Floodline</h2>
-        <p>Telephone: 0345 988 1188<br>Textphone: 0345 602 6340<br>24 hour service<br><a href="https://gov.uk/call-charges">Find out more about call charges</a></p>
-        </div>
-      </div>
-    </div>
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+    <h1 class="govuk-heading-xl">
+      Sorry, there is a problem with the service
+    </h1>
+    <p class="govuk-body">Try again later or contact Floodline to check for flooding.</p>
+    <h2 class="govuk-heading-s">Floodline</h2>
+  <p>Telephone: 0345 988 1188<br>Textphone: 0345 602 6340<br>24 hour service<br><a href="https://gov.uk/call-charges">Find out more about call charges</a></p>
   </div>
+</div>
 {% endblock %}
diff --git a/server/views/target-area.html b/server/views/target-area.html
@@ -51,31 +51,30 @@
     </div>
     {% endif %}
 
-    <h1 class="govuk-heading-xl">{{ model.pageTitle }}</h1>
-
-  </div>
-</div>
-
-<div class="govuk-grid-row">
-  <div class="govuk-grid-column-two-thirds">
-    {{ model.situation | safe }}
-    {% 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.</a></p>
-    {% endif %}
-    <p class="defra-flood-meta defra-flood-meta--border govuk-!-margin-top-6 govuk-!-margin-bottom-6">
+    <h1 class="govuk-heading-xl govuk-!-margin-bottom-1">{{ model.pageTitle }}</h1>
+    <p class="defra-flood-meta govuk-!-margin-top-1 govuk-!-margin-bottom-0">
       <time datetime="{{model.situationChanged}}">{{model.situationChanged}}</time>
     </p>
-    <p><a data-journey-click="Target Area:Get Warnings:TA - Get warnings" href="https://www.gov.uk/sign-up-for-flood-warnings">Get flood warnings by phone, text or email.</a></p>
-
-    <p>Flood {% if model.area.code.slice(4,5).toLowerCase() == 'w'%}warning{% else %}alert{% endif %} area: {{ model.area.description }}</p>
-
-    <div><span id="map"></span></div>
+    <span id="map"></span>
 
+    <div class="govuk-!-padding-top-6">
+      {{ model.situation | safe }}
+    </div>
 
-    <h2 class="govuk-heading-m">Latest river, sea, groundwater and rainfall levels</h2>
-    <p>There are around 3,500 measuring stations, and most are along main rivers and the coast. These levels can help you understand your flood risk now and over the next few days.</p>
+    <p>{{ model.areaDescription | safe }}</p>
+
     <p><a data-journey-click="Target Area:Station list:TA - View station list" href="/river-and-sea-levels/target-area/{{ model.targetArea }}">Find a river, sea, groundwater or rainfall level in this area</a></p>
 
+    <p>
+      <a data-journey-click="Target Area:Get Warnings:TA - Get warnings" href="https://www.gov.uk/sign-up-for-flood-warnings" class="defra-link-icon">
+        <svg viewBox="0 0 14 20" width="14" height="20" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" fill="currentColor"><path d="M9.27 15.747C9.27 16.99 8.26 18 7.016 18s-2.253-1.01-2.253-2.253H9.27zM6.015 1.86v-.859A1 1 0 0 1 7.016 0c.553 0 1.002.449 1.002 1.001v.859c2.284.465 4.006 2.487 4.006 4.907v4.357l1.628 1.661c.488.489.488 1.282 0 1.771a1.25 1.25 0 0 1-.886.366H1.252a1.25 1.25 0 0 1-.886-.366c-.488-.489-.488-1.282 0-1.771l1.643-1.661V6.767c0-2.42 1.721-4.442 4.006-4.907z"></path></svg>Get flood warnings by phone, text or email.
+      </a>
+    </p>
+
+    {% 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.</a></p>
+    {% endif %}
+
     {% include "partials/context-footer.html" %}
     {% include "partials/social.html" %}
   </div>