govuk_publishing_components 21.60.0 → 21.62.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/_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/govspeak.yml

@@ -190,6 +190,51 @@ examples:
             </tr>
           </tbody>
         </table>
+  chart_with_colours:
+    data:
+      block: |
+        <table class="js-barchart-table mc-auto-outdent">
+          <thead>
+            <tr>
+              <th scope="col">Number position</th>
+              <th scope="col">Apples</th>
+              <th scope="col">Oranges</th>
+              <th scope="col">Bananas</th>
+              <th scope="col">Pears</th>
+              <th scope="col">Grapes</th>
+              <th scope="col">Strawberries</th>
+              <th scope="col">Plums</th>
+              <th scope="col">Apricots</th>
+              <th scope="col">Pineapples</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Numbers inside bar</td>
+              <td>16</td>
+              <td>48</td>
+              <td>39</td>
+              <td>50</td>
+              <td>24</td>
+              <td>10</td>
+              <td>62</td>
+              <td>29</td>
+              <td>81</td>
+            </tr>
+            <tr>
+              <td>Numbers outside bar</td>
+              <td>2</td>
+              <td>1</td>
+              <td>2</td>
+              <td>1</td>
+              <td>1</td>
+              <td>3</td>
+              <td>3</td>
+              <td>1</td>
+              <td>2</td>
+            </tr>
+          </tbody>
+        </table>
   address:
     data:
       block: |

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

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

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