RubyGems - govuk_publishing_components - Versions diffs - 21.60.2 → 21.63.1 - Mend

govuk_publishing_components 21.60.2 → 21.63.1

Files changed (58) hide show

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

@@ -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 CHANGED

@@ -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>

data/app/views/govuk_publishing_components/components/_panel.html.erb CHANGED

@@ -4,22 +4,24 @@
   append ||= false
 %>
 <div class="gem-c-panel govuk-panel govuk-panel--confirmation">
-  <% if prepend %>
-    <div class="gem-c-panel__prepend">
-      <%= prepend %>
-    </div>
-  <% end %>
   <h2 class="govuk-panel__title">
-    <%= title %>
+    <% if prepend %>
+      <span class="gem-c-panel__prepend">
+        <%= prepend %>
+      </span>
+    <% end %>
+    <span class="govuk-panel__title-text">
+      <%= title %>
+    </span>
+    <% if append %>
+      <span class="gem-c-panel__append">
+        <%= append %>
+      </span>
+    <% end %>
   </h2>
   <% if description %>
     <div class="govuk-panel__body">
       <%= description %>
     </div>
   <% end %>
-  <% if append %>
-    <div class="gem-c-panel__append">
-      <%= append %>
-    </div>
-  <% end %>
 </div>

data/app/views/govuk_publishing_components/components/_search.html.erb CHANGED

@@ -1,9 +1,14 @@
 <%
-  class_name = "gem-c-search--on-white"
-  class_name = "gem-c-search--on-govuk-blue" if local_assigns[:on_govuk_blue].eql?(true)
   size ||= ""
-  class_name = "#{class_name} gem-c-search--large" if size == 'large'
-  class_name = "#{class_name} gem-c-search--separate-label" if local_assigns.include?(:inline_label)
+  no_border ||= false
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  classes = %w(gem-c-search gem-c-search--on-white)
+  classes << (shared_helper.get_margin_top)
+  classes << (shared_helper.get_margin_bottom) if local_assigns[:margin_bottom]
+  classes << "gem-c-search--large" if size == 'large'
+  classes << "gem-c-search--no-border" if no_border
+  classes << "gem-c-search--on-govuk-blue" if local_assigns[:on_govuk_blue].eql?(true)
+  classes << "gem-c-search--separate-label" if local_assigns.include?(:inline_label)
   value ||= ""
   id ||= "search-main-" + SecureRandom.hex(4)
@@ -12,7 +17,7 @@
   aria_controls ||= nil
 %>
-<div class="gem-c-search <%= class_name %>" data-module="gem-toggle-input-class-on-focus">
+<div class="<%= classes.join(' ') %>" data-module="gem-toggle-input-class-on-focus">
   <label for="<%= id %>" class="gem-c-search__label">
     <%= label_text %>
   </label>

data/app/views/govuk_publishing_components/components/_share_links.html.erb CHANGED

