govuk_publishing_components 39.2.4 → 40.0.0

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss

@@ -3,7 +3,7 @@
 $stroke-width: 1px;
 $number-circle-size: 30px;
 $number-circle-size-large: 35px;
-$top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
+$top-border: solid 1px govuk-colour("mid-grey");
 
 @mixin step-nav-vertical-line($line-style: solid) {
   content: "";
@@ -11,7 +11,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   z-index: 2;
   width: 0;
   height: 100%;
-  border-left: $line-style $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
+  border-left: $line-style $stroke-width govuk-colour("mid-grey");
   background: govuk-colour("white");
 }
 
@@ -263,7 +263,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
     margin-left: calc($number-circle-size / 4);
     width: calc($number-circle-size / 2);
     height: 0;
-    border-bottom: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
+    border-bottom: solid $stroke-width govuk-colour("mid-grey");
   }
 
   &::after {
@@ -322,7 +322,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
 .gem-c-step-nav__circle--number {
   @include step-nav-font(16, $weight: bold, $line-height: 29px);
-  border: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
+  border: solid $stroke-width govuk-colour("mid-grey");
 
   .gem-c-step-nav--large & {
     @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 29px, $tablet-line-height: 34px);
@@ -532,7 +532,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__context {
   display: inline-block;
   font-weight: normal;
-  color: govuk-colour("dark-grey", $legacy: "grey-1");
+  color: govuk-colour("dark-grey");
 
   &::before {
     content: " \2013\00a0"; // dash followed by  

data/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss

@@ -96,7 +96,7 @@
 .gem-c-subscription-links__feed-box {
   padding: govuk-spacing(3);
   margin-bottom: govuk-spacing(3);
-  background: govuk-colour("light-grey", $legacy: "grey-3");
+  background: govuk-colour("light-grey");
 
   .js-enabled &.js-hidden {
     display: none;

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

@@ -2,15 +2,15 @@
 @import "govuk/components/table/table";
 
 $table-border-width: 1px;
-$table-border-colour: govuk-colour("mid-grey", $legacy: "grey-2");
+$table-border-colour: govuk-colour("mid-grey");
 $table-header-border-width: 2px;
-$table-header-background-colour: govuk-colour("light-grey", $legacy: "grey-3");
+$table-header-background-colour: govuk-colour("light-grey");
 $sort-link-active-colour: govuk-colour("white");
 $sort-link-arrow-size: 14px;
 $sort-link-arrow-size-small: 8px;
 $sort-link-arrow-spacing: calc($sort-link-arrow-size / 2);
 $table-row-hover-background-colour: rgba(43, 140, 196, .2);
-$table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4");
+$table-row-even-background-colour: govuk-colour("light-grey");
 
 .govuk-table__cell:empty,
 .govuk-table__cell--empty {

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

@@ -2,6 +2,10 @@
 @import "govuk/components/warning-text/warning-text";
 
 .gem-c-warning-text .govuk-warning-text__text {
+  // Ensure the font-size is always set to 19px
+  // This prevents the default user agent styles being applied to heading elements used in the warning-text component following a change in v5.0.0, see:
+  // https://github.com/alphagov/govuk-frontend/pull/4267
+  @include govuk-font($size: 19, $weight: bold);
   margin: 0;
 }
 
@@ -10,7 +14,7 @@
   margin-left: 0;
 }
 
-.gem-c-warning-text__text--large {
+.gem-c-warning-text .gem-c-warning-text__text--large {
   @include govuk-font($size: 24, $weight: bold);
 }
 

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

@@ -25,7 +25,7 @@ $high-alert-border: #cc0000;
     }
 
     &.high-alert {
-      background-color: govuk-colour("light-grey", $legacy: "grey-3");
+      background-color: govuk-colour("light-grey");
       border: 1px solid $high-alert-border;
     }
 

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

@@ -49,8 +49,8 @@
       }
 
       svg {
-        fill: govuk-colour("mid-grey", $legacy: "grey-3");
-        stroke: govuk-colour("mid-grey", $legacy: "grey-3");
+        fill: govuk-colour("mid-grey");
+        stroke: govuk-colour("mid-grey");
       }
     }
 

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

@@ -10,7 +10,7 @@
 .gem-c-govspeak {
   .call-to-action {
     margin: 2em 0;
-    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+    background-color: govuk-colour("light-grey");
     padding: 2em;
 
     &:first-child {

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", $legacy: "grey-2");
+    border-left: 1px solid govuk-colour("mid-grey");
     padding-left: govuk-spacing(3);
     margin-bottom: govuk-spacing(6);
     margin-top: govuk-spacing(6);

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", $legacy: "grey-3");
+    border-left: 10px solid govuk-colour("mid-grey");
     padding: 1em 0 1em 1em;
     margin: 2em 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", $legacy: "grey-2");
+    border-top: 1px solid govuk-colour("mid-grey");
     margin-top: govuk-spacing(6);
     padding-top: govuk-spacing(2);
 

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", $legacy: "grey-3");
+    border-left: 10px solid govuk-colour("mid-grey");
     padding: 1em 0 1em 1em;
     margin: 2em 0;
 

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

@@ -3,7 +3,7 @@
 .gem-c-govspeak {
   .place {
     margin: 1.5em 0;
-    border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
+    border-bottom: solid 1px govuk-colour("mid-grey");
     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", $legacy: "grey-2");
+      border-bottom: 1px solid govuk-colour("mid-grey");
 
       &:last-child {
         padding: govuk-spacing(2) 0 govuk-spacing(2) 0;

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

@@ -11,9 +11,9 @@
 $gem-secondary-button-colour: #00823b;
 $gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%);
 $gem-secondary-button-background-colour: govuk-colour("white");
-$gem-secondary-button-hover-background-colour: govuk-colour("light-grey", $legacy: "grey-4");
+$gem-secondary-button-hover-background-colour: govuk-colour("light-grey");
 
-$gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1");
+$gem-quiet-button-colour: govuk-colour("dark-grey");
 $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
 
 $gem-hover-dark-background: #dddcdb;

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

@@ -93,7 +93,6 @@
           item[:content][:html],
           id: "#{id}-content-#{index}",
           class: "govuk-accordion__section-content",
-          'aria-labelledby': "#{id}-heading-#{index}",
           data: ga4_link_data_attributes
         ) %>
       <% end %>

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

@@ -13,8 +13,8 @@
   css_classes << shared_helper.get_margin_bottom
 
   details_data_attributes = {}
-  details_data_attributes[:module] = 'govuk-details gem-details'
-  details_data_attributes[:module] = 'govuk-details gem-details ga4-event-tracker' unless disable_ga4
+  details_data_attributes[:module] = 'gem-details'
+  details_data_attributes[:module] = 'gem-details ga4-event-tracker' unless disable_ga4
 
   data_attributes ||= {}
   data_attributes[:details_track_click] = ''

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

@@ -1,6 +1,7 @@
 <%
   add_gem_component_stylesheet("layout-for-admin")
   js_filename ||= "application"
+  js_module_filename ||= "es6-components"
   css_filename ||= "application"
 
   product_name ||= "Publishing"
@@ -17,6 +18,9 @@
     <%= favicon_link_tag "govuk_publishing_components/favicon-#{environment}.png" %>
     <%= stylesheet_link_tag css_filename, media: "all" %>
     <%= javascript_include_tag "govuk_publishing_components/vendor/modernizr" %>
+    <% if GovukPublishingComponents::Config.use_es6_components %>
+      <%= javascript_include_tag js_module_filename, type: "module" %>
+    <% end %>
     <%= yield :head %>
   </head>
   <body class="gem-c-layout-for-admin govuk-template__body">

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

@@ -80,12 +80,10 @@
 
     <%= stylesheet_link_tag "application", media: "all" %>
     <!--[if lt IE 9]><%= javascript_include_tag "govuk_publishing_components/ie", integrity: true, crossorigin: "anonymous" %><![endif]-->
-    <link rel="shortcut icon" href="<%= asset_path 'favicon.ico' %>" type="image/x-icon" />
-    <link rel="mask-icon" href="<%= asset_path 'govuk-mask-icon.svg' %>" color="#0b0c0c">
-    <link rel="apple-touch-icon" sizes="180x180" href="<%= asset_path "govuk-apple-touch-icon-180x180.png" %>">
-    <link rel="apple-touch-icon" sizes="167x167" href="<%= asset_path "govuk-apple-touch-icon-167x167.png" %>">
-    <link rel="apple-touch-icon" sizes="152x152" href="<%= asset_path "govuk-apple-touch-icon-152x152.png" %>">
-    <link rel="apple-touch-icon" href="<%= asset_path "govuk-apple-touch-icon.png" %>">
+    <link rel="icon" sizes="48x48" href="<%= asset_path 'favicon.ico' %>">
+    <link rel="icon" sizes="any" href="<%= asset_path 'favicon.svg' %>" type="image/svg+xml">
+    <link rel="mask-icon" href="<%= asset_path 'govuk-icon-mask.svg' %>" color="#0b0c0c">
+    <link rel="apple-touch-icon" href="<%= asset_path 'govuk-icon-180.png' %>">
 
     <meta name="theme-color" content="#0b0c0c" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -188,5 +186,8 @@
       } %>
     <% end %>
     <%= javascript_include_tag 'application' %>
+    <% if GovukPublishingComponents::Config.use_es6_components %>
+      <%= javascript_include_tag 'es6-components', type: "module" %>
+    <% end %>
   <% end %>
 </html>

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

@@ -54,9 +54,6 @@
   header_logo_classes = %w(gem-c-layout-super-navigation-header__header-logo)
   header_logo_classes << "gem-c-layout-super-navigation-header__header-logo--large-navbar" if large_navbar
 
-  logotype_classes = %w(govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown)
-  logotype_classes << "gem-c-layout-super-navigation-header__logotype-crown--large-navbar" if large_navbar
-
   header_link_classes = %w(govuk-header__link govuk-header__link--homepage)
   header_link_classes << "gem-c-header__link--large-navbar" if large_navbar
 
@@ -108,41 +105,11 @@
             label: logo_link_title,
           }
         } do %>
-          <% if hide_logo_text %>
-            <span class="govuk-visually-hidden">
-              <%= logo_text %>
-            </span>
-          <% end %>
-          <span class="govuk-header__logotype">
-            <!--[if gt IE 8]><!-->
-            <%= content_tag(:svg, {
-              aria: {
-                hidden: true,
-              },
-              class: logotype_classes,
-              height: "30",
-              width: "32",
-              focusable: "false",
-              viewBox: "0 0 32 30",
-              xmlns: "http://www.w3.org/2000/svg",
-            }) do %>
-              <path
-                d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"
-                fill="currentColor"
-                fill-rule="evenodd"
-              >
-              </path>
-            <% end %>
-            <!--<![endif]-->
-            <!--[if IE 8]>
-            <img src="<%= asset_path('govuk-logotype-tudor-crown.png') %>" alt="" class="govuk-header__logotype-crown-fallback-image" width="32" height="30">
-            <![endif]-->
-            <% unless hide_logo_text %>
-              <span class="govuk-header__logotype-text">
-                <%= logo_text %>
-              </span>
-            <% end %>
-          </span>
+          <%= render "govuk_publishing_components/components/layout_for_public/header_logo", {
+            hide_logo_text: hide_logo_text,
+            logo_text: logo_text,
+            large_navbar: large_navbar
+          } %>
         <% end %>
       <% end %>
     </div>

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

@@ -17,7 +17,6 @@
         <path
           fill="currentColor" fill-rule="evenodd"
           d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"></path>
-        <image src="<%= asset_path('govuk-logotype-tudor-crown.png') %>" class="gem-c-modal-dialogue__logotype-crown-fallback-image"></image>
       </svg>
     <% end %>
     <%= tag.div yield, class: "gem-c-modal-dialogue__content" %>

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

@@ -37,7 +37,7 @@ end
 <%= tag.div class: container_css_classes, data: data_attributes do %>
   <%= tag.p class: "govuk-phase-banner__content" do %>
     <%= tag.strong app_name, class: "govuk-phase-banner__content__app-name" if app_name %>
-    <%= tag.strong phase, class: "govuk-tag govuk-phase-banner__content__tag" if phase %>
+    <%= tag.strong phase.titleize, class: "govuk-tag govuk-phase-banner__content__tag" if phase %>
     <%= tag.span message, class: "govuk-phase-banner__text" if message %>
   <% end %>
 <% end %>

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

@@ -21,7 +21,7 @@
     <%= tag.span text_icon, class: "govuk-warning-text__icon", "aria-hidden": "true" %>
   <% end %>
   <% inner_text = capture do %>
-    <%= tag.span text_assistive, class: "govuk-warning-text__assistive" %>
+    <%= tag.span text_assistive, class: "govuk-visually-hidden" %>
     <%= text %>
   <% end %>
   <% if heading_level > 0 %>

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

@@ -23,7 +23,6 @@ accessibility_criteria: |
     * pass [colour contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html)
     * be readable should a [user change colours](https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use)
     * associate panel content with the control that opens it using the `aria-controls` attribute
-    * have `aria-label` / `aria-labelledby` on section content with a value that refers to the button that controls display of the content
 
   Section headings must use a button element so that users:
 
@@ -63,7 +62,7 @@ examples:
 
       The `id` must be unique across the domain of your service. This is because the open or closed state of individual instances of the accordion uses `localStorage` to persist across page loads.
 
-      Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes.
+      Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-control` attributes.
     data:
       id: with-supplied-id-thats-unique-across-the-domain
       items:

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

@@ -32,6 +32,15 @@ examples:
       js_filename: "application"
       block: |
         <!-- You probably want to use the header, main & footer components here -->
+  with_custom_js_filename_for_es6_components:
+    description: An alternative JS filename can be used in place of the default `es6-components.js` if required (note that this cannot easily be demonstrated here).
+    data:
+      environment: production
+      product_name: Publishing
+      browser_title: 'A page title'
+      js_module_filename: "es6-bundle"
+      block: |
+        <!-- You probably want to use the header, main & footer components here -->
   with_custom_css_filename:
     description: An alternative JS filename can be used in place of the default `application.scss` if required (note that this cannot easily be demonstrated here).
     data:

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

@@ -0,0 +1,41 @@
+<%
+  hide_logo_text ||= false
+  large_navbar ||= false
+  logo_text ||= t("components.layout_super_navigation_header.logo_text")
+  logotype_classes = %w(govuk-header__logotype gem-c-layout-super-navigation-header__logotype-crown)
+  logotype_classes << "gem-c-layout-super-navigation-header__logotype-crown--large-navbar" if large_navbar  
+%>
+
+<% unless hide_logo_text %>
+  <svg
+    aria-label="<%= logo_text %>"
+    focusable="false"
+    role="img"
+    class="govuk-header__logotype"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 148 30"
+    height="30"
+    width="148"
+  >
+    <title>GOV.UK</title>
+    <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
+  </svg>
+<% else %>
+  <span class="govuk-visually-hidden">
+    <%= logo_text %>
+  </span>
+  <%= content_tag(:svg, {
+    aria: {
+      hidden: true,
+    },
+    class: logotype_classes,
+    height: "30",
+    width: "32",
+    focusable: "false",
+    viewBox: "0 0 32 30",
+    xmlns: "http://www.w3.org/2000/svg",
+  }) do %>
+    <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"></path>
+    </svg>
+  <% end %>
+<% end %>

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

@@ -1,20 +1,18 @@
 <div class="govuk-header__logo gem-c-header__logo">
   <a href="<%= logo_link %>" class="govuk-header__link govuk-header__link--homepage" data-module="gem-track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
-    <span class="govuk-header__logotype gem-c-header__logotype header-logo">
-      <!--[if gt IE 8]><!-->
-      <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30" height="30" width="32">
-        <path
-          fill="currentColor" fill-rule="evenodd"
-          d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"></path>
-      </svg>
-      <!--<![endif]-->
-      <!--[if IE 8]>
-      <img src="<%= asset_path('govuk-logotype-tudor-crown.png') %>" alt="" class="govuk-header__logotype-crown-fallback-image" width="32" height="30">
-      <![endif]-->
-      <span class="govuk-header__logotype-text">
-        GOV.UK
-      </span>
-    </span>
+    <svg
+      focusable="false"
+      role="img"
+      class="govuk-header__logotype"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 148 30"
+      height="30"
+      width="148"
+      aria-label="GOV.UK"
+    >
+      <title>GOV.UK</title>
+      <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
+    </svg>
     <% if product_name %>
       <span class="govuk-header__product-name gem-c-header__product-name">
         <%= product_name %>
@@ -22,7 +20,7 @@
     <% end %>
     <% if environment %>
       <span class="gem-c-environment-tag govuk-tag gem-c-environment-tag--<%= environment %>">
-        <%= environment %>
+        <%= environment.titleize %>
       </span>
     <% end %>
   </a>

data/config/initializers/assets.rb

@@ -16,9 +16,9 @@ elsif Gem.loaded_specs.key?("sassc-rails")
 end
 
 Rails.application.config.assets.paths += %W[
-  #{__dir__}/../../node_modules/govuk-frontend/govuk/assets/images
-  #{__dir__}/../../node_modules/govuk-frontend/govuk/assets/fonts
-  #{__dir__}/../../node_modules/govuk-frontend/
+  #{__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/config.rb

@@ -21,6 +21,9 @@ module GovukPublishingComponents
     mattr_accessor :exclude_css_from_static
     self.exclude_css_from_static = true
 
+    mattr_accessor :use_es6_components
+    self.use_es6_components = false
+
     def self.component_directory_name
       APP_COMPONENT_DIRECTORY
     end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "39.2.4".freeze
+  VERSION = "40.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/govuk/all";
+@import "node_modules/govuk-frontend/dist/govuk/all";
 ```
 
 [More details on importing styles](https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#css)
@@ -46,21 +46,24 @@ To import add the below to your Sass file:
 
 Some of the JavaScript included in GOV.UK Frontend improves the usability and
 accessibility of the components. You should make sure that you are importing and
-initialising Javascript in your application to ensure that all users can use it successfully.
+initialising JavaScript in your application. This will ensure all users can use it successfully.
 
-You can include Javascript for all components either by copying the `all.js` from `node_modules/govuk-frontend/govuk/` into your application or referencing the file directly:
+You can include JavaScript for all components by copying both `govuk-frontend.min.js` and `govuk-frontend.min.js.map` from `node_modules/govuk-frontend/dist/govuk/` into your application and referencing the JavaScript directly:
 
 ```html
-<script src="<path-to-govuk-frontend-all-file>/all.js"></script>
+<script type="module" src="{path-to-javascript}/govuk-frontend.min.js"></script>
 ```
 
-Next you need to initialise the script by adding:
+Next you need to import and initialise GOV.UK Frontend by adding:
 
 ```html
-<script>window.GOVUKFrontend.initAll()</script>
+<script type="module">
+  import { initAll } from '{path-to-javascript}/govuk-frontend.min.js'
+  initAll()
+</script>
 ```
 
-[More details on importing Javascript and advanced options](https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#javascript)
+[More details on importing JavaScript and advanced options](https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#javascript)
 
 ## Importing assets
 
@@ -86,4 +89,4 @@ Open Government 3.0 licence.
 
 ## Contribution guidelines
 
-If you want to help us build GOV.UK Frontend, view our [contribution guidelines](../CONTRIBUTING.md).
+If you want to help us build GOV.UK Frontend, view our [contribution guidelines](/CONTRIBUTING.md).

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

@@ -0,0 +1,5 @@
+@import "settings/all";
+@import "tools/all";
+@import "helpers/all";
+
+/*# sourceMappingURL=_base.scss.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/govuk/_base.scss"],"names":[],"mappings":"AAAA,sBAAsB;AACtB,mBAAmB;AACnB,qBAAqB","file":"_base.scss","sourcesContent":["@import \"settings/all\";\n@import \"tools/all\";\n@import \"helpers/all\";\n"]}