From 1c3095329b92e8b77125982c86bebe94437bc5e1 Mon Sep 17 00:00:00 2001
From: David McDonald <david.mcdonald@digital.cabinet-office.gov.uk>
Date: Wed, 9 Oct 2019 16:16:22 +0100
Subject: [PATCH] Change radio buttons to inline

Adds ability to have inline radio buttons using the fieldset.inline
functionality from gov.uk elements.

Then implements this for the radio buttons for choosing postage
class.

Also overrides the gov uk elements styling for the inline radio
buttons to place them slightly closer together as this looks
better.
---
 app/assets/stylesheets/components/radios.scss | 6 ++++++
 app/templates/components/radios.html          | 4 ++--
 app/templates/components/select-input.html    | 8 ++++----
 app/templates/views/uploads/preview.html      | 2 +-
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/components/radios.scss b/app/assets/stylesheets/components/radios.scss
index ca6b343dc..0b755e10f 100644
--- a/app/assets/stylesheets/components/radios.scss
+++ b/app/assets/stylesheets/components/radios.scss
@@ -111,3 +111,9 @@
   }
 
 }
+
+.inline {
+  .multiple-choice {
+    margin-right: 15px;
+  }
+}
diff --git a/app/templates/components/radios.html b/app/templates/components/radios.html
index dd56baba0..e41e57af4 100644
--- a/app/templates/components/radios.html
+++ b/app/templates/components/radios.html
@@ -1,7 +1,7 @@
 {% from "components/select-input.html" import select, select_list, select_nested, select_wrapper, select_input %}
 
-{% macro radios(field, hint=None, disable=[], option_hints={}, hide_legend=False) %}
-  {{ select(field, hint, disable, option_hints, hide_legend, input="radio") }}
+{% macro radios(field, hint=None, disable=[], option_hints={}, hide_legend=False, inline=False) %}
+  {{ select(field, hint, disable, option_hints, hide_legend, input="radio", inline=inline) }}
 {% endmacro %}
 
 
diff --git a/app/templates/components/select-input.html b/app/templates/components/select-input.html
index f65647647..f8387c68e 100644
--- a/app/templates/components/select-input.html
+++ b/app/templates/components/select-input.html
@@ -1,6 +1,6 @@
-{% macro select(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text", input="radio") %}
+{% macro select(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text", input="radio", inline=False) %}
   {% call select_wrapper(
-    field, hint, disable, option_hints, hide_legend, collapsible_opts, legend_style
+    field, hint, disable, option_hints, hide_legend, collapsible_opts, legend_style, inline=inline
   ) %}
     {% for option in field %}
       {{ select_input(option, disable, option_hints, input=input) }}
@@ -35,13 +35,13 @@
 {% endmacro %}
 
 
-{% macro select_wrapper(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text") %}
+{% macro select_wrapper(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text", inline=False) %}
   {% set is_collapsible = collapsible_opts|length %}
   <div class="form-group {% if field.errors %} form-group-error{% endif %}"{% if is_collapsible %} data-module="collapsible-checkboxes"{% if collapsible_opts.field %} data-field-label="{{ collapsible_opts.field }}"{% endif %}{% endif %}>
     {% if is_collapsible %}
     <div class="selection-summary" role="region" aria-live="polite"></div>
     {% endif %}
-    <fieldset id="{{ field.id }}">
+    <fieldset id="{{ field.id }}" {% if inline %}class="inline"{% endif %}>
       <legend class="{{ 'form-label' if not hide_legend else '' }}{% if legend_style != 'text' %} {{ legend_style }}{% endif %}">
         {% if hide_legend %}<span class="visually-hidden">{% endif %}
           {{ field.label.text|safe }}
diff --git a/app/templates/views/uploads/preview.html b/app/templates/views/uploads/preview.html
index fc74ca0e2..8bfba49d7 100644
--- a/app/templates/views/uploads/preview.html
+++ b/app/templates/views/uploads/preview.html
@@ -41,7 +41,7 @@
           service_id=current_service.id,
         )}}" class='page-footer'>
           {{ form.csrf_token }}
-          {{ radios(form.postage, hide_legend=true) }}
+          {{ radios(form.postage, hide_legend=true, inline=True) }}
           {{ form.file_id(value=file_id) }}
         <button type="submit" class="button">Send 1 letter</button>
       </form>