Add CSS to the radio fieldset (#61)

* added classes to the fieldset
govuk-ruby · Nov 21, 2022 · 03acb68 · 03acb68
1 parent 78d74f0
commit 03acb68
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 9 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    govuk-design-system-rails (0.9.6)
+    govuk-design-system-rails (0.9.7)
 
 GEM
   remote: https://rubygems.org/

diff --git a/README.md b/README.md
@@ -9,17 +9,17 @@ It was originally extracted from Ruby applications built by the Office for Produ
 You **must** include the [govuk-frontend](https://github.com/alphagov/govuk-frontend/) assets (CSS, JS, images, etc.) in your application in order to make use of this library. These assets are not bundled with this gem. This gem aims for parity with a specific version of the `govuk-frontend` library.
 
 | This gem's version | Compatible with `govuk-frontend` version |
-| --- | --- |
-| 0.9.3 | 4.3.1 |
-| 0.9.0 | 4.1.0 |
-| 0.8.2 | 3.14.0 |
+|--------------------| --- |
+| 0.9.7              | 4.3.1 |
+| 0.9.0              | 4.1.0 |
+| 0.8.2              | 3.14.0 |
 
 # Installation
 
 Add the following to your project's Gemfile:
 
 ```ruby
-gem "govuk-design-system-rails", git: "https://github.com/OfficeForProductSafetyAndStandards/govuk-design-system-rails", tag: "0.9.3", require: "govuk_design_system"
+gem "govuk-design-system-rails", git: "https://github.com/OfficeForProductSafetyAndStandards/govuk-design-system-rails", tag: "0.9.7", require: "govuk_design_system"
 ```
 and run `bundle install`
 

diff --git a/app/views/components/_govuk_fieldset.html.erb b/app/views/components/_govuk_fieldset.html.erb
@@ -1,6 +1,6 @@
 <%
   fieldset_attributes = {
-    class: "govuk-fieldset",
+    class: ("govuk-fieldset #{local_assigns[:classes]}").strip,
   }
 
   fieldset_attributes.merge!(role: local_assigns[:role]) if local_assigns[:role]

diff --git a/app/views/components/_govuk_radios.html.erb b/app/views/components/_govuk_radios.html.erb
@@ -134,7 +134,7 @@
 
 <%= tag.div(class: form_group_classes) do %>
   <% if local_assigns[:fieldset].present? %>
-    <%= govukFieldset(classes: "", describedBy: described_by, legend: local_assigns[:fieldset][:legend], attributes: local_assigns[:fieldset]) { radios_html } %>
+    <%= govukFieldset(classes: local_assigns[:fieldset][:classes], describedBy: described_by, legend: local_assigns[:fieldset][:legend], attributes: local_assigns[:fieldset]) { radios_html } %>
   <% else %>
     <%= radios_html %>
   <% end %>

diff --git a/govuk_design_system-rails.gemspec b/govuk_design_system-rails.gemspec
@@ -2,7 +2,7 @@ $LOAD_PATH.push File.expand_path("lib", __dir__)
 
 Gem::Specification.new do |s|
   s.name        = "govuk-design-system-rails"
-  s.version     = "0.9.6"
+  s.version     = "0.9.7"
   s.authors     = %w[OfficeForProductSafetyAndStandards]
   s.summary     = "An implementation of the govuk-frontend macros in Ruby on Rails"
   s.test_files  = Dir["spec/**/*"]

diff --git a/spec/helpers/govuk_design_system/radios_helper_spec.rb b/spec/helpers/govuk_design_system/radios_helper_spec.rb
@@ -209,5 +209,64 @@
         ]
       })
     end
+
+    it "returns the correct HTML when there is a fieldset css class" do
+      html = helper.govukRadios({
+        classes: "govuk-radios--inline",
+        idPrefix: "changed-name",
+        name: "changed-name",
+        fieldset: {
+          classes: "opss-grouping",
+          legend: {
+            text: "Have you changed your name?",
+            isPageHeading: true,
+            classes: "govuk-fieldset__legend--l"
+          }
+        },
+        hint: {
+          text: "This includes changing your last name or spelling your name differently."
+        },
+        items: [
+          {
+            value: "yes",
+            text: "Yes"
+          },
+          {
+            value: "no",
+            text: "No"
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <fieldset class="govuk-fieldset opss-grouping" aria-describedby="changed-name-hint">
+            <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+              <h1 class="govuk-fieldset__heading">
+                Have you changed your name?
+              </h1>
+            </legend>
+            <div id="changed-name-hint" class="govuk-hint">
+              This includes changing your last name or spelling your name differently.
+            </div>
+            <div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="changed-name-1" name="changed-name" type="radio" value="yes">
+                <label class="govuk-label govuk-radios__label" for="changed-name-1">
+                  Yes
+                </label>
+              </div>
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="changed-name-2" name="changed-name" type="radio" value="no">
+                <label class="govuk-label govuk-radios__label" for="changed-name-2">
+                  No
+                </label>
+              </div>
+            </div>
+
+            </fieldset>
+          </div>
+      HTML
+    end
   end
 end