@omniumretail/component-library 1.2.28 → 1.2.30
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/dist/bundle.js +1 -1
- package/dist/main.css +1 -1
- package/dist/types/components/BellNotifications/index.d.ts +2 -1
- package/dist/types/components/Header/Header.types.d.ts +1 -0
- package/dist/types/components/Header/index.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/BellNotifications/BellNotifications.stories.tsx +89 -19
- package/src/components/BellNotifications/index.tsx +63 -61
- package/src/components/BellNotifications/styles.module.scss +48 -6
- package/src/components/Header/Header.stories.tsx +173 -0
- package/src/components/Header/Header.types.ts +1 -0
- package/src/components/Header/index.tsx +16 -2
- package/src/locales/en.json +2 -1
- package/src/locales/es.json +2 -1
- package/src/locales/pt.json +2 -1
|
@@ -51,6 +51,177 @@ const mockMenu = [
|
|
|
51
51
|
}
|
|
52
52
|
];
|
|
53
53
|
|
|
54
|
+
const notifications = [
|
|
55
|
+
{
|
|
56
|
+
"Id": "662C390B-A38F-45AB-B97C-2D00F0A8ACAD",
|
|
57
|
+
"Title": "Creation of an Evaluation Cycle",
|
|
58
|
+
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
59
|
+
"RedirectURL": "https://www.google.pt",
|
|
60
|
+
"Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
|
|
61
|
+
"ExpirationDate": 1736899200,
|
|
62
|
+
"Criticality": {
|
|
63
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
64
|
+
"Name": "High",
|
|
65
|
+
"ColorHex": "#E05151"
|
|
66
|
+
},
|
|
67
|
+
"IsRead": true
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"Id": "0AF18720-1C94-48CD-8DF3-D254077E8363",
|
|
71
|
+
"Title": "Creation of an Evaluation Cycle",
|
|
72
|
+
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
73
|
+
"RedirectURL": "https://www.google.pt",
|
|
74
|
+
"Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
|
|
75
|
+
"ExpirationDate": 1736899200,
|
|
76
|
+
"Criticality": {
|
|
77
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
78
|
+
"Name": "High",
|
|
79
|
+
"ColorHex": "#E05151"
|
|
80
|
+
},
|
|
81
|
+
"IsRead": true
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"Id": "0419654F-66FE-41EA-BBA4-D8BB6E3D6B33",
|
|
85
|
+
"Title": "Creation of an Evaluation Cycle",
|
|
86
|
+
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
87
|
+
"RedirectURL": "https://www.google.pt",
|
|
88
|
+
"Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
|
|
89
|
+
"ExpirationDate": 1736899200,
|
|
90
|
+
"Criticality": {
|
|
91
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
92
|
+
"Name": "High",
|
|
93
|
+
"ColorHex": "#E05151"
|
|
94
|
+
},
|
|
95
|
+
"IsRead": true
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"Id": "CC98EDA1-0461-4D08-982E-8424EF4AFB3B",
|
|
99
|
+
"Title": "Creation of an Evaluation Cycle",
|
|
100
|
+
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
101
|
+
"RedirectURL": "https://www.google.pt",
|
|
102
|
+
"Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
|
|
103
|
+
"ExpirationDate": 1736899200,
|
|
104
|
+
"Criticality": {
|
|
105
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
106
|
+
"Name": "High",
|
|
107
|
+
"ColorHex": "#E05151"
|
|
108
|
+
},
|
|
109
|
+
"IsRead": false
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"Id": "3DB9310A-4BF8-4B90-8D5A-7583473664BB",
|
|
113
|
+
"Title": "Creation of an Evaluation Cycle",
|
|
114
|
+
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
115
|
+
"RedirectURL": "https://www.google.pt",
|
|
116
|
+
"Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
|
|
117
|
+
"ExpirationDate": 1736899200,
|
|
118
|
+
"Criticality": {
|
|
119
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
120
|
+
"Name": "High",
|
|
121
|
+
"ColorHex": "#E05151"
|
|
122
|
+
},
|
|
123
|
+
"IsRead": false
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"Id": "D6FB93EE-3255-42B2-8EC1-27E7AC3F5249",
|
|
127
|
+
"Title": "Creation of a new user",
|
|
128
|
+
"Description": "A new user was created in the platform with the mecanographic number 8111.",
|
|
129
|
+
"RedirectURL": "https://www.google.pt",
|
|
130
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
131
|
+
"ExpirationDate": 1736985600,
|
|
132
|
+
"Criticality": {
|
|
133
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
134
|
+
"Name": "High",
|
|
135
|
+
"ColorHex": "#E05151"
|
|
136
|
+
},
|
|
137
|
+
"IsRead": false
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"Id": "D6FB96EE-3255-42B2-8EC1-27E7AC3F5249",
|
|
141
|
+
"Title": "Creation of a new action of inspection",
|
|
142
|
+
"Description": "A new inspection action was created.",
|
|
143
|
+
"RedirectURL": "https://www.google.pt",
|
|
144
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
145
|
+
"ExpirationDate": 1736985600,
|
|
146
|
+
"Criticality": {
|
|
147
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
148
|
+
"Name": "High",
|
|
149
|
+
"ColorHex": "#E05151"
|
|
150
|
+
},
|
|
151
|
+
"IsRead": false
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"Id": "D6FB96EE-3655-42B2-8EC1-27E7AC3F5249",
|
|
155
|
+
"Title": "Creation of a new action of inspection",
|
|
156
|
+
"Description": "A new inspection action was created.",
|
|
157
|
+
"RedirectURL": "https://www.google.pt",
|
|
158
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
159
|
+
"ExpirationDate": 1736985600,
|
|
160
|
+
"Criticality": {
|
|
161
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
162
|
+
"Name": "High",
|
|
163
|
+
"ColorHex": "#E05151"
|
|
164
|
+
},
|
|
165
|
+
"IsRead": false
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"Id": "D6FB96EE-3255-46B2-8EC1-27E7AC3F5249",
|
|
169
|
+
"Title": "Creation of a new action of inspection",
|
|
170
|
+
"Description": "A new inspection action was created.",
|
|
171
|
+
"RedirectURL": "https://www.google.pt",
|
|
172
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
173
|
+
"ExpirationDate": 1736985600,
|
|
174
|
+
"Criticality": {
|
|
175
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
176
|
+
"Name": "High",
|
|
177
|
+
"ColorHex": "#E05151"
|
|
178
|
+
},
|
|
179
|
+
"IsRead": false
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"Id": "D9FB96EE-3255-42B2-8EC1-27E7AC3F5249",
|
|
183
|
+
"Title": "Creation of a new action of inspection",
|
|
184
|
+
"Description": "A new inspection action was created.",
|
|
185
|
+
"RedirectURL": "https://www.google.pt",
|
|
186
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
187
|
+
"ExpirationDate": 1736985600,
|
|
188
|
+
"Criticality": {
|
|
189
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
190
|
+
"Name": "High",
|
|
191
|
+
"ColorHex": "#E05151"
|
|
192
|
+
},
|
|
193
|
+
"IsRead": false
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"Id": "D6FB96EE-5955-42B2-8EC1-27E7AC3F5249",
|
|
197
|
+
"Title": "Creation of a new action of inspection",
|
|
198
|
+
"Description": "A new inspection action was created.",
|
|
199
|
+
"RedirectURL": "https://www.google.pt",
|
|
200
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
201
|
+
"ExpirationDate": 1736985600,
|
|
202
|
+
"Criticality": {
|
|
203
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
204
|
+
"Name": "High",
|
|
205
|
+
"ColorHex": "#E05151"
|
|
206
|
+
},
|
|
207
|
+
"IsRead": false
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"Id": "D6FB96EE-3255-42B7-8EC1-27E7AC3F5249",
|
|
211
|
+
"Title": "Creation of a new action of inspection",
|
|
212
|
+
"Description": "A new inspection action was created.",
|
|
213
|
+
"RedirectURL": "https://www.google.pt",
|
|
214
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
215
|
+
"ExpirationDate": 1736985600,
|
|
216
|
+
"Criticality": {
|
|
217
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
218
|
+
"Name": "High",
|
|
219
|
+
"ColorHex": "#E05151"
|
|
220
|
+
},
|
|
221
|
+
"IsRead": false
|
|
222
|
+
}
|
|
223
|
+
];
|
|
224
|
+
|
|
54
225
|
export const Primary = Template.bind({});
|
|
55
226
|
Primary.args = {
|
|
56
227
|
menuList: mockMenu,
|
|
@@ -59,5 +230,7 @@ Primary.args = {
|
|
|
59
230
|
profileUrl: profileUrl,
|
|
60
231
|
userName: 'Diogo Carvalho',
|
|
61
232
|
pageTitle: 'Page Title',
|
|
233
|
+
notifications: notifications,
|
|
234
|
+
|
|
62
235
|
};
|
|
63
236
|
|
|
@@ -12,7 +12,21 @@ import { BellNotifications } from '../BellNotifications';
|
|
|
12
12
|
* Header component to display navigation bar with dropdown menus and action button.
|
|
13
13
|
* @param {HeaderProps} props - Properties passed to the component.
|
|
14
14
|
*/
|
|
15
|
-
export const Header = ({
|
|
15
|
+
export const Header = ({
|
|
16
|
+
menuList,
|
|
17
|
+
actionButton,
|
|
18
|
+
logout,
|
|
19
|
+
homeUrl,
|
|
20
|
+
profileUrl,
|
|
21
|
+
onLeavingPage,
|
|
22
|
+
userName,
|
|
23
|
+
pageTitle,
|
|
24
|
+
onFilterChange,
|
|
25
|
+
notifications,
|
|
26
|
+
onNotificationClick,
|
|
27
|
+
handleMarkAllAsRead
|
|
28
|
+
}: HeaderProps) => {
|
|
29
|
+
|
|
16
30
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
17
31
|
const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
|
|
18
32
|
const headerRef = useRef<HTMLDivElement>(null);
|
|
@@ -145,7 +159,7 @@ export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, on
|
|
|
145
159
|
</div>
|
|
146
160
|
|
|
147
161
|
{notifications &&
|
|
148
|
-
<BellNotifications onFilterChange={onFilterChange!} notifications={notifications} onNotificationClick={onNotificationClick!} />
|
|
162
|
+
<BellNotifications onFilterChange={onFilterChange!} notifications={notifications} onNotificationClick={onNotificationClick!} handleMarkAllAsRead={handleMarkAllAsRead!} />
|
|
149
163
|
}
|
|
150
164
|
|
|
151
165
|
<div className={classNames(styles.menu, { [styles.active]: isMenuOpen })}>
|
package/src/locales/en.json
CHANGED
package/src/locales/es.json
CHANGED
package/src/locales/pt.json
CHANGED