FSR-1295: Consistent button CSS

server/src/js/core.js

@@ -43,7 +43,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/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);

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/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

@@ -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')