Public - New Designs - Listing Directory Page

[emilyjablonski]

New designs

Here is what this page currently looks like in core. Core is currently using the UIC ListingCard component on the directory page. This issue is for essentially rewriting this component in Seeds and using it on the listing directory page. It will live in the components folder on the public site. I anticipate using at least the following Seeds components: Heading, Tag, Button, Icon

We don't currently have Tables built in Seeds, so the tables in the designs will just stay the same as the UIC table we have now.

We should use semantic Seeds tokens wherever possible!

It's possible the designs are missing certain states and we may need to collaborate with them on edge cases.

---

QA Notes

We should compare different listings to bloom core to ensure they are displaying as expected.

Main changes are:

• Reserved community types were moved off of the images and with the tags
• Adding an "Open waitlist" status for open listings with the waitlist status

From an accessibility standpoint:

• Cards now have a hover state + the button highlights, because the full card is actionable
• Screen reader should read the listing name first before the image
• Keyboard users should focus on the buttons, not the full card

[slowbot]

@emilyjablonski started my QA of new Directory page here. Things look really good so far and I only see a couple of small items

Can I put visual QA in figma or would you like it listed here as individual screens?

https://www.figma.com/design/L8CtCfMy9j6a5Qvfp8KJO0/ad-hoc?node-id=1468-12478&t=WVQcktTuAPCHydZL-1

[emilyjablonski]

@slowbot Visual QA in Figma works great for me, thank you!!