Library Item Component

[henryajisegiri]

Library Item

Description

Implement the Library Item component as defined in Figma. This component is used on the Library page to display an individual library entry. It comes in two variants — a list item for the table/list view and a card for the grid view — and is responsive across desktop and mobile.

Figma Link

Scope

Variants

• List — horizontal row layout used in the list view
• Card — vertical card layout used in the grid view

Component Structure

Both variants include a library name, short description, category tags, a contributor avatar with name and badge icon token, a C++ version tag, and a document icon button.

List variant — all elements are displayed inline in a single horizontal row. On tablet the layout compresses proportionally.

Card variant — elements are stacked vertically with the contributor details at the bottom.

Out of Scope

• Navigation or routing logic
• Copy action functionality
• Analytics event wiring

Acceptance Criteria

Component

• List variant renders all elements inline in a horizontal row
• Card variant renders all elements stacked vertically
• Library name, description, category tags, contributor details, C++ version tag, and copy button all render correctly in both variants
• Category tags and C++ version tag consume the existing Tag component
• Badge icon uses the correct icon token
• List variant compresses proportionally on tablet
• All content is passed in via props
• 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 Item is documented in Lookbook
• Demonstrates:
  • List variant — desktop and tablet
  • Card variant
• Code snippets are provided

Accessibility and Analytics

• Semantic structure — List variant should be used within a <ul> or <table> context as appropriate
• Avatar — Must have a descriptive alt attribute (e.g. contributor name)
• Analytics readiness — Component must allow analytics attributes or identifiers to be passed via props without internal modification

Dependencies / Assumptions

• Tag component is available and must be consumed
• Icon tokens for badges and the copy action are available
• Contributor avatar is provided as a URL via props
• Figma is the source of truth for layout, spacing, and responsive behaviour

Definition of Done

• Library Item component implemented and reusable
• Both variants verified against Figma
• Responsive behaviour verified
• Token usage reviewed
• Lookbook documentation complete
• Task reviewed and approved