@db-ux/react-core-components 4.7.3 → 4.8.0

package/CHANGELOG.md

@@ -1,10 +1,15 @@
 # @db-ux/react-core-components
 
+## 4.8.0
+
+### Minor Changes
+
+- Notification content now supports additional inline elements like `span` without styling collisions. And added the possibility to set the duration as a machine-readable value via the new `timestampDatetime` property - [see commit dae5149](https://github.com/db-ux-design-system/core-web/commit/dae514902f92a74cb95a3a3adab205d560174692)
+
 ## 4.7.3
 
 _version bump_
 
-
 ## 4.7.2
 
 ### Patch Changes

package/README.md

@@ -30,7 +30,10 @@ Import the styles in scss or css. Based on your technology the file names could
 
 ```scss
 // index.scss
-@forward "@db-ux/core-components/build/styles/rollup";
+@forward "@db-ux/core-foundations/build/styles/theme/rollup";  // Palette tokens
+@forward "@db-ux/core-foundations/build/styles/bundle";         // Semantic tokens
+@forward "@db-ux/core-foundations/build/styles/icons/rollup";   // Icon fonts
+@forward "@db-ux/core-components/build/styles/rollup";          // Component styling
 ```
 
 </details>
@@ -38,8 +41,11 @@ Import the styles in scss or css. Based on your technology the file names could
   <summary><strong>CSS</strong></summary>
 
 ```tsx
-// main.tsx
-import "@db-ux/core-components/build/styles/rollup.css";
+// main.tsx — order matters!
+import "@db-ux/core-foundations/build/styles/theme/rollup.css";  // Palette tokens
+import "@db-ux/core-foundations/build/styles/bundle.css";        // Semantic tokens
+import "@db-ux/core-foundations/build/styles/icons/rollup.css";  // Icon fonts
+import "@db-ux/core-components/build/styles/rollup.css";         // Component styling
 ```
 
 </details>

package/dist/components/notification/model.d.ts

@@ -40,6 +40,17 @@ export type DBNotificationDefaultProps = {
      * The timestamp attribute can be set for overlay notifications
      */
     timestamp?: string;
+    /**
+     * Machine-readable value for the `datetime` attribute of the rendered `<time>` element.
+     *
+     * Accepts any valid HTML datetime string:
+     * - Absolute moment: ISO 8601 date/time, e.g. `"2024-06-01T12:30:00"`
+     * - Duration: ISO 8601 duration, e.g. `"PT5M"` (5 minutes), `"PT1H30M"` (1 h 30 min)
+     *
+     * When omitted the `datetime` attribute is not rendered and assistive technologies
+     * fall back to the visible `timestamp` text.
+     */
+    timestampDatetime?: string;
     /**
      * Enables or disables the visibility of the timestamp.
      */

package/dist/components/notification/notification.js

@@ -22,9 +22,9 @@ function DBNotificationFn(props, component) {
             ariaLive: props.ariaLive,
         }), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": getBoolean(props.showIcon) !== false ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon), "data-link-variant": props.linkVariant }),
         React.createElement(React.Fragment, null, props.image),
-        stringPropVisible(props.headline, props.showHeadline) ? (React.createElement("header", null, props.headline)) : null,
+        stringPropVisible(props.headline, props.showHeadline) ? (React.createElement("header", { "data-area": "head" }, props.headline)) : null,
         React.createElement("div", { "data-area": "content" }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
-        stringPropVisible(props.timestamp, props.showTimestamp) ? (React.createElement("span", null, props.timestamp)) : null,
+        stringPropVisible(props.timestamp, props.showTimestamp) ? (React.createElement("time", { "data-area": "timestamp", dateTime: props.timestampDatetime }, props.timestamp)) : null,
         React.createElement(React.Fragment, null, props.link),
         getBoolean(props.closeable, "closeable") ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event) }, (_c = props.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)) : null));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.7.3",
+  "version": "4.8.0",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -32,8 +32,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "4.7.3",
-    "@db-ux/core-foundations": "4.7.3"
+    "@db-ux/core-components": "4.8.0",
+    "@db-ux/core-foundations": "4.8.0"
   },
   "scripts": {
     "build": "npm-run-all tsc --parallel mv:*",