Merge pull request #222 from alphagov/add-margin-flag-feedback-component

Add margin_top flag to feedback component
alphagov · Mar 15, 2018 · 477ffd2 · 477ffd2
2 parents a90789b + 25ecf4d
commit 477ffd2
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# Unreleased
+
+* Add optional margin top flag for feedback component (PR #222)
+
 # 5.5.5
 * Add optional flags for spacing around document list component (PR #217)
 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    govuk_publishing_components (5.5.2)
+    govuk_publishing_components (5.5.5)
       govspeak (>= 5.0.3)
       govuk_frontend_toolkit
       rails (>= 5.0.0.1)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss b/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss
@@ -5,6 +5,9 @@
 .gem-c-feedback {
   max-width: 960px;
   margin: 0 auto;
+}
+
+.gem-c-feedback--top-margin {
   margin-top: $gutter;
 
   @include media(tablet) {

diff --git a/app/views/govuk_publishing_components/components/_feedback.html.erb b/app/views/govuk_publishing_components/components/_feedback.html.erb
@@ -1,8 +1,10 @@
 <%
   contact_govuk_path = "/contact/govuk"
+  margin_top ||= 1
+  margin_top_class = "gem-c-feedback--top-margin" if margin_top == 1
 %>
 
-<div class="gem-c-feedback" data-module="feedback">
+<div class="gem-c-feedback <%= margin_top_class %>" data-module="feedback">
   <div class="gem-c-feedback__prompt gem-c-feedback__js-show js-prompt" tabindex="-1">
     <div class="js-prompt-questions">
       <h3 class="gem-c-feedback__prompt-question">Is this page useful?</h3>

diff --git a/spec/components/feedback_spec.rb b/spec/components/feedback_spec.rb
@@ -17,4 +17,10 @@ def component_name
 
     assert_select ".gem-c-feedback .gem-c-feedback__prompt-link--wrong[href='/contact/govuk']", text: 'Is there anything wrong with this page?'
   end
+
+  it "removes top margin when margin_top flag is set" do
+    render_component(margin_top: 0)
+
+    assert_select ".gem-c-feedback.gem-c-feedback--margin-top", false
+  end
 end