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

package/CHANGELOG.md

@@ -1,5 +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,12 +1,13 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.7.2",
+  "version": "4.8.0",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/db-ux-design-system/core-web.git"
   },
   "license": "Apache-2.0",
+  "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -15,6 +16,25 @@
     "agent",
     "CHANGELOG.md"
   ],
+  "devDependencies": {
+    "npm-run-all2": "8.0.4",
+    "@playwright/experimental-ct-react": "1.59.1",
+    "@types/react": "19.2.14",
+    "cpr": "3.0.1",
+    "playwright": "1.59.1",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "typescript": "5.9.3"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@db-ux/core-components": "4.8.0",
+    "@db-ux/core-foundations": "4.8.0"
+  },
   "scripts": {
     "build": "npm-run-all tsc --parallel mv:*",
     "mv:dist": "cpr dist ../../build-outputs/react/dist --overwrite",
@@ -28,20 +48,5 @@
     "test:windows": "playwright test --config playwright.screen-reader.win.ts",
     "test:components:ui": "playwright test --config playwright.config.ts --ui",
     "tsc": "tsc --project . --sourceMap false"
-  },
-  "devDependencies": {
-    "@playwright/experimental-ct-react": "1.59.1",
-    "@types/react": "19.2.14",
-    "react": "19.2.5",
-    "react-dom": "19.2.5"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public"
-  },
-  "sideEffects": false,
-  "dependencies": {
-    "@db-ux/core-components": "4.7.2",
-    "@db-ux/core-foundations": "4.7.2"
   }
-}
+}

package/dist/utils/form-components.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/utils/form-components.spec.js

@@ -1,167 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import { handleFrameworkEventAngular, handleFrameworkEventVue } from './form-components';
-const createNumberEvent = (value, badInput, inputType) => ({
-    inputType,
-    target: {
-        type: 'number',
-        value,
-        validity: {
-            badInput
-        }
-    }
-});
-const createTextEvent = (value) => ({
-    target: {
-        type: 'text',
-        value,
-        validity: {
-            badInput: false
-        }
-    }
-});
-describe('handleFrameworkEventAngular', () => {
-    it('calls propagateChange and writeValue for valid number value', () => {
-        const component = {
-            propagateChange: vi.fn(),
-            writeValue: vi.fn()
-        };
-        const event = createNumberEvent('1.5', false);
-        handleFrameworkEventAngular(component, event);
-        expect(component.propagateChange).toHaveBeenCalledWith('1.5');
-        expect(component.writeValue).toHaveBeenCalledWith('1.5');
-    });
-    it('skips propagateChange and writeValue when "." is typed (intermediate state)', () => {
-        const component = {
-            propagateChange: vi.fn(),
-            writeValue: vi.fn()
-        };
-        const event = {
-            type: 'input',
-            data: '.',
-            inputType: 'insertText',
-            target: {
-                type: 'number',
-                value: '1.'
-            }
-        };
-        handleFrameworkEventAngular(component, event, 'value', '1');
-        expect(component.propagateChange).not.toHaveBeenCalled();
-        expect(component.writeValue).not.toHaveBeenCalled();
-    });
-    it('skips propagateChange and writeValue when "," is typed (intermediate state)', () => {
-        const component = {
-            propagateChange: vi.fn(),
-            writeValue: vi.fn()
-        };
-        const event = {
-            type: 'input',
-            data: ',',
-            inputType: 'insertText',
-            target: {
-                type: 'number',
-                value: ''
-            }
-        };
-        handleFrameworkEventAngular(component, event, 'value', '1');
-        expect(component.propagateChange).not.toHaveBeenCalled();
-        expect(component.writeValue).not.toHaveBeenCalled();
-    });
-    it.each(['e', 'E', '+', '-'])('skips propagateChange and writeValue when "%s" is typed (intermediate state)', char => {
-        const component = {
-            propagateChange: vi.fn(),
-            writeValue: vi.fn()
-        };
-        const event = {
-            type: 'input',
-            data: char,
-            inputType: 'insertText',
-            target: {
-                type: 'number',
-                value: ''
-            }
-        };
-        handleFrameworkEventAngular(component, event, 'value', '1');
-        expect(component.propagateChange).not.toHaveBeenCalled();
-        expect(component.writeValue).not.toHaveBeenCalled();
-    });
-    it('skips propagateChange and writeValue when deleting content and lastValue has decimal', () => {
-        const component = {
-            propagateChange: vi.fn(),
-            writeValue: vi.fn()
-        };
-        const event = {
-            type: 'input',
-            data: null,
-            inputType: 'deleteContentBackward',
-            target: {
-                type: 'number',
-                value: ''
-            }
-        };
-        handleFrameworkEventAngular(component, event, 'value', '1.5');
-        expect(component.propagateChange).not.toHaveBeenCalled();
-        expect(component.writeValue).not.toHaveBeenCalled();
-    });
-    it('calls propagateChange and writeValue when number input is cleared via backspace (no decimal in lastValue)', () => {
-        const component = {
-            propagateChange: vi.fn(),
-            writeValue: vi.fn()
-        };
-        const event = createNumberEvent('', false, 'deleteContentBackward');
-        handleFrameworkEventAngular(component, event);
-        expect(component.propagateChange).toHaveBeenCalledWith('');
-        expect(component.writeValue).toHaveBeenCalledWith('');
-    });
-    it('skips propagateChange and writeValue for number change events', () => {
-        const component = {
-            propagateChange: vi.fn(),
-            writeValue: vi.fn()
-        };
-        const event = {
-            type: 'change',
-            target: {
-                type: 'number',
-                value: '5'
-            }
-        };
-        handleFrameworkEventAngular(component, event);
-        expect(component.propagateChange).not.toHaveBeenCalled();
-        expect(component.writeValue).not.toHaveBeenCalled();
-    });
-    it('calls propagateChange and writeValue for text input type', () => {
-        const component = {
-            propagateChange: vi.fn(),
-            writeValue: vi.fn()
-        };
-        const event = createTextEvent('hello');
-        handleFrameworkEventAngular(component, event);
-        expect(component.propagateChange).toHaveBeenCalledWith('hello');
-        expect(component.writeValue).toHaveBeenCalledWith('hello');
-    });
-});
-describe('handleFrameworkEventVue', () => {
-    it('emits update:value for valid number value', () => {
-        const emit = vi.fn();
-        const event = createNumberEvent('1.5', false);
-        handleFrameworkEventVue(emit, event);
-        expect(emit).toHaveBeenCalledWith('update:value', '1.5');
-    });
-    it('emits update:value with empty string when number input has badInput (intermediate state like "1.")', () => {
-        const emit = vi.fn();
-        const event = createNumberEvent('', true);
-        handleFrameworkEventVue(emit, event);
-        expect(emit).toHaveBeenCalledWith('update:value', '');
-    });
-    it('emits update:value when number input is cleared (empty, no badInput)', () => {
-        const emit = vi.fn();
-        const event = createNumberEvent('', false);
-        handleFrameworkEventVue(emit, event);
-        expect(emit).toHaveBeenCalledWith('update:value', '');
-    });
-    it('emits update:value for text input type', () => {
-        const emit = vi.fn();
-        const event = createTextEvent('hello');
-        handleFrameworkEventVue(emit, event);
-        expect(emit).toHaveBeenCalledWith('update:value', 'hello');
-    });
-});

