@xsolla/xui-b2b-notification-panel 0.150.0 → 0.151.0

package/README.md

@@ -1,49 +1,83 @@
-# B2B NotificationPanel
+# NotificationPanel
 
-A full-width horizontal notification bar for persistent inline feedback within B2B page layouts. Unlike toast notifications, `NotificationPanel` stays in place until explicitly dismissed and is designed to sit inline within a page or panel — not as a floating overlay.
+A full-width horizontal notification bar for persistent inline feedback within B2B page layouts. Stays in place until dismissed and is designed to sit inline within a page or panel rather than as a floating overlay.
 
-> **See also:** [`@xsolla/xui-notification-panel`](./notification-panel.md) for the base (non-B2B) variant.
+For the base (non-B2B) variant, see [`@xsolla/xui-notification-panel`](./notification-panel.md).
 
 ## Installation
 
 ```bash
 npm install @xsolla/xui-b2b-notification-panel
-# or
-yarn add @xsolla/xui-b2b-notification-panel
 ```
 
-## Demo
+## Imports
 
-### Basic
+```tsx
+import {
+  NotificationPanel,
+  type NotificationPanelProps,
+  type ActionButtonElement,
+} from '@xsolla/xui-b2b-notification-panel';
+```
+
+## Quick start
 
 ```tsx
-import React from 'react';
 import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
 
-export default function BasicNotificationPanel() {
-  return (
-    <NotificationPanel
-      type="success"
-      title="Changes saved"
-      description="Your settings have been updated successfully."
-    />
-  );
-}
+<NotificationPanel
+  type="success"
+  title="Changes saved"
+  description="Your settings have been updated successfully."
+/>;
+```
+
+## API Reference
+
+### `<NotificationPanel>`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `type` | `"alert" \| "warning" \| "success" \| "neutral" \| "brand"` | `"neutral"` | Visual tone of the panel. Controls background, default icon, and `role`. |
+| `title` | `string` | — | Bold title text. |
+| `description` | `string` | — | Secondary description text. |
+| `showIcon` | `boolean` | `true` | Show or hide the icon frame on the left. |
+| `icon` | `ReactNode` | — | Custom icon to replace the default type icon. |
+| `actionButton` | `ActionButtonElement` | — | A `Button` or `IconButton` element. `size="xs"` and `variant="secondary"` are injected via `cloneElement`; **`tone` is not** — set it yourself if needed. |
+| `showCloseButton` | `boolean` | `true` | Show or hide the dismiss (×) button. |
+| `onClose` | `() => void` | — | Called when the close button is pressed. |
+| `closeButtonAlign` | `"top" \| "center"` | `"top"` | Vertical alignment of the close button. Use `"center"` for single-line panels. |
+| `testID` | `string` | — | Test ID for testing frameworks. |
+
+Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
+
+### `ActionButtonElement`
+
+```ts
+type ActionButtonElement = React.ReactElement<ButtonProps | IconButtonProps>;
 ```
 
-### All Types
+The element passed to `actionButton`. Only `size` and `variant` are overridden when the panel renders it; everything else (including `tone`, `onPress`, `icon`, etc.) is forwarded as authored.
+
+## Examples
+
+### All types
 
 ```tsx
-<NotificationPanel type="neutral" title="Info"    description="Informational message." />
-<NotificationPanel type="success" title="Success" description="Operation completed." />
-<NotificationPanel type="warning" title="Warning" description="Please review before proceeding." />
-<NotificationPanel type="alert"   title="Error"   description="Something went wrong." />
-<NotificationPanel type="brand"   title="New"     description="A branded announcement." />
+import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
+
+<>
+  <NotificationPanel type="neutral" title="Info"    description="Informational message." />
+  <NotificationPanel type="success" title="Success" description="Operation completed." />
+  <NotificationPanel type="warning" title="Warning" description="Please review before proceeding." />
+  <NotificationPanel type="alert"   title="Error"   description="Something went wrong." />
+  <NotificationPanel type="brand"   title="New"     description="A branded announcement." />
+</>;
 ```
 
-### With Action Button
+### With action button
 
-The `actionButton` prop accepts any `Button` or `IconButton`. `tone`, `size`, and `variant` are injected automatically to match the notification type.
+Pick a `tone` that complements the panel's `type` — the panel does not auto-tone the button.
 
 ```tsx
 import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
@@ -54,15 +88,15 @@ import { Button } from '@xsolla/xui-button';
   title="Session expiring"
   description="Your session will expire in 5 minutes."
   actionButton={
-    <Button onPress={() => extendSession()}>
+    <Button tone="mono" onPress={() => extendSession()}>
       Extend session
     </Button>
   }
   onClose={() => dismiss()}
-/>
+/>;
 ```
 
