Add Filter Tags to Homepage project filters

[daniellex0]

Overview

We need to add filter tags below the homepage project filters so that users can immediately know which filters they selected, and can remove any filters easily.

This also involves adjusting some of the current filter functionality (selected filter categories no longer turn pink- instead they display the number of filters selected in parentheses)

Action Items

• Review new design of filter tags in 'Homepage (WIP)' Figma file (in purple rectangle)
  • For help with Figma functionality / a quick tutorial, reach out to @daniellex0 on this issue (or on slack)
• Research how to add filter tags
• Add filter tags to homepage, following the Figma design
• Keep selected filter categories white (instead of changing to pink, as they do now) (see Figma design)
• Add # of filters selected per category in parentheses (see Figma design)
• Make sure changes to homepage filters don't affect the Wins page filters
  • If it does affect the Wins page filters, apply the filter tags above to the Wins page as well

Resources/Instructions

Homepage
Figma design for homepage filter tags (in purple rectangle)
Example of filter tags in Best Buy website
Wins page

New filter tag designs (click arrow)

One filter selected:

Multiple filters selected:

So that you know what to look for- this is what the filter tags section in the purple rectangle looks like in the Figma homepage file:

[Lol-Whut]

Call the new class filter-item

[akibrhast]

Progress

Almost complete. Struggling with css

Blockers

Awaiting Closure on

• 1268 reorganize data only collection to data subdir #1269
• 1255 refactor current data into data external #1267

Availability

Here and There

ETA

Approximately a week from whenever the above PR's are closed

[erikaBell]

@daniellex0 the "(1)" "(2)" and "(5)" placement in the figma design, is the decision to "add" numbers together, under certain cases?

i.e., my question comes up when imagining a scenario where an individual comes to the page, goes to the "Looking" dropdown menu, and decides to checkbox both "Development (12)" and "Content (4)".

"Looking" would then become: "Looking (16)"

I'm assuming "Looking (12), (4), etc.." isn't desired

[akibrhast]

@erikaBell Its the number of items selected.

goes to the "Looking" dropdown menu, and decides to checkbox both "Development (12)" and "Content (4)".

Looking would then become : "Looking (2)"

[erikaBell]

@akibrhast Ah, thanks!

[erikaBell]

Progress update ~

Have added filter tags, & numbers per category in parentheses.
Currently working on getting the URL params to be updated via removed filter tags & "clear all".

[erikaBell]

Progress Update: just need to work out a bug with one of the dropdown menus.