✨ [#2111] Filter web-components design-only

[jiromaykin]

Summary

Figma: https://www.figma.com/design/iKGhWhstaLIlFSaND2q7cE/OIP---Designs--new-?node-id=8729-21563&p=f&t=CGtYGy2hXXkkcWi1-0

huidig jaar filter should come from front-emd,
date range comes from back end.

How it works on page load

Reads data-filter-* attributes from the HTML tag
Parses them into filter groups (e.g., "Adres", "Type container")
Reads current URL to see what filters are already active
Optionally adds dynamic period options (current year/month/quarter) if enabled

When user selects filters:

Stores selections in local state (selectedFilters)
Shows count: "Adres (2)" = 2 selected

When user clicks "Toon resultaten":

Builds a new URL: /mijn-afval/?adres=X&type-container=Y&periode=Z
Navigates to that URL
Page reloads with filtered data

What it still needs from backend:

Pass filter definitions in template:

{% for filter_group in filter_groups %}
     data-filter-{{ forloop.counter }}-name="{{ filter_group.name }}"
     data-filter-{{ forloop.counter }}-label="{{ filter_group.label }}"
     {% for choice in filter_group.choices %}
       data-filter-...-value="{{ choice.value }}"
       data-filter-...-label="{{ choice.label }}"
     {% endfor %}
   {% endfor %}

So if URL has ?adres=Hoofdweg+45A, backend should only return data for that address
Backend could check request.GET and filter afval_data before passing to template

Dynamic Periods

The periode filter can optionally include dynamically calculated options (current year/month/quarter).
Enable in template with: data-add-dynamic-periods="true"

Checklist

• CHANGELOG.rst updated
• Storybook component updated/created
  
• Vitest tests added/updated

More to do:

• adjust CSS to look like Mijn Zaken/Search
• add Huidig jaar frontend filter
• Huidige maand
• Huidig kwartaal

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.73%. Comparing base (d210a6d) to head (01c54c8).
⚠️ Report is 2 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #2127   +/-   ##
========================================
  Coverage    92.73%   92.73%           
========================================
  Files         1241     1241           
  Lines        48085    48085           
========================================
  Hits         44594    44594           
  Misses        3491     3491           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.