From 4aa4970fc92027d33154b43e575f55b4364a980a Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 4 Jan 2019 13:44:52 +0000
Subject: [PATCH] Add grey lines to visually show level of nesting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Uses some CSS to draw some grey lines to show which radios descend from
which.

I don’t feel like the intentation is enough, and it looks a bit messy
because the circles of the radio buttons don’t have straight edges
easily suggest visual alignment.

Copies the design from conditionally revealing content in the design
system:
https://design-system.service.gov.uk/components/radios/#conditionally-revealing-content

Implementation is done with pseudo elements, because borders can’t be
positionned exactly enough.
---
 app/assets/stylesheets/app.scss               |  5 --
 app/assets/stylesheets/components/pill.scss   |  4 +-
 .../stylesheets/components/radio-select.scss  | 57 +++++++++++++++++++
 app/templates/components/radios.html          |  9 +--
 4 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
index b30cd8e80..e80f0ec18 100644
--- a/app/assets/stylesheets/app.scss
+++ b/app/assets/stylesheets/app.scss
@@ -251,11 +251,6 @@ details .arrow {
   cursor: default;
 }
 
-.multiple-choice > .panel {
-  border-left: none;
-  padding: 0 0 0 12px;
-}
-
 .heading-inline {
   display: inline-block;
 }
diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss
index 8258a2738..5139c9632 100644
--- a/app/assets/stylesheets/components/pill.scss
+++ b/app/assets/stylesheets/components/pill.scss
@@ -57,11 +57,11 @@
     border: 2px solid $black;
     outline: 1px solid rgba($white, 0.1);
     position: relative;
-    z-index: 1000;
+    z-index: 10;
     color: $text-colour;
 
     &:focus {
-      z-index: 10;
+      z-index: 1000;
       outline: 3px solid $yellow;
     }
 
diff --git a/app/assets/stylesheets/components/radio-select.scss b/app/assets/stylesheets/components/radio-select.scss
index 59586121a..3889218ac 100644
--- a/app/assets/stylesheets/components/radio-select.scss
+++ b/app/assets/stylesheets/components/radio-select.scss
@@ -57,3 +57,60 @@
   }
 
 }
+
+.radios-nested {
+
+  margin-bottom: 10px;
+
+  .multiple-choice {
+
+    $circle-diameter: 39px;
+    $border-thickness: 4px;
+    $border-indent: ($circle-diameter / 2) - ($border-thickness / 2);
+
+    float: none;
+    position: relative;
+
+    &:before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: $border-indent;
+      width: $border-thickness;
+      height: 100%;
+      background: $border-colour;
+    }
+
+    label {
+      float: none;
+    }
+
+    [type=radio]+label::before {
+      // To overlap the grey inset line
+      background: $white;
+    }
+
+    ul {
+      // To equalise the spacing between the line and the top/bottom of
+      // the radio
+      margin-top: 5px;
+      margin-bottom: -5px;
+    }
+
+    .block-label-hint {
+      &:after {
+        // Adds an little extra segment of line alongside the ‘current folder’
+        // hint so that it extends all the way down to the next radio
+        content: "";
+        position: absolute;
+        bottom: -5px;
+        left: $border-indent;
+        width: $border-thickness;
+        height: 25px;
+        background: $border-colour;
+      }
+    }
+
+  }
+
+}
diff --git a/app/templates/components/radios.html b/app/templates/components/radios.html
index a35f2c0fa..351158acb 100644
--- a/app/templates/components/radios.html
+++ b/app/templates/components/radios.html
@@ -19,10 +19,9 @@
     options,
     child_map,
     disable=[],
-    option_hints={},
-    top_level=False
+    option_hints={}
 ) %}
-    <ul{% if not top_level %} class="panel panel-border-narrow"{% endif %}>
+    <ul>
     {% for option in options %}
       {% if child_map[option.data] %}
         {% call radio(option, disable, option_hints, as_list_item=True) %}
@@ -47,7 +46,9 @@
   {% call radios_wrapper(
     field, hint, disable, option_hints, hide_legend
   ) %}
-    {{ radio_list(child_map[None], child_map, disable, option_hints, top_level=True) }}
+    <div class="radios-nested">
+      {{ radio_list(child_map[None], child_map, disable, option_hints) }}
+    </div>
   {% endcall %}
 {% endmacro %}