Card Carousel Component

[henryajisegiri]

Description

Implement the Card Carousel component as defined in Figma. This component is used to display a horizontally scrollable carousel of library category cards. It is navigable via previous/next arrow buttons and by scrolling on the horizontal axis. Each card links to the library page with the respective category filter pre-applied.

Figma Link

Scope

Component Structure

The Card Carousel includes a section heading ("Libraries categories"), previous and next navigation arrow buttons, and a horizontally scrollable row of category cards. Each card contains a category name, a count badge, a short description, and a "Start here" link.

States

Navigation Arrows

• Default
• Hover
• Disabled — when the carousel is at the start (previous) or end (next)

Out of Scope

• Data fetching or API integration
• Vertical carousel layout
• Auto-play or timed advancement
• Analytics event wiring

Acceptance Criteria

Component

• Carousel renders with heading, navigation arrows, and category cards
• Cards are horizontally scrollable
• Previous and next arrows advance and retreat the carousel correctly
• Previous arrow is disabled at the start of the carousel
• Next arrow is disabled at the end of the carousel
• Each card renders the category name, count badge, description, and "Start here" link
• "Start here" links navigate to the library page with the correct filter applied
• Component supports a variable number of cards without breaking layout
• Design tokens are used for typography, spacing, border radius, and surface colours
• Count badge consumes the existing Badge component
• Forward/back carousel control consumes the existing carousel control component
• Category data (name, description, count, link) is passed in via props

Storybook

• Card Carousel is documented in Storybook
• Demonstrates:
  • Default state with multiple cards
  • Arrow disabled states (start and end of carousel)
  • Variable number of cards
• Code snippets are provided

Accessibility and Analytics

• Keyboard navigation — Carousel must be navigable via keyboard using the arrow buttons
• Arrow button labels — Previous and next buttons must have accessible labels (e.g. aria-label="Previous", aria-label="Next")
• Link context — "Start here" links must have accessible labels that include the category name (e.g. "Start here: Algorithms") to avoid ambiguity for screen readers
• Analytics readiness — Component must allow analytics attributes or identifiers to be passed via props without internal modification

Dev Notes

• The forward/back carousel control component has already been built and should be consumed here rather than rebuilt

Dependencies / Assumptions

• Required design tokens are implemented
• Icon tokens for navigation arrows are available
• Badge component is available
• Library page supports category filter via URL parameter or equivalent
• Figma is the source of truth for card dimensions, spacing, and scroll behaviour

Definition of Done

• Card Carousel component implemented and reusable
• Navigation and scroll behaviour verified against Figma
• Token usage reviewed
• Storybook documentation complete
• Task reviewed and approved

[jsiswickqa]

Issue
Its not clear from the designs, but I don't think the icons should be clickable.

[jsiswickqa]

Issue 2:
The icons should be count badges.

[jsiswickqa]

Issue 3:
Previous arrow is not disabled at the start of the carousel. Also, Next arrow is not disabled at the end of the carousel.

[jsiswickqa]

Issue 4:
Links should all be labelled "Start here". Also, its not clear from the designs, but should the links have an underline when not in focus?

[fromagge]

[jsiswickqa]

Issue 5:
The blue outline for keyboard navigation is an odd shape. Can it be restricted to just create a border around the link?

[jsiswickqa]

Issue 6:
The number inside the the orange box seems to sit in the bottom-left instead on being central.