fix(alert): adds main slot margin when heading/text is present (VIV-1871

) (#1851)

* fix: adds margin to main slot with heading / main text

* chore: fixes stylelint errors

* chore: formatting

* chore: styelint fix

---------

Co-authored-by: James Taylor <jstaylor@vonht2fg32k90.home>

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

@@ -16,7 +16,7 @@ Use the `text` attribute to set the alert's main text.
 - Default: `undefined`
 
 ```html preview 100px
-<vwc-alert text="An important information for you" open></vwc-alert>
+<vwc-alert text="Some important information for you" open></vwc-alert>
 ```
 
 ### Headline
@@ -29,7 +29,7 @@ Use the `headline` attribute to add a headline to your alert.
 ```html preview 100px
 <vwc-alert
 	headline="This requires your attention"
-	text="An important information for you"
+	text="Some important information for you"
 	open
 ></vwc-alert>
 ```
@@ -42,7 +42,7 @@ Use the `open` attribute to toggle the alert open state.
 - Default: `false`
 
 ```html preview
-<vwc-alert text="An important information for you"></vwc-alert>
+<vwc-alert text="Some important information for you"></vwc-alert>
 
 <vwc-button
 	appearance="outlined"
@@ -74,7 +74,7 @@ Note that each connotation comes with a default icon (that you can override with
 	}
 </style>
 <vwc-alert
-	text="An important information for you"
+	text="Some important information for you"
 	connotation="accent"
 	open
 ></vwc-alert>
@@ -107,7 +107,7 @@ over the connotation's icon, if any.
 
 ```html preview 100px
 <vwc-alert
-	text="An important information for you"
+	text="Some important information for you"
 	open
 	icon="megaphone-solid"
 ></vwc-alert>
@@ -184,7 +184,7 @@ Use the `removable` attribute to add a close button to the alert.
 - Default: `false`
 
 ```html preview 100px
-<vwc-alert text="An important information for you" removable open></vwc-alert>
+<vwc-alert text="Some important information for you" removable open></vwc-alert>
 
 <vwc-button
 	appearance="outlined"
@@ -208,7 +208,10 @@ Use the `timeoutms` attribute to set the time after which the alert will automat
 - Default: `0` (stays open indefinitely)
 
 ```html preview
-<vwc-alert text="An important information for you" timeoutms="2000"></vwc-alert>
+<vwc-alert
+	text="Some important information for you"
+	timeoutms="2000"
+></vwc-alert>
 
 <vwc-button
 	appearance="outlined"
@@ -241,7 +244,7 @@ If you want to add rich content to your alert, you can use the main slot.
 You can add action items elements using the `action-items` slot. They will be displayed at the inline-end of the alert.
 
 ```html preview 100px
-<vwc-alert text="An important information for you" open>
+<vwc-alert text="Some important information for you" open>
 	<vwc-button
 		slot="action-items"
 		appearance="outlined"
@@ -257,7 +260,7 @@ Set the `icon` slot to add an icon to the alert.
 If set, the `icon` attribute is ignored.
 
 ```html preview 100px
-<vwc-alert text="An important information for you" open>
+<vwc-alert text="Some important information for you" open>
 	<vwc-icon slot="icon" name="megaphone-solid" connotation="cta"></vwc-icon>
 </vwc-alert>
 ```

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

@@ -98,6 +98,13 @@ $alert-transition-delay: --transition-delay;
 		.main-text {
 			font: var(#{constants.$vvd-typography-base});
 		}
+
+		.headline + ::slotted([slot='main'i]:first-child)::before,
+		.main-text + ::slotted([slot='main'i]:first-child)::before {
+			display: block;
+			margin-top: 8px;
+			content: '';
+		}
 	}
 
 	slot[name='icon'] {

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

@@ -70,8 +70,7 @@ export const AlertTemplate: (
 						html`<header class="headline">${(x) => x.headline}</header>`
 					)}
 					${when((x) => x.text, html`<div class="main-text">${(x) => x.text}</div>`)}
-					<slot name="main">
-					</slot>
+					<slot name="main"></slot>
 				</div>
 				<slot class="action-items" name="action-items"></slot>
 				${when((x) => x.removable, renderDismissButton(buttonTag))}

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

@@ -48,7 +48,7 @@ test('should show the component', async ({ page }: { page: Page }) => {
 async function testResponsiveAlert({ page }: { page: Page }) {
 	const template = `
 			<div style="margin: 5px; height: 250px; transform: translateY(0px);">
-			<vwc-alert text="An important information for you" removable open></vwc-alert>
+			<vwc-alert text="Some important information for you" removable open></vwc-alert>
 			</div>
 `;
 
@@ -105,3 +105,36 @@ async function testConnotationAlert({ page }: { page: Page }) {
 	);
 }
 test('alert in connotation', testConnotationAlert);
+
+async function testMainSlotAlert({ page }: { page: Page }) {
+	const template = `
+		<div style="margin: 5px; height: 250px; transform: translateY(0px);">
+			<vwc-alert headline="This requires your attention" open placement="top">
+				<vwc-switch slot="main" label="Do not show more alerts"></vwc-switch>
+			</vwc-alert>
+			<vwc-alert headline="This requires your attention" text="Some important information for you" open placement="bottom">
+				<vwc-switch slot="main" label="Do not show more alerts"></vwc-switch>
+			</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-main-slot.png'
+	);
+}
+test('alert with main slot content', testMainSlotAlert);