govuk_publishing_components 25.6.0 → 27.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b1b20d5bd22562106adb11d4dae477700ae7cf87c10e8113615ddccc43a57eee
-  data.tar.gz: 6c8cbab6a211c1d7192af9128ea910b9394702a7d369e1b48e29d74f541ce4a4
+  metadata.gz: 6ea0bb81f01cfea5a7fbefd1883bc66bbcb8a150d18dbce3a19848c9f86752c7
+  data.tar.gz: b2f8ef623497037c2f169c0455831aa7d2c0126f3ece9b05800486a1c283b2c5
 SHA512:
-  metadata.gz: 298e4ac11183bbd0dc6dd364c9d831143c5b94e92b65e3afccad59269c1515e683834db2e3af528f7c2416c78a644cbd61aba803b66e65335195f8bc1e4dfd76
-  data.tar.gz: 71429d6099fcc7465c2fef3092fb9b586f385c399e1f90a71470a433d91d2f25314ed53e10b543a683cb3c94c7b8bcb44a272c5a3e479faab9a8f581e9405902
+  metadata.gz: 4aef038f59352ee50197fc9a1e35f95d5ff7c56a3f4182341a866301ea39643d94cf3db806d669135299db0b614cc1d8ddfb28aef8fd11a5d067703f717a4213
+  data.tar.gz: 1234faee1167e829e7e887599f9f47d5bf5c8eb1ee7dd228b3afbd058a17e5f67fed95103b1e511ef7ca76b8ebaec9b253a0b3f8706ddbcc4562a990d2b843c0

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

@@ -16,6 +16,7 @@ $govuk-new-link-styles: true;
 @import "components/attachment";
 @import "components/attachment-link";
 @import "components/back-link";
+@import "components/big-number";
 @import "components/breadcrumbs";
 @import "components/button";
 @import "components/character-count";
@@ -27,6 +28,7 @@ $govuk-new-link-styles: true;
 @import "components/copy-to-clipboard";
 @import "components/date-input";
 @import "components/details";
+@import "components/devolved-nations";
 @import "components/document-list";
 @import "components/error-alert";
 @import "components/error-message";

data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss

@@ -0,0 +1,41 @@
+.gem-c-big-number {
+  margin-bottom: govuk-spacing(3);
+}
+
+.gem-c-big-number__value {
+  @include govuk-font($size: 80, $weight: bold);
+}
+
+.gem-c-big-number__label {
+  @include govuk-font($size: 16, $weight: bold, $line-height: 2);
+
+  // This pseudo element is to bypass an issue with NVDA where block level elements are dictated separately.
+  // What's happening here is that the label and the number technically have an inline relationship but appear to have a block relationship thanks to this element
+  &:before {
+    content: "";
+    display: block;
+  }
+}
+
+.gem-c-big-number__link {
+  display: inline-block;
+  text-decoration: none;
+
+  // Add govuk-link hover decoration to main value if no label present but a href attribute is
+  .gem-c-big-number__value--decorated {
+    @include govuk-link-decoration;
+    @include govuk-link-style-no-underline;
+  }
+
+  .gem-c-big-number__label {
+    @include govuk-link-decoration;
+  }
+
+  &:hover,
+  &:active {
+    .gem-c-big-number__label,
+    .gem-c-big-number__value--decorated {
+      @include govuk-link-hover-decoration;
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_devolved-nations.scss

@@ -0,0 +1,10 @@
+.gem-c-devolved-nations {
+  background: govuk-colour("light-grey");
+  margin-bottom: govuk-spacing(3);
+  padding: govuk-spacing(3);
+
+  @include govuk-media-query($from: desktop) {
+    margin-bottom: govuk-spacing(8);
+    padding: govuk-spacing(4) govuk-spacing(6);
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss

@@ -107,6 +107,8 @@
 
 .gem-c-document-list__children {
   margin-bottom: 0;
+  padding-left: 0;
+  list-style-type: none;
 
   @include govuk-media-query($from: desktop) {
     margin-left: govuk-spacing(4);

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -127,6 +127,10 @@
     margin-bottom: govuk-spacing(1);
   }
 
+  .gem-c-image-card__list-item--text {
+    color: govuk-colour("dark-grey", $legacy: "grey-1");
+  }
+
   .gem-c-image-card__list-item-link {
     line-height: 1.35em;
   }

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

@@ -9,6 +9,7 @@
 
 .js-enabled .gem-c-layout-for-public__global-banner-wrapper {
   margin-top: - govuk-spacing(2);
+  min-height: govuk-spacing(2);
   position: relative;
 }
 

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

@@ -1,3 +1,97 @@
+/// Set grid row or column value using the fraction unit.
+///
+/// @param {Integer} $number - number of fractions that the grid row or column
+///   needs to be divided into.
+/// @returns {String} - the value
+///
+/// @example scss - Five fractions will return `1fr 1fr 1fr 1fr 1fr`.
+///  .container {
+///    grid-template-rows: fractions(5);
+///  }
+///
+@function fractions($number) {
+  $fractions: "1fr";
+
+  @for $i from 1 to $number {
+    $fractions: $fractions + " 1fr";
+  }
+
+  @return unquote($fractions);
+}
+
+/// Arrange items into vertical columns
+///
+/// @param {Integer} $items - number of items that need to be arranged
+/// @param {Integer} $columns - number of columns required
+/// @param {String} $selector - (optional) the inner element to be targeted.
+///
+/// @example scss - A 7 item 2 column layout.
+///  .container {
+///    @include columns(7, 2);
+///  }
+
+/// @example scss - A 9 item 3 column layout that has `div`s as the inner
+///   elements.
+///  .container {
+///    @include columns(9, 3, "div");
+///  }
+///
+@mixin columns($items, $columns, $selector: "*") {
+  $rows: ceil($items / $columns);
+
+  display: -ms-grid;
+  display: grid;
+  grid-auto-flow: column;
+  -ms-grid-columns: fractions($columns);
+  grid-template-columns: fractions($columns);
+  -ms-grid-rows: fractions($rows);
+  grid-template-rows: fractions($rows);
+
+  // Internet Explorer 10-11 require each element to be placed in the grid -
+  // the `grid-auto-flow` property isn't supported. This means that both the
+  // column and row needs to be set for every element.
+
+  // This creates a list of lists to represent the columns and rows; for
+  // example, a 7 item 2 column list would create this:
+  //   [
+  //     [1, 2, 3, 4 ] // column one
+  //     [5, 6, 7] // column two
+  //   ]
+  $grid: ();
+  $counter: 0;
+
+  @for $column from 1 through $columns {
+    $this-row: ();
+
+    @for $row from 1 through $rows {
+      $counter: $counter + 1;
+
+      @if $counter <= $items {
+        $this-row: append($this-row, $counter);
+      }
+    }
+
+    $grid: append($grid, $this-row, "comma");
+  }
+
+  // Now we can loop through the list of lists to create the rules needed for
+  // the older grid syntax; fist looping through the list to get the number
+  // needed for the column, then looping again to get the number for the grid
+  // row:
+  @for $column_index from 1 through length($grid) {
+    $this-row: nth($grid, $column_index);
+
+    @for $item-index from 1 through length($this-row) {
+      $this-item: nth($this-row, $item-index);
+
+      & > #{$selector}:nth-child(#{$this-item}) {
+        -ms-grid-column: $column_index;
+        -ms-grid-row: $item-index;
+      }
+    }
+  }
+}
+
 $search-icon-size: 20px;
 
 @mixin chevron($colour) {
@@ -431,6 +525,26 @@ $search-icon-size: 20px;
         content: " ";
       }
     }
+
+    // To avoid the 'sticky hover' problem, we need to stop the hover state on
+    // touch screen devices.
+    //
+    // One solution is to use `@media(hover: hover)`. This turns on the hover
+    // state only for devices that aren't touchscreen, but means that browsers
+    // that don't support this media query won't get a hover state at all.
+    //
+    // To get around this, we do the opposite - we turn off the hover state for
+    // for touchscreen devices.
+    @media (hover: none), (pointer: coarse) {
+      &:not(:focus):hover {
+        background-color: $govuk-link-colour;
+        color: govuk-colour("white");
+
+        &:after {
+          background-color: $govuk-link-colour;
+        }
+      }
+    }
   }
 }
 
@@ -579,8 +693,6 @@ $search-icon-size: 20px;
   padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
 
   @include govuk-media-query($from: "desktop") {
-    display: flex;
-    flex-wrap: wrap;
     margin-left: (0 - govuk-spacing(3));
     margin-right: (0 - govuk-spacing(3));
     padding: govuk-spacing(6) 0 govuk-spacing(8) 0;
@@ -590,11 +702,23 @@ $search-icon-size: 20px;
       margin-bottom: 0;
       padding-left: govuk-spacing(3);
       padding-right: govuk-spacing(3);
-      width: 50%;
     }
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-second-items--topics {
+  @include govuk-media-query($from: "desktop") {
+    @include columns(18, 2, "li");
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
+  @include govuk-media-query($from: "desktop") {
+    @include columns(5, 2, "li");
+    padding-bottom: govuk-spacing(3);
+  }
+}
+
 .gem-c-layout-super-navigation-header__navigation-second-item-link {
   display: inline-block;
   padding: govuk-spacing(2) 0;
@@ -608,8 +732,8 @@ $search-icon-size: 20px;
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
   @include govuk-font($size: 19, $weight: bold);
+  margin-top: govuk-spacing(2);
   margin-bottom: 0;
-  padding-bottom: govuk-spacing(1);
 }
 
 // Dropdown menu footer links.

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss

@@ -17,6 +17,7 @@
     clear: both;
     overflow: hidden;
     padding: govuk-spacing(2) 0 0;
+    margin: 0;
 
     img {
       display: inline;

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

@@ -0,0 +1,35 @@
+<%
+  href ||= nil
+  number ||= nil
+  label ||= nil
+  href ||= nil
+  data_attributes ||= nil
+  classes = ["gem-c-big-number__value"]
+  
+  if label.nil? && href
+    classes << "gem-c-big-number__value--decorated"
+  end
+%>
+<% if number %>
+  <% big_number_value = capture do %>
+    <%= tag.span class: classes do %>
+      <%= number %>
+    <% end %>
+
+    <% unless label.nil? %>
+      <% # add a virtual space here to handle screen readers printing dictations without a space between the number and the label %>
+      <span class="govuk-visually-hidden">&nbsp;</span>
+      <span class="gem-c-big-number__label">
+        <%= label %>
+      </span>
+    <% end %>
+  <% end %>
+  
+  <%= tag.div class: "gem-c-big-number" do %>
+    <% unless href.nil? %>
+      <%= link_to big_number_value, href, class: "govuk-link gem-c-big-number__link", data: data_attributes %>
+    <% else %>
+      <%= big_number_value %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,23 @@
+<%
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  devolved_nations_helper = GovukPublishingComponents::Presenters::DevolvedNationsHelper.new(local_assigns)
+
+  applies_to ||= t('components.devolved_nations.applies_to')
+  heading_level ||= 2
+%>
+
+<% if national_applicability.any? { |k,v| v[:applicable] == true } %>
+  <%= tag.section class: "gem-c-devolved-nations" do %>
+    <%= content_tag(shared_helper.get_heading_level, class: "govuk-heading-s govuk-!-margin-bottom-0") do %>
+      <%= applies_to %> <%= devolved_nations_helper.applicable_nations_title_text %>
+    <% end %>
+
+    <% if devolved_nations_helper.nations_with_urls.any? %>
+      <%= content_tag :ul, class: "govuk-list govuk-!-margin-top-1 govuk-!-margin-bottom-0" do -%>
+        <% devolved_nations_helper.nations_with_urls.each do |k, v| %>
+          <%= content_tag(:li, link_to("Guidance for #{t("components.devolved_nations.#{k}")}", v[:alternative_url], class: "govuk-link")) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -92,7 +92,7 @@
         <% end %>
 
         <% if item[:parts] && item[:parts].any? %>
-          <ul class="gem-c-document-list__children govuk-list">
+          <ul class="gem-c-document-list__children">
             <% item[:parts].each do |part| %>
               <li class="gem-c-document-list-child">
                 <%=

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

@@ -23,7 +23,7 @@
   extra_link_classes << brand_helper.color_class
 
 %>
-<% if card_helper.href || card_helper.extra_links.any? %>
+<% if card_helper.href || card_helper.extra_details.any? %>
   <div class="<%= classes %> <%= brand_helper.brand_class %>"
     <%= "data-module=gem-track-click" if card_helper.is_tracking? %>
     <%= "lang=#{card_helper.lang}" if card_helper.lang %>>
@@ -44,15 +44,19 @@
         <%= card_helper.context %>
       </div>
       <%= card_helper.description %>
-      <% if card_helper.extra_links.any? %>
-        <ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_links_no_indent %>">
-          <% card_helper.extra_links.each do |link| %>
-            <li class="gem-c-image-card__list-item">
-              <%= link_to link[:text], link[:href],
-                class: extra_link_classes,
-                data: link[:data_attributes]
-              %>
-            </li>
+      <% if card_helper.extra_details.any? %>
+        <ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_details_no_indent %>">
+          <% card_helper.extra_details.each do |link| %>
+            <li class="gem-c-image-card__list-item <%= "gem-c-image-card__list-item--text" if not link[:href].present? %>">
+              <% if link[:href].present? %>
+                <%= link_to link[:text], link[:href],
+                  class: extra_link_classes,
+                  data: link[:data_attributes]
+                %>
+              <% else %>
+                <%= link[:text] %>
+              <% end %>  
+            </li>    
           <% end %>
         </ul>
       <% end %>

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

@@ -44,8 +44,8 @@
   body_css_classes << "draft" if draft_watermark
 -%>
 <!DOCTYPE html>
-  <!--[if lt IE 9]><html class="lte-ie8" lang="<%= html_lang %>"><![endif]-->
-  <!--[if gt IE 8]><!--><html lang="<%= html_lang %>"><!--<![endif]-->
+  <!--[if lt IE 9]><html class="lte-ie8 govuk-template" lang="<%= html_lang %>"><![endif]-->
+  <!--[if gt IE 8]><!--><html class="govuk-template" lang="<%= html_lang %>"><!--<![endif]-->
   <head>
     <meta charset="utf-8" />
     <title><%= title %></title>

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

@@ -134,7 +134,7 @@ show_navigation_menu_text = t("components.layout_super_navigation_header.menu_to
                     </div>
                     <% if link[:menu_contents].present? %>
                       <div class="govuk-grid-column-two-thirds-from-desktop">
-                          <ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items">
+                          <ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= link[:label].parameterize %>">
                             <% link[:menu_contents].each do | item | %>
                               <%
                                 has_description = item[:description].present?

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

@@ -0,0 +1,50 @@
+name: Big number
+description: A big number, with a label if needed, for visualising quantitative values such as the number of government departments or historical prime ministers.
+body: |
+  This component requires at least a non-falsey `number` attribute value passed to it, otherwise it will not render.
+accessibility_criteria: |
+  This component must:
+
+  - communicate number value and label (if present) in a single dictation when read with a screen reader
+  - convey the meaning of the number shown
+shared_accessibility_criteria:
+- link
+examples:
+  default:
+    data:
+      number: 119
+  with_labels:
+    description: Labels for numbers are given inline styling but stacked using pseudo elements with display block. This is to bypass an issue with NVDA where block level elements are dictated separately.
+    data:
+      number: 119
+      label: Open consultations
+  passing_extra_symbols:
+    description: "In some cases, we want to communicate more than just the flat numeric value eg: 400+, 90%, -20, 1M etc. This is why we allow values to be passed as flat strings."
+    data:
+      number: "400+"
+      label: Other agencies and public bodies
+  with_link:
+    data:
+      number: 23
+      label: Ministerial departments
+      href: "/government/organisations#ministerial_departments"
+  with_link_but_no_label:
+    description: Numbers that are links are underlined unless a label is provided, in which case the label is given the underline.
+    data:
+      number: 23
+      href: "/government/organisations#ministerial_departments"
+  with_data_attributes:
+    description: |
+      These data attributes will only be present if a `href` attribute is present.
+      
+      This will also not automatically apply a `gem-track-click` module attribute if the data attributes pertain to click tracking. Remember to apply this outside the component call in a surrounding element, if using.
+    data:
+      number: 23
+      label: Ministerial departments
+      href: "/government/organisations#ministerial_departments"
+      data_attributes:
+        track-category: homepageClicked
+        track-action: departmentsLink
+        track-label: "/government/organisations#ministerial_departments"
+        track-dimension: 23 Ministerial departments
+        track-dimension-index: 29

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

@@ -0,0 +1,81 @@
+name: Devolved Nations (experimental)
+description: A banner for linking to guidance for other nations.
+body: |
+  The component replaces uses of the important metadata component for guidance for other nations.
+
+  The component can display:
+
+  * nations that the guidance relates to
+  * a list of alternative URLs where applicable
+shared_accessibility_criteria:
+  - link
+accessibility_criteria: |
+  The component must:
+
+  - Provide context for link text to highlight guidance is available.
+examples:
+  default:
+    data:
+      national_applicability:
+        england:
+          applicable: true
+  applies_to_two_nations:  
+    data:
+      national_applicability:
+        england:
+          applicable: true
+        wales:
+          applicable: true
+  applies_to_three_nations:  
+    data:
+      national_applicability:
+        england:
+          applicable: true
+        scotland:
+          applicable: true
+        wales:
+          applicable: true
+  applies_to_one_nation_individual_guidance_available:
+    data:
+      national_applicability:
+        england:
+          applicable: true
+        scotland:
+          applicable: false
+          alternative_url: /
+        wales:
+          applicable: false
+          alternative_url: /
+  applies_to_one_nation_individual_guidance_available:
+    data:
+      national_applicability:
+        england:
+          applicable: true
+        northern_ireland:
+          applicable: false
+          alternative_url: /
+        scotland:
+          applicable: false
+          alternative_url: /
+        wales:
+          applicable: false
+          alternative_url: /
+  applies_to_three_nations_individual_guidance_available:
+    data:
+      national_applicability:
+        england:
+          applicable: true
+        northern_ireland:
+          applicable: false
+          alternative_url: /
+        scotland:
+          applicable: true
+        wales:
+          applicable: true
+  specific_heading level:
+    description: Use a different heading level for the main link title. Defaults to H2 if not passed.
+    data:
+      heading_level: 3
+      national_applicability:
+        england:
+          applicable: true

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

@@ -824,3 +824,14 @@ examples:
           <a role="button" class="gem-c-button govuk-button" href="https://gov.uk/random">Button</a>
           <a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://gov.uk/random"> Start button <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a>
         </p>
+  image:
+    data:
+      block: |
+        <figure class="image embedded">
+          <div class="img">
+            <img src="https://assets.publishing.service.gov.uk/government/uploads/system/uploads/image_data/file/40160/Picture2.jpg" alt="Open water with only mangrove stumps showing above the water. Credit: Blue Ventures-Garth Cripps">
+          </div>
+          <figcaption>
+            <p>Deforested area. Credit: Blue Ventures-Garth Cripps</p>
+          </figcaption>
+        </figure>

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

@@ -66,14 +66,14 @@ examples:
         text: "Press release"
       heading_text: "Government does things"
       description: "Following a thorough review of existing procedure, a government body has today announced that further work is necessary."
-  with_extra_links:
+  with_extra_details:
     data:
       href: "/a-page-no-just-kidding"
       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: "Some more links"
       description: "Greater transparency across government is at the heart of our commitment to let you hold politicians and public bodies to account."
-      extra_links: [
+      extra_details: [
         {
           text: "Single departmental plans",
           href: "/1"
@@ -87,7 +87,7 @@ examples:
           href: "/3"
         },
       ]
-  extra_links_without_indent:
+  extra_details_without_indent:
     description: Don't indent the extra links. Used for links to people pages.
     data:
       href: "/government/people/"
@@ -96,20 +96,36 @@ examples:
       context:
         text: "The Rt Hon"
       heading_text: "John Whiskers MP"
-      extra_links: [
+      extra_details: [
         {
           text: "Minister for Cats",
           href: "/government/ministers/"
         }
       ]
-      extra_links_no_indent: true
-  extra_links_with_no_main_link:
+      extra_details_no_indent: true
+  extra_details_with_no_links:
+    description: If `extra_details` are passed to the component without `href` attributes, they are displayed as a simple text list.
+    data:
+      href: "/government/people/"
+      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: "John Whiskers MP"
+      extra_details: [
+        {
+          text: "Conservative 2010 to 2016",
+        },
+        {
+          text: "Labour 2007 to 2010",
+        }
+      ]
+      extra_details_no_indent: true
+  extra_details_with_no_main_link:
     description: If extra links are included, the main link is not needed. Note that in this configuration the image is not a link as no link has been supplied.
     data:
       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: "John Whiskers MP"
-      extra_links: [
+      extra_details: [
         {
           text: "Minister for Cats",
           href: "/government/ministers/"
@@ -129,7 +145,7 @@ examples:
       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"
       description: Here are some links to more information about the thing you are reading about.
-      extra_links: [
+      extra_details: [
         {
           text: "More information",
           href: "/1"
@@ -158,7 +174,7 @@ examples:
       image_alt: "some meaningful alt text please"
       heading_text: "Something relating to this"
       description: "Public reform committee consultation vote department interior minister referendum."
-      extra_links: [
+      extra_details: [
         {
           text: "Something",
           href: "/1"
@@ -194,7 +210,7 @@ examples:
       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: "A link with tracking"
-      extra_links: [
+      extra_details: [
         {
           text: "Another link with tracking",
           href: "/1",
@@ -219,13 +235,13 @@ examples:
         text: "The Rt Hon"
       heading_text: "John Whiskers MP"
       metadata: "Unpaid"
-      extra_links: [
+      extra_details: [
         {
           text: "Minister for Cats",
           href: "/government/ministers/"
         }
       ]
-      extra_links_no_indent: true
+      extra_details_no_indent: true
   with_lang:
     description: |
       Pass through an appropriate `lang` to set a HTML lang attribute for the component.

data/app/views/govuk_publishing_components/components/layout_for_public/_account-feedback-footer.html.erb

@@ -9,7 +9,7 @@
 
     <p class="govuk-body govuk-!-margin-bottom-0">
       <%= t("components.layout_for_public.account_layout.feedback.banners.footer_intro") %>
-      <a href="<%= "#{Plek.find('account-manager')}/feedback" %>" class="govuk-link">
+      <a href="<%= GovukPersonalisation::Urls.feedback %>" class="govuk-link">
         <%= t("components.layout_for_public.account_layout.feedback.banners.footer_link") %>
       </a>
       <%= t("components.layout_for_public.account_layout.feedback.banners.footer_outro") %>

data/app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb

@@ -1,7 +1,7 @@
 <div class="govuk-width-container">
   <% message = capture do %>
     <%= t("components.layout_for_public.account_layout.feedback.banners.phase_intro") %>
-    <a class="govuk-link" href=<%= "#{Plek.find('account-manager')}/feedback" %>>
+    <a class="govuk-link" href=<%= GovukPersonalisation::Urls.feedback %>>
       <%= t("components.layout_for_public.account_layout.feedback.banners.phase_link") %>
     </a>
     <%= t("components.layout_for_public.account_layout.feedback.banners.phase_outro") %>

data/app/views/govuk_publishing_components/components/layout_for_public/_account-navigation.html.erb

@@ -5,7 +5,7 @@
     <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "your-account" %>">
       <%= link_to(
         t("components.layout_for_public.account_layout.navigation.menu_bar.account.link_text"),
-        "#{Plek.find('account-manager')}",
+        GovukPersonalisation::Urls.your_account,
         class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
         'aria-current': page_is == "your-account" ? "page" : nil,
       ) %>
@@ -13,7 +13,7 @@
     <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "manage" %>">
       <%= link_to(
         t("components.layout_for_public.account_layout.navigation.menu_bar.manage.link_text"),
-        "#{Plek.find('account-manager')}/account/manage",
+        GovukPersonalisation::Urls.manage,
         class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
         'aria-current': page_is == "manage" ? "page" : nil,
       ) %>
@@ -21,7 +21,7 @@
     <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "security" %>">
       <%= link_to(
         t("components.layout_for_public.account_layout.navigation.menu_bar.security.link_text"),
-        "#{Plek.find('account-manager')}/account/security",
+        GovukPersonalisation::Urls.security,
         class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
         'aria-current': page_is == "security" ? "page" : nil,
       ) %>

data/config/locales/en.yml

@@ -46,6 +46,12 @@ en:
       - We’d like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.
       - We also use cookies set by other sites to help us deliver content from their services.
       title: Cookies on GOV.UK
+    devolved_nations:
+      applies_to: Applies to
+      england: England
+      northern_ireland: Northern Ireland
+      scotland: Scotland
+      wales: Wales
     feedback:
       close: Close
       dont_include_personal_info: Don’t include personal or financial information like your National Insurance number or credit card details.
@@ -118,7 +124,8 @@ en:
       - label: Topics
         href: "/browse"
         description: Find information and services
-        menu_contents:
+        menu_contents: # If adding or removing items, remember to update the
+                       # `columns` in the layout-super-navigation-header SCSS.
         - label: Benefits
           href: "/browse/benefits"
         - label: Births, death, marriages and care
@@ -160,7 +167,8 @@ en:
       - label: Government activity
         href: "/search/news-and-communications"
         description: Find out what the government is doing
-        menu_contents:
+        menu_contents: # If adding or removing items, remember to update the
+                       # `columns` in the layout-super-navigation-header SCSS.
         - label: News
           href: "/search/news-and-communications"
           description: News stories, speeches, letters and notices

data/lib/govuk_publishing_components/presenters/devolved_nations_helper.rb

@@ -0,0 +1,27 @@
+module GovukPublishingComponents
+  module Presenters
+    class DevolvedNationsHelper
+      attr_reader :national_applicability
+
+      def initialize(local_assigns)
+        @national_applicability = local_assigns[:national_applicability]
+      end
+
+      def applicable_nations_title_text
+        @national_applicability
+          .select { |_, v| v[:applicable] == true }
+          .map { |k, _| I18n.t("components.devolved_nations.#{k}") }
+          .sort
+          .to_sentence(last_word_connector: " and ")
+      end
+
+      def nations_with_urls
+        @national_applicability
+          .select do |_, v|
+            v[:alternative_url]
+            .present?
+          end
+      end
+    end
+  end
+end

data/lib/govuk_publishing_components/presenters/image_card_helper.rb

@@ -4,12 +4,12 @@ module GovukPublishingComponents
       include ActionView::Helpers
       include ActionView::Context
 
-      attr_reader :href, :href_data_attributes, :extra_links, :large, :extra_links_no_indent, :heading_text, :metadata, :lang, :image_loading
+      attr_reader :href, :href_data_attributes, :extra_details, :large, :extra_details_no_indent, :heading_text, :metadata, :lang, :image_loading
 
       def initialize(local_assigns)
         @href = local_assigns[:href]
         @href_data_attributes = local_assigns[:href_data_attributes]
-        @extra_links = local_assigns[:extra_links] || []
+        @extra_details = local_assigns[:extra_details] || []
         @image_src = local_assigns[:image_src]
         @image_alt = local_assigns[:image_alt] || ""
         @image_loading = local_assigns[:image_loading] || "auto"
@@ -17,7 +17,7 @@ module GovukPublishingComponents
         @description = local_assigns[:description]
         @large = local_assigns[:large]
         @heading_text = local_assigns[:heading_text]
-        @extra_links_no_indent = local_assigns[:extra_links_no_indent]
+        @extra_details_no_indent = local_assigns[:extra_details_no_indent]
         @metadata = local_assigns[:metadata]
         @lang = local_assigns[:lang]
       end
@@ -25,8 +25,8 @@ module GovukPublishingComponents
       def is_tracking?
         return true if @href_data_attributes
 
-        if @extra_links
-          @extra_links.each do |link|
+        if @extra_details
+          @extra_details.each do |link|
             return true if link[:data_attributes]
           end
         end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "25.6.0".freeze
+  VERSION = "27.1.0".freeze
 end

data/lib/govuk_publishing_components.rb

@@ -1,6 +1,7 @@
 require "active_support"
 require "action_controller"
 require "action_view"
+require "govuk_personalisation"
 require "govuk_publishing_components/config"
 require "govuk_publishing_components/engine"
 require "govuk_publishing_components/presenters/shared_helper"
@@ -10,6 +11,7 @@ require "govuk_publishing_components/presenters/breadcrumb_selector"
 require "govuk_publishing_components/presenters/brexit_cta_helper"
 require "govuk_publishing_components/presenters/button_helper"
 require "govuk_publishing_components/presenters/contextual_navigation"
+require "govuk_publishing_components/presenters/devolved_nations_helper"
 require "govuk_publishing_components/presenters/related_navigation_helper"
 require "govuk_publishing_components/presenters/step_by_step_nav_helper"
 require "govuk_publishing_components/presenters/page_with_step_by_step_navigation"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 25.6.0
+  version: 27.1.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-08-24 00:00:00.000000000 Z
+date: 2021-09-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -24,6 +24,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: govuk_personalisation
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.7.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.7.0
 - !ruby/object:Gem::Dependency
   name: kramdown
   requirement: !ruby/object:Gem::Requirement
@@ -58,14 +72,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.0.0.1
+        version: '6'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.0.0.1
+        version: '6'
 - !ruby/object:Gem::Dependency
   name: rouge
   requirement: !ruby/object:Gem::Requirement
@@ -522,6 +536,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_attachment-link.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_button.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_character-count.scss
@@ -533,6 +548,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_copy-to-clipboard.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_date-input.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_details.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_devolved-nations.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_error-message.scss
@@ -657,6 +673,7 @@ files:
 - app/views/govuk_publishing_components/components/_attachment.html.erb
 - app/views/govuk_publishing_components/components/_attachment_link.html.erb
 - app/views/govuk_publishing_components/components/_back_link.html.erb
+- app/views/govuk_publishing_components/components/_big_number.html.erb
 - app/views/govuk_publishing_components/components/_breadcrumbs.html.erb
 - app/views/govuk_publishing_components/components/_button.html.erb
 - app/views/govuk_publishing_components/components/_character_count.html.erb
@@ -670,6 +687,7 @@ files:
 - app/views/govuk_publishing_components/components/_copy_to_clipboard.html.erb
 - app/views/govuk_publishing_components/components/_date_input.html.erb
 - app/views/govuk_publishing_components/components/_details.html.erb
+- app/views/govuk_publishing_components/components/_devolved_nations.html.erb
 - app/views/govuk_publishing_components/components/_document_list.html.erb
 - app/views/govuk_publishing_components/components/_error_alert.html.erb
 - app/views/govuk_publishing_components/components/_error_message.html.erb
@@ -738,6 +756,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/attachment.yml
 - app/views/govuk_publishing_components/components/docs/attachment_link.yml
 - app/views/govuk_publishing_components/components/docs/back_link.yml
+- app/views/govuk_publishing_components/components/docs/big_number.yml
 - app/views/govuk_publishing_components/components/docs/breadcrumbs.yml
 - app/views/govuk_publishing_components/components/docs/button.yml
 - app/views/govuk_publishing_components/components/docs/character_count.yml
@@ -751,6 +770,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/copy_to_clipboard.yml
 - app/views/govuk_publishing_components/components/docs/date_input.yml
 - app/views/govuk_publishing_components/components/docs/details.yml
+- app/views/govuk_publishing_components/components/docs/devolved_nations.yml
 - app/views/govuk_publishing_components/components/docs/document_list.yml
 - app/views/govuk_publishing_components/components/docs/error_alert.yml
 - app/views/govuk_publishing_components/components/docs/error_message.yml
@@ -915,6 +935,7 @@ files:
 - lib/govuk_publishing_components/presenters/contents_list_helper.rb
 - lib/govuk_publishing_components/presenters/contextual_navigation.rb
 - lib/govuk_publishing_components/presenters/curated_taxonomy_sidebar_links.rb
+- lib/govuk_publishing_components/presenters/devolved_nations_helper.rb
 - lib/govuk_publishing_components/presenters/heading_helper.rb
 - lib/govuk_publishing_components/presenters/highlight_boxes_helper.rb
 - lib/govuk_publishing_components/presenters/image_card_helper.rb