govuk_publishing_components 67.1.0 → 68.0.0

data/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss

@@ -1,6 +1,6 @@
 .gem-c-translation-nav {
   margin-bottom: govuk-spacing(6);
-  border-bottom: 1px solid $govuk-border-colour;
+  border-bottom: 1px solid govuk-functional-colour(border);
   @include govuk-text-colour;
   @include govuk-font(16);
 }
@@ -17,14 +17,14 @@
   padding-left: govuk-spacing(2);
   padding-right: govuk-spacing(2);
   margin-bottom: govuk-spacing(2);
-  border-right: 1px solid $govuk-border-colour;
+  border-right: 1px solid govuk-functional-colour(border);
   height: 16px;
 
   .direction-rtl & {
     direction: rtl;
     float: right;
     text-align: start;
-    border-left: 1px solid $govuk-border-colour;
+    border-left: 1px solid govuk-functional-colour(border);
     border-right: 0;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss

@@ -18,16 +18,16 @@
 }
 
 .gem-c-warning-text__text--highlight {
-  color: $govuk-error-colour;
+  color: govuk-functional-colour(error);
 }
 
 @include govuk-media-query($media-type: print) {
   .gem-c-warning-text * {
-    color: $govuk-print-text-colour;
+    color: govuk-functional-colour(print-text);
   }
 
   .govuk-warning-text__icon {
     background: none;
-    color: $govuk-print-text-colour;
+    color: govuk-functional-colour(print-text);
   }
 }

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

@@ -39,14 +39,14 @@
         width: $thumbnail-width;
         height: 140px;
         background: govuk-colour("white");
