Added GOVUK radio buttons on National Highways report message

Currently we use the segmented-control(pill) component, unfortunately it does not cover cases where the address of the report is quite long. This causes horizontal overflow and UI wise both buttons look quite uneven, because one is quite long while the other one says "Somewhere else".

With this change I think is also more obvious that they are options and not buttons.

web/cobrands/highways/assets.js

@@ -150,31 +150,41 @@ function add_highways_warning(road_name) {
   var $warning = $('<div class="box-warning" id="highways"><p>It looks like you clicked on the <strong>' + road_name + '</strong> which is managed by <strong>National Highways</strong>. ' +
                    'Does your report concern something on this road, or somewhere else (e.g a road crossing it)?<p></div>');
   var $page = $('<div data-page-name="highwaysengland" class="js-reporting-page js-reporting-page--active js-reporting-page--highways"></div>');
-  var $radios = $('<p class="segmented-control segmented-control--radio"></p>');
-
-    $('<input>')
-        .attr('type', 'radio')
-        .attr('name', 'highways-choice')
-        .attr('id', 'js-highways')
-        .prop('checked', true)
-        .on('click', he_selected)
+  var $radios = $('<fiedset class="govuk-fieldset govuk-radios"></fieldset>');
+
+    $('<div>')
+        .addClass('govuk-radios__item')
+        .append(
+            $('<input>')
+                .attr('type', 'radio')
+                .attr('name', 'highways-choice')
+                .attr('id', 'js-highways')
+                .prop('checked', true)
+                .on('click', he_selected)
+                .addClass('govuk-radios__input'),
+            $('<label>')
+                .attr('for', 'js-highways')
+                .text('On the ' + road_name)
+                .addClass('govuk-label govuk-radios__label')
+        )
         .appendTo($radios);
-    $('<label>')
-        .attr('for', 'js-highways')
-        .text('On the ' + road_name)
-        .addClass('btn')
-        .appendTo($radios);
-    $('<input>')
-        .attr('type', 'radio')
-        .attr('name', 'highways-choice')
-        .attr('id', 'js-not-highways')
-        .on('click', non_he_selected)
-        .appendTo($radios);
-    $('<label>')
-        .attr('for', 'js-not-highways')
-        .text('Somewhere else')
-        .addClass('btn')
+
+    $('<div>')
+        .addClass('govuk-radios__item')
+        .append(
+            $('<input>')
+                .attr('type', 'radio')
+                .attr('name', 'highways-choice')
+                .attr('id', 'js-not-highways')
+                .on('click', non_he_selected)
+                .addClass('govuk-radios__input'),
+            $('<label>')
+                .attr('for', 'js-not-highways')
+                .text('Somewhere else')
+                .addClass('govuk-label govuk-radios__label')
+        )
         .appendTo($radios);
+
     $radios.appendTo($warning);
     $warning.wrap($page);
     $page = $warning.parent();