Add example of icon variant of Back to top to the site

[ad9242]

What component is this related to?

Back to top

Why do we need it?

A new "icon" variant was recently added under https://github.com/mi6/ic-ui-kit/issues/1849

Guidance tab

• Update h2 on 'guidance tab' from Introduction>Component variants)
• Include 'There are two variants of back to top component: 'Default' and 'Icon only'
• Consider how to demo both variants (as currently the anchor snaps to the physical back to top component on the page). Do we just render both in the component preview?
• Under When to use include Default and Icon only. The existing guidance can be used for Default and you should introduce that the icon only variant can be used when zooming to reduce chance of overlapping content.
• Make and export a Figma image to show the icon only back to top variant.

Code tab

• Add icon only as a variant which includes an example

Accessibility tab

• Under Easy to use for everyone, add a sentence to explain that we have built the icon only variant to be more accessible on zoom (as the label will not exist to overlap content and there is the addition of the tooltip).