Feature/fsr 200 (#211)

* added social links to station page * removed postTitle * adding Facebook title * split to partial an added unit tests * sonarcloud * refactor for sonarcloud * fixed failing unit test * added partial to the target area page
DEFRA · Jun 17, 2021 · 429d25c · 429d25c
1 parent 9e23f52
commit 429d25c
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 18 deletions.
diff --git a/server/models/views/station.js b/server/models/views/station.js
@@ -255,10 +255,13 @@ class ViewModel {
 
     if (this.station.type === 'g') {
       this.pageTitle = `Groundwater level at ${stationLocation}`
+      this.postTitle = `Latest groundwater level information for ${this.station.name} borehole`
     } else if (this.station.type === 'c') {
       this.pageTitle = `Sea level at ${stationLocation}`
+      this.postTitle = `Latest tidal level information for the ${this.station.river} at ${this.station.name}`
     } else {
       this.pageTitle = `${this.station.river} level ${this.station.isMulti ? this.station.direction + ' ' : ''}at ${stationLocation}`
+      this.postTitle = `Latest river level information for the ${this.station.river} at ${this.station.name} ${this.station.isMulti ? this.station.direction : ''}`
     }
     this.metaDescription = `Check the latest recorded ${stationType.toLowerCase()} level${forecast ? ',' : ' and'} recent 5-day trend ${forecast ? ' and 36 hour forecast' : ''} at ${stationLocation}`
     this.metaKeywords = `${stationType} level, ${this.station.name}${this.station.isRiver ? ', ' + this.station.river : ''}${forecast ? ', forecast level' : ''}, flood risk, flood map, gov.uk`

diff --git a/server/src/sass/application.scss b/server/src/sass/application.scss
@@ -58,6 +58,7 @@ $govuk-breakpoints: (
 @import "components/feedback";
 @import "components/top-link";
 @import "components/toggle-list-display";
+@import "components/social";
 
 // Utilities
 @import "utilities/details";

diff --git a/server/src/sass/components/_social.scss b/server/src/sass/components/_social.scss
@@ -0,0 +1,62 @@
+.defra-social {
+    list-style: none;
+    margin: 0px;
+    padding: 0px;
+    &__channel {
+        position:relative;
+        display: inline-block;
+        margin-right: 30px;
+        @include govuk-font($size: 16, $weight: bold);
+        height: 32px;
+        padding-left: 40px;
+        margin-bottom: 10px;
+    }
+    &__link {
+        line-height: 32px;
+    }
+    &__link:not(:hover) {
+        text-decoration: none
+    }
+    &__link:before {
+        content: '';
+        position: absolute;
+        top:0px;
+        left:0px;
+        width: 32px;
+        height: 32px;
+        background-color: transparent;
+        background-size: 32px;
+        background-repeat: no-repeat;
+        background-position: top left;
+    }
+    &__link--email:before {
+        background-image: svg-url('<svg width="32" height="32" viewBox="0 0 32 32"><path d="M31.008,0L0.994,0C0.45,0.004 0.004,0.45 0,0.994L0,31.008C0,31.558 0.452,32 0.994,32L31.008,32C31.55,31.998 31.998,31.55 32,31.008L32,0.994C31.998,0.45 31.55,0.002 31.008,0Z" style="fill:#1d70b8"/><rect x="9" y="11" width="14" height="10" style="fill:none;stroke:#fff;stroke-width:2px;"/><path d="M9,10.992L15.994,17L23,11" style="fill:none;stroke:#fff;stroke-width:2px;"/></svg>');
+    }
+    &__link--email:hover:before {
+        background-image: svg-url('<svg width="32" height="32" viewBox="0 0 32 32"><path d="M31.008,0L0.994,0C0.45,0.004 0.004,0.45 0,0.994L0,31.008C0,31.558 0.452,32 0.994,32L31.008,32C31.55,31.998 31.998,31.55 32,31.008L32,0.994C31.998,0.45 31.55,0.002 31.008,0Z" style="fill:#003078"/><rect x="9" y="11" width="14" height="10" style="fill:none;stroke:#fff;stroke-width:2px;"/><path d="M9,10.992L15.994,17L23,11" style="fill:none;stroke:#fff;stroke-width:2px;"/></svg>');
+    }
+    &__link--email:focus:before,
+    &__link--email:active:before {
+        background-image: svg-url('<svg width="32" height="32" viewBox="0 0 32 32"><path d="M31.008,0L0.994,0C0.45,0.004 0.004,0.45 0,0.994L0,31.008C0,31.558 0.452,32 0.994,32L31.008,32C31.55,31.998 31.998,31.55 32,31.008L32,0.994C31.998,0.45 31.55,0.002 31.008,0Z" style="fill:#0b0c0c"/><rect x="9" y="11" width="14" height="10" style="fill:none;stroke:#fff;stroke-width:2px;"/><path d="M9,10.992L15.994,17L23,11" style="fill:none;stroke:#fff;stroke-width:2px;"/></svg>');
+    }
+    &__link--twitter:before {
+        background-image: svg-url('<svg width="32" height="32" viewBox="0 0 32 32"><path d="M31.008,0L0.994,0C0.45,0.004 0.004,0.45 0,0.994L0,31.008C0,31.558 0.452,32 0.994,32L31.008,32C31.55,31.998 31.998,31.55 32,31.008L32,0.994C31.998,0.45 31.55,0.002 31.008,0Z" style="fill:#1d70b8"/><path d="M8,21.028C9.5,21.992 11.248,22.504 13.032,22.502C19.07,22.502 22.372,17.5 22.372,13.164C22.372,13.02 22.368,12.88 22.36,12.738C23.004,12.274 23.558,11.698 24,11.04C23.4,11.304 22.766,11.478 22.114,11.556C22.8,11.146 23.312,10.5 23.556,9.74C22.912,10.122 22.206,10.392 21.472,10.536C20.85,9.87 19.98,9.49 19.07,9.49C17.27,9.49 15.79,10.972 15.79,12.77C15.79,13.026 15.82,13.28 15.88,13.53C13.24,13.398 10.778,12.15 9.114,10.1C8.822,10.6 8.67,11.17 8.67,11.75C8.668,12.846 9.218,13.874 10.13,14.482C9.608,14.466 9.098,14.324 8.642,14.072L8.642,14.112C8.642,15.668 9.75,17.022 11.276,17.332C10.792,17.464 10.286,17.482 9.794,17.388C10.222,18.722 11.458,19.642 12.86,19.668C11.696,20.58 10.26,21.074 8.784,21.072C8.522,21.072 8.26,21.058 8,21.028Z" style="fill:#fff;fill-rule:nonzero;"/></svg>');
+    }
+    &__link--twitter:hover:before {
+        background-image: svg-url('<svg width="32" height="32" viewBox="0 0 32 32"><path d="M31.008,0L0.994,0C0.45,0.004 0.004,0.45 0,0.994L0,31.008C0,31.558 0.452,32 0.994,32L31.008,32C31.55,31.998 31.998,31.55 32,31.008L32,0.994C31.998,0.45 31.55,0.002 31.008,0Z" style="fill:#003078"/><path d="M8,21.028C9.5,21.992 11.248,22.504 13.032,22.502C19.07,22.502 22.372,17.5 22.372,13.164C22.372,13.02 22.368,12.88 22.36,12.738C23.004,12.274 23.558,11.698 24,11.04C23.4,11.304 22.766,11.478 22.114,11.556C22.8,11.146 23.312,10.5 23.556,9.74C22.912,10.122 22.206,10.392 21.472,10.536C20.85,9.87 19.98,9.49 19.07,9.49C17.27,9.49 15.79,10.972 15.79,12.77C15.79,13.026 15.82,13.28 15.88,13.53C13.24,13.398 10.778,12.15 9.114,10.1C8.822,10.6 8.67,11.17 8.67,11.75C8.668,12.846 9.218,13.874 10.13,14.482C9.608,14.466 9.098,14.324 8.642,14.072L8.642,14.112C8.642,15.668 9.75,17.022 11.276,17.332C10.792,17.464 10.286,17.482 9.794,17.388C10.222,18.722 11.458,19.642 12.86,19.668C11.696,20.58 10.26,21.074 8.784,21.072C8.522,21.072 8.26,21.058 8,21.028Z" style="fill:#fff;fill-rule:nonzero;"/></svg>');
+    }
+    &__link--twitter:focus:before,
+    &__link--twitter:active:before {
+        background-image: svg-url('<svg width="32" height="32" viewBox="0 0 32 32"><path d="M31.008,0L0.994,0C0.45,0.004 0.004,0.45 0,0.994L0,31.008C0,31.558 0.452,32 0.994,32L31.008,32C31.55,31.998 31.998,31.55 32,31.008L32,0.994C31.998,0.45 31.55,0.002 31.008,0Z" style="fill:#0b0c0c"/><path d="M8,21.028C9.5,21.992 11.248,22.504 13.032,22.502C19.07,22.502 22.372,17.5 22.372,13.164C22.372,13.02 22.368,12.88 22.36,12.738C23.004,12.274 23.558,11.698 24,11.04C23.4,11.304 22.766,11.478 22.114,11.556C22.8,11.146 23.312,10.5 23.556,9.74C22.912,10.122 22.206,10.392 21.472,10.536C20.85,9.87 19.98,9.49 19.07,9.49C17.27,9.49 15.79,10.972 15.79,12.77C15.79,13.026 15.82,13.28 15.88,13.53C13.24,13.398 10.778,12.15 9.114,10.1C8.822,10.6 8.67,11.17 8.67,11.75C8.668,12.846 9.218,13.874 10.13,14.482C9.608,14.466 9.098,14.324 8.642,14.072L8.642,14.112C8.642,15.668 9.75,17.022 11.276,17.332C10.792,17.464 10.286,17.482 9.794,17.388C10.222,18.722 11.458,19.642 12.86,19.668C11.696,20.58 10.26,21.074 8.784,21.072C8.522,21.072 8.26,21.058 8,21.028Z" style="fill:#fff;fill-rule:nonzero;"/></svg>');
+    }
+    &__link--facebook:before {
+        background-image: svg-url('<svg width="32" height="32" viewBox="0 0 32 32"><path d="M31.006,0L0.994,0C0.45,0.002 0.002,0.45 0,0.994L0,31.008C0,31.558 0.452,32 0.994,32L31.006,32C31.55,31.998 31.998,31.552 32,31.008L32,0.994C31.996,0.45 31.55,0.002 31.006,0Z" style="fill:#1d70b8"/><path d="M17.892,10.752L19.678,10.752L19.678,8.01L17.216,8C14.486,8 13.864,10.046 13.864,11.354L13.864,13.182L12.284,13.182L12.284,16.006L13.864,16.006L13.864,24L17.186,24L17.186,16.006L19.428,16.006L19.72,13.182L17.186,13.182L17.186,11.52C17.188,10.898 17.602,10.752 17.892,10.752Z" style="fill:#fff;fill-rule:nonzero;"/></svg>');
+    }
+    &__link--facebook:hover:before {
+        background-image: svg-url('<svg width="32" height="32" viewBox="0 0 32 32"><path d="M31.006,0L0.994,0C0.45,0.002 0.002,0.45 0,0.994L0,31.008C0,31.558 0.452,32 0.994,32L31.006,32C31.55,31.998 31.998,31.552 32,31.008L32,0.994C31.996,0.45 31.55,0.002 31.006,0Z" style="fill:#003078"/><path d="M17.892,10.752L19.678,10.752L19.678,8.01L17.216,8C14.486,8 13.864,10.046 13.864,11.354L13.864,13.182L12.284,13.182L12.284,16.006L13.864,16.006L13.864,24L17.186,24L17.186,16.006L19.428,16.006L19.72,13.182L17.186,13.182L17.186,11.52C17.188,10.898 17.602,10.752 17.892,10.752Z" style="fill:#fff;fill-rule:nonzero;"/></svg>');
+    }
+    &__link--facebook:focus:before,
+    &__link--facebook:active:before {
+        background-image: svg-url('<svg width="32" height="32" viewBox="0 0 32 32"><path d="M31.006,0L0.994,0C0.45,0.002 0.002,0.45 0,0.994L0,31.008C0,31.558 0.452,32 0.994,32L31.006,32C31.55,31.998 31.998,31.552 32,31.008L32,0.994C31.996,0.45 31.55,0.002 31.006,0Z" style="fill:#0b0c0c"/><path d="M17.892,10.752L19.678,10.752L19.678,8.01L17.216,8C14.486,8 13.864,10.046 13.864,11.354L13.864,13.182L12.284,13.182L12.284,16.006L13.864,16.006L13.864,24L17.186,24L17.186,16.006L19.428,16.006L19.72,13.182L17.186,13.182L17.186,11.52C17.188,10.898 17.602,10.752 17.892,10.752Z" style="fill:#fff;fill-rule:nonzero;"/></svg>');
+    }
+}
diff --git a/server/views/partials/social.html b/server/views/partials/social.html
@@ -1,16 +1,16 @@
-<!--
-<div class="icons-buttons">
-  <h3 class="govuk-heading-m">Share this page</h3>
-  <ul>
-    <li>
-      <a target="_blank" data-journey-click="LFW:SPW:Twitter" href="https://twitter.com/intent/tweet?original_referer&amp;text=Important%20flood%20risk%20information%20%E2%80%93%20please%20retweet%20https%3A%2F%2Fflood-warning-information.service.gov.uk%2Ftarget-area%2F011FWFNC6KC" class="twitter">Twitter</a>
-    </li>
-    <li>
-      <a target="_blank" data-journey-click="LFW:SPW:Facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fflood-warning-information.service.gov.uk%2Ftarget-area%2F011FWFNC6KC&amp;title=Flood%20risk%20information%20for%20Keswick%20Campsite%20-%20GOV.UK" class="facebook">Facebook</a>
-    </li>
-    <li>
-      <a data-journey-click="LFW:SPW:email" href="mailto:?subject=I%20want%20to%20share%20this%20government%20flood%20risk%20information%20with%20you&amp;body=I%20thought%20this%20flood%20risk%20information%20from%20the%20government%20would%20interest%20you.%0D%0A%0D%0Ahttps%3A%2F%2Fflood-warning-information.service.gov.uk%2Ftarget-area%2F011FWFNC6KC%0D%0A%0D%0APlease%20forward%20it%20to%20anyone%20else%20you%20think%20might%20find%20it%20useful." class="email">Email</a>
-    </li>
-  </ul>
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-full">
+    <h2 class="govuk-heading-m govuk-!-margin-top-6">Share this page</h2>
+    <ul class="defra-social">
+      <li class="defra-social__channel">
+        <a class="defra-social__link defra-social__link--facebook" href="https://www.facebook.com/sharer/sharer.php?u={{fullUrl | urlencode}}{% if model.postTitle %}&title={{model.postTitle}}{% endif %}">Facebook</a>
+      </li>
+      <li class="defra-social__channel">
+        <a class="defra-social__link defra-social__link--twitter"  href="https://twitter.com/intent/tweet?original_referer&amp;text=Important%20flood%20risk%20information%20%E2%80%93%20please%20retweet%20&url={{fullUrl | urlencode}}">Twitter</a>
+      </li>
+      <li class="defra-social__channel">
+        <a class="defra-social__link defra-social__link--email"  href="mailto:?subject=I%20want%20to%20share%20this%20government%20flood%20risk%20information%20with%20you&amp;body=I%20thought%20this%20flood%20risk%20information%20from%20the%20government%20would%20interest%20you.%0D%0A%0D%0A{{fullUrl | urlencode}}%0D%0A%0D%0APlease%20forward%20it%20to%20anyone%20else%20you%20think%20might%20find%20it%20useful.">Email</a>
+      </li>
+    </ul>
+  </div>
 </div>
--->
diff --git a/server/views/station.html b/server/views/station.html
@@ -292,6 +292,7 @@ <h2 class="govuk-heading-m govuk-!-margin-top-6">How levels here could affect ne
     <p class="govuk-text govuk-!-margin-bottom-6">
       <a href="/how-we-measure-river-sea-groundwater-levels">How we measure river, sea and groundwater levels</a>
     </p>
+    {% include "partials/social.html" %}
   </div>  
 </div>  
 

diff --git a/server/views/target-area.html b/server/views/target-area.html
@@ -78,8 +78,8 @@ <h2 class="govuk-heading-m">Check river, sea and groundwater levels</h2>
     <p><a href="/river-and-sea-levels?target-area={{ model.targetArea }}">Find a river, sea or groundwater level in this area.</a></p>
     <p><a href="https://www.gov.uk/sign-up-for-flood-warnings">Get flood warnings by phone, text or email.</a></p>
 
-  {% include "partials/context-footer.html" %}
-
+    {% include "partials/context-footer.html" %}
+    {% include "partials/social.html" %}
   </div>
 
   <div class="govuk-grid-column-one-third">

diff --git a/test/models/station.js b/test/models/station.js
@@ -32,6 +32,7 @@ lab.experiment('Station model test', () => {
     Code.expect(Result.banner).to.equal(0)
     Code.expect(Result.pageTitle).to.equal('River Adur level at Beeding Bridge')
     Code.expect(Result.dataOverHourOld).to.equal(true)
+    Code.expect(Result.postTitle).to.equal('Latest river level information for the River Adur at Beeding Bridge ')
   })
   lab.test('Test station viewModel dataOverHourOld to be false', async () => {
     const stationData = data.stationRiver

diff --git a/test/routes/station.js b/test/routes/station.js
@@ -158,6 +158,7 @@ lab.experiment('Test - /station/{id}', () => {
     Code.expect(response.payload).to.contain('0.15m to 3.50m')
     Code.expect(response.payload).to.contain('<a href="/river-and-sea-levels?rloi-id=5146" class="defra-flood-nav__link">Check nearby measurements</a>')
     Code.expect(response.payload).to.contain('<a href="/station/5122" class="defra-flood-nav__link defra-flood-nav__link--upstream">Go upstream</a>')
+    Code.expect(response.payload).to.contain('<h2 class="govuk-heading-m govuk-!-margin-top-6">Share this page</h2>')
   })
   lab.test('GET station/2042/downstream ', async () => {
     const floodService = require('../../server/services/flood')

diff --git a/test/routes/target-area.js b/test/routes/target-area.js
@@ -110,8 +110,8 @@ lab.experiment('Target-area tests', () => {
     }
 
     const response = await server.inject(options)
-
     Code.expect(response.statusCode).to.equal(200)
+    Code.expect(response.payload).to.contain('<h2 class="govuk-heading-m govuk-!-margin-top-6">Share this page</h2>')
     Code.expect(response.payload).to.contain('Flood alert for Upper River Derwent, Stonethwaite Beck and Derwent Water')
   })
   lab.test('GET target-area 011WAFDW  blank situation text', async () => {
-Original file line number
+Diff line change
@@ Expand Up @@
         <p class="govuk-text govuk-!-margin-bottom-6">
           <a href="/how-we-measure-river-sea-groundwater-levels">How we measure river, sea and groundwater levels</a>
         </p>
+        {% include "partials/social.html" %}
       </div>
     </div>
@@ Expand Down @@