Align checkboxes component more toward Design System

- switch from lists to using divs for checkbox wrappers (to align with Design System component) - remove custom styling for 'or' divider and use Design System style - remove unneeded style override for hint margin - make checkbox hint a div, not a span - remove other custom styles to set list styles as no longer using lists
alphagov · Jun 14, 2024 · 922daa2 · 922daa2
1 parent 97aed3d
commit 922daa2
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 94 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Align checkboxes component more toward Design System ([PR #4061](https://github.com/alphagov/govuk_publishing_components/pull/4061))
 * Add govuk-frontend checking to the component auditing ([PR #4058](https://github.com/alphagov/govuk_publishing_components/pull/4058))
 
 ## 39.0.0

diff --git a/app/assets/javascripts/govuk_publishing_components/components/option-select.js b/app/assets/javascripts/govuk_publishing_components/components/option-select.js
@@ -49,7 +49,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
 
     // Attach listener to update checked count
-    this.$optionsContainer.querySelector('.gem-c-checkboxes__list').addEventListener('change', this.updateCheckedCount.bind(this))
+    this.$optionsContainer.querySelector('.govuk-checkboxes').addEventListener('change', this.updateCheckedCount.bind(this))
 
     // Replace div.container-head with a button
     this.replaceHeadingSpanWithButton()

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss b/app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss
@@ -10,39 +10,9 @@
   margin-top: govuk-spacing(2);
   margin-bottom: govuk-spacing(2);
   padding: govuk-spacing(2) govuk-spacing(4);
-
-  &.gem-c-checkboxes__list {
-    padding-left: govuk-spacing(4);
-  }
-}
-
-.govuk-checkboxes__conditional {
-  margin-top: govuk-spacing(2);
-  margin-left: -(govuk-spacing(4) + 2px); // 22px
-}
-
-.gem-c-checkboxes__list {
-  padding-left: govuk-spacing(0);
-  margin: 0;
-}
-
-.gem-c-checkboxes__divider {
-  @include govuk-font($size: 19);
-  @include govuk-text-colour;
-  list-style-type: none;
-  margin-bottom: govuk-spacing(2);
-  text-align: center;
-  width: 40px;
 }
 
 .gem-c-checkboxes {
-  // 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;
-  }
-
   .gem-c-checkboxes__legend--hidden {
     @include govuk-visually-hidden;
   }

diff --git a/app/views/govuk_publishing_components/components/_checkboxes.html.erb b/app/views/govuk_publishing_components/components/_checkboxes.html.erb
@@ -26,31 +26,32 @@
           <%= tag.p error, id: "#{id}-error", class: "govuk-error-message" %>
         <% end %>
 
-        <%= tag.ul class: cb_helper.list_classes, data: {
+        <%= tag.div class: "govuk-checkboxes", data: {
           module: ('govuk-checkboxes' if cb_helper.has_conditional),
           nested: ('true' if cb_helper.has_nested)
         } do %>
           <% cb_helper.items.each_with_index do |item, index| %>
             <% if item === :or %>
-              <%= tag.li t('components.checkboxes.or'), class: "gem-c-checkboxes__divider" %>
+              <%= tag.div t('components.checkboxes.or'), class: "govuk-checkboxes__divider" %>
             <% else %>
-              <%= tag.li class: "govuk-checkboxes__item" do %>
+              <%= tag.div class: "govuk-checkboxes__item" do %>
                 <%= cb_helper.checkbox_markup(item, index) %>
 
-                <% 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", data: { parent: "#{id}-#{index}" } do %>
+                  <%= tag.div id: "#{id}-nested-#{index}", class: "govuk-checkboxes--nested", data: { parent: "#{id}-#{index}" } do %>
                     <% item[:items].each_with_index do |nested_item, nested_index| %>
-                      <%= tag.li class: "govuk-checkboxes__item" do %>
+                      <%= tag.div class: "govuk-checkboxes__item" do %>
                         <%= cb_helper.checkbox_markup(nested_item, "#{index}-#{nested_index}") %>
                       <% end %>
                     <% end %>
                   <% end %>
                 <% end %>
               <% end %>
+
+              <% if item[:conditional] %>
+                <%= tag.div item[:conditional], id: "#{id}-#{index}-conditional-#{index}", class: "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" %>
+              <% end %>
+
             <% end %>
           <% end %>
         <% end %>

diff --git a/lib/govuk_publishing_components/presenters/checkboxes_helper.rb b/lib/govuk_publishing_components/presenters/checkboxes_helper.rb
@@ -7,7 +7,6 @@ class CheckboxesHelper
       attr_reader :items,
                   :name,
                   :css_classes,
-                  :list_classes,
                   :error,
                   :has_conditional,
                   :has_nested,
@@ -24,8 +23,6 @@ def initialize(options)
         @css_classes << "govuk-checkboxes--small" if options[:small]
         @error = true if options[:error]
 
-        @list_classes = %w[govuk-checkboxes gem-c-checkboxes__list]
-
         # 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] }
@@ -100,7 +97,7 @@ def checkbox_markup(checkbox, index)
         capture do
           concat check_box_tag(checkbox_name, checkbox[:value], checked, class: "govuk-checkboxes__input", id: checkbox_id, 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]
+          concat content_tag(:div, checkbox[:hint], id: "#{checkbox_id}-item-hint", class: "govuk-hint govuk-checkboxes__hint") if checkbox[:hint]
         end
       end
     end

diff --git a/spec/components/checkboxes_spec.rb b/spec/components/checkboxes_spec.rb
@@ -327,7 +327,7 @@ def component_name
       ],
     )
     assert_select ".govuk-checkboxes__input[value=other][data-behaviour=exclusive]"
-    assert_select ".gem-c-checkboxes__divider", text: "or"
+    assert_select ".govuk-checkboxes__divider", text: "or"
   end
 
   it "renders checkboxes with conditional reveal" do
@@ -382,8 +382,8 @@ def component_name
       ],
     )
     assert_select ".govuk-checkboxes"
