Add user research recruitment banner

Trello: https://trello.com/c/yGMU3sR2

We're only showing the banner on the dashboard so that we don't
overwhelm people by showing it everywhere.

We're using larger, bold text and a "start" button [1] to make the "Find
out more" CTA stand out over the "Hide this" button.

Ideally we'd have used the GOV.UK Components button [2] for the two
buttons. However, the `govuk-button--inverse` CSS class [3] is not
supported by the component and there's no easy way to override it.

Instead of using that component, we're explicitly writing out the HTML
that it would have generated. It would be worth opening a PR to add an
`inverse` property to the GOV.UK Components button so we can avoid this
duplication.

[1]: https://design-system.service.gov.uk/components/button/#start-buttons
[2]: https://components.publishing.service.gov.uk/component-guide/button
[3]: https://design-system.service.gov.uk/components/button/#buttons-on-dark-backgrounds

app/assets/stylesheets/_user_research_recruitment_banner.scss

@@ -0,0 +1,22 @@
+.user-research-recruitment-banner {
+  background-color: $govuk-brand-colour;
+  @include govuk-responsive-padding(8, "top");
+}
+
+.user-research-recruitment-banner__divider {
+  border-bottom: 1px solid govuk-colour("white");
+}
+
+.user-research-recruitment-banner__title {
+  color: govuk-colour("white");
+  @include govuk-responsive-margin(5, "bottom");
+}
+
+.user-research-recruitment-banner__intro {
+  color: govuk-colour("white");
+}
+
+.user-research-recruitment-banner__buttons {
+  @include govuk-responsive-padding(6, "bottom");
+  align-items: center;
+}

app/assets/stylesheets/application.scss

@@ -1,4 +1,5 @@
 @import "govuk_publishing_components/all_components";
+@import "user_research_recruitment_banner";
 
 // TODO: move into component
 .gem-c-success-alert,

app/views/layouts/admin_layout.html.erb

@@ -11,6 +11,8 @@
     navigation_items: navigation_items,
   }%>
 
+  <%= yield(:user_research_recruitment_banner) %>
+
   <div class="govuk-width-container">
     <% if yield(:back_link).present? %>
       <%= render "govuk_publishing_components/components/back_link", href: yield(:back_link) %>

app/views/root/index.html.erb

@@ -1,5 +1,28 @@
 <% content_for :title, "Your applications" %>
 
+  <% content_for :user_research_recruitment_banner do %>
+    <section class="user-research-recruitment-banner">
+      <div class="govuk-width-container">
+        <hr class="user-research-recruitment-banner__divider govuk-section-break govuk-section-break--l govuk-!-margin-top-0">
+        <h1 class="user-research-recruitment-banner__title govuk-heading-xl">Help us improve GOV.UK Publishing</h1>
+        <p class="user-research-recruitment-banner__intro govuk-body">We're holding research sessions to make Publishing work better.</p>
+        <%= form_tag "#" do %>
+          <div class="user-research-recruitment-banner__buttons govuk-button-group">
+            <button class="govuk-!-font-size-24 govuk-!-font-weight-bold govuk-button govuk-button--start govuk-button--inverse" type="submit">
+              <span>Find out more</span>
+              <svg class="govuk-button__start-icon govuk-!-display-none-print" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" focusable="false" aria-hidden="true">
+                <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
+              </svg>
+            </button>
+            <button class="govuk-button govuk-button--inverse" type="submit">
+              Hide this
+            </button>
+          </div>
+        <% end %>
+      </div>
+    </section>
+  <% end %>
+
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
 

test/integration/user_research_recruitment_banner_test.rb

@@ -0,0 +1,34 @@
+require "test_helper"
+
+class UserResearchRecruitmentBannerTest < ActionDispatch::IntegrationTest
+  should "not display the banner on the login page" do
+    visit new_user_session_path
+
+    assert_not has_content?(user_research_recruitment_banner_title)
+  end
+
+  should "display the banner on the dashboard" do
+    user = create(:user, name: "user-name", email: "user@example.com")
+    visit new_user_session_path
+    signin_with(user)
+
+    assert has_content?(user_research_recruitment_banner_title)
+    assert has_css?("form", text: "Find out more")
+  end
+
+  should "not display the banner on any page other than the dashboard" do
+    user = create(:user, name: "user-name", email: "user@example.com")
+    visit new_user_session_path
+    signin_with(user)
+
+    click_on "Change your email or password"
+
+    assert_not has_content?(user_research_recruitment_banner_title)
+  end
+
+private
+
+  def user_research_recruitment_banner_title
+    "Help us improve GOV.UK Publishing"
+  end
+end