[TSK-328] Filters/Categories

Designs in Figma (make sure you are looking at the page "Approved Designs" linked here)

Desktop Filter Design

Mobile Filter Design

COLOR STYLES for both desktop / mobile

[ ] Desktop Spacing (tip in case you don't know: if you switch on Dev Mode in Figma - you'll see all of these spacing notes in detail
[ ] Mobile Spacing

FUNCTIONALITY

[ ] When a user comes to the Shop page, all products are displayed in the results, as indicated by the SHOP ALL category highlighted in bold in the filter/category section.
[ ] These Shop All results are sorted by Featured first, Newest, then Oldest
[ ] The Genre filter should be customizable for the admin, as new genres may be added/removed regularly
[ ] When a user clicks either Genre, or Format, the dropdown expands, the + icon transforms into a –
[ ] User can select as many options as they want from the Genre and Format options. The square selectors next to the options fill black to indicate that they are active and a number in parenthesis updates next to the filter category to indicate how many total selections in that category are active
[ ] The results automatically update as user selects / deselects filtering options
[ ] In the Category filter (shop all, new this week, back in stock etc), user can only select ONE at a time.
[ ] Active category selected is indicated by bold text
[ ] On mobile, if the user collapses the category filter, the active category filter is shown

SORT BY FILTERING

[ ] Default selection is to filter by Featured - which means that the results are ordered by most recently featured first, then newest then oldest
[ ] Users can also then sort by Newest and Oldest from the dropdown desktop dropdown

bean-la / insheepsclothing