From 8e4a197ccbfcfb577e601cb44e28c79d80743e0f Mon Sep 17 00:00:00 2001 From: Dana Cotoran Date: Thu, 27 May 2021 14:08:14 +0100 Subject: [PATCH] Add new Save page box --- .../components/_save-this-page.scss | 5 ++ app/helpers/save_this_page_helper.rb | 32 +++++++++++ app/views/components/_save_this_page.html.erb | 14 +++++ app/views/components/docs/save_this_page.yml | 25 ++++++++ config/locales/en.yml | 7 +++ test/components/save_this_page_test.rb | 49 ++++++++++++++++ test/helpers/save_this_page_helper_test.rb | 57 +++++++++++++++++++ 7 files changed, 189 insertions(+) create mode 100644 app/assets/stylesheets/components/_save-this-page.scss create mode 100644 app/helpers/save_this_page_helper.rb create mode 100644 app/views/components/_save_this_page.html.erb create mode 100644 app/views/components/docs/save_this_page.yml create mode 100644 test/components/save_this_page_test.rb create mode 100644 test/helpers/save_this_page_helper_test.rb diff --git a/app/assets/stylesheets/components/_save-this-page.scss b/app/assets/stylesheets/components/_save-this-page.scss new file mode 100644 index 000000000..93c15d9f9 --- /dev/null +++ b/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; +} diff --git a/app/helpers/save_this_page_helper.rb b/app/helpers/save_this_page_helper.rb new file mode 100644 index 000000000..b6ff6a7fc --- /dev/null +++ b/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 diff --git a/app/views/components/_save_this_page.html.erb b/app/views/components/_save_this_page.html.erb new file mode 100644 index 000000000..7f9d29fe9 --- /dev/null +++ b/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 %> diff --git a/app/views/components/docs/save_this_page.yml b/app/views/components/docs/save_this_page.yml new file mode 100644 index 000000000..53f50c8ed --- /dev/null +++ b/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 diff --git a/config/locales/en.yml b/config/locales/en.yml index b2c70f981..ed8aae574 100644 --- a/config/locales/en.yml +++ b/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: See your saved pages + see_saved_pages_signed_out: Sign in to see your saved pages. share_links: share_this_page: Share this page consultation: diff --git a/test/components/save_this_page_test.rb b/test/components/save_this_page_test.rb new file mode 100644 index 000000000..d1237bf5f --- /dev/null +++ b/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 diff --git a/test/helpers/save_this_page_helper_test.rb b/test/helpers/save_this_page_helper_test.rb new file mode 100644 index 000000000..467cfca5c --- /dev/null +++ b/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