@db-ux/core-components 4.0.3 → 4.1.0

package/build/components/notification/notification-grid-default.scss

@@ -3,9 +3,21 @@
 	grid-template-areas: "content";
 	grid-template-columns: 1fr;
 
+	// Add a layout for inline links
+	&[data-link-variant="inline"] {
+		grid-template-columns: 1fr min-content;
+		grid-template-areas: "content timestamp";
+	}
+
 	&:has(.db-button) {
 		grid-template-columns: 1fr min-content;
 		grid-template-areas: "content close";
+
+		// Inline link + close button
+		&[data-link-variant="inline"] {
+			grid-template-columns: 1fr min-content min-content;
+			grid-template-areas: "content timestamp close";
+		}
 	}
 
 	// 2. headline
@@ -15,11 +27,25 @@
 			"head"
 			"content";
 
+		&[data-link-variant="inline"] {
+			grid-template-columns: 1fr min-content;
+			grid-template-areas:
+				"head timestamp"
+				"content content";
+		}
+
 		&:has(.db-button) {
 			grid-template-columns: 1fr min-content;
 			grid-template-areas:
 				"head close"
 				"content content";
+
+			&[data-link-variant="inline"] {
+				grid-template-columns: 1fr min-content min-content;
+				grid-template-areas:
+					"head timestamp close"
+					"content content ."; // Empty cell aligns content column with head row
+			}
 		}
 	}
 
@@ -30,9 +56,19 @@
 		grid-template-areas: "icon content";
 		grid-template-columns: min-content 1fr;
 
+		&[data-link-variant="inline"] {
+			grid-template-columns: min-content 1fr min-content;
+			grid-template-areas: "icon content timestamp";
+		}
+
 		&:has(.db-button) {
 			grid-template-columns: min-content 1fr min-content;
 			grid-template-areas: "icon content close";
+
+			&[data-link-variant="inline"] {
+				grid-template-columns: min-content 1fr min-content min-content;
+				grid-template-areas: "icon content timestamp close";
+			}
 		}
 
 		&:has(header) {
@@ -41,11 +77,25 @@
 				"icon head"
 				"icon content";
 
+			&[data-link-variant="inline"] {
+				grid-template-columns: min-content 1fr min-content;
+				grid-template-areas:
+					"icon head timestamp"
+					"icon content content";
+			}
+
 			&:has(.db-button) {
 				grid-template-columns: min-content 1fr min-content;
 				grid-template-areas:
 					"icon head close"
 					"icon content content";
+
+				&[data-link-variant="inline"] {
+					grid-template-columns: min-content 1fr min-content min-content;
+					grid-template-areas:
+						"icon head timestamp close"
+						"icon content content ."; // Empty cell aligns content column with head row
+				}
 			}
 		}
 	}

package/build/components/notification/notification-grid-non-overlay.scss

@@ -1,68 +1,80 @@
-@use "@db-ux/core-foundations/build/styles/helpers/display";
+@use "notification-grid-shared" as shared;
 
