diff --git a/app/components/govuk_component/summary_list_component.rb b/app/components/govuk_component/summary_list_component.rb index 2caf00b0..35bf7f56 100644 --- a/app/components/govuk_component/summary_list_component.rb +++ b/app/components/govuk_component/summary_list_component.rb @@ -1,20 +1,22 @@ module GovukComponent class SummaryListComponent < GovukComponent::Base - attr_reader :borders, :actions, :card + attr_reader :borders, :actions, :card, :visually_hidden_action_suffix renders_many :rows, ->(classes: [], html_attributes: {}, &block) do GovukComponent::SummaryListComponent::RowComponent.new( show_actions_column: @show_actions_column, + visually_hidden_action_suffix: visually_hidden_action_suffix || card&.title, classes: classes, html_attributes: html_attributes, &block ) end - def initialize(rows: nil, actions: true, borders: config.default_summary_list_borders, card: nil, classes: [], html_attributes: {}) - @borders = borders - @show_actions_column = actions - @card = card + def initialize(rows: nil, actions: true, borders: config.default_summary_list_borders, card: {}, visually_hidden_action_suffix: nil, classes: [], html_attributes: {}) + @borders = borders + @show_actions_column = actions + @card = GovukComponent::SummaryListComponent::CardComponent.new(**card) if card.present? + @visually_hidden_action_suffix = visually_hidden_action_suffix super(classes: classes, html_attributes: html_attributes) @@ -26,16 +28,20 @@ def initialize(rows: nil, actions: true, borders: config.default_summary_list_bo def call summary_list = tag.dl(**html_attributes) { safe_join(rows) } - (card.nil?) ? summary_list : card_with(summary_list) + (card?) ? card_with(summary_list) : summary_list end private + def card? + @card.present? + end + # we're not using `renders_one` here because we always want the card to render # outside of the summary list. when manually building use # govuk_summary_list_card { govuk_summary_list } def card_with(summary_list) - render(GovukComponent::SummaryListComponent::CardComponent.new(**card)) { summary_list } + render(@card) { summary_list } end def borders_class diff --git a/app/components/govuk_component/summary_list_component/action_component.rb b/app/components/govuk_component/summary_list_component/action_component.rb index 03e208d8..931dbaf0 100644 --- a/app/components/govuk_component/summary_list_component/action_component.rb +++ b/app/components/govuk_component/summary_list_component/action_component.rb @@ -1,7 +1,7 @@ class GovukComponent::SummaryListComponent::ActionComponent < GovukComponent::Base - attr_reader :href, :text, :visually_hidden_text, :attributes, :classes + attr_reader :href, :text, :visually_hidden_text, :visually_hidden_action_suffix, :attributes, :classes - def initialize(href: nil, text: 'Change', visually_hidden_text: false, classes: [], html_attributes: {}) + def initialize(href: nil, text: 'Change', visually_hidden_text: false, visually_hidden_action_suffix: nil, classes: [], html_attributes: {}) @visually_hidden_text = visually_hidden_text if config.require_summary_list_action_visually_hidden_text && visually_hidden_text == false @@ -9,9 +9,9 @@ def initialize(href: nil, text: 'Change', visually_hidden_text: false, classes: end super(classes: classes, html_attributes: html_attributes) - @href = href @text = text + @visually_hidden_action_suffix = visually_hidden_action_suffix end def render? @@ -36,7 +36,13 @@ def action_text content || text || fail(ArgumentError, "no text or content") end + def visually_hidden_content + return "#{visually_hidden_text} (#{visually_hidden_action_suffix})" if visually_hidden_action_suffix + + visually_hidden_text + end + def visually_hidden_span - tag.span(%( #{visually_hidden_text}), class: "#{brand}-visually-hidden") if visually_hidden_text.present? + tag.span(%( #{visually_hidden_content}), class: "#{brand}-visually-hidden") if visually_hidden_text.present? end end diff --git a/app/components/govuk_component/summary_list_component/card_component.html.erb b/app/components/govuk_component/summary_list_component/card_component.html.erb index bd86d44b..9e0a0701 100644 --- a/app/components/govuk_component/summary_list_component/card_component.html.erb +++ b/app/components/govuk_component/summary_list_component/card_component.html.erb @@ -5,7 +5,7 @@ <% if actions.any? %> <% end %> diff --git a/app/components/govuk_component/summary_list_component/card_component.rb b/app/components/govuk_component/summary_list_component/card_component.rb index 6a14557b..d5400e38 100644 --- a/app/components/govuk_component/summary_list_component/card_component.rb +++ b/app/components/govuk_component/summary_list_component/card_component.rb @@ -16,4 +16,8 @@ def initialize(title:, actions: [], classes: [], html_attributes: {}) def default_attributes { class: "#{brand}-summary-card" } end + + def action_text(action) + safe_join([action, tag.span(" (" + title + ")", class: "#{brand}-visually-hidden")]) + end end diff --git a/app/components/govuk_component/summary_list_component/row_component.rb b/app/components/govuk_component/summary_list_component/row_component.rb index c7cb3563..49b74730 100644 --- a/app/components/govuk_component/summary_list_component/row_component.rb +++ b/app/components/govuk_component/summary_list_component/row_component.rb @@ -1,12 +1,23 @@ class GovukComponent::SummaryListComponent::RowComponent < GovukComponent::Base - attr_reader :href, :visually_hidden_text, :show_actions_column + attr_reader :href, :visually_hidden_text, :show_actions_column, :visually_hidden_action_suffix renders_one :key, GovukComponent::SummaryListComponent::KeyComponent renders_one :value, GovukComponent::SummaryListComponent::ValueComponent - renders_many :actions, GovukComponent::SummaryListComponent::ActionComponent + renders_many :actions, ->(href: nil, text: 'Change', visually_hidden_text: false, classes: [], html_attributes: {}, &block) do + GovukComponent::SummaryListComponent::ActionComponent.new( + href: href, + text: text, + visually_hidden_text: visually_hidden_text, + visually_hidden_action_suffix: visually_hidden_action_suffix, + classes: classes, + html_attributes: html_attributes, + &block + ) + end - def initialize(show_actions_column: nil, classes: [], html_attributes: {}) + def initialize(show_actions_column: nil, visually_hidden_action_suffix: nil, classes: [], html_attributes: {}) @show_actions_column = show_actions_column + @visually_hidden_action_suffix = visually_hidden_action_suffix super(classes: classes, html_attributes: html_attributes) end diff --git a/spec/components/govuk_component/summary_list_card_component_spec.rb b/spec/components/govuk_component/summary_list_card_component_spec.rb index b26e363a..932fb865 100644 --- a/spec/components/govuk_component/summary_list_card_component_spec.rb +++ b/spec/components/govuk_component/summary_list_card_component_spec.rb @@ -98,7 +98,7 @@ specify "the actions are rendered" do expect(rendered_content).to have_tag("ul", with: { class: "govuk-summary-card__actions" }) do - actions.each { |action| with_tag("li", text: action, with: { class: "govuk-summary-card__action" }) } + actions.each { |action| with_tag("li", text: "#{action} (#{title})", with: { class: "govuk-summary-card__action" }) } end end end diff --git a/spec/components/govuk_component/summary_list_component_spec.rb b/spec/components/govuk_component/summary_list_component_spec.rb index f265bbd6..8839eb0e 100644 --- a/spec/components/govuk_component/summary_list_component_spec.rb +++ b/spec/components/govuk_component/summary_list_component_spec.rb @@ -170,12 +170,54 @@ context "when there is a card" do subject! do render_inline(described_class.new(card: { title: "Hi" }, **kwargs)) do |component| - component.with_row { |row| helper.safe_join([row.with_key(text: "Key"), row.with_value(text: "Value"), row.with_action(href: "/a", visually_hidden_text: "for key")]) } + component.with_row { |row| helper.safe_join([row.with_key(text: "Key"), row.with_value(text: "Value"), row.with_action(href: "/a", visually_hidden_text: "this row")]) } + end + end + + specify "when the card parameters are passed into the summary list via card:" do + expect(rendered_content).to have_tag("div", with: { class: "govuk-summary-card" }) do + with_tag("dl", with: { class: "govuk-summary-list" }) + end + end + + specify "the summary card's title is included in the visually hidden action suffix" do + expect(rendered_content).to have_tag("dd", with: { class: "govuk-summary-list__actions" }) do + with_text("Change this row (Hi)") + with_tag("span", with: { class: "govuk-visually-hidden" }, text: %r{this row \(Hi\)}) end end - specify "the summary list is wrapped in a card" do - expect(rendered_content).to have_tag("div", with: { class: "govuk-summary-card" }) + context "when the visually_hidden_action_suffix is present" do + subject! do + render_inline(described_class.new(card: { title: "Hi" }, visually_hidden_action_suffix: "Hello", **kwargs)) do |component| + component.with_row { |row| helper.safe_join([row.with_key(text: "Key"), row.with_value(text: "Value"), row.with_action(href: "/a", visually_hidden_text: "this row")]) } + end + end + + specify "the visually_hidden_action_suffix overrides the card's title in action links" do + expect(rendered_content).to have_tag("dd", with: { class: "govuk-summary-list__actions" }) do + with_tag("span", with: { class: "govuk-visually-hidden" }, text: %r{this row \(Hello\)}) + end + end + end + end + + context "when the summary list is manually placed within a card and the title is set with visually_hidden_action_suffix:" do + subject! do + render_inline(described_class.new(visually_hidden_action_suffix: "Hi", **kwargs)) do |component| + component.with_row { |row| helper.safe_join([row.with_key(text: "Key"), row.with_value(text: "Value"), row.with_action(href: "/a", visually_hidden_text: "this row")]) } + end + end + + specify "the summary list isn't wrapped in a card" do + expect(rendered_content).not_to have_tag("div", with: { class: "govuk-summary-card" }) + end + + specify "the summary card's title is included in the visually hidden action suffix" do + expect(rendered_content).to have_tag("dd", with: { class: "govuk-summary-list__actions" }) do + with_text("Change this row (Hi)") + with_tag("span", with: { class: "govuk-visually-hidden" }, text: %r{this row \(Hi\)}) + end end end