diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss index ced2fa79f4..c76f8b2ed3 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss @@ -11,3 +11,61 @@ margin-top: - govuk-spacing(2); position: relative; } + +.account .gem-c-layout-for-public__global-banner-wrapper { + // TODO: this is a localised fix for the issue described here https://github.com/alphagov/govuk_publishing_components/issues/2159 + // this rule should be removed if/when the bug is fixed + margin-top: 0; +} + +.gem-c-layout-for-public-account-menu { + margin: 0 0 govuk-spacing(6) 0; + padding: 0; + + @include govuk-media-query($from: desktop) { + margin-right: govuk-spacing(4); + } +} + +// Used to determine width of blue location indicator in navigation mention +$_current-indicator-width: 4px; + +.gem-c-layout-for-public-account-menu__item { + list-style-type: none; + padding: 12px 0; + + @include govuk-media-query($from: tablet) { + margin: 0 0 govuk-spacing(4); + padding: govuk-spacing(1) 0; + } +} + +.gem-c-layout-for-public-account-menu__item--current { + margin-left: -(govuk-spacing(2) + $_current-indicator-width); + padding-left: govuk-spacing(2); + border-left: $_current-indicator-width solid govuk-colour("blue"); + + .gem-c-layout-for-public-account-menu__link { + text-decoration: none; + } +} + +.gem-c-layout-for-public-account-menu__link { + @include govuk-font(19, $weight: "bold"); + + &:not(:focus):hover { + color: $govuk-link-colour; + } +} + +.gem-c-layout-for-public-account-feedback-footer { + margin-bottom: govuk-spacing(4); + padding: govuk-spacing(3); + background: govuk-colour("light-grey"); + + @include govuk-media-query($from: tablet) { + padding: govuk-spacing(6); + margin-top: govuk-spacing(2); + margin-bottom: govuk-spacing(8); + } +} diff --git a/app/views/govuk_publishing_components/components/_layout_for_public.html.erb b/app/views/govuk_publishing_components/components/_layout_for_public.html.erb index 0af6c39650..319796dda5 100644 --- a/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +++ b/app/views/govuk_publishing_components/components/_layout_for_public.html.erb @@ -14,6 +14,12 @@ show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true title ||= "GOV.UK - The best place to find government services and information" + show_account_layout ||= false + account_nav_location ||= nil + omit_account_feedback_footer ||= false + omit_account_navigation ||= false + omit_account_phase_banner ||= false + # This is a hack - but it's the only way I can find to not have two blue bars on # constrained width layouts. # @@ -74,7 +80,7 @@ href: "#content" } %> - <%= render "govuk_publishing_components/components/cookie_banner" %> + <%= render "govuk_publishing_components/components/cookie_banner", layout_helper.cookie_banner_data %> <% unless omit_header %> <% if show_explore_header %> @@ -107,14 +113,62 @@ <% end %> <% end %> -
+ <%= t("components.layout_for_public.account_layout.feedback.banners.footer_intro") %> + " class="govuk-link"><%= t("components.layout_for_public.account_layout.feedback.banners.footer_link") %> + <%= t("components.layout_for_public.account_layout.feedback.banners.footer_outro") %> +
+ <% end %> + <% end unless omit_account_feedback_footer %> + <% elsif !omit_feedback_form %>This is some body text with a link. + with_account_layout_but_without_account_feedback_footer: + data: + show_account_layout: true + omit_account_feedback_footer: true + block: | +
This is some body text with a link.
+ with_current_account_navigation: + description: "Valid options are currently `your-account`, `manage`, and `security`" + data: + show_account_layout: true + account_nav_location: "manage" + block: | +This is some body text with a link.
+ with_account_layout_but_without_account_navigation: + data: + show_account_layout: true + omit_account_navigation: true + block: | +This is some body text with a link.
+ with_account_layout_but_without_account_phase_banner: + data: + show_account_layout: true + omit_account_phase_banner: true + block: | +This is some body text with a link.
+ with_custom_cookie_banner: + data: + cookie_banner_data: + title: Can we use cookies to collect information about how you use GOV.UK? + text: Cookies help us see where we can make improvements to GOV.UK. + confirmation_message: You have accepted cookies. + cookie_preferences_href: https://www.gov.uk/government/publications/govuk-accounts-trial-full-privacy-notice-and-accessibility-statement + services_cookies: + yes: + text: Yes + data_attributes: + track_category: cookieBanner + no: + text: No + data_attributes: + track-category: cookieBanner + cookie_preferences: + text: How GOV.UK accounts use cookies + href: https://www.gov.uk/government/publications/govuk-accounts-trial-full-privacy-notice-and-accessibility-statement diff --git a/app/views/govuk_publishing_components/components/layout_for_public/_account-navigation.html.erb b/app/views/govuk_publishing_components/components/layout_for_public/_account-navigation.html.erb new file mode 100644 index 0000000000..46a662b0e9 --- /dev/null +++ b/app/views/govuk_publishing_components/components/layout_for_public/_account-navigation.html.erb @@ -0,0 +1,30 @@ +<% page_is ||= nil %> + + diff --git a/config/locales/en.yml b/config/locales/en.yml index f9b10ead1f..474e259f35 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -81,6 +81,27 @@ en: copyright_html: © Crown copyright licence_html: All content is available under the Open Government Licence v3.0, except where otherwise stated support_links: Support links + layout_for_public: + account_layout: + feedback: + banners: + footer_intro: We’re trialling GOV.UK accounts. + footer_link: Give feedback + footer_outro: on your experience so we can make them better. + phase_intro: We’re trialling GOV.UK accounts - your + phase_link: feedback + phase_outro: will help us improve them. + title: Help improve GOV.UK accounts + navigation: + destroy_user_session: Sign out + menu_bar: + account: + link_text: Your account + manage: + link_text: Manage your account + security: + link_text: Security and privacy + user_root_path: Account layout_header: hide_button: Hide search menu: Menu diff --git a/lib/govuk_publishing_components/presenters/public_layout_helper.rb b/lib/govuk_publishing_components/presenters/public_layout_helper.rb index 96e7a14c55..1911d51df2 100644 --- a/lib/govuk_publishing_components/presenters/public_layout_helper.rb +++ b/lib/govuk_publishing_components/presenters/public_layout_helper.rb @@ -361,11 +361,12 @@ class PublicLayoutHelper ], }.freeze - attr_reader :footer_navigation, :footer_meta + attr_reader :footer_navigation, :footer_meta, :cookie_banner_data def initialize(local_assigns) @footer_navigation = local_assigns[:footer_navigation] || FOOTER_NAV @footer_meta = local_assigns[:footer_meta] || FOOTER_META + @cookie_banner_data = local_assigns[:cookie_banner_data] || {} end end end diff --git a/spec/component_guide/component_index_spec.rb b/spec/component_guide/component_index_spec.rb index a47bde1a11..be68625972 100644 --- a/spec/component_guide/component_index_spec.rb +++ b/spec/component_guide/component_index_spec.rb @@ -57,6 +57,7 @@ @import 'govuk_publishing_components/components/feedback'; @import 'govuk_publishing_components/components/govspeak'; @import 'govuk_publishing_components/components/hint'; +@import 'govuk_publishing_components/components/heading'; @import 'govuk_publishing_components/components/input'; @import 'govuk_publishing_components/components/label'; @import 'govuk_publishing_components/components/layout-footer'; @@ -64,6 +65,7 @@ @import 'govuk_publishing_components/components/layout-for-public'; @import 'govuk_publishing_components/components/layout-header'; @import 'govuk_publishing_components/components/layout-super-navigation-header'; +@import 'govuk_publishing_components/components/phase-banner'; @import 'govuk_publishing_components/components/print-link'; @import 'govuk_publishing_components/components/related-navigation'; @import 'govuk_publishing_components/components/search'; diff --git a/spec/components/layout_for_public_spec.rb b/spec/components/layout_for_public_spec.rb index d195a092a1..cde7dfba42 100644 --- a/spec/components/layout_for_public_spec.rb +++ b/spec/components/layout_for_public_spec.rb @@ -200,4 +200,59 @@ def component_name assert page.has_no_selector?("html > head > script[src*='lux/lux-reporter']", visible: :all) end + + it "account layout renders with a phase banner by default" do + render_component({ show_account_layout: true }) + + assert_select ".gem-c-layout-for-public .gem-c-phase-banner" + end + + it "account layout renders with an account nav by default" do + render_component({ show_account_layout: true }) + + assert_select ".gem-c-layout-for-public .gem-c-layout-for-public-account-nav" + end + + it "account layout renders with a feedback prompt by default" do + render_component({ show_account_layout: true }) + + assert_select ".gem-c-layout-for-public .gem-c-layout-for-public-account-feedback-footer h2", text: "Help improve GOV.UK accounts" + end + + it "indicates the active account navigation item if the location parameter is passed" do + render_component({ show_account_layout: true, account_nav_location: "manage" }) + + assert_select ".gem-c-layout-for-public-account-nav li.gem-c-layout-for-public-account-menu__item.gem-c-layout-for-public-account-menu__item--current a[aria-current=page]", text: "Manage your account" + end + + it "can accept custom cookie banner content" do + render_component({ + cookie_banner_data: { + title: "Can we use cookies to collect information about how you use GOV.UK?", + text: "Cookies help us see where we can make improvements to GOV.UK.", + confirmation_message: "You have accepted cookies.", + cookie_preferences_href: "https://www.gov.uk/government/publications/govuk-accounts-trial-full-privacy-notice-and-accessibility-statement", + services_cookies: { + yes: { + text: "Yes", + data_attributes: { + "track-category": "cookieBanner", + }, + }, + no: { + text: "No", + data_attributes: { + "track-category": "cookieBanner", + }, + }, + cookie_preferences: { + text: "How GOV.UK accounts use cookies", + href: "https://www.gov.uk/government/publications/govuk-accounts-trial-full-privacy-notice-and-accessibility-statement", + }, + }, + }, + }) + + assert_select ".gem-c-cookie-banner__message .govuk-cookie-banner__heading", text: "Can we use cookies to collect information about how you use GOV.UK?" + end end