Merge pull request #2783 from govuk-forms/test-new-feedback-component

Test new feedback component

Author: DavidBiddle

app/components/feedback_link_component/_index.scss

@@ -0,0 +1,24 @@
+.test-feedback {
+  box-sizing: border-box;
+  border-top: 1px solid var(--govuk-brand-colour, #1d70b8);
+  padding: 20px 15px 25px;
+  background-color: var(--govuk-surface-background-colour, #f4f8fb);
+}
+
+.test-feedback .govuk-body:last-child {
+  margin-bottom: 0;
+}
+
+@media (min-width: 40.0625rem) {
+  .test-feedback {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+@media (max-width: calc(40.0625rem - 1px)) {
+  .test-feedback {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}

app/components/feedback_link_component/view.html.erb

@@ -0,0 +1,10 @@
+<div class="test-feedback govuk-width-container">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h2 class="govuk-heading-m"><%= t("feedback_link.heading") %></h2>
+      <p class="govuk-body">
+        <%= t("feedback_link.body_html", feedback_url: @feedback_url) %>
+      </p>
+    </div>
+  </div>
+</div>

app/components/feedback_link_component/view.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module FeedbackLinkComponent
+  class View < ApplicationComponent
+    def initialize(feedback_url: nil)
+      super()
+      @feedback_url = feedback_url
+    end
+
+    def render?
+      @feedback_url.present?
+    end
+  end
+end

app/frontend/entrypoints/application.scss

@@ -21,6 +21,7 @@ $govuk-global-styles: true;
 @import "../../components/act_as_user_banner_component";
 @import "../../components/service_navigation_component";
 @import "../../components/scrolling_wrapper_component";
+@import "../../components/feedback_link_component/";
 
 // TODO: this should be fixed by https://trello.com/c/FpxolRha/3030-fix-missing-arrow-on-autocomplete-fields
 .autocomplete__dropdown-arrow-down {

app/views/layouts/application.html.erb

@@ -12,9 +12,7 @@
 
 <% content_for :before_content do %>
   <%= govuk_phase_banner(tag: { text: "Beta" }) do %>
-    <%= t("phase_banner.before_link") %>
-    <%= govuk_link_to t("phase_banner.link"), t("phase_banner.feedback_survey_url") %>
-    <%= t("phase_banner.after_link") %>
+    <%= t("phase_banner.text") %>
   <% end %>
   <%= yield :back_link %>
   <%= render ActAsUserBannerComponent::View.new(acting_as_user, actual_user) %>
@@ -23,6 +21,8 @@
 <% content_for :footer do %>
   <% meta_items = {t("footer.accessibility_statement") => accessibility_statement_url, t("footer.cookies") => cookies_url, t("footer.privacy") => privacy_url, t("footer.terms_of_use") => terms_of_use_url, t("footer.sitemap") => sitemap_url} %>
 
+  <%= render FeedbackLinkComponent::View.new(feedback_url: t("feedback_link.feedback_survey_url")) %>
+
   <%= govuk_footer meta_items_title: t("footer.helpful_links"), meta_items: do |footer| %>
     <%= footer.with_meta_html do %>
       <div class="govuk-footer__meta-custom">

config/locales/en.yml

@@ -367,6 +367,12 @@ en:
     prefix: 'Error:'
   exit_page:
     no_content_added_html: "<p>No content added</p>"
+  feedback_link:
+    body_html: |
+      Tell us about your experience using this service.
+      You’ll help us make improvements by <a href="%{feedback_url}" class="govuk-link">giving us your feedback</a>.
+    feedback_survey_url: https://surveys.publishing.service.gov.uk/s/T7OW3C/
+    heading: Help us improve this service
   footer:
     accessibility_statement: Accessibility statement
     built_by_link: Government Digital Service
@@ -1734,10 +1740,7 @@ en:
       heading: Setting up GOV.UK Pay
     submit_button: Save and continue
   phase_banner:
-    after_link: will help us improve it.
-    before_link: This is a new service, your
-    feedback_survey_url: https://surveys.publishing.service.gov.uk/s/T7OW3C/
-    link: feedback
+    text: This is a new service.
   privacy_policy_input:
     body_html: |
       <p>

spec/components/feedback_link_component/feedback_link_component_preview.rb

@@ -0,0 +1,9 @@
+class FeedbackLinkComponent::FeedbackLinkComponentPreview < ViewComponent::Preview
+  def default
+    render(FeedbackLinkComponent::View.new)
+  end
+
+  def with_feedback_url
+    render(FeedbackLinkComponent::View.new(feedback_url: "/feedback"))
+  end
+end

spec/components/feedback_link_component/view_spec.rb

@@ -0,0 +1,34 @@
+require "rails_helper"
+
+RSpec.describe FeedbackLinkComponent::View, type: :component do
+  let(:feedback_url) { "/feedback" }
+
+  before do
+    render_inline(described_class.new(feedback_url:))
+  end
+
+  context "when feedback url is nil" do
+    let(:feedback_url) { nil }
+
+    it "does not render the component" do
+      expect(page).not_to have_selector("*")
+    end
+  end
+
+  context "when the feedback url is set" do
+    let(:feedback_url) { "/feedback" }
+
+    it "renders the heading" do
+      expect(page).to have_css("h2", text: "Help us improve this service")
+    end
+
+    it "renders the body text" do
+      expect(page).to have_text("Tell us about your experience using this service.")
+      expect(page).to have_text("You’ll help us make improvements by giving us your feedback.")
+    end
+
+    it "includes a link to the feedback URL" do
+      expect(page).to have_link("giving us your feedback", href: feedback_url)
+    end
+  end
+end

spec/requests/web_controller_spec.rb

@@ -228,6 +228,11 @@
       get root_path
     end
 
+    it "contains the feedback link component" do
+      expect(response.body).to include("Help us improve this service")
+      expect(response.body).to include("<a href=\"#{I18n.t('feedback_link.feedback_survey_url')}\" class=\"govuk-link\">giving us your feedback</a>")
+    end
+
     it "contains links related to the service" do
       expect(response.body).to include('<a class="govuk-footer__link" href="https://www.forms.service.gov.uk/accessibility">Accessibility statement</a>')
       expect(response.body).to include('<a class="govuk-footer__link" href="https://www.forms.service.gov.uk/cookies">Cookies</a>')