Merge pull request #817 from alphagov/upgrade-govuk-frontend-2-10

Upgrade to govuk-frontend 2.10.0

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+- Upgrade to govuk-frontend 2.10.0 (PR #817)
+
 ## 16.10.1
 
 - Enforce compatibility with deprecated packages for media print stylesheet (PR #815)

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

@@ -1,4 +1,5 @@
 <%
+  # cb_helper.css_classes generates "gem-c-checkboxes"
   cb_helper = GovukPublishingComponents::Presenters::CheckboxesHelper.new(local_assigns)
   id = cb_helper.id
 %>
@@ -17,7 +18,7 @@
           <%= tag.span error, id: "#{id}-error", class: "govuk-error-message" %>
         <% end %>
 
-        <%= tag.ul class: "govuk-checkboxes gem-c-checkboxes__list", data: {
+        <%= tag.ul class: cb_helper.list_classes, data: {
           module: ('checkboxes' if cb_helper.has_conditional),
           nested: ('true' if cb_helper.has_nested),
         } do %>

app/views/govuk_publishing_components/components/_radio.html.erb

@@ -4,6 +4,7 @@
 
   label ||= nil
   heading ||= nil
+  small ||= false
   is_page_heading ||= false
   hint ||= nil
   error_message ||= nil
@@ -16,6 +17,9 @@
   form_group_css_classes = %w(govuk-form-group)
   form_group_css_classes << "govuk-form-group--error" if has_error
 
+  radio_classes = %w(govuk-radios)
+  radio_classes << "govuk-radios--small" if small
+
   aria = "#{hint_id} #{"#{error_id}" if has_error}".strip if hint or has_error
 
   # check if any item is set as being conditional
@@ -53,7 +57,7 @@
       } %>
     <% end %>
 
-    <%= content_tag :div, class: "govuk-radios",
+    <%= content_tag :div, class: radio_classes,
       data: {
         module: ('radios' if has_conditional)
       } do %>

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

@@ -32,6 +32,16 @@ examples:
           value: "green"
         - label: "Blue"
           value: "blue"
+  with_small_checkboxes:
+    data:
+      name: "favourite_small_synonym"
+      heading: "What is your favourite synonym for small?"
+      small: true
+      items:
+        - label: "Tiny"
+          value: "tiny"
+        - label: "Little"
+          value: "little"
   with_a_heading_on_one_checkbox:
     description: One checkbox does not require a fieldset and therefore does not require a legend. However, if a heading is supplied, a fieldset will be included in the component and the heading used as the legend, as shown.
     data:

app/views/govuk_publishing_components/components/docs/radio.yml

@@ -44,6 +44,15 @@ examples:
         text: "Use Government Gateway"
       - value: "govuk-verify"
         text: "Use GOV.UK Verify"
+  with_small_radios:
+    data:
+      name: "radio-group"
+      small: true
+      items:
+      - value: "government-gateway"
+        text: "Use Government Gateway"
+      - value: "govuk-verify"
+        text: "Use GOV.UK Verify"
   with_bold:
     description: 'Used to provide better contrast between long labels and hint text, Note that the `:or` option [is documented as a string due to a bug](https://github.com/alphagov/govuk_publishing_components/issues/102)'
     data:

lib/govuk_publishing_components/presenters/checkboxes_helper.rb

@@ -4,7 +4,7 @@ class CheckboxesHelper
       include ActionView::Helpers
       include ActionView::Context
 
-      attr_reader :items, :name, :css_classes, :error, :has_conditional, :has_nested, :id, :hint_text
+      attr_reader :items, :name, :css_classes, :list_classes, :error, :has_conditional, :has_nested, :id, :hint_text
 
       def initialize(options)
         @items = options[:items] || []
@@ -13,6 +13,9 @@ def initialize(options)
         @css_classes << "govuk-form-group--error" if options[:error]
         @error = true if options[:error]
 
+        @list_classes = %w(govuk-checkboxes gem-c-checkboxes__list)
+        @list_classes << "govuk-checkboxes--small" if options[:small]
+
         # 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] }

package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "accessible-autocomplete": "git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
-    "govuk-frontend": "2.9.0",
+    "govuk-frontend": "2.10.0",
     "jquery": "1.12.4",
     "axe-core": "3.2.2"
   }

spec/components/checkboxes_spec.rb

@@ -36,6 +36,19 @@ def component_name
     assert_select ".govuk-label", text: "Green"
   end
 
+  it "renders small checkboxes" do
+    render_component(
+      name: "favourite_colour",
+      heading: "What is your favourite colour?",
+      small: true,
+      items: [
+        { label: "Red", value: "red" },
+        { label: "Green", value: "green" },
+      ]
+    )
+    assert_select ".govuk-checkboxes.govuk-checkboxes--small"
+  end
+
   it "renders nothing if no heading is supplied" do
     render_component(
       name: "favourite_colour",

spec/components/radio_spec.rb

@@ -53,6 +53,25 @@ def component_name
     assert_select ".govuk-radios__item:last-child .govuk-radios__label", text: "Use GOV.UK Verify"
   end
 
+  it "renders small radios" do
+    render_component(
+      name: "radio-group-multiple-items",
+      small: true,
+      items: [
+        {
+          value: "government-gateway",
+          text: "Use Government Gateway"
+        },
+        {
+          value: "govuk-verify",
+          text: "Use GOV.UK Verify"
+        }
+      ]
+    )
+
+    assert_select ".govuk-radios.govuk-radios--small"
+  end
+
   it "renders radio-group with a legend" do
     render_component(
       name: "favourite-smartie",