@xsolla/xui-b2b-notification-panel 0.148.0 → 0.148.2

package/README.md

@@ -0,0 +1,161 @@
+# B2B 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.
+
+> **See also:** [`@xsolla/xui-notification-panel`](./notification-panel.md) for the base (non-B2B) variant.
+
+## Installation
+
+```bash
+npm install @xsolla/xui-b2b-notification-panel
+# or
+yarn add @xsolla/xui-b2b-notification-panel
+```
+
+## Demo
+
+### Basic
+
+```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."
+    />
+  );
+}
+```
+
+### 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." />
+```
+
+### With Action Button
+
+The `actionButton` prop accepts any `Button` or `IconButton`. `tone`, `size`, and `variant` are injected automatically to match the notification type.
+
+```tsx
+import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
+import { Button } from '@xsolla/xui-button';
+
+<NotificationPanel
+  type="warning"
+  title="Session expiring"
+  description="Your session will expire in 5 minutes."
+  actionButton={
+    <Button onPress={() => extendSession()}>
+      Extend session
+    </Button>
+  }
+  onClose={() => dismiss()}
+/>
+```
+
+### With IconButton Action
+
+```tsx
+import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
+import { IconButton } from '@xsolla/xui-button';
+import { ArrowRight } from '@xsolla/xui-icons-base';
+
+<NotificationPanel
+  type="neutral"
+  description="View all available webhooks in the documentation."
+  actionButton={
+    <IconButton icon={<ArrowRight />} onPress={() => openDocs()} />
+  }
+  showCloseButton={false}
+/>
+```
+
+### Persistent (No Close Button)
+
+```tsx
+<NotificationPanel
+  type="alert"
+  title="Payment failed"
+  description="Please update your billing information to continue."
+  showCloseButton={false}
+/>
+```
+
+### Without Icon Frame
+
+```tsx
+<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.
+
+```tsx
+<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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-b2b-notification-panel",
-  "version": "0.148.0",
+  "version": "0.148.2",
   "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.148.0",
-    "@xsolla/xui-core": "0.148.0",
-    "@xsolla/xui-icons-base": "0.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0",
-    "@xsolla/xui-typography": "0.148.0"
+    "@xsolla/xui-button": "0.148.2",
+    "@xsolla/xui-core": "0.148.2",
+    "@xsolla/xui-icons-base": "0.148.2",
+    "@xsolla/xui-primitives-core": "0.148.2",
+    "@xsolla/xui-typography": "0.148.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",