@@ -55,37 +55,37 @@
             class: "gem-c-share-links__link #{brand_helper.color_class}" do %>
             <span class="gem-c-share-links__link-icon">
               <% if link[:icon] == 'facebook' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true">
                   <path fill="currentColor" d="M31.006 0H.993A.997.997 0 0 0 0 .993v30.014c0 .55.452.993.993.993h30.013a.998.998 0 0 0 .994-.993V.993A.999.999 0 0 0 31.006 0z"/>
                   <path fill="#FFF" d="M17.892 10.751h1.787V8.009L17.216 8c-2.73 0-3.352 2.045-3.352 3.353v1.828h-1.581v2.824h1.581V24h3.322v-7.995h2.242l.291-2.824h-2.533V11.52c.001-.623.415-.769.706-.769z"/>
                 </svg>
               <% elsif link[:icon] == 'twitter' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true">
                   <path fill="currentColor" d="M31.007 0H.993A.999.999 0 0 0 0 .993v30.014c0 .55.452.993.993.993h30.014a.997.997 0 0 0 .993-.993V.993A.998.998 0 0 0 31.007 0z"/>
                   <path fill="#FFF" d="M8 21.027a9.286 9.286 0 0 0 5.032 1.475c6.038 0 9.34-5.002 9.34-9.339 0-.143-.004-.284-.012-.425a6.619 6.619 0 0 0 1.639-1.699c-.6.265-1.234.439-1.885.516a3.287 3.287 0 0 0 1.443-1.816 6.571 6.571 0 0 1-2.086.797 3.28 3.28 0 0 0-5.592 2.993 9.311 9.311 0 0 1-6.766-3.43 3.294 3.294 0 0 0-.443 1.651 3.28 3.28 0 0 0 1.46 2.732 3.278 3.278 0 0 1-1.488-.411v.041a3.288 3.288 0 0 0 2.633 3.22 3.28 3.28 0 0 1-1.481.055 3.285 3.285 0 0 0 3.065 2.281 6.59 6.59 0 0 1-4.076 1.404A6.76 6.76 0 0 1 8 21.027z"/>
                 </svg>
               <% elsif link[:icon] == 'email' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M34.983 18.76v12.48H15.016V18.76h19.967m2.496-2.496H12.52v17.472h24.959V16.264z"/><path fill="none" stroke="#FFF" stroke-width="2.496" stroke-miterlimit="10" d="M14.59 18.963L25 26.945l10.263-7.869"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M34.983 18.76v12.48H15.016V18.76h19.967m2.496-2.496H12.52v17.472h24.959V16.264z"/><path fill="none" stroke="#FFF" stroke-width="2.496" stroke-miterlimit="10" d="M14.59 18.963L25 26.945l10.263-7.869"/></svg>
               <% elsif link[:icon] == 'flickr' %>
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32"><path fill="currentColor" d="M9 9h32v32H9V9z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M23.72 25a5.76 5.76 0 1 1-11.52 0 5.76 5.76 0 1 1 11.52 0m14.08 0c0 3.182-2.578 5.76-5.76 5.76s-5.76-2.578-5.76-5.76a5.76 5.76 0 1 1 11.52 0"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M23.72 25a5.76 5.76 0 1 1-11.52 0 5.76 5.76 0 1 1 11.52 0m14.08 0c0 3.182-2.578 5.76-5.76 5.76s-5.76-2.578-5.76-5.76a5.76 5.76 0 1 1 11.52 0"/></svg>
               <% elsif link[:icon] == 'instagram' %>
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32"><path fill="currentColor" d="M9 9h32v32H9V9z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M25 28.2a3.204 3.204 0 0 1-3.2-3.2c0-1.764 1.436-3.2 3.2-3.2 1.765 0 3.2 1.436 3.2 3.2 0 1.765-1.435 3.2-3.2 3.2"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#c" overflow="visible"/></clipPath><path clip-path="url(#d)" fill="#FFF" d="M25 22.44c1.412 0 2.56 1.148 2.56 2.56s-1.147 2.56-2.56 2.56a2.561 2.561 0 0 1 0-5.12m0-1.28A3.844 3.844 0 0 0 21.16 25 3.844 3.844 0 0 0 25 28.84 3.845 3.845 0 0 0 28.84 25 3.844 3.844 0 0 0 25 21.16"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#e" overflow="visible"/></clipPath><path clip-path="url(#f)" fill="#FFF" d="M17.32 35.24c-1.555 0-2.56-1.005-2.56-2.561V17.373c0-1.611.981-2.613 2.56-2.613h15.36c1.58 0 2.561 1.002 2.561 2.613v15.36c0 1.522-1.005 2.507-2.561 2.507H17.32zM25 17.96c-3.881 0-7.04 3.159-7.04 7.04 0 3.881 3.159 7.04 7.04 7.04 3.881 0 7.04-3.159 7.04-7.04 0-3.881-3.159-7.04-7.04-7.04m7.36-2.56a2.243 2.243 0 0 0-2.24 2.24 2.243 2.243 0 0 0 2.24 2.24 2.241 2.241 0 0 0 0-4.48"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#g" overflow="visible"/></clipPath><path clip-path="url(#h)" fill="#FFF" d="M30.552 15.4a2.873 2.873 0 0 0-.704 3.648A7.64 7.64 0 0 0 25 17.319c-4.235 0-7.68 3.445-7.68 7.68 0 4.235 3.445 7.68 7.68 7.68 4.235 0 7.68-3.444 7.68-7.68a7.642 7.642 0 0 0-1.728-4.848 2.876 2.876 0 0 0 3.647-.703v13.285c0 1.169-.717 1.866-1.92 1.866H17.32c-1.22 0-1.92-.699-1.92-1.92V17.373c0-1.254.7-1.973 1.92-1.973h13.232m2.128-1.28H17.32c-1.92 0-3.2 1.28-3.2 3.253V32.68c0 1.92 1.28 3.2 3.2 3.2h15.36c1.92 0 3.2-1.28 3.2-3.146v-15.36c0-1.974-1.28-3.254-3.2-3.254m-.32 5.12a1.6 1.6 0 1 1-.001-3.2 1.6 1.6 0 0 1 .001 3.2M25 31.4a6.4 6.4 0 1 1 .002-12.802A6.4 6.4 0 0 1 25 31.4"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M25 28.2a3.204 3.204 0 0 1-3.2-3.2c0-1.764 1.436-3.2 3.2-3.2 1.765 0 3.2 1.436 3.2 3.2 0 1.765-1.435 3.2-3.2 3.2"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#c" overflow="visible"/></clipPath><path clip-path="url(#d)" fill="#FFF" d="M25 22.44c1.412 0 2.56 1.148 2.56 2.56s-1.147 2.56-2.56 2.56a2.561 2.561 0 0 1 0-5.12m0-1.28A3.844 3.844 0 0 0 21.16 25 3.844 3.844 0 0 0 25 28.84 3.845 3.845 0 0 0 28.84 25 3.844 3.844 0 0 0 25 21.16"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#e" overflow="visible"/></clipPath><path clip-path="url(#f)" fill="#FFF" d="M17.32 35.24c-1.555 0-2.56-1.005-2.56-2.561V17.373c0-1.611.981-2.613 2.56-2.613h15.36c1.58 0 2.561 1.002 2.561 2.613v15.36c0 1.522-1.005 2.507-2.561 2.507H17.32zM25 17.96c-3.881 0-7.04 3.159-7.04 7.04 0 3.881 3.159 7.04 7.04 7.04 3.881 0 7.04-3.159 7.04-7.04 0-3.881-3.159-7.04-7.04-7.04m7.36-2.56a2.243 2.243 0 0 0-2.24 2.24 2.243 2.243 0 0 0 2.24 2.24 2.241 2.241 0 0 0 0-4.48"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#g" overflow="visible"/></clipPath><path clip-path="url(#h)" fill="#FFF" d="M30.552 15.4a2.873 2.873 0 0 0-.704 3.648A7.64 7.64 0 0 0 25 17.319c-4.235 0-7.68 3.445-7.68 7.68 0 4.235 3.445 7.68 7.68 7.68 4.235 0 7.68-3.444 7.68-7.68a7.642 7.642 0 0 0-1.728-4.848 2.876 2.876 0 0 0 3.647-.703v13.285c0 1.169-.717 1.866-1.92 1.866H17.32c-1.22 0-1.92-.699-1.92-1.92V17.373c0-1.254.7-1.973 1.92-1.973h13.232m2.128-1.28H17.32c-1.92 0-3.2 1.28-3.2 3.253V32.68c0 1.92 1.28 3.2 3.2 3.2h15.36c1.92 0 3.2-1.28 3.2-3.146v-15.36c0-1.974-1.28-3.254-3.2-3.254m-.32 5.12a1.6 1.6 0 1 1-.001-3.2 1.6 1.6 0 0 1 .001 3.2M25 31.4a6.4 6.4 0 1 1 .002-12.802A6.4 6.4 0 0 1 25 31.4"/></svg>
               <% elsif link[:icon] == 'linkedin' %>
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M19.24 35.24V21.8h-4.48v13.44h4.48z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M26.28 35.24V28.2c0-1.92.64-3.2 1.92-3.2h.64c1.28 0 1.92 1.28 1.92 4.48v5.76h4.48V28.2c0-4.48-1.28-6.4-4.48-6.4-3.84 0-4.479 1.92-4.479 1.92V21.8H21.8v13.44h4.48zm-6.72-17.92a2.56 2.56 0 1 1-5.12 0 2.56 2.56 0 0 1 5.12 0"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M19.24 35.24V21.8h-4.48v13.44h4.48z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M26.28 35.24V28.2c0-1.92.64-3.2 1.92-3.2h.64c1.28 0 1.92 1.28 1.92 4.48v5.76h4.48V28.2c0-4.48-1.28-6.4-4.48-6.4-3.84 0-4.479 1.92-4.479 1.92V21.8H21.8v13.44h4.48zm-6.72-17.92a2.56 2.56 0 1 1-5.12 0 2.56 2.56 0 0 1 5.12 0"/></svg>
               <% elsif link[:icon] == 'youtube' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M19.88 33.32V16.68L33.32 25l-13.44 8.32z"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M19.88 33.32V16.68L33.32 25l-13.44 8.32z"/></svg>
               <% elsif link[:icon] == 'whatsapp' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M0 32V0h32v32H0zm20.839-13.894c-.263-.131-1.555-.766-1.796-.854-.24-.088-.416-.132-.59.131-.176.263-.68.855-.833 1.03-.153.176-.307.198-.57.066-.262-.131-1.109-.41-2.113-1.304-.78-.697-1.308-1.557-1.461-1.82-.153-.263-.016-.406.115-.536.118-.118.263-.308.394-.46.131-.154.175-.264.263-.44.088-.174.044-.328-.022-.46-.066-.131-.591-1.424-.81-1.95-.214-.513-.43-.443-.59-.452a10.506 10.506 0 0 0-.505-.009.964.964 0 0 0-.7.329c-.241.263-.92.899-.92 2.192 0 1.293.942 2.542 1.073 2.718.131.176 1.852 2.83 4.489 3.967.626.27 1.116.433 1.497.554.63.2 1.202.172 1.655.104.505-.075 1.555-.636 1.774-1.25.219-.613.219-1.14.153-1.25-.066-.108-.24-.174-.503-.306zm-4.795 6.547h-.003a8.73 8.73 0 0 1-4.449-1.219l-.319-.19-3.308.869.883-3.226-.208-.33a8.718 8.718 0 0 1-1.336-4.652c.001-4.819 3.922-8.74 8.744-8.74a8.68 8.68 0 0 1 6.179 2.564 8.686 8.686 0 0 1 2.557 6.183c-.002 4.82-3.922 8.74-8.74 8.74zm7.44-16.18a10.449 10.449 0 0 0-7.44-3.084c-5.796 0-10.513 4.717-10.516 10.516 0 1.853.484 3.662 1.404 5.256l-1.492 5.45 5.574-1.463a10.504 10.504 0 0 0 5.026 1.28h.004c5.796 0 10.514-4.717 10.516-10.515a10.455 10.455 0 0 0-3.077-7.44z" fill="currentColor"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true"><path d="M0 32V0h32v32H0zm20.839-13.894c-.263-.131-1.555-.766-1.796-.854-.24-.088-.416-.132-.59.131-.176.263-.68.855-.833 1.03-.153.176-.307.198-.57.066-.262-.131-1.109-.41-2.113-1.304-.78-.697-1.308-1.557-1.461-1.82-.153-.263-.016-.406.115-.536.118-.118.263-.308.394-.46.131-.154.175-.264.263-.44.088-.174.044-.328-.022-.46-.066-.131-.591-1.424-.81-1.95-.214-.513-.43-.443-.59-.452a10.506 10.506 0 0 0-.505-.009.964.964 0 0 0-.7.329c-.241.263-.92.899-.92 2.192 0 1.293.942 2.542 1.073 2.718.131.176 1.852 2.83 4.489 3.967.626.27 1.116.433 1.497.554.63.2 1.202.172 1.655.104.505-.075 1.555-.636 1.774-1.25.219-.613.219-1.14.153-1.25-.066-.108-.24-.174-.503-.306zm-4.795 6.547h-.003a8.73 8.73 0 0 1-4.449-1.219l-.319-.19-3.308.869.883-3.226-.208-.33a8.718 8.718 0 0 1-1.336-4.652c.001-4.819 3.922-8.74 8.744-8.74a8.68 8.68 0 0 1 6.179 2.564 8.686 8.686 0 0 1 2.557 6.183c-.002 4.82-3.922 8.74-8.74 8.74zm7.44-16.18a10.449 10.449 0 0 0-7.44-3.084c-5.796 0-10.513 4.717-10.516 10.516 0 1.853.484 3.662 1.404 5.256l-1.492 5.45 5.574-1.463a10.504 10.504 0 0 0 5.026 1.28h.004c5.796 0 10.514-4.717 10.516-10.515a10.455 10.455 0 0 0-3.077-7.44z" fill="currentColor"/></svg>
               <% else %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M12.84 14.12v19.2h5.76l5.76 5.76v-5.76h12.8v-19.2H12.84zm3.2 8.32H28.2V25H16.04v-2.56zm16 7.68h-16v-2.56h16v2.56zm1.92-10.24H16.04v-2.56h17.92v2.56z"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M12.84 14.12v19.2h5.76l5.76 5.76v-5.76h12.8v-19.2H12.84zm3.2 8.32H28.2V25H16.04v-2.56zm16 7.68h-16v-2.56h16v2.56zm1.92-10.24H16.04v-2.56h17.92v2.56z"/></svg>
               <% end %>
             </span><%= link_text %><% end %>

