Update arrow icons to be visually consistent with other arrow-like icons

[paulrobertlloyd]

Description

In reviewing #1026, the difference in arrows used for pagination versus chevrons used in other components and the right-pointing action link icon becomes clearer, with the pagination arrows looking like they are from a different icon set.

Also, with the numbered pagination option, it looks like the arrows might be rendered smaller; at which point the arrow tips become harder to identify.

This PR update the pagination arrow icons to have open arrow tips, using the same path metrics as those used by the other arrow icons.

This could also potentially be merged into and be part of #1026, or merged separately (with corresponding a changelog entry).

Pagination before

Pagination after

Arrow icons before

Arrow icons after

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[frankieroberto]

@paulrobertlloyd ooh I like this, it looks a lot more consistent! It's interesting how one of the main style differences between govuk and nhs, eg on buttons and arrows, is sharp corners vs rounded corners 😄

Do you think it’s worth exploring whether the pagination component could even use the chevron variant without the horizontal line? The 'Previous' and 'Next' titles could then perhaps be aligned (left and right) with the page titles underneath?

[edwardhorsford]

I agree the new arrows seem more visually in keeping with general styles. Nice work.

[paulrobertlloyd]

Do you think it’s worth exploring whether the pagination component could even use the chevron variant without the horizontal line? The 'Previous' and 'Next' titles could then perhaps be aligned (left and right) with the page titles underneath?

Possibly, although I like the greater directionality (spoken like a true designer) of the arrows versus the chevrons. Aligning the text would be a good call, be good to tidy up the alignment a bit.

[frankieroberto]

greater directionality

made-up phrase 😉

Whilst we’re here, let’s talk colours? Existing behaviour:

• Back link uses a blue arrow which changes colour on hover and focus to match the link (but curiously not when active)
• Breadcrumbs arrows stay grey - which makes sense as they're not part of the links but between them
• Action link arrows only change colour on focus, but otherwise stay green
• Expander icons change colour on focus but not on hover.
• Pagination arrows change colour on focus, hover and visited but not active

A bit inconsistent, but possibly with good reason?

In general, I think it’s good if there can be some indication on hover that the icon is part of the link - but that could be a background colour change (govuk pagination links use a background grey colour on hover) or an icon fill colour change?

[paulrobertlloyd]

For the colouranality (😉), maybe we can have some rules around this; such as when an item is hovered, active or focused, all elements within that link share the same standard link colours for these states?

[frankieroberto]

This sent me down a rabbithole trying to work out where the standalone .svg file are used, and I think the answer is: they're not? If so, #1028 suggests removing them.