govuk_publishing_components 21.60.1 → 21.63.0

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/_breadcrumbs.html.erb

@@ -5,7 +5,7 @@
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 
   classes = "gem-c-breadcrumbs govuk-breadcrumbs"
-  classes << " gem-c-breadcrumbs--collapse-on-mobile" if collapse_on_mobile
+  classes << " govuk-breadcrumbs--collapse-on-mobile" if collapse_on_mobile
   classes << " gem-c-breadcrumbs--inverse" if inverse
 %>
 

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

@@ -33,6 +33,7 @@
               item[:link][:path],
               data: item[:link][:data_attributes],
               class: "#{item_classes} gem-c-document-list__item-link",
+              lang: item[:link][:locale].presence
             )
           else
             content_tag(
@@ -54,16 +55,24 @@
 
         <% if item[:metadata] %>
           <ul class="gem-c-document-list__item-metadata">
-            <% item[:metadata].compact.each do |item_metadata_key, item_metadata_value| %>
-              <li class="gem-c-document-list__attribute">
-                <% if item_metadata_key.to_s.eql?("public_updated_at") %>
-                  <time datetime="<%= item_metadata_value.iso8601 %>">
-                    <%= l(item_metadata_value, format: '%e %B %Y') %>
-                  </time>
-                <% else %>
-                  <%= item_metadata_value %>
+            <% item[:metadata].compact.each do |item_metadata_key, item_metadata_value| %> 
+              <% if !item_metadata_key.to_s.eql?("locale") %>
+                <% lang = item[:metadata][:locale].present? && item[:metadata][:locale][item_metadata_key].present? ? item[:metadata][:locale][item_metadata_key] : nil %>
+
+                <%= content_tag(
+                  :li, item_metadata_value,
+                  class: "gem-c-document-list__attribute",
+                  lang: lang
+                ) do %>
+                  <% if item_metadata_key.to_s.eql?("public_updated_at") %>
+                    <time datetime="<%= item_metadata_value.iso8601 %>">
+                      <%= l(item_metadata_value, format: '%e %B %Y') %>
+                    </time>
+                  <% else %>
+                    <%= item_metadata_value %>
+                  <% end %>
                 <% end %>
-              </li>
+              <% end %>
             <% end %>
           </ul>
         <% end %>

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

@@ -7,7 +7,7 @@
 <% if card_helper.href || card_helper.extra_links.any? %>
   <div class="gem-c-image-card <%= "gem-c-image-card--large" if card_helper.large %> <%= brand_helper.brand_class %>"
     <%= "data-module=track-click" if card_helper.is_tracking? %>
-  >
+    <%= "lang=#{card_helper.lang}" if card_helper.lang %>>
     <%= card_helper.image %>
 
     <div class="gem-c-image-card__text-wrapper">

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>

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

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

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

@@ -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/image_card.yml

@@ -9,6 +9,7 @@ accessibility_criteria: |
 
   - include alt text for images when present
   - not have duplicate links for the image and the text
+  - if the contents of the component are in a different language than the rest of the document, include an appropriate `lang` attribute to correctly identify the language used in the component
 shared_accessibility_criteria:
   - link
 examples:
@@ -191,7 +192,7 @@ examples:
     description: Can be used for links to people pages to indicate payment type
     data:
       href: "/government/people/"
-      image_src: "http://placekitten.com/215/140"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
       image_alt: "some meaningful alt text please"
       context:
         text: "The Rt Hon"
@@ -204,3 +205,14 @@ examples:
         }
       ]
       extra_links_no_indent: true
+  with_lang:
+    description: |
+      Pass through an appropriate `lang` to set a HTML lang attribute for the component.
+      
+      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:
+      href: "/not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      heading_text: Yr hyn rydym ni'n ei wneud
+      lang: cy

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

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