data/app/views/govuk_publishing_components/components/docs/document_list.yml CHANGED

@@ -262,3 +262,21 @@ examples:
         - link:
             text: 'Criteria'
             description: 'no url provided, just text'
+  with_locale_specified:
+    description: |
+      The component is used on translated pages that don’t have a translation for the document link text or the metadata. This means that it could display the fallback English string if the translate method can’t find an appropriate translation. This makes sure that the lang can be set to ensure that browsers understand which parts of the page are in each language.
+      Locales can be set separately for the document link text and individual metadata items. To set link text locale, pass a locale attribute along with the link object. To set metadata locale, pass a locale attribute containing a parallel object to your metadata (depending on which metadata have translations and which need a lang attribute to specify that they are in a different language).
+      The lang attribute must be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is en or eng, Korean is ko or kor - but if in doubt please check.
+    data:
+      items:
+      - link:
+          text: 'Tryloywder Uwch Staff Ysgrifennydd Gwladol Cymru Ionawr-Mawrth 2020'
+          path: '/government/publications/office-of-the-secretary-of-state-for-wales-senior-staff-transparency-january-march-2020'
+          locale: 'cy'
+        metadata:
+          public_updated_at: 2016-06-27 10:29:44
+          document_type: 'Data tryloywder'
+          locale:
+            document_type: 'cy'