-        box-shadow: 0 2px 2px rgba(govuk-colour("black"), .4), 0 0 0 5px color.adjust(govuk-colour("black"), $alpha: -0.9);
+        box-shadow: 0 2px 2px govuk-colour("black", $variant: "tint-50"), 0 0 0 5px govuk-functional-colour("border");
 
         @include high-contrast-outline;
       }
 
       svg {
-        fill: govuk-colour("mid-grey");
-        stroke: govuk-colour("mid-grey");
+        fill: govuk-colour("black", $variant: "tint-50");
+        stroke: govuk-colour("black", $variant: "tint-50");
       }
 
       @include govuk-media-query($media-type: print) {
@@ -127,7 +127,7 @@
         a,
         a:link,
         a:link:visited {
-          color: $govuk-print-text-colour !important;
+          color: govuk-functional-colour(print-text) !important;
 
           &::after {
             display: block;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss

@@ -10,13 +10,13 @@
 .gem-c-govspeak {
   .call-to-action {
     margin: 0 0 govuk-spacing(4) 0;
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
     padding: govuk-spacing(6);
     padding-bottom: govuk-spacing(2);
 
     @include govuk-media-query($media-type: print) {
       background: none;
-      border: 1pt solid $govuk-border-colour;
+      border: 1pt solid govuk-functional-colour(border);
       padding: govuk-spacing(3);
       margin: govuk-spacing(3) 0;
     }

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

@@ -12,7 +12,7 @@
   // .address is used by the `$A` markdown pattern
   .address,
   .contact {
-    border-left: 1px solid govuk-colour("mid-grey");
+    border-left: 1px solid govuk-functional-colour("border");
     padding-left: govuk-spacing(3);
     margin: 0 0 govuk-spacing(6) 0;
   }

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

@@ -8,7 +8,7 @@
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .example {
-    border-left: 10px solid govuk-colour("mid-grey");
+    border-left: 10px solid govuk-functional-colour("border");
     padding: govuk-spacing(4) 0 0.1234px govuk-spacing(4); // non-zero padding on bottom keeps margin of last element inside parent, simulating padding
     margin: 0 0 govuk-spacing(4) 0;
 

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

@@ -14,7 +14,7 @@
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .footnotes {
-    border-top: 1px solid govuk-colour("mid-grey");
+    border-top: 1px solid govuk-functional-colour("border");
     margin: 0 0 govuk-spacing(4) 0;
     padding-top: govuk-spacing(4);
     overflow-wrap: break-word;
@@ -28,12 +28,12 @@
     }
 
     li:target {
-      background: govuk-colour("light-grey");
-      border-bottom: solid 3px $govuk-border-colour;
+      background: govuk-colour("black", $variant: "tint-95");
+      border-bottom: solid 3px govuk-functional-colour(border);
     }
 
     @include govuk-media-query($media-type: print) {
-      border-top: 1px solid $govuk-text-colour;
+      border-top: 1px solid govuk-functional-colour(text);
 
       a[role="doc-backlink"] {
         display: none;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss

@@ -48,7 +48,7 @@ $highlight-answer-color: govuk-colour("white");
 
       &,
       & * {
-        color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
+        color: govuk-functional-colour(print-text) !important; // stylelint-disable-line declaration-no-important
       }
     }
   }

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

@@ -32,7 +32,7 @@
 
     figcaption p {
       margin: govuk-spacing(2) 0 0 0;
-      color: $govuk-secondary-text-colour;
+      color: govuk-functional-colour(secondary-text);
       @include govuk-font(19);
     }
   }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss

@@ -9,7 +9,7 @@
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .info-notice {
-    border-left: 10px solid govuk-colour("mid-grey");
+    border-left: 10px solid govuk-functional-colour("border");
     padding: govuk-spacing(4) 0 0.1234px govuk-spacing(4); // non-zero padding on bottom keeps margin of last element inside parent, simulating padding
     margin: 0 0 govuk-spacing(4) 0;
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_media-player.scss

@@ -35,8 +35,8 @@
   position: relative;
   padding: govuk-spacing(6);
   padding-bottom: govuk-spacing(8);
-  background: govuk-colour("light-grey");
-  border: solid 2px $govuk-border-colour;
+  background: govuk-colour("black", $variant: "tint-95");
+  border: solid 2px govuk-functional-colour(border);
 }
 
 .gem-c-govspeak__youtube-placeholder-text {

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

@@ -3,7 +3,7 @@
 .gem-c-govspeak {
   .place {
     margin: 0 0 govuk-spacing(4) 0;
-    border-bottom: solid 1px govuk-colour("mid-grey");
+    border-bottom: solid 1px govuk-functional-colour("border");
     padding-bottom: 1.5em;
 
     .address {

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

@@ -25,7 +25,7 @@
     td {
       vertical-align: top;
       padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
-      border-bottom: 1px solid govuk-colour("mid-grey");
+      border-bottom: 1px solid govuk-functional-colour("border");
 
       &:last-child {
         padding: govuk-spacing(2) 0 govuk-spacing(2) 0;
@@ -34,7 +34,7 @@
 
     th {
       text-align: left;
-      color: $govuk-text-colour;
+      color: govuk-functional-colour(text);
       @include govuk-font($size: 19, $weight: bold);
     }
 

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

@@ -94,10 +94,10 @@
   }
 
   @include govuk-media-query($media-type: print) {
-    color: $govuk-print-text-colour;
+    color: govuk-functional-colour(print-text);
 
     a:link {
-      color: $govuk-print-text-colour;
+      color: govuk-functional-colour(print-text);
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss

@@ -34,7 +34,7 @@
 
       &::before {
         background-color: govuk-colour("white");
-        color: $govuk-print-text-colour;
+        color: govuk-functional-colour(print-text);
       }
     }
   }

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_colours.scss

@@ -1,14 +1,12 @@
-$gem-secondary-button-colour: #00823b;
-$gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%);
+$gem-secondary-button-colour: govuk-colour("green", $variant: "shade-25");
+$gem-secondary-button-hover-colour: govuk-colour("green", $variant: "shade-50");
 $gem-secondary-button-background-colour: govuk-colour("white");
-$gem-secondary-button-hover-background-colour: govuk-colour("light-grey");
+$gem-secondary-button-hover-background-colour: govuk-colour("black", $variant: "tint-95");
 
-$gem-quiet-button-colour: govuk-colour("dark-grey");
-$gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
+$gem-quiet-button-colour: govuk-functional-colour("secondary-text");
+$gem-quiet-button-hover-colour: govuk-colour("black");
+$gem-quiet-button-hover-background-colour: govuk-colour("black", $variant: "tint-80");
 
-// Brand refresh
-$govuk-blue-tint-95: govuk-tint($govuk-brand-colour, 95%);
-$govuk-blue-tint-80: govuk-tint(govuk-colour("blue"), 80%);
-$govuk-blue-tint-50: govuk-tint(govuk-colour("blue"), 50%);
-
-$govuk-rebrand-template-background-colour: $govuk-blue-tint-95;
+$govuk-blue-tint-95: govuk-colour("blue", $variant: "tint-95");
+$govuk-blue-tint-80: govuk-colour("blue", $variant: "tint-80");
+$govuk-blue-tint-50: govuk-colour("blue", $variant: "tint-50");

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -63,7 +63,7 @@
     }
 
     @include govuk-media-query($media-type: print) {
-      color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
+      color: govuk-functional-colour(print-text) !important; // stylelint-disable-line declaration-no-important
     }
   }
 
@@ -115,12 +115,12 @@
   hr {
     margin-top: govuk-spacing(6) - 1px;
     margin-bottom: govuk-spacing(6);
-    border-top: 1px solid $govuk-border-colour;
+    border-top: 1px solid govuk-functional-colour(border);
   }
 
   code {
     padding: 0 5px;
     color: #d13118;
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/lib/_link.scss

@@ -2,16 +2,16 @@
   @include govuk-font(19);
 
   &:link {
-    color: $govuk-error-colour;
+    color: govuk-functional-colour(error);
   }
 
   &:visited,
   &:hover,
   &:active {
-    color: darken($govuk-error-colour, 5%);
+    color: govuk-colour("red", $variant: "shade-25");
   }
 
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/lib/_print_support.scss

@@ -57,7 +57,7 @@
     &,
     &:link,
     &:visited {
-      color: $govuk-print-text-colour !important;
+      color: govuk-functional-colour(print-text) !important;
     }
 
     &::after {
@@ -65,7 +65,7 @@
       margin: 1mm auto;
       font-size: 12pt;
       font-weight: normal;
-      color: $govuk-print-text-colour !important;
+      color: govuk-functional-colour(print-text) !important;
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/settings/_custom-properties.scss

@@ -0,0 +1,9 @@
+// Default the `govuk-output-custom-properties` flag to false to prevent custom properties
+// being output multiple times.
+// Entry points such as `all-components.scss` and `specific-components` override this
+// value when they need to include custom properties (for example, the component guide
+// or application stylesheets where there is only a single stylesheet).
+// Direct imports of base (e.g. secondary stylesheets) keep the default value of `false`,
+// rather than using the GOV.UK Frontend default of `true`.
+
+$govuk-output-custom-properties: false !default;

data/app/assets/stylesheets/govuk_publishing_components/settings/_index.scss

@@ -1,4 +1,3 @@
 @import "app-font-url";
 @import "app-image-url";
-@import "colours";
-@import "typography";
+@import "custom-properties";

data/app/assets/stylesheets/govuk_publishing_components/specific-components.scss

@@ -1,3 +1,5 @@
+$govuk-output-custom-properties: true;
+
 @import "base";
 
 @import "govuk/core/index";

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

@@ -30,6 +30,6 @@
         <% end %>
     <% end %>
     </span>
-    <p class="gem-c-glance-metric__context govuk-body-xs"><%= context %></p>
+    <p class="gem-c-glance-metric__context govuk-body-s"><%= context %></p>
   <% end %>
 <% end %>

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

@@ -8,7 +8,7 @@
 %>
 
 <!DOCTYPE html>
-<html lang="en" class="govuk-template govuk-template--rebranded">
+<html lang="en" class="govuk-template">
   <head>
     <meta charset="utf-8">
     <title><%= browser_title %> - GOV.UK <%= product_name %></title>

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

@@ -32,7 +32,7 @@
   body_css_classes << body_classes if body_classes
 -%>
 <!DOCTYPE html>
-<html class="govuk-template govuk-template--rebranded" lang="<%= html_lang %>">
+<html class="govuk-template" lang="<%= html_lang %>">
   <head>
     <meta charset="utf-8">
     <%= tag.title title, lang: title_lang %>

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

@@ -6,50 +6,28 @@
   navigation_items ||= []
   product_name ||= nil
   remove_bottom_border ||= false
-  deprecated_navigation ||= false
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
   logo_link ||= "/"
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-layout-header govuk-header")
   component_helper.add_class("gem-c-layout-header--no-bottom-border") if remove_bottom_border || navigation_items
-  component_helper.add_data_attribute({ module: "govuk-header" })
 %>
 
 <%= tag.header(**component_helper.all_attributes) do %>
-  <% if !deprecated_navigation %>
-    <div class="govuk-header__container <%= width_class %> gem-c-layout-header__logo">
-      <%= render "govuk_publishing_components/components/layout_header/header_logo", {
-        environment:,
-        logo_link:,
-        product_name:,
-        signout_link:,
-      } %>
-    </div>
-    <% if navigation_items.any? %>
-      <%= render "govuk_publishing_components/components/service_navigation", {
-        navigation_items:,
-        navigation_aria_label:,
-        full_width:,
-      } %>
-    <% end %>
-  <% else %>
-    <div class="govuk-header__container <%= width_class %>">
-      <div class="govuk-grid-row">
-        <div class="gem-c-layout-header__logo govuk-grid-column-one-half">
-          <%= render "govuk_publishing_components/components/layout_header/header_logo", {
-            environment:,
-            logo_link:,
-            product_name:,
-            deprecated_navigation: true,
-          } %>
-        </div>
-        <% if navigation_items.any? %>
-          <div class="govuk-header__content gem-c-header__content govuk-grid-column-full govuk-!-display-none-print">
-            <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
-          </div>
-        <% end %>
-      </div>
-    </div>
+  <div class="govuk-header__container <%= width_class %> gem-c-layout-header__logo">
+    <%= render "govuk_publishing_components/components/layout_header/header_logo", {
+      environment:,
+      logo_link:,
+      product_name:,
+      signout_link:,
+    } %>
+  </div>
+  <% if navigation_items.any? %>
+    <%= render "govuk_publishing_components/components/service_navigation", {
+      navigation_items:,
+      navigation_aria_label:,
+      full_width:,
+    } %>
   <% end %>
 <% end %>

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

@@ -30,7 +30,7 @@
   header_logo_classes = %w(gem-c-layout-super-navigation-header__header-logo)
   header_logo_classes << "gem-c-layout-super-navigation-header__header-logo--homepage" if homepage
 
-  header_link_classes = %w(govuk-header__link govuk-header__link--homepage)
+  header_link_classes = %w(govuk-header__homepage-link)
 
   dropdown_menu_classes = %w(gem-c-layout-super-navigation-header__navigation-dropdown-menu)
 

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

@@ -8,7 +8,7 @@
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("govuk-tag gem-c-tag")
 
-  colours = %w[grey green turquoise blue light-blue purple pink red orange yellow]
+  colours = %w[grey green teal blue purple magenta red orange yellow]
   colour ||= nil
   component_helper.add_class("govuk-tag--#{colour}") if colours.include?(colour)
 %>

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

@@ -58,21 +58,6 @@ examples:
         href: "item-4"
       - text: Logout
         href: "item-5"
-  with_deprecated_navigation:
-    description: Note that [remove_bottom_border](#no_bottom_border) automatically gets set to true on the header when navigation items are added.
-    data:
-      environment: production
-      deprecated_navigation: true
-      navigation_items:
-      - text: Mainstream browse
-        href: "item-1"
-        active: true
-      - text: Step by steps
-        href: "item-2"
-      - text: Jonathan Doe
-        href: "item-3"
-      - text: Logout
-        href: "item-4"
   with_product_name_and_navigation:
     data:
       product_name: Component Guide 999.9.9

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

@@ -23,26 +23,22 @@ examples:
     data:
       text: Hello world!
       colour: green
-  turquoise:
+  teal:
     data:
       text: Hello world!
-      colour: turquoise
+      colour: teal
   blue:
     data:
       text: Hello world!
       colour: blue
-  light_blue:
-    data:
-      text: Hello world!
-      colour: light-blue
   purple:
     data:
       text: Hello world!
       colour: purple
-  pink:
+  magenta:
     data:
       text: Hello world!
-      colour: pink
+      colour: magenta
   red:
     data:
       text: Hello world!

data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb

@@ -8,18 +8,11 @@
   }
 
   environment_exists = environment.present?
-  deprecated_navigation ||= false
   signout_link ||= false
 %>
 
-<% if environment_exists && deprecated_navigation %>
-  <div class="gem-c-header__environment">
-    <%= render "govuk_publishing_components/components/tag", { text: environment, colour: colour_map[environment.downcase] } %>
-  </div>
-<% end %>
-
 <div class="govuk-header__logo gem-c-header__logo">
-  <a href="<%= logo_link %>" class="govuk-header__link govuk-header__link--homepage">
+  <a href="<%= logo_link %>" class="govuk-header__homepage-link">
     <%= render "govuk_publishing_components/components/govuk_logo/govuk_logo" %>
     <% if product_name %>
       <span class="govuk-header__product-name gem-c-header__product-name">
@@ -27,7 +20,7 @@
       </span>
     <% end %>
   </a>
-  <% if environment_exists && !deprecated_navigation %>
+  <% if environment_exists %>
     <div class="gem-c-header__environment">
       <%= render "govuk_publishing_components/components/tag", { text: environment, colour: colour_map[environment.downcase] } %>
     </div>
@@ -35,9 +28,7 @@
 </div>
 
 <% if signout_link %>
-  <div class="govuk-header__content gem-c-header__content">
-    <nav class="gem-c-header__nav govuk-header__navigation">
-      <a class="govuk-header__link govuk-!-font-weight-bold" href="/auth/gds/sign_out">Sign out</a>
-    </nav>
+  <div class="gem-c-layout-header__signout">
+    <a class="gem-c-layout-header__signout-link govuk-!-font-weight-bold" href="/auth/gds/sign_out">Sign out</a>
   </div>
 <% end %>

data/app/views/layouts/govuk_publishing_components/application.html.erb

@@ -23,7 +23,7 @@
   <% end %>
 <% end %>
 <!DOCTYPE html>
-<html lang="en" class="<%= "govuk-template" unless @preview %> govuk-template--rebranded">
+<html lang="en" class="<%= "govuk-template" unless @preview %>">
   <head>
     <meta charset="utf-8">
     <title>

data/config/initializers/assets.rb

@@ -9,7 +9,7 @@ return unless Rails.application.config.respond_to?(:assets)
 Rails.application.config.assets.precompile += %w[govuk_publishing_components_manifest.js]
 
 Rails.application.config.assets.paths += %W[
-  #{__dir__}/../../node_modules/govuk-frontend/dist/govuk/assets/rebrand/images
+  #{__dir__}/../../node_modules/govuk-frontend/dist/govuk/assets/images
   #{__dir__}/../../node_modules/govuk-frontend/dist/govuk/assets/fonts
   #{__dir__}/../../node_modules/govuk-frontend/dist
   #{__dir__}/../../node_modules/

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "67.1.0".freeze
+  VERSION = "68.0.0".freeze
 end

data/node_modules/govuk-frontend/README.md

@@ -37,7 +37,7 @@ imports) if you want to override GOV.UK Frontend with your own styles.
 To import add the below to your Sass file:
 
 ```scss
-@import "node_modules/govuk-frontend/dist/govuk/all";
+@import "node_modules/govuk-frontend/dist/govuk/index";
 ```
 
 [More details on importing styles](https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#css)

data/node_modules/govuk-frontend/dist/govuk/_base.scss

@@ -1,5 +1,6 @@
 @import "settings/index";
 @import "tools/index";
 @import "helpers/index";
+@import "custom-properties/index";
 
 /*# sourceMappingURL=_base.scss.map */

data/node_modules/govuk-frontend/dist/govuk/_base.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/govuk/_base.scss"],"names":[],"mappings":"AAAA,wBAAwB;AACxB,qBAAqB;AACrB,uBAAuB","file":"_base.scss","sourcesContent":["@import \"settings/index\";\n@import \"tools/index\";\n@import \"helpers/index\";\n"]}
+{"version":3,"sources":["../../src/govuk/_base.scss"],"names":[],"mappings":"AAAA,wBAAwB;AACxB,qBAAqB;AACrB,uBAAuB;AACvB,iCAAiC","file":"_base.scss","sourcesContent":["@import \"settings/index\";\n@import \"tools/index\";\n@import \"helpers/index\";\n@import \"custom-properties/index\";\n"]}