Fix the dropdown menu design for projects page

[blulady]

Dependency

• Create filter_dropdown.scss File in Elements Folder #3256

Overview

During recent audits, the team realized that the drop-down menu design is not uniform. In an attempt to unify all drop-down menus the design team has redesigned the drop-down menu. This issue is to implement the new uniform design specifically on the projects page.

Action Items

• Update the drop-down menu on the projects page to reflect the design in Figma
• The goal is to make this component reusable on multiple pages with different filters specified
• Take into account accessibility of navigating the filters with keyboard -see resources below
• Make the appropriate changes to the CSS, HTML, and JS as you need to
• Note: The final design shows a "Search by keword" function, but you can ignore this for now, as this will be worked on in a different issue.

Resources/Instructions

• for reference a link to related design issue: Design a fix the dropdown menu design for projects page #3277
• in the elements folder you should find _dropdown_filters.scss and that is where you will want to make the changes to the CSS
• in the _includes page you should find the current-projects.html
• in the assets/js folder you should find project.js
• Final design

Design Systems
Accessibility Resources
Standardized Components Wiki specifically:

• Keyboard Accessible - sufficient techniques
• Using CSS when component receives focus - Focus visible
• Navigable Guideline 2.4
• Focus Not Obscured

[chrismenke45]

Availability: Tues, Wed 8am-12pm. Thurs 12pm-6pm.
ETA: 3/24

[chrismenke45]

Progress: I've set up the general layout and the functionality of the filters works
Blockers: I will need to learn more about keyboard accessibility to finish
Availability: Mon-Fri 8am-12pm
ETA: 3/24

[chrismenke45]

3/24 Update:
PR Created
Available: 3/25 8am-12pm

[ExperimentsInHonesty]

@chrismenke45 Please change your pr to a draft and fix the following issue then take off the draft label

The current mockup shows the filter on the side being higher. And even without the search bar, its still to low.

Current mockup from Figma

Your screenshots from your dev

[chrismenke45]

@ExperimentsInHonesty Will do! Thank you for looking over it so quickly!

[ExperimentsInHonesty]

@chrismenke45 While you are waiting for your PR to get reviewed. Can you add a write up of what files go into the filter component and any other details that a person adding the same component to another page (e.g., toolkit page) will need to know. You can leave that write up here in this issue as a comment.

[chrismenke45]

How to Implement Dropdown Filters on Another Page

Files to reference

• _dropdown_filters.scss: This contains the styling for the filters you will be using. It is responsive and the classes are used to reflect changes in the UI due to user input
• current-projects.js: This is an example of how the js should be pulling information from our files and using it to build/filter items. It adds all the required classes to the filter elements to allow them to be responsive and react to user input.
• current-projects.html: This is an example of the base html required for the js file to build and add elements as needed

Recommended workflow

• Begin with reviewing current-projects.js: and understand workflow
• Import data to be displayed and assign to a variable (see retrieveProjectDataFromCollection and projectDataSorter functions in current-projects.js
• Build data cards (see projectCardComponent function in current-projects.js)
• Specify which attributes of the data the filter should work on (see createFilter function in current-projects.js)
• Specify filter titles (many will just be the attribute that is being filter on, see main function in current-projects.js)
• Add event listeners

Functions that will need to be changes to reflect you page's needs:

• retrieveProjectDataFromCollection and projectDataSorter will need to be changed to whatever data is being displayed
• createFilter will need to get new keys with values pulled from data
• projectCardComponent will need to be changed to whatever data is being displayed
• updateProjectCardDisplayState will need to be updated to whatever data is being displayed
• main will need to specify what filter titles will be used on new data
• updateFilterFrequency will need to query select from different class assuming data cards class is no longer '.project-card'
• updateUI & noUrlParameterUpdate will need to be updated to reflect name changes of the functions listed above
• All other functions regarding the filters should be good to go as is once the above functions have been changed