Convert radios on provider ratio page (basic)

Also changes the CSS for the radios slider variant
component.

app/assets/stylesheets/components/radios.scss

@@ -129,9 +129,8 @@
     display: none;
   }
 
-  .multiple-choice {
+  .govuk-radios__item {
 
-    display: inline-block;
     margin-right: 0;
     padding: 0;
     width: 38px;

app/main/forms.py

@@ -1597,10 +1597,18 @@ class ProviderForm(StripWhitespaceForm):
 
 class ProviderRatioForm(StripWhitespaceForm):
 
-    ratio = RadioField(choices=[
-        (str(value), '{}% / {}%'.format(value, 100 - value))
-        for value in range(100, -10, -10)
-    ])
+    ratio = GovukRadiosField(choices=[
+            (str(value), '{}% / {}%'.format(value, 100 - value))
+            for value in range(100, -10, -10)
+        ],
+        param_extensions={
+            "classes": "govuk-radios--inline",
+            "fieldset": {
+                "legend": {
+                    "classes": "govuk-visually-hidden"
+                }
+            }
+        })
 
     @property
     def percentage_left(self):

app/templates/views/providers/edit-sms-provider-ratio.html

@@ -2,7 +2,6 @@
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
-{% from "components/radios.html" import radios %}
 
 {% block per_page_title %}
   Text message providers
@@ -30,7 +29,7 @@
             </div>
             {% call form_wrapper() %}
               <div class="radio-slider" data-module="radio-slider">
-                {{ radios(form.ratio, inline=True, hide_legend=True) }}
+                {{ form.ratio }}
                 <div class="radio-slider-left-value">
                   —
                 </div>