Extend layout for public with account components

Update layout_for_public component to support GOVUK account components. Existing variations of the component will remain unchanged, but a few options have been introduced to support the main GOVUK account layout variations. The intention is for this to be used with a layout template in static, to apply account-like page furniture to pages that should have the account layout, while not being rendered by the govuk-account-manager-prototype app.
alphagov · Aug 12, 2021 · a474f81 · a474f81
1 parent e549a4e
commit a474f81
Show file tree

Hide file tree

Showing 11 changed files with 295 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 # Unreleased
 
 * Fix cookie banner issue (IE10) ([PR #2231](https://github.com/alphagov/govuk_publishing_components/pull/2231))
+* Extend layout for public with account components ([PR #2255](https://github.com/alphagov/govuk_publishing_components/pull/2255))
 
 # 25.2.3
 

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
@@ -11,3 +11,55 @@
   margin-top: - govuk-spacing(2);
   position: relative;
 }
+
+.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
@@ -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,27 @@
       <% end %>
     <% end %>
 
-    <div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
-      <%= yield :before_content %>
-      <main class="govuk-main-wrapper" id="content">
+    <% if show_account_layout %>
+      <%= render "govuk_publishing_components/components/layout_for_public/account-layout", {
+        omit_account_phase_banner: omit_account_phase_banner,
+        omit_account_navigation: omit_account_navigation,
+        account_nav_location: account_nav_location,
+      } do %>
+        <%= yield :before_content %>
         <%= yield %>
-      </main>
-    </div>
+      <% end %>
+    <% else %>
+      <div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
+        <%= yield :before_content %>
+        <main class="govuk-main-wrapper" id="content">
+          <%= yield %>
+        </main>
+      </div>
+    <% end %>
 
-    <% unless omit_feedback_form %>
+    <% if show_account_layout && !omit_account_feedback_footer %>
+      <%= render "govuk_publishing_components/components/layout_for_public/account-feedback-footer" %>
+    <% elsif !omit_feedback_form %>
       <div class="govuk-width-container">
         <%= render "govuk_publishing_components/components/feedback" %>
       </div>

diff --git a/app/views/govuk_publishing_components/components/docs/layout_for_public.yml b/app/views/govuk_publishing_components/components/docs/layout_for_public.yml
@@ -61,3 +61,62 @@ examples:
     data:
       emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
       global_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar slot</div>
+  with_account_layout_enabled:
+    description: Adds account layout wrapper around the content passed in to the component
+    data:
+      show_account_layout: true
+      block: |
+        <h2 class="govuk-heading-l">This is a title</h2>
+        <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.
+  with_account_layout_but_without_account_feedback_footer:
+    description: The account layout renders with an account-specific feedback banner by default. This flag allows this banner to be omitted.
+    data:
+      show_account_layout: true
+      omit_account_feedback_footer: true
+      block: |
+        <h2 class="govuk-heading-l">This is a title</h2>
+        <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.</p>
+  with_current_account_navigation:
+    description: "The account layout renders with an account-specific nav to help users navigate different areas of their account. This flag is here to allow control over which option in the nav is highlighted as `current`. Valid options are currently `your-account`, `manage`, and `security`."
+    data:
+      show_account_layout: true
+      account_nav_location: "manage"
+      block: |
+        <h2 class="govuk-heading-l">This is a title</h2>
+        <p class="govuk-body">This is a page under the "Manage your account" section, so we must highlight "Manage your account" in the account navigation.</p>
+  with_account_layout_but_without_account_navigation:
+    description: The account layout renders with account navigation by default, this hides it.
+    data:
+      show_account_layout: true
+      omit_account_navigation: true
+      block: |
+        <h2 class="govuk-heading-l">This is a title</h2>
+        <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.</p>
+  with_account_layout_but_without_account_phase_banner:
+    description: The account layout renders with a phase banner by default, this hides it.
+    data:
+      show_account_layout: true
+      omit_account_phase_banner: true
+      block: |
+        <h2 class="govuk-heading-l">This is a title</h2>
+        <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.</p>
+  with_custom_cookie_banner:
+    description: Passes content through to the [cookie banner component](/component-guide/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/...ovuk_publishing_components/components/layout_for_public/_account-feedback-footer.html.erb b/...ovuk_publishing_components/components/layout_for_public/_account-feedback-footer.html.erb
@@ -0,0 +1,18 @@
+<%= tag.div(class: "govuk-width-container") do %>
+  <%= tag.div(class: "gem-c-layout-for-public-account-feedback-footer") do %>
+    <%= render "govuk_publishing_components/components/heading", {
+      text: t("components.layout_for_public.account_layout.feedback.banners.title"),
+      heading_level: 2,
+      font_size: "m",
+      margin_bottom: 4,
+    } %>
+
+    <p class="govuk-body govuk-!-margin-bottom-0">
+      <%= t("components.layout_for_public.account_layout.feedback.banners.footer_intro") %>
+      <a href="<%= "#{Plek.find('account-manager')}/feedback" %>" class="govuk-link">
+        <%= t("components.layout_for_public.account_layout.feedback.banners.footer_link") %>
+      </a>
+      <%= t("components.layout_for_public.account_layout.feedback.banners.footer_outro") %>
+    </p>
+  <% end %>
+<% end %>
diff --git a/app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb b/app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb
@@ -0,0 +1,29 @@
+<div class="govuk-width-container">
+  <% message = capture do %>
+    <%= t("components.layout_for_public.account_layout.feedback.banners.phase_intro") %>
+    <a class="govuk-link" href=<%= "#{Plek.find('account-manager')}/feedback" %>>
+      <%= t("components.layout_for_public.account_layout.feedback.banners.phase_link") %>
+    </a>
+    <%= t("components.layout_for_public.account_layout.feedback.banners.phase_outro") %>
+  <% end %>
+
+  <%= render "govuk_publishing_components/components/phase_banner", {
+    phase: "alpha",
+    message: message
+  } unless omit_account_phase_banner %>
+
+  <div class="govuk-grid-row govuk-main-wrapper">
+    <%= tag.div(class: 'govuk-grid-column-one-third') do %>
+      <%= render "govuk_publishing_components/components/layout_for_public/account-navigation", { page_is: account_nav_location} %>
+    <% end unless omit_account_navigation %>
+
+    <div class="govuk-grid-column-two-thirds">
+      <div id="wrapper">
+        <%= yield :before_content %>
+        <main role="main" id="content">
+          <%= yield %>
+        </main>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/...ews/govuk_publishing_components/components/layout_for_public/_account-navigation.html.erb b/...ews/govuk_publishing_components/components/layout_for_public/_account-navigation.html.erb
@@ -0,0 +1,30 @@
+<% page_is ||= nil %>
+
+<nav aria-label="Account management" class="gem-c-layout-for-public-account-nav">
+  <ul class="gem-c-layout-for-public-account-menu">
+    <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "your-account" %>">
+      <%= link_to(
+        t("components.layout_for_public.account_layout.navigation.menu_bar.account.link_text"),
+        "#{Plek.find('account-manager')}",
+        class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
+        'aria-current': page_is == "your-account" ? "page" : nil,
+      ) %>
+    </li>
+    <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "manage" %>">
+      <%= link_to(
+        t("components.layout_for_public.account_layout.navigation.menu_bar.manage.link_text"),
+        "#{Plek.find('account-manager')}/account/manage",
+        class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
+        'aria-current': page_is == "manage" ? "page" : nil,
+      ) %>
+    </li>
+    <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "security" %>">
+      <%= link_to(
+        t("components.layout_for_public.account_layout.navigation.menu_bar.security.link_text"),
+        "#{Plek.find('account-manager')}/account/security",
+        class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
+        'aria-current': page_is == "security" ? "page" : nil,
+      ) %>
+    </li>
+  </ul>
+</nav>
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -81,6 +81,27 @@ en:
       copyright_html: <a class="govuk-footer__link govuk-footer__copyright-logo" href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
       licence_html: All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, 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
@@ -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
@@ -56,6 +56,7 @@
 @import 'govuk_publishing_components/components/error-summary';
 @import 'govuk_publishing_components/components/feedback';
 @import 'govuk_publishing_components/components/govspeak';
+@import 'govuk_publishing_components/components/heading';
 @import 'govuk_publishing_components/components/hint';
 @import 'govuk_publishing_components/components/input';
 @import 'govuk_publishing_components/components/label';
@@ -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
@@ -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