bloom-works / guides-template

Placeholder repo for work on Bloom Guides
https://bloom-guides-template.netlify.app/
MIT License
2 stars 0 forks source link

Component: back to top #56

Open jeffmaher opened 1 year ago

jeffmaher commented 1 year ago

Stories

As a reader of a guide, I want to be able to easily go back to the top of the page to navigate to another chapter, or review the table of contents.

Notes

This ticket covers both design and development tasks. Change assignee of the ticket based on who has the next action, and remove the person or people that no longer have an action. It's expected that a ticket will get passed back and forth a few times.

Done When

UX: Component design is drafted and shared for review Dev: Component design is reviewed and approved Peer UX: Compontent design is reviewed and approved Dev: Component style and markup is developed and shared for PR review Dev: Documentation on how to use component is drafted UX: Component style and markup is reviewed and approved Peer Dev: Component style and markup is reviewed and approved Dev: Infrastructure is configured to support search Dev: Documentation is written on how to setup search Component is available for use

jeffmaher commented 1 year ago

Conversation around design

LynnHerrick9 commented 1 year ago

@admoorgit and @jeffmaher this could be relatively easy depending on the approach we go with. I did a quick proof of concept. This is currently added to the base layout, after content and before footer.. If we like how this looks so far, I can start working on making it float around the page as someone scrolls. Let me know your thoughts. Apologies if I jumped the listed design steps above if we still need to do those.

Video of concept

LynnHerrick9 commented 1 year ago

I am onboarding back on NJ today. I took at crack at the rest of it in case we like how it looks. If not, feel free to go in a completely different direction. My branch is here . What works (1) It looks like other buttons we have implemented (2) It floats on the right of page with view (3) It goes back to top. What still needs work (1) On quick testing, if the button goes into the footer it does not activate back-to-top on click. (2) The file structure might want to be changed since I technically didn't make a js "component". Only njk and css (3) We may want some styling changes.

I will sync with @SMakaiTakori for any question. Cheers!

admoorgit commented 1 year ago

Thanks @LynnHerrick9 for pulling this together! I'm going to do a little digging on accessibility implications so may have something to report back, but I think this is a good start.