Task: Filter Component Updates

[henryajisegiri]

Library Filter — Updates

Description

Update the existing Library Filter component with three new additions as defined in Figma. These changes improve the filtering experience by making active filter states visible and providing quick ways to remove individual filters or clear all at once.

Figma Link

Scope

What's changing

• Added a selected state for active filter dropdowns
• Added a clear (×) button on individual filters to cancel a specific active filter
• Added a "Clear All" button to reset all active filters at once

No changes to

• Dropdown options or filter logic
• Filter labels or layout
• Sort by dropdown

Acceptance Criteria

Component

• Active filter dropdowns render in the selected state as defined in Figma
• Each active filter displays a clear (×) button that removes that specific filter when clicked
• Clear (×) button is not visible when the filter is in its default (unselected) state
• "Clear All" button resets all active filters
• "Clear All" button is only visible when at least one filter is active
• Design tokens are used for selected state colours and button styling
• Component must be fully functional without JavaScript enabled. Refer to the install card implementation as a reference for the agreed no-JS approach

Storybook

• Updated Library Filter is documented in Storybook
• Demonstrates:
  • Default state — no filters active
  • One or more filters active with selected state and clear (×) buttons visible
  • "Clear All" button visible with active filters
• Code snippets are provided

Accessibility and Analytics

• Clear button — Must have an accessible label identifying which filter it clears (e.g. aria-label="Clear Grading filter")
• Clear All button — Must have an accessible label (e.g. aria-label="Clear all filters")
• Selected state — Must be communicated to screen readers via aria-selected or equivalent

Dependencies / Assumptions

• Existing Library Filter component is available and must be updated
• Figma is the source of truth for selected state styling and button placement

Definition of Done

• All three updates implemented and verified against Figma
• Selected state, individual clear, and clear all behaviour verified
• Token usage reviewed
• Storybook documentation complete
• Task reviewed and approved