Skip to content

Commit

Permalink
Remove link from minimal
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
andysellick committed Oct 25, 2024
1 parent 8cf5470 commit 5916bbd
Show file tree
Hide file tree
Showing 4 changed files with 4 additions and 48 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
keys ||= []
chart_overview ||= nil
minimal ||= false
minimal_link ||= nil
hide_legend ||= minimal
link ||= false
height ||= 400
Expand Down Expand Up @@ -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%' },
Expand Down Expand Up @@ -171,10 +167,5 @@
</p>
<% end %>
<% end %>
<% if minimal %>
<%= link_to(minimal_link, class: "govuk-link gem-c-chart__minimal-link") do %>
<span class="govuk-visually-hidden"><%= chart_heading %></span>
<% end %>
<% end %>
<% end %>
<% end %>
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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:
Expand Down
9 changes: 0 additions & 9 deletions spec/components/chart_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 5916bbd

Please sign in to comment.