-    assert_select ".govuk-checkboxes.govuk-checkboxes--nested"
-    assert_select ".govuk-checkboxes.govuk-checkboxes--nested input[value=light_red]"
+    assert_select ".govuk-checkboxes--nested"
+    assert_select ".govuk-checkboxes--nested input[value=light_red]"
   end
 
   it "renders checkboxes with a description text" do

diff --git a/spec/javascripts/components/checkboxes-spec.js b/spec/javascripts/components/checkboxes-spec.js
@@ -13,40 +13,40 @@ describe('Checkboxes component', function () {
            '<h1 class="govuk-fieldset__heading">What is your favourite colour?</h1>' +
         '</legend>' +
         '<span id="checkboxes-1ac8e5cf-hint" class="govuk-hint">Select all that apply.</span>' +
-        '<ul class="govuk-checkboxes gem-c-checkboxes__list" data-nested="true">' +
-           '<li class="govuk-checkboxes__item">' +
+        '<div class="govuk-checkboxes" data-nested="true">' +
+           '<div class="govuk-checkboxes__item">' +
               '<input id="checkboxes-1ac8e5cf-0" name="favourite_colour" type="checkbox" value="red" class="govuk-checkboxes__input" data-track-category="choseFavouriteColour" data-track-action="favourite-color" data-track-label="red" data-track-value="1" data-track-options=\'{"dimension28": "wubbalubbadubdub","dimension29": "Pickle Rick"}\' data-test-exclusive>' +
               '<label class="govuk-label govuk-checkboxes__label" for="checkboxes-1ac8e5cf-0">Red</label>' +
-              '<ul id="checkboxes-1ac8e5cf-nested-0" class="govuk-checkboxes govuk-checkboxes--nested" data-parent="checkboxes-1ac8e5cf-0">' +
-                '<li class="govuk-checkboxes__item">' +
+              '<div id="checkboxes-1ac8e5cf-nested-0" class="govuk-checkboxes--nested" data-parent="checkboxes-1ac8e5cf-0">' +
+                '<div class="govuk-checkboxes__item">' +
                    '<input id="checkboxes-1ac8e5cf-0-0" name="favourite_colour" type="checkbox" value="light_red" class="govuk-checkboxes__input" data-controls="thing">' +
                    '<label class="govuk-label govuk-checkboxes__label" for="checkboxes-1ac8e5cf-0-0">Light Red</label>' +
-                '</li>' +
-                '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+                '<div class="govuk-checkboxes__item">' +
                    '<input id="checkboxes-1ac8e5cf-0-1" name="favourite_colour" type="checkbox" value="dark_red" class="govuk-checkboxes__input">' +
                    '<label class="govuk-label govuk-checkboxes__label" for="checkboxes-1ac8e5cf-0-1">Dark Red</label>' +
-                '</li>' +
-              '</ul>' +
-           '</li>' +
-           '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+              '</div>' +
+           '</div>' +
+           '<div class="govuk-checkboxes__item">' +
               '<input id="checkboxes-1ac8e5cf-1" name="favourite_colour" type="checkbox" value="blue" class="govuk-checkboxes__input" data-track-category="choseFavouriteColour" data-uncheck-track-category="unselectedFavouriteColour" data-track-action="favourite-color" data-track-label="blue" data-track-value="2" data-track-options=\'{"dimension28":"Get schwifty","dimension29":"Squanch"}\' data-test-exclusive>' +
               '<label class="govuk-label govuk-checkboxes__label" for="checkboxes-1ac8e5cf-1">Blue</label>' +
-              '<ul id="checkboxes-1ac8e5cf-nested-1" class="govuk-checkboxes govuk-checkboxes--nested" data-parent="checkboxes-1ac8e5cf-1">' +
-                '<li class="govuk-checkboxes__item">' +
+              '<div id="checkboxes-1ac8e5cf-nested-1" class="govuk-checkboxes--nested" data-parent="checkboxes-1ac8e5cf-1">' +
+                '<div class="govuk-checkboxes__item">' +
                    '<input id="checkboxes-1ac8e5cf-1-0" name="favourite_colour" type="checkbox" value="light_blue" class="govuk-checkboxes__input" data-controls="thing2">' +
                    '<label class="govuk-label govuk-checkboxes__label" for="checkboxes-1ac8e5cf-1-0">Light blue</label>' +
-                '</li>' +
-                '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+                '<div class="govuk-checkboxes__item">' +
                    '<input id="checkboxes-1ac8e5cf-1-1" name="favourite_colour" type="checkbox" value="dark_blue" class="govuk-checkboxes__input">' +
                    '<label class="govuk-label govuk-checkboxes__label" for="checkboxes-1ac8e5cf-1-1">Dark blue</label>' +
-                '</li>' +
-              '</ul>' +
-           '</li>' +
-           '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+              '</div>' +
+           '</div>' +
+           '<div class="govuk-checkboxes__item">' +
               '<input id="checkboxes-1ac8e5cf-2" name="favourite_colour" type="checkbox" value="other" class="govuk-checkboxes__input" data-behaviour="exclusive">' +
               '<label class="govuk-label govuk-checkboxes__label" for="checkboxes-1ac8e5cf-2">Other</label>' +
-           '</li>' +
-        '</ul>' +
+           '</div>' +
+        '</div>' +
      '</fieldset>' +
   '</div>'
 

diff --git a/spec/javascripts/components/option-select-spec.js b/spec/javascripts/components/option-select-spec.js
@@ -14,7 +14,7 @@ describe('An option select component', function () {
           '<div id="checkboxes-9b7ecc25" class="gem-c-checkboxes govuk-form-group" data-module="checkboxes">' +
             '<fieldset class="govuk-fieldset">' +
               '<legend class="govuk-fieldset__legend govuk-fieldset__legend--m gem-c-checkboxes__legend--hidden">Please select all that apply</legend>' +
-              '<ul class="govuk-checkboxes gem-c-checkboxes__list"></ul>' +
+              '<div class="govuk-checkboxes"></div>' +
             '</fieldset>' +
           '</div>' +
         '</div>' +
@@ -38,56 +38,56 @@ describe('An option select component', function () {
           '<div id="checkboxes-9b7ecc25" class="gem-c-checkboxes govuk-form-group" data-module="checkboxes">' +
             '<fieldset class="govuk-fieldset">' +
               '<legend class="govuk-fieldset__legend govuk-fieldset__legend--m gem-c-checkboxes__legend--hidden">Please select all that apply</legend>' +
-              '<ul class="govuk-checkboxes gem-c-checkboxes__list">' +
-                '<li class="govuk-checkboxes__item">' +
+              '<div class="govuk-checkboxes">' +
+                '<div class="govuk-checkboxes__item">' +
                   '<input type="checkbox" name="market_sector[]" id="aerospace" value="aerospace" class="govuk-checkboxes__input" />' +
                   '<label for="aerospace" class="govuk-label govuk-checkboxes__label">Aerospace</label>' +
-                '</li>' +
-                '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+                '<div class="govuk-checkboxes__item">' +
                   '<input type="checkbox" name="market_sector[]" id="agriculture-environment-and-natural-resources" value="agriculture-environment-and-natural-resources" class="govuk-checkboxes__input" />' +
                   '<label for="agriculture-environment-and-natural-resources" class="govuk-label govuk-checkboxes__label">Agriculture, environment, natural resources, agriculture, environment, natural resources, agriculture, environment, natural resources, agriculture, environment, natural resources, agriculture, environment, natural resources, agriculture, environment and natural resources.</label>' +
-                '</li>' +
-                '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+                '<div class="govuk-checkboxes__item">' +
                   '<input type="checkbox" name="market_sector[]" id="building-and-construction" value="building-and-construction" class="govuk-checkboxes__input" />' +
                   '<label for="building-and-construction" class="govuk-label govuk-checkboxes__label">Building and construction</label>' +
-                '</li>' +
-                '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+                '<div class="govuk-checkboxes__item">' +
                   '<input type="checkbox" name="market_sector[]" id="chemicals" value="chemicals" class="govuk-checkboxes__input" />' +
                   '<label for="chemicals" class="govuk-label govuk-checkboxes__label">Chemicals</label>' +
-                '</li>' +
-                '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+                '<div class="govuk-checkboxes__item">' +
                   '<input type="checkbox" name="market_sector[]" id="clothing-footwear-and-fashion" value="clothing-footwear-and-fashion" class="govuk-checkboxes__input" />' +
                   '<label for="clothing-footwear-and-fashion" class="govuk-label govuk-checkboxes__label">Clothing, footwear and fashion</label>' +
-                '</li>' +
-                '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+                '<div class="govuk-checkboxes__item">' +
                   '<input type="checkbox" name="market_sector[]" id="defence" value="defence" class="govuk-checkboxes__input" />' +
                   '<label for="defence" class="govuk-label govuk-checkboxes__label">Defence</label>' +
-                '</li>' +
-                '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+                '<div class="govuk-checkboxes__item">' +
                   '<input type="checkbox" name="market_sector[]" id="distribution-and-service-industries" value="distribution-and-service-industries" class="govuk-checkboxes__input" />' +
                   '<label for="distribution-and-service-industries" class="govuk-label govuk-checkboxes__label">Distribution &amp; Service Industries</label>' +
-                '</li>' +
-                '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+                '<div class="govuk-checkboxes__item">' +
                   '<input type="checkbox" name="market_sector[]" id="electronics-industry" value="electronics-industry" class="govuk-checkboxes__input" />' +
                   '<label for="electronics-industry" class="govuk-label govuk-checkboxes__label">Electronics Industry</label>' +
-                '</li>' +
-                '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+                '<div class="govuk-checkboxes__item">' +
                   '<input type="checkbox" name="market_sector[]" id="energy" value="energy" class="govuk-checkboxes__input" />' +
                   '<label for="energy" class="govuk-label govuk-checkboxes__label">Energy</label>' +
-                '</li>' +
-                '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+                '<div class="govuk-checkboxes__item">' +
                   '<input type="checkbox" name="market_sector[]" id="engineering" value="engineering" class="govuk-checkboxes__input" />' +
                   '<label for="engineering" class="govuk-label govuk-checkboxes__label">Engineering</label>' +
-                '</li>' +
-                '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+                '<div class="govuk-checkboxes__item">' +
                   '<input type="checkbox" name="market_sector[]" id="thatdepartment" value="thatdepartment" class="govuk-checkboxes__input" />' +
                   '<label for="thatdepartment" class="govuk-label govuk-checkboxes__label">Closed organisation: Department for Fisheries, War Widows\' pay, Farmers’ rights - sheep and goats, Farmer\'s rights – cows & llamas</label>' +
-                '</li>' +
-                '<li class="govuk-checkboxes__item">' +
+                '</div>' +
+                '<div class="govuk-checkboxes__item">' +
                   '<input type="checkbox" name="market_sector[]" id="militarycourts" value="militarycourts" class="govuk-checkboxes__input" />' +
                   '<label for="militarycourts" class="govuk-label govuk-checkboxes__label">1st and 2nd Military Courts</label>' +
-                '</li>' +
-              '</ul>' +
+                '</div>' +
+              '</div>' +
             '</fieldset>' +
           '</div>' +
         '</div>' +