@xsolla/xui-notification-panel 0.99.0 → 0.101.0
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 +218 -13
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,28 +1,233 @@
|
|
|
1
|
-
#
|
|
1
|
+
# NotificationPanel
|
|
2
2
|
|
|
3
|
-
|
|
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
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
+
npm install @xsolla/xui-notification-panel
|
|
9
|
+
# or
|
|
8
10
|
yarn add @xsolla/xui-notification-panel
|
|
9
11
|
```
|
|
10
12
|
|
|
11
|
-
##
|
|
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
|
+
|
|
57
|
+
export default function ActionNotificationPanel() {
|
|
58
|
+
return (
|
|
59
|
+
<NotificationPanel
|
|
60
|
+
type="warning"
|
|
61
|
+
title="Session Expiring"
|
|
62
|
+
description="Your session will expire in 5 minutes."
|
|
63
|
+
actionLabel="Extend Session"
|
|
64
|
+
actionProps={{ onPress: () => console.log('Session extended') }}
|
|
65
|
+
onClose={() => console.log('Dismissed')}
|
|
66
|
+
/>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### With Button Icon and Divider
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import * as React from 'react';
|
|
75
|
+
import { NotificationPanel } from '@xsolla/xui-notification-panel';
|
|
76
|
+
import { ArrowRight } from '@xsolla/xui-icons-base';
|
|
77
|
+
|
|
78
|
+
export default function IconButtonNotificationPanel() {
|
|
79
|
+
return (
|
|
80
|
+
<NotificationPanel
|
|
81
|
+
type="neutral"
|
|
82
|
+
description="Check our guide to view all webhooks"
|
|
83
|
+
actionLabel="Open documentation"
|
|
84
|
+
actionProps={{
|
|
85
|
+
iconRight: <ArrowRight />,
|
|
86
|
+
divider: true,
|
|
87
|
+
onPress: () => console.log('Open docs'),
|
|
88
|
+
}}
|
|
89
|
+
/>
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Title Only
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
import * as React from 'react';
|
|
98
|
+
import { NotificationPanel } from '@xsolla/xui-notification-panel';
|
|
99
|
+
|
|
100
|
+
export default function TitleOnlyNotificationPanel() {
|
|
101
|
+
return (
|
|
102
|
+
<NotificationPanel
|
|
103
|
+
type="success"
|
|
104
|
+
title="Your payment was successful!"
|
|
105
|
+
/>
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Description Only
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
import * as React from 'react';
|
|
114
|
+
import { NotificationPanel } from '@xsolla/xui-notification-panel';
|
|
115
|
+
|
|
116
|
+
export default function DescriptionOnlyNotificationPanel() {
|
|
117
|
+
return (
|
|
118
|
+
<NotificationPanel
|
|
119
|
+
type="warning"
|
|
120
|
+
description="Please verify your email address to continue using all features."
|
|
121
|
+
/>
|
|
122
|
+
);
|
|
123
|
+
}
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### Without Icon
|
|
12
127
|
|
|
13
128
|
```tsx
|
|
129
|
+
import * as React from 'react';
|
|
14
130
|
import { NotificationPanel } from '@xsolla/xui-notification-panel';
|
|
15
131
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
/>
|
|
132
|
+
export default function NoIconNotificationPanel() {
|
|
133
|
+
return (
|
|
134
|
+
<NotificationPanel
|
|
135
|
+
type="neutral"
|
|
136
|
+
title="Notice"
|
|
137
|
+
description="This notification has no icon."
|
|
138
|
+
showIcon={false}
|
|
139
|
+
/>
|
|
140
|
+
);
|
|
141
|
+
}
|
|
24
142
|
```
|
|
25
143
|
|
|
26
|
-
|
|
144
|
+
### Without Close Button
|
|
145
|
+
|
|
146
|
+
```tsx
|
|
147
|
+
import * as React from 'react';
|
|
148
|
+
import { NotificationPanel } from '@xsolla/xui-notification-panel';
|
|
149
|
+
|
|
150
|
+
export default function PersistentNotificationPanel() {
|
|
151
|
+
return (
|
|
152
|
+
<NotificationPanel
|
|
153
|
+
type="alert"
|
|
154
|
+
title="Critical"
|
|
155
|
+
description="This notification cannot be dismissed."
|
|
156
|
+
showCloseButton={false}
|
|
157
|
+
/>
|
|
158
|
+
);
|
|
159
|
+
}
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
## API Reference
|
|
163
|
+
|
|
164
|
+
### NotificationPanel
|
|
165
|
+
|
|
166
|
+
**NotificationPanel Props:**
|
|
167
|
+
|
|
168
|
+
| Prop | Type | Default | Description |
|
|
169
|
+
| :--- | :--- | :------ | :---------- |
|
|
170
|
+
| type | `"alert" \| "warning" \| "success" \| "neutral" \| "brand"` | `"neutral"` | Visual variant/tone of the notification. |
|
|
171
|
+
| title | `string` | - | Title text (optional). |
|
|
172
|
+
| description | `string` | - | Description text (optional). |
|
|
173
|
+
| showIcon | `boolean` | `true` | Show/hide the icon frame. |
|
|
174
|
+
| icon | `React.ReactNode` | - | Custom icon override (optional). |
|
|
175
|
+
| actionLabel | `string` | - | Action button label (hides button if not provided). |
|
|
176
|
+
| actionProps | `ActionButtonProps` | - | Additional props to pass to the action Button. |
|
|
177
|
+
| showCloseButton | `boolean` | `true` | Show/hide close button. |
|
|
178
|
+
| onClose | `() => void` | - | Close button click handler. |
|
|
179
|
+
| testID | `string` | - | Test ID for testing frameworks. |
|
|
180
|
+
|
|
181
|
+
### ActionButtonProps
|
|
182
|
+
|
|
183
|
+
`ActionButtonProps` extends `ButtonProps` but excludes `children`, `size`, `variant`, and `tone` which are controlled by NotificationPanel.
|
|
184
|
+
|
|
185
|
+
| Prop | Type | Description |
|
|
186
|
+
| :--- | :--- | :---------- |
|
|
187
|
+
| onPress | `() => void` | Button press handler. |
|
|
188
|
+
| iconRight | `React.ReactNode` | Icon to display on the right side of the button. |
|
|
189
|
+
| divider | `boolean` | Show divider between button text and icon. |
|
|
190
|
+
| disabled | `boolean` | Disable the button. |
|
|
191
|
+
|
|
192
|
+
### Type Values
|
|
193
|
+
|
|
194
|
+
| Type | Use Case | Button Tone |
|
|
195
|
+
| :--- | :------- | :---------- |
|
|
196
|
+
| `neutral` | General information, default state | mono |
|
|
197
|
+
| `success` | Positive outcomes, confirmations | brandExtra |
|
|
198
|
+
| `warning` | Caution, requires attention | mono |
|
|
199
|
+
| `alert` | Errors, critical issues | alert |
|
|
200
|
+
| `brand` | Branded messages, promotions | brand |
|
|
201
|
+
|
|
202
|
+
## Theming
|
|
203
|
+
|
|
204
|
+
```typescript
|
|
205
|
+
// Type-specific colors accessed via theme
|
|
206
|
+
theme.colors.overlay.alert // Alert background
|
|
207
|
+
theme.colors.overlay.warning // Warning background
|
|
208
|
+
theme.colors.overlay.success // Success background
|
|
209
|
+
theme.colors.overlay.mono // Neutral background
|
|
210
|
+
theme.colors.overlay.brand // Brand background
|
|
211
|
+
|
|
212
|
+
// Icon frame backgrounds
|
|
213
|
+
theme.colors.background.warning.primary // Warning icon frame
|
|
214
|
+
theme.colors.background.success.primary // Success icon frame
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
## Accessibility
|
|
218
|
+
|
|
219
|
+
- Uses `role="status"` for screen reader announcements
|
|
220
|
+
- Includes `aria-label` with notification type
|
|
221
|
+
- Close button has `aria-label="Close notification"`
|
|
222
|
+
- Action buttons are keyboard accessible and focusable
|
|
223
|
+
- Icons are decorative and hidden from screen readers
|
|
224
|
+
|
|
225
|
+
## Comparison with Notification
|
|
27
226
|
|
|
28
|
-
|
|
227
|
+
| Feature | Notification | NotificationPanel |
|
|
228
|
+
| :------ | :----------- | :---------------- |
|
|
229
|
+
| Use case | Toast popups, temporary messages | Inline banners, persistent messages |
|
|
230
|
+
| Display | Floating overlay | Full-width inline |
|
|
231
|
+
| Layout | Compact, stacked | Horizontal bar |
|
|
232
|
+
| Icon | Inline with text | Separate colored frame |
|
|
233
|
+
| 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.101.0",
|
|
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.101.0",
|
|
17
|
+
"@xsolla/xui-core": "0.101.0",
|
|
18
|
+
"@xsolla/xui-icons-base": "0.101.0",
|
|
19
|
+
"@xsolla/xui-primitives-core": "0.101.0"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"react": ">=16.8.0",
|