defra_ruby_template 3.13.0

data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json

@@ -0,0 +1,240 @@
+{
+    "component": "character-count",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "name": "more-detail",
+                "id": "more-detail",
+                "maxlength": 10,
+                "label": {
+                    "text": "Can you provide more detail?"
+                }
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-info\"></textarea>\n</div>\n\n  <div id=\"more-detail-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with hint",
+            "options": {
+                "name": "with-hint",
+                "id": "with-hint",
+                "maxlength": 10,
+                "label": {
+                    "text": "Can you provide more detail?"
+                },
+                "hint": {
+                    "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
+                }
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint\">\n    Can you provide more detail?\n  </label>\n\n  \n  \n  <div id=\"with-hint-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-hint\" name=\"with-hint\" rows=\"5\" aria-describedby=\"with-hint-info with-hint-hint\"></textarea>\n</div>\n\n  <div id=\"with-hint-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with default value",
+            "options": {
+                "id": "with-default-value",
+                "name": "default-value",
+                "maxlength": 100,
+                "label": {
+                    "text": "Full address"
+                },
+                "value": "221B Baker Street\nLondon\nNW1 6XE\n"
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"100\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-default-value\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-default-value\" name=\"default-value\" rows=\"5\" aria-describedby=\"with-default-value-info\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n  <div id=\"with-default-value-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 100 characters\n</div>\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with default value exceeding limit",
+            "options": {
+                "id": "exceeding-characters",
+                "name": "exceeding",
+                "maxlength": 10,
+                "value": "221B Baker Street\nLondon\nNW1 6XE\n",
+                "label": {
+                    "text": "Full address"
+                },
+                "errorMessage": {
+                    "text": "Please do not exceed the maximum allowed limit"
+                }
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"exceeding-characters\">\n    Full address\n  </label>\n\n\n  \n  \n  <span id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n  <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with custom rows",
+            "options": {
+                "id": "custom-rows",
+                "name": "custom",
+                "maxlength": 10,
+                "label": {
+                    "text": "Full address"
+                },
+                "rows": 8
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"custom-rows\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-rows\" name=\"custom\" rows=\"8\" aria-describedby=\"custom-rows-info\"></textarea>\n</div>\n\n  <div id=\"custom-rows-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with label as page heading",
+            "options": {
+                "id": "textarea-with-page-heading",
+                "name": "address",
+                "maxlength": 10,
+                "label": {
+                    "text": "Full address",
+                    "isPageHeading": true
+                }
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n      Full address\n    </label>\n    </h1>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\" aria-describedby=\"textarea-with-page-heading-info\"></textarea>\n</div>\n\n  <div id=\"textarea-with-page-heading-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with word count",
+            "options": {
+                "id": "word-count",
+                "name": "word-count",
+                "maxwords": 10,
+                "label": {
+                    "text": "Full address"
+                }
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"word-count\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"word-count\" name=\"word-count\" rows=\"5\" aria-describedby=\"word-count-info\"></textarea>\n</div>\n\n  <div id=\"word-count-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 words\n</div>\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with threshold",
+            "options": {
+                "id": "with-threshold",
+                "name": "with-threshold",
+                "maxlength": 10,
+                "threshold": 75,
+                "label": {
+                    "text": "Full address"
+                }
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-threshold=\"75\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-threshold\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-threshold\" name=\"with-threshold\" rows=\"5\" aria-describedby=\"with-threshold-info\"></textarea>\n</div>\n\n  <div id=\"with-threshold-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "classes",
+            "options": {
+                "id": "with-classes",
+                "name": "with-classes",
+                "maxlength": 10,
+                "label": {
+                    "text": "With classes"
+                },
+                "classes": "app-character-count--custom-modifier"
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\" aria-describedby=\"with-classes-info\"></textarea>\n</div>\n\n  <div id=\"with-classes-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "id": "with-attributes",
+                "name": "with-attributes",
+                "maxlength": 10,
+                "label": {
+                    "text": "With attributes"
+                },
+                "attributes": {
+                    "data-attribute": "my data value"
+                }
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" aria-describedby=\"with-attributes-info\" data-attribute=\"my data value\"></textarea>\n</div>\n\n  <div id=\"with-attributes-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "formGroup with classes",
+            "options": {
+                "id": "with-formgroup",
+                "name": "with-formgroup",
+                "maxlength": 10,
+                "label": {
+                    "text": "With formgroup"
+                },
+                "formGroup": {
+                    "classes": "app-character-count--custom-modifier"
+                }
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group app-character-count--custom-modifier\">\n  <label class=\"govuk-label\" for=\"with-formgroup\">\n    With formgroup\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-formgroup\" name=\"with-formgroup\" rows=\"5\" aria-describedby=\"with-formgroup-info\"></textarea>\n</div>\n\n  <div id=\"with-formgroup-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "custom classes on countMessage",
+            "options": {
+                "id": "with-custom-countmessage-class",
+                "name": "with-custom-countmessage-class",
+                "maxlength": 10,
+                "label": {
+                    "text": "With custom countMessage class"
+                },
+                "countMessage": {
+                    "classes": "app-custom-count-message"
+                }
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-custom-countmessage-class\">\n    With custom countMessage class\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-custom-countmessage-class\" name=\"with-custom-countmessage-class\" rows=\"5\" aria-describedby=\"with-custom-countmessage-class-info\"></textarea>\n</div>\n\n  <div id=\"with-custom-countmessage-class-info\" class=\"govuk-hint govuk-character-count__message app-custom-count-message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "spellcheck enabled",
+            "options": {
+                "id": "with-spellcheck",
+                "name": "with-spellcheck",
+                "maxlength": 10,
+                "label": {
+                    "text": "With spellcheck"
+                },
+                "spellcheck": true
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-spellcheck\">\n    With spellcheck\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-spellcheck\" name=\"with-spellcheck\" rows=\"5\" spellcheck=\"true\" aria-describedby=\"with-spellcheck-info\"></textarea>\n</div>\n\n  <div id=\"with-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "spellcheck disabled",
+            "options": {
+                "id": "without-spellcheck",
+                "name": "without-spellcheck",
+                "maxlength": 10,
+                "label": {
+                    "text": "Without spellcheck"
+                },
+                "spellcheck": false
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"without-spellcheck\">\n    Without spellcheck\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"without-spellcheck\" name=\"without-spellcheck\" rows=\"5\" spellcheck=\"false\" aria-describedby=\"without-spellcheck-info\"></textarea>\n</div>\n\n  <div id=\"without-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "custom classes with error message",
+            "options": {
+                "id": "with-custom-error-class",
+                "name": "with-custom-error-class",
+                "maxlength": 10,
+                "label": {
+                    "text": "With custom error class"
+                },
+                "classes": "app-character-count--custom-modifier",
+                "errorMessage": {
+                    "text": "Error message"
+                }
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-custom-error-class\">\n    With custom error class\n  </label>\n\n\n  \n  \n  <span id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n</div>\n\n  <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "with id starting with number",
+            "options": {
+                "name": "more-detail",
+                "id": "1_more-detail",
+                "maxlength": 10,
+                "label": {
+                    "text": "Can you provide more detail?"
+                }
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"1_more-detail\">\n    Can you provide more detail?\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"1_more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"1_more-detail-info\"></textarea>\n</div>\n\n  <div id=\"1_more-detail-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": true
+        }
+    ]
+}

data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json

@@ -0,0 +1,111 @@
+[
+    {
+        "name": "id",
+        "type": "string",
+        "required": true,
+        "description": "The id of the textarea."
+    },
+    {
+        "name": "name",
+        "type": "string",
+        "required": true,
+        "description": "The name of the textarea, which is submitted with the form data."
+    },
+    {
+        "name": "rows",
+        "type": "string",
+        "required": false,
+        "description": "Optional number of textarea rows (default is 5 rows)."
+    },
+    {
+        "name": "value",
+        "type": "string",
+        "required": false,
+        "description": "Optional initial value of the textarea."
+    },
+    {
+        "name": "maxlength",
+        "type": "string",
+        "required": true,
+        "description": "If `maxwords` is set, this is not required. The maximum number of characters. If `maxwords` is provided, the `maxlength` argument will be ignored."
+    },
+    {
+        "name": "maxwords",
+        "type": "string",
+        "required": true,
+        "description": "If `maxlength` is set, this is not required. The maximum number of words. If `maxwords` is provided, the `maxlength` argument will be ignored."
+    },
+    {
+        "name": "threshold",
+        "type": "string",
+        "required": false,
+        "description": "The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default."
+    },
+    {
+        "name": "label",
+        "type": "object",
+        "required": true,
+        "description": "Options for the label component.",
+        "isComponent": true
+    },
+    {
+        "name": "hint",
+        "type": "object",
+        "required": false,
+        "description": "Options for the hint component.",
+        "isComponent": true
+    },
+    {
+        "name": "errorMessage",
+        "type": "object",
+        "required": false,
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
+        "isComponent": true
+    },
+    {
+        "name": "formGroup",
+        "type": "object",
+        "required": false,
+        "description": "Options for the form-group wrapper",
+        "params": [
+            {
+                "name": "classes",
+                "type": "string",
+                "required": false,
+                "description": "Classes to add to the form group (for example to show error state for the whole group)"
+            }
+        ]
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the textarea."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the textarea."
+    },
+    {
+        "name": "spellcheck",
+        "type": "boolean",
+        "required": false,
+        "description": "Optional field to enable or disable the spellcheck attribute on the character count."
+    },
+    {
+        "name": "countMessage",
+        "type": "object",
+        "required": false,
+        "description": "Options for the count message",
+        "params": [
+            {
+                "name": "classes",
+                "type": "string",
+                "required": false,
+                "description": "Classes to add to the count message"
+            }
+        ]
+    }
+]

data/node_modules/govuk-frontend/govuk/components/character-count/macro.njk

@@ -0,0 +1,3 @@
+{% macro govukCharacterCount(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

data/node_modules/govuk-frontend/govuk/components/character-count/template.njk

@@ -0,0 +1,37 @@
+{% from "../textarea/macro.njk" import govukTextarea %}
+{% from "../hint/macro.njk" import govukHint %}
+
+<div class="govuk-character-count" data-module="govuk-character-count"
+{%- if params.maxlength %} data-maxlength="{{ params.maxlength }}"{% endif %}
+{%- if params.threshold %} data-threshold="{{ params.threshold }}"{% endif %}
+{%- if params.maxwords %} data-maxwords="{{ params.maxwords }}"{% endif %}>
+  {{ govukTextarea({
+    id: params.id,
+    name: params.name,
+    describedBy: params.id + '-info',
+    rows: params.rows,
+    spellcheck: params.spellcheck,
+    value: params.value,
+    formGroup: params.formGroup,
+    classes: 'govuk-js-character-count' + (' govuk-textarea--error' if params.errorMessage) + (' ' + params.classes if params.classes),
+    label: {
+      html: params.label.html,
+      text: params.label.text,
+      classes: params.label.classes,
+      isPageHeading: params.label.isPageHeading,
+      attributes: params.label.attributes,
+      for: params.id
+    },
+    hint: params.hint,
+    errorMessage: params.errorMessage,
+    attributes: params.attributes
+  }) }}
+  {{ govukHint({
+    text: 'You can enter up to ' + (params.maxlength or params.maxwords) + (' words' if params.maxwords else ' characters'),
+    id: params.id + '-info',
+    classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes),
+    attributes: {
+      'aria-live': 'polite'
+    }
+  }) }}
+</div>

data/node_modules/govuk-frontend/govuk/components/checkboxes/README.md

@@ -0,0 +1,15 @@
+# Checkboxes
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the checkboxes component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/checkboxes).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/checkboxes/#options-checkboxes-example) for details.

data/node_modules/govuk-frontend/govuk/components/checkboxes/_checkboxes.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/checkboxes/_index.scss

@@ -0,0 +1,320 @@
+@import "../error-message/index";
+@import "../fieldset/index";
+@import "../hint/index";
+@import "../label/index";
+
+@include govuk-exports("govuk/component/checkboxes") {
+
+  $govuk-touch-target-size: 44px;
+  $govuk-checkboxes-size: 40px;
+  $govuk-small-checkboxes-size: 24px;
+  $govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
+
+  .govuk-checkboxes__item {
+    @include govuk-font($size: 19);
+
+    display: block;
+    position: relative;
+
+    min-height: $govuk-checkboxes-size;
+
+    margin-bottom: govuk-spacing(2);
+    padding-left: $govuk-checkboxes-size;
+
+    clear: left;
+  }
+
+  .govuk-checkboxes__item:last-child,
+  .govuk-checkboxes__item:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .govuk-checkboxes__input {
+    $input-offset: ($govuk-touch-target-size - $govuk-checkboxes-size) / 2;
+
+    cursor: pointer;
+
+    // IE8 doesn’t support pseudo-elements, so we don’t want to hide native
+    // elements there.
+    @include govuk-not-ie8 {
+      position: absolute;
+
+      z-index: 1;
+      top: $input-offset * -1;
+      left: $input-offset * -1;
+
+      width: $govuk-touch-target-size;
+      height: $govuk-touch-target-size;
+      margin: 0;
+
+      opacity: 0;
+    }
+
+    @include govuk-if-ie8 {
+      margin-top: 10px;
+      margin-right: $govuk-checkboxes-size / -2;
+      margin-left: $govuk-checkboxes-size / -2;
+      float: left;
+
+      // add focus outline to input
+      &:focus {
+        outline: $govuk-focus-width solid $govuk-focus-colour;
+      }
+    }
+  }
+
+  .govuk-checkboxes__label {
+    display: inline-block;
+    margin-bottom: 0;
+    padding: 8px $govuk-checkboxes-label-padding-left-right govuk-spacing(1);
+    cursor: pointer;
+    // remove 300ms pause on mobile
+    -ms-touch-action: manipulation;
+        touch-action: manipulation;
+  }
+
+  @include govuk-not-ie8 {
+    // [ ] Check box
+    .govuk-checkboxes__label:before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: $govuk-checkboxes-size;
+      height: $govuk-checkboxes-size;
+      border: $govuk-border-width-form-element solid currentColor;
+      background: transparent;
+    }
+
+    // ✔ Check mark
+    //
+    // The check mark is a box with a border on the left and bottom side (└──),
+    // rotated 45 degrees
+    .govuk-checkboxes__label:after {
+      content: "";
+      box-sizing: border-box;
+
+      position: absolute;
+      top: 11px;
+      left: 9px;
+      width: 23px;
+      height: 12px;
+
+      -webkit-transform: rotate(-45deg);
+
+          -ms-transform: rotate(-45deg);
+
+              transform: rotate(-45deg);
+      border: solid;
+      border-width: 0 0 5px 5px;
+      // Fix bug in IE11 caused by transform rotate (-45deg).
+      // See: alphagov/govuk_elements/issues/518
+      border-top-color: transparent;
+
+      opacity: 0;
+
+      background: transparent;
+    }
+  }
+
+  .govuk-checkboxes__hint {
+    display: block;
+    padding-right: $govuk-checkboxes-label-padding-left-right;
+    padding-left: $govuk-checkboxes-label-padding-left-right;
+  }
+
+  // Focused state
+  .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
+    border-width: 4px;
+    box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
+  }
+
+  // Selected state
+  .govuk-checkboxes__input:checked + .govuk-checkboxes__label:after {
+    opacity: 1;
+  }
+
+  // Disabled state
+  .govuk-checkboxes__input:disabled,
+  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label {
+    cursor: default;
+  }
+
+  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label {
+    opacity: .5;
+  }
+
+  // =========================================================
+  // Dividers ('or')
+  // =========================================================
+
+  .govuk-checkboxes__divider {
+    $govuk-divider-size: $govuk-checkboxes-size !default;
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    width: $govuk-divider-size;
+    margin-bottom: govuk-spacing(2);
+    text-align: center;
+  }
+
+  // =========================================================
+  // Conditional reveals
+  // =========================================================
+
+  // The narrow border is used in the conditional reveals because the border has
+  // to be an even number in order to be centred under the 40px checkbox or radio.
+  $conditional-border-width: $govuk-border-width-narrow;
+  // Calculate the amount of padding needed to keep the border centered against the checkbox.
+  $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
+  // Move the border centered with the checkbox
+  $conditional-margin-left: $conditional-border-padding;
+  // Move the contents of the conditional inline with the label
+  $conditional-padding-left: $conditional-border-padding + $govuk-checkboxes-label-padding-left-right;
+
+  .govuk-checkboxes__conditional {
+    @include govuk-responsive-margin(4, "bottom");
+    margin-left: $conditional-margin-left;
+    padding-left: $conditional-padding-left;
+    border-left: $conditional-border-width solid $govuk-border-colour;
+
+    .js-enabled &--hidden {
+      display: none;
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // =========================================================
+  // Small checkboxes
+  // =========================================================
+
+  .govuk-checkboxes--small {
+
+    $input-offset: ($govuk-touch-target-size - $govuk-small-checkboxes-size) / 2;
+    $label-offset: $govuk-touch-target-size - $input-offset;
+
+    .govuk-checkboxes__item {
+      @include govuk-clearfix;
+      min-height: 0;
+      margin-bottom: 0;
+      padding-left: $label-offset;
+      float: left;
+    }
+
+    // Shift the touch target into the left margin so that the visible edge of
+    // the control is aligned
+    //
+    //   ┆What colours do you like?
+    //  ┌┆───┐
+    //  │┆[] │ Purple
+    //  └┆▲──┘
+    //  ▲┆└─ Check box pseudo element, aligned with margin
+    //  └─── Touch target (invisible input), shifted into the margin
+    .govuk-checkboxes__input {
+      @include govuk-not-ie8 {
+        left: $input-offset * -1;
+      }
+
+      @include govuk-if-ie8 {
+        margin-left: $govuk-small-checkboxes-size * -1;
+      }
+    }
+
+    // Adjust the size and position of the label.
+    //
+    // Unlike larger checkboxes, we also have to float the label in order to
+    // 'shrink' it, preventing the hover state from kicking in across the full
+    // width of the parent element.
+    .govuk-checkboxes__label {
+      margin-top: -2px;
+      padding: 13px govuk-spacing(3) 13px 1px;
+      float: left;
+
+      @include govuk-media-query($from: tablet) {
+        padding: 11px govuk-spacing(3) 10px 1px;
+      }
+    }
+
+    // [ ] Check box
+    //
+    // Reduce the size of the check box [1], vertically center it within the
+    // touch target [2]
+    .govuk-checkboxes__label:before {
+      top: $input-offset - $govuk-border-width-form-element; // 2
+      width: $govuk-small-checkboxes-size; // 1
+      height: $govuk-small-checkboxes-size; // 1
+    }
+
+    // ✔ Check mark
+    //
+    // Reduce the size of the check mark and re-align within the checkbox
+    .govuk-checkboxes__label:after {
+      top: 15px;
+      left: 6px;
+      width: 12px;
+      height: 6.5px;
+      border-width: 0 0 3px 3px;
+    }
+
+    // Fix position of hint with small checkboxes
+    //
+    // Do not use hints with small checkboxes – because they're within the input
+    // wrapper they trigger the hover state, but clicking them doesn't actually
+    // activate the control.
+    //
+    // (If you do use them, they won't look completely broken... but seriously,
+    // don't use them)
+    .govuk-checkboxes__hint {
+      padding: 0;
+      clear: both;
+    }
+
+    // Align conditional reveals with small checkboxes
+    .govuk-checkboxes__conditional {
+      $margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2);
+      margin-left: $margin-left;
+      padding-left: $label-offset - ($margin-left + $conditional-border-width);
+      clear: both;
+    }
+
+    // Hover state for small checkboxes.
+    //
+    // We use a hover state for small checkboxes because the touch target size
+    // is so much larger than their visible size, and so we need to provide
+    // feedback to the user as to which checkbox they will select when their
+    // cursor is outside of the visible area.
+    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label:before {
+      box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
+    }
+
+    // Because we've overridden the border-shadow provided by the focus state,
+    // we need to redefine that too.
+    //
+    // We use two box shadows, one that restores the original focus state [1]
+    // and another that then applies the hover state [2].
+    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
+      box-shadow:
+        0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
+        0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
+    }
+
+    // For devices that explicitly don't support hover, don't provide a hover
+    // state (e.g. on touch devices like iOS).
+    //
+    // We can't use `@media (hover: hover)` because we wouldn't get the hover
+    // state in browsers that don't support `@media (hover)` (like Internet
+    // Explorer) – so we have to 'undo' the hover state instead.
+    @media (hover: none), (pointer: coarse) {
+      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label:before {
+        box-shadow: initial;
+      }
+
+      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
+        box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
+      }
+    }
+  }
+}