Version 5.0.0

app/components/govuk_component/details_component.rb

@@ -13,7 +13,7 @@ def initialize(summary_text: nil, text: nil, classes: [], id: nil, open: nil, ht
   end
 
   def call
-    tag.details(data: { module: "#{brand}-details" }, id: id, open: open, **html_attributes) do
+    tag.details(id: id, open: open, **html_attributes) do
       safe_join([summary, description])
     end
   end

app/components/govuk_component/header_component.html.erb

@@ -14,12 +14,6 @@
               <!--<![endif]-->
             <% end %>
 
-            <% if crown_fallback_image_path.present? %>
-              <!--[if IE 8]>
-                <%= image_tag(crown_fallback_image_path, **crown_fallback_image_attributes) %>
-              <![endif]-->
-            <% end %>
-
             <%= tag.span(logotype, class: "#{brand}-header__logotype-text") %>
           <% end %>
         </span>

app/components/govuk_component/header_component.rb

@@ -5,7 +5,6 @@ class GovukComponent::HeaderComponent < GovukComponent::Base
 
   attr_reader :logotype,
               :crown,
-              :crown_fallback_image_path,
               :homepage_url,
               :service_name,
               :service_url,
@@ -18,7 +17,6 @@ def initialize(classes: [],
                  html_attributes: {},
                  logotype: config.default_header_logotype,
                  crown: true,
-                 crown_fallback_image_path: nil,
                  homepage_url: config.default_header_homepage_url,
                  menu_button_label: config.default_header_menu_button_label,
                  navigation_classes: [],
@@ -29,7 +27,6 @@ def initialize(classes: [],
 
     @logotype                  = logotype
     @crown                     = crown
-    @crown_fallback_image_path = crown_fallback_image_path
     @homepage_url              = homepage_url
     @service_name              = service_name
     @service_url               = service_url
@@ -57,14 +54,6 @@ def container_html_attributes
     { class: ["#{brand}-header__container", "#{brand}-width-container"].append(custom_container_classes).compact }
   end
 
-  def crown_fallback_image_attributes
-    {
-      class: "#{brand}-header__logotype-crown-fallback-image",
-      width: "36",
-      height: "32",
-    }
-  end
-
   class NavigationItem < GovukComponent::Base
     attr_reader :text, :href, :options, :active
 

app/components/govuk_component/tag_component.rb

@@ -1,7 +1,7 @@
 class GovukComponent::TagComponent < GovukComponent::Base
   attr_reader :text, :colour
 
-  COLOURS = %w(grey green turquoise blue red purple pink orange yellow).freeze
+  COLOURS = %w(grey green turquoise blue light-blue red purple pink orange yellow).freeze
 
   def initialize(text: nil, colour: config.default_tag_colour, classes: [], html_attributes: {})
     @text   = text

app/components/govuk_component/warning_text_component.rb

@@ -23,12 +23,12 @@ def icon_element
 
   def warning_text
     tag.strong(class: "#{brand}-warning-text__text") do
-      safe_join([assistive, (content || text)])
+      safe_join([visually_hidden_text, (content || text)])
     end
   end
 
-  def assistive
-    tag.span(icon_fallback_text, class: "#{brand}-warning-text__assistive")
+  def visually_hidden_text
+    tag.span(icon_fallback_text, class: "#{brand}-visually-hidden")
   end
 
   def default_attributes

app/helpers/govuk_link_helper.rb

@@ -105,7 +105,6 @@ def link_styles
 
   def button_styles
     {
-      disabled:  "#{brand}-button--disabled",
       secondary: "#{brand}-button--secondary",
       warning:   "#{brand}-button--warning",
       inverse:   "#{brand}-button--inverse",

guide/content/components/start-button.slim

@@ -26,7 +26,7 @@ p
     span.govuk-warning-text__icon aria-hidden="true"
       | !
     strong.govuk-warning-text__text
-      span.govuk-warning-text__assistive Warning
+      span.govuk-visually-hidden Warning
       | The GOV.UK Design system
       =< link_to("advises against submitting data with a start button", "https://design-system.service.gov.uk/components/button/#start-buttons").html_safe
 

guide/content/stylesheets/application.scss

@@ -7,7 +7,7 @@ $govuk-font-family: system-ui, sans-serif;
 $govuk-brand-colour: #28a;
 
 // Import GOV.UK Frontend
-@import "govuk/all";
+@import "dist/govuk/all";
 
 // Application components
 @import "components/breadcrumbs";
@@ -90,12 +90,6 @@ $govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colo
     color: $govuk-inverse-button-text-colour;
   }
 
-  @include _govuk-compatibility(govuk_template) {
-    &:link:focus {
-      color: $govuk-inverse-button-text-colour;
-    }
-  }
-
   &:hover {
     background-color: $govuk-inverse-button-hover-colour;
 

guide/layouts/example.slim

@@ -7,6 +7,7 @@ html.govuk-template lang="en"
   main#main-content
     == yield
 
-  script src="/javascripts/govuk-frontend.js"
-  script
-    | window.GOVUKFrontend.initAll() ;
+  script type="module" src="/javascripts/govuk-frontend.min.js"
+  script type="module"
+    | import { initAll } from '{path-to-javascript}/govuk-frontend.min.js'
+    | initAll() ;

guide/layouts/partials/footer.slim

@@ -25,6 +25,7 @@ footer.govuk-footer role="contentinfo"
       .govuk-footer__meta-item
          | © X-GOVUK
 
-script src="/javascripts/govuk-frontend.js"
-script
-  | window.GOVUKFrontend.initAll() ;
+script type="module" src="/javascripts/govuk-frontend.min.js"
+script type="module"
+  | import { initAll } from '/javascripts/govuk-frontend.min.js';
+  | initAll() ;

guide/layouts/partials/header.slim

@@ -1,5 +1,5 @@
 script
-  | document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+  | document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
 
 a.govuk-skip-link href="#main-content"
   | Skip to main content

guide/lib/examples/tag_helpers.rb

@@ -8,8 +8,8 @@ def tag_normal
 
     def tag_colours
       <<~TAG
-        - %w(grey green turquoise blue red purple pink orange yellow).each do |colour|
-          = govuk_tag(text: colour, colour: colour)
+        - %w(Grey Green Turquoise Blue Light-blue Red Purple Pink Orange Yellow).each do |colour|
+          = govuk_tag(text: colour, colour: colour.downcase)
       TAG
     end
   end

guide/package.json

@@ -7,13 +7,13 @@
     "lib": "lib"
   },
   "scripts": {
-    "postinstall": "cp -R node_modules/govuk-frontend/govuk/assets/images content/assets && cp node_modules/govuk-frontend/govuk/all.js content/javascripts/govuk-frontend.js",
+    "postinstall": "cp -R node_modules/govuk-frontend/dist/govuk/assets/images content/assets && cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js content/javascripts/govuk-frontend.min.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "govuk-frontend": "^4.7.0",
+    "govuk-frontend": "5.0.0-beta.0",
     "sass": "^1.52.1"
   }
 }

lib/govuk/components/engine.rb

@@ -54,7 +54,7 @@ def reset!
     # +:default_footer_meta_text+ nil
     # +:default_footer_copyright_text+ '© Crown copyright'
     # +:default_footer_copyright_url+ "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
-    # +:default_pagination_landmark_label+ "results"
+    # +:default_pagination_landmark_label+ "Pagination"
     # +:default_pagination_next_text+ Default 'next' text for pagination. An +Array+ where the first item is visible and the second visually hidden. Defaults to ["Next", "page"]
     # +:default_pagination_previous_text+ Default 'previous' text for pagination. An +Array+ where the first item is visible and the second visually hidden. Defaults to ["Previous", "page"]
     # +:default_phase_banner_tag+ nil
@@ -96,7 +96,7 @@ def reset!
       default_footer_meta_text: nil,
       default_footer_copyright_text: '© Crown copyright',
       default_footer_copyright_url: "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/",
-      default_pagination_landmark_label: "results",
+      default_pagination_landmark_label: "Pagination",
       default_pagination_next_text: %w(Next page),
       default_pagination_previous_text: %w(Previous page),
       default_phase_banner_tag: nil,

spec/components/govuk_component/configuration/warning_text_component_configuration_spec.rb

@@ -18,7 +18,7 @@
       subject! { render_inline(GovukComponent::WarningTextComponent.new(**kwargs)) }
 
       specify "renders the warning text with overridden icon fallback text" do
-        expect(rendered_content).to have_tag("span", text: overridden_fallback_text, with: { class: "govuk-warning-text__assistive" })
+        expect(rendered_content).to have_tag("span", text: overridden_fallback_text, with: { class: "govuk-visually-hidden" })
       end
     end
 

spec/components/govuk_component/details_component_spec.rb

@@ -14,7 +14,7 @@
     before { render_inline(described_class.new(**kwargs)) }
 
     specify 'contains a details element with the correct summary and text' do
-      expect(rendered_content).to have_tag('details', with: { class: 'govuk-details', 'data-module' => 'govuk-details' }) do
+      expect(rendered_content).to have_tag('details', with: { class: 'govuk-details' }) do
         with_tag('summary', with: { class: 'govuk-details__summary' }) do
           with_tag('span', with: { class: 'govuk-details__summary-text' }, text: summary_text)
         end
@@ -53,7 +53,7 @@
     end
 
     specify 'contains a details element with the correct summary and text' do
-      expect(rendered_content).to have_tag('details', with: { class: 'govuk-details', 'data-module' => 'govuk-details' }) do
+      expect(rendered_content).to have_tag('details', with: { class: 'govuk-details' }) do
         with_tag('summary', with: { class: 'govuk-details__summary' }) do
           with_tag('span', with: { class: 'govuk-details__summary-text' }, text: summary_text)
         end

spec/components/govuk_component/header_component_spec.rb

@@ -48,19 +48,6 @@
           with_tag('svg', with: { class: 'govuk-header__logotype-crown', 'aria-hidden' => true })
         end
       end
-
-      context 'when a fallback image path is provided' do
-        let(:custom_path) { '/an-alternative-crown-file.jpg' }
-        let(:kwargs) { { crown_fallback_image_path: custom_path } }
-
-        specify 'renders the fallback image with the custom path' do
-          expect(rendered_content).to have_tag('.govuk-header__logotype') do |logotype|
-            # NOTE: it's rendered inside a IE8 conditional comment so we can't
-            # assert its presence normally, just ensure the path's included
-            expect(logotype.current_scope.inner_html).to include(custom_path)
-          end
-        end
-      end
     end
 
     context 'when the crown is disabled' do

spec/components/govuk_component/pagination_component_spec.rb

@@ -31,8 +31,8 @@
     expect(rendered_content).not_to have_tag("nav", with: { class: %w(govuk-pagination--block) })
   end
 
-  specify "renders a default landmark label of 'results'" do
-    expect(rendered_content).to have_tag("nav", with: { "aria-label" => "results" })
+  specify "renders a default landmark label of 'Pagination'" do
+    expect(rendered_content).to have_tag("nav", with: { "aria-label" => "Pagination" })
   end
 
   specify "renders a previous link" do

spec/components/govuk_component/warning_text_component_spec.rb

@@ -21,7 +21,7 @@
   specify 'the default assistive text is included' do
     expect(rendered_content).to have_tag(component_css_class_matcher) do
       with_tag('strong', with: { class: 'govuk-warning-text__text' }) do
-        with_tag('span', text: 'Warning', with: { class: 'govuk-warning-text__assistive' })
+        with_tag('span', text: 'Warning', with: { class: 'govuk-visually-hidden' })
       end
     end
   end
@@ -32,7 +32,7 @@
     specify 'the custom assistive text is included' do
       expect(rendered_content).to have_tag('div', class: component_css_class) do
         with_tag('strong', with: { class: 'govuk-warning-text__text' }) do
-          with_tag('span', text: custom_icon_fallback_text, with: { class: 'govuk-warning-text__assistive' })
+          with_tag('span', text: custom_icon_fallback_text, with: { class: 'govuk-visually-hidden' })
         end
       end
     end

spec/dummy/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "govuk-frontend": "^4.0.0",
+    "govuk-frontend": "5.0.0-beta.0",
     "prismjs": "^1.27.0"
   }
 }