Merge pull request #3642 from alphagov/live-broadcast-tag

Show an indication that a broadcast service is live

app/assets/stylesheets/components/navigation.scss

@@ -20,19 +20,27 @@
 
   &-service-type {
 
+    @include bold-16;
+    position: relative;
+    display: inline-block;
+    margin-left: govuk-spacing(2);
+    padding: 0 govuk-spacing(1);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+
     &--training {
-      @include bold-16;
-      position: relative;
-      display: inline-block;
-      margin-left: govuk-spacing(2);
-      padding: 0 govuk-spacing(1);
       background: $grey-3;
       color: mix($grey-1, $text-colour);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
       box-shadow: 0 -3px 0 0 $grey-3;
     }
 
+    &--live {
+      // This uses new Design System colours to match .govuk-tag--red
+      background: #F6D7D2;
+      color: #942514;
+      box-shadow: 0 -3px 0 0 #F6D7D2;
+    }
+
   }
 
   &-service-switch,

app/templates/withnav_template.html

@@ -17,8 +17,12 @@
       {% endif %}
       <div class="navigation-service-name govuk-!-font-weight-bold">
         {{ current_service.name }}
-        {% if current_service.has_permission('broadcast') and current_service.trial_mode %}
-          <span class="navigation-service-type--training navigation-service-type--training--with-arrow">Training</span>
+        {% if current_service.has_permission('broadcast') %}
+          {% if current_service.trial_mode %}
+            <span class="navigation-service-type navigation-service-type--training">Training</span>
+          {% else %}
+            <span class="navigation-service-type navigation-service-type--live">Live</span>
+          {% endif %}
         {% endif %}
       </div>
       <a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>

tests/app/main/views/test_broadcast.py

@@ -184,6 +184,48 @@ def test_broadcast_tour_page_4_shows_service_name(
     )
 
 
+@pytest.mark.parametrize('trial_mode, selector, expected_text, expected_tagged_text', (
+    (
+        True,
+        '.navigation-service-type.navigation-service-type--training',
+        'service one Training Switch service',
+        'Training',
+    ),
+    (
+        False,
+        '.navigation-service-type.navigation-service-type--live',
+        'service one Live Switch service',
+        'Live',
+    ),
+))
+def test_broadcast_service_shows_live_or_training(
+    client_request,
+    service_one,
+    mock_get_no_broadcast_messages,
+    mock_get_service_templates_when_no_templates_exist,
+    trial_mode,
+    selector,
+    expected_text,
+    expected_tagged_text,
+):
+    service_one['permissions'] += ['broadcast']
+    service_one['restricted'] = trial_mode
+    page = client_request.get(
+        '.broadcast_dashboard',
+        service_id=SERVICE_ONE_ID,
+    )
+    assert normalize_spaces(
+        page.select_one('.navigation-service').text
+    ) == (
+        expected_text
+    )
+    assert normalize_spaces(
+        page.select_one('.navigation-service').select_one(selector).text
+    ) == (
+        expected_tagged_text
+    )
+
+
 @pytest.mark.parametrize('step_index', (0, 7))
 def test_broadcast_tour_page_404s_out_of_range(
     client_request,