package/dist/utils/index.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/utils/index.spec.js

@@ -1,26 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { getStep } from './index';
-describe('getStep', () => {
-    it('returns undefined when step is undefined', () => {
-        expect(getStep(undefined)).toBeUndefined();
-    });
-    it('returns undefined when step is null', () => {
-        // eslint-disable-next-line unicorn/no-null
-        expect(getStep(null)).toBeUndefined();
-    });
-    it('returns "any" when step is "any"', () => {
-        expect(getStep('any')).toBe('any');
-    });
-    it('returns a number when step is a number', () => {
-        expect(getStep(5)).toBe(5);
-        expect(getStep(0.5)).toBe(0.5);
-    });
-    it('returns a number when step is a numeric string', () => {
-        expect(getStep('5')).toBe(5);
-        expect(getStep('0.5')).toBe(0.5);
-    });
-    it('returns NaN when step is a non-numeric string', () => {
-        expect(getStep('foo')).toBeNaN();
-        expect(getStep('invalid')).toBeNaN();
-    });
-});

package/dist/utils/show-code-link.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/utils/show-code-link.spec.js

@@ -1,28 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { getShowCodeHref } from '../shared/showcase/show-code-link';
-describe('getShowCodeHref', () => {
-    it('returns localhost react storybook url on localhost', () => {
-        expect(getShowCodeHref('http://localhost:3000/core-web/sub/components/action/button/overview', 'react')).toBe('http://localhost:6005/?path=/docs/components-dbbutton');
-    });
-    it('returns localhost angular storybook url on localhost', () => {
-        expect(getShowCodeHref('http://localhost:3000/core-web/sub/components/action/button/overview', 'angular')).toBe('http://localhost:6006/?path=/docs/components-dbbutton');
-    });
-    it('returns localhost vue storybook url on localhost', () => {
-        expect(getShowCodeHref('http://127.0.0.1:3000/core-web/sub/components/action/button/overview', 'vue')).toBe('http://127.0.0.1:6007/?path=/docs/components-dbbutton');
-    });
-    it('returns localhost html storybook url on localhost', () => {
-        expect(getShowCodeHref('http://localhost:3000/core-web/sub/components/action/button/overview', 'html')).toBe('http://localhost:6001/?path=/docs/components-dbbutton');
-    });
-    it('returns localhost url for direct docs route', () => {
-        expect(getShowCodeHref('http://localhost:3000/core-web/components/button/docs', 'react')).toBe('http://localhost:6005/?path=/docs/components-dbbutton');
-    });
-    it('returns production url for non-localhost', () => {
-        expect(getShowCodeHref('https://db-ui.com/core-web/sub/components/action/button/overview', 'react')).toBe('https://db-ui.com/core-web/sub/react-storybook?path=/docs/components-dbbutton');
-    });
-    it('returns undefined if url has no components segment', () => {
-        expect(getShowCodeHref('https://db-ui.com/core-web/sub/', 'react')).toBe(undefined);
-    });
-    it('returns undefined for components root route', () => {
-        expect(getShowCodeHref('https://db-ui.com/core-web/components', 'react')).toBe(undefined);
-    });
-});