govuk_publishing_components 11.2.0 → 12.0.0

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss

@@ -1,17 +1,21 @@
-@import "colours/organisation";
-
-// this uses the colours from govuk_frontend_toolkit
-// https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/colours/_organisation.scss
+@import "govuk-frontend/settings/colours-organisations";
+@import "govuk-frontend/helpers/colour";
 
 @mixin organisation-brand-colour() {
-  @each $organisation in $all-organisation-brand-colours {
-    .brand--#{nth($organisation, 1)} {
+  @each $organisation in map-keys($govuk-colours-organisations) {
+    .brand--#{$organisation} {
       .brand__color {
-        color: nth($organisation, 3);
+        color: govuk-organisation-colour($organisation);
+
+        &:link,
+        &:visited,
+        &:active {
+          color: govuk-organisation-colour($organisation);
+        }
 
         &:hover,
         &:focus {
-          color: darken( nth($organisation, 3), 10% );
+          color: darken( govuk-organisation-colour($organisation), 10% );
         }
       }
 
@@ -19,7 +23,7 @@
       // element as required by the heading component, adds 2KB to the CSS
       &.brand__border-color,
       .brand__border-color {
-        border-color: nth($organisation, 2);
+        border-color: govuk-organisation-colour($organisation, $websafe: false);
       }
     }
   }
@@ -27,22 +31,52 @@
 
 @include organisation-brand-colour;
 
+// in the past we used the-office-of-the-leader-of-the-house-of-commons before
+// the "the" prefix was dropped, this is maintained here for backwards
+// compatibility
+.brand--the-office-of-the-leader-of-the-house-of-commons {
+  .brand__color {
+    color: govuk-organisation-colour("office-of-the-leader-of-the-house-of-commons");
+
+    &:link,
+    &:visited,
+    &:active {
+      color: govuk-organisation-colour("office-of-the-leader-of-the-house-of-commons");
+    }
+
+    &:hover,
+    &:focus {
+      color: darken( govuk-organisation-colour("office-of-the-leader-of-the-house-of-commons"), 10% );
+    }
+  }
+
+  &.brand__border-color,
+  .brand__border-color {
+    border-color: govuk-organisation-colour("office-of-the-leader-of-the-house-of-commons", $websafe: false);
+  }
+}
 // colours for the prime ministers office are not included in the toolkit
 // so are written out here for our use
 
 .brand--prime-ministers-office-10-downing-street {
   .brand__color {
-    color: $fuschia;
+    color: govuk-colour("bright-purple");
+
+    &:link,
+    &:visited,
+    &:active {
+      color: govuk-colour("bright-purple");
+    }
 
     &:hover,
     &:focus {
-      color: darken( $fuschia, 10% );
+      color: darken( govuk-colour("bright-purple"), 10% );
     }
   }
 
   &.brand__border-color,
   .brand__border-color {
-    border-color: $black;
+    border-color: govuk-colour("black");
   }
 }
 
@@ -53,6 +87,6 @@
 .brand--civil-service {
   &.brand__border-color,
   .brand__border-color {
-    border-color: $black;
+    border-color: govuk-colour("black");
   }
 }

data/app/controllers/govuk_publishing_components/application_controller.rb

@@ -1,19 +1,18 @@
 module GovukPublishingComponents
   class ApplicationController < ActionController::Base
     helper ::Rails.application.helpers
-    include Slimmer::Headers
     protect_from_forgery with: :exception
-    before_action :set_custom_slimmer_headers
     before_action :set_x_frame_options_header
+    before_action :set_disable_slimmer_header
 
   private
 
-    def set_custom_slimmer_headers
-      set_slimmer_headers(remove_search: true)
-    end
-
     def set_x_frame_options_header
       response.headers["X-Frame-Options"] = "ALLOWALL"
     end
+
+    def set_disable_slimmer_header
+      response.headers["X-Slimmer-Skip"] = "true"
+    end
   end
 end

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

@@ -15,7 +15,7 @@
 <ul class="component-list">
   <% @component_docs.each do |component_doc| %>
     <li>
-      <%= link_to component_doc.name, component_doc_path(component_doc.id) %>
+      <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
       <p>
         <%= component_doc.description %>
       </p>
@@ -28,7 +28,7 @@
 <ul class="component-list">
   <% @gem_component_docs.each do |component_doc| %>
     <li>
-      <%= link_to component_doc.name, component_doc_path(component_doc.id) %>
+      <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
       <p>
         <%= component_doc.description %>
       </p>

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

@@ -8,12 +8,12 @@
 <% end %>
 
 <div class="component-show">
-  <div class="grid-row">
-    <div class="column-two-thirds">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
       <% if !@component_doc.accessibility_criteria.present? %>
         <div class="component-violation">
           <h2 class="component-violation__title">This component is not valid</h2>
-          <p><a class="component-violation__link" href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/accessibility_acceptance_criteria.md">Please define accessibility acceptance criteria for this component.</a></p>
+          <a class="component-violation__link" href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/accessibility_acceptance_criteria.md">Please define accessibility acceptance criteria for this component.</a>
         </div>
       <% end %>
       <%= render 'govuk_publishing_components/components/lead_paragraph', text: @component_doc.description %>
@@ -28,7 +28,7 @@
   <div class="component-doc">
     <h2 class="component-doc-h2">How to call this component</h2>
     <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: @component_doc.example %>
-    <%= link_to "Search for usage on GitHub", @component_doc.github_search_url %>
+    <%= link_to "Search for usage on GitHub", @component_doc.github_search_url, class: "govuk-link" %>
     <h2 class="component-doc-h2">How it looks</h2>
   </div>
 
@@ -48,8 +48,8 @@
   <% end %>
 
   <% if @component_doc.accessibility_criteria.present? %>
-    <div class="grid-row component-accessibility-criteria">
-      <div class="column-two-thirds">
+    <div class="govuk-grid-row component-accessibility-criteria">
+      <div class="govuk-grid-column-two-thirds">
         <h2 class="component-doc-h2">Accessibility acceptance criteria</h2>
         <%= render 'govuk_publishing_components/components/govspeak', content: raw(@component_doc.html_accessibility_criteria) %>
       </div>
@@ -59,13 +59,13 @@
   <% if @component_doc.other_examples.any? %>
     <div class="examples">
       <h2 class="component-doc-h2">Other examples
-        <small>(<a href="<%= component_preview_all_path(@component_doc.id) %>">preview all</a>)</small>
+        <small>(<a href="<%= component_preview_all_path(@component_doc.id) %>" class="govuk-link">preview all</a>)</small>
       </h2>
       <% @component_doc.other_examples.each do |example| %>
         <div class="component-example">
           <h3 class="example-title">
-            <a href="<%= component_example_path(@component_doc.id, example.id) %>"><%= example.name %></a>
-            <small>(<a href="<%= component_preview_path(@component_doc.id, example.id) %>">preview</a>)</small>
+            <a href="<%= component_example_path(@component_doc.id, example.id) %>" class="govuk-link"><%= example.name %></a>
+            <small>(<a href="<%= component_preview_path(@component_doc.id, example.id) %>" class="govuk-link">preview</a>)</small>
           </h3>
           <%= render "govuk_publishing_components/components/govspeak", content: raw(example.html_description) %>
           <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: example %>

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

@@ -18,7 +18,7 @@
       is_link = crumb[:url].present? || crumb[:is_current_page]
       path = crumb[:is_current_page] ? '#content' : crumb[:url]
       aria_current = crumb[:is_current_page] ? 'page' : 'false'
-      css_class = invert_class.concat(crumb[:is_current_page] ? ' gem-c-breadcrumbs--current ' : '')
+      css_class = "gem-c-breadcrumbs__link " + invert_class.concat(crumb[:is_current_page] ? ' gem-c-breadcrumbs--current ' : '')
     %>
 
     <li class='gem-c-breadcrumbs__item <%= "gem-c-breadcrumbs--parent" if crumb[:is_page_parent] %>'>

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

@@ -9,7 +9,7 @@
 
 <div class="gem-c-feedback <%= margin_top_class %>" data-module="feedback">
   <div class="gem-c-feedback__prompt gem-c-feedback__js-show js-prompt" tabindex="-1">
-    <div class="js-prompt-questions">
+    <div class="gem-c-feedback__js-prompt-questions js-prompt-questions">
       <h2 class="gem-c-feedback__prompt-question">Is this page useful?</h2>
 
       <%= link_to contact_govuk_path, {
@@ -140,7 +140,7 @@
         <%= render "govuk_publishing_components/components/button", {
           text: "Send me the survey"
         } %>
-        <a href="https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=<%= stripped_url -%>&amp;gcl=1627485790.1515403243" class="gem-c-feedback__email-link" id="take-survey" target="_blank" rel="noopener noreferrer">Don’t have an email address?</a>
+        <a href="https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=<%= stripped_url -%>&amp;gcl=1627485790.1515403243" class="gem-c-feedback__email-link govuk-link" id="take-survey" target="_blank" rel="noopener noreferrer">Don’t have an email address?</a>
       </div>
     </div>
   </form>

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

@@ -33,7 +33,7 @@
           <% card_helper.extra_links.each do |link| %>
             <li class="gem-c-image-card__list-item">
               <%= link_to link[:text], link[:href],
-                class: brand_helper.color_class,
+                class: "gem-c-image-card__list-item-link #{brand_helper.color_class}",
                 data: link[:data_attributes]
               %>
             </li>

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

@@ -1,18 +1,15 @@
+<% product_name ||= "Publishing" %>
+
 <!DOCTYPE html>
 <html lang="en" class="govuk-template">
   <head>
     <meta charset="utf-8" />
-    <title><%= browser_title %></title>
+    <title><%= browser_title %> — GOV.UK <%= product_name %></title>
     <meta name="robots" content="noindex,nofollow,noimageindex">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <%= csrf_meta_tags %>
     <%= favicon_link_tag "govuk_publishing_components/favicon-#{environment}.png" %>
-    <!--[if !IE 8]><!-->
-      <%= stylesheet_link_tag "govuk_publishing_components/admin_styles" %>
-    <!--<![endif]-->
-    <!--[if IE 8]>
-      <%= stylesheet_link_tag "govuk_publishing_components/admin_styles_ie8" %>
-    <![endif]-->
+    <%= stylesheet_link_tag "govuk_publishing_components/admin_styles" %>
     <%= javascript_include_tag "govuk_publishing_components/vendor/modernizr" %>
     <%= yield :head %>
   </head>

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

@@ -1,7 +1,7 @@
 <% if defined?(title) %>
   <%
     description_text ||= false
-    description_govspeak ||= yield || false
+    description_govspeak ||= yield || ""
     margin_bottom_class = " gem-c-notice--bottom-margin" unless local_assigns[:margin_bottom]
   %>
   <section class="gem-c-notice<%= margin_bottom_class %>" aria-label="Notice" role="region">
@@ -15,7 +15,7 @@
       <p class="gem-c-notice__description"><%= description_text %></p>
     <% end %>
 
-    <% if description_govspeak %>
+    <% unless description_govspeak.empty? %>
       <%= render 'govuk_publishing_components/components/govspeak', content: description_govspeak %>
     <% end %>
   </section>

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

@@ -25,7 +25,7 @@
             </span>
           </span>
           <% if previous_page[:label].present? %>
-            <span class="visually-hidden">:</span>
+            <span class="gem-c-pagination__link-divider visually-hidden">:</span>
             <span class="gem-c-pagination__link-label"><%= previous_page[:label] %></span>
           <% end %>
         </a>
@@ -51,7 +51,7 @@
             </span>
           </span>
           <% if next_page[:label].present? %>
-            <span class="visually-hidden">:</span>
+            <span class="gem-c-pagination__link-divider visually-hidden">:</span>
             <span class="gem-c-pagination__link-label"><%= next_page[:label] %></span>
           <% end %>
         </a>

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

@@ -36,7 +36,7 @@
     } do %>
     <% items.each_with_index do |item, index| %>
       <% if item === :or %>
-        <div class="govuk-radios__divider">
+        <div class="gem-c-radios__divider govuk-radios__divider">
           <%= t('components.radio.or') %>
         </div>
       <% else %>

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

@@ -56,7 +56,7 @@
                       <%= logic %>
                     <% else %>
                       <% step_number += 1 %>
-                      <span class="visuallyhidden">Step</span> <%= step_number %><span class="visuallyhidden" aria-hidden="true">:</span>
+                      <span class="gem-c-step-nav__circle-step-label visuallyhidden">Step</span> <%= step_number %><span class="gem-c-step-nav__circle-step-colon visuallyhidden" aria-hidden="true">:</span>
                     <% end %>
                   </span>
                 </span>

data/app/views/govuk_publishing_components/components/_subscription-links.html.erb

@@ -8,7 +8,7 @@
     class="gem-c-subscription-links <%= brand_helper.brand_class %>"
     <%= "data-module=gem-toggle" if sl_helper.feed_link_box_value %>
   >
-    <h2 class="visuallyhidden"><%= t("govuk_component.subscription_links.subscriptions", default: "Subscriptions") %></h2>
+    <h2 class="gem-c-subscription-links__hidden-header visuallyhidden"><%= t("govuk_component.subscription_links.subscriptions", default: "Subscriptions") %></h2>
     <ul
       class="gem-c-subscription-links__list"
       <%= "data-module=track-click" if sl_helper.tracking_is_present? %>
@@ -34,7 +34,7 @@
 
     <% if sl_helper.feed_link_box_value %>
       <div class="gem-c-subscription-links__feed-box js-hidden" id="<%= sl_helper.feed_box_id %>">
-        <p class="gem-c-subscription-links__feed-description js-hidden"><%= sl_helper.feed_link_text %></p>
+        <p class="gem-c-subscription-links__feed-hidden-description visuallyhidden"><%= sl_helper.feed_link_text %></p>
         <%= render "govuk_publishing_components/components/input", {
           label: {
             text: "Copy and paste this URL into your feed reader"

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

@@ -63,7 +63,7 @@
           <h3 class='gem-c-taxonomy-navigation__section-heading'>
             <%= t("components.taxonomy_navigation.#{section_name}") %>
           </h3>
-          <nav class='gem-c-taxonomy-navigation__navigation' data-module='toggle' role='navigation'>
+          <nav class='gem-c-taxonomy-navigation__navigation' data-module='gem-toggle' role='navigation'>
             <ul class='gem-c-taxonomy-navigation__list'>
               <% sidx = 0; hidden_links = [] %>
               <% section.each_with_index do |item, idx| %>
@@ -102,7 +102,7 @@
                   </a>
                 </li>
                 <li class="gem-c-taxonomy-navigation__link">
-                  <span id="toggle_<%= section_name %>" class="js-hidden">
+                  <span id="toggle_<%= section_name %>" class="gem-c-taxonomy-navigation__toggle-more js-hidden">
                     <%= to_sentence(hidden_links) %>
                   </span>
                 </li>

data/app/views/govuk_publishing_components/components/_translation-nav.html.erb

@@ -19,7 +19,7 @@
               hreflang: translation[:locale],
               lang: translation[:locale],
               rel: "alternate",
-              class: brand_helper.color_class,
+              class: "gem-c-translation-nav__link #{brand_helper.color_class}",
               data: translation[:data_attributes]
             %>
           <% end %>

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

@@ -22,7 +22,7 @@ examples:
     data:
       legend_text: |
         <!-- Use the title component, this is hardcoded only for this example -->
-        <h1 style="font-size: 48px; line-height: 1.0416666667; font-weight: bold; margin-bottom: 30px;">
+        <h1 style="font-size: 48px; line-height: 1.0416666667; font-weight: bold; margin: 0 0 30px 0;">
           Do you have a passport?
         </h1>
       text: |

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

@@ -25,6 +25,7 @@ examples:
   default:
     data:
       environment: production
+      product_name: Publishing
       browser_title: 'A page title'
       block: |
         <!-- You probably want to use the header, main & footer components here -->

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

@@ -27,11 +27,11 @@ examples:
         - id: "tab1"
           label: "First section"
           content: |
-            <p>Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.</p>
+            <p class="govuk-body-m">Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.</p>
         - id: "tab2"
           label: "Second section"
           content: |
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
+            <p class="govuk-body-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
   without_panel_border:
     data:
       panel_border: false
@@ -39,11 +39,11 @@ examples:
         - id: "tab-no-border-1"
           label: "First section"
           content: |
-            <p>Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.</p>
+            <p class="govuk-body-m">Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.</p>
         - id: "tab-no-border-2"
           label: "Second section"
           content: |
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
+            <p class="govuk-body-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
   with_title:
     data:
       tabs:
@@ -51,12 +51,12 @@ examples:
           label: "First section"
           title: "First section"
           content: |
-            <p>Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.</p>
+            <p class="govuk-body-m">Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.</p>
         - id: "tab-with-title-2"
           label: "Second section"
           title: "Second section"
           content: |
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
+            <p class="govuk-body-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
   single_item:
     description: If only an individual item is supplied to the component (if the list is created dynamically, for example) it will be rendered without tabs.
     data:
@@ -64,4 +64,4 @@ examples:
         - id: "singletab"
           label: "Single piece of content"
           content: |
-            Here is a single piece of content, there should be no tabs.
+            <p class="govuk-body-m">Here is a single piece of content, there should be no tabs.</p>

data/app/views/govuk_publishing_components/components/metadata/_sentence.html.erb

@@ -17,7 +17,7 @@
         <%= t("govuk_component.metadata.toggle_more", number: remaining.length, default: "+ #{remaining.length} more") %>
     </a>
   </div>
-  <span id="toggle-<%= toggle_id %>" class="js-hidden"><%= remaining.to_sentence.html_safe %></span>
+  <span id="toggle-<%= toggle_id %>" class="gem-c-metadata__toggle-items js-hidden"><%= remaining.to_sentence.html_safe %></span>
 <% else %>
   <%= items.to_sentence.html_safe %>
 <% end %>

data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb

@@ -1,7 +1,7 @@
 <nav role="navigation"
      class="gem-c-related-navigation__nav-section"
      aria-labelledby="related-nav-<%= section_title %>-<%= random %>"
-     data-module="toggle">
+     data-module="gem-toggle">
 
   <% unless section_title === "related_items" %>
     <h3 id="related-nav-<%= section_title %>-<%= random %>"
@@ -11,7 +11,7 @@
     </h3>
   <% end %>
 
-  <ul class="gem-c-related-navigation_link-list" data-module="track-click">
+  <ul class="gem-c-related-navigation__link-list" data-module="track-click">
     <% constructed_link_array = [] %>
 
     <% section_link_limit = related_nav_helper.calculate_section_link_limit(links) %>
@@ -55,7 +55,7 @@
       </li>
 
       <li class="gem-c-related-navigation__link">
-        <span id="toggle_<%= section_title %>" class="js-hidden">
+        <span id="toggle_<%= section_title %>" class="gem-c-related-navigation__toggle-more js-hidden">
           <%= to_sentence(constructed_link_array) %>
         </span>
       </li>