aboydnw
commented
2 weeks ago There are some UX decisions for us to make here. The main question is that the banner component from USWDS seems to be intended as a permanent banner only speaking to the legitimacy of the website as an official site. We have been using this component as a banner for temporary announcements. The earth.gov team, however, would like the permanent banner stating it is an official site.
I could see a couple options.
Option 1 - Adjust existing component to be announcements banner and add permanent banner
We could implement the permanent banner as-is from USWDS. Then, we could change the styling of the existing banner and label it "announcement banner" or something similar. This would function the same with an expiration date. This announcements banner could stack on top of the permanent banner (if both are turned on), be a different color, and include an "x" or something for the user to close it. Whereas the permanent banner would always remain in place with no way to hide it.
Upside of this is that it's a cleaner implementation of the USWDS banner component and also retains the ability to make announcements. But, potentially confusing UX to have two similarly styled components that function differently. Also, as far as announcements go, it's pretty subtle.
Option 2 - Use existing component with an expiration date way in the future, so it seems permanent
We use the existing component but put a date of 2050 so it never disappears.
Upside being, less development work and no potentially conflicting banners. But we also won't have the dropdown seen in the USWDS component and we won't have the ability to also do a separate announcement. Although, to be fair, only GHGC has used the announcement feature so far.
If we pick this up @dzole0311 then we probably want to make an intentional decision on this with @faustoperez . I wrote this ticket assuming Option 2 just for the sake of speed, but if we see a good solution to Option 1, then I'm okay going that direction too. I just don't think it's worth our time to go too deep designing a solution for this feature right now. So if we don't quickly see a solution, I'd stick to Option 2.
Context
earth.gov would like to use the banner component to consistently display the message that it is an official site of the US government, similar to the example from USWDS here.
Acceptance Criteria