fix: styling issues for alert, link

packages/components/src/components/alert/alert.lite.tsx

@@ -82,62 +82,40 @@ export default function DBAlert(props: DBAlertProps) {
 				className="db-alert-icon"
 				icon={state.getIcon(props.icon, props.variant)}
 			/>
-			<div class="db-alert-content-container">
-				<div class="db-alert-headline-container">
-					<Show when={props.headline}>
-						<strong>{props.headline}</strong>
-					</Show>
-					<Show when={!props.headline}>
-						<span>{props.children}</span>
-					</Show>
-					<div class="db-alert-close-container">
-						<DBLink
-							className="db-alert-headline-link"
-							variant="inline"
-							href={props.link?.href}
-							target={props.link?.target}
-							rel={props.link?.rel}
-							role={props.link?.role}
-							disabled={props.link?.disabled}
-							selected={props.link?.selected}
-							label={props.link?.label}
-							hreflang={props.link?.hreflang}
-							current={props.link?.current}>
-							<Slot name="link" />
-						</DBLink>
-						<Show when={props.behaviour !== 'permanent'}>
-							<DBButton
-								id={props.closeButtonId}
-								icon="close"
-								variant="text"
-								size="small"
-								noText
-								onClick={(event) => state.handleClick(event)}>
-								{props.closeButtonText ?? DEFAULT_CLOSE_BUTTON}
-							</DBButton>
-						</Show>
-					</div>
-				</div>
 
-				<Show when={props.headline}>
-					<span>{props.children}</span>
-				</Show>
+			<Show when={props.headline}>
+				<strong class="db-alert-headline">{props.headline}</strong>
+			</Show>
+			<span class="db-alert-content">{props.children}</span>
 
+			<Show when={props.link}>
 				<DBLink
-					className="db-alert-content-link"
+					className="db-alert-link"
 					variant="inline"
-					href={props.link?.href}
-					target={props.link?.target}
-					rel={props.link?.rel}
-					role={props.link?.role}
-					disabled={props.link?.disabled}
-					selected={props.link?.selected}
-					label={props.link?.label}
-					hreflang={props.link?.hreflang}
-					current={props.link?.current}>
-					<Slot name="link" />
-				</DBLink>
-			</div>
+					href={props.link.href}
+					target={props.link.target}
+					rel={props.link.rel}
+					role={props.link.role}
+					disabled={props.link.disabled}
+					selected={props.link.selected}
+					label={props.link.label}
+					hreflang={props.link.hreflang}
+					current={props.link.current}
+					text={props.link.text}
+				/>
+			</Show>
+			<Show when={props.behaviour !== 'permanent'}>
+				<DBButton
+					className="db-alert-close"
+					id={props.closeButtonId}
+					icon="close"
+					variant="text"
+					size="small"
+					noText
+					onClick={(event) => state.handleClick(event)}>
+					{props.closeButtonText ?? DEFAULT_CLOSE_BUTTON}
+				</DBButton>
+			</Show>
 		</div>
 	);
 }

packages/components/src/components/alert/alert.scss

@@ -5,41 +5,86 @@
 @use "@db-ui/foundations/build/scss/helpers/component" as *;
 @use "@db-ui/foundations/build/scss/color/color-variants" as *;
 
