From 1e99551bb3b7b4d4e2b73ce255f5ab9c1e73bb91 Mon Sep 17 00:00:00 2001 From: Dana Cotoran Date: Tue, 10 Aug 2021 09:32:21 +0100 Subject: [PATCH] Add new layout template for account-like pages This adds a new account-related template, intended to be used on pages that should have the account layout, while not being rendered by the govuk-account-manager-prototype app. An example of such a page is the gov.uk/account/home page which was relocated from the account manager app to the frontend app, which at that time meant that some of the content and page furniture was duplicated between those applications. More recently, the accounts team are working towards the goal of single page notifications which will enable users who have linked their email notifications address and their GOVUK Account to manage their email subscriptions through their account. Part of this work is making the email management pages (which live in email-alert-frontend) look the same as the account manager when the user is authenticated with a linked account. Thanks to the changes included in this commit, we should be able to achieve this by simply requesting the gem_layout_account_manager from static, instead of copying individual components to yet another app. --- app/controllers/root_controller.rb | 1 + app/views/root/_gem_base.html.erb | 15 +++++++++++---- .../root/gem_layout_account_manager.html.erb | 9 +++++++++ docs/slimmer_templates.md | 13 ++++++++++++- 4 files changed, 33 insertions(+), 5 deletions(-) create mode 100644 app/views/root/gem_layout_account_manager.html.erb diff --git a/app/controllers/root_controller.rb b/app/controllers/root_controller.rb index 13eae077b..7029e72e9 100644 --- a/app/controllers/root_controller.rb +++ b/app/controllers/root_controller.rb @@ -25,6 +25,7 @@ class RootController < ApplicationController campaign gem_layout gem_layout_account + gem_layout_account_manager gem_layout_explore_header gem_layout_full_width gem_layout_full_width_explore_header diff --git a/app/views/root/_gem_base.html.erb b/app/views/root/_gem_base.html.erb index 1af4902ed..adcec5b8a 100644 --- a/app/views/root/_gem_base.html.erb +++ b/app/views/root/_gem_base.html.erb @@ -5,8 +5,12 @@ full_width ||= false omit_feedback_form ||= nil omit_footer_navigation ||= nil + omit_global_banner ||= nil + omit_user_satisfaction_survey ||= nil product_name ||= nil show_explore_header ||= false + show_account_layout ||= false + account_nav_location ||= nil if @emergency_banner emergency_banner = render "components/emergency_banner", { @@ -17,15 +21,16 @@ short_description: @emergency_banner.short_description, } end - - user_satisfaction_survey = '
' - global_bar = render "components/global_bar" + global_bar = '' + global_banner = render "components/global_bar" unless omit_global_banner + global_bar << '
' unless omit_user_satisfaction_survey + global_bar << global_banner if global_banner %> <%= render "govuk_publishing_components/components/layout_for_public", { emergency_banner: emergency_banner.presence, full_width: full_width, - global_bar: user_satisfaction_survey + global_bar, + global_bar: global_bar, logo_link: logo_link, navigation_items: [ # Remember to update the links in _base.html.erb as well. { @@ -57,4 +62,6 @@ product_name: product_name, show_explore_header: show_explore_header, title: content_for?(:title) ? yield(:title) : "GOV.UK - The best place to find government services and information", + show_account_layout: show_account_layout, + account_nav_location: account_nav_location } %> diff --git a/app/views/root/gem_layout_account_manager.html.erb b/app/views/root/gem_layout_account_manager.html.erb new file mode 100644 index 000000000..ea7cd1ebd --- /dev/null +++ b/app/views/root/gem_layout_account_manager.html.erb @@ -0,0 +1,9 @@ +<%= render partial: "gem_base", locals: { + product_name: "Account", + logo_link: Plek.new.website_root + "/account/home", + omit_feedback_form: true, + omit_global_banner: true, + omit_user_satisfaction_survey: true, + show_account_layout: true, + account_nav_location: "your-account" +} %> diff --git a/docs/slimmer_templates.md b/docs/slimmer_templates.md index 118712fca..5a731c945 100644 --- a/docs/slimmer_templates.md +++ b/docs/slimmer_templates.md @@ -10,12 +10,23 @@ This is the same as the `gem_layout` template, except that this layout **doesn't Use this layout if you want to have full width content - such as the blue welcome bar on the GOV.UK homepage. -## `gem_layout_account` +## `gem_layout_account` (deprecated – use `gem_layout_account_manager` instead) + +**NOTE:** `frontend` is still using this layout in [`account_home_controller.rb`](https://github.com/alphagov/frontend/blob/465a00aae52b6bd762debc14a0f1aba3b61d8dd4/app/controllers/account_home_controller.rb#L3). Once `frontend` has been updated to `gem_layout_account_manager`, this layout can be removed. This is a variation on the `gem_layout` template intended to be used on GOV.UK Account pages. This layout **doesn't** include the feedback component as the account pages use a different one from the rest of GOV.UK. This also includes the Account product name in the layout header and changes the logo link to the account homepage link. +## `gem_layout_account_manager` + +This is intended as a skeleton wrapper for account pages. It is intended to be used when we need a page rendered by another frontend app to look like a page from `govuk-account-manager-prototype`. + +This layout omits the default feedback component for GOVUK as the account pages use a different one from the rest of GOV.UK. Instead it introduces an account-specific phase banner, account feedback prompt, and an account nav component. It also purposefully omits the global bar and user satisfaction survey bar. + +Like the former `gem_layout_account` template, this also includes the Account product name in the layout header and changes the logo link to the account homepage link. + + ## `core_layout` (default) This template contains styles for the black header bar, the footer and core layout classes. By default it will centre your content to the same width as the GOV.UK header. It provides classes for grid layouts using the column mixins from the frontend toolkit.