Ticket filters: filters bar component

[sanmont3drepo]

Description

Product issue: https://github.com/3drepo/3D-Repo-Product-Team/issues/521
We want to provide more powerful filters for tickets (also reusable for drawings). For this we need a a filters bar in which you can add filters and show the applied filters.
This filters bar can collapse or expand. When is collapsed the user cant see one line of filters (represented as pills) but if the filters how beyond that a button with "show more" shows up and when clicking that the filters bars exppands to show everything. The user can click "clear all" to clear the whole filters section.

• The idea is to provide a general component that will take in a value of filters (like an input) and be able to delete individual filters/all collapse and expand.
• So at this stage the filters are not added through the actual bar with the magnifying glass but as a prop value
• The fillter pills should be a different component that would somehow make the the bar be aware that you want to delete them? (maybe a filters context?)

Goals

• I want to have a general search component to reuse

Tasks

• Create a Filter Bar component which contains the filter pills
• Create the filters pills

Suggestion

• Provide an input interface like value/onChange, etc so we can use it in the same manner as other inputs
• Create its own context (filtersContext?)

Related Resources

MockUp