govuk-components 4.1.2 → 5.0.0b1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6e7b1205d2fa524dd03af86f3f989ca8519a90b2b2504ea220b74748a78f9c86
-  data.tar.gz: 26d4734f318f8dcb85cc74a88e8ae1f6e63a30afe4b40d582d449fcb7a40f9fc
+  metadata.gz: 71deff2fbc3e3456d59fe65244041e5b892a2c014967e11cf3a4f5e64a6da596
+  data.tar.gz: 756dfe3c9c96747e25d11e7175f6ae1b15b8cb9db0556f400ac00275c97dbd9a
 SHA512:
-  metadata.gz: a3dc2f9e9bf058c67e170976d71bf152cf84d6138806bfbd1418f73b881fb2c9715d1d7fd8c60b6d8327fbe3a1b4f2ee7cf232fcb0c911ce940b00cf73488a46
-  data.tar.gz: a9bbe0c2a21330b61adfeabf56e93dec486519707ce04f5723fa866e95b58a546b0778f4f0df30bdd60397b3a16af91db417aa60dd83c0e4d5ec1fcf00db0bd3
+  metadata.gz: a62ba0fdd881023b79cff29398915f1b37d8b11057bc544fe5bc3df9c7c5336a0c6703360eac1d629ec0c7a7edf8fe1673195478424e86695ad6d273c66527ff
+  data.tar.gz: cbf84f6ea8a76973402d07375b4552661e7316267e1edfd89151f05dc74fe3de38366230c4e498cf66f03111ea180870b05439c79076c89c0fc4b9ca58d5d22d

data/README.md

