feat(alert): add announcement connotation (VIV-1830) (#1840)

libs/components/src/lib/alert/README.md

@@ -62,7 +62,7 @@ Use the `open` attribute to toggle the alert open state.
 
 Use the `connotation` attribute to change the alert's icon and icon color.
 
-- Type: `'accent'` | `'information'` | `'success'` | `'warning'` | `'alert'`
+- Type: `'accent'` | `'information'` | `'success'` | `'warning'` | `'alert'` | `'announcement'`
 - Default: `undefined`
 
 Note that each connotation comes with a default icon (that you can override with the `icon` attribute).
@@ -85,6 +85,7 @@ Note that each connotation comes with a default icon (that you can override with
 	<vwc-option value="warning" text="warning"></vwc-option>
 	<vwc-option value="alert" text="alert"></vwc-option>
 	<vwc-option value="information" text="information"></vwc-option>
+	<vwc-option value="announcement" text="announcement"></vwc-option>
 </vwc-select>
 
 <script>

libs/components/src/lib/alert/alert.scss

@@ -3,7 +3,7 @@
 	border-radius-variables;
 @use '../../../../../dist/libs/tokens/scss/tokens.constants' as constants;
 @use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
-	$connotations: accent success information alert warning,
+	$connotations: accent success information alert warning announcement,
 	$shades: primary primary-text,
 	$default: accent
 );

libs/components/src/lib/alert/alert.ts

@@ -9,13 +9,15 @@ export type AlertConnotation =
 	| Connotation.Information
 	| Connotation.Success
 	| Connotation.Warning
+	| Connotation.Announcement
 	| Connotation.Alert;
 
 const connotationIconMap = new Map([
 	[Connotation.Accent, 'megaphone-line'],
 	[Connotation.Information, 'info-line'],
 	[Connotation.Success, 'check-circle-line'],
 	[Connotation.Warning, 'warning-line'],
+	[Connotation.Announcement, 'sparkles-line'],
 	[Connotation.Alert, 'error-line'],
 ]);
 

libs/components/src/lib/alert/ui.test.ts

@@ -72,3 +72,36 @@ async function testResponsiveAlert({ page }: { page: Page }) {
 	);
 }
 test('alert in mobile screens', testResponsiveAlert);
+
+async function testConnotationAlert({ page }: { page: Page }) {
+	const template = `
+			<div style="margin: 5px; height: 250px; transform: translateY(0px);">
+			<vwc-alert text="accent" connotation="accent" open placement="top-start"></vwc-alert>
+			<vwc-alert text="information" connotation="information" open placement="top"></vwc-alert>
+			<vwc-alert text="success" connotation="success" open placement="top-end"></vwc-alert>
+			<vwc-alert text="warning" connotation="warning" open placement="bottom-start"></vwc-alert>
+			<vwc-alert text="alert" connotation="alert" open placement="bottom"></vwc-alert>
+			<vwc-alert text="announcement" connotation="announcement" open placement="bottom-end"></vwc-alert>
+			</div>
+`;
+
+	await page.setViewportSize({ width: 560, height: 500 });
+
+	await loadComponents({
+		page,
+		components,
+	});
+	await loadTemplate({
+		page,
+		template,
+	});
+
+	const testWrapper = await page.$('#wrapper');
+
+	await page.waitForLoadState('networkidle');
+
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/alert-connotation.png'
+	);
+}
+test('alert in connotation', testConnotationAlert);