@patternfly/react-core 4.234.1 → 4.234.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/CHANGELOG.md +8 -0
- package/dist/umd/react-core.css +147 -147
- package/package.json +5 -5
- package/src/components/NotificationDrawer/examples/NotificationDrawer.md +3 -708
- package/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx +185 -0
- package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx +337 -0
- package/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx +185 -0
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Dropdown,
|
|
4
|
+
DropdownItem,
|
|
5
|
+
DropdownPosition,
|
|
6
|
+
DropdownDirection,
|
|
7
|
+
DropdownSeparator,
|
|
8
|
+
KebabToggle,
|
|
9
|
+
NotificationDrawer,
|
|
10
|
+
NotificationDrawerBody,
|
|
11
|
+
NotificationDrawerHeader,
|
|
12
|
+
NotificationDrawerList,
|
|
13
|
+
NotificationDrawerListItem,
|
|
14
|
+
NotificationDrawerListItemBody,
|
|
15
|
+
NotificationDrawerListItemHeader
|
|
16
|
+
} from '@patternfly/react-core';
|
|
17
|
+
|
|
18
|
+
export const NotificationDrawerBasic: React.FunctionComponent = () => {
|
|
19
|
+
const [isOpenMap, setIsOpenMap] = React.useState(new Array(7).fill(false));
|
|
20
|
+
|
|
21
|
+
const onToggle = (index: number) => (isOpen: boolean) => {
|
|
22
|
+
const newState = [...isOpenMap.slice(0, index), isOpen, ...isOpenMap.slice(index + 1)];
|
|
23
|
+
setIsOpenMap(newState);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const onSelect = () => {
|
|
27
|
+
setIsOpenMap(new Array(7).fill(false));
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
const onDrawerClose = () => {
|
|
31
|
+
setIsOpenMap(new Array(7).fill(false));
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = isOpenMap;
|
|
35
|
+
|
|
36
|
+
const dropdownItems = [
|
|
37
|
+
<DropdownItem key="link">Link</DropdownItem>,
|
|
38
|
+
<DropdownItem key="action" component="button">
|
|
39
|
+
Action
|
|
40
|
+
</DropdownItem>,
|
|
41
|
+
<DropdownSeparator key="separator" />,
|
|
42
|
+
<DropdownItem key="disabled link" isDisabled>
|
|
43
|
+
Disabled link
|
|
44
|
+
</DropdownItem>
|
|
45
|
+
];
|
|
46
|
+
return (
|
|
47
|
+
<NotificationDrawer>
|
|
48
|
+
<NotificationDrawerHeader count={3} onClose={onDrawerClose}>
|
|
49
|
+
<Dropdown
|
|
50
|
+
onSelect={onSelect}
|
|
51
|
+
toggle={<KebabToggle onToggle={onToggle(0)} id="basic-kebab-toggle" />}
|
|
52
|
+
isOpen={isOpen0}
|
|
53
|
+
isPlain
|
|
54
|
+
dropdownItems={dropdownItems}
|
|
55
|
+
id="basic-notification-0"
|
|
56
|
+
position={DropdownPosition.right}
|
|
57
|
+
/>
|
|
58
|
+
</NotificationDrawerHeader>
|
|
59
|
+
<NotificationDrawerBody>
|
|
60
|
+
<NotificationDrawerList>
|
|
61
|
+
<NotificationDrawerListItem variant="info">
|
|
62
|
+
<NotificationDrawerListItemHeader
|
|
63
|
+
variant="info"
|
|
64
|
+
title="Unread info notification title"
|
|
65
|
+
srTitle="Info notification:"
|
|
66
|
+
>
|
|
67
|
+
<Dropdown
|
|
68
|
+
position={DropdownPosition.right}
|
|
69
|
+
onSelect={onSelect}
|
|
70
|
+
toggle={<KebabToggle onToggle={onToggle(1)} id="basic-toggle-id-1" />}
|
|
71
|
+
isOpen={isOpen1}
|
|
72
|
+
isPlain
|
|
73
|
+
dropdownItems={dropdownItems}
|
|
74
|
+
id="basic-notification-1"
|
|
75
|
+
/>
|
|
76
|
+
</NotificationDrawerListItemHeader>
|
|
77
|
+
<NotificationDrawerListItemBody timestamp="5 minutes ago">
|
|
78
|
+
This is an info notification description.
|
|
79
|
+
</NotificationDrawerListItemBody>
|
|
80
|
+
</NotificationDrawerListItem>
|
|
81
|
+
<NotificationDrawerListItem variant="danger">
|
|
82
|
+
<NotificationDrawerListItemHeader
|
|
83
|
+
variant="danger"
|
|
84
|
+
title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
|
|
85
|
+
srTitle="Danger notification:"
|
|
86
|
+
>
|
|
87
|
+
<Dropdown
|
|
88
|
+
position={DropdownPosition.right}
|
|
89
|
+
onSelect={onSelect}
|
|
90
|
+
toggle={<KebabToggle onToggle={onToggle(2)} id="basic-toggle-id-2" />}
|
|
91
|
+
isOpen={isOpen2}
|
|
92
|
+
isPlain
|
|
93
|
+
dropdownItems={dropdownItems}
|
|
94
|
+
id="basic-notification-2"
|
|
95
|
+
/>
|
|
96
|
+
</NotificationDrawerListItemHeader>
|
|
97
|
+
<NotificationDrawerListItemBody timestamp="10 minutes ago">
|
|
98
|
+
This is a danger notification description. This is a long description to show how the title will wrap if
|
|
99
|
+
it is long and wraps to multiple lines.
|
|
100
|
+
</NotificationDrawerListItemBody>
|
|
101
|
+
</NotificationDrawerListItem>
|
|
102
|
+
<NotificationDrawerListItem variant="danger">
|
|
103
|
+
<NotificationDrawerListItemHeader
|
|
104
|
+
truncateTitle={1}
|
|
105
|
+
variant="danger"
|
|
106
|
+
title="Unread danger notification title. This is a long title to show how the title will be truncated if it is long and will be shown in a single line."
|
|
107
|
+
srTitle="Danger notification:"
|
|
108
|
+
>
|
|
109
|
+
<Dropdown
|
|
110
|
+
position={DropdownPosition.right}
|
|
111
|
+
onSelect={onSelect}
|
|
112
|
+
toggle={<KebabToggle onToggle={onToggle(3)} id="basic-toggle-id-3" />}
|
|
113
|
+
isOpen={isOpen3}
|
|
114
|
+
isPlain
|
|
115
|
+
dropdownItems={dropdownItems}
|
|
116
|
+
id="basic-notification-3"
|
|
117
|
+
/>
|
|
118
|
+
</NotificationDrawerListItemHeader>
|
|
119
|
+
<NotificationDrawerListItemBody timestamp="10 minutes ago">
|
|
120
|
+
This is a danger notification description. This is a long description to show how the title will wrap if
|
|
121
|
+
it is long and wraps to multiple lines.
|
|
122
|
+
</NotificationDrawerListItemBody>
|
|
123
|
+
</NotificationDrawerListItem>
|
|
124
|
+
<NotificationDrawerListItem variant="warning" isRead>
|
|
125
|
+
<NotificationDrawerListItemHeader
|
|
126
|
+
variant="warning"
|
|
127
|
+
title="Read warning notification title"
|
|
128
|
+
srTitle="Warning notification:"
|
|
129
|
+
>
|
|
130
|
+
<Dropdown
|
|
131
|
+
position={DropdownPosition.right}
|
|
132
|
+
onSelect={onSelect}
|
|
133
|
+
toggle={<KebabToggle onToggle={onToggle(4)} id="basic-toggle-id-4" />}
|
|
134
|
+
isOpen={isOpen4}
|
|
135
|
+
isPlain
|
|
136
|
+
dropdownItems={dropdownItems}
|
|
137
|
+
id="basic-notification-4"
|
|
138
|
+
/>
|
|
139
|
+
</NotificationDrawerListItemHeader>
|
|
140
|
+
<NotificationDrawerListItemBody timestamp="20 minutes ago">
|
|
141
|
+
This is a warning notification description.
|
|
142
|
+
</NotificationDrawerListItemBody>
|
|
143
|
+
</NotificationDrawerListItem>
|
|
144
|
+
<NotificationDrawerListItem variant="success" isRead>
|
|
145
|
+
<NotificationDrawerListItemHeader
|
|
146
|
+
variant="success"
|
|
147
|
+
title="Read success notification title"
|
|
148
|
+
srTitle="Success notification:"
|
|
149
|
+
>
|
|
150
|
+
<Dropdown
|
|
151
|
+
position={DropdownPosition.right}
|
|
152
|
+
direction={DropdownDirection.up}
|
|
153
|
+
onSelect={onSelect}
|
|
154
|
+
toggle={<KebabToggle onToggle={onToggle(5)} id="basic-toggle-id-5" />}
|
|
155
|
+
isOpen={isOpen5}
|
|
156
|
+
isPlain
|
|
157
|
+
dropdownItems={dropdownItems}
|
|
158
|
+
id="basic-notification-5"
|
|
159
|
+
/>
|
|
160
|
+
</NotificationDrawerListItemHeader>
|
|
161
|
+
<NotificationDrawerListItemBody timestamp="30 minutes ago">
|
|
162
|
+
This is a success notification description.
|
|
163
|
+
</NotificationDrawerListItemBody>
|
|
164
|
+
</NotificationDrawerListItem>
|
|
165
|
+
<NotificationDrawerListItem isRead>
|
|
166
|
+
<NotificationDrawerListItemHeader title="Read (default) notification title" srTitle="notification:">
|
|
167
|
+
<Dropdown
|
|
168
|
+
position={DropdownPosition.right}
|
|
169
|
+
onSelect={onSelect}
|
|
170
|
+
toggle={<KebabToggle onToggle={onToggle(6)} id="basic-toggle-id-6" />}
|
|
171
|
+
isOpen={isOpen6}
|
|
172
|
+
isPlain
|
|
173
|
+
dropdownItems={dropdownItems}
|
|
174
|
+
id="basic-notification-6"
|
|
175
|
+
/>
|
|
176
|
+
</NotificationDrawerListItemHeader>
|
|
177
|
+
<NotificationDrawerListItemBody timestamp="35 minutes ago">
|
|
178
|
+
This is a default notification description.
|
|
179
|
+
</NotificationDrawerListItemBody>
|
|
180
|
+
</NotificationDrawerListItem>
|
|
181
|
+
</NotificationDrawerList>
|
|
182
|
+
</NotificationDrawerBody>
|
|
183
|
+
</NotificationDrawer>
|
|
184
|
+
);
|
|
185
|
+
};
|
|
@@ -0,0 +1,337 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Button,
|
|
4
|
+
Dropdown,
|
|
5
|
+
DropdownItem,
|
|
6
|
+
DropdownPosition,
|
|
7
|
+
DropdownDirection,
|
|
8
|
+
DropdownSeparator,
|
|
9
|
+
EmptyState,
|
|
10
|
+
EmptyStateBody,
|
|
11
|
+
EmptyStateIcon,
|
|
12
|
+
EmptyStatePrimary,
|
|
13
|
+
KebabToggle,
|
|
14
|
+
NotificationDrawer,
|
|
15
|
+
NotificationDrawerBody,
|
|
16
|
+
NotificationDrawerHeader,
|
|
17
|
+
NotificationDrawerGroup,
|
|
18
|
+
NotificationDrawerGroupList,
|
|
19
|
+
NotificationDrawerList,
|
|
20
|
+
NotificationDrawerListItem,
|
|
21
|
+
NotificationDrawerListItemBody,
|
|
22
|
+
NotificationDrawerListItemHeader,
|
|
23
|
+
Title,
|
|
24
|
+
EmptyStateVariant
|
|
25
|
+
} from '@patternfly/react-core';
|
|
26
|
+
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
|
|
27
|
+
|
|
28
|
+
export const NotificationDrawerGroups: React.FunctionComponent = () => {
|
|
29
|
+
const [firstGroupExpanded, setFirstGroupExpanded] = React.useState(false);
|
|
30
|
+
const [secondGroupExpanded, setSecondGroupExpanded] = React.useState(true);
|
|
31
|
+
const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false);
|
|
32
|
+
const [isOpenMap, setIsOpenMap] = React.useState({});
|
|
33
|
+
|
|
34
|
+
const onToggle = (id: string, isOpen: boolean) => {
|
|
35
|
+
setIsOpenMap({ [id]: isOpen });
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
const onSelect = () => {
|
|
39
|
+
setIsOpenMap({});
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
const toggleFirstDrawer = (_event: any, value: boolean) => {
|
|
43
|
+
setFirstGroupExpanded(value);
|
|
44
|
+
setSecondGroupExpanded(false);
|
|
45
|
+
setThirdGroupExpanded(false);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const toggleSecondDrawer = (_event: any, value: boolean) => {
|
|
49
|
+
setSecondGroupExpanded(value);
|
|
50
|
+
setFirstGroupExpanded(false);
|
|
51
|
+
setThirdGroupExpanded(false);
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const toggleThirdDrawer = (_event: any, value: boolean) => {
|
|
55
|
+
setThirdGroupExpanded(value);
|
|
56
|
+
setSecondGroupExpanded(false);
|
|
57
|
+
setFirstGroupExpanded(false);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const dropdownItems = [
|
|
61
|
+
<DropdownItem key="link">Link</DropdownItem>,
|
|
62
|
+
<DropdownItem key="action" component="button">
|
|
63
|
+
Action
|
|
64
|
+
</DropdownItem>,
|
|
65
|
+
<DropdownSeparator key="separator" />,
|
|
66
|
+
<DropdownItem key="disabled link" isDisabled>
|
|
67
|
+
Disabled link
|
|
68
|
+
</DropdownItem>
|
|
69
|
+
];
|
|
70
|
+
|
|
71
|
+
return (
|
|
72
|
+
<NotificationDrawer>
|
|
73
|
+
<NotificationDrawerHeader count={4}>
|
|
74
|
+
<Dropdown
|
|
75
|
+
onSelect={onSelect}
|
|
76
|
+
toggle={
|
|
77
|
+
<KebabToggle onToggle={isOpen => onToggle('groups-kebab-toggle-1', isOpen)} id="groups-kebab-toggle-1" />
|
|
78
|
+
}
|
|
79
|
+
isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-1']}
|
|
80
|
+
isPlain
|
|
81
|
+
dropdownItems={dropdownItems}
|
|
82
|
+
id="grouped-notification-1"
|
|
83
|
+
position={DropdownPosition.right}
|
|
84
|
+
/>
|
|
85
|
+
</NotificationDrawerHeader>
|
|
86
|
+
<NotificationDrawerBody>
|
|
87
|
+
<NotificationDrawerGroupList>
|
|
88
|
+
<NotificationDrawerGroup
|
|
89
|
+
title="First notification group"
|
|
90
|
+
isExpanded={firstGroupExpanded}
|
|
91
|
+
count={2}
|
|
92
|
+
onExpand={toggleFirstDrawer}
|
|
93
|
+
>
|
|
94
|
+
<NotificationDrawerList isHidden={!firstGroupExpanded}>
|
|
95
|
+
<NotificationDrawerListItem variant="info">
|
|
96
|
+
<NotificationDrawerListItemHeader
|
|
97
|
+
variant="info"
|
|
98
|
+
title="Unread info notification title"
|
|
99
|
+
srTitle="Info notification:"
|
|
100
|
+
>
|
|
101
|
+
<Dropdown
|
|
102
|
+
position={DropdownPosition.right}
|
|
103
|
+
onSelect={onSelect}
|
|
104
|
+
toggle={
|
|
105
|
+
<KebabToggle
|
|
106
|
+
onToggle={isOpen => onToggle('groups-kebab-toggle-2', isOpen)}
|
|
107
|
+
id="groups-kebab-toggle-2"
|
|
108
|
+
/>
|
|
109
|
+
}
|
|
110
|
+
isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-2']}
|
|
111
|
+
isPlain
|
|
112
|
+
dropdownItems={dropdownItems}
|
|
113
|
+
id="grouped-notification-2"
|
|
114
|
+
/>
|
|
115
|
+
</NotificationDrawerListItemHeader>
|
|
116
|
+
<NotificationDrawerListItemBody timestamp="5 minutes ago">
|
|
117
|
+
This is an info notification description.
|
|
118
|
+
</NotificationDrawerListItemBody>
|
|
119
|
+
</NotificationDrawerListItem>
|
|
120
|
+
<NotificationDrawerListItem variant="danger">
|
|
121
|
+
<NotificationDrawerListItemHeader
|
|
122
|
+
variant="danger"
|
|
123
|
+
title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
|
|
124
|
+
srTitle="Danger notification:"
|
|
125
|
+
>
|
|
126
|
+
<Dropdown
|
|
127
|
+
position={DropdownPosition.right}
|
|
128
|
+
onSelect={onSelect}
|
|
129
|
+
toggle={
|
|
130
|
+
<KebabToggle
|
|
131
|
+
onToggle={isOpen => onToggle('groups-kebab-toggle-3', isOpen)}
|
|
132
|
+
id="groups-kebab-toggle-3"
|
|
133
|
+
/>
|
|
134
|
+
}
|
|
135
|
+
isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-3']}
|
|
136
|
+
isPlain
|
|
137
|
+
dropdownItems={dropdownItems}
|
|
138
|
+
id="grouped-notification-3"
|
|
139
|
+
/>
|
|
140
|
+
</NotificationDrawerListItemHeader>
|
|
141
|
+
<NotificationDrawerListItemBody timestamp="10 minutes ago">
|
|
142
|
+
This is a danger notification description. This is a long description to show how the title will wrap
|
|
143
|
+
if it is long and wraps to multiple lines.
|
|
144
|
+
</NotificationDrawerListItemBody>
|
|
145
|
+
</NotificationDrawerListItem>
|
|
146
|
+
<NotificationDrawerListItem variant="warning" isRead>
|
|
147
|
+
<NotificationDrawerListItemHeader
|
|
148
|
+
variant="warning"
|
|
149
|
+
title="Read warning notification title"
|
|
150
|
+
srTitle="Warning notification:"
|
|
151
|
+
>
|
|
152
|
+
<Dropdown
|
|
153
|
+
position={DropdownPosition.right}
|
|
154
|
+
onSelect={onSelect}
|
|
155
|
+
toggle={
|
|
156
|
+
<KebabToggle
|
|
157
|
+
onToggle={isOpen => onToggle('groups-kebab-toggle-4', isOpen)}
|
|
158
|
+
id="groups-kebab-toggle-4"
|
|
159
|
+
/>
|
|
160
|
+
}
|
|
161
|
+
isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-4']}
|
|
162
|
+
isPlain
|
|
163
|
+
dropdownItems={dropdownItems}
|
|
164
|
+
id="grouped-notification-7"
|
|
165
|
+
/>
|
|
166
|
+
</NotificationDrawerListItemHeader>
|
|
167
|
+
<NotificationDrawerListItemBody timestamp="20 minutes ago">
|
|
168
|
+
This is a warning notification description.
|
|
169
|
+
</NotificationDrawerListItemBody>
|
|
170
|
+
</NotificationDrawerListItem>
|
|
171
|
+
<NotificationDrawerListItem variant="success" isRead>
|
|
172
|
+
<NotificationDrawerListItemHeader
|
|
173
|
+
variant="success"
|
|
174
|
+
title="Read success notification title"
|
|
175
|
+
srTitle="Success notification:"
|
|
176
|
+
>
|
|
177
|
+
<Dropdown
|
|
178
|
+
position={DropdownPosition.right}
|
|
179
|
+
direction={DropdownDirection.up}
|
|
180
|
+
onSelect={onSelect}
|
|
181
|
+
toggle={
|
|
182
|
+
<KebabToggle
|
|
183
|
+
onToggle={isOpen => onToggle('groups-kebab-toggle-5', isOpen)}
|
|
184
|
+
id="groups-kebab-toggle-5"
|
|
185
|
+
/>
|
|
186
|
+
}
|
|
187
|
+
isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-5']}
|
|
188
|
+
isPlain
|
|
189
|
+
dropdownItems={dropdownItems}
|
|
190
|
+
id="grouped-notification-5"
|
|
191
|
+
/>
|
|
192
|
+
</NotificationDrawerListItemHeader>
|
|
193
|
+
<NotificationDrawerListItemBody timestamp="30 minutes ago">
|
|
194
|
+
This is a success notification description.
|
|
195
|
+
</NotificationDrawerListItemBody>
|
|
196
|
+
</NotificationDrawerListItem>
|
|
197
|
+
</NotificationDrawerList>
|
|
198
|
+
</NotificationDrawerGroup>
|
|
199
|
+
<NotificationDrawerGroup
|
|
200
|
+
title="Second notification group"
|
|
201
|
+
isExpanded={secondGroupExpanded}
|
|
202
|
+
count={2}
|
|
203
|
+
onExpand={toggleSecondDrawer}
|
|
204
|
+
>
|
|
205
|
+
<NotificationDrawerList isHidden={!secondGroupExpanded}>
|
|
206
|
+
<NotificationDrawerListItem variant="info">
|
|
207
|
+
<NotificationDrawerListItemHeader
|
|
208
|
+
variant="info"
|
|
209
|
+
title="Unread info notification title"
|
|
210
|
+
srTitle="Info notification:"
|
|
211
|
+
>
|
|
212
|
+
<Dropdown
|
|
213
|
+
position={DropdownPosition.right}
|
|
214
|
+
onSelect={onSelect}
|
|
215
|
+
toggle={
|
|
216
|
+
<KebabToggle
|
|
217
|
+
onToggle={isOpen => onToggle('groups-kebab-toggle-6', isOpen)}
|
|
218
|
+
id="groups-kebab-toggle-6"
|
|
219
|
+
/>
|
|
220
|
+
}
|
|
221
|
+
isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-6']}
|
|
222
|
+
isPlain
|
|
223
|
+
dropdownItems={dropdownItems}
|
|
224
|
+
id="grouped-notification-6"
|
|
225
|
+
/>
|
|
226
|
+
</NotificationDrawerListItemHeader>
|
|
227
|
+
<NotificationDrawerListItemBody timestamp="5 minutes ago">
|
|
228
|
+
This is an info notification description.
|
|
229
|
+
</NotificationDrawerListItemBody>
|
|
230
|
+
</NotificationDrawerListItem>
|
|
231
|
+
<NotificationDrawerListItem variant="danger">
|
|
232
|
+
<NotificationDrawerListItemHeader
|
|
233
|
+
variant="danger"
|
|
234
|
+
title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
|
|
235
|
+
srTitle="Danger notification:"
|
|
236
|
+
>
|
|
237
|
+
<Dropdown
|
|
238
|
+
position={DropdownPosition.right}
|
|
239
|
+
onSelect={onSelect}
|
|
240
|
+
toggle={
|
|
241
|
+
<KebabToggle
|
|
242
|
+
onToggle={isOpen => onToggle('groups-kebab-toggle-7', isOpen)}
|
|
243
|
+
id="groups-kebab-toggle-7"
|
|
244
|
+
/>
|
|
245
|
+
}
|
|
246
|
+
isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-7']}
|
|
247
|
+
isPlain
|
|
248
|
+
dropdownItems={dropdownItems}
|
|
249
|
+
id="gropued-notification-7"
|
|
250
|
+
/>
|
|
251
|
+
</NotificationDrawerListItemHeader>
|
|
252
|
+
<NotificationDrawerListItemBody timestamp="10 minutes ago">
|
|
253
|
+
This is a danger notification description. This is a long description to show how the title will wrap
|
|
254
|
+
if it is long and wraps to multiple lines.
|
|
255
|
+
</NotificationDrawerListItemBody>
|
|
256
|
+
</NotificationDrawerListItem>
|
|
257
|
+
<NotificationDrawerListItem variant="warning" isRead>
|
|
258
|
+
<NotificationDrawerListItemHeader
|
|
259
|
+
variant="warning"
|
|
260
|
+
title="Read warning notification title"
|
|
261
|
+
srTitle="Warning notification:"
|
|
262
|
+
>
|
|
263
|
+
<Dropdown
|
|
264
|
+
position={DropdownPosition.right}
|
|
265
|
+
onSelect={onSelect}
|
|
266
|
+
toggle={
|
|
267
|
+
<KebabToggle
|
|
268
|
+
onToggle={isOpen => onToggle('groups-kebab-toggle-8', isOpen)}
|
|
269
|
+
id="groups-kebab-toggle-8"
|
|
270
|
+
/>
|
|
271
|
+
}
|
|
272
|
+
isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-8']}
|
|
273
|
+
isPlain
|
|
274
|
+
dropdownItems={dropdownItems}
|
|
275
|
+
id="grouped-notification-8"
|
|
276
|
+
/>
|
|
277
|
+
</NotificationDrawerListItemHeader>
|
|
278
|
+
<NotificationDrawerListItemBody timestamp="20 minutes ago">
|
|
279
|
+
This is a warning notification description.
|
|
280
|
+
</NotificationDrawerListItemBody>
|
|
281
|
+
</NotificationDrawerListItem>
|
|
282
|
+
<NotificationDrawerListItem variant="success" isRead>
|
|
283
|
+
<NotificationDrawerListItemHeader
|
|
284
|
+
variant="success"
|
|
285
|
+
title="Read success notification title"
|
|
286
|
+
srTitle="Success notification:"
|
|
287
|
+
>
|
|
288
|
+
<Dropdown
|
|
289
|
+
position={DropdownPosition.right}
|
|
290
|
+
direction={DropdownDirection.up}
|
|
291
|
+
onSelect={onSelect}
|
|
292
|
+
toggle={
|
|
293
|
+
<KebabToggle
|
|
294
|
+
onToggle={isOpen => onToggle('groups-kebab-toggle-9', isOpen)}
|
|
295
|
+
id="groups-kebab-toggle-9"
|
|
296
|
+
/>
|
|
297
|
+
}
|
|
298
|
+
isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-9']}
|
|
299
|
+
isPlain
|
|
300
|
+
dropdownItems={dropdownItems}
|
|
301
|
+
id="grouped-notification-9"
|
|
302
|
+
/>
|
|
303
|
+
</NotificationDrawerListItemHeader>
|
|
304
|
+
<NotificationDrawerListItemBody timestamp="30 minutes ago">
|
|
305
|
+
This is a success notification description.
|
|
306
|
+
</NotificationDrawerListItemBody>
|
|
307
|
+
</NotificationDrawerListItem>
|
|
308
|
+
</NotificationDrawerList>
|
|
309
|
+
</NotificationDrawerGroup>
|
|
310
|
+
<NotificationDrawerGroup
|
|
311
|
+
title="Third notification group. This is a long title to show how the title will be truncated if it is long and will be shown in a single line."
|
|
312
|
+
isExpanded={thirdGroupExpanded}
|
|
313
|
+
count={0}
|
|
314
|
+
onExpand={toggleThirdDrawer}
|
|
315
|
+
truncateTitle={1}
|
|
316
|
+
>
|
|
317
|
+
<NotificationDrawerList isHidden={!thirdGroupExpanded}>
|
|
318
|
+
<EmptyState variant={EmptyStateVariant.full}>
|
|
319
|
+
<EmptyStateIcon icon={SearchIcon} />
|
|
320
|
+
<Title headingLevel="h2" size="lg">
|
|
321
|
+
No alerts found
|
|
322
|
+
</Title>
|
|
323
|
+
<EmptyStateBody>
|
|
324
|
+
There are currently no critical alerts firing. There may be firing alerts of other severities or
|
|
325
|
+
silenced critical alerts however.
|
|
326
|
+
</EmptyStateBody>
|
|
327
|
+
<EmptyStatePrimary>
|
|
328
|
+
<Button variant="link">Action</Button>
|
|
329
|
+
</EmptyStatePrimary>
|
|
330
|
+
</EmptyState>
|
|
331
|
+
</NotificationDrawerList>
|
|
332
|
+
</NotificationDrawerGroup>
|
|
333
|
+
</NotificationDrawerGroupList>
|
|
334
|
+
</NotificationDrawerBody>
|
|
335
|
+
</NotificationDrawer>
|
|
336
|
+
);
|
|
337
|
+
};
|