From 5916bbd03147f7990032362eac1885e7369a2245 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Fri, 25 Oct 2024 11:39:56 +0100 Subject: [PATCH] Remove link from minimal - whilst this seemed like a good idea at the time, it presents some issues, notably that the chart has nothing that indicates it is a link and can be clicked on - better to remove the link entirely and provide better guidance on how minimal mode should be used i.e. manage linking to or showing more data at an application level, rather than the component level --- .../components/_chart.scss | 25 ------------------- .../components/_chart.html.erb | 9 ------- .../components/docs/chart.yml | 9 +++---- spec/components/chart_spec.rb | 9 ------- 4 files changed, 4 insertions(+), 48 deletions(-) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss index 29ebcda790..54b06fa1f5 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss @@ -40,28 +40,3 @@ text-align: center; } } - -.gem-c-chart__minimal-link { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - &:focus { - background: transparent; // overrides govuk-link background, which obscures the graph - - &::after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-top: solid 1px $govuk-focus-colour; - border-left: solid 3px $govuk-focus-colour; - border-right: solid 3px $govuk-focus-colour; - box-sizing: border-box; - } - } -} diff --git a/app/views/govuk_publishing_components/components/_chart.html.erb b/app/views/govuk_publishing_components/components/_chart.html.erb index 468f7eff09..bc444d2ca5 100644 --- a/app/views/govuk_publishing_components/components/_chart.html.erb +++ b/app/views/govuk_publishing_components/components/_chart.html.erb @@ -13,7 +13,6 @@ keys ||= [] chart_overview ||= nil minimal ||= false - minimal_link ||= nil hide_legend ||= minimal link ||= false height ||= 400 @@ -42,9 +41,6 @@ enableInteractivity = false if minimal textPosition = nil textPosition = 'none' if minimal - if minimal && !minimal_link - raise ArgumentError, "Minimal version must include a link" - end chart_library_options = { chartArea: { width: '80%', height: '60%' }, @@ -171,10 +167,5 @@

<% end %> <% end %> - <% if minimal %> - <%= link_to(minimal_link, class: "govuk-link gem-c-chart__minimal-link") do %> - <%= chart_heading %> - <% end %> - <% end %> <% end %> <% end %> diff --git a/app/views/govuk_publishing_components/components/docs/chart.yml b/app/views/govuk_publishing_components/components/docs/chart.yml index f34b4d601b..46d447c079 100644 --- a/app/views/govuk_publishing_components/components/docs/chart.yml +++ b/app/views/govuk_publishing_components/components/docs/chart.yml @@ -243,10 +243,11 @@ examples: - 80 minimal_version: description: | - The minimal version presents a simplified version of the chart and should only be used where the user is then directed to a more detailed view of the data. Specifically, minimal mode: + The minimal version presents a simplified version of the chart. This should only be used where there is not enough space to display a full chart, and the user is then given an option to see more information about the chart, for example by including a link next to the chart component. This must be part of the page, as this is not provided by the component itself. - - turns the chart into a link that should point to a page with a full version of the chart with all data - - hides the chart heading, but uses the text as the text for the link + Specifically, minimal mode: + + - hides the chart heading - removes the legend and X and Y axis values - removes the data table and link to the data (if supplied) beneath the chart - removes the part of the visually hidden accessibility message that links to the table @@ -257,7 +258,6 @@ examples: h_axis_title: Day v_axis_title: Views minimal: true - minimal_link: "https://www.gov.uk" chart_overview: This is a graph of views per day keys: - 1st @@ -296,7 +296,6 @@ examples: h_axis_title: Day v_axis_title: Views minimal: true - minimal_link: "https://www.gov.uk" chart_overview: This is a graph of views per day height: 200 keys: diff --git a/spec/components/chart_spec.rb b/spec/components/chart_spec.rb index edca2521b2..02d4099d8c 100644 --- a/spec/components/chart_spec.rb +++ b/spec/components/chart_spec.rb @@ -109,24 +109,15 @@ def component_name it "renders a minimal version" do data[:minimal] = true data[:link] = "https://should.not.be.shown" - data[:minimal_link] = "https://www.gov.uk" data[:chart_overview] = "This is a chart showing a rise in sea levels in the last ten years" render_component(data) assert_select ".gem-c-chart.gem-c-chart--minimal" assert_select ".gem-c-chart__chart[aria-hidden='true']" assert_select '.gem-c-chart .govuk-link[href="https://should.not.be.shown"]', false - assert_select '.gem-c-chart .gem-c-chart__minimal-link[href="https://www.gov.uk"]' assert_select ".gem-c-chart__chart .govuk-visually-hidden", false end - it "does not render a minimal version if a link is not supplied" do - data[:minimal] = true - expect { - render_component(data) - }.to raise_error("Minimal version must include a link") - end - it "only calls an external script once" do render_component(data) data[:classes] = "" # need to 'reset' this otherwise it carries from the first component and breaks shared_helper