Allow setting of caseworking on a user

This commit changes the form that the user sees when inviting or editing
another user, if the service has the ‘caseworking’ permission set.

This will allow creating a new type of user, one who only has the
`send_messages` permission, without the `view_activity` permission.

We are doing this because we think there are a number of services with a
lot of users who don’t need to see the dashboard, or the other team
members, and that we can make a simpler interface for these users.

app/assets/javascripts/conditionalRadios.js

@@ -0,0 +1,25 @@
+(function(Modules) {
+  "use strict";
+
+  Modules.ConditionalRadios = function() {
+
+    this.start = function(component) {
+
+      const $radios = $('[type=radio]', $(component)),
+            showHidePanels = function() {
+              $radios.each(function() {
+                $('#panel-' + $(this).attr('value'))
+                  .toggleClass(
+                    'js-hidden',
+                    !$(this).is(":checked")
+                  );
+              });
+            };
+
+      $radios.on('click', showHidePanels);
+      showHidePanels();
+
+    };
+  };
+
+})(window.GOVUK.Modules);

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

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

app/assets/stylesheets/main.scss

@@ -58,6 +58,7 @@ $path: '/static/images/';
 @import 'components/live-search';
 @import 'components/stick-at-top-when-scrolling';
 @import 'components/fullscreen-table';
+@import 'components/conditional-radios';
 @import 'components/vendor/breadcrumbs';
 @import 'components/vendor/responsive-embed';