Add new Save page box

app/assets/stylesheets/components/_save-this-page.scss

@@ -0,0 +1,5 @@
+.app-c-save-this-page {
+  border: 1px solid govuk-colour('mid-grey');
+  border-top: 2px solid govuk-colour('blue');
+  padding: govuk-spacing(4) govuk-spacing(4) 0;
+}

app/helpers/save_this_page_helper.rb

@@ -0,0 +1,32 @@
+module SaveThisPageHelper
+  attr_reader :page_is_saved, :signed_in, :page_path
+
+  PAGE_IS_SAVED_LINK_HREF = {
+    true => "/account/saved-pages/remove?page_path=",
+    false => "/account/saved-pages/add?page_path=",
+  }.freeze
+
+  SEE_SAVED_PAGES_LOGGED_IN = {
+    true => "components.save_this_page.see_saved_pages_signed_in",
+    false => "components.save_this_page.see_saved_pages_signed_out",
+  }.freeze
+
+  def heading_text(options)
+    options[:page_is_saved] ? I18n.t("components.save_this_page.page_was_saved_heading") : I18n.t("components.save_this_page.page_not_saved_heading")
+  end
+
+  def link_text(options)
+    options[:page_is_saved] ? I18n.t("components.save_this_page.remove_page_button") : I18n.t("components.save_this_page.add_page_button")
+  end
+
+  def link_href(options)
+    page_is_saved = options[:page_is_saved] || false
+    page_path = options[:page_path] || ""
+    PAGE_IS_SAVED_LINK_HREF[page_is_saved] + page_path
+  end
+
+  def additional_text(options)
+    signed_in = options[:signed_in] || false
+    I18n.t(SEE_SAVED_PAGES_LOGGED_IN[signed_in], link: "/account/saved-pages")
+  end
+end

app/views/components/_save_this_page.html.erb

@@ -0,0 +1,14 @@
+<%
+  page_path ||= nil
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+%>
+<%= content_tag(:div, class: "app-c-save-this-page") do %>
+  <%= content_tag(shared_helper.get_heading_level, heading_text(local_assigns), class: "govuk-heading-s") %>
+    <%= render "govuk_publishing_components/components/button", {
+      text: link_text(local_assigns),
+      href: link_href(local_assigns),
+      margin_bottom: 4,
+      secondary_solid: true,
+    } %>
+  <%= content_tag(:p, sanitize(additional_text(local_assigns)), class: 'govuk-body') %>
+<% end if page_path %>

app/views/components/docs/save_this_page.yml

@@ -0,0 +1,25 @@
+name: Save this page
+description: Allows users to save a page on GOV.UK
+body: Will not render without a `page_path`
+accessibility_criteria: |
+  Buttons in this component must:
+
+  * be keyboard focusable
+  * inform the user about which item they operate on
+  * preserve focus after interacting with them
+shared_accessibility_criteria:
+- link
+examples:
+  default:
+    description: Displays the signed out user view by default
+    data:
+      page_path: /government/organisations/prime-ministers-office-10-downing-street
+  signed_in_and_has_not_saved_page:
+    data:
+      page_path: /government/organisations/prime-ministers-office-10-downing-street
+      signed_in: true
+  signed_in_and_has_already_saved_page:
+    data:
+      page_path: /government/organisations/prime-ministers-office-10-downing-street
+      signed_in: true
+      page_is_saved: true

config/locales/en.yml

@@ -17,6 +17,13 @@ en:
       from:
       hide_all: hide all
       show_all: show all
+    save_this_page:
+      page_not_saved_heading: Save this page so you can come back to it later
+      page_was_saved_heading: You’ve saved this page
+      add_page_button: Add to your saved pages
+      remove_page_button: Remove from your saved pages
+      see_saved_pages_signed_in: <a href="%{link}" class="govuk-link">See your saved pages</a>
+      see_saved_pages_signed_out: <a href="%{link}" class="govuk-link">Sign in</a> to see your saved pages.
     share_links:
       share_this_page: Share this page
   consultation:

test/components/save_this_page_test.rb

