Back To Top Link

[adi-unni]

What is the context of this PR?

Fixes: #1599

The back-to-top link is a requested component for the Design System. The button takes you from wherever you are on the page to the top of the page or wherever you specify.

The default options for both are "Back to Top" taking you to "#top" however, this can be modified to you to the contents with the description "Scroll to contents" for example. To modify the text of the button, edit the description parameter. Similarly, to modify the jump location, edit the anchor parameter. When making a custom point to anchor, make sure to add an id to the element you want to jump to which matches the id in the anchor parameter.

As per the requirements, the button will appear towards the bottom of the screen when the user scrolls two window heights down from the anchor div. When the user reaches the link on the page, it will take the form of the link on the page.

Note: Position of the text of the button when sticky is based on the position when it is a link on the on the page. This in turn is based on the container it is in.

How to review this PR

Check out the back to top button examples and make sure they are working correctly. Also test resizing the window to make sure the BTT links margins move accordingly

Checklist

This needs to be completed by the person raising the PR.

• I have selected the correct Assignee
• I have linked the correct Issue

[netlify]

✅ Deploy Preview for ons-design-system-preview ready!

Name	Link
🔨 Latest commit	e7d21ab
🔍 Latest deploy log	https://app.netlify.com/sites/ons-design-system-preview/deploys/65df3995e88e2a00085e0179
😎 Deploy Preview	https://deploy-preview-2990--ons-design-system-preview.netlify.app/components/back-to-top/example-full-page-back-to-top
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[rmccar]

Few minor things here and I think the formatting of your examples needs looking at. Theres also a few of my previous comments that haven't been addressed

[rmccar]

Id recommend adding the eslint extension to your VScode and changing the "render whitespace" setting to "all" which will allow you to easily spot some of these things

[adi-unni]

Think this focus state might be a bit big. Also I think because of this we are losing the black underline that is used on other focused elements

Talked to Joe about the width being full / almost full width it is deemed to be as intended. To match the skip-to-content component, the text underline is being added back in on focus.

If you want to match skip-to-content wouldn't you want to have the whole thing highlighted?

Joe has confirmed this is what the intended behaviour should be. I will work on adding this in

[rmccar]

The "backToTop" files should be renamed "back-to-top" to be consistent with other filenames of the same type

[adi-unni]

Think this focus state might be a bit big. Also I think because of this we are losing the black underline that is used on other focused elements

Talked to Joe about the width being full / almost full width it is deemed to be as intended. To match the skip-to-content component, the text underline is being added back in on focus.

If you want to match skip-to-content wouldn't you want to have the whole thing highlighted?

Joe has confirmed this is what the intended behaviour should be. I will work on adding this in

An update on this. This would not be a good solution for screens which are wide / have wide windows. Joe has requested additional UX work to be done to make a decision on this before it is implemented.

[adi-unni]

Think this focus state might be a bit big. Also I think because of this we are losing the black underline that is used on other focused elements

Talked to Joe about the width being full / almost full width it is deemed to be as intended. To match the skip-to-content component, the text underline is being added back in on focus.

If you want to match skip-to-content wouldn't you want to have the whole thing highlighted?

Joe has confirmed this is what the intended behaviour should be. I will work on adding this in

An update on this. This would not be a good solution for screens which are wide / have wide windows. Joe has requested additional UX work to be done to make a decision on this before it is implemented.

Final decision was to make the highlighted bar full width for consistency between components. Where the screen is too wide, this is being dealt with as an edge case and doesn't impact usability.