diff --git a/packages/storybook/stories/va-alert-uswds.stories.jsx b/packages/storybook/stories/va-alert-uswds.stories.jsx index 2f8bdf14a..2f27fff95 100644 --- a/packages/storybook/stories/va-alert-uswds.stories.jsx +++ b/packages/storybook/stories/va-alert-uswds.stories.jsx @@ -351,4 +351,10 @@ NotVisible.args = { export const WithARIARole = WithARIARoleTemplate.bind(null); WithARIARole.args = { ...defaultArgs, -}; \ No newline at end of file +}; + +export const FullWidthSiteAlert = Template.bind(null); +FullWidthSiteAlert.args = { + ...defaultArgs, + 'full-width': true +}; diff --git a/packages/web-components/src/components/va-alert/test/va-alert.e2e.ts b/packages/web-components/src/components/va-alert/test/va-alert.e2e.ts index 299ae178b..b16cbfcf1 100644 --- a/packages/web-components/src/components/va-alert/test/va-alert.e2e.ts +++ b/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(''); + 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(''); + 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(''); + 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( + `

Alert

Alert content
`, + ); + + await axeCheck(page); + }); }); diff --git a/packages/web-components/src/components/va-alert/va-alert.scss b/packages/web-components/src/components/va-alert/va-alert.scss index 57facd025..53abaaae1 100644 --- a/packages/web-components/src/components/va-alert/va-alert.scss +++ b/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); +} diff --git a/packages/web-components/src/components/va-alert/va-alert.tsx b/packages/web-components/src/components/va-alert/va-alert.tsx index c41c260cb..3a45fd2fb 100644 --- a/packages/web-components/src/components/va-alert/va-alert.tsx +++ b/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
; - const classes = classnames('usa-alert', `usa-alert--${status}`, { 'usa-alert--success': status === 'continue', - 'usa-alert--slim': slim, + 'usa-alert--slim': slim && !fullWidth, }); - return ( - + const classesSiteAlert = classnames('usa-site-alert', { + 'usa-site-alert--slim': slim, + 'usa-site-alert--info': status === 'info', + }); + + const alertBody = ( +
-
-
- {status === 'continue' && ( - - )} - {!slim && } - -
+
+ {status === 'continue' && ( + + )} + {!slim && } +
@@ -204,6 +203,34 @@ export class VaAlert { )} + + ); + + if (fullWidth) { + return ( + +
+
+ {alertBody} +
+
+
+ ); + } + + return ( + +
+ {alertBody} +
); }