-%grid-layout-variant-not-overlay {
-	span {
-		@include display.display(none);
-	}
 
-	// has link
-	&:has(a) {
-		&:not([data-link-variant="inline"]) {
-			// 1. only content (min. requirement)
-			grid-template-areas:
-				"content"
-				"link";
-			grid-template-columns: 1fr;
+// Wrapper mixins for non-overlay variants that use shared grid logic
+@mixin non-overlay-base-grid($areas, $columns) {
+	@include shared.shared-base-grid($areas, $columns);
+}
 
-			&:has(.db-button) {
-				grid-template-columns: 1fr min-content;
-				grid-template-areas:
-					"content close"
-					"link link";
-			}
+@mixin non-overlay-with-close($areas, $columns) {
+	@include shared.shared-with-close($areas, $columns);
+}
 
-			// 2. headline
-			&:has(header) {
-				grid-template-columns: 1fr;
-				grid-template-areas:
-					"head"
-					"content"
-					"link";
+@mixin non-overlay-with-header($areas, $columns) {
+	@include shared.shared-with-header($areas, $columns);
+}
 
-				&:has(.db-button) {
-					grid-template-columns: 1fr min-content;
-					grid-template-areas:
-						"head close"
-						"content content"
-						"link link";
-				}
-			}
+@mixin non-overlay-with-header-close($areas, $columns) {
+	@include shared.shared-with-header-close($areas, $columns);
+}
 
-			// 3. icon or img
-			&[data-icon],
-			&[data-semantic]:not([data-semantic="adaptive"]),
-			&:has(img) {
-				grid-template-areas:
-					"icon content"
-					"icon link";
-				grid-template-columns: min-content 1fr;
+@mixin non-overlay-with-icon($areas, $columns) {
+	@include shared.shared-with-icon($areas, $columns);
+}
 
-				&:has(header) {
-					grid-template-columns: min-content 1fr;
-					grid-template-areas:
-						"icon head"
-						"icon content"
-						"icon link";
+@mixin non-overlay-with-icon-close($areas, $columns) {
+	@include shared.shared-with-icon-close($areas, $columns);
+}
+
+@mixin non-overlay-with-icon-header($areas, $columns) {
+	@include shared.shared-with-icon-header($areas, $columns);
+}
+
+@mixin non-overlay-with-icon-header-close($areas, $columns) {
+	@include shared.shared-with-icon-header-close($areas, $columns);
+}
+
+@mixin non-overlay-block-link-layouts() {
+	// 1. Base: content + block link (no additional elements)
+	@include non-overlay-base-grid("content" "link", 1fr);
+	@include non-overlay-with-close(
+		"content close" "link link",
+		1fr min-content
+	);
+
+	// 2. Adds: headline
+	@include non-overlay-with-header("head" "content" "link", 1fr);
+	@include non-overlay-with-header-close(
+		"head close" "content content" "link link",
+		1fr min-content
+	);
+
+	// 3. Adds: icon or image
+	@include non-overlay-with-icon("icon content" "icon link", min-content 1fr);
+	@include non-overlay-with-icon-close(
+		"icon content close" "icon link link",
+		min-content 1fr min-content
+	);
+	@include non-overlay-with-icon-header(
+		"icon head" "icon content" "icon link",
+		min-content 1fr
+	);
+	@include non-overlay-with-icon-header-close(
+		"icon head close" "icon content content" "icon link link",
+		min-content 1fr min-content
+	);
+}
+
+%grid-layout-variant-not-overlay {
+	// Hide timestamp for non-overlay variants only
+	span {
+		display: none;
+	}
 
-					&:has(.db-button) {
-						grid-template-columns: min-content 1fr min-content;
-						grid-template-areas:
-							"icon head close"
-							"icon content content"
-							"icon link link";
-					}
-				}
-			}
-		}
+	// Apply block link layout when linkVariant is "block" (explicit or default)
+	// Only applies to non-overlay variants with block links
+	&[data-link-variant="block"],
+	&:not([data-link-variant]):has(a) {
+		@include non-overlay-block-link-layouts;
 	}
 }

package/build/components/notification/notification-grid-overlay.scss

@@ -1,55 +1,156 @@
+@use "notification-grid-shared" as shared;
+
+// Wrapper mixins for overlay variants that use shared grid logic
+@mixin overlay-base-grid($areas, $columns) {
+	@include shared.shared-base-grid($areas, $columns);
+}
+
+@mixin overlay-with-close($areas, $columns) {
+	@include shared.shared-with-close($areas, $columns);
+}
+
+@mixin overlay-with-header($areas, $columns) {
+	@include shared.shared-with-header($areas, $columns);
+}
+
+@mixin overlay-with-header-close($areas, $columns) {
+	@include shared.shared-with-header-close($areas, $columns);
+}
+
+@mixin overlay-with-icon($areas, $columns) {
+	@include shared.shared-with-icon($areas, $columns);
+}
+
+@mixin overlay-with-icon-close($areas, $columns) {
+	@include shared.shared-with-icon-close($areas, $columns);
+}
+
+@mixin overlay-with-icon-header($areas, $columns) {
+	@include shared.shared-with-icon-header($areas, $columns);
+}
+
+@mixin overlay-with-icon-header-close($areas, $columns) {
+	@include shared.shared-with-icon-header-close($areas, $columns);
+}
+
+@mixin overlay-timestamp-area-layouts() {
+	// 1. Base layout: content + timestamp
+	@include overlay-base-grid("content timestamp", 1fr min-content);
+	@include overlay-with-close(
+		"content timestamp close",
+		1fr min-content min-content
+	);
+
+	// 2. Progressive enhancement: adds headline
+	@include overlay-with-header(
+		"head timestamp" "content content",
+		1fr min-content
+	);
+	@include overlay-with-header-close(
+		"head timestamp close" "content content content",
+		1fr min-content min-content
+	);
+
+	// 3. Progressive enhancement: adds icon or image
+	@include overlay-with-icon(
+		"icon content timestamp",
+		min-content 1fr min-content
+	);
+	@include overlay-with-icon-close(
+		"icon content timestamp close",
+		min-content 1fr min-content min-content
+	);
+	@include overlay-with-icon-header(
+		"icon head timestamp" "icon content content",
+		min-content 1fr min-content
+	);
+	@include overlay-with-icon-header-close(
+		"icon head timestamp close" "icon content content content",
+		min-content 1fr min-content min-content
+	);
+}
+
+@mixin overlay-block-layouts-without-timestamp() {
+	// 1. Base layout: content + block link (overridden by subsequent mixins when additional elements detected)
+	@include overlay-base-grid("content" "link", 1fr);
+	@include overlay-with-close("content close" "link link", 1fr min-content);
+
+	// 2. Progressive enhancement: adds headline
+	@include overlay-with-header("head" "content" "link", 1fr);
+	@include overlay-with-header-close(
+		"head close" "content content" "link link",
+		1fr min-content
+	);
+
+	// 3. Progressive enhancement: adds icon or image
+	@include overlay-with-icon("icon content" "icon link", min-content 1fr);
+	@include overlay-with-icon-close(
+		"icon content close" "icon link link",
+		min-content 1fr min-content
+	);
+	@include overlay-with-icon-header(
+		"icon head" "icon content" "icon link",
+		min-content 1fr
+	);
+	@include overlay-with-icon-header-close(
+		"icon head close" "icon content content" "icon link link",
+		min-content 1fr min-content
+	);
+}
+
+@mixin overlay-block-layouts() {
+	// 1. Base layout when content, timestamp, and block link are present (more specific rules apply when additional elements are detected)
+	@include overlay-base-grid(
+		"content timestamp" "link link",
+		1fr min-content
+	);
+	@include overlay-with-close(
+		"content timestamp close" "link link link",
+		1fr min-content min-content
+	);
+
+	// 2. Progressive enhancement: adds headline
+	@include overlay-with-header(
+		"head timestamp" "content content" "link link",
+		1fr min-content
+	);
+	@include overlay-with-header-close(
+		"head timestamp close" "content content content" "link link link",
+		1fr min-content min-content
+	);
+
+	// 3. Progressive enhancement: adds icon or image
+	@include overlay-with-icon(
+		"icon content timestamp" "icon link link",
+		min-content 1fr min-content
+	);
+	@include overlay-with-icon-close(
+		"icon content timestamp close" "icon link link link",
+		min-content 1fr min-content min-content
+	);
+	@include overlay-with-icon-header(
+		"icon head timestamp" "icon content content" "icon link link",
+		min-content 1fr min-content
+	);
+	@include overlay-with-icon-header-close(
+		"icon head timestamp close" "icon content content content"
+			"icon link link link",
+		min-content 1fr min-content min-content
+	);
+}
+
 %grid-layout-variant-overlay {
-	// has timestamp
-	&:has(span) {
-		// 1. only content (min. requirement)
-		grid-template-areas: "content timestamp";
-		grid-template-columns: 1fr min-content;
-
-		&:has(.db-button) {
-			grid-template-columns: 1fr min-content min-content;
-			grid-template-areas: "content timestamp close";
-		}
-
-		// 2. headline
-		&:has(header) {
-			grid-template-columns: 1fr min-content;
-			grid-template-areas:
-				"head timestamp"
-				"content content";
-
-			&:has(.db-button) {
-				grid-template-columns: 1fr min-content min-content;
-				grid-template-areas:
-					"head timestamp close"
-					"content content content";
-			}
-		}
-
-		// 3. icon or img
-		&[data-icon],
-		&[data-semantic]:not([data-semantic="adaptive"]),
-		&:has(img) {
-			grid-template-areas: "icon content timestamp";
-			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 timestamp close";
-			}
-
-			&:has(header) {
-				grid-template-columns: min-content 1fr min-content;
-				grid-template-areas:
-					"icon head timestamp"
-					"icon content content";
-
-				&:has(.db-button) {
-					grid-template-columns: min-content 1fr min-content min-content;
-					grid-template-areas:
-						"icon head timestamp close"
-						"icon content content content";
-				}
-			}
-		}
+	// 1. Standard: Layout for inline links AND timestamps
+	//    Both use the 'timestamp' area, which moves to the header when a header is present.
+	@include overlay-timestamp-area-layouts;
+
+	// 2. Override: When explicitly "block" link variant with timestamp
+	&:has(span)[data-link-variant="block"] {
+		@include overlay-block-layouts;
+	}
+
+	// 3. Override: When "block" link variant WITHOUT timestamp
+	&:not(:has(span))[data-link-variant="block"] {
+		@include overlay-block-layouts-without-timestamp;
 	}
 }

package/build/components/notification/notification-grid-shared.css

@@ -0,0 +1 @@
+

package/build/components/notification/notification-grid-shared.scss

@@ -0,0 +1,80 @@
+// Shared grid mixins for notification layouts
+// These mixins contain the common grid logic used by both overlay and non-overlay variants
+
+@mixin shared-base-grid($areas, $columns) {
+	grid-template-areas: $areas;
+	grid-template-columns: $columns;
+}
+
+@mixin shared-with-close($areas, $columns) {
+	&:has(.db-button) {
+		grid-template-areas: $areas;
+		grid-template-columns: $columns;
+	}
+}
+
+@mixin shared-with-header($areas, $columns) {
+	&:has(header) {
+		grid-template-areas: $areas;
+		grid-template-columns: $columns;
+	}
+}
+
+@mixin shared-with-header-close($areas, $columns) {
+	&:has(header):has(.db-button) {
+		grid-template-areas: $areas;
+		grid-template-columns: $columns;
+	}
+}
+
+@mixin shared-with-icon($areas, $columns) {
+	// Only treat the element as having an icon when the "data-show-icon"
+	// attribute is not explicitly set to "false". This prevents reserving
+	// grid space for an icon when the component has an `icon` prop but
+	// `showIcon` is false (the common cause for unintended left padding).
+	&[data-icon]:not([data-show-icon="false"]),
+	&[data-semantic]:not([data-semantic="adaptive"], [data-show-icon="false"]),
+	&:has(img) {
+		grid-template-areas: $areas;
+		grid-template-columns: $columns;
+	}
+}
+
+@mixin shared-with-icon-close($areas, $columns) {
+	// Same as shared-with-icon but for variants that also have a close button
+	&[data-icon]:not([data-show-icon="false"]):has(.db-button),
+	&[data-semantic]:not(
+			[data-semantic="adaptive"],
+			[data-show-icon="false"]
+		):has(.db-button),
+	&:has(img):has(.db-button) {
+		grid-template-areas: $areas;
+		grid-template-columns: $columns;
+	}
+}
+
+@mixin shared-with-icon-header($areas, $columns) {
+	// Same as shared-with-icon but for variants that also have a header
+	&[data-icon]:not([data-show-icon="false"]):has(header),
+	&[data-semantic]:not(
+			[data-semantic="adaptive"],
+			[data-show-icon="false"]
+		):has(header),
+	&:has(img):has(header) {
+		grid-template-areas: $areas;
+		grid-template-columns: $columns;
+	}
+}
+
+@mixin shared-with-icon-header-close($areas, $columns) {
+	// Same as shared-with-icon but for variants that have a header and close button
+	&[data-icon]:not([data-show-icon="false"]):has(header):has(.db-button),
+	&[data-semantic]:not(
+			[data-semantic="adaptive"],
+			[data-show-icon="false"]
+		):has(header):has(.db-button),
+	&:has(img):has(header):has(.db-button) {
+		grid-template-areas: $areas;
+		grid-template-columns: $columns;
+	}
+}