@@ -8,7 +8,7 @@
 [![Licence](https://img.shields.io/github/license/x-govuk/govuk-components)](https://github.com/x-govuk/govuk-components/blob/main/LICENSE.txt)
 [![GOV.UK Design System version](https://img.shields.io/badge/GOV.UK%20Design%20System-4.7.0-brightgreen)](https://design-system.service.gov.uk)
 [![ViewComponent](https://img.shields.io/badge/ViewComponent-3.3.0-brightgreen)](https://viewcomponent.org/)
-[![Rails](https://img.shields.io/badge/Rails-6.1.7%20%E2%95%B1%207.0.6-E16D6D)](https://weblog.rubyonrails.org/releases/)
+[![Rails](https://img.shields.io/badge/Rails-7.0.8%20%E2%95%B1%207.1.0-E16D6D)](https://weblog.rubyonrails.org/releases/)
 [![Ruby](https://img.shields.io/badge/Ruby-3.0.6%20%20%E2%95%B1%203.1.4%20%20%E2%95%B1%203.2.2-E16D6D)](https://www.ruby-lang.org/en/downloads/)
 
 This gem provides a suite of reusable components for the [GOV.UK Design System](https://design-system.service.gov.uk/). It is intended to provide a lightweight alternative to the [GOV.UK Publishing Components](https://github.com/alphagov/govuk_publishing_components) library and is built with GitHub’s [ViewComponent](https://github.com/github/view_component) framework.
@@ -46,6 +46,7 @@ The provided components are:
 * [Tabs](https://govuk-components.netlify.app/components/tabs)
 * [Tables](https://govuk-components.netlify.app/components/table)
 * [Tags](https://govuk-components.netlify.app/components/tag)
+* [Task list](https://govuk-components.netlify.app/components/task-list)
 * [Warning text](https://govuk-components.netlify.app/components/warning-text)
 
 This library also provides helpers for creating [links](https://govuk-components.netlify.app/helpers/link),

data/app/components/govuk_component/details_component.rb

@@ -13,7 +13,7 @@ class GovukComponent::DetailsComponent < GovukComponent::Base
   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

data/app/components/govuk_component/header_component.html.erb

@@ -2,27 +2,23 @@
   <%= tag.div(**container_html_attributes) do %>
     <div class="<%= brand %>-header__logo">
       <%= link_to(homepage_url, class: ["#{brand}-header__link", "#{brand}-header__link--homepage"]) do %>
-        <span class="<%= brand %>-header__logotype">
-          <% if custom_logo.present? %>
-            <%= custom_logo %>
-          <% else %>
-            <% if crown %>
-              <!--[if gt IE 8]><!-->
-                <svg aria-hidden="true" focusable="false" class="<%= brand %>-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
-                <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
-              </svg>
-              <!--<![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>
+        <% if custom_logo.present? %>
+          <%= custom_logo %>
+        <% else %>
+          <svg
+            focusable="false"
+            role="img"
+            class="<%= brand %>-header__logotype"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 152 30"
+            height="30"
+            width="152"
+            aria-label="GOV.UK"
+          >
+          <title>GOV.UK</title>
+          <path d="M6.7 12.2c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1-.4 1 0 2.1 1 2.5m-4.3 2.5c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1-.5 1 0 2.1 1 2.5m-1.3 4.8c1 .4 2.1-.1 2.5-1 .4-1-.1-2.1-1-2.5-1-.4-2.1.1-2.5 1-.4 1 0 2.1 1 2.5m10.4-5.8c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1s0 2.1 1 2.5m17.4-1.5c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1 .5 1 0 2.1-1 2.5m4.3 2.5c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1 .5 1 0 2.1-1 2.5m1.3 4.8c-1 .4-2.1-.1-2.5-1-.4-1 .1-2.1 1-2.5 1-.4 2.1.1 2.5 1 .4 1 0 2.1-1 2.5m-10.4-5.8c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1s0 2.1-1 2.5m-5.3-4.9 2.4 1.3V6.5l-2.4.8c-.1-.1-.1-.2-.2-.2s1-3 1-3h-3.4l1 3c-.1.1-.2.1-.2.2-.1.1-2.4-.7-2.4-.7v3.5L17 8.8c-.1.1 0 .2.1.3l-1.4 4.2c-.1.2-.1.4-.1.7 0 1.1.8 2.1 1.9 2.2h.6C19.2 16 20 15.1 20 14c0-.2 0-.4-.1-.7l-1.4-4.2c.2-.1.3-.2.3-.3m-1 20.3c4.6 0 8.9.3 12.8.9 1.1-4.6 2.4-7.2 3.8-9.1l-2.6-.9c.3 1.3.3 1.9 0 2.8-.4-.4-.8-1.2-1.1-2.4l-1.2 4.2c.8-.5 1.4-.9 2-.9-1.2 2.6-2.7 3.2-3.6 3-1.2-.2-1.7-1.3-1.5-2.2.3-1.3 1.6-1.6 2.2-.1 1.2-2.4-.8-3.1-2.1-2.4 1.9-1.9 2.2-3.6.6-5.7-2.2 1.7-2.2 3.3-1.2 5.6-1.3-1.5-3.3-.7-2.5 1.7.9-1.4 2.1-.5 2 .8-.2 1.2-1.7 2.1-3.7 2-2.8-.2-3-2.2-3-3.7.7-.1 1.9.5 3 2l.4-4.4c-1.1 1.2-2.2 1.4-3.3 1.4.4-1.2 2.1-3.1 2.1-3.1h-5.5s1.8 2 2.1 3.1c-1.1 0-2.2-.3-3.3-1.4l.4 4.4c1.1-1.5 2.3-2.1 3-2-.1 1.6-.2 3.5-3 3.7-1.9.2-3.5-.8-3.7-2-.2-1.3 1-2.2 1.9-.8.7-2.4-1.3-3.1-2.6-1.7 1-2.3 1-4-1.2-5.6-1.6 2.1-1.3 3.8.6 5.7-1.3-.7-3.2 0-2.1 2.4.6-1.5 1.9-1.1 2.2.1.2.9-.4 1.9-1.5 2.2-1 .2-2.5-.5-3.7-3 .7 0 1.3.4 2 .9L5 20.4c-.3 1.2-.7 1.9-1.2 2.4-.3-.8-.2-1.5 0-2.8l-2.6.9C2.7 22.8 4 25.4 5.1 30c3.8-.5 8.2-.9 12.7-.9m30.5-11.5c0 .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.4V28H59v-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.7zm36.4-4.3c-.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.1.6-2.2 1.4-3 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.6 2.6.8 4.2.8 1.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.4.4-1.3.7-2.7.7-4.2-.1-1.5-.3-2.9-.8-4.2zM81 17.6c0 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.5-.9 0-1.7-.2-2.4-.5s-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.7-.3 1.5-.5 2.4-.5.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.1zM92.9 28 87 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.4L152 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>
+        <% end %>
         <% if product_name.present? %>
           <%= product_name %>
         <% end %>

data/app/components/govuk_component/header_component.rb

@@ -3,10 +3,7 @@ class GovukComponent::HeaderComponent < GovukComponent::Base
   renders_one :custom_logo
   renders_one :product_name, "ProductName"
 
-  attr_reader :logotype,
-              :crown,
-              :crown_fallback_image_path,
-              :homepage_url,
+  attr_reader :homepage_url,
               :service_name,
               :service_url,
               :menu_button_label,
@@ -16,9 +13,6 @@ class GovukComponent::HeaderComponent < GovukComponent::Base
 
   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: [],
@@ -27,9 +21,6 @@ class GovukComponent::HeaderComponent < GovukComponent::Base
                  service_url: config.default_header_service_url,
                  container_classes: nil)
 
-    @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 +48,6 @@ private
     { 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
 

data/app/components/govuk_component/summary_list_component/action_component.rb

@@ -27,7 +27,7 @@ class GovukComponent::SummaryListComponent::ActionComponent < GovukComponent::Ba
 private
 
   def default_attributes
-    link_classes = govuk_link_classes.append(classes).flatten
+    link_classes = safe_join([govuk_link_classes, classes], " ")
 
     { class: link_classes }
   end

data/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

data/app/components/govuk_component/task_list_component/item_component.rb

@@ -0,0 +1,77 @@
+module GovukComponent
+  class TaskListComponent::ItemComponent < GovukComponent::Base
+    renders_one :status, ->(text: nil, classes: [], html_attributes: {}, &block) do
+      GovukComponent::TaskListComponent::StatusComponent.new(
+        id_prefix: @id_prefix,
+        count: @count,
+        text: text,
+        classes: classes,
+        html_attributes: html_attributes,
+        &block
+      )
+    end
+
+    renders_one :title, ->(text: nil, href: nil, hint: nil, classes: [], html_attributes: {}, &block) do
+      GovukComponent::TaskListComponent::TitleComponent.new(
+        id_prefix: @id_prefix,
+        count: @count,
+        text: text,
+        href: href,
+        hint: hint,
+        classes: classes,
+        html_attributes: html_attributes,
+        &block
+      )
+    end
+
+    attr_reader :raw_title, :hint, :href, :raw_status
+    attr_writer :count
+
+    def initialize(title: nil, href: nil, hint: nil, count: nil, id_prefix: nil, status: {}, classes: [], html_attributes: {})
+      @raw_title  = title
+      @href       = href
+      @hint       = hint
+      @raw_status = status
+      @id_prefix  = id_prefix
+      @count      = count
+
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+    def call
+      adjusted_html_attributes = if href.present? || title&.href.present?
+                                   html_attributes_with_link_class
+                                 else
+                                   html_attributes
+                                 end
+
+      tag.li(safe_join([title_content, status_content].compact), **adjusted_html_attributes)
+    end
+
+  private
+
+    def title_content
+      title || with_title(**title_attributes)
+    end
+
+    def status_content
+      status || with_status(**status_attributes)
+    end
+
+    def default_attributes
+      { class: 'govuk-task-list__item' }
+    end
+
+    def title_attributes
+      { text: raw_title, href: href, hint: hint }
+    end
+
+    def html_attributes_with_link_class
+      html_attributes.tap { |h| h[:class].append("govuk-task-list__item--with-link") }
+    end
+
+    def status_attributes
+      raw_status.is_a?(String) ? { text: raw_status } : raw_status
+    end
+  end
+end

data/app/components/govuk_component/task_list_component/status_component.rb

@@ -0,0 +1,31 @@
+module GovukComponent
+  class TaskListComponent::StatusComponent < GovukComponent::Base
+    attr_reader :id_prefix, :text, :count
+
+    def initialize(text: nil, id_prefix: nil, count: nil, classes: [], html_attributes: {})
+      @text      = text
+      @count     = count
+      @id_prefix = id_prefix
+
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+    def call
+      tag.div(status_text, **html_attributes)
+    end
+
+    def render?
+      status_text.present?
+    end
+
+  private
+
+    def default_attributes
+      { class: %w(govuk-task-list__status), id: [id_prefix, count, "status"].compact.join("-") }
+    end
+
+    def status_text
+      text || content
+    end
+  end
+end

data/app/components/govuk_component/task_list_component/title_component.rb

@@ -0,0 +1,53 @@
+module GovukComponent
+  class TaskListComponent::TitleComponent < GovukComponent::Base
+    using HTMLAttributesUtils
+
+    attr_reader :id_prefix, :text, :href, :hint, :count
+
+    def initialize(text: nil, href: nil, hint: nil, id_prefix: nil, count: nil, classes: [], html_attributes: {})
+      @text       = text
+      @href       = href
+      @hint       = hint
+      @id_prefix  = id_prefix
+      @count      = count
+
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+    def call
+      tag.div(**html_attributes) { safe_join([title_content, hint_content]) }
+    end
+
+  private
+
+    def title_content
+      (href.present?) ? govuk_link_to(text, href, **link_attributes) : text
+    end
+
+    def hint_content
+      return if hint.blank?
+
+      tag.div(hint, class: "govuk-task-list__hint", id: hint_id)
+    end
+
+    def default_attributes
+      { class: "govuk-task-list__name-and-hint" }
+    end
+
+    def link_attributes
+      { class: "govuk-task-list__link", **aria_described_by_attributes }
+    end
+
+    def aria_described_by_attributes
+      { aria: { describedby: [*status_id, *hint_id] } }
+    end
+
+    def hint_id
+      [id_prefix, count, "hint"].compact.join("-") if hint.present?
+    end
+
+    def status_id
+      [id_prefix, count, "status"].compact.join("-")
+    end
+  end
+end

data/app/components/govuk_component/task_list_component.rb

@@ -0,0 +1,37 @@
+module GovukComponent
+  class TaskListComponent < GovukComponent::Base
+    renders_many :items, ->(title: nil, href: nil, hint: nil, status: {}, classes: [], html_attributes: {}) do
+      GovukComponent::TaskListComponent::ItemComponent.new(
+        title: title,
+        href: href,
+        hint: hint,
+        id_prefix: @id_prefix,
+        count: @count,
+        status: status,
+        classes: classes,
+        html_attributes: html_attributes
+      )
+    end
+
+    def initialize(id_prefix: "task-list", classes: [], html_attributes: {})
+      @id_prefix = id_prefix
+      @count = 0
+
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+    def call
+      numbered_items = items.each.with_index(1) { |item, count| item.count = count }
+
+      tag.ul(**html_attributes) do
+        safe_join(numbered_items)
+      end
+    end
+
+  private
+
+    def default_attributes
+      { class: 'govuk-task-list' }
+    end
+  end
+end

data/app/components/govuk_component/warning_text_component.rb

@@ -23,12 +23,12 @@ private
 
   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

data/app/helpers/govuk_components_helper.rb

@@ -20,6 +20,7 @@ module GovukComponentsHelper
     govuk_table: 'GovukComponent::TableComponent',
     govuk_tabs: 'GovukComponent::TabComponent',
     govuk_tag: 'GovukComponent::TagComponent',
+    govuk_task_list: 'GovukComponent::TaskListComponent',
     govuk_warning_text: 'GovukComponent::WarningTextComponent',
   }.each do |name, klass|
     define_method(name) do |*args, **kwargs, &block|

data/app/helpers/govuk_link_helper.rb

@@ -3,156 +3,132 @@ require "html_attributes_utils"
 module GovukLinkHelper
   using HTMLAttributesUtils
 
-  def govuk_link_classes(*styles, default_class: "#{brand}-link")
-    if (invalid_styles = (styles - link_styles.keys)) && invalid_styles.any?
-      fail(ArgumentError, "invalid styles #{invalid_styles.to_sentence}. Valid styles are #{link_styles.keys.to_sentence}")
-    end
+  def govuk_link_to(name, href = nil, new_tab: false, inverse: false, muted: false, no_underline: false, no_visited_state: false, text_colour: false, visually_hidden_prefix: nil, visually_hidden_suffix: nil, **kwargs, &block)
+    link_args = extract_link_args(new_tab: new_tab, inverse: inverse, muted: muted, no_underline: no_underline, no_visited_state: no_visited_state, text_colour: text_colour, **kwargs)
+    link_text = build_text(name, visually_hidden_prefix: visually_hidden_prefix, visually_hidden_suffix: visually_hidden_suffix, &block)
 
-    [default_class] + link_styles.values_at(*styles).compact
+    link_to(link_text, href, **link_args)
   end
 
-  def govuk_button_classes(*styles, default_class: "#{brand}-button")
-    if (invalid_styles = (styles - button_styles.keys)) && invalid_styles.any?
-      fail(ArgumentError, "invalid styles #{invalid_styles.to_sentence}. Valid styles are #{button_styles.keys.to_sentence}")
-    end
+  def govuk_mail_to(email_address, name = nil, new_tab: false, inverse: false, muted: false, no_underline: false, no_visited_state: false, text_colour: false, visually_hidden_prefix: nil, visually_hidden_suffix: nil, **kwargs, &block)
+    link_args = extract_link_args(new_tab: new_tab, inverse: inverse, muted: muted, no_underline: no_underline, no_visited_state: no_visited_state, text_colour: text_colour, **kwargs)
+    link_text = build_text(name, visually_hidden_prefix: visually_hidden_prefix, visually_hidden_suffix: visually_hidden_suffix, &block)
 
-    [default_class] + button_styles.values_at(*styles).compact
+    mail_to(email_address, link_text, **link_args)
   end
 
-  def govuk_link_to(name = nil, options = nil, extra_options = {}, &block)
-    extra_options = options if block_given?
-    html_options = build_html_options(extra_options)
+  def govuk_button_to(name, href = nil, disabled: false, inverse: false, secondary: false, warning: false, visually_hidden_prefix: nil, visually_hidden_suffix: nil, **kwargs, &block)
+    button_args = extract_button_args(new_tab: false, disabled: disabled, inverse: inverse, secondary: secondary, warning: warning, **kwargs)
+    button_text = build_text(name, visually_hidden_prefix: visually_hidden_prefix, visually_hidden_suffix: visually_hidden_suffix, &block)
 
-    if block_given?
-      link_to(name, html_options, &block)
-    else
-      link_to(name, options, html_options)
-    end
+    button_to(button_text, href, **button_args)
   end
 
-  def govuk_mail_to(email_address, name = nil, extra_options = {}, &block)
-    extra_options = name if block_given?
-    html_options = build_html_options(extra_options)
+  def govuk_button_link_to(name, href = nil, new_tab: false, disabled: false, inverse: false, secondary: false, warning: false, visually_hidden_prefix: nil, visually_hidden_suffix: nil, **kwargs, &block)
+    button_args = extract_button_link_args(new_tab: new_tab, disabled: disabled, inverse: inverse, secondary: secondary, warning: warning, **kwargs)
+    button_text = build_text(name, visually_hidden_prefix: visually_hidden_prefix, visually_hidden_suffix: visually_hidden_suffix, &block)
 
-    if block_given?
-      mail_to(email_address, html_options, &block)
-    else
-      mail_to(email_address, name, html_options)
-    end
+    link_to(button_text, href, **button_args)
   end
 
-  def govuk_button_to(name = nil, options = nil, extra_options = {}, &block)
-    extra_options = options if block_given?
-    html_options = {
-      data: { module: "govuk-button" }
-    }
-
-    if extra_options && extra_options[:prevent_double_click]
-      html_options[:data]["prevent-double-click"] = "true"
-      extra_options = extra_options.except(:prevent_double_click)
-    end
-
-    html_options.merge! build_html_options(extra_options, style: :button)
+  def govuk_breadcrumb_link_to(name, href = nil, **kwargs, &block)
+    link_args = { class: "#{brand}-breadcrumbs--link" }.deep_merge_html_attributes(kwargs)
 
     if block_given?
-      button_to(options, html_options, &block)
+      link_to(block.call, href, **link_args)
     else
-      button_to(name, options, html_options)
+      link_to(name, href, **link_args)
     end
   end
 
-  def govuk_button_link_to(name = nil, options = nil, extra_options = {}, &block)
-    extra_options = options if block_given?
-    html_options = {
-      data: { module: "#{brand}-button" },
-      draggable: 'false',
-      role: 'button',
-    }.merge build_html_options(extra_options, style: :button)
-
-    if block_given?
-      link_to(name, html_options, &block)
-    else
-      link_to(name, options, html_options)
+  def govuk_link_classes(inverse: false, muted: false, no_underline: false, no_visited_state: false, text_colour: false)
+    if [text_colour, inverse, muted].count(true) > 1
+      fail("links can be only be one of text_colour, inverse or muted")
     end
-  end
 
-  def govuk_breadcrumb_link_to(name = nil, options = nil, extra_options = {}, &block)
-    extra_options = options if block_given?
-    html_options = build_html_options(extra_options, style: :breadcrumb)
+    class_names(
+      "#{brand}-link",
+      "#{brand}-link--inverse"          => inverse,
+      "#{brand}-link--muted"            => muted,
+      "#{brand}-link--no-underline"     => no_underline,
+      "#{brand}-link--no-visited-state" => no_visited_state,
+      "#{brand}-link--text-colour"      => text_colour,
+    )
+  end
 
-    if block_given?
-      link_to(name, html_options, &block)
-    else
-      link_to(name, options, html_options)
+  def govuk_button_classes(inverse: false, secondary: false, warning: false)
+    if [inverse, secondary, warning].count(true) > 1
+      fail("buttons can only be one of inverse, secondary or warning")
     end
+
+    class_names(
+      "#{brand}-button",
+      "#{brand}-button--inverse"   => inverse,
+      "#{brand}-button--secondary" => secondary,
+      "#{brand}-button--warning"   => warning,
+    )
   end
 
 private
 
-  def brand
-    Govuk::Components.brand
-  end
-
-  def link_styles
-    {
-      inverse:          "#{brand}-link--inverse",
-      muted:            "#{brand}-link--muted",
-      no_underline:     "#{brand}-link--no-underline",
-      no_visited_state: "#{brand}-link--no-visited-state",
-      text_colour:      "#{brand}-link--text-colour",
-    }
+  def new_tab_args(new_tab)
+    new_tab ? { target: "_blank", rel: "noreferrer noopener" } : {}
   end
 
-  def button_styles
-    {
-      disabled:  "#{brand}-button--disabled",
-      secondary: "#{brand}-button--secondary",
-      warning:   "#{brand}-button--warning",
-      inverse:   "#{brand}-button--inverse",
-    }
+  def button_attributes(disabled)
+    disabled ? { disabled: true, aria: { disabled: true } } : {}
   end
 
-  def build_html_options(provided_options, style: :link)
-    element_styles = { link: link_styles, button: button_styles }.fetch(style, {})
+  def extract_link_args(new_tab: false, inverse: false, muted: false, no_underline: false, no_visited_state: false, text_colour: false, **kwargs)
+    link_classes = extract_link_classes(inverse: inverse, muted: muted, no_underline: no_underline, no_visited_state: no_visited_state, text_colour: text_colour)
 
-    # we need to take a couple of extra steps here because we don't want the style
-    # params (inverse, muted, etc) to end up as extra attributes on the link.
-
-    remaining_options = remove_styles_from_provided_options(element_styles, provided_options)
+    { **link_classes, **new_tab_args(new_tab) }.deep_merge_html_attributes(kwargs)
+  end
 
-    style_classes = build_style_classes(style, extract_styles_from_provided_options(element_styles, provided_options))
+  def extract_button_link_args(new_tab: false, disabled: false, inverse: false, secondary: false, warning: false, **kwargs)
+    button_classes = extract_button_classes(inverse: inverse, secondary: secondary, warning: warning)
 
-    combine_attributes(remaining_options, class_name: style_classes)
+    { **button_classes, **button_attributes(disabled), **new_tab_args(new_tab) }.deep_merge_html_attributes(kwargs)
   end
 
-  def build_style_classes(style, provided_options)
-    keys = *provided_options&.keys
+  def extract_button_args(disabled: false, inverse: false, secondary: false, warning: false, **kwargs)
+    button_classes = extract_button_classes(inverse: inverse, secondary: secondary, warning: warning)
 
-    case style
-    when :link then govuk_link_classes(*keys)
-    when :button then govuk_button_classes(*keys)
-    when :breadcrumb then "#{brand}-breadcrumbs__link"
-    end
+    { **button_classes, **button_attributes(disabled) }.deep_merge_html_attributes(kwargs)
   end
 
-  def combine_attributes(attributes, class_name:)
-    attributes ||= {}
-
-    attributes.with_indifferent_access.tap do |attrs|
-      attrs[:class] = Array.wrap(attrs[:class]).prepend(class_name).flatten.join(" ")
-    end
+  def extract_link_classes(inverse: false, muted: false, no_underline: false, no_visited_state: false, text_colour: false)
+    {
+      class: govuk_link_classes(
+        inverse: inverse,
+        muted: muted,
+        no_underline: no_underline,
+        no_visited_state: no_visited_state,
+        text_colour: text_colour,
+      )
+    }
   end
 
-  def extract_styles_from_provided_options(styles, provided_options)
-    return {} if provided_options.blank?
+  def extract_button_classes(inverse: false, secondary: false, warning: false)
+    {
+      class: govuk_button_classes(
+        inverse: inverse,
+        secondary: secondary,
+        warning: warning
+      )
+    }
+  end
 
-    provided_options.slice(*styles.keys)
+  def brand
+    Govuk::Components.brand
   end
 
-  def remove_styles_from_provided_options(styles, provided_options)
-    return {} if provided_options.blank?
+  def build_text(original, visually_hidden_prefix:, visually_hidden_suffix:, &block)
+    prefix = (visually_hidden_prefix.present?) ? visually_hidden_prefix + " " : nil
+    text = (block_given?) ? block.call : original
+    suffix = (visually_hidden_suffix.present?) ? " " + visually_hidden_suffix : nil
 
-    provided_options&.except(*styles.keys)
+    safe_join([govuk_visually_hidden(prefix), text, govuk_visually_hidden(suffix)].compact)
   end
 end
 

data/app/helpers/govuk_rails_compatibile_link_helper.rb

@@ -0,0 +1,156 @@
+require "html_attributes_utils"
+
+module GovukRailsCompatibileLinkHelper
+  using HTMLAttributesUtils
+
+  def govuk_link_classes(*styles, default_class: "#{brand}-link")
+    if (invalid_styles = (styles - link_styles.keys)) && invalid_styles.any?
+      fail(ArgumentError, "invalid styles #{invalid_styles.to_sentence}. Valid styles are #{link_styles.keys.to_sentence}")
+    end
+
+    [default_class] + link_styles.values_at(*styles).compact
+  end
+
+  def govuk_button_classes(*styles, default_class: "#{brand}-button")
+    if (invalid_styles = (styles - button_styles.keys)) && invalid_styles.any?
+      fail(ArgumentError, "invalid styles #{invalid_styles.to_sentence}. Valid styles are #{button_styles.keys.to_sentence}")
+    end
+
+    [default_class] + button_styles.values_at(*styles).compact
+  end
+
+  def govuk_link_to(name = nil, options = nil, extra_options = {}, &block)
+    extra_options = options if block_given?
+    html_options = build_html_options(extra_options)
+
+    if block_given?
+      link_to(name, html_options, &block)
+    else
+      link_to(name, options, html_options)
+    end
+  end
+
+  def govuk_mail_to(email_address, name = nil, extra_options = {}, &block)
+    extra_options = name if block_given?
+    html_options = build_html_options(extra_options)
+
+    if block_given?
+      mail_to(email_address, html_options, &block)
+    else
+      mail_to(email_address, name, html_options)
+    end
+  end
+
+  def govuk_button_to(name = nil, options = nil, extra_options = {}, &block)
+    extra_options = options if block_given?
+    html_options = {
+      data: { module: "govuk-button" }
+    }
+
+    if extra_options && extra_options[:prevent_double_click]
+      html_options[:data]["prevent-double-click"] = "true"
+      extra_options = extra_options.except(:prevent_double_click)
+    end
+
+    html_options.merge! build_html_options(extra_options, style: :button)
+
+    if block_given?
+      button_to(options, html_options, &block)
+    else
+      button_to(name, options, html_options)
+    end
+  end
+
+  def govuk_button_link_to(name = nil, options = nil, extra_options = {}, &block)
+    extra_options = options if block_given?
+    html_options = {
+      data: { module: "#{brand}-button" },
+      draggable: 'false',
+      role: 'button',
+    }.merge build_html_options(extra_options, style: :button)
+
+    if block_given?
+      link_to(name, html_options, &block)
+    else
+      link_to(name, options, html_options)
+    end
+  end
+
+  def govuk_breadcrumb_link_to(name = nil, options = nil, extra_options = {}, &block)
+    extra_options = options if block_given?
+    html_options = build_html_options(extra_options, style: :breadcrumb)
+
+    if block_given?
+      link_to(name, html_options, &block)
+    else
+      link_to(name, options, html_options)
+    end
+  end
+
+private
+
+  def brand
+    Govuk::Components.brand
+  end
+
+  def link_styles
+    {
+      inverse:          "#{brand}-link--inverse",
+      muted:            "#{brand}-link--muted",
+      no_underline:     "#{brand}-link--no-underline",
+      no_visited_state: "#{brand}-link--no-visited-state",
+      text_colour:      "#{brand}-link--text-colour",
+    }
+  end
+
+  def button_styles
+    {
+      secondary: "#{brand}-button--secondary",
+      warning:   "#{brand}-button--warning",
+      inverse:   "#{brand}-button--inverse",
+    }
+  end
+
+  def build_html_options(provided_options, style: :link)
+    element_styles = { link: link_styles, button: button_styles }.fetch(style, {})
+
+    # we need to take a couple of extra steps here because we don't want the style
+    # params (inverse, muted, etc) to end up as extra attributes on the link.
+
+    remaining_options = remove_styles_from_provided_options(element_styles, provided_options)
+
+    style_classes = build_style_classes(style, extract_styles_from_provided_options(element_styles, provided_options))
+
+    combine_attributes(remaining_options, class_name: style_classes)
+  end
+
+  def build_style_classes(style, provided_options)
+    keys = *provided_options&.keys
+
+    case style
+    when :link then govuk_link_classes(*keys)
+    when :button then govuk_button_classes(*keys)
+    when :breadcrumb then "#{brand}-breadcrumbs__link"
+    end
+  end
+
+  def combine_attributes(attributes, class_name:)
+    attributes ||= {}
+
+    attributes.with_indifferent_access.tap do |attrs|
+      attrs[:class] = Array.wrap(attrs[:class]).prepend(class_name).flatten.join(" ")
+    end
+  end
+
+  def extract_styles_from_provided_options(styles, provided_options)
+    return {} if provided_options.blank?
+
+    provided_options.slice(*styles.keys)
+  end
+
+  def remove_styles_from_provided_options(styles, provided_options)
+    return {} if provided_options.blank?
+
+    provided_options&.except(*styles.keys)
+  end
+end

data/app/helpers/govuk_visually_hidden_helper.rb

@@ -0,0 +1,13 @@
+module GovukVisuallyHiddenHelper
+  def govuk_visually_hidden(text = nil, focusable: false, &block)
+    content = (block_given?) ? block.call : text
+
+    return if content.blank?
+
+    visually_hidden_class = focusable ? "govuk-visually-hidden-focusable" : "govuk-visually-hidden"
+
+    tag.span(content, class: visually_hidden_class)
+  end
+end
+
+ActiveSupport.on_load(:action_view) { include GovukSkipLinkHelper }

data/lib/govuk/components/engine.rb

@@ -47,14 +47,13 @@ module Govuk
     # +:default_exit_this_page_press_one_more_time_text+ Text announced by screen readers when the user must press *Shift* one more time to activate the button. Default in govuk-frontend is 'Shift, press 1 more time to exit.' Defaults to nil so govuk-frontend value is used unless overridden.
     # +:default_header_navigation_label+ 'Navigation menu'
     # +:default_header_menu_button_label+ 'Show or hide navigation menu'
-    # +:default_header_logotype+ 'GOV.UK'
     # +:default_header_homepage_url+ '/'
     # +:default_header_service_name+ nil
     # +:default_header_service_url+ '/'
     # +: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
@@ -89,14 +88,13 @@ module Govuk
       default_exit_this_page_press_one_more_time_text: nil,
       default_header_navigation_label: 'Menu',
       default_header_menu_button_label: 'Show or hide menu',
-      default_header_logotype: 'GOV.UK',
       default_header_homepage_url: '/',
       default_header_service_name: nil,
       default_header_service_url: '/',
       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,

data/lib/govuk/components/version.rb

@@ -1,5 +1,5 @@
 module Govuk
   module Components
-    VERSION = '4.1.2'.freeze
+    VERSION = '5.0.0b1'.freeze
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk-components
 version: !ruby/object:Gem::Version
-  version: 4.1.2
+  version: 5.0.0b1
 platform: ruby
 authors:
 - DfE developers
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-11-16 00:00:00.000000000 Z
+date: 2023-11-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: html-attributes-utils
@@ -53,7 +53,7 @@ dependencies:
         version: '3.3'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '3.7'
+        version: '3.8'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -63,7 +63,7 @@ dependencies:
         version: '3.3'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '3.7'
+        version: '3.8'
 - !ruby/object:Gem::Dependency
   name: deep_merge
   requirement: !ruby/object:Gem::Requirement
@@ -374,6 +374,10 @@ files:
 - app/components/govuk_component/table_component/head_component.rb
 - app/components/govuk_component/table_component/row_component.rb
 - app/components/govuk_component/tag_component.rb
+- app/components/govuk_component/task_list_component.rb
+- app/components/govuk_component/task_list_component/item_component.rb
+- app/components/govuk_component/task_list_component/status_component.rb
+- app/components/govuk_component/task_list_component/title_component.rb
 - app/components/govuk_component/traits.rb
 - app/components/govuk_component/traits/custom_html_attributes.rb
 - app/components/govuk_component/warning_text_component.rb
@@ -381,7 +385,9 @@ files:
 - app/helpers/govuk_components_helper.rb
 - app/helpers/govuk_exit_this_page_link_helper.rb
 - app/helpers/govuk_link_helper.rb
+- app/helpers/govuk_rails_compatibile_link_helper.rb
 - app/helpers/govuk_skip_link_helper.rb
+- app/helpers/govuk_visually_hidden_helper.rb
 - app/helpers/title_with_error_prefix_helper.rb
 - config/routes.rb
 - lib/govuk/components.rb
@@ -404,9 +410,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.2.33
 signing_key: