govuk_publishing_components 12.21.0 → 13.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f322f0df4f65c7b30d2292ca9f0c4fa2fcc4804cb5a3235c7f493c583463c83b
-  data.tar.gz: 998e34fc7a7595e85538de162b9fc325a2ff5de05821706acf7ddff678ed2d95
+  metadata.gz: df69e5eebf0a2f518d9d7dfc66b2d56d91b438c062242366f9b76eb4e5d30788
+  data.tar.gz: 8b684cbf3231e99af0f82425a8375843660b9fd6454f6d3cb4cfe9f135a79e26
 SHA512:
-  metadata.gz: 499e15846e14aeb7cb49d37b8eec17b6d2890867ec9efa0dd5ea35fc653e52fdd511ec81d413f64af3426c91dc0e8697dd4ece833cd89b25ff74ea5e7d251802
-  data.tar.gz: ab21c7e408f906b84d8867714a912dac1457352ce9c4440093ef0cb5202cc97b4627bd97277003247fa4a71a2c5eeaf13e4a459f9166ca60236fcf98381962c4
+  metadata.gz: 4683dd5bb8d6211c2d999e386d9a58f6d23486d36c2ba8b9a82a0b86c1101abe4f3d880c3546aeee3720a3eb9e8083870bd555ba86577483968cf34373c4f4fb
+  data.tar.gz: 35885c7e30def9ae024ae33a1854c596915e3ffcf08839843cfe842c232de37b8f798e791aa33abb6fd1e8a2f79f829f3e217565801ad001ee5c9b699e28e374

data/app/assets/javascripts/govuk_publishing_components/components/checkboxes.js

@@ -9,6 +9,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
    Modules.Checkboxes = function () {
     this.start = function (scope) {
       var _this = this;
+      this.applyAriaControlsAttributes(scope);
 
       $(scope).find('[data-nested=true] input[type=checkbox]').on('change', function(e) {
         var checkbox = e.target;
@@ -21,6 +22,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           _this.toggleParentCheckbox(isNested, checkbox);
         }
       });
+
     };
 
     this.toggleNestedCheckboxes = function(scope, checkbox) {
@@ -41,5 +43,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         $('#' + parent_id).prop("checked", false);
       }
     };
+
+    this.applyAriaControlsAttributes = function (scope) {
+      $(scope).find('[data-controls]').each(function () {
+        $(this).attr('aria-controls', $(this).attr('data-controls'));
+      });
+    };
   };
 })(window.GOVUK.Modules);

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -18,7 +18,6 @@
 @import "components/breadcrumbs";
 @import "components/button";
 @import "components/character-count";
-@import "components/checkbox";
 @import "components/checkboxes";
 @import "components/contents-list";
 @import "components/copy-to-clipboard";

data/app/assets/stylesheets/govuk_publishing_components/components/_accessible-autocomplete.scss

