Filter Component

[henryajisegiri]

Description

Implement the Filters component as defined in Figma. Filters are used to make content more consumable by allowing users to filter out information they don't want to see. There are two distinct filter components used across different pages: the Posts Filter and the Library Filter.

Figma Link

Scope

Variants

Posts Filter

• Default
• Hover
• Selected

Library Filter

• Dropdown — single select, closes on selection
• Dropdown — multi-select with search (combobox), remains open until dismissed
• Sort column header — clickable table heading that toggles sort direction

Component Structure

Posts Filter — used on the Posts page to filter post types. Single select; only one filter can be active at a time. Each filter item includes:

• Label text
• Default, hover, and selected visual states

Library Filter — used on the Library page to sort and filter library content. Includes the following filter controls:

• View (single select dropdown) — List, Grid, Category, Grading
• Grading (single select dropdown) — All, Flagship, Core, Deprecated, Legacy
• Min. C++ Version (single select dropdown) — All, C++03, C++11, C++14, C++17, C++20, C++23
• Max. C++ Version (single select dropdown) — All, C++03, C++11, C++14, C++17, C++20, C++23
• Category (multi-select combobox with search) — All, Algorithms, Asynchronous, Awaitables, Containers, Coroutines, Correctness, and more
• Sort by (single select dropdown) — Alphabetical, Most Popular, Recently Updated, Release Date
• Filter reset button — resets all active filters

Library Sort Header — clickable column heading on the library table. Includes:

• Label text
• Arrow icon that reflects current sort direction (ascending / descending)

States

Posts Filter

• Default
• Hover
• Selected

Library Filter Dropdowns

• Closed
• Open
• Item selected

Library Combobox (Category)

• Closed
• Open with search input
• One or more items selected

Library Sort Header

• Default
• Ascending
• Descending

Implementation Requirements

• Use design tokens for typography, spacing, border radius, surface and interactive colours
• Posts Filter must enforce single-select behaviour — selecting one deselects any previously active filter
• Library Filter dropdowns must close on item selection (except the Category combobox)
• Category combobox must support search input and multi-select
• Sort header arrow icon must update to reflect current sort direction
• All filter controls must accept their options and current value via props
• Filter state management must be handled by the parent — components are controlled
• Filter reset button must trigger a callback to clear all active filter values

Out of Scope

• Data fetching or API integration
• Persisting filter state across sessions
• Analytics event wiring
• Mobile-specific filter UI (e.g. drawer or modal pattern)

Acceptance Criteria

Component

• Posts Filter renders in default, hover, and selected states
• Posts Filter enforces single-select behaviour
• Library Filter renders all six filter controls correctly
• Single select dropdowns close on item selection
• Category combobox supports search and multi-select
• Filter reset button clears all active filter values
• Sort header icon reflects current sort direction
• All components are driven by props with no internal state ownership

Storybook

• All filter components documented in Storybook
• Demonstrates:
  • Posts Filter — all three states
  • Library Filter — all controls, open and closed
  • Category combobox — search and multi-select
  • Sort header — ascending and descending
  • Filter reset behaviour
• Code snippets are provided

Accessibility and Analytics

• Semantic structure — Filter controls use appropriate ARIA roles (e.g. listbox, combobox, option)
• Keyboard navigation — All dropdowns and the combobox are fully keyboard accessible
• Selected state — Active filter values are communicated to screen readers via aria-selected or equivalent
• Analytics readiness — Components must allow analytics attributes or identifiers to be passed via props without internal modification

Dependencies / Assumptions

• Required design tokens are implemented
• Icon tokens for sort direction arrows and filter reset are available
• Filter options and selected values are passed in and managed by the parent
• Figma is the source of truth for layout, spacing, and interaction behaviour

Definition of Done

• Posts Filter and Library Filter components implemented and reusable
• All variants and states verified against Figma
• Token usage reviewed
• Storybook documentation complete
• Task reviewed and approved

[DrJfrost]

#2149