-### With IconButton Action
+### With IconButton action
 
 ```tsx
 import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
@@ -73,89 +107,54 @@ import { ArrowRight } from '@xsolla/xui-icons-base';
   type="neutral"
   description="View all available webhooks in the documentation."
   actionButton={
-    <IconButton icon={<ArrowRight />} onPress={() => openDocs()} />
+    <IconButton tone="mono" icon={<ArrowRight aria-hidden />} onPress={() => openDocs()} />
   }
   showCloseButton={false}
-/>
+/>;
 ```
 
-### Persistent (No Close Button)
+### Persistent (no close button)
 
 ```tsx
+import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
+
 <NotificationPanel
   type="alert"
   title="Payment failed"
   description="Please update your billing information to continue."
   showCloseButton={false}
-/>
+/>;
 ```
 
-### Without Icon Frame
+### Without icon frame
 
 ```tsx
+import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
+
 <NotificationPanel
   type="neutral"
   title="Notice"
   description="This notification has no icon."
   showIcon={false}
-/>
+/>;
 ```
 
-### Center-Aligned Close Button
-
-Use `closeButtonAlign="center"` for single-line notifications where vertically centered alignment looks better.
+### Center-aligned close button
 
 ```tsx
+import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
+
 <NotificationPanel
   type="success"
   title="Saved"
   closeButtonAlign="center"
   onClose={() => dismiss()}
-/>
+/>;
 ```
 
-## API Reference
-
-### NotificationPanel
-
-| Prop | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| `type` | `"alert" \| "warning" \| "success" \| "neutral" \| "brand"` | `"neutral"` | Visual tone of the panel. Controls background color, icon, and button tone. |
-| `title` | `string` | — | Bold title text (optional). |
-| `description` | `string` | — | Secondary description text (optional). |
-| `showIcon` | `boolean` | `true` | Show or hide the icon frame on the left. |
-| `icon` | `ReactNode` | — | Custom icon to replace the default type icon. |
-| `actionButton` | `ReactElement` | — | Action button (`Button` or `IconButton`). `tone`, `size="xs"`, and `variant="secondary"` are auto-applied. |
-| `showCloseButton` | `boolean` | `true` | Show or hide the dismiss (×) button. |
-| `onClose` | `() => void` | — | Called when the close button is pressed. |
-| `closeButtonAlign` | `"top" \| "center"` | `"top"` | Vertical alignment of the close button. Use `"center"` for single-line panels. |
-| `testID` | `string` | — | Test ID for testing frameworks. |
-| `themeMode` | `string` | — | Override the global theme mode for this component. |
-| `themeProductContext` | `string` | — | Override the global product context for this component. |
-
-### Auto-Applied Button Props
-
-When an element is passed to `actionButton`, the following props are injected automatically:
-
-| Prop | Value |
-| :--- | :---- |
-| `size` | `"xs"` |
-| `variant` | `"secondary"` |
-| `tone` | Based on `type` (see table below) |
-
-### Type → Button Tone Mapping
-
-| Type | Button Tone |
-| :--- | :---------- |
-| `neutral` | `mono` |
-| `success` | `brandExtra` |
-| `warning` | `mono` |
-| `alert` | `alert` |
-| `brand` | `brand` |
-
 ## Accessibility
 
 - `role="alert"` for `type="alert"`; `role="status"` for all other types.
-- `aria-label` set to `"<type> notification"` on the root element.
-- Close button has `aria-label="Close notification"`.
-- Icons are decorative and hidden from screen readers.
+- `aria-label` on the root is `"<type> notification"` (e.g. `"warning notification"`).
+- The close button is an `IconButton` with `aria-label="Close notification"`.
+- The default type icons are decorative — pass `aria-hidden` on any custom `icon` you supply.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-b2b-notification-panel",
-  "version": "0.150.0",
+  "version": "0.151.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,11 +13,11 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-button": "0.150.0",
-    "@xsolla/xui-core": "0.150.0",
-    "@xsolla/xui-icons-base": "0.150.0",
-    "@xsolla/xui-primitives-core": "0.150.0",
-    "@xsolla/xui-typography": "0.150.0"
+    "@xsolla/xui-button": "0.151.0",
+    "@xsolla/xui-core": "0.151.0",
+    "@xsolla/xui-icons-base": "0.151.0",
+    "@xsolla/xui-primitives-core": "0.151.0",
+    "@xsolla/xui-typography": "0.151.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",