govuk_publishing_components 21.60.2 → 21.63.1

data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills/closest.js

@@ -0,0 +1,23 @@
+// https://plainjs.com/javascript/traversing/get-closest-element-by-selector-39/
+// matches polyfill
+this.Element && function(ElementPrototype) {
+  ElementPrototype.matches = ElementPrototype.matches ||
+  ElementPrototype.matchesSelector ||
+  ElementPrototype.webkitMatchesSelector ||
+  ElementPrototype.msMatchesSelector ||
+  function(selector) {
+    var node = this, nodes = (node.parentNode || node.document).querySelectorAll(selector), i = -1;
+    while (nodes[++i] && nodes[i] != node);
+    return !!nodes[i];
+  }
+}(Element.prototype);
+
+// closest polyfill
+this.Element && function(ElementPrototype) {
+  ElementPrototype.closest = ElementPrototype.closest ||
+  function(selector) {
+    var el = this;
+    while (el.matches && !el.matches(selector)) el = el.parentNode;
+    return el.matches ? el : null;
+  }
+}(Element.prototype);

data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills/indexOf.js

@@ -0,0 +1,9 @@
+// https://gist.github.com/heathcliff/7161329
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(obj, start) {
+    for (var i = (start || 0), j = this.length; i < j; i++) {
+      if (this[i] === obj) { return i }
+    }
+    return -1
+  }
+}

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

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

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

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

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

@@ -21,37 +21,24 @@
   border-color: govuk-colour("white");
 }
 
-.gem-c-breadcrumbs--collapse-on-mobile {
+.govuk-breadcrumbs--collapse-on-mobile {
   @include govuk-media-query($until: tablet) {
-    .govuk-breadcrumbs__list {
-      display: flex;
-    }
-
-    .govuk-breadcrumbs__list-item:not(:last-child):not(:first-child) {
-      display: none;
-    }
-
     .govuk-breadcrumbs__list-item {
       padding-top: 14px;
       padding-bottom: 14px;
     }
 
     .govuk-breadcrumbs__list-item:before {
-      margin: 0;
       top: 18px;
     }
 
-    .govuk-breadcrumbs__link {
-      position: relative;
-    }
-
     .govuk-breadcrumbs__link:after {
       content: "";
       position: absolute;
-      top: -14px;
+      top: 0;
       right: 0;
       left: 0;
-      bottom: -14px;
+      bottom: 0;
     }
   }
 }

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

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

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

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

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

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

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

@@ -9,6 +9,12 @@
   @include govuk-font($size: 24, $weight: bold);
 }
 
-.gem-c-panel__prepend ~ .govuk-panel__title {
+.gem-c-panel__prepend ~ .govuk-panel__title-text {
   margin-bottom: govuk-spacing(3);
 }
+
+.gem-c-panel__append,
+.gem-c-panel__prepend,
+.govuk-panel__title-text {
+  display: block;
+}

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

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

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

@@ -4,3 +4,11 @@
 @import "govuk/settings/all";
 @import "govuk/tools/all";
 @import "govuk/helpers/all";
+$govuk-colours-organisations: map-merge(
+  $govuk-colours-organisations,
+  (
+    "foreign-commonwealth-development-office": (
+      colour: #012169
+    )
+  )
+);

data/app/models/govuk_publishing_components/component_example.rb

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

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

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

data/app/views/govuk_publishing_components/component_guide/example.html.erb

@@ -12,7 +12,10 @@
     <div class="component-markdown">
       <%= raw(@component_example.html_description) %>
     </div>
-    <h2 class="component-doc-h2">How it looks</h2>
+    <h2 class="component-doc-h2">
+      How it looks
+      <small>(<a href="<%= component_preview_path(@component_doc.id, @component_example.id) %>" class="govuk-link">preview</a>)</small>
+    </h2>
     <%= render partial: "govuk_publishing_components/component_guide/component_doc/preview", locals: { component_doc: @component_doc, example: @component_example } %>
 
     <h2 class="component-doc-h2">How to call this example</h2>

data/app/views/govuk_publishing_components/component_guide/show.html.erb

@@ -29,7 +29,9 @@
     </div>
   </div>
 
-  <h2 class="component-doc-h2">How it looks
+  <h2 class="component-doc-h2">
+    <a href="<%= component_example_path(@component_doc.id, "default") %>" class="govuk-link">How it looks</a>
+    <small>(<a href="<%= component_preview_path(@component_doc.id, "default") %>" class="govuk-link">preview</a>)</small>
     <small>(<a href="<%= component_preview_all_path(@component_doc.id) %>" class="govuk-link">preview all</a>)</small>
   </h2>
   <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>

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

@@ -66,7 +66,7 @@
   </div>
 
   <div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="-1">
-    <p class="gem-c-cookie-banner__confirmation-message"><%= confirmation_message %></p>
+    <p class="gem-c-cookie-banner__confirmation-message" role="alert"><%= confirmation_message %></p>
     <button class="gem-c-cookie-banner__hide-button" data-hide-cookie-banner="true" data-module="track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner">Hide</button>
   </div>
 </div>

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/_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">