From 983acfcf94b407b9f4ff9c6e10d9624c57c7340d Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Wed, 23 Aug 2023 13:00:20 +0100 Subject: [PATCH 01/64] Add the new task list component The task list component displays all the tasks a user needs to do, and allows users to easily identify which ones are done and which they still need to do. Refs: alphagov/govuk-design-system/pull/1994 --- .../govuk_component/task_list_component.rb | 21 ++++++ .../task_list_component/item_component.rb | 45 ++++++++++++ .../task_list_component/status_component.rb | 25 +++++++ .../task_list_component/title_component.rb | 37 ++++++++++ .../task_list_component_spec.rb | 73 +++++++++++++++++++ 5 files changed, 201 insertions(+) create mode 100644 app/components/govuk_component/task_list_component.rb create mode 100644 app/components/govuk_component/task_list_component/item_component.rb create mode 100644 app/components/govuk_component/task_list_component/status_component.rb create mode 100644 app/components/govuk_component/task_list_component/title_component.rb create mode 100644 spec/components/govuk_component/task_list_component_spec.rb diff --git a/app/components/govuk_component/task_list_component.rb b/app/components/govuk_component/task_list_component.rb new file mode 100644 index 00000000..cd698915 --- /dev/null +++ b/app/components/govuk_component/task_list_component.rb @@ -0,0 +1,21 @@ +module GovukComponent + class TaskListComponent < GovukComponent::Base + renders_many :items, "GovukComponent::TaskListComponent::ItemComponent" + + def initialize(classes: [], html_attributes: {}) + super(classes: classes, html_attributes: html_attributes) + end + + def call + tag.ul(**html_attributes) { safe_join(items) } + end + + private + + def default_attributes + { + class: 'govuk-task-list' + } + end + end +end diff --git a/app/components/govuk_component/task_list_component/item_component.rb b/app/components/govuk_component/task_list_component/item_component.rb new file mode 100644 index 00000000..fd310f7c --- /dev/null +++ b/app/components/govuk_component/task_list_component/item_component.rb @@ -0,0 +1,45 @@ +module GovukComponent + class TaskListComponent::ItemComponent < GovukComponent::Base + renders_one :title, "GovukComponent::TaskListComponent::TitleComponent" + renders_one :status, "GovukComponent::TaskListComponent::StatusComponent" + + attr_reader :title_text, :status, :href, :hint + + def initialize(title: nil, href: nil, hint: nil, status: nil, classes: [], html_attributes: {}) + @title_text = title + @href = href + @hint = hint + @status = status + + super(classes: classes, html_attributes: html_attributes) + end + + def call + tag.li(safe_join([title_content, hint_content, status_content]), **html_attributes) + end + + private + + def title_content + title || with_title(text: title_text, href: href, hint: hint) + end + + def status_content + case status + when String + with_status(text: status) + when Hash + with_status(**status) + else status + end + end + + def hint_content + tag.div(hint, class: %w(govuk-task-list__task_hint)) + end + + def default_attributes + { class: 'govuk-task-list__item' } + end + end +end diff --git a/app/components/govuk_component/task_list_component/status_component.rb b/app/components/govuk_component/task_list_component/status_component.rb new file mode 100644 index 00000000..50a537e5 --- /dev/null +++ b/app/components/govuk_component/task_list_component/status_component.rb @@ -0,0 +1,25 @@ +module GovukComponent + class TaskListComponent::StatusComponent < GovukComponent::Base + attr_reader :text, :href, :colour + + def initialize(text: nil, href: nil, colour: nil, classes: [], html_attributes: {}) + @text = text + @href = href + @colour = colour + + super(classes: classes, html_attributes: html_attributes) + end + + def call + tag.div(**html_attributes) do + render(GovukComponent::TagComponent.new(text: text, colour: colour)) + end + end + + private + + def default_attributes + { class: %w(govuk-task-list__status) } + end + end +end diff --git a/app/components/govuk_component/task_list_component/title_component.rb b/app/components/govuk_component/task_list_component/title_component.rb new file mode 100644 index 00000000..0d12f00a --- /dev/null +++ b/app/components/govuk_component/task_list_component/title_component.rb @@ -0,0 +1,37 @@ +module GovukComponent + class TaskListComponent::TitleComponent < GovukComponent::Base + attr_reader :text, :href, :hint + + def initialize(text: nil, href: nil, hint: nil, classes: [], html_attributes: {}) + @text = text + @href = href + @hint = hint + + super(classes: classes, html_attributes: html_attributes) + end + + def call + tag.div(**html_attributes) { title_content } + end + + private + + def title_content + return link if href.present? + + text + end + + def link + govuk_link_to(text, href, class: "govuk-task-list__link") + end + + def hint_content + tag.div(hint, class: "govuk-task-list__task_hint") + end + + def default_attributes + { class: "govuk-task-list__task-name-and-hint" } + end + end +end diff --git a/spec/components/govuk_component/task_list_component_spec.rb b/spec/components/govuk_component/task_list_component_spec.rb new file mode 100644 index 00000000..733abce6 --- /dev/null +++ b/spec/components/govuk_component/task_list_component_spec.rb @@ -0,0 +1,73 @@ +require 'spec_helper' + +RSpec.describe(GovukComponent::TaskListComponent, type: :component) do + let(:component_css_class) { 'govuk-task-list' } + let(:kwargs) { {} } + let(:list_item_one_kwargs) { { title: "One", status: "in progress" } } + let(:list_item_two_kwargs) { { title: "Two", status: "ok" } } + + subject! do + render_inline(GovukComponent::TaskListComponent.new(**kwargs)) do |task_list| + task_list.with_item(**list_item_one_kwargs) + task_list.with_item(**list_item_two_kwargs) + end + end + + it_behaves_like 'a component that accepts custom classes' + it_behaves_like 'a component that accepts custom HTML attributes' + + describe "rendering items with arguments" do + specify "renders a list with the correct class and contents" do + expect(rendered_content).to have_tag("ul", with: { class: component_css_class }) do + with_tag("li", text: "One", with: { class: "govuk-task-list__item" }) do + with_tag("div", with: { class: "govuk-task-list__status" }, text: "in progress") + end + + with_tag("li", text: "Two", with: { class: "govuk-task-list__item" }) do + with_tag("div", with: { class: "govuk-task-list__status" }, text: "ok") + end + end + end + + context "when href is present" do + let(:href) { "/item-one" } + let(:list_item_one_kwargs) { { title: "One", status: "in progress", href: href } } + + specify "a link is rendered with the correct attributes" do + expect(rendered_content).to have_tag("li") do + with_tag("a", with: { href: href, class: %w(govuk-link govuk-task-list__link) }) + end + end + end + + context "when a hint present" do + let(:hint_two) { "Two comes after one" } + let(:list_item_two_kwargs) { { title: "Two", status: "ok", hint: hint_two } } + + specify "a hint is rendered with the correct attributes" do + expect(rendered_content).to have_tag("li") do + with_tag("div", text: hint_two, with: { class: "govuk-task-list__task_hint" }) + end + end + end + + context "when a status tag is present" do + let(:status_text) { "Everything's OK" } + let(:list_item_two_kwargs) { { title: "Two", status: "ok" } } + + specify "a status tag is rendered with the correct attributes and text" do + expect(rendered_content).to have_tag("li") do + with_tag("div", with: { class: %w(govuk-task-list__status) }) do + with_tag("strong", with: { class: %w(govuk-tag) }) + end + end + end + end + end + + describe "rendering an entire task list with data" do + end + + describe "rendering an entire task list with blocks" do + end +end From 985cd70b8ccfd49759f9fc1e756a065023b8197d Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Wed, 23 Aug 2023 13:09:05 +0100 Subject: [PATCH 02/64] Register the govuk_task_list helper --- app/helpers/govuk_components_helper.rb | 1 + spec/helpers/govuk_components_helper_spec.rb | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/app/helpers/govuk_components_helper.rb b/app/helpers/govuk_components_helper.rb index faf309db..f4cb9bbb 100644 --- a/app/helpers/govuk_components_helper.rb +++ b/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| diff --git a/spec/helpers/govuk_components_helper_spec.rb b/spec/helpers/govuk_components_helper_spec.rb index 98761e24..bd452cdc 100644 --- a/spec/helpers/govuk_components_helper_spec.rb +++ b/spec/helpers/govuk_components_helper_spec.rb @@ -144,6 +144,13 @@ def initialize(helper_method:, klass:, args:, kwargs:, css_matcher:, block: nil) kwargs: { text: 'Tag' }, css_matcher: %(.govuk-tag) }, + { + helper_method: :govuk_task_list, + klass: GovukComponent::TaskListComponent, + args: [], + kwargs: {}, + css_matcher: %(.govuk-task-list) + }, { helper_method: :govuk_warning_text, klass: GovukComponent::WarningTextComponent, From 5872342e0a3cc5f22bb595593c38093f7a54c781 Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Wed, 23 Aug 2023 13:10:54 +0100 Subject: [PATCH 03/64] Add sample task list styles These are only needed to preview the guide until the task list is released and available in govuk-frontend. This commit can be dropped prior to merge. --- guide/content/stylesheets/application.scss | 74 ++++++++++++++++++++++ 1 file changed, 74 insertions(+) diff --git a/guide/content/stylesheets/application.scss b/guide/content/stylesheets/application.scss index 66b21a04..b4d22de2 100644 --- a/guide/content/stylesheets/application.scss +++ b/guide/content/stylesheets/application.scss @@ -104,3 +104,77 @@ $govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colo } } } + +@include govuk-exports("govuk/component/task-list") { + $govuk-task-list-hover-colour: govuk-colour("light-grey"); + + .govuk-task-list { + @include govuk-font($size: 19); + margin-top: 0; + @include govuk-responsive-margin(6, "bottom"); + padding: 0; + list-style-type: none; + } + + // This uses table layout so that the task name and status always appear side-by-side, with the width of + // each 'column' being flexible depending upon the length of the task names and statuses. + // + // The position is set to 'relative' so than an absolutely-positioned transparent element box + // can be added within the link so that the whole row can be clickable. + .govuk-task-list__item { + display: table; + position: relative; + width: 100%; + margin-bottom: 0; + padding-top: govuk-spacing(2); + padding-bottom: govuk-spacing(2); + border-bottom: 1px solid $govuk-border-colour; + } + + .govuk-task-list__item:first-child { + border-top: 1px solid $govuk-border-colour; + } + + // This class is added to the
  • elements where the task name is a link. + // The background hover colour is added to help indicate that the whole row is clickable, rather + // than just the visible link text. + .govuk-task-list__item--with-link:hover { + background: $govuk-task-list-hover-colour; + } + + .govuk-task-list__name-and-hint { + display: table-cell; + vertical-align: top; + @include govuk-text-colour; + } + + .govuk-task-list__status { + display: table-cell; + padding-left: govuk-spacing(2); + text-align: right; + vertical-align: top; + @include govuk-text-colour; + } + + .govuk-task-list__status--cannot-start-yet { + color: $govuk-secondary-text-colour; + } + + // This adds an empty transparent box covering the whole row, including the task status and + // any hint text. Because this is generated within the link element, this allows the whole area + // to be clickable. + .govuk-task-list__link::after { + content: ""; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + .govuk-task-list__hint { + margin-top: govuk-spacing(1); + color: $govuk-secondary-text-colour; + } +} From 98982db281b8870bfb9bd48c29387d0d91514a37 Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Wed, 23 Aug 2023 13:10:29 +0100 Subject: [PATCH 04/64] Add guide page for the task list --- guide/content/components/task-list.slim | 18 +++++++++++++++++ guide/lib/examples/task_list_helpers.rb | 27 +++++++++++++++++++++++++ guide/lib/helpers.rb | 5 +++++ guide/lib/helpers/link_helpers.rb | 1 + 4 files changed, 51 insertions(+) create mode 100644 guide/content/components/task-list.slim create mode 100644 guide/lib/examples/task_list_helpers.rb diff --git a/guide/content/components/task-list.slim b/guide/content/components/task-list.slim new file mode 100644 index 00000000..a8062db3 --- /dev/null +++ b/guide/content/components/task-list.slim @@ -0,0 +1,18 @@ +--- +title: Task list +--- + +p The task list component displays all the tasks a user needs to do, and allows + users to easily identify which ones are done and which they still need to do. + +== render('/partials/example.*', + caption: "Default task list", + code: default_task_list) + +== render('/partials/example.*', + caption: "Task list with coloured tags", + code: task_list_with_coloured_tags) do + + markdown: + Task statuses are [tags](/components/tag) and can be customised by passing + the arguments as a hash. diff --git a/guide/lib/examples/task_list_helpers.rb b/guide/lib/examples/task_list_helpers.rb new file mode 100644 index 00000000..fe5779c5 --- /dev/null +++ b/guide/lib/examples/task_list_helpers.rb @@ -0,0 +1,27 @@ +module Examples + module TaskListHelpers + def default_task_list + <<~SNIPPET + = govuk_task_list do |task_list| + - task_list.with_item(title: "Contact details", href: '#', status: "Done") + - task_list.with_item(title: "Project details", href: '#', status: "Done") + - task_list.with_item(title: "Funding", href: '#', status: "Scheduled") + SNIPPET + end + + def task_list_with_coloured_tags + <<~SNIPPET + = govuk_task_list do |task_list| + - task_list.with_item(title: "Design", status: { text: "Done", colour: "green" }) + - task_list.with_item(title: "Prototype", status: { text: "Done", colour: "green" }) + - task_list.with_item(title: "Implementation", status: { text: "In progress", colour: "yellow" }) + - task_list.with_item(title: "User acceptance testing", status: { text: "Postponed", colour: "purple" }) + - task_list.with_item(title: "Handover", status: { text: "Not yet started", colour: "red" }) + SNIPPET + end + + def task_list_with_data + # TODO: demonstrate building a task list with an array of hashes + end + end +end diff --git a/guide/lib/helpers.rb b/guide/lib/helpers.rb index d752440a..89d864f6 100644 --- a/guide/lib/helpers.rb +++ b/guide/lib/helpers.rb @@ -79,6 +79,10 @@ class Application < Rails::Application; end require 'components/govuk_component/table_component/foot_component' require 'components/govuk_component/tab_component' require 'components/govuk_component/tag_component' +require 'components/govuk_component/task_list_component' +require 'components/govuk_component/task_list_component/item_component' +require 'components/govuk_component/task_list_component/status_component' +require 'components/govuk_component/task_list_component/title_component' require 'components/govuk_component/warning_text_component' require 'helpers/govuk_link_helper' @@ -105,6 +109,7 @@ class Application < Rails::Application; end use_helper Examples::TableHelpers use_helper Examples::TabsHelpers use_helper Examples::TagHelpers +use_helper Examples::TaskListHelpers use_helper Examples::WarningTextHelpers use_helper Examples::CommonOptionsHelpers use_helper Examples::BackToTopLinkHelpers diff --git a/guide/lib/helpers/link_helpers.rb b/guide/lib/helpers/link_helpers.rb index 2de3e465..ecb4a837 100644 --- a/guide/lib/helpers/link_helpers.rb +++ b/guide/lib/helpers/link_helpers.rb @@ -26,6 +26,7 @@ def component_links "Table" => "/components/table", "Tabs" => "/components/tabs", "Tag" => "/components/tag", + "Task list" => "/components/task-list", "Warning text" => "/components/warning-text", } end From 509dc643107b39d805c7eba17558ea9c4eab4beb Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 26 Oct 2023 20:01:38 +0100 Subject: [PATCH 05/64] Update to use govuk-frontend v5 --- .../content/assets/images/govuk-mask-icon.svg | 14 +++++----- guide/content/stylesheets/application.scss | 8 +----- guide/layouts/partials/footer.slim | 7 ++--- guide/package-lock.json | 26 ++++++++++++++----- guide/package.json | 4 +-- spec/dummy/package.json | 2 +- 6 files changed, 34 insertions(+), 27 deletions(-) diff --git a/guide/content/assets/images/govuk-mask-icon.svg b/guide/content/assets/images/govuk-mask-icon.svg index 2cf32d6c..d7dc2bbd 100644 --- a/guide/content/assets/images/govuk-mask-icon.svg +++ b/guide/content/assets/images/govuk-mask-icon.svg @@ -1,7 +1,7 @@ - - - - - - - + + + + + + + diff --git a/guide/content/stylesheets/application.scss b/guide/content/stylesheets/application.scss index 66b21a04..ad1065fc 100644 --- a/guide/content/stylesheets/application.scss +++ b/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; diff --git a/guide/layouts/partials/footer.slim b/guide/layouts/partials/footer.slim index 940f534a..31890615 100644 --- a/guide/layouts/partials/footer.slim +++ b/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 '{path-to-javascript}/govuk-frontend.min.js' + | initAll() ; diff --git a/guide/package-lock.json b/guide/package-lock.json index aa22949b..65b68709 100644 --- a/guide/package-lock.json +++ b/guide/package-lock.json @@ -10,7 +10,7 @@ "hasInstallScript": true, "license": "ISC", "dependencies": { - "govuk-frontend": "^4.7.0", + "govuk-frontend": "5.0.0-beta.0", "sass": "^1.52.1" } }, @@ -107,11 +107,17 @@ } }, "node_modules/govuk-frontend": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-4.7.0.tgz", - "integrity": "sha512-0OsdCusF5qvLWwKziU8zqxiC0nq6WP0ZQuw51ymZ/1V0tO71oIKMlSLN2S9bm8RcEGSoidPt2A34gKxePrLjvg==", + "version": "5.0.0-beta.0", + "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.0.0-beta.0.tgz", + "integrity": "sha512-z6auFqWFVrMqjwRkDpDkVs7lHUbDCskPS4MaCsOYE8/wDSuwjE8CW4PRv+mck3uixNw3c80D0ox6WKIGyk4zUQ==", "engines": { "node": ">= 4.2.0" + }, + "optionalDependencies": { + "@govuk-frontend/config": "*", + "@govuk-frontend/helpers": "*", + "@govuk-frontend/lib": "*", + "@govuk-frontend/tasks": "*" } }, "node_modules/immutable": { @@ -284,9 +290,15 @@ } }, "govuk-frontend": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-4.7.0.tgz", - "integrity": "sha512-0OsdCusF5qvLWwKziU8zqxiC0nq6WP0ZQuw51ymZ/1V0tO71oIKMlSLN2S9bm8RcEGSoidPt2A34gKxePrLjvg==" + "version": "5.0.0-beta.0", + "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.0.0-beta.0.tgz", + "integrity": "sha512-z6auFqWFVrMqjwRkDpDkVs7lHUbDCskPS4MaCsOYE8/wDSuwjE8CW4PRv+mck3uixNw3c80D0ox6WKIGyk4zUQ==", + "requires": { + "@govuk-frontend/config": "*", + "@govuk-frontend/helpers": "*", + "@govuk-frontend/lib": "*", + "@govuk-frontend/tasks": "*" + } }, "immutable": { "version": "4.2.2", diff --git a/guide/package.json b/guide/package.json index c2152bb8..5b3500fb 100644 --- a/guide/package.json +++ b/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" } } diff --git a/spec/dummy/package.json b/spec/dummy/package.json index 544fb697..263941aa 100644 --- a/spec/dummy/package.json +++ b/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" } } From f50bab1c2f59fecf9e1d1a0b6ea98a2c5e4afb80 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 26 Oct 2023 20:03:59 +0100 Subject: [PATCH 06/64] Update script --- guide/layouts/example.slim | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/guide/layouts/example.slim b/guide/layouts/example.slim index 017b2cf0..7c2a1047 100644 --- a/guide/layouts/example.slim +++ b/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() ; From 983a54b6e6af95375d850a833784e587de76968c Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 26 Oct 2023 20:07:03 +0100 Subject: [PATCH 07/64] Fix path --- guide/layouts/partials/footer.slim | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/layouts/partials/footer.slim b/guide/layouts/partials/footer.slim index 31890615..660f71da 100644 --- a/guide/layouts/partials/footer.slim +++ b/guide/layouts/partials/footer.slim @@ -27,5 +27,5 @@ footer.govuk-footer role="contentinfo" script type="module" src="/javascripts/govuk-frontend.min.js" script type="module" - | import { initAll } from '{path-to-javascript}/govuk-frontend.min.js' + | import { initAll } from '/javascripts/govuk-frontend.min.js'; | initAll() ; From 8193e010d93ceb66126b0442070a2a2bd7f106f8 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 26 Oct 2023 20:16:11 +0100 Subject: [PATCH 08/64] Update script tag --- guide/layouts/partials/header.slim | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/guide/layouts/partials/header.slim b/guide/layouts/partials/header.slim index db782b29..9fc59114 100644 --- a/guide/layouts/partials/header.slim +++ b/guide/layouts/partials/header.slim @@ -1,5 +1,6 @@ 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 From 55352960e99582a53df2657268380f0f1ddf68f0 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 26 Oct 2023 20:24:52 +0100 Subject: [PATCH 09/64] Remove extra line break --- guide/layouts/partials/header.slim | 1 - 1 file changed, 1 deletion(-) diff --git a/guide/layouts/partials/header.slim b/guide/layouts/partials/header.slim index 9fc59114..47e4d550 100644 --- a/guide/layouts/partials/header.slim +++ b/guide/layouts/partials/header.slim @@ -1,7 +1,6 @@ script | document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : ''); - a.govuk-skip-link href="#main-content" | Skip to main content From 8f8ae1862e8416c40fa24c1cc64edf59d3fe304c Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 26 Oct 2023 20:30:39 +0100 Subject: [PATCH 10/64] Update tags: capitalisation and new colour (light-blue) --- app/components/govuk_component/tag_component.rb | 2 +- guide/lib/examples/tag_helpers.rb | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/govuk_component/tag_component.rb b/app/components/govuk_component/tag_component.rb index b8c10269..6e05dc7f 100644 --- a/app/components/govuk_component/tag_component.rb +++ b/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 diff --git a/guide/lib/examples/tag_helpers.rb b/guide/lib/examples/tag_helpers.rb index df2583a4..4e60b12c 100644 --- a/guide/lib/examples/tag_helpers.rb +++ b/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 From 7091dd51620cdc592413272672c5d59fc0ed9211 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 26 Oct 2023 20:34:25 +0100 Subject: [PATCH 11/64] Update class name of visually hidden text in warning component --- app/components/govuk_component/warning_text_component.rb | 6 +++--- guide/content/components/start-button.slim | 2 +- .../warning_text_component_configuration_spec.rb | 2 +- .../govuk_component/warning_text_component_spec.rb | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/components/govuk_component/warning_text_component.rb b/app/components/govuk_component/warning_text_component.rb index bb82d131..7438d909 100644 --- a/app/components/govuk_component/warning_text_component.rb +++ b/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 diff --git a/guide/content/components/start-button.slim b/guide/content/components/start-button.slim index 754c62d7..66dcb769 100644 --- a/guide/content/components/start-button.slim +++ b/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 diff --git a/spec/components/govuk_component/configuration/warning_text_component_configuration_spec.rb b/spec/components/govuk_component/configuration/warning_text_component_configuration_spec.rb index 9b235748..ea6ce3e9 100644 --- a/spec/components/govuk_component/configuration/warning_text_component_configuration_spec.rb +++ b/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 diff --git a/spec/components/govuk_component/warning_text_component_spec.rb b/spec/components/govuk_component/warning_text_component_spec.rb index 2847ba57..fbbe9d6f 100644 --- a/spec/components/govuk_component/warning_text_component_spec.rb +++ b/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 From 1923443a69dcd65ffc965ac53ad30b9889f9c357 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 26 Oct 2023 20:36:53 +0100 Subject: [PATCH 12/64] Remove data-module from details --- app/components/govuk_component/details_component.rb | 2 +- spec/components/govuk_component/details_component_spec.rb | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/govuk_component/details_component.rb b/app/components/govuk_component/details_component.rb index cef749ba..fecf59a7 100644 --- a/app/components/govuk_component/details_component.rb +++ b/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 diff --git a/spec/components/govuk_component/details_component_spec.rb b/spec/components/govuk_component/details_component_spec.rb index 7b5ca9fb..353a02a6 100644 --- a/spec/components/govuk_component/details_component_spec.rb +++ b/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 From 266d1068bf5a91449a147c172e8585cb11b567be Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 26 Oct 2023 20:43:57 +0100 Subject: [PATCH 13/64] Remove crown fallback image --- .../govuk_component/header_component.html.erb | 6 ------ app/components/govuk_component/header_component.rb | 11 ----------- .../govuk_component/header_component_spec.rb | 13 ------------- 3 files changed, 30 deletions(-) diff --git a/app/components/govuk_component/header_component.html.erb b/app/components/govuk_component/header_component.html.erb index 021d22eb..8ffa58bf 100644 --- a/app/components/govuk_component/header_component.html.erb +++ b/app/components/govuk_component/header_component.html.erb @@ -14,12 +14,6 @@ <% end %> - <% if crown_fallback_image_path.present? %> - - <% end %> - <%= tag.span(logotype, class: "#{brand}-header__logotype-text") %> <% end %> diff --git a/app/components/govuk_component/header_component.rb b/app/components/govuk_component/header_component.rb index f983ea3e..7141220f 100644 --- a/app/components/govuk_component/header_component.rb +++ b/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 diff --git a/spec/components/govuk_component/header_component_spec.rb b/spec/components/govuk_component/header_component_spec.rb index 0ac855ad..89a3c3cf 100644 --- a/spec/components/govuk_component/header_component_spec.rb +++ b/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 From d156652944fe4e051f5382aceff9bd1969b17524 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 26 Oct 2023 20:46:54 +0100 Subject: [PATCH 14/64] Remove disabled option from govuk_button_to --- app/helpers/govuk_link_helper.rb | 1 - spec/helpers/govuk_link_helper_spec.rb | 5 ++--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/app/helpers/govuk_link_helper.rb b/app/helpers/govuk_link_helper.rb index 5d16c5a8..1dc25001 100644 --- a/app/helpers/govuk_link_helper.rb +++ b/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", diff --git a/spec/helpers/govuk_link_helper_spec.rb b/spec/helpers/govuk_link_helper_spec.rb index 8922341b..5a31fd88 100644 --- a/spec/helpers/govuk_link_helper_spec.rb +++ b/spec/helpers/govuk_link_helper_spec.rb @@ -51,7 +51,6 @@ { secondary: 'govuk-button--secondary', warning: 'govuk-button--warning', - disabled: 'govuk-button--disabled', inverse: 'govuk-button--inverse', }.each do |style, css_class| describe "generating a #{style}-style button with '#{style}: true'" do @@ -211,11 +210,11 @@ end context "adding custom classes" do - subject { govuk_button_to(button_text, button_params, { class: "yellow", disabled: true }) } + subject { govuk_button_to(button_text, button_params, { class: "yellow" }) } specify "renders a form with an button that has the custom classes" do expect(subject).to have_tag("form", with: { class: "button_to", action: button_url }) do - with_tag("button", with: { type: "submit", class: %w(govuk-button yellow govuk-button--disabled), "data-module": "govuk-button" }, text: button_text) + with_tag("button", with: { type: "submit", class: %w(govuk-button yellow), "data-module": "govuk-button" }, text: button_text) end end end From 89bd24f180deaaff124bdd93721dcfe9e7af9122 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 26 Oct 2023 20:50:17 +0100 Subject: [PATCH 15/64] Update default aria label for pagination --- lib/govuk/components/engine.rb | 4 ++-- spec/components/govuk_component/pagination_component_spec.rb | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/govuk/components/engine.rb b/lib/govuk/components/engine.rb index 6926a852..cabe2b6c 100644 --- a/lib/govuk/components/engine.rb +++ b/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, diff --git a/spec/components/govuk_component/pagination_component_spec.rb b/spec/components/govuk_component/pagination_component_spec.rb index f0634226..3ba9cac0 100644 --- a/spec/components/govuk_component/pagination_component_spec.rb +++ b/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 From 4b77b6057df28108b536a9a1bdc32615655bbaa3 Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Sun, 8 Oct 2023 19:10:32 +0100 Subject: [PATCH 16/64] Set supported Rails versions to 7.0.8 and 7.1.0 This maintains the usual flow of supporting the most recent two major versions --- .github/workflows/publish.yml | 2 +- .github/workflows/tests.yml | 2 +- README.md | 2 +- guide/content/introduction/supported-versions.slim | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 622f7553..9a69edd7 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -21,7 +21,7 @@ jobs: - name: Install gems env: - RAILS_VERSION: '6.1.7.4' + RAILS_VERSION: '7.0.8' run: | gem install bundler bundle install --jobs 4 --retry 3 diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 3bbf0457..a0dcd82e 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -10,7 +10,7 @@ jobs: fail-fast: false matrix: ruby: ['3.0.6', '3.1.4', '3.2.2'] - rails: ['6.1.7', '7.0.6'] + rails: ['7.0.8', '7.1.0'] runs-on: ubuntu-20.04 name: Testing with Ruby ${{ matrix.ruby }} and Rails ${{ matrix.rails }} steps: diff --git a/README.md b/README.md index 61f003e8..a6671a76 100644 --- a/README.md +++ b/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. diff --git a/guide/content/introduction/supported-versions.slim b/guide/content/introduction/supported-versions.slim index f872dbc2..1a2a6b3f 100644 --- a/guide/content/introduction/supported-versions.slim +++ b/guide/content/introduction/supported-versions.slim @@ -30,9 +30,9 @@ table.govuk-table.app-table--constrained th.govuk-table__header scope="row" | Ruby on Rails td.govuk-table__cell.govuk-table__cell--numeric - | 7.0.6 + | 7.1.0 br - | 6.1.7 + | 7.0.8 td.govuk-table__cell.govuk-table__cell--numeric | 6.1.4.4 br From aac8008ef5b8b7ae879a0a9ee68be26d3482c4b8 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Fri, 27 Oct 2023 16:06:01 +0100 Subject: [PATCH 17/64] Remove temporary css --- guide/content/stylesheets/application.scss | 74 ---------------------- 1 file changed, 74 deletions(-) diff --git a/guide/content/stylesheets/application.scss b/guide/content/stylesheets/application.scss index 76d857b4..ad1065fc 100644 --- a/guide/content/stylesheets/application.scss +++ b/guide/content/stylesheets/application.scss @@ -98,77 +98,3 @@ $govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colo } } } - -@include govuk-exports("govuk/component/task-list") { - $govuk-task-list-hover-colour: govuk-colour("light-grey"); - - .govuk-task-list { - @include govuk-font($size: 19); - margin-top: 0; - @include govuk-responsive-margin(6, "bottom"); - padding: 0; - list-style-type: none; - } - - // This uses table layout so that the task name and status always appear side-by-side, with the width of - // each 'column' being flexible depending upon the length of the task names and statuses. - // - // The position is set to 'relative' so than an absolutely-positioned transparent element box - // can be added within the link so that the whole row can be clickable. - .govuk-task-list__item { - display: table; - position: relative; - width: 100%; - margin-bottom: 0; - padding-top: govuk-spacing(2); - padding-bottom: govuk-spacing(2); - border-bottom: 1px solid $govuk-border-colour; - } - - .govuk-task-list__item:first-child { - border-top: 1px solid $govuk-border-colour; - } - - // This class is added to the
  • elements where the task name is a link. - // The background hover colour is added to help indicate that the whole row is clickable, rather - // than just the visible link text. - .govuk-task-list__item--with-link:hover { - background: $govuk-task-list-hover-colour; - } - - .govuk-task-list__name-and-hint { - display: table-cell; - vertical-align: top; - @include govuk-text-colour; - } - - .govuk-task-list__status { - display: table-cell; - padding-left: govuk-spacing(2); - text-align: right; - vertical-align: top; - @include govuk-text-colour; - } - - .govuk-task-list__status--cannot-start-yet { - color: $govuk-secondary-text-colour; - } - - // This adds an empty transparent box covering the whole row, including the task status and - // any hint text. Because this is generated within the link element, this allows the whole area - // to be clickable. - .govuk-task-list__link::after { - content: ""; - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - - .govuk-task-list__hint { - margin-top: govuk-spacing(1); - color: $govuk-secondary-text-colour; - } -} From 627ae809ee433ca5e02a61bca7733cf949ed3de7 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Fri, 27 Oct 2023 16:32:56 +0100 Subject: [PATCH 18/64] Simplify task list to not assume a tag in status --- .../task_list_component/status_component.rb | 10 +++------- guide/lib/examples/task_list_helpers.rb | 16 ++++++++-------- 2 files changed, 11 insertions(+), 15 deletions(-) diff --git a/app/components/govuk_component/task_list_component/status_component.rb b/app/components/govuk_component/task_list_component/status_component.rb index 50a537e5..30d34755 100644 --- a/app/components/govuk_component/task_list_component/status_component.rb +++ b/app/components/govuk_component/task_list_component/status_component.rb @@ -1,19 +1,15 @@ module GovukComponent class TaskListComponent::StatusComponent < GovukComponent::Base - attr_reader :text, :href, :colour + attr_reader :text - def initialize(text: nil, href: nil, colour: nil, classes: [], html_attributes: {}) + def initialize(text: nil, classes: [], html_attributes: {}) @text = text - @href = href - @colour = colour super(classes: classes, html_attributes: html_attributes) end def call - tag.div(**html_attributes) do - render(GovukComponent::TagComponent.new(text: text, colour: colour)) - end + tag.div(text, **html_attributes) end private diff --git a/guide/lib/examples/task_list_helpers.rb b/guide/lib/examples/task_list_helpers.rb index fe5779c5..5d072071 100644 --- a/guide/lib/examples/task_list_helpers.rb +++ b/guide/lib/examples/task_list_helpers.rb @@ -3,20 +3,20 @@ module TaskListHelpers def default_task_list <<~SNIPPET = govuk_task_list do |task_list| - - task_list.with_item(title: "Contact details", href: '#', status: "Done") - - task_list.with_item(title: "Project details", href: '#', status: "Done") - - task_list.with_item(title: "Funding", href: '#', status: "Scheduled") + - task_list.with_item(title: "Contact details", href: '#', status: "Completed") + - task_list.with_item(title: "Project details", href: '#', status: "Completed") + - task_list.with_item(title: "Funding", href: '#', status: govuk_tag(text: "Incomplete", colour: "blue")) SNIPPET end def task_list_with_coloured_tags <<~SNIPPET = govuk_task_list do |task_list| - - task_list.with_item(title: "Design", status: { text: "Done", colour: "green" }) - - task_list.with_item(title: "Prototype", status: { text: "Done", colour: "green" }) - - task_list.with_item(title: "Implementation", status: { text: "In progress", colour: "yellow" }) - - task_list.with_item(title: "User acceptance testing", status: { text: "Postponed", colour: "purple" }) - - task_list.with_item(title: "Handover", status: { text: "Not yet started", colour: "red" }) + - task_list.with_item(title: "Design", status: govuk_tag(text: "Incomplete", colour: "green")) + - task_list.with_item(title: "Prototype", status: govuk_tag(text: "Incomplete", colour: "blue")) + - task_list.with_item(title: "Implementation", status: govuk_tag(text: "Incomplete", colour: "light-blue")) + - task_list.with_item(title: "User acceptance testing", status: govuk_tag(text: "Incomplete", colour: "red")) + - task_list.with_item(title: "Handover", status: govuk_tag(text: "Incomplete", colour: "turquoise")) SNIPPET end From 1e37f31f6beb82fd5388876b527d40c03ab62935 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Fri, 27 Oct 2023 16:38:46 +0100 Subject: [PATCH 19/64] Use tag helper within tests --- spec/components/govuk_component/task_list_component_spec.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/spec/components/govuk_component/task_list_component_spec.rb b/spec/components/govuk_component/task_list_component_spec.rb index 733abce6..d358cd1a 100644 --- a/spec/components/govuk_component/task_list_component_spec.rb +++ b/spec/components/govuk_component/task_list_component_spec.rb @@ -51,9 +51,9 @@ end end - context "when a status tag is present" do + context "when a tag is present in the status" do let(:status_text) { "Everything's OK" } - let(:list_item_two_kwargs) { { title: "Two", status: "ok" } } + let(:list_item_two_kwargs) { { title: "Two", status: govuk_tag("ok") } } specify "a status tag is rendered with the correct attributes and text" do expect(rendered_content).to have_tag("li") do From 3ae6c35b7e5e4205a9503466ea6645d435ce9302 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Fri, 27 Oct 2023 16:41:00 +0100 Subject: [PATCH 20/64] Fix test --- spec/components/govuk_component/task_list_component_spec.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/components/govuk_component/task_list_component_spec.rb b/spec/components/govuk_component/task_list_component_spec.rb index d358cd1a..a1ffdcd8 100644 --- a/spec/components/govuk_component/task_list_component_spec.rb +++ b/spec/components/govuk_component/task_list_component_spec.rb @@ -53,7 +53,7 @@ context "when a tag is present in the status" do let(:status_text) { "Everything's OK" } - let(:list_item_two_kwargs) { { title: "Two", status: govuk_tag("ok") } } + let(:list_item_two_kwargs) { { title: "Two", status: helper.govuk_tag(text: "ok") } } specify "a status tag is rendered with the correct attributes and text" do expect(rendered_content).to have_tag("li") do From 3efc9414e2124ed90715358ada900e605e85efb3 Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Fri, 27 Oct 2023 12:22:01 +0100 Subject: [PATCH 21/64] Allow plain text statuses in the task list --- .../govuk_component/task_list_component.rb | 4 +--- .../task_list_component/item_component.rb | 21 +++++++++++++------ 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/app/components/govuk_component/task_list_component.rb b/app/components/govuk_component/task_list_component.rb index cd698915..0a2313e8 100644 --- a/app/components/govuk_component/task_list_component.rb +++ b/app/components/govuk_component/task_list_component.rb @@ -13,9 +13,7 @@ def call private def default_attributes - { - class: 'govuk-task-list' - } + { class: 'govuk-task-list' } end end end diff --git a/app/components/govuk_component/task_list_component/item_component.rb b/app/components/govuk_component/task_list_component/item_component.rb index fd310f7c..cd528b2d 100644 --- a/app/components/govuk_component/task_list_component/item_component.rb +++ b/app/components/govuk_component/task_list_component/item_component.rb @@ -2,20 +2,21 @@ module GovukComponent class TaskListComponent::ItemComponent < GovukComponent::Base renders_one :title, "GovukComponent::TaskListComponent::TitleComponent" renders_one :status, "GovukComponent::TaskListComponent::StatusComponent" + renders_one :hint - attr_reader :title_text, :status, :href, :hint + attr_reader :title_text, :raw_status, :raw_hint, :href def initialize(title: nil, href: nil, hint: nil, status: nil, classes: [], html_attributes: {}) - @title_text = title - @href = href - @hint = hint - @status = status + @title_text = title + @href = href + @raw_hint = hint + @raw_status = status super(classes: classes, html_attributes: html_attributes) end def call - tag.li(safe_join([title_content, hint_content, status_content]), **html_attributes) + tag.li(safe_join([title_content, status_content, hint_content].compact), **html_attributes) end private @@ -41,5 +42,13 @@ def hint_content def default_attributes { class: 'govuk-task-list__item' } end + + def status_attributes + { class: 'govuk-task-list__status' } + end + + def hint_attributes + { class: 'govuk-task-list__task_hint' } + end end end From 257b4979050f54bdc78c90ab8e6bb6bf50e17ac5 Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Fri, 27 Oct 2023 16:47:40 +0100 Subject: [PATCH 22/64] Make task list statuses more flexible Statuses can now be provided as strings, hash or with a block, offering complete flexibility. Co-authored-by: Frankie Roberto --- .../task_list_component/item_component.rb | 43 ++++--- .../task_list_component/status_component.rb | 2 +- .../task_list_component/title_component.rb | 2 +- .../task_list_component_spec.rb | 105 ++++++++++++------ 4 files changed, 94 insertions(+), 58 deletions(-) diff --git a/app/components/govuk_component/task_list_component/item_component.rb b/app/components/govuk_component/task_list_component/item_component.rb index cd528b2d..fb75e161 100644 --- a/app/components/govuk_component/task_list_component/item_component.rb +++ b/app/components/govuk_component/task_list_component/item_component.rb @@ -2,53 +2,52 @@ module GovukComponent class TaskListComponent::ItemComponent < GovukComponent::Base renders_one :title, "GovukComponent::TaskListComponent::TitleComponent" renders_one :status, "GovukComponent::TaskListComponent::StatusComponent" - renders_one :hint - attr_reader :title_text, :raw_status, :raw_hint, :href + attr_reader :raw_title, :hint, :href, :raw_status - def initialize(title: nil, href: nil, hint: nil, status: nil, classes: [], html_attributes: {}) - @title_text = title + def initialize(title: nil, href: nil, hint: nil, status: {}, classes: [], html_attributes: {}) + @raw_title = title @href = href - @raw_hint = hint + @hint = hint @raw_status = status super(classes: classes, html_attributes: html_attributes) end def call - tag.li(safe_join([title_content, status_content, hint_content].compact), **html_attributes) + 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(text: title_text, href: href, hint: hint) + title || with_title(**title_attributes) end def status_content - case status - when String - with_status(text: status) - when Hash - with_status(**status) - else status - end - end - - def hint_content - tag.div(hint, class: %w(govuk-task-list__task_hint)) + status || with_status(**status_attributes) end def default_attributes { class: 'govuk-task-list__item' } end - def status_attributes - { class: 'govuk-task-list__status' } + def title_attributes + { text: raw_title, href: href, hint: hint } end - def hint_attributes - { class: 'govuk-task-list__task_hint' } + 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 diff --git a/app/components/govuk_component/task_list_component/status_component.rb b/app/components/govuk_component/task_list_component/status_component.rb index 30d34755..c899a2af 100644 --- a/app/components/govuk_component/task_list_component/status_component.rb +++ b/app/components/govuk_component/task_list_component/status_component.rb @@ -9,7 +9,7 @@ def initialize(text: nil, classes: [], html_attributes: {}) end def call - tag.div(text, **html_attributes) + tag.div(content || text, **html_attributes) end private diff --git a/app/components/govuk_component/task_list_component/title_component.rb b/app/components/govuk_component/task_list_component/title_component.rb index 0d12f00a..6793a0cf 100644 --- a/app/components/govuk_component/task_list_component/title_component.rb +++ b/app/components/govuk_component/task_list_component/title_component.rb @@ -11,7 +11,7 @@ def initialize(text: nil, href: nil, hint: nil, classes: [], html_attributes: {} end def call - tag.div(**html_attributes) { title_content } + tag.div(**html_attributes) { safe_join([title_content, hint_content]) } end private diff --git a/spec/components/govuk_component/task_list_component_spec.rb b/spec/components/govuk_component/task_list_component_spec.rb index a1ffdcd8..f719f409 100644 --- a/spec/components/govuk_component/task_list_component_spec.rb +++ b/spec/components/govuk_component/task_list_component_spec.rb @@ -13,61 +13,98 @@ end end - it_behaves_like 'a component that accepts custom classes' - it_behaves_like 'a component that accepts custom HTML attributes' + describe "the outer list" do + specify "renders a ul with the correct class" do + expect(rendered_content).to have_tag("ul", with: { class: component_css_class }) + end + end - describe "rendering items with arguments" do - specify "renders a list with the correct class and contents" do - expect(rendered_content).to have_tag("ul", with: { class: component_css_class }) do - with_tag("li", text: "One", with: { class: "govuk-task-list__item" }) do - with_tag("div", with: { class: "govuk-task-list__status" }, text: "in progress") + describe "the inner items" do + context "when rendered with arguments" do + specify "renders a list with the correct class and contents" do + expect(rendered_content).to have_tag("ul", with: { class: component_css_class }) do + with_tag("li", text: "One", with: { class: "govuk-task-list__item" }) do + with_tag("div", with: { class: "govuk-task-list__status" }, text: "in progress") + end + + with_tag("li", text: "Two", with: { class: "govuk-task-list__item" }) do + with_tag("div", with: { class: "govuk-task-list__status" }, text: "ok") + end end + end - with_tag("li", text: "Two", with: { class: "govuk-task-list__item" }) do - with_tag("div", with: { class: "govuk-task-list__status" }, text: "ok") + context "when href is present" do + let(:href) { "/item-one" } + let(:list_item_one_kwargs) { { title: "One", href: href } } + + specify "a link is rendered with the correct attributes" do + expect(rendered_content).to have_tag("li", with: { class: %(govuk-task-list__item govuk-task-list__item--with-link) }) do + with_tag("a", with: { class: %w(govuk-link govuk-task-list__link) }) + end end end - end - context "when href is present" do - let(:href) { "/item-one" } - let(:list_item_one_kwargs) { { title: "One", status: "in progress", href: href } } + context "when a hint present" do + let(:hint_two) { "Two comes after one" } + let(:list_item_two_kwargs) { { title: "Two", hint: hint_two } } - specify "a link is rendered with the correct attributes" do - expect(rendered_content).to have_tag("li") do - with_tag("a", with: { href: href, class: %w(govuk-link govuk-task-list__link) }) + specify "a hint is rendered with the correct attributes" do + expect(rendered_content).to have_tag("li") do + with_tag("div", text: hint_two, with: { class: "govuk-task-list__task_hint" }) + end end end - end - context "when a hint present" do - let(:hint_two) { "Two comes after one" } - let(:list_item_two_kwargs) { { title: "Two", status: "ok", hint: hint_two } } + context "when a tag is present in the status" do + let(:status_text) { "Everything's OK" } + let(:list_item_two_kwargs) { { title: "Two", status: helper.govuk_tag(text: "ok") } } - specify "a hint is rendered with the correct attributes" do - expect(rendered_content).to have_tag("li") do - with_tag("div", text: hint_two, with: { class: "govuk-task-list__task_hint" }) + specify "a status tag is rendered with the correct attributes and text" do + expect(rendered_content).to have_tag("li") do + with_tag("div", with: { class: %w(govuk-task-list__status) }) do + with_tag("strong", with: { class: %w(govuk-tag) }) + end + end end end end - context "when a tag is present in the status" do - let(:status_text) { "Everything's OK" } - let(:list_item_two_kwargs) { { title: "Two", status: helper.govuk_tag(text: "ok") } } + describe "when rendered with blocks" do + let(:title_text) { "Select a book" } + let(:hint_text) { "You will need the ISBN" } + let(:status_text) { "Not done" } + + subject! do + render_inline(GovukComponent::TaskListComponent.new(**kwargs)) do |task_list| + task_list.with_item do |item| + helper.safe_join( + [ + item.with_title(text: title_text, hint: hint_text), + item.with_status(text: status_text), + ] + ) + end + end + end - specify "a status tag is rendered with the correct attributes and text" do + specify "the title and hint are rendered" do expect(rendered_content).to have_tag("li") do - with_tag("div", with: { class: %w(govuk-task-list__status) }) do - with_tag("strong", with: { class: %w(govuk-tag) }) + with_tag('div', with: { class: 'govuk-task-list__task-name-and-hint' }, text: Regexp.new(title_text)) do + with_tag('div', with: { class: 'govuk-task-list__task_hint' }, text: hint_text) end end end - end - end - describe "rendering an entire task list with data" do + specify "the status is rendered" do + expect(rendered_content).to have_tag("li") do + with_tag('div', with: { class: 'govuk-task-list__status' }) do + with_text(status_text) + end + end + end + end end - describe "rendering an entire task list with blocks" do - end + it_behaves_like 'a component that accepts custom classes' + it_behaves_like 'a component that accepts custom HTML attributes' end From a55bd884e11910c6790576f3a540e120f10fc36a Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Sat, 28 Oct 2023 21:07:24 +0100 Subject: [PATCH 23/64] Simplify class names Update the classes to match the new ones upstream https://github.com/alphagov/govuk-frontend/pull/3952 --- .../govuk_component/task_list_component/title_component.rb | 4 ++-- spec/components/govuk_component/task_list_component_spec.rb | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/components/govuk_component/task_list_component/title_component.rb b/app/components/govuk_component/task_list_component/title_component.rb index 6793a0cf..baf79f01 100644 --- a/app/components/govuk_component/task_list_component/title_component.rb +++ b/app/components/govuk_component/task_list_component/title_component.rb @@ -27,11 +27,11 @@ def link end def hint_content - tag.div(hint, class: "govuk-task-list__task_hint") + tag.div(hint, class: "govuk-task-list__hint") end def default_attributes - { class: "govuk-task-list__task-name-and-hint" } + { class: "govuk-task-list__name-and-hint" } end end end diff --git a/spec/components/govuk_component/task_list_component_spec.rb b/spec/components/govuk_component/task_list_component_spec.rb index f719f409..d392cb35 100644 --- a/spec/components/govuk_component/task_list_component_spec.rb +++ b/spec/components/govuk_component/task_list_component_spec.rb @@ -50,7 +50,7 @@ specify "a hint is rendered with the correct attributes" do expect(rendered_content).to have_tag("li") do - with_tag("div", text: hint_two, with: { class: "govuk-task-list__task_hint" }) + with_tag("div", text: hint_two, with: { class: "govuk-task-list__hint" }) end end end @@ -89,8 +89,8 @@ specify "the title and hint are rendered" do expect(rendered_content).to have_tag("li") do - with_tag('div', with: { class: 'govuk-task-list__task-name-and-hint' }, text: Regexp.new(title_text)) do - with_tag('div', with: { class: 'govuk-task-list__task_hint' }, text: hint_text) + with_tag('div', with: { class: 'govuk-task-list__name-and-hint' }, text: Regexp.new(title_text)) do + with_tag('div', with: { class: 'govuk-task-list__hint' }, text: hint_text) end end end From 9386dc72ac22f8ad92ea658d021cb5d78248ef4f Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Sat, 28 Oct 2023 21:19:27 +0100 Subject: [PATCH 24/64] Add a hints example to the guide --- guide/content/components/task-list.slim | 10 +++++++++- guide/lib/examples/task_list_helpers.rb | 25 ++++++++++++++++++++++--- 2 files changed, 31 insertions(+), 4 deletions(-) diff --git a/guide/content/components/task-list.slim b/guide/content/components/task-list.slim index a8062db3..22fba671 100644 --- a/guide/content/components/task-list.slim +++ b/guide/content/components/task-list.slim @@ -15,4 +15,12 @@ p The task list component displays all the tasks a user needs to do, and allows markdown: Task statuses are [tags](/components/tag) and can be customised by passing - the arguments as a hash. + the arguments as a hash, or overridden with a block. + +== render('/partials/example.*', + caption: "Task list with hints", + code: task_list_with_hints) do + + markdown: + When an explanation is needed to better describe a task, hints can be added + with the `hint` keyword. diff --git a/guide/lib/examples/task_list_helpers.rb b/guide/lib/examples/task_list_helpers.rb index 5d072071..043bef3b 100644 --- a/guide/lib/examples/task_list_helpers.rb +++ b/guide/lib/examples/task_list_helpers.rb @@ -16,12 +16,31 @@ def task_list_with_coloured_tags - task_list.with_item(title: "Prototype", status: govuk_tag(text: "Incomplete", colour: "blue")) - task_list.with_item(title: "Implementation", status: govuk_tag(text: "Incomplete", colour: "light-blue")) - task_list.with_item(title: "User acceptance testing", status: govuk_tag(text: "Incomplete", colour: "red")) - - task_list.with_item(title: "Handover", status: govuk_tag(text: "Incomplete", colour: "turquoise")) + - task_list.with_item(title: "Handover") do |item| + - item.with_status do + = govuk_tag(text: "Incomplete", colour: "turquoise") SNIPPET end - def task_list_with_data - # TODO: demonstrate building a task list with an array of hashes + def task_list_with_hints + <<~SNIPPET + = govuk_task_list do |task_list| + - task_list.with_item do |item| + - item.with_title(text: "Check your qualifications", hint: "You need GCSEs in English and maths", href: "#") + - item.with_status(text: govuk_tag(text: "Done", colour: "green")) + + - task_list.with_item do |item| + - item.with_title(text: "Understand funding", hint: "Teacher training course fees are around £9,250 per year", href: "#") + - item.with_status(text: govuk_tag(text: "Done", colour: "green")) + + - task_list.with_item do |item| + - item.with_title(text: "Consider getting experience", hint: "Experiencing life in a school can help you decide if teaching is right for you", href: "#") + - item.with_status(text: govuk_tag(text: "Arranged", colour: "yellow")) + + - task_list.with_item do |item| + - item.with_title(text: "Find a teacher training course", hint: "Through teacher training you can get QTS, a PGCE, or both", href: "#") + - item.with_status(text: govuk_tag(text: "To do", colour: "red")) + SNIPPET end end end From 2b699a6a45dedd2f133a188f164cab63fb1eb5bd Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Sun, 29 Oct 2023 16:17:18 +0000 Subject: [PATCH 25/64] Improve task list when hints/links missing Now when these things are missing the containing elements aren't rendered at all --- .../task_list_component/status_component.rb | 10 ++- .../task_list_component/title_component.rb | 14 ++-- .../task_list_component_spec.rb | 64 ++++++++++++++++++- 3 files changed, 77 insertions(+), 11 deletions(-) diff --git a/app/components/govuk_component/task_list_component/status_component.rb b/app/components/govuk_component/task_list_component/status_component.rb index c899a2af..ce20a289 100644 --- a/app/components/govuk_component/task_list_component/status_component.rb +++ b/app/components/govuk_component/task_list_component/status_component.rb @@ -9,7 +9,11 @@ def initialize(text: nil, classes: [], html_attributes: {}) end def call - tag.div(content || text, **html_attributes) + tag.div(status_text, **html_attributes) + end + + def render? + status_text.present? end private @@ -17,5 +21,9 @@ def call def default_attributes { class: %w(govuk-task-list__status) } end + + def status_text + text || content + end end end diff --git a/app/components/govuk_component/task_list_component/title_component.rb b/app/components/govuk_component/task_list_component/title_component.rb index baf79f01..681fa877 100644 --- a/app/components/govuk_component/task_list_component/title_component.rb +++ b/app/components/govuk_component/task_list_component/title_component.rb @@ -17,21 +17,21 @@ def call private def title_content - return link if href.present? - - text - end - - def link - govuk_link_to(text, href, class: "govuk-task-list__link") + (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") end def default_attributes { class: "govuk-task-list__name-and-hint" } end + + def link_attributes + { class: "govuk-task-list__link" } + end end end diff --git a/spec/components/govuk_component/task_list_component_spec.rb b/spec/components/govuk_component/task_list_component_spec.rb index d392cb35..1b4bf989 100644 --- a/spec/components/govuk_component/task_list_component_spec.rb +++ b/spec/components/govuk_component/task_list_component_spec.rb @@ -35,15 +35,28 @@ context "when href is present" do let(:href) { "/item-one" } - let(:list_item_one_kwargs) { { title: "One", href: href } } + let(:title) { "One" } + let(:list_item_one_kwargs) { { title: title, href: href } } specify "a link is rendered with the correct attributes" do expect(rendered_content).to have_tag("li", with: { class: %(govuk-task-list__item govuk-task-list__item--with-link) }) do - with_tag("a", with: { class: %w(govuk-link govuk-task-list__link) }) + with_tag("a", with: { class: %w(govuk-link govuk-task-list__link), href: href }, text: title) end end end + context "when no href is present" do + let(:title) { "One" } + let(:list_item_one_kwargs) { { title: "One" } } + + specify "a link is rendered with the correct attributes" do + expect(rendered_content).to have_tag("li", with: { class: %(govuk-task-list__item) }, text: title) + + expect(rendered_content).not_to have_tag("a") + expect(rendered_content).not_to have_tag("li", with: { class: "govuk-task-list__item--with-link" }) + end + end + context "when a hint present" do let(:hint_two) { "Two comes after one" } let(:list_item_two_kwargs) { { title: "Two", hint: hint_two } } @@ -55,6 +68,17 @@ end end + context "when no hint is present" do + let(:title) { "Three" } + let(:list_item_two_kwargs) { { title: "Three" } } + + specify "a hint is rendered with the correct attributes" do + expect(rendered_content).to have_tag("li", text: title) + + expect(rendered_content).not_to have_tag("div", with: { class: "govuk-task-list__hint" }) + end + end + context "when a tag is present in the status" do let(:status_text) { "Everything's OK" } let(:list_item_two_kwargs) { { title: "Two", status: helper.govuk_tag(text: "ok") } } @@ -95,7 +119,7 @@ end end - specify "the status is rendered" do + specify "the status text is rendered" do expect(rendered_content).to have_tag("li") do with_tag('div', with: { class: 'govuk-task-list__status' }) do with_text(status_text) @@ -105,6 +129,40 @@ end end + describe "status presence" do + let(:status_class) { "govuk-task-list__status" } + + subject! do + render_inline(GovukComponent::TaskListComponent.new(**kwargs)) do |task_list| + task_list.with_item(title: "Sample", status: status) + end + end + + context "when status text is present" do + let(:status) { "Some status" } + + specify "a status div is rendered" do + expect(rendered_content).to have_tag("div", with: { class: status_class }) + end + end + + context "when status text is blank" do + let(:status) { "" } + + specify "no status div is rendered" do + expect(rendered_content).not_to have_tag("div", with: { class: status_class }) + end + end + + context "when status text is nil" do + let(:status) { "" } + + specify "no status div is rendered" do + expect(rendered_content).not_to have_tag("div", with: { class: status_class }) + end + end + end + it_behaves_like 'a component that accepts custom classes' it_behaves_like 'a component that accepts custom HTML attributes' end From 2bf5a18662335e1bd67aabbf7186be345e718c00 Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Sun, 29 Oct 2023 17:53:42 +0000 Subject: [PATCH 26/64] Add aria-describedby links on title, status and hint --- .../task_list_component/item_component.rb | 28 ++++++-- .../task_list_component/status_component.rb | 9 +-- .../task_list_component/title_component.rb | 39 ++++++++--- .../task_list_component_spec.rb | 69 +++++++++++++++++++ 4 files changed, 129 insertions(+), 16 deletions(-) diff --git a/app/components/govuk_component/task_list_component/item_component.rb b/app/components/govuk_component/task_list_component/item_component.rb index fb75e161..8bd0876b 100644 --- a/app/components/govuk_component/task_list_component/item_component.rb +++ b/app/components/govuk_component/task_list_component/item_component.rb @@ -1,15 +1,35 @@ module GovukComponent class TaskListComponent::ItemComponent < GovukComponent::Base - renders_one :title, "GovukComponent::TaskListComponent::TitleComponent" - renders_one :status, "GovukComponent::TaskListComponent::StatusComponent" + renders_one :status, ->(text: nil, classes: [], html_attributes: {}, &block) do + GovukComponent::TaskListComponent::StatusComponent.new( + identifier: @identifier, + 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( + identifier: @identifier, + text: text, + href: href, + hint: hint, + classes: classes, + html_attributes: html_attributes, + &block + ) + end attr_reader :raw_title, :hint, :href, :raw_status - def initialize(title: nil, href: nil, hint: nil, status: {}, classes: [], html_attributes: {}) - @raw_title = title + def initialize(title: nil, href: nil, hint: nil, identifier: SecureRandom.hex(3), status: {}, classes: [], html_attributes: {}) + @raw_title = title @href = href @hint = hint @raw_status = status + @identifier = identifier super(classes: classes, html_attributes: html_attributes) end diff --git a/app/components/govuk_component/task_list_component/status_component.rb b/app/components/govuk_component/task_list_component/status_component.rb index ce20a289..5e2ffa1b 100644 --- a/app/components/govuk_component/task_list_component/status_component.rb +++ b/app/components/govuk_component/task_list_component/status_component.rb @@ -1,9 +1,10 @@ module GovukComponent class TaskListComponent::StatusComponent < GovukComponent::Base - attr_reader :text + attr_reader :identifier, :text - def initialize(text: nil, classes: [], html_attributes: {}) - @text = text + def initialize(identifier: nil, text: nil, classes: [], html_attributes: {}) + @text = text + @identifier = identifier super(classes: classes, html_attributes: html_attributes) end @@ -19,7 +20,7 @@ def render? private def default_attributes - { class: %w(govuk-task-list__status) } + { class: %w(govuk-task-list__status), id: "#{identifier}-status" } end def status_text diff --git a/app/components/govuk_component/task_list_component/title_component.rb b/app/components/govuk_component/task_list_component/title_component.rb index 681fa877..16eb924a 100644 --- a/app/components/govuk_component/task_list_component/title_component.rb +++ b/app/components/govuk_component/task_list_component/title_component.rb @@ -1,17 +1,26 @@ module GovukComponent class TaskListComponent::TitleComponent < GovukComponent::Base - attr_reader :text, :href, :hint + using HTMLAttributesUtils - def initialize(text: nil, href: nil, hint: nil, classes: [], html_attributes: {}) - @text = text - @href = href - @hint = hint + attr_reader :identifier, :text, :href, :hint + + def initialize(identifier: nil, text: nil, href: nil, hint: nil, classes: [], html_attributes: {}) + @text = text + @href = href + @hint = hint + @identifier = identifier super(classes: classes, html_attributes: html_attributes) end def call - tag.div(**html_attributes) { safe_join([title_content, hint_content]) } + adjusted_html_attributes = if href.blank? + html_attributes_with_identifier + else + html_attributes + end + + tag.div(**adjusted_html_attributes) { safe_join([title_content, hint_content]) } end private @@ -23,15 +32,29 @@ def title_content def hint_content return if hint.blank? - tag.div(hint, class: "govuk-task-list__hint") + tag.div(hint, class: "govuk-task-list__hint", id: hint_id) end def default_attributes { class: "govuk-task-list__name-and-hint" } end + def html_attributes_with_identifier + html_attributes.deep_merge_html_attributes(aria_described_by_attributes) + end + def link_attributes - { class: "govuk-task-list__link" } + { class: "govuk-task-list__link", **aria_described_by_attributes } + end + + def aria_described_by_attributes + status_id = "#{identifier}-status" + + { aria: { describedby: [*status_id, *hint_id] } } + end + + def hint_id + "#{identifier}-hint" if hint.present? end end end diff --git a/spec/components/govuk_component/task_list_component_spec.rb b/spec/components/govuk_component/task_list_component_spec.rb index 1b4bf989..0302cd53 100644 --- a/spec/components/govuk_component/task_list_component_spec.rb +++ b/spec/components/govuk_component/task_list_component_spec.rb @@ -163,6 +163,75 @@ end end + describe "ids and aria-describedby" do + let(:identifier) { "abc" } + let(:href) { "/things" } + let(:hint) { "Yes, things" } + let(:expected_hint_id) { "#{identifier}-hint" } + let(:expected_status_id) { "#{identifier}-status" } + + subject! do + render_inline(GovukComponent::TaskListComponent.new(**kwargs)) do |task_list| + task_list.with_item(identifier: identifier, title: "A thing", href: href, status: "Alright", hint: hint) + end + end + + context "when a href is present" do + specify("the hint has an id ending with the identifier") { expect(rendered_content).to have_tag("div", with: { id: expected_hint_id }) } + specify("the status has an id ending with the identifier") { expect(rendered_content).to have_tag("div", with: { id: expected_status_id }) } + + specify "the title link is aria-describedby the hint and status ids" do + expect(rendered_content).to have_tag( + "a", + with: { + class: "govuk-link govuk-task-list__link", + "aria-describedby" => %(#{expected_status_id} #{expected_hint_id}), + } + ) + end + end + + context "when a href isn't present" do + let(:href) { nil } + specify("the hint has an id ending with the identifier") { expect(rendered_content).to have_tag("div", with: { id: expected_hint_id }) } + specify("the status has an id ending with the identifier") { expect(rendered_content).to have_tag("div", with: { id: expected_status_id }) } + + specify "the title is aria-describedby the hint and status ids" do + expect(rendered_content).to have_tag( + "div", + with: { + class: "govuk-task-list__name-and-hint", + "aria-describedby" => %(#{expected_status_id} #{expected_hint_id}), + } + ) + end + end + + context "when the status is present but the hint isn't" do + let(:hint) { nil } + specify("the hint is not rendered") { expect(rendered_content).not_to have_tag("div", with: { id: expected_hint_id }) } + specify("the status has an id ending with the identifier") { expect(rendered_content).to have_tag("div", with: { id: expected_status_id }) } + + specify "the title is aria-describedby only the status id" do + expect(rendered_content).to have_tag( + "a", + with: { + class: "govuk-link govuk-task-list__link", + "aria-describedby" => expected_status_id, + } + ) + end + end + + # TODO: what should happen when there's no status. Components can't see + # their siblings so we don't really know whether or not there's a + # status to reference + # + # assume it's there for now + # + # context "when the hint is present but the status isn't" do + end + it_behaves_like 'a component that accepts custom classes' it_behaves_like 'a component that accepts custom HTML attributes' end From 3ec2330c9f3b2ae738755b895490ce26380ae549 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Mon, 30 Oct 2023 12:51:27 +0000 Subject: [PATCH 27/64] Remove aria attribute from div --- .../task_list_component/title_component.rb | 12 +----------- .../govuk_component/task_list_component_spec.rb | 10 ++-------- 2 files changed, 3 insertions(+), 19 deletions(-) diff --git a/app/components/govuk_component/task_list_component/title_component.rb b/app/components/govuk_component/task_list_component/title_component.rb index 16eb924a..a478df1e 100644 --- a/app/components/govuk_component/task_list_component/title_component.rb +++ b/app/components/govuk_component/task_list_component/title_component.rb @@ -14,13 +14,7 @@ def initialize(identifier: nil, text: nil, href: nil, hint: nil, classes: [], ht end def call - adjusted_html_attributes = if href.blank? - html_attributes_with_identifier - else - html_attributes - end - - tag.div(**adjusted_html_attributes) { safe_join([title_content, hint_content]) } + tag.div(**html_attributes) { safe_join([title_content, hint_content]) } end private @@ -39,10 +33,6 @@ def default_attributes { class: "govuk-task-list__name-and-hint" } end - def html_attributes_with_identifier - html_attributes.deep_merge_html_attributes(aria_described_by_attributes) - end - def link_attributes { class: "govuk-task-list__link", **aria_described_by_attributes } end diff --git a/spec/components/govuk_component/task_list_component_spec.rb b/spec/components/govuk_component/task_list_component_spec.rb index 0302cd53..6a2c294e 100644 --- a/spec/components/govuk_component/task_list_component_spec.rb +++ b/spec/components/govuk_component/task_list_component_spec.rb @@ -196,14 +196,8 @@ specify("the hint has an id ending with the identifier") { expect(rendered_content).to have_tag("div", with: { id: expected_hint_id }) } specify("the status has an id ending with the identifier") { expect(rendered_content).to have_tag("div", with: { id: expected_status_id }) } - specify "the title is aria-describedby the hint and status ids" do - expect(rendered_content).to have_tag( - "div", - with: { - class: "govuk-task-list__name-and-hint", - "aria-describedby" => %(#{expected_status_id} #{expected_hint_id}), - } - ) + specify "there is no aria-describeby attribute" do + expect(rendered_content).not_to have_tag("*[aria-describedby]") end end From 7e6b0396e53d30a6f5660d796506b20c7d37155f Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Mon, 30 Oct 2023 20:48:43 +0000 Subject: [PATCH 28/64] Set the item id numbers sequentially This change brings the behaviour of the task list more in line with the Nunjucks component. Now when there's no id_prefix param the ids of the statuses and tags are just numbered sequentially. If there's going to be more than one task list on a page they can have their prefixes set seprately so there's no ID clashes on the final rendered page. Co-authored-by: Frankie Roberto --- .../govuk_component/task_list_component.rb | 24 ++- .../task_list_component/item_component.rb | 12 +- .../task_list_component/status_component.rb | 11 +- .../task_list_component/title_component.rb | 15 +- .../task_list_component_spec.rb | 143 +++++++++++++----- 5 files changed, 146 insertions(+), 59 deletions(-) diff --git a/app/components/govuk_component/task_list_component.rb b/app/components/govuk_component/task_list_component.rb index 0a2313e8..dcdb8a38 100644 --- a/app/components/govuk_component/task_list_component.rb +++ b/app/components/govuk_component/task_list_component.rb @@ -1,13 +1,31 @@ module GovukComponent class TaskListComponent < GovukComponent::Base - renders_many :items, "GovukComponent::TaskListComponent::ItemComponent" + 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: nil, classes: [], html_attributes: {}) + @id_prefix = id_prefix + @count = 0 - def initialize(classes: [], html_attributes: {}) super(classes: classes, html_attributes: html_attributes) end def call - tag.ul(**html_attributes) { safe_join(items) } + numbered_items = items.each.with_index(1) { |item, count| item.count = count } + + tag.ul(**html_attributes) do + safe_join(numbered_items) + end end private diff --git a/app/components/govuk_component/task_list_component/item_component.rb b/app/components/govuk_component/task_list_component/item_component.rb index 8bd0876b..c23d2dc4 100644 --- a/app/components/govuk_component/task_list_component/item_component.rb +++ b/app/components/govuk_component/task_list_component/item_component.rb @@ -2,7 +2,8 @@ module GovukComponent class TaskListComponent::ItemComponent < GovukComponent::Base renders_one :status, ->(text: nil, classes: [], html_attributes: {}, &block) do GovukComponent::TaskListComponent::StatusComponent.new( - identifier: @identifier, + id_prefix: @id_prefix, + count: @count, text: text, classes: classes, html_attributes: html_attributes, @@ -12,7 +13,8 @@ class TaskListComponent::ItemComponent < GovukComponent::Base renders_one :title, ->(text: nil, href: nil, hint: nil, classes: [], html_attributes: {}, &block) do GovukComponent::TaskListComponent::TitleComponent.new( - identifier: @identifier, + id_prefix: @id_prefix, + count: @count, text: text, href: href, hint: hint, @@ -23,13 +25,15 @@ class TaskListComponent::ItemComponent < GovukComponent::Base end attr_reader :raw_title, :hint, :href, :raw_status + attr_writer :count - def initialize(title: nil, href: nil, hint: nil, identifier: SecureRandom.hex(3), status: {}, classes: [], html_attributes: {}) + 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 - @identifier = identifier + @id_prefix = id_prefix + @count = count super(classes: classes, html_attributes: html_attributes) end diff --git a/app/components/govuk_component/task_list_component/status_component.rb b/app/components/govuk_component/task_list_component/status_component.rb index 5e2ffa1b..535081ca 100644 --- a/app/components/govuk_component/task_list_component/status_component.rb +++ b/app/components/govuk_component/task_list_component/status_component.rb @@ -1,10 +1,11 @@ module GovukComponent class TaskListComponent::StatusComponent < GovukComponent::Base - attr_reader :identifier, :text + attr_reader :id_prefix, :text, :count - def initialize(identifier: nil, text: nil, classes: [], html_attributes: {}) - @text = text - @identifier = identifier + 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 @@ -20,7 +21,7 @@ def render? private def default_attributes - { class: %w(govuk-task-list__status), id: "#{identifier}-status" } + { class: %w(govuk-task-list__status), id: [id_prefix, count, "status"].compact.join("-") } end def status_text diff --git a/app/components/govuk_component/task_list_component/title_component.rb b/app/components/govuk_component/task_list_component/title_component.rb index a478df1e..d79d5dc0 100644 --- a/app/components/govuk_component/task_list_component/title_component.rb +++ b/app/components/govuk_component/task_list_component/title_component.rb @@ -2,13 +2,14 @@ module GovukComponent class TaskListComponent::TitleComponent < GovukComponent::Base using HTMLAttributesUtils - attr_reader :identifier, :text, :href, :hint + attr_reader :id_prefix, :text, :href, :hint, :count - def initialize(identifier: nil, text: nil, href: nil, hint: nil, classes: [], html_attributes: {}) + def initialize(text: nil, href: nil, hint: nil, id_prefix: nil, count: nil, classes: [], html_attributes: {}) @text = text @href = href @hint = hint - @identifier = identifier + @id_prefix = id_prefix + @count = count super(classes: classes, html_attributes: html_attributes) end @@ -38,13 +39,15 @@ def link_attributes end def aria_described_by_attributes - status_id = "#{identifier}-status" - { aria: { describedby: [*status_id, *hint_id] } } end def hint_id - "#{identifier}-hint" if hint.present? + [id_prefix, count, "hint"].compact.join("-") if hint.present? + end + + def status_id + [id_prefix, count, "status"].compact.join("-") end end end diff --git a/spec/components/govuk_component/task_list_component_spec.rb b/spec/components/govuk_component/task_list_component_spec.rb index 6a2c294e..7225de7a 100644 --- a/spec/components/govuk_component/task_list_component_spec.rb +++ b/spec/components/govuk_component/task_list_component_spec.rb @@ -2,7 +2,8 @@ RSpec.describe(GovukComponent::TaskListComponent, type: :component) do let(:component_css_class) { 'govuk-task-list' } - let(:kwargs) { {} } + let(:id_prefix) { nil } + let(:kwargs) { { id_prefix: id_prefix }.compact } let(:list_item_one_kwargs) { { title: "One", status: "in progress" } } let(:list_item_two_kwargs) { { title: "Two", status: "ok" } } @@ -164,66 +165,126 @@ end describe "ids and aria-describedby" do - let(:identifier) { "abc" } let(:href) { "/things" } let(:hint) { "Yes, things" } - let(:expected_hint_id) { "#{identifier}-hint" } - let(:expected_status_id) { "#{identifier}-status" } subject! do render_inline(GovukComponent::TaskListComponent.new(**kwargs)) do |task_list| - task_list.with_item(identifier: identifier, title: "A thing", href: href, status: "Alright", hint: hint) + task_list.with_item(title: "A thing", href: href, status: "Alright", hint: hint) end end - context "when a href is present" do - specify("the hint has an id ending with the identifier") { expect(rendered_content).to have_tag("div", with: { id: expected_hint_id }) } - specify("the status has an id ending with the identifier") { expect(rendered_content).to have_tag("div", with: { id: expected_status_id }) } + context "when id_prefix is not present" do + let(:expected_hint_id) { "1-hint" } + let(:expected_status_id) { "1-status" } + + context "when a href is present" do + specify("the hint has an id starting with the id_prefix") { expect(rendered_content).to have_tag("div", with: { id: expected_hint_id }) } + specify("the status has an id starting with the id_prefix") { expect(rendered_content).to have_tag("div", with: { id: expected_status_id }) } + + specify "the title link is aria-describedby the hint and status ids" do + expect(rendered_content).to have_tag( + "a", + with: { + class: "govuk-link govuk-task-list__link", + "aria-describedby" => %(#{expected_status_id} #{expected_hint_id}), + } + ) + end + end + + context "when a href isn't present" do + let(:href) { nil } + specify("the hint has an id starting with the id_prefix") { expect(rendered_content).to have_tag("div", with: { id: expected_hint_id }) } + specify("the status has an id starting with the id_prefix") { expect(rendered_content).to have_tag("div", with: { id: expected_status_id }) } + + specify "there is no aria-describeby attribute" do + expect(rendered_content).not_to have_tag("*[aria-describedby]") + end + end - specify "the title link is aria-describedby the hint and status ids" do - expect(rendered_content).to have_tag( - "a", - with: { - class: "govuk-link govuk-task-list__link", - "aria-describedby" => %(#{expected_status_id} #{expected_hint_id}), - } - ) + context "when the status is present but the hint isn't" do + let(:hint) { nil } + specify("the hint is not rendered") { expect(rendered_content).not_to have_tag("div", with: { id: expected_hint_id }) } + specify("the status has an id starting with the id_prefix") { expect(rendered_content).to have_tag("div", with: { id: expected_status_id }) } + + specify "the title is aria-describedby only the status id" do + expect(rendered_content).to have_tag( + "a", + with: { + class: "govuk-link govuk-task-list__link", + "aria-describedby" => expected_status_id, + } + ) + end end end - context "when a href isn't present" do - let(:href) { nil } - specify("the hint has an id ending with the identifier") { expect(rendered_content).to have_tag("div", with: { id: expected_hint_id }) } - specify("the status has an id ending with the identifier") { expect(rendered_content).to have_tag("div", with: { id: expected_status_id }) } + context "when id_prefix is present" do + let(:expected_hint_id) { "#{id_prefix}-1-hint" } + let(:expected_status_id) { "#{id_prefix}-1-status" } + let(:id_prefix) { "abc" } + + context "when a href is present" do + specify("the hint has an id starting with the id_prefix") { expect(rendered_content).to have_tag("div", with: { id: expected_hint_id }) } + specify("the status has an id starting with the id_prefix") { expect(rendered_content).to have_tag("div", with: { id: expected_status_id }) } + + specify "the title link is aria-describedby the hint and status ids" do + expect(rendered_content).to have_tag( + "a", + with: { + class: "govuk-link govuk-task-list__link", + "aria-describedby" => %(#{expected_status_id} #{expected_hint_id}), + } + ) + end + end + + context "when a href isn't present" do + let(:href) { nil } + specify("the hint has an id starting with the id_prefix") { expect(rendered_content).to have_tag("div", with: { id: expected_hint_id }) } + specify("the status has an id starting with the id_prefix") { expect(rendered_content).to have_tag("div", with: { id: expected_status_id }) } - specify "there is no aria-describeby attribute" do - expect(rendered_content).not_to have_tag("*[aria-describedby]") + specify "there is no aria-describeby attribute" do + expect(rendered_content).not_to have_tag("*[aria-describedby]") + end + end + + context "when the status is present but the hint isn't" do + let(:hint) { nil } + specify("the hint is not rendered") { expect(rendered_content).not_to have_tag("div", with: { id: expected_hint_id }) } + specify("the status has an id starting with the id_prefix") { expect(rendered_content).to have_tag("div", with: { id: expected_status_id }) } + + specify "the title is aria-describedby only the status id" do + expect(rendered_content).to have_tag( + "a", + with: { + class: "govuk-link govuk-task-list__link", + "aria-describedby" => expected_status_id, + } + ) + end end end + end - context "when the status is present but the hint isn't" do - let(:hint) { nil } - specify("the hint is not rendered") { expect(rendered_content).not_to have_tag("div", with: { id: expected_hint_id }) } - specify("the status has an id ending with the identifier") { expect(rendered_content).to have_tag("div", with: { id: expected_status_id }) } + describe "item numbering" do + let(:items) { 4 } + let(:list_item) { { title: "What a", hint: "very", status: "nice list" } } - specify "the title is aria-describedby only the status id" do - expect(rendered_content).to have_tag( - "a", - with: { - class: "govuk-link govuk-task-list__link", - "aria-describedby" => expected_status_id, - } - ) + subject! do + render_inline(GovukComponent::TaskListComponent.new(**kwargs)) do |task_list| + items.times { task_list.with_item(**list_item) } end end - # TODO: what should happen when there's no status. Components can't see - # their siblings so we don't really know whether or not there's a - # status to reference - # - # assume it's there for now - # - # context "when the hint is present but the status isn't" do + specify "the items are sequentially numbered starting at 1" do + actual_status_ids = html.css(".govuk-task-list__status").map { |element| element[:id] } + actual_hint_ids = html.css(".govuk-task-list__hint").map { |element| element[:id] } + + expect(actual_status_ids).to eql(1.upto(items).map { |i| "#{i}-status" }) + expect(actual_hint_ids).to eql(1.upto(items).map { |i| "#{i}-hint" }) + end end it_behaves_like 'a component that accepts custom classes' From fa72072e4e48a8f6252521f2dbf210770298e5cf Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 31 Oct 2023 09:03:29 +0000 Subject: [PATCH 29/64] Set a default id prefix for task lists This matches the Nunjucks behaviour: https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/components/task-list/template.njk#L3 --- app/components/govuk_component/task_list_component.rb | 2 +- .../govuk_component/task_list_component_spec.rb | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/components/govuk_component/task_list_component.rb b/app/components/govuk_component/task_list_component.rb index dcdb8a38..de8e55cf 100644 --- a/app/components/govuk_component/task_list_component.rb +++ b/app/components/govuk_component/task_list_component.rb @@ -13,7 +13,7 @@ class TaskListComponent < GovukComponent::Base ) end - def initialize(id_prefix: nil, classes: [], html_attributes: {}) + def initialize(id_prefix: "task-list", classes: [], html_attributes: {}) @id_prefix = id_prefix @count = 0 diff --git a/spec/components/govuk_component/task_list_component_spec.rb b/spec/components/govuk_component/task_list_component_spec.rb index 7225de7a..aebc7985 100644 --- a/spec/components/govuk_component/task_list_component_spec.rb +++ b/spec/components/govuk_component/task_list_component_spec.rb @@ -175,8 +175,8 @@ end context "when id_prefix is not present" do - let(:expected_hint_id) { "1-hint" } - let(:expected_status_id) { "1-status" } + let(:expected_hint_id) { "task-list-1-hint" } + let(:expected_status_id) { "task-list-1-status" } context "when a href is present" do specify("the hint has an id starting with the id_prefix") { expect(rendered_content).to have_tag("div", with: { id: expected_hint_id }) } @@ -282,8 +282,8 @@ actual_status_ids = html.css(".govuk-task-list__status").map { |element| element[:id] } actual_hint_ids = html.css(".govuk-task-list__hint").map { |element| element[:id] } - expect(actual_status_ids).to eql(1.upto(items).map { |i| "#{i}-status" }) - expect(actual_hint_ids).to eql(1.upto(items).map { |i| "#{i}-hint" }) + expect(actual_status_ids).to eql(1.upto(items).map { |i| "task-list-#{i}-status" }) + expect(actual_hint_ids).to eql(1.upto(items).map { |i| "task-list-#{i}-hint" }) end end From 1169bcbd1ed8f5198a7f8fc8ecca4f60041ecdbd Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 31 Oct 2023 09:29:46 +0000 Subject: [PATCH 30/64] Update the docs a bit --- guide/content/components/task-list.slim | 15 +++++++++--- guide/lib/examples/task_list_helpers.rb | 32 +++++++++++++++---------- 2 files changed, 32 insertions(+), 15 deletions(-) diff --git a/guide/content/components/task-list.slim b/guide/content/components/task-list.slim index 22fba671..a767be52 100644 --- a/guide/content/components/task-list.slim +++ b/guide/content/components/task-list.slim @@ -9,13 +9,15 @@ p The task list component displays all the tasks a user needs to do, and allows caption: "Default task list", code: default_task_list) + markdown: + Task statuses can either contain plain text, or can contain a [`govuk_tag`](/components/tag). + == render('/partials/example.*', caption: "Task list with coloured tags", code: task_list_with_coloured_tags) do markdown: - Task statuses are [tags](/components/tag) and can be customised by passing - the arguments as a hash, or overridden with a block. + The tags can be given different colours by passing a `colour` keyword. == render('/partials/example.*', caption: "Task list with hints", @@ -23,4 +25,11 @@ p The task list component displays all the tasks a user needs to do, and allows markdown: When an explanation is needed to better describe a task, hints can be added - with the `hint` keyword. + with the `hint` keyword on either `with_item` or `with_title`. + +== render('/partials/example.*', + caption: "Task list with cannot start yet items", + code: task_list_with_cannot_start_yet) do + + markdown: + Tasks can omit the `href` keyword if they cannot be started yet. When doing this you should add the `govuk-task-list__status--cannot-start-yet` to the status, and a hint to explain why the task cannot be started yet. diff --git a/guide/lib/examples/task_list_helpers.rb b/guide/lib/examples/task_list_helpers.rb index 043bef3b..236ddf36 100644 --- a/guide/lib/examples/task_list_helpers.rb +++ b/guide/lib/examples/task_list_helpers.rb @@ -2,32 +2,40 @@ module Examples module TaskListHelpers def default_task_list <<~SNIPPET - = govuk_task_list do |task_list| + = govuk_task_list(id_prefix: "project-tasks") do |task_list| - task_list.with_item(title: "Contact details", href: '#', status: "Completed") - task_list.with_item(title: "Project details", href: '#', status: "Completed") - task_list.with_item(title: "Funding", href: '#', status: govuk_tag(text: "Incomplete", colour: "blue")) SNIPPET end + def task_list_with_cannot_start_yet + <<~SNIPPET + = govuk_task_list(id_prefix: "project-tasks") do |task_list| + - task_list.with_item(title: "Contact details", href: '#', status: "Completed") + - task_list.with_item(title: "Project details", href: '#', status: "Completed") + - task_list.with_item(title: "Funding", hint: "The funds will be announced on 1 April 2022") do |item| + - item.with_status(text: "Cannot start yet", classes: "govuk-task-list__status--cannot-start-yet") + SNIPPET + end + def task_list_with_coloured_tags <<~SNIPPET - = govuk_task_list do |task_list| - - task_list.with_item(title: "Design", status: govuk_tag(text: "Incomplete", colour: "green")) - - task_list.with_item(title: "Prototype", status: govuk_tag(text: "Incomplete", colour: "blue")) - - task_list.with_item(title: "Implementation", status: govuk_tag(text: "Incomplete", colour: "light-blue")) - - task_list.with_item(title: "User acceptance testing", status: govuk_tag(text: "Incomplete", colour: "red")) - - task_list.with_item(title: "Handover") do |item| + = govuk_task_list(id_prefix: "coloured-tags-example") do |task_list| + - task_list.with_item(title: "Design", href: "#", status: govuk_tag(text: "Green", colour: "green")) + - task_list.with_item(title: "Prototype", href: "#", status: govuk_tag(text: "Blue", colour: "blue")) + - task_list.with_item(title: "Implementation", href: "#", status: govuk_tag(text: "Light blue", colour: "light-blue")) + - task_list.with_item(title: "User acceptance testing", href: "#", status: govuk_tag(text: "Red", colour: "red")) + - task_list.with_item(title: "Handover", href: "#") do |item| - item.with_status do - = govuk_tag(text: "Incomplete", colour: "turquoise") + = govuk_tag(text: "Turquoise", colour: "turquoise") SNIPPET end def task_list_with_hints <<~SNIPPET - = govuk_task_list do |task_list| - - task_list.with_item do |item| - - item.with_title(text: "Check your qualifications", hint: "You need GCSEs in English and maths", href: "#") - - item.with_status(text: govuk_tag(text: "Done", colour: "green")) + = govuk_task_list(id_prefix: "task-list-with-hints") do |task_list| + - task_list.with_item(title: "Check your qualifications", hint: "You need GCSEs in English and maths", href: "#", status: govuk_tag(text: "Done", colour: "green")) - task_list.with_item do |item| - item.with_title(text: "Understand funding", hint: "Teacher training course fees are around £9,250 per year", href: "#") From fbf5ef879ab75246d96005cd70b3e7b81435a0f6 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 31 Oct 2023 09:54:25 +0000 Subject: [PATCH 31/64] Update docs --- guide/content/components/task-list.slim | 7 +++++-- guide/lib/examples/task_list_helpers.rb | 11 ++++++++--- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/guide/content/components/task-list.slim b/guide/content/components/task-list.slim index a767be52..1364a6f7 100644 --- a/guide/content/components/task-list.slim +++ b/guide/content/components/task-list.slim @@ -2,8 +2,11 @@ title: Task list --- -p The task list component displays all the tasks a user needs to do, and allows - users to easily identify which ones are done and which they still need to do. +markdown: + The task list component displays a list of related tasks that user needs to do, and allows + them to easily identify which ones are done and which they still need to do. + + You can have multiple tasks lists on a page. Where you have multiple tasks lists, you must add a unique `id_prefix` to each one. == render('/partials/example.*', caption: "Default task list", diff --git a/guide/lib/examples/task_list_helpers.rb b/guide/lib/examples/task_list_helpers.rb index 236ddf36..76a58ecf 100644 --- a/guide/lib/examples/task_list_helpers.rb +++ b/guide/lib/examples/task_list_helpers.rb @@ -2,9 +2,14 @@ module Examples module TaskListHelpers def default_task_list <<~SNIPPET - = govuk_task_list(id_prefix: "project-tasks") do |task_list| - - task_list.with_item(title: "Contact details", href: '#', status: "Completed") - - task_list.with_item(title: "Project details", href: '#', status: "Completed") +

    About you

    + = govuk_task_list(id_prefix: "about-you") do |task_list| + - task_list.with_item(title: "Personal details", href: '#', status: "Completed") + - task_list.with_item(title: "Contact details", href: '#', status: govuk_tag(text: "Incomplete", colour: "blue")) + +

    Your project

    + = govuk_task_list(id_prefix: "your-project") do |task_list| + - task_list.with_item(title: "Project description", href: '#', status: "Completed") - task_list.with_item(title: "Funding", href: '#', status: govuk_tag(text: "Incomplete", colour: "blue")) SNIPPET end From 7fed4737f951c6078f98133c957d455d2d4988f5 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 31 Oct 2023 09:56:09 +0000 Subject: [PATCH 32/64] Use slim syntax --- guide/lib/examples/task_list_helpers.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/guide/lib/examples/task_list_helpers.rb b/guide/lib/examples/task_list_helpers.rb index 76a58ecf..3a6010dd 100644 --- a/guide/lib/examples/task_list_helpers.rb +++ b/guide/lib/examples/task_list_helpers.rb @@ -2,12 +2,12 @@ module Examples module TaskListHelpers def default_task_list <<~SNIPPET -

    About you

    + h2.govuk-heading-m About you = govuk_task_list(id_prefix: "about-you") do |task_list| - task_list.with_item(title: "Personal details", href: '#', status: "Completed") - task_list.with_item(title: "Contact details", href: '#', status: govuk_tag(text: "Incomplete", colour: "blue")) -

    Your project

    + h2.govuk-heading-m Your project = govuk_task_list(id_prefix: "your-project") do |task_list| - task_list.with_item(title: "Project description", href: '#', status: "Completed") - task_list.with_item(title: "Funding", href: '#', status: govuk_tag(text: "Incomplete", colour: "blue")) From f6cf2a749875937fea097f5004ecdf53adf536be Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 31 Oct 2023 10:07:21 +0000 Subject: [PATCH 33/64] Add example using custom classes and attributes --- guide/content/components/task-list.slim | 10 ++++++++++ guide/lib/examples/task_list_helpers.rb | 14 ++++++++++++++ 2 files changed, 24 insertions(+) diff --git a/guide/content/components/task-list.slim b/guide/content/components/task-list.slim index 1364a6f7..f4e6f418 100644 --- a/guide/content/components/task-list.slim +++ b/guide/content/components/task-list.slim @@ -36,3 +36,13 @@ markdown: markdown: Tasks can omit the `href` keyword if they cannot be started yet. When doing this you should add the `govuk-task-list__status--cannot-start-yet` to the status, and a hint to explain why the task cannot be started yet. + +== render('/partials/example.*', + caption: "Task list with custom classes", + code: task_list_with_custom_classes) do + + markdown: + If you need to customise the task list, you can add custom modifier classes to the task list, items, titles or statuses. + + You can also add additional html attributes using the `html_attributes` keyword. + diff --git a/guide/lib/examples/task_list_helpers.rb b/guide/lib/examples/task_list_helpers.rb index 3a6010dd..12d69395 100644 --- a/guide/lib/examples/task_list_helpers.rb +++ b/guide/lib/examples/task_list_helpers.rb @@ -55,5 +55,19 @@ def task_list_with_hints - item.with_status(text: govuk_tag(text: "To do", colour: "red")) SNIPPET end + + def task_list_with_custom_classes + <<~SNIPPET + = govuk_task_list(id_prefix: "task-list-with-custom-classes", classes: "app-task-list--my-modifier", html_attributes: {"data-my-key" => "my-value"}) do |task_list| + + - task_list.with_item(classes: "app-task-list__item--my-modifier") do |item| + - item.with_title(text: "Personal details", href: "#", classes: "app-task-list__name-and-hint--my-modifier") + - item.with_status(text: "Completed", classes: "app-task-list__status--my-modifier") + + - task_list.with_item(classes: "app-task-list__item--my-modifier") do |item| + - item.with_title(text: "Contact information", href: "#", classes: "app-task-list__name-and-hint--my-modifier") + - item.with_status(text: "Completed", classes: "app-task-list__status--my-modifier") + SNIPPET + end end end From 262f8c0f4aab136bb85983f22348a5e0ccbe0a59 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 31 Oct 2023 10:33:33 +0000 Subject: [PATCH 34/64] Trim multiple trailing lines --- guide/content/components/task-list.slim | 1 - 1 file changed, 1 deletion(-) diff --git a/guide/content/components/task-list.slim b/guide/content/components/task-list.slim index f4e6f418..964a4d9e 100644 --- a/guide/content/components/task-list.slim +++ b/guide/content/components/task-list.slim @@ -45,4 +45,3 @@ markdown: If you need to customise the task list, you can add custom modifier classes to the task list, items, titles or statuses. You can also add additional html attributes using the `html_attributes` keyword. - From 342eb429e7b102d91950731233749cc6a73f4370 Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Thu, 2 Nov 2023 17:27:31 +0000 Subject: [PATCH 35/64] Add task list component to the list in the README --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 61f003e8..0627bc2f 100644 --- a/README.md +++ b/README.md @@ -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), From b95a71465ab6d53a3b0163cfabad43345c0ec733 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Fri, 3 Nov 2023 13:38:39 +0000 Subject: [PATCH 36/64] Update to second prerelease --- guide/package-lock.json | 26 +++++++------------------- guide/package.json | 2 +- spec/dummy/package-lock.json | 29 +++++++++++++++++++++-------- spec/dummy/package.json | 2 +- 4 files changed, 30 insertions(+), 29 deletions(-) diff --git a/guide/package-lock.json b/guide/package-lock.json index 65b68709..77d8fe26 100644 --- a/guide/package-lock.json +++ b/guide/package-lock.json @@ -10,7 +10,7 @@ "hasInstallScript": true, "license": "ISC", "dependencies": { - "govuk-frontend": "5.0.0-beta.0", + "govuk-frontend": "5.0.0-beta.1", "sass": "^1.52.1" } }, @@ -107,17 +107,11 @@ } }, "node_modules/govuk-frontend": { - "version": "5.0.0-beta.0", - "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.0.0-beta.0.tgz", - "integrity": "sha512-z6auFqWFVrMqjwRkDpDkVs7lHUbDCskPS4MaCsOYE8/wDSuwjE8CW4PRv+mck3uixNw3c80D0ox6WKIGyk4zUQ==", + "version": "5.0.0-beta.1", + "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.0.0-beta.1.tgz", + "integrity": "sha512-vHtKGYhr7tT/G4+CdsEnPDh+zCy/1HlTmCK0zb566Tb/AQwcOhhA9bq5fvnNsaSoZh0hMblJuOfCX5RDH6hwNA==", "engines": { "node": ">= 4.2.0" - }, - "optionalDependencies": { - "@govuk-frontend/config": "*", - "@govuk-frontend/helpers": "*", - "@govuk-frontend/lib": "*", - "@govuk-frontend/tasks": "*" } }, "node_modules/immutable": { @@ -290,15 +284,9 @@ } }, "govuk-frontend": { - "version": "5.0.0-beta.0", - "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.0.0-beta.0.tgz", - "integrity": "sha512-z6auFqWFVrMqjwRkDpDkVs7lHUbDCskPS4MaCsOYE8/wDSuwjE8CW4PRv+mck3uixNw3c80D0ox6WKIGyk4zUQ==", - "requires": { - "@govuk-frontend/config": "*", - "@govuk-frontend/helpers": "*", - "@govuk-frontend/lib": "*", - "@govuk-frontend/tasks": "*" - } + "version": "5.0.0-beta.1", + "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.0.0-beta.1.tgz", + "integrity": "sha512-vHtKGYhr7tT/G4+CdsEnPDh+zCy/1HlTmCK0zb566Tb/AQwcOhhA9bq5fvnNsaSoZh0hMblJuOfCX5RDH6hwNA==" }, "immutable": { "version": "4.2.2", diff --git a/guide/package.json b/guide/package.json index 5b3500fb..9d435be5 100644 --- a/guide/package.json +++ b/guide/package.json @@ -13,7 +13,7 @@ "author": "", "license": "ISC", "dependencies": { - "govuk-frontend": "5.0.0-beta.0", + "govuk-frontend": "5.0.0-beta.1", "sass": "^1.52.1" } } diff --git a/spec/dummy/package-lock.json b/spec/dummy/package-lock.json index 4f6b624b..c6b51578 100644 --- a/spec/dummy/package-lock.json +++ b/spec/dummy/package-lock.json @@ -1,16 +1,29 @@ { + "name": "dummy", + "lockfileVersion": 3, "requires": true, - "lockfileVersion": 1, - "dependencies": { - "govuk-frontend": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-4.0.0.tgz", - "integrity": "sha512-liaJildULUNSSvEgDm36SQTivqBHiZLdrm+O7bBxnW4Q1g64asi+mJIMzW8QeOqlG4Yn8s0gSklsIyaFOuCisQ==" + "packages": { + "": { + "dependencies": { + "govuk-frontend": "5.0.0-beta.1", + "prismjs": "^1.27.0" + } }, - "prismjs": { + "node_modules/govuk-frontend": { + "version": "5.0.0-beta.1", + "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.0.0-beta.1.tgz", + "integrity": "sha512-vHtKGYhr7tT/G4+CdsEnPDh+zCy/1HlTmCK0zb566Tb/AQwcOhhA9bq5fvnNsaSoZh0hMblJuOfCX5RDH6hwNA==", + "engines": { + "node": ">= 4.2.0" + } + }, + "node_modules/prismjs": { "version": "1.27.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz", - "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==" + "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==", + "engines": { + "node": ">=6" + } } } } diff --git a/spec/dummy/package.json b/spec/dummy/package.json index 263941aa..7131e511 100644 --- a/spec/dummy/package.json +++ b/spec/dummy/package.json @@ -1,6 +1,6 @@ { "dependencies": { - "govuk-frontend": "5.0.0-beta.0", + "govuk-frontend": "5.0.0-beta.1", "prismjs": "^1.27.0" } } From 8823090c93543855ae51ea958e204313f78d6021 Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Sun, 26 Nov 2023 18:44:33 +0000 Subject: [PATCH 37/64] Split out extract_button_link_args Here we're making #extract_button_link_args its own method and then composing all the attributes needed for links and buttons by simply constructing a hash from all the separate bits. Links and buttons should be treated totally separately, but #govuk_button_link_to are a combination of the two; so they need the link attributes with the button classes --- app/helpers/govuk_link_helper.rb | 35 +++++++++++++++++++++++--------- 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/app/helpers/govuk_link_helper.rb b/app/helpers/govuk_link_helper.rb index 9b0e06db..4a0736f9 100644 --- a/app/helpers/govuk_link_helper.rb +++ b/app/helpers/govuk_link_helper.rb @@ -34,7 +34,7 @@ def govuk_button_to(name, href = nil, disabled: false, inverse: false, secondary end def govuk_button_link_to(name, href = nil, new_tab: false, disabled: false, inverse: false, secondary: false, warning: false, **kwargs, &block) - button_args = extract_button_args(new_tab: new_tab, disabled: disabled, inverse: inverse, secondary: secondary, warning: warning, **kwargs) + button_args = extract_button_link_args(new_tab: new_tab, disabled: disabled, inverse: inverse, secondary: secondary, warning: warning, **kwargs) if block_given? link_to(block.call, href, **button_args) @@ -92,28 +92,43 @@ def button_attributes(disabled) end 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) + + { **link_classes, **new_tab_args(new_tab) }.deep_merge_html_attributes(kwargs) + end + + 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) + + { **button_classes, **button_attributes(disabled), **new_tab_args(new_tab) }.deep_merge_html_attributes(kwargs) + end + + def extract_button_args(disabled: false, inverse: false, secondary: false, warning: false, **kwargs) + button_classes = extract_button_classes(inverse: inverse, secondary: secondary, warning: warning) + + { **button_classes, **button_attributes(disabled) }.deep_merge_html_attributes(kwargs) + 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 - ), - **new_tab_args(new_tab) - }.deep_merge_html_attributes(kwargs) + text_colour: text_colour, + ) + } end - def extract_button_args(new_tab: false, disabled: false, inverse: false, secondary: false, warning: false, **kwargs) + def extract_button_classes(inverse: false, secondary: false, warning: false) { class: govuk_button_classes( inverse: inverse, secondary: secondary, warning: warning - ), - **button_attributes(disabled), - **new_tab_args(new_tab) - }.deep_merge_html_attributes(kwargs) + ) + } end def brand From 04d38d62227fac84f6080fd7fffd49791a36a89d Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Sun, 26 Nov 2023 18:52:32 +0000 Subject: [PATCH 38/64] Rework and simplify the link and button helpers These are easier to read if we do the link/button text extraction up front and then consistently call link_to, button_to or mail_to --- app/helpers/govuk_link_helper.rb | 28 ++++++++-------------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/app/helpers/govuk_link_helper.rb b/app/helpers/govuk_link_helper.rb index 4a0736f9..3ded14c1 100644 --- a/app/helpers/govuk_link_helper.rb +++ b/app/helpers/govuk_link_helper.rb @@ -5,42 +5,30 @@ module GovukLinkHelper def govuk_link_to(name, href = nil, new_tab: false, inverse: false, muted: false, no_underline: false, no_visited_state: false, text_colour: false, **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 = (block_given?) ? block.call : name - if block_given? - link_to(block.call, href, **link_args) - else - link_to(name, href, **link_args) - end + link_to(link_text, href, **link_args) 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, **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 = (block_given?) ? block.call : name - if block_given? - mail_to(email_address, block.call, **link_args) - else - mail_to(email_address, name, **link_args) - end + mail_to(email_address, link_text, **link_args) end def govuk_button_to(name, href = nil, disabled: false, inverse: false, secondary: false, warning: false, **kwargs, &block) button_args = extract_button_args(new_tab: false, disabled: disabled, inverse: inverse, secondary: secondary, warning: warning, **kwargs) + button_text = (block_given?) ? block.call : name - if block_given? - button_to(block.call, href, **button_args) - else - button_to(name, href, **button_args) - end + button_to(button_text, href, **button_args) end def govuk_button_link_to(name, href = nil, new_tab: false, disabled: false, inverse: false, secondary: false, warning: false, **kwargs, &block) button_args = extract_button_link_args(new_tab: new_tab, disabled: disabled, inverse: inverse, secondary: secondary, warning: warning, **kwargs) + button_text = (block_given?) ? block.call : name - if block_given? - link_to(block.call, href, **button_args) - else - link_to(name, href, **button_args) - end + link_to(button_text, href, **button_args) end def govuk_breadcrumb_link_to(name, href = nil, **kwargs, &block) From b71c4daaa43680ee433dc32c32dd4f29e32a1f58 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Mon, 27 Nov 2023 12:01:41 +0000 Subject: [PATCH 39/64] Update to use new combined logo svg --- .../govuk_component/header_component.html.erb | 31 +++++++-------- .../govuk_component/header_component.rb | 8 +--- guide/content/components/header.slim | 38 +++++++++++-------- guide/content/stylesheets/application.scss | 16 ++++++++ guide/lib/examples/header_helpers.rb | 20 +++++----- guide/package-lock.json | 14 +++---- guide/package.json | 2 +- lib/govuk/components/engine.rb | 2 - .../header_component_configuration_spec.rb | 18 --------- .../govuk_component/header_component_spec.rb | 28 +------------- 10 files changed, 76 insertions(+), 101 deletions(-) diff --git a/app/components/govuk_component/header_component.html.erb b/app/components/govuk_component/header_component.html.erb index 507e40f5..5beec321 100644 --- a/app/components/govuk_component/header_component.html.erb +++ b/app/components/govuk_component/header_component.html.erb @@ -2,21 +2,22 @@ <%= tag.div(**container_html_attributes) do %>