govuk_publishing_components 21.60.3 → 21.61.0

data/app/assets/stylesheets/component_guide/application.scss

@@ -125,6 +125,10 @@ $gem-guide-border-width: 1px;
     background-color: govuk-colour("blue");
   }
 
+  &.black-background {
+    background-color: govuk-colour("black");
+  }
+
   &.component-output {
     padding: 0;
   }

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -44,6 +44,7 @@
 @import "components/label";
 @import "components/layout-footer";
 @import "components/layout-for-admin";
+@import "components/layout-for-public";
 @import "components/layout-header";
 @import "components/lead-paragraph";
 @import "components/metadata";

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss

@@ -1 +1,9 @@
 @import "govuk/components/footer/footer";
+
+.gem-c-layout-footer--border {
+  border-top: govuk-spacing(2) solid govuk-colour("blue");
+}
+
+.gem-c-layout-footer .govuk-footer__list {
+  padding-bottom: govuk-spacing(7);
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss

@@ -0,0 +1,4 @@
+.gem-c-layout-for-public {
+  margin: 0;
+  font-family: $govuk-font-family;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/components/search";
+@import "govuk_publishing_components/components/skip-link";
 @import "govuk/components/header/header";
 @import "govuk/components/tag/tag";
 
@@ -18,8 +20,80 @@
   border-bottom-color: govuk-colour("dark-grey", $legacy: "grey-1");
 }
 
+.gem-c-layout-header--no-bottom-border,
+.gem-c-layout-header--no-bottom-border .govuk-header__container {
+  margin-bottom: 0;
+  border-bottom: 0;
+
+  @include govuk-media-query($until: tablet) {
+    padding-bottom: govuk-spacing(1);
+  }
+}
+
+.gem-c-layout-header--search-left {
+  .gem-c-header__menu-button {
+    margin-top: - govuk-spacing(7);
+    left: 0;
+  }
+
+  .gem-c-header__nav-wrapper {
+    position: relative;
+    padding-left: 0;
+  }
+
+  .govuk-header__navigation--end {
+    padding-top: 0;
+    text-align: left;
+  }
+
+  .gem-c-layout-header__search {
+    margin-bottom: govuk-spacing(2);
+    padding-bottom: govuk-spacing(5);
+  }
+
+  .gem-c-header__content {
+    position: relative;
+    width: 100%;
+    padding-bottom: govuk-spacing(2);
+  }
+
+  @include govuk-media-query($from: desktop) {
+    .gem-c-layout-header__search {
+      padding-bottom: govuk-spacing(1);
+    }
+
+    .govuk-header__navigation-item {
+      padding: 0 0 govuk-spacing(1) 0;
+    }
+
+    .gem-c-header__logo {
+      margin-top: 0;
+    }
+
+    .gem-c-header__content {
+      @include govuk-grid-column(two-thirds);
+      padding-left: govuk-spacing(6);
+      padding-right: govuk-spacing(1);
+    }
+  }
+}
+
+.gem-c-layout-header__logo,
+.gem-c-layout-header__search {
+  padding: 0;
+
+  @include govuk-media-query($until: "tablet") {
+    margin-bottom: govuk-spacing(3);
+  }
+}
+
 .gem-c-header__logo {
-  width: auto;
+  margin-top: govuk-spacing(1);
+  margin-bottom: govuk-spacing(3);
+
+  @include govuk-media-query($from: desktop) {
+    white-space: nowrap;
+  }
 }
 
 .gem-c-header__content {
@@ -68,3 +142,15 @@
     display: none;
   }
 }
+
+.gem-c-layout-header__search-form {
+  display: none;
+
+  &.js-visible {
+    display: block;
+  }
+
+  @include govuk-media-query($from: tablet) {
+    display: block;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss

@@ -179,6 +179,12 @@ $large-input-size: 50px;
   }
 }
 
+.gem-c-search--no-border {
+  .gem-c-search__input[type="search"] {
+    border: 0;
+  }
+}
+
 .gem-c-search--large {
   .gem-c-search__label {
     @include govuk-font($size: 19, $line-height: $large-input-size);
@@ -208,3 +214,43 @@ $large-input-size: 50px;
     padding-left: 0;
   }
 }
+
+.search-toggle {
+  background-color: govuk-colour("blue");
+  background-image: image-url("govuk_publishing_components/search-button.png");
+  background-position: 0 50%;
+  background-repeat: no-repeat;
+  display: block;
+  float: right;
+  height: 30px;
+  margin: -46px 0;
+  overflow: hidden;
+  padding: 0;
+  text-indent: -5000px;
+  width: 36px;
+
+  &:focus {
+    border-width: 0;
+    box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
+    outline: $govuk-focus-width solid $govuk-focus-colour;
+    outline-offset: 0;
+  }
+
+  &:focus,
+  &:hover {
+    background-color: lighten(govuk-colour("blue"), 5%);
+  }
+
+  &.js-hidden {
+    display: none;
+  }
+
+  @include govuk-device-pixel-ratio {
+    background-size: 52.5px 35px;
+    background-position: 100% 50%;
+  }
+
+  @include govuk-media-query($from: tablet) {
+    display: none;
+  }
+}

data/app/models/govuk_publishing_components/component_example.rb

@@ -78,6 +78,10 @@ module GovukPublishingComponents
       context["dark_background"].present?
     end
 
+    def black_background?
+      !!context["black_background"]
+    end
+
     def html_description
       markdown_to_html(description) if description.present?
     end

data/app/views/govuk_publishing_components/component_guide/component_doc/_component.html.erb

@@ -1,6 +1,7 @@
 <div class="component-guide-preview
             <% if example.right_to_left? %>direction-rtl<% end %>
             <% if example.dark_background? %>dark-background<% end %>
+            <% if example.black_background? %>black-background<% end %>
             <% if preview_page %>component-guide-preview--simple<% end %>" data-content="EXAMPLE">
   <%= render "govuk_publishing_components/component_guide/component_doc/component_output", example: example, component_doc: component_doc %>
 </div>

data/app/views/govuk_publishing_components/components/_layout_footer.html.erb

@@ -1,36 +1,47 @@
 <%
   meta ||= []
   navigation ||= []
+  with_border ||= false
 %>
-<footer class="gem-c-layout-footer govuk-footer" role="contentinfo">
+<footer class="gem-c-layout-footer govuk-footer <%= "gem-c-layout-footer--border" if with_border %> role="contentinfo">
   <div class="govuk-width-container ">
     <% if navigation.any? %>
       <div class="govuk-footer__navigation">
         <% navigation.each do |item| %>
-          <div class="govuk-footer__section">
-            <h2 class="govuk-footer__heading govuk-heading-m"><%= item[:title] %></h2>
-            <% if item[:items] %>
-              <%
-                list_classes = %w( govuk-footer__list )
-                list_classes << "govuk-footer__list--columns-#{item[:columns]}" if item[:columns]
-              %>
-              <ul class="<%= list_classes.join(' ') %>">
-                <% item[:items].each do |item| %>
-                  <% if item[:href] && item[:text] %>
-                    <li class="govuk-footer__list-item">
-                      <%
-                        attributes = { class: "govuk-footer__link" }.merge(item.fetch(:attributes, {}))
-                        attributes[:rel] = "noopener" if attributes[:target] == "_blank" && !attributes[:rel]
-                      %>
-                      <%= link_to item[:text], item[:href], attributes %>
-                    </li>
+          <% if item[:items] %>
+            <%
+              case item[:columns]
+              when 2
+                width_class = "govuk-grid-column-two-thirds"
+              when 3
+                width_class = "govuk-grid-column-full"
+              else
+                width_class = "govuk-grid-column-one-third"
+              end
+
+              list_classes = %w( govuk-footer__list )
+              list_classes << "govuk-footer__list--columns-#{item[:columns]}" if item[:columns]
+            %>
+            <div class="<%= width_class %>">
+              <h2 class="govuk-footer__heading govuk-heading-m"><%= item[:title] %></h2>
+                <ul class="<%= list_classes.join(' ') %>">
+                  <% item[:items].each do |item| %>
+                    <% if item[:href] && item[:text] %>
+                      <li class="govuk-footer__list-item">
+                        <%
+                          attributes = { class: "govuk-footer__link" }.merge(item.fetch(:attributes, {}))
+                          attributes[:rel] = "noopener" if attributes[:target] == "_blank" && !attributes[:rel]
+                        %>
+                        <%= link_to item[:text], item[:href], attributes %>
+                      </li>
+                    <% end %>
                   <% end %>
