Add tag and additional status labels to Image Card component

[akegan]

Jira ticket for hero label, and for date banner

Goal

As a user I want to see high level details about a listing as part of the listing summary

Updated Properties

Property | Description | Variants
------------ | ------------- | --- | -----
Status Label | presents listing status | should be extended to support multiple dates for specific statuses
Tag | display community type |

Mockups
Property Hero

Context

I've combined these two because they both seem like they're variations on the image card component that you have.

Property hero label

On DAHLIA, we have this orange tag for reserved buildings on the listing dir page:

We also have it on the listing details page, with a slightly different positioning:

Do bloom folks want this pattern? Do you already have it in progress? Do you have a similar component that we could re-use to include as a variation on the Image Card component

Multiple date banners

We have a couple of different states for our listing dir page that don't seem to be covered in the image card or "Application Status" components that you have

In between applications closing and the lottery being run, we show both states:

After the lottery has been run, we just show lottery results posted:

It seems like the ApplicationStatus component includes the logic of what to show, I'm wondering if we can extend that, or if we need to pull that logic out of the image card component to make it a bit more customizable.

Another note: Since we've been around a while and we have lots of long-running lease-ups, we've found the need to include the year in the date if the date is from a previous calendar year, is that a change you're up for including?

[slowbot]

@akegan

1. Hero labels make sense and we have a tag component we could extend for this https://storybook.bloom.exygy.dev/?path=/story/text-tag--standard
2. Multiple date banners, this makes sense. we should be explicit and define each of the statuses
   • Open
   • Awaiting Results (Pre Lottery)
   • Results Posted (Post Lottery)
3. Extending the date to include the year makes sense

@seanmalbert Have a look and let me know your thoughts.

[slowbot]

@akegan See my proposal spec

[akegan]

looks good to me! Do you have a different component for the directory image and the details image? The details component for us has everything centered, with no subtitle or banner. Wondering if you use the same or a different component for that

[akegan]

I don't seem to be able to assign him to the ticket, but Anthony (@aekong) from our team is looking to pick up this ticket. He'll start with the mockups from Jesse in the ticket, but @seanmalbert let us know if you have any thoughts on it!

[akegan]

@slowbot, on the topic of a11y, @aekong just implemented this variation with the shade of orange but it only has a color contrast of 2.92.

should we use the warning variation instead?

Or maybe accent-warm-light?

Those both look like they're passing in the a11y tab

[seanmalbert]

Can be QAd in storybook.

[emilyjablonski]

https://storybook.bloom.exygy.dev/

[slowbot]

@akegan Yes to your first question. Use warning variation