From 3f338d45cac42a68d6a9a17f497878ffcaf0ec54 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 5 Oct 2020 13:47:21 +0100
Subject: [PATCH] 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          | 8 +++++---
 app/templates/views/broadcast/macros/area-map.html        | 8 ++++----
 .../views/broadcast/partials/area-map-javascripts.html    | 4 ++--
 app/templates/views/broadcast/view-message.html           | 2 +-
 tests/app/main/views/test_broadcast.py                    | 4 ++--
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss
index f7df53b55..1397d6b06 100644
--- a/app/assets/stylesheets/components/area-list.scss
+++ b/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;
   }
+
 }
diff --git a/app/templates/views/broadcast/macros/area-map.html b/app/templates/views/broadcast/macros/area-map.html
index 32b0ce8ee..196f4c447 100644
--- a/app/templates/views/broadcast/macros/area-map.html
+++ b/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 %}
diff --git a/app/templates/views/broadcast/partials/area-map-javascripts.html b/app/templates/views/broadcast/partials/area-map-javascripts.html
index 85a89bf72..871145332 100644
--- a/app/templates/views/broadcast/partials/area-map-javascripts.html
+++ b/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
     }
diff --git a/app/templates/views/broadcast/view-message.html b/app/templates/views/broadcast/view-message.html
index e6028d955..b474da754 100644
--- a/app/templates/views/broadcast/view-message.html
+++ b/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)
diff --git a/tests/app/main/views/test_broadcast.py b/tests/app/main/views/test_broadcast.py
index 2c8b534ec..3ee54a40f 100644
--- a/tests/app/main/views/test_broadcast.py
+++ b/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