@@ -0,0 +1,49 @@
+require "component_test_helper"
+
+class SaveThisPageTest < ComponentTestCase
+  def component_name
+    "save_this_page"
+  end
+
+  test "does not render without page path" do
+    assert_empty render_component({})
+    assert_empty render_component(
+      signed_in: true,
+      page_is_saved: true,
+    )
+  end
+
+  test "renders signed out state by default" do
+    render_component(page_path: "/test")
+    assert_select ".app-c-save-this-page a.govuk-button", text: "Add to your saved pages", href: "/account/saved-pages/add?page_path=/test"
+    assert_select ".app-c-save-this-page .govuk-link", text: "Sign in"
+  end
+
+  test "renders signed out state when signed_in is false" do
+    render_component(
+      page_path: "/test",
+      signed_in: false,
+    )
+    assert_select ".app-c-save-this-page a.govuk-button", text: "Add to your saved pages", href: "/account/saved-pages/add?page_path=/test"
+    assert_select ".app-c-save-this-page .govuk-link", text: "Sign in"
+  end
+
+  test "renders signed in state with 'save this page' option" do
+    render_component(
+      page_path: "/test",
+      signed_in: true,
+    )
+    assert_select ".app-c-save-this-page a.govuk-button", text: "Add to your saved pages", href: "/account/saved-pages/add?page_path=/test"
+    assert_select ".app-c-save-this-page .govuk-link", text: "See your saved pages"
+  end
+
+  test "renders with 'remove this page' option if page has already been saved" do
+    render_component(
+      page_path: "/test",
+      signed_in: true,
+      page_is_saved: true,
+    )
+    assert_select ".app-c-save-this-page a.govuk-button", text: "Remove from your saved pages", href: "/account/saved-pages/remove?page_path=/test"
+    assert_select ".app-c-save-this-page .govuk-link", text: "See your saved pages"
+  end
+end

test/helpers/save_this_page_helper_test.rb

@@ -0,0 +1,57 @@
+require "test_helper"
+
+class SaveThisPageHelperTest < ActionView::TestCase
+  test "displays correctly by default" do
+    params = { page_path: "/test" }
+    has_save_this_page_button(params)
+    has_page_not_saved_heading(params)
+    has_signed_out_additional_text(params)
+  end
+
+  test "displays correctly when user is signed out" do
+    params = { page_path: "/test", signed_in: false }
+    has_save_this_page_button(params)
+    has_page_not_saved_heading(params)
+    has_signed_out_additional_text(params)
+  end
+
+  test "displays correctly when user is signed in and has not saved the page" do
+    params = { page_path: "/test", signed_in: true, page_is_saved: false }
+    has_save_this_page_button(params)
+    has_page_not_saved_heading(params)
+    has_signed_in_additional_text(params)
+  end
+
+  test "displays correctly when user is signed in and has already saved the page" do
+    params = { page_path: "/test", signed_in: true, page_is_saved: true }
+    has_remove_this_page_button(params)
+    has_page_was_saved_heading(params)
+    has_signed_in_additional_text(params)
+  end
+
+  def has_save_this_page_button(params)
+    assert_equal I18n.t("components.save_this_page.add_page_button"), link_text(params)
+    assert_equal "/account/saved-pages/add?page_path=/test", link_href(params)
+  end
+
+  def has_remove_this_page_button(params)
+    assert_equal I18n.t("components.save_this_page.remove_page_button"), link_text(params)
+    assert_equal "/account/saved-pages/remove?page_path=/test", link_href(params)
+  end
+
+  def has_page_not_saved_heading(params)
+    assert_equal I18n.t("components.save_this_page.page_not_saved_heading"), heading_text(params)
+  end
+
+  def has_page_was_saved_heading(params)
+    assert_equal I18n.t("components.save_this_page.page_was_saved_heading"), heading_text(params)
+  end
+
+  def has_signed_in_additional_text(params)
+    assert_equal I18n.t("components.save_this_page.see_saved_pages_signed_in", link: "/account/saved-pages"), additional_text(params)
+  end
+
+  def has_signed_out_additional_text(params)
+    assert_equal I18n.t("components.save_this_page.see_saved_pages_signed_out", link: "/account/saved-pages"), additional_text(params)
+  end
+end