govuk-design-system-rails 0.10.1 → 0.10.3

data/app/views/components/_govuk_radios.html.erb

@@ -7,33 +7,32 @@
 <% radios_html = capture do %>
   <% if local_assigns[:hint] %>
     <%
-      hint_id = id_prefix + '-hint'
-      described_by = described_by.present? ? described_by + ' ' + hint_id : hint_id
+      hint_id = "#{id_prefix}-hint"
+      described_by = described_by.present? ? "#{described_by} #{hint_id}" : hint_id
       hint_classes = class_names(
         "govuk-hint",
         local_assigns[:hint][:classes]
       )
     %>
     <%= govukHint({
-      id: hint_id,
-      classes: hint_classes,
-      attributes: local_assigns[:hint][:attributes],
-      html: local_assigns[:hint][:html],
-      text: local_assigns[:hint][:text]
-      }) %>
+          id: hint_id,
+          classes: hint_classes,
+          attributes: local_assigns[:hint][:attributes],
+          html: local_assigns[:hint][:html],
+          text: local_assigns[:hint][:text]
+        }) %>
   <% end %>
 
   <% radio_classes = class_names(
-      "govuk-radios",
-      { "govuk-radios--conditional" => is_conditional },
-      local_assigns[:classes]
-  )
-  %>
+       "govuk-radios",
+       { "govuk-radios--conditional" => is_conditional },
+       local_assigns[:classes]
+     ) %>
   <% if local_assigns[:errorMessage] %>
     <%
-      error_id = id_prefix + '-error'
+      error_id = "#{id_prefix}-error"
       described_by = described_by.blank? ? error_id : "#{described_by} #{error_id}"
-      error_attributes  = (local_assigns[:errorMessage][:attributes] || {}).merge(id: error_id)
+      error_attributes = (local_assigns[:errorMessage][:attributes] || {}).merge(id: error_id)
     %>
     <%=
       govukErrorMessage({
@@ -47,15 +46,15 @@
     %>
   <% end %>
   <%
-    radio_attributes = {class: radio_classes}.merge!(local_assigns[:attributes] || {})
-                                             .merge!({"data-module" => "govuk-radios"})
+    radio_attributes = { class: radio_classes }.merge!(local_assigns[:attributes] || {})
+                                             .merge!({ "data-module" => "govuk-radios" })
   %>
 
   <%= tag.div(**radio_attributes) do %>
     <% local_assigns[:items].each_with_index do |item, index| %>
       <%
         id = item[:id] || "#{id_prefix}-#{index + 1}"
-        conditional_id = 'conditional-' + id
+        conditional_id = "conditional-#{id}"
       %>
       <% if item[:divider] %>
         <div class="govuk-radios__divider">
@@ -63,7 +62,7 @@
       <% else %>
         <%
           has_hint = item[:hint] && (item[:hint][:text] || item[:hint][:html])
-          item_hint_id = id + '-item-hint'
+          item_hint_id = "#{id}-item-hint"
           disabled = item
           is_checked = item[:checked] || (!item[:value].nil? && item[:value] == local_assigns[:value])
           input_attributes = {
@@ -74,31 +73,31 @@
             class: "govuk-radios__input"
           }
 
-          input_attributes.merge!({disabled: "disabled"}) if item[:disabled]
-          input_attributes.merge!({checked: "checked"}) if is_checked
-          input_attributes.merge!({"data-aria-controls" => conditional_id}) if item[:conditional]
-          input_attributes.merge!({"aria-describedby" => item_hint_id}) if has_hint
+          input_attributes[:disabled] = "disabled" if item[:disabled]
+          input_attributes[:checked] = "checked" if is_checked
+          input_attributes["data-aria-controls"] = conditional_id if item[:conditional]
+          input_attributes["aria-describedby"] = item_hint_id if has_hint
         %>
         <%
           label_classes = class_names(
-            'govuk-radios__label',
-            { item[:label].try(:[], :classes) =>  item[:label] }
+            "govuk-radios__label",
+            { item[:label].try(:[], :classes) => item[:label] }
           )
         %>
         <div class="govuk-radios__item">
           <%= tag.input(**input_attributes) %>
           <%=
             govukLabel({
-                html: item[:html],
-                text: item[:text],
-                classes: label_classes,
-                attributes: item[:label].try(:[], :attributes),
-                for: id
+              html: item[:html],
+              text: item[:text],
+              classes: label_classes,
+              attributes: item[:label].try(:[], :attributes),
+              for: id
             })
           %>
 
           <% if has_hint %>
-            <% item_hint_classes = class_names('govuk-radios__hint', item.dig(:hint, :classes)) %>
+            <% item_hint_classes = class_names("govuk-radios__hint", item.dig(:hint, :classes)) %>
             <%=
               govukHint({
                 id: item_hint_id,
@@ -114,9 +113,9 @@
 
       <% if item[:conditional] %>
         <% conditional_classes = class_names(
-            "govuk-radios__conditional",
-            "govuk-radios__conditional--hidden" => !is_checked
-        ) %>
+             "govuk-radios__conditional",
+             "govuk-radios__conditional--hidden" => !is_checked
+           ) %>
 
         <%= tag.div(class: conditional_classes, id: conditional_id) do %>
           <%= item[:conditional][:html] %>
@@ -127,10 +126,10 @@
 <% end %>
 
 <% form_group_classes = class_names(
-  "govuk-form-group",
-  local_assigns.dig(:formGroup, :classes),
-  "govuk-form-group--error" => local_assigns[:errorMessage]
-) %>
+     "govuk-form-group",
+     local_assigns.dig(:formGroup, :classes),
+     "govuk-form-group--error" => local_assigns[:errorMessage]
+   ) %>
 
 <%= tag.div(class: form_group_classes) do %>
   <% if local_assigns[:fieldset].present? %>

data/app/views/components/_govuk_select.html.erb

@@ -28,32 +28,33 @@
       text: local_assigns[:label].try(:[], :text),
       classes: local_assigns[:label].try(:[], :classes),
       attributes: local_assigns[:label].try(:[], :attributes),
-      for: local_assigns[:id])
+      for: local_assigns[:id]
+    )
   %>
 
   <% if local_assigns[:hint] %>
     <%