-@mixin handle-links($show-headline) {
-	.db-alert-headline-link {
-		@if ($show-headline) {
-			display: inherit;
-		} @else {
-			display: none;
+%grid-layout {
+	grid-template-areas: "icon content close";
+	grid-template-columns: min-content 1fr min-content;
+
+	&:has(.db-alert-link) {
+		grid-template-areas: "icon content link close";
+		grid-template-columns: min-content 1fr min-content min-content;
+	}
+
+	@media screen and (max-width: $db-screens-s) {
+		&:has(.db-alert-link) {
+			grid-template-columns: min-content 1fr min-content;
+			grid-template-areas:
+				"icon content close"
+				"icon link link";
 		}
 	}
 
-	.db-alert-content-link {
-		@if ($show-headline) {
-			display: none;
-		} @else {
-			display: inherit;
+	&:has(.db-alert-headline) {
+		grid-template-columns: min-content 1fr 1fr min-content;
+		grid-template-areas:
+			"icon head head close"
+			"icon content content content";
+
+		&:has(.db-alert-link) {
+			grid-template-columns: min-content 1fr 1fr min-content min-content;
+			grid-template-areas:
+				"icon head head link close"
+				"icon content content content content";
+		}
+
+		@media screen and (max-width: $db-screens-s) {
+			grid-template-columns: min-content 1fr min-content;
+			grid-template-areas:
+				"icon head close"
+				"icon content content";
+
+			&:has(.db-alert-link) {
+				grid-template-columns: min-content 1fr min-content;
+				grid-template-areas:
+					"icon head close"
+					"icon content content"
+					"icon link link";
+			}
 		}
 	}
 }
 
 .db-alert {
 	@extend %db-bg-neutral-0;
 	@extend %component-border;
+	@extend %grid-layout;
+	display: grid;
+	padding: $db-spacing-fixed-md;
+	gap: $db-spacing-fixed-xs $db-spacing-fixed-md;
 
-	@include handle-links(true);
+	// TODO: probably extract this to an overwrite or external file
+	text-align: start; // workaround for power apps
 
-	@media screen and (max-width: $db-screens-s) {
-		@include handle-links(false);
+	.db-alert-icon {
+		grid-area: icon;
 	}
 
-	padding: $db-spacing-fixed-md;
-	display: flex;
-	gap: $db-spacing-fixed-md;
-	width: 100%;
+	.db-alert-headline {
+		grid-area: head;
+	}
 
-	// TODO: probably extract this to an overwrite or external file
-	text-align: start; // workaround for power apps
+	.db-alert-content {
+		grid-area: content;
+	}
+
+	.db-alert-link {
+		grid-area: link;
+		// required for angular build
+		display: inline;
+	}
+
+	.db-alert-close {
+		grid-area: close;
+	}
 
 	.db-icon {
 		&::before {
@@ -77,21 +122,3 @@
 		}
 	}
 }
-
-.db-alert-content-container {
-	display: flex;
-	flex-direction: column;
-	gap: $db-spacing-fixed-xs;
-	width: 100%;
-}
-
-.db-alert-headline-container {
-	display: flex;
-	gap: $db-spacing-fixed-lg;
-	justify-content: space-between;
-}
-
-.db-alert-close-container {
-	display: flex;
-	gap: $db-spacing-fixed-md;
-}

packages/components/src/components/alert/model.ts

@@ -36,11 +36,6 @@ export interface DBAlertDefaultProps {
 	 */
 	link?: LinkProps;
 
-	/**
-	 * React specific to pass in any content to the DBLink.
-	 * Default will be a simple text, but it could be a framework specific router link or something similar.
-	 */
-	slotLink?: any;
 	/**
 	 * The type attribute changes the styling of the alert.
 	 * The inline alert has a box-shadow and rounded corners (similar to card).

packages/components/src/components/link/link.lite.tsx

@@ -74,6 +74,9 @@ export default function DBLink(props: DBLinkProps) {
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
+			<Show when={props.text}>
+				<span>{props.text}</span>
+			</Show>
 			{props.children}
 		</a>
 	);

packages/components/src/components/link/link.scss

@@ -2,14 +2,21 @@
 
 @use "@db-ui/foundations/build/scss/body-styles" as *;
 @use "@db-ui/foundations/build/scss/variables" as *;
+@use "@db-ui/foundations/build/scss/variables.global" as *;
 @use "@db-ui/foundations/build/scss/scaling-placeholder" as *;
 @use "@db-ui/foundations/build/scss/color-placeholder" as *;
 @use "@db-ui/foundations/build/scss/helpers/functions" as *;
 @use "@db-ui/foundations/build/scss/icon/icons.helpers" as *;
 @use "@db-ui/foundations/build/scss/helpers/component" as *;
 
+%db-link-height {
+	display: inline-block;
+	height: $db-sizing-sm;
+}
+
 .db-link {
 	@extend %default-color;
+	@extend %db-link-height;
 	width: fit-content;
 	align-items: center;
 
@@ -21,6 +28,11 @@
 	// Changing color on hover should be animated by a transition
 	transition: outline 0.06s, color $db-transition-color;
 
+	a {
+		// Workaround for angular
+		@extend %db-link-height;
+	}
+
 	&:hover {
 		color: inherit;
 	}

packages/components/src/shared/model.ts

@@ -179,6 +179,7 @@ export type LinkProps = {
 		| 'strict-origin-when-cross-origin'
 		| 'unsafe-url';
 	selected?: boolean;
+	text?: string;
 };
 
 export type CardProps = {

packages/components/test/playwright/config.ts

@@ -36,12 +36,13 @@ const config = defineConfig({
 				...devices['Desktop Chrome']
 			}
 		},
-		{
+		// TODO: Enable this again when Mozilla introduces :has selector
+		/*		{
 			name: 'firefox',
 			use: {
 				...devices['Desktop Firefox']
 			}
-		},
+		},*/
 		{
 			name: 'webkit',
 			use: {

showcases/angular-showcase/src/app/components/alert/alert.component.html

@@ -20,9 +20,6 @@
 			(click)="showAlert(exampleName)"
 		>
 			{{ exampleName }}
-			<span *ngIf="exampleProps.slotLink" #link>{{
-				exampleProps.slotLink
-			}}</span>
 		</db-alert>
 	</ng-template>
 </app-default-component>

showcases/playwright.config.ts

@@ -53,12 +53,14 @@ const config: PlaywrightTestConfig = {
 				...devices['Desktop Chrome']
 			}
 		},
-		{
+
+		// TODO: Enable this again when Mozilla introduces :has selector
+		/* {
 			name: 'firefox',
 			use: {
 				...devices['Desktop Firefox']
 			}
-		},
+		}, */
 
 		{
 			name: 'webkit',

showcases/react-showcase/src/components/alert/index.tsx

@@ -9,7 +9,6 @@ const getAlert = ({
 	icon,
 	headline,
 	link,
-	slotLink,
 	type,
 	children,
 	behaviour
@@ -19,7 +18,6 @@ const getAlert = ({
 		icon={icon}
 		headline={headline}
 		link={link}
-		slotLink={slotLink}
 		type={type}
 		behaviour={behaviour}
 		onClick={() => {