[component]: User dropdown - Githubissues

swisspost / design-system

The Swiss Post Design System pattern library for a consistent and accessible user experience across the web platform.

https://design-system.post.ch

Apache License 2.0

121 stars 14 forks source link

[component]: User dropdown #3631

Open gfellerph opened 2 days ago

gfellerph commented 2 days ago

Create a user profile dropdown for users that have successfully logged into their account.

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=2908-36402&t=saHtog1amMMrG60S-4

Requirements

Use the <post-avatar> component for displaying the profile picture
Use <post-popovercontainer> for the popup
All content should be provided by the project as the Design System should not handle user sessions (like we did in the past)
This component does not have to be tokenised (will be discussed at a later stage)
Add keyboard navigation for arrow up/down to cycle through the links

Reference

### Tasks
- [ ] Add a `<post-profile>` component
- [ ] Add documentation
- [ ] Add e2e tests
- [ ] Add visual regression tests
- [ ] Design review

gfellerph commented 2 days ago

Component naming possibilities:

post-profile
post-header-profile
post-profile-dropdown
post-user-profile
post-user-dropdown
post-login-dropdown
post-user-menu
post-profile-menu