-                <% end %>
-              </ul>
+                </ul>
+            </div>
             <% end %>
-          </div>
         <% end %>
       </div>
+
       <hr class="govuk-footer__section-break">
     <% end %>
     <div class="govuk-footer__meta">

data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb

@@ -0,0 +1,76 @@
+<%
+  title ||= "GOV.UK - The best place to find government services and information"
+  html_lang ||= "en"
+  full_width ||= false
+  omit_header ||= false
+  show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
+  layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
+-%>
+<!DOCTYPE html>
+  <!--[if lt IE 9]><html class="lte-ie8" lang="<%= html_lang %>"><![endif]-->
+  <!--[if gt IE 8]><!--><html lang="<%= html_lang %>"><!--<![endif]-->
+  <head>
+    <meta charset="utf-8" />
+    <title><%= title %></title>
+
+    <%= csrf_meta_tags %>
+
+    <%= stylesheet_link_tag "application", media: "all" %>
+    <%= stylesheet_link_tag "print", media: "print" %>
+    <!--[if lt IE 9]><%= javascript_include_tag "govuk_publishing_components/ie", integrity: true, crossorigin: "anonymous" %><![endif]-->
+    <link rel="shortcut icon" href="<%= asset_path 'favicon.ico' %>" type="image/x-icon" />
+    <link rel="mask-icon" href="<%= asset_path 'govuk-mask-icon.svg' %>" color="#0b0c0c">
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= asset_path "govuk-apple-touch-icon-180x180.png" %>">
+    <link rel="apple-touch-icon" sizes="167x167" href="<%= asset_path "govuk-apple-touch-icon-167x167.png" %>">
+    <link rel="apple-touch-icon" sizes="152x152" href="<%= asset_path "govuk-apple-touch-icon-152x152.png" %>">
+    <link rel="apple-touch-icon" href="<%= asset_path "govuk-apple-touch-icon.png" %>">
+
+    <meta name="theme-color" content="#0b0c0c" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <% #  Ensure that older IE versions always render with the correct rendering engine %>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    <% # The default og:image is added below :head so that scrapers see any custom metatags first, and this is just a fallback %>
+    <meta property="og:image" content="<%= asset_path "govuk-opengraph-image.png" %>">
+
+    <%= yield :head %>
+  </head>
+  <body class="gem-c-layout-for-public govuk-template__body">
+    <script>
+      document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+    </script>
+    <%= render "govuk_publishing_components/components/skip_link", {
+      href: "#content"
+    } %>
+
+    <%= render "govuk_publishing_components/components/cookie_banner" %>
+
+    <% unless omit_header %>
+      <%= render "govuk_publishing_components/components/layout_header", {
+        environment: "public",
+        search: show_search,
+        # layout-header will always have border-bottom, unless the layout is full width
+        remove_bottom_border: full_width,
+      } %>
+    <% end %>
+    <div class="<%= "govuk-width-container" unless full_width %>"  id="content">
+      <%= yield :before_content %>
+      <main class="govuk-main-wrapper">
+        <%= yield %>
+      </main>
+    </div>
+
+    <div class="govuk-width-container">
+      <%= render "govuk_publishing_components/components/feedback" %>
+    </div>
+
+    <% unless local_assigns[:hide_footer_links] %>
+      <%= render "govuk_publishing_components/components/layout_footer", {
+        with_border: true,
+        navigation: layout_helper.footer_navigation,
+        meta: layout_helper.footer_meta,
+      } %>
+    <% end %>
+    <%= javascript_include_tag 'application' %>
+  </body>
+</html>

