Merge pull request #1488 from alphagov/allow-or-divider-on-checkboxes

Add 'or' divider to checkboxes component
alphagov · May 14, 2020 · 67a265b · 67a265b
2 parents 4895203 + 5dd2d98
commit 67a265b
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 * Prevent govspeak tables from breaking the layout ([PR #1493](https://github.com/alphagov/govuk_publishing_components/pull/1493))
 * Prevent govspeak links from breaking the layout ([PR #1492](https://github.com/alphagov/govuk_publishing_components/pull/1492))
 * Remove PHE brand colour ([PR #1489](https://github.com/alphagov/govuk_publishing_components/pull/1489))
+* Add 'or' divider to checkboxes component ([PR #1488](https://github.com/alphagov/govuk_publishing_components/pull/1488))
 * Fix legacy colour on input component ([PR #1487](https://github.com/alphagov/govuk_publishing_components/pull/1487))
 * Add `exclusive` option to checkboxes component ([PR #1478](https://github.com/alphagov/govuk_publishing_components/pull/1478))
 

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss b/app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss
@@ -25,6 +25,15 @@
   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

diff --git a/app/views/govuk_publishing_components/components/_checkboxes.html.erb b/app/views/govuk_publishing_components/components/_checkboxes.html.erb
@@ -28,18 +28,22 @@
           exclusive: ('true' if cb_helper.has_exclusive)
         } do %>
           <% cb_helper.items.each_with_index do |item, index| %>
-            <%= tag.li 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 === :or %>
+              <%= tag.li t('components.checkboxes.or'), class: "gem-c-checkboxes__divider" %>
+            <% else %>
+              <%= tag.li 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 %>
-                  <% item[:items].each_with_index do |nested_item, nested_index| %>
-                    <%= tag.li class: "govuk-checkboxes__item" do %>
-                      <%= cb_helper.checkbox_markup(nested_item, "#{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: "govuk-checkboxes__item" do %>
+                        <%= cb_helper.checkbox_markup(nested_item, "#{index}-#{nested_index}") %>
+                      <% end %>
                     <% end %>
                   <% end %>
                 <% end %>

diff --git a/app/views/govuk_publishing_components/components/docs/checkboxes.yml b/app/views/govuk_publishing_components/components/docs/checkboxes.yml
@@ -287,6 +287,7 @@ examples:
           value: "engineering"
         - label: "Other"
           value: "other"
+        - :or
         - label: "I cannot offer expertise"
           value: "no-expertise"
           exclusive: true

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -32,6 +32,8 @@ en:
       scoped_search_description: "Search within %{title}"
     back_link:
       back: 'Back'
+    checkboxes:
+      or: 'or'
     contents_list:
       contents: Contents
     organisation_schema:

diff --git a/spec/components/checkboxes_spec.rb b/spec/components/checkboxes_spec.rb
@@ -322,11 +322,13 @@ def component_name
       items: [
         { label: "British", value: "british", hint: "including English, Scottish, Welsh and Northern Irish" },
         { label: "Irish", value: "irish" },
+        :or,
         { label: "Other", value: "other", exclusive: true },
       ],
     )
     assert_select ".govuk-checkboxes[data-exclusive=true]"
     assert_select ".govuk-checkboxes__input[value=other][data-exclusive=true]"
+    assert_select ".gem-c-checkboxes__divider", text: "or"
   end
 
   it "renders checkboxes with conditional reveal" do