[feat] Category toggle filter for the modules

[dalibormrska]

Component infos

Description

This component fulfils 3 functions.

1. Encouraging browsing - The user can quickly with the category filter browse different types of content, get an overview
2. Helping with searching - Users that know what they are looking for can save time by quickly selecting the category and looking through the results
3. Visual richness - It is making the heading of the module a bit more appealing, and less boring. The icons are bringing more quick visual clues about what the content is about.

Will be used in :

It can be implemented in the How-To, Research and Questions modules. Each instance (PK, PP, FF) can decide on which module to turn it on. With @davehakkens we decided that it would be best for now to have it only on one "primary" module for the instance. For PP it would be How-Tos and for PK it would be Research.

The reason is, that the categories are not synchronised (rightfully) between the 3 modules. I believe that it would bring confusion for the user if in each module there would be different number of icons, or the icons would be shuffled differently (since they currently are in the current categories filter).

Mockup and the Design

Sharing the Figma Link here. You should see the descriptions of the functionalities and inspect the spacings, margins, paddings etc there.

From there you should be able to access the prototypes that show the approximate behaviour of the interactions.

Page related

The functionality is very similar to the quick toggle filter of #3841. In the build suggestion I elaborate and suggest to have one component for both uses.

The original inspiration way back with #3841 was the AirBnb toggle filter, that is really focused on encouraging browsing.

Build suggestions

I would suggest to look at the MapFilterProfileTypeCardList component that was created and designed for the new Map module. Now we would need to ideally use only one component for both uses. I don't know how technically difficult it is, but it makes sense at least from the design perspective to not have two similar elements that are slightly visually different.

Must Have 1

If the component has a lot of space and the items do not extend beyond the width of the container that it is in, the items stay centered and the arrows are not shown.

If the items extend beyond the container, the arrows are shown accordingly.

Must Have 2

Must Have 3

I improved the interaction design of the elements, comparing to the currently implemented version in the new Map module. Observe the :hover and the :active states in the Figma file or in the GIF above.

Must Have 4

If this component is shown in one of the 3 modules (How-Tos, Questions or Research), the current filter option is redundant and therefore should not be shown.

Must Have 5

If this component is shown in one of the 3 modules (How-Tos, Questions or Research), and has less than 3 items, it does not need to be shown. For the implementation in the Map module, the threshold would be less than 2 items. These thresholds might need to be adjusted later if needed.

Should Have

In this preview you see the approach to the blur on the edges. The trick there is that the opacity gradient has to have the color of the background. Currently the background color is consistent (#f5f6f7 ) in all the modules, even in the Map, but it might be good to think about a scenario when it would need to be implemented with a different background color.

Nice to have

It is always good to give the user a feedback of their actions. A loader that would show for the results right after applying the filter would be a nice to have feature.

[davehakkens]

Here the icons for Precious Plastic

Precious Plastic Category icons.zip

[y-bhargava]

Could you please assign this issue to me? I'd like to work on it.

[benfurber]

@y-bhargava Certainly! It's yours!

The key thing to work on technically is to change/extend our current implementation. That's currently in MapFilterProfileTypeCardList

With MapFilterProfileTypeCardList I implemented something quick for the left/right icons. Ideally I'd like to keep it undercontrol how much custom UI we have to maintain. With that in mind I wonder if something like react-horizontal-scrolling-menu would be better for managing that responsibility.

I'd also suggest that this feature can be broken down into multiple PRs (we tend to be pretty quick with the reviews). At a minimum I'd suggest implementing the interaction changes for MapFilterProfileTypeCardList first, then once we're happy with that, moving on to implementing for research/how-tos/questions.

For the moment don't worry about the "primary" module part (i.e. only showing the new component for one content type per instance). I'll discuss that with the team before implementing it.