data/app/views/govuk_publishing_components/components/_layout_header.html.erb

@@ -1,61 +1,49 @@
 <%
-  full_width ||= false
   product_name ||= "Publishing"
   public_environment = environment.eql?("public")
+  full_width ||= false
+  search ||= false
+  search_left ||= false
   navigation_items ||= []
-  if full_width
-    width_class = "govuk-header__container--full-width"
-  else
-    width_class = "govuk-width-container"
-  end
+  remove_bottom_border ||= false
+  search_left ||= false
+  width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
+  header_classes = %w(gem-c-layout-header govuk-header)
+  header_classes << "gem-c-layout-header--#{environment}"
+  header_classes << "gem-c-layout-header--no-bottom-border" if remove_bottom_border
+  header_classes << "gem-c-layout-header--search-left" if search_left
 %>
-<header class="gem-c-layout-header govuk-header gem-c-layout-header--<%= environment %>" role="banner" data-module="govuk-header">
-  <div class="govuk-header__container <%= width_class %>">
-    <div class="govuk-header__logo gem-c-header__logo">
-      <a href="/" class="govuk-header__link govuk-header__link--homepage">
-        <span class="govuk-header__logotype">
-          <svg role="presentation" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="32" width="36">
-            <path fill="currentColor" fill-rule="evenodd"
-              d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
-            ></path>
-            <image src="<%= asset_path('govuk-logotype-crown.png') %>" class="govuk-header__logotype-crown-fallback-image"></image>
-          </svg>
-          <span class="govuk-header__logotype-text">
-            GOV.UK
-          </span>
-        </span>
 
-        <% unless public_environment %>
-          <span class="govuk-header__product-name gem-c-header__product-name">
-            <%= product_name %>
-          </span>
-
-          <span class="gem-c-environment-tag govuk-tag gem-c-environment-tag--<%= environment %>">
-            <%= environment %>
-          </span>
-        <% end %>
-      </a>
-
-    </div><div class="govuk-header__content gem-c-header__content">
-
-    <% if navigation_items.any? %>
-    <button role="button" class="govuk-header__menu-button gem-c-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
-    <nav class="gem-c-header__nav">
-      <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end" aria-label="Top Level Navigation">
-        <% navigation_items.each_with_index do |item, index| %>
-          <li class="govuk-header__navigation-item <%= "govuk-header__navigation-item--active" if item[:active] %>
-            <%= "govuk-header__navigation-item--collapsed-menu-only" if item[:show_only_in_collapsed_menu] %>">
-            <%= link_to(
-              item[:text],
-              item[:href],
-              class: 'govuk-header__link',
-              ) %>
-          </li>
+<header class="<%= header_classes.join(' ') %>"  role="banner" data-module="govuk-header">
+  <div class="govuk-header__container <%= width_class %>">
+    <% if search_left %>
+      <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
+        <div class="gem-c-layout-header__logo govuk-grid-column-one-third-from-desktop">
+          <%= render "govuk_publishing_components/components/layout_header/header_logo", public_environment: public_environment, environment: environment, product_name: product_name %>
+        </div>
+      </div>
+      <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
+        <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop gem-c-layout-header__search">
+          <%= render "govuk_publishing_components/components/layout_header/search" %>
+        </div>
+        <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
+          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items  %>
+        </div>
+      </div>
+    <% else %>
+      <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
+        <div class="gem-c-layout-header__logo govuk-grid-column-two-thirds">
+          <%= render "govuk_publishing_components/components/layout_header/header_logo", public_environment: public_environment, environment: environment, product_name: product_name %>
+        </div>
+        <div class="govuk-header__content gem-c-header__content">
+          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items  %>
+        </div>
+        <% if search %>
+          <div class="govuk-grid-column-one-third gem-c-layout-header__search">
+            <%= render "govuk_publishing_components/components/layout_header/search" %>
+          </div>
         <% end %>
-      </ul>
-    </nav>
+      </div>
     <% end %>
-
-    </div>
   </div>
 </header>