fix(banner): warning connotation when removable (VIV-1431) (#1647)

* removable button is alternate only when not warning

* add test

* update snapshots

libs/components/src/lib/banner/banner.spec.ts

@@ -220,6 +220,24 @@ describe('vwc-banner', () => {
 			);
 		});
 
+		it('should not be alternate when connotation is warning', async function () {
+			element.removable = true;
+			await elementUpdated(element);
+
+			expect(
+				element.shadowRoot
+					?.querySelector('.dismiss-button')
+					?.getAttribute('part')
+			).toEqual('vvd-theme-alternate');
+			element.connotation = Connotation.Warning;
+			await elementUpdated(element);
+			expect(
+				element.shadowRoot
+					?.querySelector('.dismiss-button')
+					?.getAttribute('part')
+			).toEqual('');
+		});
+
 		it('should add a remove button when true', async function () {
 			await toggleRemovable(element, true);
 			expect(

libs/components/src/lib/banner/banner.template.ts

@@ -23,7 +23,7 @@ function renderDismissButton(buttonTag: string) {
 	  <${buttonTag}
 	  		aria-label="${(x) =>
 					x.dismissButtonAriaLabel || x.locale.banner.dismissButtonLabel}"
-			part="vvd-theme-alternate"
+			part="${(x) => (x.connotation === 'warning' ? '' : 'vvd-theme-alternate')}"
 			size="condensed"
 			class="dismiss-button"
 			icon="close-line"