Library Card Component

[henryajisegiri]

Description

Implement the Library Card View component as defined in Figma. This is the card grid layout for the Library page, displaying library entries as a responsive grid of Library Item cards.

Desktop View
Mobile View
Tablet View Example

Scope

Component Structure

A responsive grid of Library Item card components. Each card includes a library name, short description, category tags, version tag, contributor avatar with name and badge, and a copy icon button.

Out of Scope

• Data fetching or API integration
• Copy action functionality
• Navigation or routing logic
• Analytics event wiring

Acceptance Criteria

Component

• Desktop renders a 4-column grid of Library Item cards
• Tablet renders a 3-column grid of Library Item cards
• Mobile renders a single-column stack of Library Item cards
• Grid transitions responsively across desktop, tablet, and mobile
• All cards consume the existing Library Item card variant
• Category tags are clickable and trigger a filtered view
• Version tags render correctly and are not clickable
• All library data is passed in via library object (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
• Component must be fully functional without JavaScript enabled. Refer to the install card implementation as a reference for the no-JS approach

Lookbook

• Library Card View is documented in Lookbook
• Demonstrates:
  • Desktop, tablet, and mobile layouts
  • Category tag filter interaction
• Code snippets are provided

Accessibility and Analytics

• Semantic structure — Grid must use appropriate semantic HTML
• Category tag links — Must have accessible labels so their filter action is clear (e.g. aria-label="Filter by Algorithms")

Dependencies / Assumptions

• Library Item component (card variant) is available and must be consumed
• Filter state is managed by the parent, this component is controlled
• Figma is the source of truth for grid dimensions, spacing, and responsive behaviour

Definition of Done

• Library Card View component implemented and reusable
• Desktop and mobile layouts verified against Figma
• Category tag filter behaviour verified
• Token usage reviewed
• Lookbook documentation complete
• Task reviewed and approved

[kattyode]

@henryajisegiri During testing, the only outstanding issue I found is a discrepancy between the Acceptance Criteria and the current implementation.

According to the AC, the desktop view should render a 4-column grid of Library Item cards, but it is currently displaying only 3.

Current:

Figma:

Similarly, for tablet view, it should render a 3-column grid, but it is currently showing only 2.
Current:

Figma:

Let me know your thoughts on this. The current layout doesn’t look bad, and adding an extra column might impact the visual balance.

cc: @julioest

[henryajisegiri]

Thanks for flagging @kattyode, let's following the specifications in Figma

[kattyode]

Thanks @henryajisegiri I'll add the note regarding that and moving the ticket to In Progress

[kattyode]

QA Validation note: Failed

@julioest during testing the following issue was found:

According to the AC, the desktop view should render a 4-column grid of Library Item cards, but it is currently displaying only 3.

Current:

Figma:

Similarly, for tablet view, it should render a 3-column grid, but it is currently showing only 2.
Current:

Figma:

[julioest]

@kattyode Made those column updates

[kattyode]

QA Validation note: PASSED

Validated on: website-v2-qa https://www.cppal-dev.boost.org/v3/demo/components/#


All identified issues were resolved correctly, and no new issues were found during testing.
A set of test cases was executed for this ticket, including dark mode and different viewports.

Desktop:

Tablet:

Mobile: