va-alert: add full width functionality (#1421)

* initial full-width markup update

* remove duplicate slim alert class

* revert slim class condition check

* add tests

packages/storybook/stories/va-alert-uswds.stories.jsx

@@ -351,4 +351,10 @@ NotVisible.args = {
 export const WithARIARole = WithARIARoleTemplate.bind(null);
 WithARIARole.args = {
   ...defaultArgs,
-};
+};
+
+export const FullWidthSiteAlert = Template.bind(null);
+FullWidthSiteAlert.args = {
+  ...defaultArgs,
+  'full-width': true
+};

packages/web-components/src/components/va-alert/test/va-alert.e2e.ts

@@ -182,4 +182,40 @@ describe('va-alert', () => {
     expect(element.classList.contains('usa-alert--info')).toBeFalsy();
     expect(element.classList.contains('usa-alert--continue')).toBeTruthy();
   });
+
+  it('renders section markup when full-width prop is active', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<va-alert full-width></va-alert>');
+    const sectionEl = await page.find('va-alert >>> section');
+
+    expect(sectionEl).not.toBeNull();
+  });
+
+  it('does not render the section markup when full-width prop is inactive', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<va-alert></va-alert>');
+    const sectionEl = await page.find('va-alert >>> section');
+
+    expect(sectionEl).toBeNull();
+  });
+
+  it('has the .usa-site-alert class when the full-width prop is active', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<va-alert full-width></va-alert>');
+    const sectionEl = await page.find('va-alert >>> .usa-site-alert');
+
+    expect(sectionEl).not.toBeNull();
+  });
+
+  it('passes an axe check when the full-width prop is active', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<va-alert full-width><h3 slot="headline">Alert</h3>Alert content</va-alert>`,
+    );
+
+    await axeCheck(page);
+  });
 });

packages/web-components/src/components/va-alert/va-alert.scss

@@ -1,5 +1,6 @@
 @forward 'settings';
 @use 'usa-alert/src/styles/usa-alert';
+@use 'usa-site-alert/src/styles/usa-site-alert';
 
 @import "~@department-of-veterans-affairs/css-library/dist/stylesheets/uswds-typography.css";
 
@@ -13,7 +14,7 @@
   font-size: 21.28px; /* 1.33rem */
   margin-top: 0;
   margin-bottom: 8px; /* 0.5rem */
-  font-family: var(--font-serif); 
+  font-family: var(--font-serif);
 }
 
 .va-alert-close:hover {
@@ -66,3 +67,18 @@
     left: 12px;
   }
 }
+
+.usa-site-alert .usa-alert.usa-alert--warning {
+  background-color: var(--vads-color-warning-lighter);
+  border-left-color: var(--vads-color-warning);
+}
+
+.usa-site-alert .usa-alert.usa-alert--success {
+  background-color: var(--vads-color-success-lighter);
+  border-left-color: var(--vads-color-success);
+}
+
+.usa-site-alert .usa-alert.usa-alert--error {
+  background-color: var(--vads-color-error-lighter);
+  border-left-color: var(--vads-color-error);
+}

packages/web-components/src/components/va-alert/va-alert.tsx

@@ -6,6 +6,7 @@ import {
   Host,
   Prop,
   h,
+  Fragment,
 } from '@stencil/core';
 import classnames from 'classnames';
 
@@ -151,7 +152,7 @@ export class VaAlert {
   }
 
   render() {
-    const { visible, closeable, slim } = this;
+    const { visible, closeable, slim, fullWidth } = this;
     let status = this.status;
     /* eslint-disable i18next/no-literal-string */
 
@@ -164,34 +165,32 @@ export class VaAlert {
 
     if (!visible) return <div aria-live="polite" />;
 
-
     const classes = classnames('usa-alert', `usa-alert--${status}`, {
       'usa-alert--success': status === 'continue',
-      'usa-alert--slim': slim,
+      'usa-alert--slim': slim && !fullWidth,
     });
 
-    return (
-      <Host>
+    const classesSiteAlert = classnames('usa-site-alert', {
+      'usa-site-alert--slim': slim,
+      'usa-site-alert--info': status === 'info',
+    });
+
+    const alertBody = (
+      <Fragment>
         <div
-          role={this.el.getAttribute('data-role')}
-          class={classes}
-          aria-label={this.el.getAttribute('data-label')}
+          class="usa-alert__body"
+          onClick={this.handleAlertBodyClick.bind(this)}
         >
-          <div
-            class="usa-alert__body"
-            onClick={this.handleAlertBodyClick.bind(this)}
-          >
-            <div>
-              {status === 'continue' && (
-                <va-icon
-                  class="va-alert__lock-icon"
-                  icon="lock"
-                  size={slim ? 3 : 4}
-                ></va-icon>
-              )}
-              {!slim && <slot name="headline"></slot>}
-              <slot></slot>
-            </div>
+          <div>
+            {status === 'continue' && (
+              <va-icon
+                class="va-alert__lock-icon"
+                icon="lock"
+                size={slim ? 3 : 4}
+              ></va-icon>
+            )}
+            {!slim && <slot name="headline"></slot>}
+            <slot></slot>
           </div>
         </div>
 
@@ -204,6 +203,34 @@ export class VaAlert {
             <va-icon icon="cancel" size={4}></va-icon>
           </button>
         )}
+      </Fragment>
+    );
+
+    if (fullWidth) {
+      return (
+        <Host>
+          <section
+            class={classesSiteAlert}
+            aria-label={this.el.getAttribute('data-label')}
+            role={this.el.getAttribute('data-role')}
+          >
+            <div class={classes}>
+              {alertBody}
+            </div>
+          </section>
+        </Host>
+      );
+    }
+
+    return (
+      <Host>
+        <div
+          role={this.el.getAttribute('data-role')}
+          class={classes}
+          aria-label={this.el.getAttribute('data-label')}
+        >
+          {alertBody}
+        </div>
       </Host>
     );
   }