@xsolla/xui-notification-panel 0.141.1 → 0.148.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +265 -0
- package/package.json +5 -5
package/README.md
ADDED
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
# NotificationPanel
|
|
2
|
+
|
|
3
|
+
A full-width horizontal notification bar designed for persistent inline notifications within page layouts. Unlike the Notification component (designed for toast popups), NotificationPanel is intended for contextual feedback messages that should remain visible until dismissed.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @xsolla/xui-notification-panel
|
|
9
|
+
# or
|
|
10
|
+
yarn add @xsolla/xui-notification-panel
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Demo
|
|
14
|
+
|
|
15
|
+
### Basic NotificationPanel
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import * as React from 'react';
|
|
19
|
+
import { NotificationPanel } from '@xsolla/xui-notification-panel';
|
|
20
|
+
|
|
21
|
+
export default function BasicNotificationPanel() {
|
|
22
|
+
return (
|
|
23
|
+
<NotificationPanel
|
|
24
|
+
type="success"
|
|
25
|
+
title="Success!"
|
|
26
|
+
description="Your changes have been saved."
|
|
27
|
+
/>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### NotificationPanel Types
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import * as React from 'react';
|
|
36
|
+
import { NotificationPanel } from '@xsolla/xui-notification-panel';
|
|
37
|
+
|
|
38
|
+
export default function NotificationPanelTypes() {
|
|
39
|
+
return (
|
|
40
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
41
|
+
<NotificationPanel type="neutral" title="Info" description="This is an informational message." />
|
|
42
|
+
<NotificationPanel type="success" title="Success" description="Operation completed successfully." />
|
|
43
|
+
<NotificationPanel type="warning" title="Warning" description="Please review before proceeding." />
|
|
44
|
+
<NotificationPanel type="alert" title="Error" description="Something went wrong." />
|
|
45
|
+
<NotificationPanel type="brand" title="Brand" description="A branded notification message." />
|
|
46
|
+
</div>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### With Action Button
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import * as React from 'react';
|
|
55
|
+
import { NotificationPanel } from '@xsolla/xui-notification-panel';
|
|
56
|
+
import { Button } from '@xsolla/xui-button';
|
|
57
|
+
|
|
58
|
+
export default function ActionNotificationPanel() {
|
|
59
|
+
return (
|
|
60
|
+
<NotificationPanel
|
|
61
|
+
type="warning"
|
|
62
|
+
title="Session Expiring"
|
|
63
|
+
description="Your session will expire in 5 minutes."
|
|
64
|
+
actionButton={
|
|
65
|
+
<Button onPress={() => console.log('Session extended')}>
|
|
66
|
+
Extend Session
|
|
67
|
+
</Button>
|
|
68
|
+
}
|
|
69
|
+
onClose={() => console.log('Dismissed')}
|
|
70
|
+
/>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### With Button Icon Right
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
import * as React from 'react';
|
|
79
|
+
import { NotificationPanel } from '@xsolla/xui-notification-panel';
|
|
80
|
+
import { Button } from '@xsolla/xui-button';
|
|
81
|
+
import { ArrowRight } from '@xsolla/xui-icons';
|
|
82
|
+
|
|
83
|
+
export default function IconButtonNotificationPanel() {
|
|
84
|
+
return (
|
|
85
|
+
<NotificationPanel
|
|
86
|
+
type="neutral"
|
|
87
|
+
description="Check our guide to view all webhooks"
|
|
88
|
+
actionButton={
|
|
89
|
+
<Button
|
|
90
|
+
iconRight={<ArrowRight />}
|
|
91
|
+
onPress={() => console.log('Open docs')}
|
|
92
|
+
>
|
|
93
|
+
Open documentation
|
|
94
|
+
</Button>
|
|
95
|
+
}
|
|
96
|
+
/>
|
|
97
|
+
);
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### With IconButton
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
import * as React from 'react';
|
|
105
|
+
import { NotificationPanel } from '@xsolla/xui-notification-panel';
|
|
106
|
+
import { IconButton } from '@xsolla/xui-button';
|
|
107
|
+
import { ArrowRight } from '@xsolla/xui-icons';
|
|
108
|
+
|
|
109
|
+
export default function IconButtonNotificationPanel() {
|
|
110
|
+
return (
|
|
111
|
+
<NotificationPanel
|
|
112
|
+
type="neutral"
|
|
113
|
+
title="Quick action available"
|
|
114
|
+
description="Click the arrow to view more details"
|
|
115
|
+
actionButton={
|
|
116
|
+
<IconButton
|
|
117
|
+
icon={<ArrowRight />}
|
|
118
|
+
onPress={() => console.log('Navigate')}
|
|
119
|
+
/>
|
|
120
|
+
}
|
|
121
|
+
showCloseButton={false}
|
|
122
|
+
/>
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### Title Only
|
|
128
|
+
|
|
129
|
+
```tsx
|
|
130
|
+
import * as React from 'react';
|
|
131
|
+
import { NotificationPanel } from '@xsolla/xui-notification-panel';
|
|
132
|
+
|
|
133
|
+
export default function TitleOnlyNotificationPanel() {
|
|
134
|
+
return (
|
|
135
|
+
<NotificationPanel
|
|
136
|
+
type="success"
|
|
137
|
+
title="Your payment was successful!"
|
|
138
|
+
/>
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### Description Only
|
|
144
|
+
|
|
145
|
+
```tsx
|
|
146
|
+
import * as React from 'react';
|
|
147
|
+
import { NotificationPanel } from '@xsolla/xui-notification-panel';
|
|
148
|
+
|
|
149
|
+
export default function DescriptionOnlyNotificationPanel() {
|
|
150
|
+
return (
|
|
151
|
+
<NotificationPanel
|
|
152
|
+
type="warning"
|
|
153
|
+
description="Please verify your email address to continue using all features."
|
|
154
|
+
/>
|
|
155
|
+
);
|
|
156
|
+
}
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### Without Icon
|
|
160
|
+
|
|
161
|
+
```tsx
|
|
162
|
+
import * as React from 'react';
|
|
163
|
+
import { NotificationPanel } from '@xsolla/xui-notification-panel';
|
|
164
|
+
|
|
165
|
+
export default function NoIconNotificationPanel() {
|
|
166
|
+
return (
|
|
167
|
+
<NotificationPanel
|
|
168
|
+
type="neutral"
|
|
169
|
+
title="Notice"
|
|
170
|
+
description="This notification has no icon."
|
|
171
|
+
showIcon={false}
|
|
172
|
+
/>
|
|
173
|
+
);
|
|
174
|
+
}
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
### Without Close Button
|
|
178
|
+
|
|
179
|
+
```tsx
|
|
180
|
+
import * as React from 'react';
|
|
181
|
+
import { NotificationPanel } from '@xsolla/xui-notification-panel';
|
|
182
|
+
|
|
183
|
+
export default function PersistentNotificationPanel() {
|
|
184
|
+
return (
|
|
185
|
+
<NotificationPanel
|
|
186
|
+
type="alert"
|
|
187
|
+
title="Critical"
|
|
188
|
+
description="This notification cannot be dismissed."
|
|
189
|
+
showCloseButton={false}
|
|
190
|
+
/>
|
|
191
|
+
);
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
## API Reference
|
|
196
|
+
|
|
197
|
+
### NotificationPanel
|
|
198
|
+
|
|
199
|
+
**NotificationPanel Props:**
|
|
200
|
+
|
|
201
|
+
| Prop | Type | Default | Description |
|
|
202
|
+
| :--- | :--- | :------ | :---------- |
|
|
203
|
+
| type | `"alert" \| "warning" \| "success" \| "neutral" \| "brand"` | `"neutral"` | Visual variant/tone of the notification. |
|
|
204
|
+
| title | `string` | - | Title text (optional). |
|
|
205
|
+
| description | `string` | - | Description text (optional). |
|
|
206
|
+
| showIcon | `boolean` | `true` | Show/hide the icon frame. |
|
|
207
|
+
| icon | `React.ReactNode` | - | Custom icon override (optional). |
|
|
208
|
+
| actionButton | `React.ReactElement` | - | Action button (Button or IconButton). `tone`, `size`, and `variant` are auto-applied. |
|
|
209
|
+
| showCloseButton | `boolean` | `true` | Show/hide close button. |
|
|
210
|
+
| onClose | `() => void` | - | Close button click handler. |
|
|
211
|
+
| closeButtonAlign | `"top" \| "center"` | `"top"` | Vertical alignment of the close button. Use `"center"` for single-line notifications where centered alignment is preferred. |
|
|
212
|
+
| testID | `string` | - | Test ID for testing frameworks. |
|
|
213
|
+
|
|
214
|
+
### Auto-Applied Button Props
|
|
215
|
+
|
|
216
|
+
When passing a `Button` or `IconButton` to `actionButton`, the following props are automatically injected:
|
|
217
|
+
|
|
218
|
+
| Prop | Value | Description |
|
|
219
|
+
| :--- | :---- | :---------- |
|
|
220
|
+
| tone | Based on `type` | Matches notification type (see table below). |
|
|
221
|
+
| size | `"xs"` | Extra small size for compact appearance. |
|
|
222
|
+
| variant | `"secondary"` | Secondary button variant. |
|
|
223
|
+
|
|
224
|
+
### Type Values
|
|
225
|
+
|
|
226
|
+
| Type | Use Case | Button Tone |
|
|
227
|
+
| :--- | :------- | :---------- |
|
|
228
|
+
| `neutral` | General information, default state | mono |
|
|
229
|
+
| `success` | Positive outcomes, confirmations | brandExtra |
|
|
230
|
+
| `warning` | Caution, requires attention | mono |
|
|
231
|
+
| `alert` | Errors, critical issues | alert |
|
|
232
|
+
| `brand` | Branded messages, promotions | brand |
|
|
233
|
+
|
|
234
|
+
## Theming
|
|
235
|
+
|
|
236
|
+
```typescript
|
|
237
|
+
// Type-specific colors accessed via theme
|
|
238
|
+
theme.colors.overlay.alert // Alert background
|
|
239
|
+
theme.colors.overlay.warning // Warning background
|
|
240
|
+
theme.colors.overlay.success // Success background
|
|
241
|
+
theme.colors.overlay.mono // Neutral background
|
|
242
|
+
theme.colors.overlay.brand // Brand background
|
|
243
|
+
|
|
244
|
+
// Icon frame backgrounds
|
|
245
|
+
theme.colors.background.warning.primary // Warning icon frame
|
|
246
|
+
theme.colors.background.success.primary // Success icon frame
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
## Accessibility
|
|
250
|
+
|
|
251
|
+
- Uses `role="status"` for screen reader announcements
|
|
252
|
+
- Includes `aria-label` with notification type
|
|
253
|
+
- Close button has `aria-label="Close notification"`
|
|
254
|
+
- Action buttons are keyboard accessible and focusable
|
|
255
|
+
- Icons are decorative and hidden from screen readers
|
|
256
|
+
|
|
257
|
+
## Comparison with Notification
|
|
258
|
+
|
|
259
|
+
| Feature | Notification | NotificationPanel |
|
|
260
|
+
| :------ | :----------- | :---------------- |
|
|
261
|
+
| Use case | Toast popups, temporary messages | Inline banners, persistent messages |
|
|
262
|
+
| Display | Floating overlay | Full-width inline |
|
|
263
|
+
| Layout | Compact, stacked | Horizontal bar |
|
|
264
|
+
| Icon | Inline with text | Separate colored frame |
|
|
265
|
+
| Types | 4 tones (neutral, success, warning, alert) | 5 types (+ brand) |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-notification-panel",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.148.2",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-button": "0.
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-icons-base": "0.
|
|
19
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-button": "0.148.2",
|
|
17
|
+
"@xsolla/xui-core": "0.148.2",
|
|
18
|
+
"@xsolla/xui-icons-base": "0.148.2",
|
|
19
|
+
"@xsolla/xui-primitives-core": "0.148.2"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"react": ">=16.8.0",
|