Merge pull request #3535 from alphagov/try-introducing-govuk-checkboxes-again

Try introducing govuk checkboxes again

app/assets/javascripts/collapsibleCheckboxes.js

@@ -5,7 +5,7 @@
 
   function Summary (module) {
     this.module = module;
-    this.$el = module.$formGroup.find('.selection-summary');
+    this.$el = module.$formGroup.find('.selection-summary').first();
     this.fieldLabel = module.fieldLabel;
     this.total = module.total;
     this.addContent();
@@ -25,6 +25,7 @@
     if (this.fieldLabel === 'folder') { this.$text.addClass('selection-summary__text--folders'); }
 
     this.$el.append(this.$text);
+    this.module.$formGroup.find('.govuk-hint').remove();
   };
   Summary.prototype.update = function(selection) {
     let template;
@@ -86,12 +87,13 @@
       .focus();
   };
   CollapsibleCheckboxes.prototype.start = function(component) {
-    this.$formGroup = $(component);
-    this.$fieldset = this.$formGroup.find('fieldset');
+    this.$component = $(component);
+    this.$formGroup = this.$component.find('.govuk-form-group').first();
+    this.$fieldset = this.$formGroup.find('fieldset').first();
     this.$checkboxes = this.$fieldset.find('input[type=checkbox]');
-    this.fieldLabel = this.$formGroup.data('fieldLabel');
+    this.fieldLabel = this.$component.data('fieldLabel');
     this.total = this.$checkboxes.length;
-    this.legendText = this.$fieldset.find('legend').text().trim();
+    this.legendText = this.$fieldset.find('legend').first().text().trim();
     this.expanded = false;
 
     this.addHeadingHideLegend();
@@ -113,7 +115,7 @@
   };
   CollapsibleCheckboxes.prototype.getSelection = function() { return this.$checkboxes.filter(':checked').length; };
   CollapsibleCheckboxes.prototype.addHeadingHideLegend = function() {
-    const headingLevel = this.$formGroup.data('heading-level') || '2';
+    const headingLevel = this.$component.data('heading-level') || '2';
 
     this.$heading = $(`<h${headingLevel} class="heading-small">${this.legendText}</h${headingLevel}>`);
     this.$fieldset.before(this.$heading);

app/assets/stylesheets/components/checkboxes.scss

@@ -1,3 +1,7 @@
+// Taken from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/checkboxes/_checkboxes.scss
+$govuk-touch-target-size: 44px;
+$govuk-checkboxes-size: 40px;
+
 .selection-summary {
 
   .selection-summary__text {
@@ -65,6 +69,30 @@
 
 }
 
+.govuk-form-group--nested {
+
+  $border-thickness: $govuk-touch-target-size - $govuk-checkboxes-size;
+  $border-indent: $govuk-touch-target-size / 2;
+
+  position: relative;
+
+  // To equalise the spacing between the line and the top/bottom of
+  // the radio
+  margin-top: govuk-spacing(1) + ($border-thickness / 2);
+  margin-bottom: govuk-spacing(1) * -1;
+  padding-left: govuk-spacing(2) + 2;
+
+  &:before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: $border-indent * -1;
+    width: $border-thickness;
+    height: 100%;
+    background: $govuk-border-colour;
+  }
+}
+
 .selection-content {
   margin-bottom: govuk-spacing(4);
 

app/assets/stylesheets/components/message.scss

@@ -24,10 +24,13 @@
   }
 }
 
+$govuk-checkboxes-size: 40px;
+$govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
+$message-type-bottom-spacing: govuk-spacing(4);
+
 .message {
 
   &-name {
-    @include bold-24;
     margin: 0;
 
     a {
@@ -63,37 +66,20 @@
   }
 
   &-type {
-    color: $secondary-text-colour;
-    margin: 0 0 govuk-spacing(4) 0;
+    color: $govuk-secondary-text-colour;
+    margin: 0 0 $message-type-bottom-spacing 0;
+    padding-left: 0;
     pointer-events: none;
   }
 
 }
 
-#template-list {
-
-  margin-top: govuk-spacing(6);
-
-  &.top-gutter-5px {
-    margin-top: 5px;
-  }
-
-}
-
 .template-list {
 
   &-item {
 
     &-with-checkbox {
-
-      position: relative;
-      padding-left: govuk-spacing(9);
-
-      .multiple-choice {
-        position: absolute;
-        left: 0;
-      }
-
+      padding-left: $govuk-checkboxes-size + $govuk-checkboxes-label-padding-left-right;
     }
 
     &-hidden-by-default {
@@ -123,6 +109,29 @@
 
     }
 
+    &-label {
+      position: absolute;
+      left: 0;
+      width: $govuk-checkboxes-size + $govuk-checkboxes-label-padding-left-right;
+      height: 100%;
+      padding: 0;
+    }
+
+    // Fix for GOVUK Frontend selector with high precendence
+    // https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/hint/_hint.scss
+    &-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl)+.template-list-item-hint {
+      margin-bottom: $message-type-bottom-spacing;
+    }
+
+    &-hint {
+      padding-left: 0;
+    }
+
+  }
+
+  &-folder,
+  &-template {
+    @include govuk-font($size: 24, $weight: bold, $line-height: 1.25);
   }
 
   &-folder {

app/assets/stylesheets/govuk-frontend/_all.scss

@@ -26,6 +26,7 @@ $govuk-assets-path: "/static/";
 @import 'components/button/_button';
 @import 'components/details/_details';
 @import 'components/radios/_radios';
+@import 'components/checkboxes/_checkboxes';
 
 @import "utilities/all";
 @import "overrides/all";