-      hint_id = local_assigns.try(:[], :name) + '-hint'
-      described_by = described_by.present? ? described_by + ' ' + hint_id : hint_id
+      hint_id = "#{local_assigns.try(:[], :name)}-hint"
+      described_by = described_by.present? ? "#{described_by} #{hint_id}" : hint_id
       hint_classes = class_names(
         "govuk-hint",
         local_assigns[:hint][:classes]
       )
     %>
     <%= govukHint({
-      id: hint_id,
-      classes: hint_classes,
-      attributes: local_assigns[:hint][:attributes],
-      html: local_assigns[:hint][:html],
-      text: local_assigns[:hint][:text]
-      }) %>
+          id: hint_id,
+          classes: hint_classes,
+          attributes: local_assigns[:hint][:attributes],
+          html: local_assigns[:hint][:html],
+          text: local_assigns[:hint][:text]
+        }) %>
   <% end %>
 
   <% if local_assigns[:errorMessage] %>
     <%
-      error_id = local_assigns.try(:[], :name) + '-error'
+      error_id = "#{local_assigns.try(:[], :name)}-error"
       described_by = described_by.blank? ? error_id : "#{described_by} #{error_id}"
-      error_attributes  = (local_assigns[:errorMessage][:attributes] || {}).merge(id: error_id)
+      error_attributes = (local_assigns[:errorMessage][:attributes] || {}).merge(id: error_id)
     %>
     <%=
       govukErrorMessage({
@@ -95,9 +96,12 @@
         </svg>
       </button>
     <% end %>
-    <%= javascript_tag nonce: true do -%>
-      window.callAutocompleteWhenReady("<%= local_assigns[:id] %>", {showAllValues: "<%= local_assigns[:show_all_values] %>"});
-    <% end -%>
+
+    <script nonce="true">
+      // <![CDATA[
+        window.callAutocompleteWhenReady(<%= local_assigns[:id].to_json.html_safe %>, { showAllValues: <%= local_assigns[:show_all_values].to_json.html_safe %> });
+      // ]]>
+    </script>
   <% else %>
     <%= select %>
   <% end %>

data/app/views/components/_govuk_summary_list.html.erb

@@ -4,7 +4,7 @@
     class: class_names("govuk-summary-list", local_assigns[:classes]),
   }.merge!(local_assigns[:attributes] || {})
 %>
-<%= tag.dl **dl_attributes do %>
+<%= tag.dl(**dl_attributes) do %>
   <% local_assigns[:rows].each do |row| %>
     <% if row %>
       <%

data/app/views/components/_govuk_tabs.html.erb

@@ -5,7 +5,7 @@
     data: { module: "govuk-tabs" }
   }.merge!(local_assigns[:attributes] || {})
 %>
