feat: enable link for notification variant=overlay

packages/components/src/components/notification/notification-grid-non-overlay.scss

@@ -62,58 +62,5 @@
 				}
 			}
 		}
-
-		&[data-link-variant="inline"] {
-			// 1. only content (min. requirement)
-			grid-template-areas: "content link";
-			grid-template-columns: 1fr min-content;
-
-			&:has(.db-button) {
-				grid-template-columns: 1fr min-content min-content;
-				grid-template-areas: "content link close";
-			}
-
-			// 2. headline
-			&:has(header) {
-				grid-template-columns: 1fr min-content;
-				grid-template-areas:
-					"head link"
-					"content content";
-
-				&:has(.db-button) {
-					grid-template-columns: 1fr min-content min-content;
-					grid-template-areas:
-						"head link close"
-						"content content content";
-				}
-			}
-
-			// 3. icon or img
-			&[data-icon],
-			&[data-semantic]:not([data-semantic="adaptive"]),
-			&:has(img) {
-				grid-template-areas: "icon content link";
-				grid-template-columns: min-content 1fr min-content;
-
-				&:has(.db-button) {
-					grid-template-columns: min-content 1fr min-content min-content;
-					grid-template-areas: "icon content link close";
-				}
-
-				&:has(header) {
-					grid-template-columns: min-content 1fr min-content;
-					grid-template-areas:
-						"icon head link"
-						"icon content content";
-
-					&:has(.db-button) {
-						grid-template-columns: min-content 1fr min-content min-content;
-						grid-template-areas:
-							"icon head link close"
-							"icon content content content";
-					}
-				}
-			}
-		}
 	}
 }

packages/components/src/components/notification/notification-grid-overlay.scss

@@ -1,8 +1,4 @@
 %grid-layout-variant-overlay {
-	a {
-		display: none;
-	}
-
 	// has timestamp
 	&:has(span) {
 		// 1. only content (min. requirement)

packages/components/src/components/notification/notification.scss

@@ -124,6 +124,63 @@
 		grid-area: icon;
 	}
 
+	// has link inline or overlay
+	&:has(a) {
+		&[data-link-variant="inline"],
+		&[data-variant="overlay"] {
+			// 1. only content (min. requirement)
+			grid-template-areas: "content link";
+			grid-template-columns: 1fr min-content;
+
+			&:has(.db-button) {
+				grid-template-columns: 1fr min-content min-content;
+				grid-template-areas: "content link close";
+			}
+
+			// 2. headline
+			&:has(header) {
+				grid-template-columns: 1fr min-content;
+				grid-template-areas:
+					"head link"
+					"content content";
+
+				&:has(.db-button) {
+					grid-template-columns: 1fr min-content min-content;
+					grid-template-areas:
+						"head link close"
+						"content content content";
+				}
+			}
+
+			// 3. icon or img
+			&[data-icon],
+			&[data-semantic]:not([data-semantic="adaptive"]),
+			&:has(img) {
+				grid-template-areas: "icon content link";
+				grid-template-columns: min-content 1fr min-content;
+
+				&:has(.db-button) {
+					grid-template-columns: min-content 1fr min-content min-content;
+					grid-template-areas: "icon content link close";
+				}
+
+				&:has(header) {
+					grid-template-columns: min-content 1fr min-content;
+					grid-template-areas:
+						"icon head link"
+						"icon content content";
+
+					&:has(.db-button) {
+						grid-template-columns: min-content 1fr min-content min-content;
+						grid-template-areas:
+							"icon head link close"
+							"icon content content content";
+					}
+				}
+			}
+		}
+	}
+
 	&[data-variant="overlay"] {
 		@extend %grid-layout-variant-overlay;
 		box-shadow: variables.$db-elevation-md;

showcases/shared/notification.json

@@ -456,6 +456,34 @@
 					"behaviour": "permanent"
 				}
 			},
+			{
+				"name": "Text & Textlink Inline",
+				"style": { "width": "300px" },
+				"props": {
+					"link": true,
+					"variant": "overlay",
+					"behaviour": "permanent"
+				}
+			},
+			{
+				"name": "Text & Headline & Textlink Inline & Cloaseable",
+				"style": { "width": "300px" },
+				"props": {
+					"headline": "Headline",
+					"link": true,
+					"variant": "overlay"
+				}
+			},
+			{
+				"name": "Text & Icon & Headline & Textlink Inline & Cloaseable",
+				"style": { "width": "300px" },
+				"props": {
+					"icon": "information_circle",
+					"headline": "Headline",
+					"link": true,
+					"variant": "overlay"
+				}
+			},
 			{
 				"name": "Text & Timed",
 				"style": { "width": "300px" },