Story 2158: Banner Component

[jlchilders11]

Light mode:

Dark Mode:

Mobile:

Closes #2158

[julhoang]

@jlchilders11 On a second thought, I think there's actually a way to do the fading animation using just CSS with transition-delay. Given our preference with having minimal JS, would you mind trying the pure CSS approach instead to see if it's possible?

Secondly, should we consider using display: none instead of opacity 🤔? With opacity, after the animation is done, users will just see an empty space, which can look like inconsistent UI. Maybe this is a design question that is worth double-checking with Henry!

[jlchilders11]

@julhoang While we can do a transition-delay to achieve a lot of the same effects, we would need a separate class for each possible delay time. If that is what we want I can do that, it would require limiting the options for delay time.

Re: display none vs opacity, this isn't animatable, but I have converted this to use a css transition instead which can handle display. I agree this is cleaner.

[julhoang]

While we can do a transition-delay to achieve a lot of the same effects, we would need a separate class for each possible delay time.

I wonder if we can pass them as inline-style: so like

<div class="banner" role="alert" {% if fade_time %}data-fade style="--fade-delay: {{fade_time}}ms;"{% endif %}>

What do you think of this approach?

[jlchilders11]

Is there a way to toggle a transition without user input or javascript? This is somewhat on the edge of my expertise, is there a pseudo class for rendered?