Library List Component

[henryajisegiri]

Description

Implement the Library list view pattern as defined in Figma. This pattern provides multiple layouts for listing libraries depending on the selected view type and device. It is composed of sort items and a list of Library Item components, each displaying a name, description, category tags, author, version tag, and copy icon. The pattern supports three view types: List, Category, and Grading.

List View
Category View
List View Tablet
List View Mobile
Category View Mobile
Grading View Desktop
Grading View Mobile

Scope

Variants

• List view — flat list of Library Items with sortable column headers
• Category view — Library Items grouped under category headings
• Grading view — Library Items grouped under grading type headings (e.g. Flagship)

Component Structure

All views include sortable column headers (Library name, Description, Category, Author, Version) and a list of Library Item components.

List view — flat ungrouped list of Library Items.

Category view — Library Items broken up with a header indicating the library category.

Grading view — Library Items broken up with a header indicating the grading type.

Each Library Item includes a library name, short description, category tags, author avatar with name and badge, version tag, and a copy icon button. Category tags are clickable and apply a filter to the library list. Version tags are not clickable.

States

• Default

Out of Scope

• Data fetching or API integration
• Copy action functionality
• Navigation or routing logic
• View type switching (List, Category, Grading)
• Analytics event wiring

Acceptance Criteria

Component

• Category tags are clickable and trigger a filtered view of the list
• Version tags render correctly and are not clickable
• All library data is passed in via library objects. (Dev Note: @gregjkal: use django-debug-toolbar to make sure you don't introduce an N+1 query problem!)
• Design tokens are used for typography, spacing, border radius, and surface colours

Lookbook

• Library pattern is documented in Lookbook
• Demonstrates:
  • List view
  • Category view
  • Grading view
  • Category tag filter interaction
  • Column sort interaction
• Code snippets are provided

Accessibility and Analytics

• Semantic structure — List must use appropriate semantic HTML (e.g. <table> or <ul>) depending on the agreed rendering approach
• Sortable headers — Must use aria-sort to communicate current sort direction to screen readers
• Category tag links — Must have accessible labels so their filter action is clear (e.g. aria-label="Filter by Algorithms")
• Group headers — Category and Grading headings must use appropriate heading levels

Dependencies / Assumptions

• Library Item component is available and must be consumed
• Tag component is available and must be consumed
• Sort header component is available and must be consumed
• Filter state is managed by the parent — this component is controlled
• Figma is the source of truth for layout, spacing, and responsive behaviour

Definition of Done

• Library pattern implemented and reusable
• All three view types verified against Figma
• Category tag filter behaviour verified
• Token usage reviewed
• Lookbook documentation complete
• Task reviewed and approved