Rename CSS classes for consistency

This prefixes everything to do with areas/the map with `area-list`, so
from looking at one element you know which `.scss` file will contain the
relevant code.

app/assets/stylesheets/components/area-list.scss

@@ -78,12 +78,12 @@
 
 }
 
-#map {
+#area-list-map {
   z-index: 50;
   margin-bottom: govuk-spacing(4);
 }
 
-.area-key {
+.area-list-key {
 
   display: inline-block;
   position: relative;
@@ -133,7 +133,8 @@
 
 }
 
-.map-details {
+.area-list-map-details {
+
   .govuk-details__summary {
     display: block;
     padding-top: govuk-spacing(1);
@@ -147,4 +148,5 @@
     border-bottom: 1px solid $border-colour;
     margin-top: -1px;
   }
+
 }

app/templates/views/broadcast/macros/area-map.html

@@ -1,7 +1,7 @@
 {% macro map(broadcast_message) %}
-  <div id="map"></div>
+  <div id="area-list-map"></div>
   <ul>
-    <li class="area-key area-key--certain">
+    <li class="area-list-key area-list-key--certain">
       <span class="visually-hidden">
         An area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.estimated_area) }} square miles
       </span>
@@ -9,7 +9,7 @@
       <span class="visually-hidden">the</span>
       alert
     </li>
-    <li class="area-key area-key--likely">
+    <li class="area-list-key area-list-key--likely">
       <span class="visually-hidden">
         An extra area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.bleed.estimated_area - broadcast_message.simple_polygons.estimated_area) }} square miles is
       </span>
@@ -19,7 +19,7 @@
       </span>
       alert
     </li>
-    <li class="area-key area-key--phone-estimate">
+    <li class="area-list-key area-list-key--phone-estimate">
       {% if broadcast_message.count_of_phones == broadcast_message.count_of_phones_likely %}
         {{ broadcast_message.count_of_phones|format_thousands }} phones estimated
       {% else %}

app/templates/views/broadcast/partials/area-map-javascripts.html

@@ -28,7 +28,7 @@
   {% endfor %}
 
 
-  var mapElement = document.getElementById('map');
+  var mapElement = document.getElementById('area-list-map');
 
   // if element is inside a details element then to make the map render correctly we open the details element
   // and set up the map before closing the details map after
@@ -41,7 +41,7 @@
   mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
 
   var mymap = L.map(
-    'map',
+    'area-list-map',
     {
       scrollWheelZoom: false
     }

app/templates/views/broadcast/view-message.html

@@ -138,7 +138,7 @@
     {% endif %}
   {% endfor %}
 
-  <div class="map-details">
+  <div class="area-list-map-details">
     {{ govukDetails({
       "summaryText": "Show map of areas",
       "html": map(broadcast_message)

tests/app/main/views/test_broadcast.py

@@ -430,11 +430,11 @@ def test_preview_broadcast_areas_page(
         for item in page.select('ul.area-list li.area-list-item')
     ] == areas_listed
 
-    assert len(page.select('#map')) == 1
+    assert len(page.select('#area-list-map')) == 1
 
     assert [
         normalize_spaces(item.text)
-        for item in page.select('ul li.area-key')
+        for item in page.select('ul li.area-list-key')
     ] == estimates