Remove show/hide behaviour from permissions form

In research we found that:
- people didn’t initially realise that the permissions expanded when the
  ‘admin’ option was selected
- not having all the options visible at once makes it hard to know what
  permissions you are (and more importantly aren’t) giving to people

This commit makes it so that:
- the options within the ‘admin’ option are always visible
- a bit of Javascript logic makes it so you can pick ‘caseworker’ and
  ‘manage service’, for example (by deselecting one when you pick the
  other)

app/assets/javascripts/conditionalRadios.js

@@ -6,18 +6,35 @@
     this.start = function(component) {
 
       const $radios = $('[type=radio]', $(component)),
-            showHidePanels = function() {
+            $checkboxes = $('[type=checkbox]', $(component));
-              $radios.each(function() {
-                $('#panel-' + $(this).attr('value'))
-                  .toggleClass(
-                    'js-hidden',
-                    !$(this).is(":checked")
-                  );
-              });
-            };
 
-      $radios.on('click', showHidePanels);
+      let clearable = true;
-      showHidePanels();
+
+      let clearInvalidSelections = function() {
+        if (!clearable) {
+          clearable = true;
+          return;
+        }
+        $radios.each(function() {
+          let checked = $(this).is(':checked');
+          $('#panel-' + $(this).attr('value'))
+            .each(function() {
+              if (!checked) {
+                $('[type=checkbox]', this).removeAttr('checked');
+              }
+            });
+        });
+      };
+
+      let selectParent = function() {
+        clearable = false;
+        let parentValue = $(this).parents("[id^='panel-']").attr('id').replace('panel-', '');
+        $('[value=' + parentValue + ']').trigger('click');
+      };
+
+      $checkboxes.on('click', selectParent);
+      $radios.on('click', clearInvalidSelections);
+      clearInvalidSelections();
 
     };
   };

app/assets/stylesheets/components/conditional-radios.scss

@@ -1,4 +1,5 @@
 $border-thickness: 9px;
+$top-spacing: $gutter + 5px;
 
 .multiple-choice {
 
@@ -6,7 +7,7 @@ $border-thickness: 9px;
 
   .block-label {
     &:before {
-      box-shadow: 0 4px 0 0 $white;
+      box-shadow: 0 5px 0 0 $white;
     }
   }
 
@@ -16,10 +17,10 @@ $border-thickness: 9px;
 
   &-panel {
     border-left: $border-thickness solid $border-colour;
-    margin: 0 0 0 ($border-thickness + 6px);
+    margin: 0 0 (-$top-spacing - $gutter) $gutter-half;
-    padding: $gutter-one-third 0 0 ($gutter - 3px);
+    padding: $top-spacing 0 0 ($gutter - 3px);
     position: relative;
-    top: -$gutter-one-third;
+    top: -$top-spacing;
     z-index: 1;
   }
 

app/templates/components/radios.html

@@ -137,7 +137,7 @@
 {% endmacro %}
 
 {% macro conditional_radio_panel(id) %}
-  <div class="js-hidden panel panel-border-wide conditional-radios-panel" id="panel-{{ id }}">
+  <div class="conditional-radios-panel" id="panel-{{ id }}">
     {{ caller() }}
   </div>
 {% endmacro %}

app/templates/views/manage-users/permissions.html

@@ -2,25 +2,21 @@
 {% from "components/radios.html" import radio, radios, radios_wrapper, conditional_radio_panel %}
 
 {% if 'caseworking' in current_service.permissions %}
-  <div data-module="conditional-radios">
+  <div class="conditional-radios" data-module='conditional-radios'>
-    {% call radios_wrapper(form.user_type, hide_legend=True) %}
+    {% call radios_wrapper(form.user_type) %}
       {% for option in form.user_type %}
-        {{ radio(option) }}
+
+        <div class="bottom-gutter-1-3">
+          {{ radio(option, option_hints={
+              'admin': 'See dashboard and team members',
+              'caseworker': 'Send messages and see sent messages'
+          }) }}
+        </div>
         {% if option.data == 'admin' %}
-          {% call conditional_radio_panel(option.data) %}
+          {% call conditional_radio_panel('admin') %}
-            <div class="bottom-gutter-1-2">
-              <p class="form-label">
-                All admin users can see
-              </p>
-              <ul class="list list-bullet">
-                <li>templates</li>
-                <li>history of sent messages</li>
-                <li>who the other team members are</li>
-              </ul>
-            </div>
             <fieldset class="form-group">
               <legend class="form-label">
-                Permissions
+                Extra permissions
               </legend>
               {{ checkbox(form.send_messages) }}
               {{ checkbox(form.manage_templates) }}
@@ -29,9 +25,11 @@
             </fieldset>
           {% endcall %}
         {% endif %}
+
       {% endfor %}
     {% endcall %}
   </div>
+
 {% else %}
   <fieldset class="form-group">
     <legend class="form-label">