@@ -7,7 +7,11 @@
 
 .gem-c-accessible-autocomplete {
   .autocomplete__input {
-    background: govuk-colour("white");
+    z-index: 1;
+  }
+
+  .autocomplete__dropdown-arrow-down {
+    z-index: 0;
   }
 
   .autocomplete__option {

data/app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss

@@ -1,3 +1,15 @@
+@import "helpers/govuk-frontend-settings";
+@import "govuk-frontend/components/checkboxes/checkboxes";
+
+.gem-c-checkbox.gem-c-checkbox--margin-bottom:last-child,
+.gem-c-checkbox.gem-c-checkbox--margin-bottom:last-of-type {
+  margin-bottom: $gutter-two-thirds;
+
+  @include media(tablet) {
+    margin-bottom: $gutter;
+  }
+}
+
 .govuk-checkboxes--nested {
   margin-left: (govuk-spacing(3) + 3px);
   box-sizing: border-box;
@@ -15,6 +27,7 @@
 
 .gem-c-checkboxes__list {
   padding-left: govuk-spacing(0);
+  margin: 0;
 }
 
 .gem-c-checkboxes__list-item {
@@ -22,7 +35,17 @@
   margin-bottom: govuk-spacing(2);
 }
 
-.gem-c-checkboxes__list-item:last-child,
-.gem-c-checkboxes__list-item:last-of-type {
-  margin-bottom: govuk-spacing(0);
+.gem-c-checkboxes__list-item:last-child {
+  margin-bottom: 0;
+
+  .govuk-checkboxes--nested {
+    margin-bottom: 0;
+  }
+}
+
+// this is complex but needed to override the govuk-frontend styles in
+// https://github.com/alphagov/govuk-frontend/blob/b8058640b9602ecb6e1f66f887553190cbae7b46/src/components/hint/_hint.scss#L16
+// our elements are wrapped in list items that already provide a margin-bottom
+.govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint {
+  margin-bottom: 0;
 }

data/app/views/govuk_publishing_components/components/_checkboxes.html.erb

@@ -1,72 +1,50 @@
 <%
-  id ||= "checkboxes-#{SecureRandom.hex(4)}"
-  classes ||= ''
-  css_classes = %w( gem-c-checkboxes govuk-form-group )
-  css_classes << classes if classes
-  error ||= nil
-  css_classes << "govuk-form-group--error" if error
-  heading ||= nil
-  hint_text ||= "Select all that apply."
-  items ||= []
-  is_page_heading ||= false
-
-  # check if any item is set as being conditional
-  has_conditional = items.any? { |item| item.is_a?(Hash) && item[:conditional] }
-  has_nested = items.any? { |item| item.is_a?(Hash) && item[:items] }
+  cb_helper = GovukPublishingComponents::Presenters::CheckboxesHelper.new(local_assigns)
+  id = cb_helper.id
 %>
 
-<%= tag.div id: id, class: css_classes, data: { module: "checkboxes" } do %>
-  <%= tag.fieldset class: "govuk-fieldset", "aria-describedby": "#{id}-hint #{"#{id}-error" if error}" do %>
+<%= tag.div id: id, class: cb_helper.css_classes, data: { module: "checkboxes" } do %>
+  <% if cb_helper.items.length == 1 %>
+    <%= cb_helper.checkbox_markup(cb_helper.items[0], 0) %>
 
-    <% if heading.present? %>
-      <% if is_page_heading %>
-        <%= tag.legend class: "govuk-fieldset__legend govuk-fieldset__legend--xl gem-c-title gem-c-title--margin-bottom-5" do %>
-          <%= tag.h1 heading, class: "gem-c-title__text" %>
-        <% end %>
-      <% else %>
-        <%= tag.legend heading, class: "govuk-fieldset__legend govuk-fieldset__legend--m" %>
+  <% else %>
+    <%= tag.fieldset class: "govuk-fieldset", "aria-describedby": cb_helper.fieldset_describedby do %>
+      <%= cb_helper.heading_markup %>
+
+      <% if cb_helper.hint_text %>
+        <%= tag.span cb_helper.hint_text, id: "#{id}-hint", class: "govuk-hint" %>
       <% end %>
-    <% end %>
 
-    <%= tag.span hint_text, id: "#{id}-hint", class: "govuk-hint" %>
+      <% if cb_helper.error %>
+        <%= tag.span error, id: "#{id}-error", class: "govuk-error-message" %>
+      <% end %>
 
-    <% if error.present? %>
-      <%= tag.span error, id: "#{id}-error", class: "govuk-error-message" %>
-    <% end %>
+      <%= tag.ul class: "govuk-checkboxes gem-c-checkboxes__list", data: {
+        module: ('checkboxes' if cb_helper.has_conditional),
+        nested: ('true' if cb_helper.has_nested),
+      } do %>
+        <% cb_helper.items.each_with_index do |item, index| %>
+          <%= tag.li class: "gem-c-checkboxes__list-item" do %>
+            <%= cb_helper.checkbox_markup(item, index) %>
 
-    <%= tag.ul class: "govuk-checkboxes gem-c-checkboxes__list", data: {
-      module: ('checkboxes' if has_conditional),
-      nested: ('true' if has_nested),
-    } do %>
-      <% items.each_with_index do |item, index| %>
-        <%= tag.li class: "gem-c-checkboxes__list-item" do %>
-          <%= render 'govuk_publishing_components/components/checkbox', {
-            id: id,
-            name: name,
-            item: item,
-            index: index,
-          } %>
-          <% if item[:conditional] %>
-            <%= tag.div item[:conditional], id: "#{id}-#{index}-conditional-#{index}", class: "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" %>
-          <% end %>
+            <% if item[:conditional] %>
+              <%= tag.div item[:conditional], id: "#{id}-#{index}-conditional-#{index}", class: "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" %>
+            <% end %>
 
-          <% if item[:items].present? %>
-            <%= tag.ul id: "#{id}-nested-#{index}", class: "govuk-checkboxes govuk-checkboxes--nested gem-c-checkboxes__list", data: { parent: "#{id}-#{index}" } do %>
-              <% item[:items].each_with_index do |nested_item, nested_index| %>
-                <%= tag.li class: "gem-c-checkboxes__list-item" do %>
-                  <%= render 'govuk_publishing_components/components/checkbox', {
-                    id: id,
-                    name: name,
-                    item: nested_item,
-                    index: "#{index}-#{nested_index}",
-                  } %>
+            <% if item[:items].present? %>
+              <%= tag.ul id: "#{id}-nested-#{index}", class: "govuk-checkboxes govuk-checkboxes--nested", data: { parent: "#{id}-#{index}" } do %>
+                <% item[:items].each_with_index do |nested_item, nested_index| %>
+                  <%= tag.li class: "gem-c-checkboxes__list-item" do %>
+                    <%= cb_helper.checkbox_markup(nested_item, "#{index}-#{nested_index}") %>
+                  <% end %>
                 <% end %>
               <% end %>
             <% end %>
+
           <% end %>
         <% end %>
       <% end %>
-    <% end %>
 
+    <% end %>
   <% end %>
 <% end %>

data/app/views/govuk_publishing_components/components/_feedback.html.erb

@@ -3,8 +3,9 @@
   margin_top ||= 1
   margin_top_class = "gem-c-feedback--top-margin" if margin_top == 1
   email_regex = /[^\s=\/?&]+(?:@|%40)[^\s=\/?&]+/
-  stripped_path = request.original_url.gsub(email_regex, '[email]')
-  stripped_url = request.fullpath.gsub(email_regex, '[email]')
+  stripped_path = request.original_url.gsub(email_regex, '[email]').encode
+  stripped_url = request.fullpath.gsub(email_regex, '[email]').encode
+  user_agent = request.user_agent.encode
 %>
 
 <div class="gem-c-feedback <%= margin_top_class %>" data-module="feedback">
@@ -90,7 +91,7 @@
         <div class="gem-c-feedback__error-summary gem-c-feedback__js-show js-hidden js-errors" tabindex="-1"></div>
 
         <input type="hidden" name="url" value="<%= stripped_path -%>">
-        <input type="hidden" name="user_agent" value="<%= request.user_agent -%>">
+        <input type="hidden" name="user_agent" value="<%= user_agent -%>">
 
         <h3 class="gem-c-feedback__form-heading">Help us improve GOV.UK</h3>
         <p id="feedback_explanation" class="gem-c-feedback__form-paragraph">Don’t include personal or financial information like your National Insurance number or credit card details.</p>
@@ -136,7 +137,7 @@
         <div class="gem-c-feedback__error-summary js-hidden js-errors" tabindex="-1"></div>
 
         <input type="hidden" name="url" value="<%= stripped_path -%>">
-        <input type="hidden" name="user_agent" value="<%= request.user_agent -%>">
+        <input type="hidden" name="user_agent" value="<%= user_agent -%>">
 
         <input name="email_survey_signup[survey_id]" type="hidden" value="footer_satisfaction_survey">
         <input name="email_survey_signup[survey_source]" type="hidden" value="<%= stripped_path -%>">

data/app/views/govuk_publishing_components/components/_input.html.erb

@@ -13,6 +13,7 @@
   autofocus ||= nil
   tabindex ||= nil
   readonly ||= nil
+  maxlength ||= nil
   has_error = error_message || error_items&.any?
   hint_id = "hint-#{SecureRandom.hex(4)}"
   error_id = "error-#{SecureRandom.hex(4)}"
@@ -67,6 +68,7 @@
       tabindex: tabindex,
       autofocus: autofocus,
       readonly: readonly,
+      maxlength: maxlength,
       aria: {
         describedby: aria_described_by,
         controls: controls

data/app/views/govuk_publishing_components/components/docs/checkboxes.yml

@@ -1,6 +1,5 @@
 name: Form checkboxes
-description: Let users select one or more options by using the checkboxes component.
-body: This component uses [Checkbox component](/component-guide/checkbox).
+description: Let users select one or more options with checkboxes.
 govuk_frontend_components:
   - checkboxes
 accessibility_criteria: |
@@ -12,10 +11,20 @@ accessibility_criteria: |
   - be usable with touch
   - indicate when they have focus
   - have correctly associated labels
+  - have a legend (see below)
 
   Labels use the [label component](/component-guide/label).
+
+  Checkboxes in a fieldset require a legend. The text of the legend is passed using the 'heading' option. If no heading is passed, no legend is shown, which causes an accessibility error. You must pass a heading when using this component, or provide other measures to ensure accessibility.
 examples:
   default:
+    data:
+      name: "favourite_colour_default"
+      items:
+        - label: "Red"
+          value: "red_colour"
+  with_multiple_checkboxes:
+    description: When more than one checkbox is shown they are wrapped in a fieldset element, which requires a legend. This must be supplied to the component using the heading option.
     data:
       name: "favourite_colour"
       heading: "What is your favourite colour?"
@@ -26,19 +35,31 @@ examples:
           value: "green"
         - label: "Blue"
           value: "blue"
-  with_legend_as_page_heading:
+  with_a_custom_id_attribute:
+    description: Note that if an id is not given one is generated automatically. In either case, the id is applied to the parent element of the checkboxes, and each checkbox is given the same id with an incremented number at the end, e.g. the checkboxes below have ids of potatoes-0 and potatoes-1.
     data:
-      name: "favourite_colour"
-      heading: "What is your favourite colour?"
-      is_page_heading: true
+      name: "potatoes"
+      id: "potatoes"
+      heading: "What kind of potatoes do you like?"
       items:
         - label: "Red"
           value: "red"
         - label: "Green"
           value: "green"
-        - label: "Blue"
-          value: "blue"
-  custom_hint_text:
+  with_custom_ids_on_individal_checkboxes:
+    description: Individual checkboxes can be given specific ids if required. Note that the general id option can still be used, but the individual ids will override the general one if it is given.
+    data:
+      name: "carrots"
+      id: "carrots"
+      heading: "What kind of carrots do you like?"
+      items:
+        - label: "Orange"
+          value: "orange"
+          id: "custom-orange-id"
+        - label: "Purple"
+          value: "purple"
+  with_custom_hint_text:
+    description: Note that a hint (and a heading) is only displayed if there is more than one checkbox.
     data:
       name: "favourite_skittle"
       heading: "What is your favourite skittle?"
@@ -50,7 +71,48 @@ examples:
           value: "green"
         - label: "Blue"
           value: "blue"
-  checkbox_items_with_hint:
+  with_legend_as_page_heading:
+    description: Since the legend/heading is required, if the checkboxes are alone on a page it makes sense to use this element as the H1 on the page rather than duplicate text.
+    data:
+      name: "favourite_colour"
+      heading: "What is your favourite colour?"
+      is_page_heading: true
+      items:
+        - label: "Red"
+          value: "red"
+        - label: "Green"
+          value: "green"
+        - label: "Blue"
+          value: "blue"
+  checkboxes_with_data_attributes:
+    description: Data attributes such as tracking can be applied if required. Note that for a checkbox this will not fire tracking events automatically, so if you want your tracking to work you'll need to write some tracking Javascript in the app around the component to detect it.
+    data:
+      name: "With tracking"
+      items:
+        - label: "Tracked"
+          value: "tracked"
+          data_attributes: {
+            track_category: "checkboxClicked",
+            track_label: "/news-and-communications",
+            track_action: "news",
+            track_options: {
+              dimension28: 2,
+              dimension29: "Tracked"
+            }
+          }
+  with_aria_controls_attributes:
+    description: Aria controls attributes are applied to the checkboxes only if Javascript is enabled.
+    data:
+      name: "aria_controls"
+      heading: "What areas are you interested in?"
+      items:
+        - label: "Farming and the environment"
+          value: "farming"
+          controls: "js-live-results"
+        - label: "Water recycling"
+          value: "water"
+          controls: "js-live-results"
+  checkboxes_with_individual_hints:
     data:
       name: "nationality"
       heading: "What is your nationality?"
@@ -63,6 +125,7 @@ examples:
           value: "irish"
         - label: "Other"
           value: "other"
+          hint: "anything other than the above"
   checkbox_items_with_error:
     data:
       name: "nationality"
@@ -78,19 +141,25 @@ examples:
         - label: "Other"
           value: "other"
   checkbox_items_with_conditional_reveal:
+    description: |
+      Checkboxes can be configured to show additional elements when checked. This could include further components, such as text inputs as shown.
+
+      Note that if you do insert HTML, this may cause accessibility violations if the additional elements have different name attributes to the checkboxes. No styling will be applied to the inserted content by the component.
     data:
-      name: "nationality"
-      heading: "What is your nationality?"
-      hint_text: "If you have dual nationality, select all options that are relevant to you."
+      name: "contactingme"
+      id: "contactingme"
+      heading: "How would you like to be contacted?"
+      hint_text: "Please select all options that are relevant to you."
       items:
-        - label: "British"
-          value: "british"
-          conditional: "including English, Scottish, Welsh and Northern Irish"
-        - label: "Irish"
-          value: "irish"
+        - label: "Email"
+          value: "email"
+          conditional: <div class="govuk-form-group"><label class="govuk-label" for="contact-by-email">Email address</label><input class="govuk-input govuk-!-width-one-third" id="contact-by-email" name="contactingme" type="email"></div>
+        - label: "Phone"
+          value: "phone"
+          conditional: <div class="govuk-form-group"><label class="govuk-label" for="contact-by-phone">Phone number</label><input class="govuk-input govuk-!-width-one-third" id="contact-by-phone" name="contactingme" type="tel"></div>
         - label: "Other"
           value: "other"
-          conditional: "Sorry this isn't more specific"
+          conditional: "See no styling."
   checkbox_items_with_checked_items:
     data:
       name: "nationality"
@@ -125,3 +194,8 @@ examples:
               value: "dark_blue"
         - label: "Other"
           value: "other"
+          items:
+            - label: "Orange"
+              value: "orange"
+            - label: "Puce"
+              value: "puce"

data/app/views/govuk_publishing_components/components/docs/input.yml

@@ -96,3 +96,10 @@ examples:
       name: "readonly"
       value: "You can't change me"
       readonly: true
+  with_maxlength:
+    data:
+      label:
+        text: "An input that doesn't allow many characters"
+      name: "name"
+      value: "You can't type more"
+      maxlength: 10

data/lib/govuk_publishing_components.rb

@@ -8,6 +8,7 @@ require "govuk_publishing_components/presenters/step_by_step_nav_helper"
 require "govuk_publishing_components/presenters/page_with_step_by_step_navigation"
 require "govuk_publishing_components/presenters/content_breadcrumbs_based_on_parent"
 require "govuk_publishing_components/presenters/content_breadcrumbs_based_on_taxons"
+require "govuk_publishing_components/presenters/checkboxes_helper"
 require "govuk_publishing_components/presenters/services"
 require "govuk_publishing_components/presenters/select"
 require "govuk_publishing_components/presenters/meta_tags"

data/lib/govuk_publishing_components/presenters/checkboxes_helper.rb

@@ -0,0 +1,71 @@
+module GovukPublishingComponents
+  module Presenters
+    class CheckboxesHelper
+      include ActionView::Helpers
+      include ActionView::Context
+
+      attr_reader :items, :name, :css_classes, :error, :has_conditional, :has_nested, :id, :hint_text
+
+      def initialize(options)
+        @items = options[:items] || []
+        @name = options[:name]
+        @css_classes = %w(gem-c-checkboxes govuk-form-group)
+        @css_classes << "govuk-form-group--error" if options[:error]
+        @error = true if options[:error]
+
+        # check if any item is set as being conditional
+        @has_conditional = options[:items].any? { |item| item.is_a?(Hash) && item[:conditional] }
+        @has_nested = options[:items].any? { |item| item.is_a?(Hash) && item[:items] }
+
+        @id = options[:id] || "checkboxes-#{SecureRandom.hex(4)}"
+        @heading = options[:heading]
+        @is_page_heading = options[:is_page_heading]
+        @hint_text = options[:hint_text] || "Select all that apply."
+      end
+
+      def fieldset_describedby
+        text = %w()
+        text << "#{id}-hint" if @hint_text
+        text << "#{id}-error" if @error
+        text
+      end
+
+      def heading_markup
+        return unless @heading.present?
+
+        if @is_page_heading
+          content_tag(
+            :legend,
+            class: "govuk-fieldset__legend govuk-fieldset__legend--xl gem-c-title gem-c-title--margin-bottom-5"
+          ) do
+            content_tag(:h1, @heading, class: "gem-c-title__text")
+          end
+        else
+          content_tag(:legend, @heading, class: "govuk-fieldset__legend govuk-fieldset__legend--m")
+        end
+      end
+
+      def checkbox_markup(checkbox, index)
+        checkbox_id = checkbox[:id] || "#{@id}-#{index}"
+        controls = checkbox[:conditional].present? ? "#{checkbox_id}-conditional-#{index || rand(1..100)}" : checkbox[:controls]
+        checkbox_name = checkbox[:name].present? ? checkbox[:name] : @name
+        checked = true if checkbox[:checked].present?
+        data = checkbox[:data_attributes] || {}
+        data[:controls] = controls
+
+        markup = capture do
+          concat check_box_tag checkbox_name, checkbox[:value], checked, class: "govuk-checkboxes__input", id: checkbox_id, data: data
+          concat content_tag(:label, checkbox[:label], for: checkbox_id, class: "govuk-label govuk-checkboxes__label")
+          concat content_tag(:span, checkbox[:hint], id: "#{checkbox_id}-item-hint", class: "govuk-hint govuk-checkboxes__hint") if checkbox[:hint]
+        end
+
+        content_tag(
+          :div,
+          class: "gem-c-checkbox govuk-checkboxes__item",
+        ) do
+          markup
+        end
+      end
+    end
+  end
+end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '12.21.0'.freeze
+  VERSION = '13.0.0'.freeze
 end

data/node_modules/jquery/package.json

@@ -110,7 +110,7 @@
   "directories": {},
   "dist": {
     "shasum": "01e1dfba290fe73deba77ceeacb0f9ba2fec9e0c",
-    "tarball": "https://registry.npmjs.org/jquery/-/jquery-1.12.4.tgz"
+    "tarball": "http://registry.npmjs.org/jquery/-/jquery-1.12.4.tgz"
   },
   "gitHead": "5e89585e0121e72ff47de177c5ef604f3089a53d",
   "homepage": "http://jquery.com",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 12.21.0
+  version: 13.0.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-12-17 00:00:00.000000000 Z
+date: 2018-12-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govspeak
@@ -310,7 +310,6 @@ files:
 - app/assets/javascripts/govuk_publishing_components/all_components.js
 - app/assets/javascripts/govuk_publishing_components/components/accessible-autocomplete.js
 - app/assets/javascripts/govuk_publishing_components/components/character-count.js
-- app/assets/javascripts/govuk_publishing_components/components/checkbox.js
 - app/assets/javascripts/govuk_publishing_components/components/checkboxes.js
 - app/assets/javascripts/govuk_publishing_components/components/copy-to-clipboard.js
 - app/assets/javascripts/govuk_publishing_components/components/error-summary.js
@@ -331,7 +330,6 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_button.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_character-count.scss
-- app/assets/stylesheets/govuk_publishing_components/components/_checkbox.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_copy-to-clipboard.scss
@@ -442,7 +440,6 @@ files:
 - app/views/govuk_publishing_components/components/_breadcrumbs.html.erb
 - app/views/govuk_publishing_components/components/_button.html.erb
 - app/views/govuk_publishing_components/components/_character_count.html.erb
-- app/views/govuk_publishing_components/components/_checkbox.html.erb
 - app/views/govuk_publishing_components/components/_checkboxes.html.erb
 - app/views/govuk_publishing_components/components/_contents_list.html.erb
 - app/views/govuk_publishing_components/components/_contextual_breadcrumbs.html.erb
@@ -505,7 +502,6 @@ files:
 - app/views/govuk_publishing_components/components/docs/breadcrumbs.yml
 - app/views/govuk_publishing_components/components/docs/button.yml
 - app/views/govuk_publishing_components/components/docs/character_count.yml
-- app/views/govuk_publishing_components/components/docs/checkbox.yml
 - app/views/govuk_publishing_components/components/docs/checkboxes.yml
 - app/views/govuk_publishing_components/components/docs/contents_list.yml
 - app/views/govuk_publishing_components/components/docs/contextual_breadcrumbs.yml
@@ -584,6 +580,7 @@ files:
 - lib/govuk_publishing_components/minitest/component_guide_test.rb
 - lib/govuk_publishing_components/presenters/breadcrumbs.rb
 - lib/govuk_publishing_components/presenters/button_helper.rb
+- lib/govuk_publishing_components/presenters/checkboxes_helper.rb
 - lib/govuk_publishing_components/presenters/content_breadcrumbs_based_on_parent.rb
 - lib/govuk_publishing_components/presenters/content_breadcrumbs_based_on_taxons.rb
 - lib/govuk_publishing_components/presenters/content_item.rb

data/app/assets/javascripts/govuk_publishing_components/components/checkbox.js

@@ -1,17 +0,0 @@
-window.GOVUK = window.GOVUK || {};
-window.GOVUK.Modules = window.GOVUK.Modules || {};
-
-(function (Modules) {
-  'use strict';
-
-   Modules.Checkbox = function () {
-    this.start = function ($element) {
-      var controls = $element.attr('data-aria-controls');
-
-      if (controls) {
-        $element.find('.govuk-checkboxes__input').attr('aria-controls', controls);
-      }
-    };
-
-  };
-})(window.GOVUK.Modules);

data/app/assets/stylesheets/govuk_publishing_components/components/_checkbox.scss

@@ -1,11 +0,0 @@
-@import "helpers/govuk-frontend-settings";
-@import "govuk-frontend/components/checkboxes/checkboxes";
-
-.gem-c-checkbox.gem-c-checkbox--margin-bottom:last-child,
-.gem-c-checkbox.gem-c-checkbox--margin-bottom:last-of-type {
-  margin-bottom: $gutter-two-thirds;
-
-  @include media(tablet) {
-    margin-bottom: $gutter;
-  }
-}

data/app/views/govuk_publishing_components/components/_checkbox.html.erb

@@ -1,27 +0,0 @@
-<%
-  index ||= false
-  id ||= "checkbox-#{SecureRandom.hex(4)}"
-  id = "#{id}-#{index}" if index
-  controls ||= item[:conditional].present? ? "#{id}-conditional-#{index || rand(1..100)}" : nil
-  name = item[:name].present? ? item[:name] : name
-  margin_bottom ||= false
-  margin_bottom_class = "gem-c-checkbox--margin-bottom" if margin_bottom
-%>
-
-<%= tag.div class: "gem-c-checkbox govuk-checkboxes__item #{margin_bottom_class}", data: { module: "checkbox", 'aria-controls': controls }  do %>
-  <%= tag.input id: id,
-    name: name,
-    type: "checkbox",
-    value: item[:value],
-    class: "govuk-checkboxes__input",
-    checked: item[:checked].present? ? "checked" : nil,
-    data: item[:data_attributes],
-    aria: {
-      describedby: item[:hint].present? ? "#{id}-item-hint" : nil
-    }
-  %>
-  <%= tag.label item[:label], class: "govuk-label govuk-checkboxes__label", for: id %>
-  <% if item[:hint].present? %>
-    <%= tag.span item[:hint], id: "#{id}-item-hint", class: "govuk-hint govuk-checkboxes__hint" %>
-  <% end %>
-<% end %>

data/app/views/govuk_publishing_components/components/docs/checkbox.yml

@@ -1,86 +0,0 @@
-name: Checkbox
-description: Let users select one or more options by using the checkboxes component.
-body: This component is used by [Form checkboxes component](/component-guide/checkboxes).
-govuk_frontend_components:
-  - checkboxes
-accessibility_criteria: |
-  The component must:
-
-  - accept focus
-  - be focusable with a keyboard
-  - be usable with a keyboard
-  - be usable with touch
-  - indicate when they have focus
-  - have correctly associated labels
-
-  Labels use the [label component](/component-guide/label).
-examples:
-  default:
-    data:
-      name: "favourite_colour_default"
-      item:
-        label: "Red"
-        value: "red_colour"
-  checkbox_with_hint:
-    data:
-      name: "favourite_colour_checkbox_with_hint"
-      item:
-        label: "Red"
-        value: "red_colour"
-        hint: "This is the colour red."
-  checkbox_with_checked:
-    data:
-      name: "favourite_colour_checkbox_with_checked"
-      item:
-        label: "Red"
-        value: "red_colour"
-        checked: true
-  checkbox_with_identifier:
-    description: |
-      If no ID is given, a unique ID is generated for the checkbox automatically.
-
-      If an index is given, this is appended onto the end of the ID (given or generated). This is used in the checkboxes component where multiple checkboxes are output.
-    data:
-      name: "with_id"
-      id: "moose"
-      index: 10
-      item:
-        label: "With an id of 'moose-10'"
-        value: "with_id"
-  checkbox_with_data_attributes:
-    description: Data attributes such as tracking can be applied if required. Note that for a checkbox this will not fire tracking events automatically, so if you want your tracking to work you'll need to write some tracking Javascript in the app around the component to detect it.
-    data:
-      name: "With tracking"
-      item:
-        label: "Tracked"
-        value: "tracked"
-        data_attributes: {
-          track_category: "checkboxClicked",
-          track_label: "/news-and-communications",
-          track_action: "news",
-          track_options: {
-            dimension28: 2,
-            dimension29: "Tracked"
-          }
-        }
-  checkbox_with_aria_controls:
-    description: |
-      A value for aria-controls can be passed to the checkbox. This is applied using Javascript.
-
-      If a value is not passed, and a value for conditional has been passed, a value is generated based on the id of the checkbox and the passed index. This is used in the [form checkboxes component](/component-guide/checkboxes/checkbox_items_with_conditional_reveal).
-    data:
-      name: "happy"
-      controls: "wrapper"
-      item:
-        label: "Are you happy?"
-        value: "happy"
-  checkbox_with_bottom_margin:
-    description: By default the component has no bottom margin, this option adds it.
-    data:
-      name: "behold_my_bottom_margin"
-      margin_bottom: true
-      item:
-        label: "Do you like my bottom margin?"
-        value: "bottom_margin"
-
-