data/app/views/govuk_publishing_components/components/docs/layout_footer.yml CHANGED

@@ -139,3 +139,20 @@ examples:
             attributes:
               lang: en
               hreflang: en
+  with_border:
+    data:
+      with_border: true
+      meta:
+        items:
+          - href: '/help'
+            text: Help
+          - href: '/help/cookies'
+            text: Cookies
+          - href: '/contact'
+            text: Contact
+          - href: '/help/terms-conditions'
+            text: Terms and conditions
+          - href: '/cymraeg'
+            text: Rhestr o Wasanaethau Cymraeg
+          - href: '/government/organisations/government-digital-service'
+            text: Government Digital Service

data/app/views/govuk_publishing_components/components/docs/layout_for_admin.yml CHANGED

@@ -10,7 +10,11 @@ body: |
 display_preview: false
 display_html: true
 accessibility_criteria: |
-  TBD
+  The layout template must:
+    * have a `lang` attribute
+    * contain a [skip link](/component-guide/skip_link)
+    * have a sensible page `<title>`
 examples:
   default:
     data:

data/app/views/govuk_publishing_components/components/docs/layout_for_public.yml ADDED

@@ -0,0 +1,29 @@
+name: Public layout
+description: A layout to be used by public-facing applications
+body: |
+  Because it is an entire HTML document, this component can only be [previewed on a separate page](/public).
+display_preview: false
+display_html: true
+accessibility_criteria: |
+  The layout template must:
+    * have a `lang` attribute
+    * contain a [skip link](/component-guide/skip_link)
+    * have a sensible page `<title>`
+examples:
+  default:
+    data:
+      title: 'Example layout'
+      block: |
+        <h1>Page content goes here</h1>
+  full_width:
+    description: By default, the layout applies the `govuk-width-container` class to the main element. We can remove this class by setting `full_width` to `true`
+    data:
+      full_width: true
+      block: |
+        <h1>Page content goes here</h1>
+  omit_header:
+    description: This allows the header to be omitted which is currently used when rendering CSV previews from Whitehall
+    data:
+      omit_header: true