-<%= tag.div **attributes do %>
+<%= tag.div(**attributes) do %>
   <h2 class="govuk-tabs__title">
     <%= local_assigns[:title] || "Contents" %>
   </h2>
@@ -14,7 +14,7 @@
       <% items.each_with_index do |item, i| %>
         <% if item %>
           <%
-            item_id = item[:id].presence || ([id_prefix, i].join("-"))
+            item_id = item[:id].presence || [id_prefix, i].join("-")
             item_classes = class_names("govuk-tabs__list-item", { "govuk-tabs__list-item--selected" => i.zero? })
             link_attributes = item[:attributes] || {}
             link_attributes[:class] = class_names("govuk-tabs__tab", link_attributes[:class])
@@ -28,7 +28,7 @@
     <% items.each_with_index do |item, i| %>
       <% if item %>
         <%
-          item_id = item[:id].presence || ([id_prefix, i].join("-"))
+          item_id = item[:id].presence || [id_prefix, i].join("-")
           panel_attributes = {
             class: class_names("govuk-tabs__panel", { "govuk-tabs__panel--hidden" => i.positive? })
           }.merge!(item.dig(:panel, :attributes) || {})

data/app/views/components/_govuk_textarea.html.erb

@@ -9,48 +9,47 @@
 %>
 
 <% text_area_class = class_names(
-    "govuk-textarea",
-    { "govuk-textarea--error" => local_assigns[:errorMessage] },
-    local_assigns[:classes]
-)
-%>
+     "govuk-textarea",
+     { "govuk-textarea--error" => local_assigns[:errorMessage] },
+     local_assigns[:classes]
+   ) %>
 
 <%= tag.div(class: form_classes) do %>
   <%=
     govukLabel({
-        html: local_assigns[:label][:html],
-        text: local_assigns[:label][:text],
-        classes: local_assigns[:label][:classes],
-        isPageHeading: local_assigns[:label][:isPageHeading],
-        attributes: local_assigns[:label][:attributes],
-        for: local_assigns[:id]
+      html: local_assigns[:label][:html],
+      text: local_assigns[:label][:text],
+      classes: local_assigns[:label][:classes],
+      isPageHeading: local_assigns[:label][:isPageHeading],
+      attributes: local_assigns[:label][:attributes],
+      for: local_assigns[:id]
     })
   %>
 
   <% if local_assigns[:hint] %>
-    <% hintId = local_assigns[:id].to_s + '-hint' %>
-    <% described_by = described_by.blank? ? hintId : described_by + ' ' + hintId %>
+    <% hint_id = "#{local_assigns[:id]}-hint" %>
+    <% described_by = described_by.blank? ? hint_id : "#{described_by} #{hint_id}" %>
     <%= govukHint({
-      id: hintId,
-      classes: local_assigns[:hint][:classes],
-      attributes: local_assigns[:hint][:attributes],
-      html: local_assigns[:hint][:html],
-      text: local_assigns[:hint][:text]
-      }) %>
+          id: hint_id,
+          classes: local_assigns[:hint][:classes],
+          attributes: local_assigns[:hint][:attributes],
+          html: local_assigns[:hint][:html],
+          text: local_assigns[:hint][:text]
+        }) %>
   <% end %>
 
   <% if local_assigns[:errorMessage] %>
-    <% errorId = local_assigns[:id].to_s + '-error' %>
-    <% described_by = described_by.blank? ? errorId : described_by + ' ' + errorId %>
+    <% error_id = "#{local_assigns[:id]}-error" %>
+    <% described_by = described_by.blank? ? error_id : "#{described_by} #{error_id}" %>
     <% attributes = local_assigns[:errorMessage][:attributes] || {} %>
     <%= govukErrorMessage({
-      id: errorId,
-      classes: local_assigns[:errorMessage][:classes],
-      attributes: attributes.merge({id: errorId}),
-      html: local_assigns[:errorMessage][:html],
-      text: local_assigns[:errorMessage][:text],
-      visuallyHiddenText: local_assigns[:errorMessage][:visuallyHiddenText]
-    }) %>
+          id: error_id,
+          classes: local_assigns[:errorMessage][:classes],
+          attributes: attributes.merge({ id: error_id }),
+          html: local_assigns[:errorMessage][:html],
+          text: local_assigns[:errorMessage][:text],
+          visuallyHiddenText: local_assigns[:errorMessage][:visuallyHiddenText]
+        }) %>
   <% end %>
 
   <%

data/app/views/form_components/_govuk_date_input.html.erb

