Merge pull request #759 from alphagov/create-shared-helper-for-compon…

…ents

Create shared helper for components

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Create shared helper for components (PR #759)
 * Use delegated event handlers for checkbox events (PR #770)
 
 ## 16.1.0

app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss

@@ -1 +1,5 @@
 @import "govuk-frontend/components/textarea/textarea";
+
+.gem-c-textarea .govuk-textarea {
+  margin-bottom: 0;
+}

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

@@ -1,5 +1,5 @@
 <%
-  heading_helper = GovukPublishingComponents::Presenters::AccordionHelper.new(local_assigns)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   id ||= "default-id-#{SecureRandom.hex(4)}"
   items ||= []
@@ -31,7 +31,7 @@
         <div class="govuk-accordion__section-header">
           <%=
             content_tag(
-              heading_helper.heading_tag,
+              shared_helper.get_heading_level,
               content_tag('span', item[:heading][:text], class: "govuk-accordion__section-button", id: "#{id}-heading-#{index}", data: item[:data_attributes]),
               class: 'govuk-accordion__section-heading'
             )

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

@@ -2,8 +2,9 @@
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   heading_helper = GovukPublishingComponents::Presenters::HeadingHelper.new(local_assigns)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 %>
-<%= content_tag(heading_helper.heading_tag, text,
+<%= content_tag(shared_helper.get_heading_level, text,
     class: "gem-c-heading #{heading_helper.classes} #{brand_helper.brand_class} #{brand_helper.border_color_class}",
     id: heading_helper.id
 ) %>

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

@@ -1,9 +1,9 @@
 <%
   id ||= "hint-#{SecureRandom.hex(4)}"
-  margin_bottom ||= 3
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   css_classes = %w( gem-c-hint govuk-hint )
-  css_classes << ([*0..9].include?(margin_bottom) ? "govuk-!-margin-bottom-#{margin_bottom}" : "govuk-!-margin-bottom-3")
+  css_classes << (shared_helper.get_margin_bottom)
 %>
 
 <%= tag.span id: id, class: css_classes do %>

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

@@ -2,6 +2,7 @@
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 %>
 <% if card_helper.href || card_helper.extra_links.any? %>
   <div class="gem-c-image-card <%= "gem-c-image-card--large" if card_helper.large %> <%= brand_helper.brand_class %>"
@@ -13,7 +14,7 @@
       <%= card_helper.context %>
 
       <% if card_helper.heading_text %>
-        <%= content_tag(card_helper.heading_tag,
+        <%= content_tag(shared_helper.get_heading_level,
           class: "gem-c-image-card__title") do %>
             <% if card_helper.href %>
               <%= link_to card_helper.heading_text, card_helper.href,

app/views/govuk_publishing_components/components/_subscription-links.html.erb

@@ -1,11 +1,14 @@
 <%
   brand ||= false
-  margin_bottom ||= 0
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   sl_helper = GovukPublishingComponents::Presenters::SubscriptionLinksHelper.new(local_assigns)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
+  local_assigns[:margin_bottom] ||= 0
+  local_assigns[:margin_bottom] = 0 if local_assigns[:margin_bottom] > 9
 
   css_classes = %w( gem-c-subscription-links )
-  css_classes << ([*0..9].include?(margin_bottom) ? "govuk-!-margin-bottom-#{margin_bottom}" : "govuk-!-margin-bottom-0")
+  css_classes << (shared_helper.get_margin_bottom) unless local_assigns[:margin_bottom] == 0
   css_classes << brand_helper.brand_class
   data = {"module": "gem-toggle"} if sl_helper.feed_link_box_value
 %>

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

@@ -7,7 +7,8 @@
 
   label ||= nil
   hint ||= nil
-  margin_bottom ||= 3
+  local_assigns[:margin_bottom] ||= 6
+  local_assigns[:margin_bottom] = 6 if local_assigns[:margin_bottom] > 9
   error_message ||= nil
   error_items ||= nil
   character_count ||= nil
@@ -16,12 +17,14 @@
   has_error ||= error_message || error_items&.any?
   error_id = "error-#{SecureRandom.hex(4)}"
 
-  css_classes = %w(gem-c-textarea govuk-textarea)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
+  css_classes = %w(govuk-textarea)
   css_classes << "js-character-count" if character_count
   css_classes << "govuk-textarea--error" if has_error
-  css_classes << ([*0..9].include?(margin_bottom) ? "govuk-!-margin-bottom-#{margin_bottom}" : "govuk-!-margin-bottom-3")
-  form_group_css_classes = %w(govuk-form-group)
+  form_group_css_classes = %w(gem-c-textarea govuk-form-group)
   form_group_css_classes << "govuk-form-group--error" if has_error
+  form_group_css_classes << (shared_helper.get_margin_bottom)
 
   aria_described_by ||= nil
   if hint || has_error

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

@@ -20,6 +20,13 @@ examples:
       label:
         text: "Can you provide more detail?"
       name: "more-detail"
+  with_margin_bottom:
+    description: The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](http://govuk-frontend-review.herokuapp.com/docs/#settings/spacing-variable-govuk-spacing-points). It defaults to a margin bottom of 6 (30px).
+    data:
+      margin_bottom: 9
+      label:
+        text: "Can you provide more detail?"
+      name: "more-detail"
   specific_rows:
     description: Textarea with 10 rows
     data:

lib/govuk_publishing_components.rb

@@ -1,6 +1,6 @@
 require "govuk_publishing_components/config"
 require "govuk_publishing_components/engine"
-require "govuk_publishing_components/presenters/accordion_helper"
+require "govuk_publishing_components/presenters/shared_helper"
 require "govuk_publishing_components/presenters/breadcrumbs"
 require "govuk_publishing_components/presenters/button_helper"
 require "govuk_publishing_components/presenters/contextual_navigation"

lib/govuk_publishing_components/presenters/heading_helper.rb

@@ -4,8 +4,6 @@ class HeadingHelper
       attr_reader :heading_tag, :id, :classes
 
       def initialize(options)
-        @heading_tag = "h2"
-        @heading_tag = "h#{options[:heading_level]}" if [1, 2, 3, 4, 5, 6].include? options[:heading_level]
         @id = options[:id]
 
         @classes = ""

lib/govuk_publishing_components/presenters/image_card_helper.rb

@@ -16,7 +16,6 @@ def initialize(local_assigns)
         @description = local_assigns[:description]
         @large = local_assigns[:large]
         @heading_text = local_assigns[:heading_text]
-        @heading_level = local_assigns[:heading_level] || 2
         @extra_links_no_indent = local_assigns[:extra_links_no_indent]
         @metadata = local_assigns[:metadata]
       end
@@ -59,11 +58,6 @@ def context
         end
       end
 
-      def heading_tag
-        return "h#{@heading_level}" if [1, 2, 3, 4, 5, 6].include? @heading_level
-        return "span" if @heading_level.zero?
-      end
-
       def description
         content_tag(:div, @description, class: "gem-c-image-card__description") if @description
       end

lib/govuk_publishing_components/presenters/shared_helper.rb

@@ -0,0 +1,23 @@
+module GovukPublishingComponents
+  module Presenters
+    class SharedHelper
+      attr_reader :options, :margin_bottom, :heading_level
+
+      def initialize(local_assigns)
+        @options = local_assigns
+        @margin_bottom = @options[:margin_bottom] || 3
+        @heading_level = @options[:heading_level] || 2
+      end
+
+      def get_margin_bottom
+        [*0..9].include?(@margin_bottom) ? "govuk-!-margin-bottom-#{margin_bottom}" : "govuk-!-margin-bottom-3"
+      end
+
+      def get_heading_level
+        return [*1..6].include?(@heading_level) ? "h#{@heading_level}" : "h2" unless @heading_level.zero?
+
+        "span"
+      end
+    end
+  end
+end

spec/components/subscription_links_spec.rb

@@ -33,6 +33,16 @@ def component_name
     assert_select '.gem-c-subscription-links.govuk-\!-margin-bottom-7'
   end
 
+  it "defaults to the initial bottom margin if an incorrect value is passed" do
+    render_component(email_signup_link: 'email-signup', feed_link: 'singapore.atom', margin_bottom: 20)
+    assert_select "[class='^=govuk-\!-margin-bottom-']", false
+  end
+
+  it "has no margin class added by default" do
+    render_component(email_signup_link: 'email-signup', feed_link: 'singapore.atom')
+    assert_select "[class='^=govuk-\!-margin-bottom-']", false
+  end
+
   it "renders custom texts" do
     render_component(email_signup_link: 'email-signup', feed_link: 'singapore.atom', email_signup_link_text: 'Get email!', feed_link_text: 'View feed!')
     assert_select ".gem-c-subscription-links__link--email-alerts[href=\"email-signup\"]", text: "Get email!"

spec/components/textarea_spec.rb

@@ -76,10 +76,10 @@ def component_name
     render_component(
       label: { text: "Can you provide more detail?" },
       name: "with-custom-margin-bottom",
-      margin_bottom: 6
+      margin_bottom: 4
     )
 
-    assert_select '.govuk-textarea.govuk-\!-margin-bottom-6'
+    assert_select '.gem-c-textarea.govuk-\!-margin-bottom-4'
   end
 
   it "defaults to the initial bottom margin if an incorrect value is passed" do
@@ -89,7 +89,16 @@ def component_name
       margin_bottom: 12
     )
 
-    assert_select '.govuk-textarea.govuk-\!-margin-bottom-3'
+    assert_select '.gem-c-textarea.govuk-\!-margin-bottom-6'
+  end
+
+  it "defaults to the initial bottom margin if no value is passed" do
+    render_component(
+      label: { text: "Can you provide more detail?" },
+      name: "with-no-given-margin-bottom",
+    )
+
+    assert_select '.gem-c-textarea.govuk-\!-margin-bottom-6'
   end
 
   context "when a hint is provided" do

spec/lib/components/shared_helper_spec.rb

@@ -0,0 +1,45 @@
+RSpec.describe GovukPublishingComponents::Presenters::SharedHelper do
+  describe "Shared component helper" do
+    it "returns a default margin class" do
+      shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new({})
+      margin_class = shared_helper.get_margin_bottom
+      expect(margin_class).to eql('govuk-!-margin-bottom-3')
+    end
+
+    it "returns a given margin class" do
+      shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(margin_bottom: 6)
+      margin_class = shared_helper.get_margin_bottom
+      expect(margin_class).to eql('govuk-!-margin-bottom-6')
+    end
+
+    it "returns the default margin class if passed value is wrong" do
+      shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(margin_bottom: "a")
+      margin_class = shared_helper.get_margin_bottom
+      expect(margin_class).to eql('govuk-!-margin-bottom-3')
+    end
+
+    it "returns a default heading level" do
+      shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new({})
+      heading = shared_helper.get_heading_level
+      expect(heading).to eql('h2')
+    end
+
+    it "returns a given heading level" do
+      shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(heading_level: 6)
+      heading = shared_helper.get_heading_level
+      expect(heading).to eql('h6')
+    end
+
+    it "returns the default heading level if passed value is wrong" do
+      shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(heading_level: 9)
+      heading = shared_helper.get_heading_level
+      expect(heading).to eql('h2')
+    end
+
+    it "returns a span instead of a heading if heading level is 0" do
+      shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(heading_level: 0)
+      result = shared_helper.get_heading_level
+      expect(result).to eql('span')
+    end
+  end
+end