New Component: Site Alert

[brandonlenz]

Site Alert

USWDS Version

2.10.0

Description

When your agency has urgent information to share with the public, it’s essential that it stands out from other content on the site. A site alert prominently displays critical, time-sensitive warnings or directions across every page so that users see it whenever they visit the site. Using the same site alert treatment across agencies helps create a consistent and predictable way for users to find urgent information across all government websites.

Requirements (proposed)

Prop Interface

Props = {
  heading?: string // Default undefined (to allow Site alert with no header)
  variant: "info" | "emergency"
  showIcon?: boolean // Default true
  slim?: boolean // Default false
  className?: string
  children: React.ReactNode  
} & JSX.IntrinsicElements['section']

Example Implementation (proposed)

return (
  <SiteAlert heading="Short alert message">
    Additional context and followup information including <Link" href="#">a link</Link>.
  </SiteAlert>
)

More Details

• <section>root element
• The Alert component that we already have makes up most of the content of a SiteAlert. It's worth exploring if SiteAlert can just wrap an Alert and modify as necessary depending on the variant.

[SirenaBorracha]

I decided after talking through it with @brandonlenz and @haworku that it's as much work to modify the existing Alert component, so I'm writing SiteAlert separately