@@ -7,24 +7,24 @@
   month_errors = errors.full_messages_for("#{key}_month".to_sym)
   year_errors = errors.full_messages_for("#{key}_year".to_sym)
   local_assigns[:items] = [
-          {
-                  label: "day",
-                  classes: "govuk-input--width-2 #{'govuk-input--error' if day_errors.any? || date_errors.any?}",
-                  value: form.object.send(:get_day, key),
-                  name: "#{get_attribute_name(form, key)}[day]"
-          },
-          {
-                  label: "month",
-                  classes: "govuk-input--width-2 #{'govuk-input--error' if month_errors.any? || date_errors.any?}",
-                  value: form.object.send(:get_month, key),
-                  name: "#{get_attribute_name(form, key)}[month]"
-          },
-          {
-                  label: "year",
-                  classes: "govuk-input--width-4 #{'govuk-input--error' if year_errors.any? || date_errors.any?}",
-                  value: form.object.send(:get_year, key),
-                  name: "#{get_attribute_name(form, key)}[year]"
-          }
+    {
+      label: "day",
+      classes: "govuk-input--width-2 #{'govuk-input--error' if day_errors.any? || date_errors.any?}",
+      value: form.object.send(:get_day, key),
+      name: "#{get_attribute_name(form, key)}[day]"
+    },
+    {
+      label: "month",
+      classes: "govuk-input--width-2 #{'govuk-input--error' if month_errors.any? || date_errors.any?}",
+      value: form.object.send(:get_month, key),
+      name: "#{get_attribute_name(form, key)}[month]"
+    },
+    {
+      label: "year",
+      classes: "govuk-input--width-4 #{'govuk-input--error' if year_errors.any? || date_errors.any?}",
+      value: form.object.send(:get_year, key),
+      name: "#{get_attribute_name(form, key)}[year]"
+    }
   ]
   error_text = errors.full_messages_for(key).first.presence
   local_assigns[:errorMessage] ||= { text: error_text } if error_text

data/app/views/form_components/_govuk_radios.html.erb

@@ -2,9 +2,9 @@
   # Infer name and id_prefix from attribute key
   local_assigns[:name] ||= get_attribute_name(form, key)
   local_assigns[:idPrefix] ||= get_attribute_id_prefix(form, key)
-  #Give items ids based on rails' convention
+  # Give items ids based on rails' convention
   local_assigns[:items].each do |item|
-    #sanitization taken from https://github.com/rails/rails/
+    # sanitization taken from https://github.com/rails/rails/
     #    blob/7caea98e189c02721b2e944a074c405b033852eb/actionview/lib/action_view/helpers/tags/base.rb#L140
     value = item[:value].to_s.gsub(/\s/, "_").gsub(/[^-[[:word:]]]/, "").mb_chars.downcase.to_s
     item[:id] ||= "#{local_assigns[:idPrefix]}_#{value}"

data/app/views/form_components/_govuk_select.html.erb

@@ -10,8 +10,8 @@
   if local_assigns[:selected]
     item_matching_selected = local_assigns[:items].find { |item| item[:value].to_s == local_assigns[:selected] }
     item_matching_selected[:selected] = true if item_matching_selected
-  elsif form.object&.respond_to?(key)
-  # Make item selected based on attribute value
+  elsif form.object.respond_to?(key)
+    # Make item selected based on attribute value
     item_matching_state = local_assigns[:items].find { |item| item[:value].to_s == form.object.send(key).to_s }
     item_matching_state[:selected] = true if item_matching_state
   end

data/govuk-design-system-rails.gemspec

