for sprint 16 Don't repeat yourself we have to build a component library consisting of all the components that can be used in our project
In the main 'leertaak' component library we got tasked to create a morphological chart to help us come up wth many combinations or solutions for for the bigger components of our project
here are some suggestion in we got for some of these components
components:
Profile Information:
Avatar + Name
Avatar + Name + Bio
Avatar + Name + Role
Avatar + Name + Social Links
Avatar + Name + Stats
Avatar + Name + Skills
Avatar + Name + Contact Info
Avatar + Name + Interests
Page Navigation:
Top Horizontal Menu
Left Vertical Menu
Bottom Horizontal Menu
Right Vertical Menu
Breadcrumb Navigation
Hamburger Menu
Tabs Navigation
Pagination
Login Input Components:
Email Input
Username Input
Password Input
Phone Number Input
Social Login Buttons
Forgot Password Link
Remember Me Checkbox
Submit Button
Header:
Logo + Navigation
Logo + Search Bar
Logo + User Menu
Logo + Call to Action
Logo + Hamburger Menu
Logo + Breadcrumbs
Logo + Language Switcher
Logo + Social Links
Window Component:
Centered Modal
Slide-in From Side
Pop-up Notification
Full-screen Overlay
Expandable/Collapsible
Draggable/Resizable
With Close Button
With Footer Actions
Profile Information
Basic text fields (name, bio, contact)
Profile card with avatar and social links
Interactive card with animations (flip on hover)
Expanding bio section (accordion style)
Tabs (e.g., "About," "Posts," "Friends")
Progress indicator (profile completeness)
Minimalistic icon-only profile (for quick views)
Rich profile with interactive achievements or badges
Page Navigation
Side menu (collapsible)
Top horizontal navbar with dropdowns
Breadcrumb navigation
Floating button for primary links (e.g., home, settings)
Off-canvas sliding menu (mobile style)
Tabbed navigation (switch between sections)
Sticky header with anchors for quick scrolling
Dynamic menu (changes based on user activity)
Login Input Components
Standard text inputs (username/password)
Social login buttons (Google, Facebook)
Biometric input (face or fingerprint)
OTP (One-Time Password) via email or SMS
Passwordless (magic link to email)
Checkbox for "Remember me"
Captcha or anti-bot verification
Quick response QR login (for mobile integration)
Header
Minimal header (logo only, no menu)
Full-width header with banner image
Sticky header with search bar
Transparent header (image background)
Header with user profile dropdown
Animated header that shrinks on scroll
Header with social media icons
Header with quick-access notifications
Window Component
Modal pop-up (centered on screen)
Fullscreen overlay (blur background)
Drawer panel (side panel with close button)
Split window (two-panel layout)
Accordion window (expand/collapse sections)
Draggable pop-up window
Tabbed modal (multi-step modals)
Tooltip popover (appears on hover or focus)
for sprint 16 Don't repeat yourself we have to build a component library consisting of all the components that can be used in our project In the main 'leertaak' component library we got tasked to create a morphological chart to help us come up wth many combinations or solutions for for the bigger components of our project
after filling this chart we will choose as a team the best options for each component and implement these in or project
there are also best practices when creating components, and we can do so by applying the ARIA Authoring Practices Guide
here are some suggestion in we got for some of these components
components:
Profile Information:
Avatar + Name Avatar + Name + Bio Avatar + Name + Role Avatar + Name + Social Links Avatar + Name + Stats Avatar + Name + Skills Avatar + Name + Contact Info Avatar + Name + Interests
Page Navigation:
Top Horizontal Menu Left Vertical Menu Bottom Horizontal Menu Right Vertical Menu Breadcrumb Navigation Hamburger Menu Tabs Navigation Pagination
Login Input Components:
Email Input Username Input Password Input Phone Number Input Social Login Buttons Forgot Password Link Remember Me Checkbox Submit Button
Header:
Logo + Navigation Logo + Search Bar Logo + User Menu Logo + Call to Action Logo + Hamburger Menu Logo + Breadcrumbs Logo + Language Switcher Logo + Social Links
Window Component:
Centered Modal Slide-in From Side Pop-up Notification Full-screen Overlay Expandable/Collapsible Draggable/Resizable With Close Button With Footer Actions
Basic text fields (name, bio, contact) Profile card with avatar and social links Interactive card with animations (flip on hover) Expanding bio section (accordion style) Tabs (e.g., "About," "Posts," "Friends") Progress indicator (profile completeness) Minimalistic icon-only profile (for quick views) Rich profile with interactive achievements or badges
Side menu (collapsible) Top horizontal navbar with dropdowns Breadcrumb navigation Floating button for primary links (e.g., home, settings) Off-canvas sliding menu (mobile style) Tabbed navigation (switch between sections) Sticky header with anchors for quick scrolling Dynamic menu (changes based on user activity)
Standard text inputs (username/password) Social login buttons (Google, Facebook) Biometric input (face or fingerprint) OTP (One-Time Password) via email or SMS Passwordless (magic link to email) Checkbox for "Remember me" Captcha or anti-bot verification Quick response QR login (for mobile integration)
Minimal header (logo only, no menu) Full-width header with banner image Sticky header with search bar Transparent header (image background) Header with user profile dropdown Animated header that shrinks on scroll Header with social media icons Header with quick-access notifications
Modal pop-up (centered on screen) Fullscreen overlay (blur background) Drawer panel (side panel with close button) Split window (two-panel layout) Accordion window (expand/collapse sections) Draggable pop-up window Tabbed modal (multi-step modals) Tooltip popover (appears on hover or focus)