[component]: Back to top

Cian77 commented 1 month ago

Description

Create a back to top button that appears when scrolling below the fold and disappears again when scrolling back up above the fold. A working example can be found on https://post.ch.

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=18-11

Tokens

[x] Tokens for this component are ready

Token proposal

floating-button-position-right (space between right edge of the browser window and component)
floating-button-position-bottom (space between bottom edge of browser window and component)

Size is determined by kind of button used (icon-button large) and box-shadows is determined by foundations/elevation.

Requirements

Scroll driven animations: investigate if the scroll effect can be achieved with scroll driven animations (https://scroll-driven-animations.style/)

Tasks

### 💻 Tasks
- [x] Review Design (All states present? Possible to implement?)
- [x] HTML/CSS implementation
- [x] Documentation in Storybook
- [x] Visual regression tests
- [ ] Design review

gfellerph commented 1 month ago

Resolution: build back to top button for the moment, other use cases are interesting but need to be requested or discovered in a later step.

Vandapanda commented 3 weeks ago

@gfellerph I'd recommend to generate specific tokens for that one as it might look different than a secondary icon button somewhen. We can just connect them semantically to whatever we used for the secondary icon button so it looks the same for now. Further there is atm no such thing as a foundations/elevation.

gfellerph commented 3 weeks ago

@Vandapanda I would strongly recommend to reuse where we have the possibility. Dedicated tokens can be added whenever necessary.

myrta2302 commented 2 weeks ago

Since the css scroll animations are not supported at the moment from Firefox and Safari, it was decided that the back to top will be a web component.

myrta2302 commented 1 week ago

The icon loaded via the post-icon component takes some time to show.

myrta2302 commented 1 week ago

post-floating-button-size-outer: 56px, post-floating-button-size-icon: 24px, post-floating-button-position-right: 40px, post-floating-button-position-bottom: 40px, post-floating-button-border-radius-round: 100%, post-floating-button-border-width: 2px, post-floating-button-enabled-border: #050400, post-floating-button-enabled-fg: #050400, post-floating-button-enabled-bg: white, post-floating-button-hover-border: #504f4b, post-floating-button-hover-fg: #504f4b, post-floating-button-hover-bg: white, post-floating-button-translate-y: 8rem (The distance of the button from the bottom when above the fold)

Vandapanda commented 1 week ago

should be tokenized accordingly. Position: Set to change with device. Desktop and Tablet 40, mobile 16 if it should be changed let me know.

myrta2302 commented 1 week ago

@sandra-post Ready for Design Review -> https://preview-3991--swisspost-design-system-next.netlify.app/ :)

Icon used is not the final one
Animation is indicative

sandra-post commented 1 day ago

@myrta2302 Design Review feedback All good, except position of component: Must be at top instead of bottom of page (different than in V1), see technical documentation in Figma, section Placement.

swisspost / design-system