Merge pull request #766 from alphagov/add-data-attributes-param-to-ra…

…dio-button

Add ability to add data attributes to a single radio button

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Enable ability to add data attributes to a single radio button (PR #766)
+
 ## 16.0.0
 
 * BREAKING: Apply JS enhancements to govspeak (PR #751)

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

@@ -71,6 +71,10 @@
 
             data_attrs = { "aria-controls": conditional_id }
             data_attrs["tracking-url"] =  item[:url] if item.key?(:url)
+
+            if item.fetch(:data_attributes, {}).any?
+              data_attrs = data_attrs.merge(item[:data_attributes])
+            end
           %>
           <%= tag.div class: %w( gem-c-radio govuk-radios__item ) do %>
             <%= check_box_tag name,

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

@@ -130,6 +130,15 @@ examples:
       - value: "govuk-verify"
         text: "Use GOV.UK Verify"
         checked: true
+  with_data_attributes:
+    data:
+      name: "radio-group-data-attributes"
+      items:
+      - value: "cool-button"
+        text: "Best button in town"
+        data_attributes: { "contextual-guidance": "cool-buttons-guidance" }
+      - value: "no-data-attributes-button"
+        text: "Worst button in town"
   with_custom_id_prefix:
     data:
       id_prefix: 'custom'

spec/components/radio_spec.rb

@@ -102,6 +102,26 @@ def component_name
     assert_select ".govuk-radios__item .govuk-label--s"
   end
 
+  it "renders a radio item with contextual-guidance data attribute" do
+    render_component(
+      name: "radio-group-data-attributes",
+      items: [
+        {
+          value: "cool-button",
+          text: "Best button in town",
+          data_attributes: { "contextual-guidance": "cool-buttons-guidance" },
+        },
+        {
+          value: "no-data-attributes-button",
+          text: "Worst button in town",
+        },
+      ]
+    )
+
+    assert_select ".govuk-radios__item:first-child .govuk-radios__input[data-contextual-guidance=cool-buttons-guidance]"
+    assert_select ".govuk-radios__item:last-child .govuk-radios__input[data-contextual-guidance]", false
+  end
+
   it "renders radio items with hint text" do
     render_component(
       name: "radio-group-hint-text",