data/app/views/govuk_publishing_components/components/docs/layout_header.yml CHANGED

@@ -7,6 +7,10 @@ govuk_frontend_components:
   - header
 accessibility_excluded_rules:
   - landmark-banner-is-top-level # The header element can not be top level in the examples
+  - duplicate-id-aria # IDs will be duplicated in component examples list
+  - form-field-multiple-labels # Form labels will be ambiguous in component examples list
+  - landmark-no-duplicate-banner # banners will be duplicated in component examples list
+  - landmark-unique # aria-label attributes will be duplicated in component examples list
 examples:
   default:
     data:
@@ -36,12 +40,42 @@ examples:
       - text: Hidden on desktop
         href: "item-3"
         show_only_in_collapsed_menu: true
+  with_left_search_and_navigation:
+    description: This supports pages where the search appears on the left with multiple navigation links on the right, such as the [How government works](https://www.gov.uk/government/how-government-works) page
+    data:
+      search_left: true
+      environment: public
+      navigation_items:
+      - text: Departments
+        href: "item-1"
+      - text: Worldwide
+        href: "item-2"
+      - text: How government works
+        href: "item-3"
+      - text: Get involved
+        href: "item-4"
+      - text: Consultations
+        href: "item-4"
+      - text: Statistics
+        href: "item-5"
+      - text: News and communications
+        href: "item-6"
+        active: true
   full_width:
     description: |
       This is difficult to preview because the preview windows are constrained, but the header will stretch to the size of its container.
     data:
       environment: production
       full_width: true
+  no_bottom_border:
+    description: This is useful for pages where a large full-width banner is the first thing to appear on the page, for example, the [GOV.UK homepage](https://www.gov.uk)
+    data:
+      remove_bottom_border: true
+      environment: 'public'
+  with_search_bar:
+    data:
+      environment: 'public'
+      search: true
 accessibility_criteria: |
   The component must:

data/app/views/govuk_publishing_components/components/docs/search.yml CHANGED

@@ -24,6 +24,12 @@ examples:
   stop_the_label_appearing_inline:
     data:
       inline_label: false
+  no_border:
+    description: Sometimes we don't need the grey border surrounding the input field, such as when the component is used on a black background
+    data:
+      no_border: true
+    context:
+      black_background: true
   for_use_on_govuk_blue_background:
     data:
       on_govuk_blue: true

data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb CHANGED

@@ -10,7 +10,7 @@
     data-track-action="GOV.UK Close Form"
     aria-controls="something-is-wrong"
     aria-expanded="true"
-    role="button">Close</a>
+    role="button"><%= t("components.feedback.close", default: "Close") %></a>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -18,12 +18,12 @@
       <input type="hidden" name="url" value="<%= url_without_pii %>">
-      <h3 class="gem-c-feedback__form-heading">Help us improve GOV.UK</h3>
-      <p id="feedback_explanation" class="gem-c-feedback__form-paragraph">Don’t include personal or financial information like your National Insurance number or credit card details.</p>
+      <h3 class="gem-c-feedback__form-heading"><%= t("components.feedback.help_us_improve_govuk", default: "Help us improve GOV.UK") %></h3>
+      <p id="feedback_explanation" class="gem-c-feedback__form-paragraph"><%= t("components.feedback.dont_include_personal_info", default: "Don’t include personal or financial information like your National Insurance number or credit card details.") %></p>
       <%= render "govuk_publishing_components/components/input", {
         label: {
-          text: "What were you doing?"
+          text: t("components.feedback.what_doing", default: "What were you doing?")
         },
         name: "what_doing",
         describedby: "feedback_explanation"
@@ -31,13 +31,13 @@
       <%= render "govuk_publishing_components/components/input", {
         label: {
-          text: "What went wrong?"
+          text: t("components.feedback.what_wrong", default: "What went wrong?")
         },
         name: "what_wrong"
       } %>
       <%= render "govuk_publishing_components/components/button", {
-        text: "Send"
+        text: t("components.feedback.send", default: "Send")
       } %>
     </div>
   </div>