Bug: va-alert content no longer aligns to site content width

[micahchiang]

Description

It was recently flagged that va-alert content no longer aligns with site content width. After some investigation, this can be attributed to a change in uswds alert styles that removed some margin settings, and moved them to the usa-site-alert class. This change was introduced into the component library when we updated to USWDS version 3.9.0, but wasn't caught because it isn't mentioned in the release notes, and isn't highlighted in the changed files of the PR they were a part of.

Steps to Reproduce

1. Visit the va.gov homepage to verify the content of the banner is no longer aligned to body content.

Potential Solutions

We need to use the usa-site-alert styles to fix this regression. Here is a local screenshot with usa-site-alert usa-site-alert--info added to a wrapper element:

Because not every va-alert (and va-banner by extension since it just renders an alert) needs to be full width, there are a couple of approaches we can take to addressing this:

1. Update the existing va-alert component to accept a prop for conditionally rendering a full-width usa-site-alert banner. This would conditionally render a wrapping div and the necessary classes that correlate to whatever status is passed in. Example:

  pseudocode

  // render method
  {isSiteWide && (
    <div class=`usa-site-alert usa-site-alert--${status}`>
     <div class="usa-alert">
      // existing va-alert markup
     </div>
    </div>
  )
  // render existing va-alert content if isSiteWide isn't present

2. Create a brand new component that maps to the USWDS site alert component

Considerations

• Regardless of whatever solution is used, usa-site-alert styles will need to be imported using @use usa-site-alert/src/styles/usa-site-alert
• USWDS example of usa-site-alert
• usa-site-alert docs

Tasks

• address the above bug with one of the suggested solutions

Acceptance Criteria

• fix for the above has been merged into component-library main