[Pulse component on Wagtail] Discussion ticket

Here is the component. I am not sure about the styling of the drop down component on Wagtail but I imagine it is something similar to that. If not, the default style of Wagtail is okay as long as functionality is preserved.

Interaction demo:

InVision:

https://mozilla.invisionapp.com/share/H7LK885483V#/304643566_Panel_-_Collapsed

Checklist:

Styling should match the current CMS so I am not attaching the Sketch file.

• Search section: add label Search terms:, placeholder copy Search terms and helper text Test your search at mozillapulse.org/search - the link should be clickable if possible.

• Add - OR - between Search section and Pick tags section

• Pick tags section: add label Pick tags:, placeholder copy Data detox, iot and helper text Comma separated. Spaces are ok.

• Number of results section: add label Max number of results:, default number 24 and helper text The maximum number of results to fetch. Choose 1-24.

• Featured section: add label Featured:, checkbox (default empty)Display only featured entries and helper text Featured items are selected by Pulse moderators.

• Horizontal hairline

• Advanced filters section: Label ADVANCED FILTERS: Copy: Options to display fewer, more targeted results..

• Issues: Dropdown box with All chosen by default (if users don’t choose an option, all will apply). Once the dropdown arrow is clicked, the full list is displayed in alphabetical order: All (in light grey, since it is the selected option), Decentralization, Digital Inclusion, Online Privacy & Security, Open Innovation and Web Literacy - If users choose another option, the list remains the same and the chosen option is displayed in the box and it is light grey in the expanded view of the list.

• Type of help needed: Dropdown box with All chosen by default (if users don’t choose an option, all will apply). Once the dropdown arrow is clicked, the full list is displayed in alphabetical order: All (in light grey, since it is the selected option), Attend, Create content, Code, Design, Fundraise, Join community, Localize & translate, Mentor, Plan & organize, Promote, Take Action, Test & feedback, Write documentation- If users choose another option, the list remains the same and the chosen option is displayed in the box and it is light grey in the expanded view of the list.

• Sort: Radio button Find and show the most recent (selected by default) and Find and show the oldest

• Horizontal hairline

[gvn]

For Sort, can we use a select box with the copy in the comp @gvn?

Yeah, that should work too.

[taisdesouzalessa]

Here is the tweaked component, based on conversation we had today:

All comps are in InVision: https://mozilla.invisionapp.com/share/XTM3O1I42MY#/305933243_-CMS_-_Projects_-_V6_-v4_Updated-__Copy

I will create a new clean ticket again for you @gvn 😃. @xmatthewx could you please take a look at the new copy and see if you are ok with it?