@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
|
+
Button,
|
|
4
|
+
EmptyState,
|
|
5
|
+
EmptyStateBody,
|
|
6
|
+
EmptyStateIcon,
|
|
7
|
+
EmptyStatePrimary,
|
|
8
|
+
EmptyStateVariant,
|
|
9
|
+
NotificationDrawer,
|
|
10
|
+
NotificationDrawerBody,
|
|
11
|
+
NotificationDrawerHeader,
|
|
12
|
+
NotificationDrawerGroup,
|
|
13
|
+
NotificationDrawerGroupList,
|
|
14
|
+
NotificationDrawerList,
|
|
15
|
+
NotificationDrawerListItem,
|
|
16
|
+
NotificationDrawerListItemBody,
|
|
17
|
+
NotificationDrawerListItemHeader,
|
|
18
|
+
Title
|
|
19
|
+
} from '@patternfly/react-core';
|
|
20
|
+
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
|
|
21
|
+
|
|
22
|
+
export const NotificationDrawerLightweight: React.FunctionComponent = () => {
|
|
23
|
+
const [firstGroupExpanded, setFirstGroupExpanded] = React.useState(false);
|
|
24
|
+
const [secondGroupExpanded, setSecondGroupExpanded] = React.useState(true);
|
|
25
|
+
const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false);
|
|
26
|
+
|
|
27
|
+
const toggleFirstDrawer = (_event: any, value: boolean) => {
|
|
28
|
+
setFirstGroupExpanded(value);
|
|
29
|
+
setSecondGroupExpanded(false);
|
|
30
|
+
setThirdGroupExpanded(false);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const toggleSecondDrawer = (_event: any, value: boolean) => {
|
|
34
|
+
setSecondGroupExpanded(value);
|
|
35
|
+
setFirstGroupExpanded(false);
|
|
36
|
+
setThirdGroupExpanded(false);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const toggleThirdDrawer = (_event: any, value: boolean) => {
|
|
40
|
+
setThirdGroupExpanded(value);
|
|
41
|
+
setSecondGroupExpanded(false);
|
|
42
|
+
setFirstGroupExpanded(false);
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const onDrawerClose = () => {
|
|
46
|
+
// do something cool in a callback
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<NotificationDrawer>
|
|
51
|
+
<NotificationDrawerHeader onClose={onDrawerClose} />
|
|
52
|
+
<NotificationDrawerBody>
|
|
53
|
+
<NotificationDrawerGroupList>
|
|
54
|
+
<NotificationDrawerGroup
|
|
55
|
+
title="First notification group"
|
|
56
|
+
isExpanded={firstGroupExpanded}
|
|
57
|
+
count={4}
|
|
58
|
+
isRead={true}
|
|
59
|
+
onExpand={toggleFirstDrawer}
|
|
60
|
+
>
|
|
61
|
+
<NotificationDrawerList isHidden={!firstGroupExpanded}>
|
|
62
|
+
<NotificationDrawerListItem variant="info">
|
|
63
|
+
<NotificationDrawerListItemHeader
|
|
64
|
+
variant="info"
|
|
65
|
+
title="Info notification title"
|
|
66
|
+
srTitle="Info notification:"
|
|
67
|
+
/>
|
|
68
|
+
<NotificationDrawerListItemBody timestamp="5 minutes ago">
|
|
69
|
+
This is an info notification description.
|
|
70
|
+
</NotificationDrawerListItemBody>
|
|
71
|
+
</NotificationDrawerListItem>
|
|
72
|
+
<NotificationDrawerListItem variant="danger">
|
|
73
|
+
<NotificationDrawerListItemHeader
|
|
74
|
+
variant="danger"
|
|
75
|
+
title="Danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
|
|
76
|
+
srTitle="Danger notification:"
|
|
77
|
+
/>
|
|
78
|
+
<NotificationDrawerListItemBody timestamp="10 minutes ago">
|
|
79
|
+
This is a danger notification description. This is a long description to show how the title will wrap
|
|
80
|
+
if it is long and wraps to multiple lines.
|
|
81
|
+
</NotificationDrawerListItemBody>
|
|
82
|
+
</NotificationDrawerListItem>
|
|
83
|
+
<NotificationDrawerListItem variant="warning">
|
|
84
|
+
<NotificationDrawerListItemHeader
|
|
85
|
+
variant="warning"
|
|
86
|
+
title="Warning notification title"
|
|
87
|
+
srTitle="Warning notification:"
|
|
88
|
+
/>
|
|
89
|
+
<NotificationDrawerListItemBody timestamp="20 minutes ago">
|
|
90
|
+
This is a warning notification description.
|
|
91
|
+
</NotificationDrawerListItemBody>
|
|
92
|
+
</NotificationDrawerListItem>
|
|
93
|
+
<NotificationDrawerListItem variant="success">
|
|
94
|
+
<NotificationDrawerListItemHeader
|
|
95
|
+
variant="success"
|
|
96
|
+
title="Success notification title"
|
|
97
|
+
srTitle="Success notification:"
|
|
98
|
+
/>
|
|
99
|
+
<NotificationDrawerListItemBody timestamp="30 minutes ago">
|
|
100
|
+
This is a success notification description.
|
|
101
|
+
</NotificationDrawerListItemBody>
|
|
102
|
+
</NotificationDrawerListItem>
|
|
103
|
+
</NotificationDrawerList>
|
|
104
|
+
</NotificationDrawerGroup>
|
|
105
|
+
<NotificationDrawerGroup
|
|
106
|
+
title="Second notification group"
|
|
107
|
+
isExpanded={secondGroupExpanded}
|
|
108
|
+
count={4}
|
|
109
|
+
isRead={true}
|
|
110
|
+
onExpand={toggleSecondDrawer}
|
|
111
|
+
>
|
|
112
|
+
<NotificationDrawerList isHidden={!secondGroupExpanded}>
|
|
113
|
+
<NotificationDrawerListItem variant="info">
|
|
114
|
+
<NotificationDrawerListItemHeader
|
|
115
|
+
variant="info"
|
|
116
|
+
title="Info notification title w/action"
|
|
117
|
+
srTitle="Info notification:"
|
|
118
|
+
>
|
|
119
|
+
<Button variant="link">Action</Button>
|
|
120
|
+
</NotificationDrawerListItemHeader>
|
|
121
|
+
<NotificationDrawerListItemBody timestamp="5 minutes ago">
|
|
122
|
+
This is an info notification description.
|
|
123
|
+
</NotificationDrawerListItemBody>
|
|
124
|
+
</NotificationDrawerListItem>
|
|
125
|
+
<NotificationDrawerListItem variant="danger">
|
|
126
|
+
<NotificationDrawerListItemHeader
|
|
127
|
+
variant="danger"
|
|
128
|
+
title="Danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
|
|
129
|
+
srTitle="Danger notification:"
|
|
130
|
+
/>
|
|
131
|
+
<NotificationDrawerListItemBody timestamp="10 minutes ago">
|
|
132
|
+
This is a danger notification description. This is a long description to show how the title will wrap
|
|
133
|
+
if it is long and wraps to multiple lines.
|
|
134
|
+
</NotificationDrawerListItemBody>
|
|
135
|
+
</NotificationDrawerListItem>
|
|
136
|
+
<NotificationDrawerListItem variant="warning">
|
|
137
|
+
<NotificationDrawerListItemHeader
|
|
138
|
+
variant="warning"
|
|
139
|
+
title="Warning notification title"
|
|
140
|
+
srTitle="Warning notification:"
|
|
141
|
+
/>
|
|
142
|
+
<NotificationDrawerListItemBody timestamp="20 minutes ago">
|
|
143
|
+
This is a warning notification description.
|
|
144
|
+
</NotificationDrawerListItemBody>
|
|
145
|
+
</NotificationDrawerListItem>
|
|
146
|
+
<NotificationDrawerListItem variant="success">
|
|
147
|
+
<NotificationDrawerListItemHeader
|
|
148
|
+
variant="success"
|
|
149
|
+
title="Success notification title"
|
|
150
|
+
srTitle="Success notification:"
|
|
151
|
+
/>
|
|
152
|
+
<NotificationDrawerListItemBody timestamp="30 minutes ago">
|
|
153
|
+
This is a success notification description.
|
|
154
|
+
</NotificationDrawerListItemBody>
|
|
155
|
+
</NotificationDrawerListItem>
|
|
156
|
+
</NotificationDrawerList>
|
|
157
|
+
</NotificationDrawerGroup>
|
|
158
|
+
<NotificationDrawerGroup
|
|
159
|
+
title="Third notification group"
|
|
160
|
+
isExpanded={thirdGroupExpanded}
|
|
161
|
+
count={0}
|
|
162
|
+
isRead={true}
|
|
163
|
+
onExpand={toggleThirdDrawer}
|
|
164
|
+
>
|
|
165
|
+
<NotificationDrawerList isHidden={!thirdGroupExpanded}>
|
|
166
|
+
<EmptyState variant={EmptyStateVariant.full}>
|
|
167
|
+
<EmptyStateIcon icon={SearchIcon} />
|
|
168
|
+
<Title headingLevel="h2" size="lg">
|
|
169
|
+
No alerts found
|
|
170
|
+
</Title>
|
|
171
|
+
<EmptyStateBody>
|
|
172
|
+
There are currently no critical alerts firing. There may be firing alerts of other severities or
|
|
173
|
+
silenced critical alerts however.
|
|
174
|
+
</EmptyStateBody>
|
|
175
|
+
<EmptyStatePrimary>
|
|
176
|
+
<Button variant="link">Action</Button>
|
|
177
|
+
</EmptyStatePrimary>
|
|
178
|
+
</EmptyState>
|
|
179
|
+
</NotificationDrawerList>
|
|
180
|
+
</NotificationDrawerGroup>
|
|
181
|
+
</NotificationDrawerGroupList>
|
|
182
|
+
</NotificationDrawerBody>
|
|
183
|
+
</NotificationDrawer>
|
|
184
|
+
);
|
|
185
|
+
};
|