@@ -0,0 +1,32 @@
+$LOAD_PATH.push File.expand_path("lib", __dir__)
+
+Gem::Specification.new do |s|
+  s.name = "govuk-design-system-rails"
+  s.version = "0.10.3"
+  s.authors = %w[govuk-ruby]
+  s.summary = "An implementation of the govuk-frontend macros in Ruby on Rails"
+  s.homepage = "https://github.com/govuk-ruby/govuk-design-system-rails"
+  s.license = "MIT"
+  s.metadata = {
+    "bug_tracker_uri" => "https://github.com/govuk-ruby/govuk-design-system-rails/issues",
+    "changelog_uri" => "https://github.com/govuk-ruby/govuk-design-system-rails/releases",
+    "homepage_uri" => "https://github.com/govuk-ruby/govuk-design-system-rails",
+    "source_code_uri" => "https://github.com/govuk-ruby/govuk-design-system-rails",
+    "wiki_uri" => "https://github.com/govuk-ruby/govuk-design-system-rails/wiki"
+  }
+  s.files = %w[govuk-design-system-rails.gemspec README.md LICENSE] + Dir["{app,lib}/**/*"]
+  s.test_files = Dir["spec/**/*"]
+  s.required_ruby_version = ">= 2.7.0"
+
+  s.add_development_dependency "compare-xml", "~> 0.66"
+  s.add_development_dependency "erb_lint", "~> 0.3.1"
+  s.add_development_dependency "nokogiri", "~> 1.14.2"
+  s.add_development_dependency "rails", "~> 6.1.6", ">= 6.1.6.1"
+  s.add_development_dependency "rspec-rails", "~> 6.0.1"
+  s.add_development_dependency "rubocop", "~> 1.44.1"
+  s.add_development_dependency "rubocop-govuk", "~> 4.10.0"
+  s.add_development_dependency "rubocop-performance", "~> 1.16.0"
+  s.add_development_dependency "rubocop-rspec", "~> 2.18.1"
+  s.add_development_dependency "sqlite3", "~> 1.6.1"
+  s.add_development_dependency "super_diff", "~> 0.9.0"
+end

data/spec/helpers/govuk_design_system/checkboxes_helper_spec.rb

@@ -142,5 +142,76 @@ RSpec.describe GovukDesignSystem::CheckboxesHelper, type: :helper do
         </div>
       HTML
     end
+
+    it "returns the correct HTML when there is a fieldset css class" do
+      html = helper.govukCheckboxes({
+        idPrefix: "waste",
+        name: "waste",
+        fieldset: {
+          legend: {
+            text: "Which types of waste do you transport?",
+            isPageHeading: true,
+            classes: "govuk-fieldset__legend--l"
+          },
+          classes: "js-mutually-exclusive"
+        },
+        hint: {
+          text: "Select all that apply."
+        },
+        items: [
+          {
+            value: "carcasses",
+            text: "Waste from animal carcasses",
+            disable_ghost: true
+          },
+          {
+            value: "mines",
+            text: "Waste from mines or quarries",
+            disable_ghost: true
+          },
+          {
+            value: "farm",
+            text: "Farm or agricultural waste",
+            disable_ghost: true
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <fieldset class="govuk-fieldset js-mutually-exclusive" aria-describedby="waste-hint">
+            <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+              <h1 class="govuk-fieldset__heading">
+                Which types of waste do you transport?
+              </h1>
+            </legend>
+            <div id="waste-hint" class="govuk-hint">
+              Select all that apply.
+            </div>
+            <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+              <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="waste" name="waste" type="checkbox" value="carcasses">
+                <label class="govuk-label govuk-checkboxes__label" for="waste">
+                  Waste from animal carcasses
+                </label>
+              </div>
+              <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
+                <label class="govuk-label govuk-checkboxes__label" for="waste-2">
+                  Waste from mines or quarries
+                </label>
+              </div>
+              <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
+                <label class="govuk-label govuk-checkboxes__label" for="waste-3">
+                  Farm or agricultural waste
+                </label>
+              </div>
+            </div>
+
+          </fieldset>
+        </div>
+      HTML
+    end
   end
 end

data/spec/helpers/govuk_design_system/select_helper_spec.rb

@@ -81,5 +81,56 @@ RSpec.describe GovukDesignSystem::SelectHelper, type: :helper do
         </div>
       HTML
     end
+
+    it "returns the correct HTML when the select element is an autocomplete element" do
+      html = helper.govukSelect({
+        id: "sort",
+        name: "sort",
+        label: {
+          text: "Sort by"
+        },
+        items: [
+          {
+            value: "published",
+            text: "Recently published"
+          },
+          {
+            value: "updated",
+            text: "Recently updated",
+            selected: true
+          },
+          {
+            value: "views",
+            text: "Most views"
+          },
+          {
+            value: "comments",
+            text: "Most comments"
+          }
+        ],
+        is_autocomplete: true
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <label class="govuk-label" for="sort">
+            Sort by
+          </label>
+          <div class="">
+            <select class="govuk-select" id="sort" name="sort">
+              <option value="published">Recently published</option>
+              <option value="updated" selected="selected">Recently updated</option>
+              <option value="views">Most views</option>
+              <option value="comments">Most comments</option>
+            </select>
+          </div>
+            <script nonce="true">
+            // <![CDATA[
+              window.callAutocompleteWhenReady("sort", { showAllValues: null });
+            // ]]>
+          </script>
+        </div>
+      HTML
+    end
   end
 end