Merge pull request #2411 from alphagov/add-gem-layout

Add layouts that use the public layout component

README.md

@@ -4,7 +4,9 @@ This application defines global templates for [GOV.UK](https://www.gov.uk) pages
 
 ## Screenshots
 
-![screenshot](/docs/screenshot.png?raw=true)
+`gem_layout` template:
+
+![screenshot](/docs/gem_layout.png?raw=true)
 
 ## Nomenclature
 
@@ -31,7 +33,7 @@ the same local instance, you'll need to set `PLEK_SERVICE_STATIC_URI`, which is
 the host used for static assets (even on static).
 
 Otherwise it defaults to `static.dev.gov.uk`, which won't exist if you're
-just running this repo locally, without the rest of the GOV.UK stack.
+running this repo locally, without the rest of the GOV.UK stack.
 
 To run this app locally, and have it point at its own assets, run it like this:
 
@@ -48,7 +50,7 @@ Restarting the app should pick up the changes.
 For example, to see changes made to static templates which
 are wrapped around feedback pages, run `bowl feedback
 --without=feedback` in one terminal and the `.startup.sh` script for `feedback`
-in a separate terminal. Following local edits to `static`, restarting just
+in a separate terminal. Following local edits to `static`, restarting only
 `feedback` should be sufficient.
 
 If you repeatedly see 504 Gateway Timeout errors when developing with static in your

app/controllers/root_controller.rb

@@ -23,6 +23,8 @@ class RootController < ApplicationController
     503
     504
     campaign
+    gem_layout
+    gem_layout_full_width
     scheduled_maintenance
     print
     proposition_menu

app/views/root/_error_page.html.erb

@@ -3,7 +3,7 @@
   <%= stylesheet_link_tag "error-page-print", media: "print" %>
 <% end %>
 
-<% if @emergency_banner then
+<% if @emergency_banner
     emergency_banner = render "components/emergency_banner", {
       campaign_class: @emergency_banner.campaign_class,
       heading: @emergency_banner.heading,

app/views/root/_gem_base.html.erb

@@ -0,0 +1,49 @@
+<%
+  full_width ||= false
+
+  if @emergency_banner
+    emergency_banner = render "components/emergency_banner", {
+      campaign_class: @emergency_banner.campaign_class,
+      heading: @emergency_banner.heading,
+      link: @emergency_banner.link,
+      link_text: @emergency_banner.link_text,
+      short_description: @emergency_banner.short_description,
+    }
+  end
+
+  user_satisfaction_survey = '<div id="user-satisfaction-survey-container"></div>'
+  global_bar = render "components/global_bar"
+%>
+
+<%= render "govuk_publishing_components/components/layout_for_public", {
+  emergency_banner: emergency_banner,
+  full_width: full_width,
+  global_bar: user_satisfaction_survey + global_bar,
+  navigation_items: [
+  {
+    text: "Account",
+    href: Plek.new.find("account-manager"),
+    data: {
+      module: "explicit-cross-domain-links",
+      link_for: "accounts-signed-in",
+    },
+  },
+  {
+    text: "Sign out",
+    href: Plek.new.website_root + "/transition-check/logout",
+    data: {
+      module: "explicit-cross-domain-links",
+      link_for: "accounts-signed-in",
+    },
+  },
+  {
+    text: "Sign in",
+    href: Plek.new.website_root + "/transition-check/login",
+    data: {
+      module: "explicit-cross-domain-links",
+      link_for: "accounts-signed-out",
+    },
+  }],
+  title: content_for?(:title) ? yield(:title) : "GOV.UK - The best place to find government services and information",
+
+} %>

app/views/root/gem_layout.html.erb

@@ -0,0 +1 @@
+<%= render partial: "gem_base" %>

app/views/root/gem_layout_full_width.html.erb

@@ -0,0 +1,3 @@
+<%= render partial: 'gem_base', locals: {
+  full_width: true,
+} %>

docs/slimmer_templates.md

@@ -1,19 +1,27 @@
 # Slimmer Templates
 
+## `gem_layout`
+
+This template uses the [public layout component] from the GOV.UK Publishing Components gem. It supplies the header and footer only - this includes the cookie banner, skip to content link, header bar, emergency banner, survery banner, global bar, feedback, and footer. The content is constrained and centred.
+
+## `gem_layout_full_width`
+
+This is the same as the `gem_layout` template, except that this layout **doesn't** constrain and centre the content to the same width as the GOV.UK header.
+
+Use this layout if you want to have full width content - such as the blue welcome bar on the GOV.UK homepage.
+
 ## `core_layout` (default)
 
-This template contains styles for the black header bar, the footer and core
-layout classes. By default it will center 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.
+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.
 
-It is recommended that new applications use this template so they behave in a
-consistent way.
+This layout uses deprecated dependencies.
 
 ## `header_footer_only`
 
-This template only contains styles for the black header bar and the footer of
-GOV.UK.
+This template only contains styles for the black header bar and the footer of GOV.UK.
+
+Use this layout if you want to explicitly control the full layout of your page including centering all the content.
+
+This layout uses deprecated dependencies.
 
-Use this layout if you want to explicitly control the full layout of your page
-including centering all the content.
+[public layout component]: https://components.publishing.service.gov.uk/component-guide/layout_for_public