agroptima-design-system 1.2.0-beta.3 → 1.2.0-beta.5
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/package.json
CHANGED
|
@@ -4,7 +4,19 @@
|
|
|
4
4
|
@use '../../settings/breakpoints';
|
|
5
5
|
@use '../../settings/mixins';
|
|
6
6
|
|
|
7
|
+
$header-height: 50px;
|
|
8
|
+
|
|
7
9
|
.notification-center-container {
|
|
10
|
+
.notification-button-container {
|
|
11
|
+
position: relative;
|
|
12
|
+
|
|
13
|
+
.new-notifications-dot {
|
|
14
|
+
position: absolute;
|
|
15
|
+
right: 0;
|
|
16
|
+
top: -2px;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
8
20
|
.notification-center {
|
|
9
21
|
display: flex;
|
|
10
22
|
flex-direction: column;
|
|
@@ -144,7 +156,7 @@
|
|
|
144
156
|
|
|
145
157
|
.notification-center {
|
|
146
158
|
width: 100%;
|
|
147
|
-
height:
|
|
159
|
+
height: calc(100vh - $header-height);
|
|
148
160
|
|
|
149
161
|
.notification-header {
|
|
150
162
|
.notification-header-title {
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import './NotificationCenter.scss'
|
|
3
3
|
import React from 'react'
|
|
4
4
|
import { classNames } from '../../utils/classNames'
|
|
5
|
+
import { Badge } from '../Badge'
|
|
5
6
|
import { IconButton } from '../Button'
|
|
6
7
|
import type { Variant } from '../Button/IconButton'
|
|
7
8
|
import { Popover, type Position } from '../Popover'
|
|
@@ -11,6 +12,7 @@ export interface NotificationCenterProps {
|
|
|
11
12
|
className?: string
|
|
12
13
|
variant?: Variant
|
|
13
14
|
accessibilityLabel?: string
|
|
15
|
+
hasNewNotifications?: boolean
|
|
14
16
|
children: React.ReactNode
|
|
15
17
|
}
|
|
16
18
|
|
|
@@ -18,6 +20,7 @@ function NotificationCenter({
|
|
|
18
20
|
position = 'right',
|
|
19
21
|
className,
|
|
20
22
|
variant = 'secondary',
|
|
23
|
+
hasNewNotifications = false,
|
|
21
24
|
accessibilityLabel = 'Open notifications center',
|
|
22
25
|
children,
|
|
23
26
|
}: NotificationCenterProps) {
|
|
@@ -26,12 +29,21 @@ function NotificationCenter({
|
|
|
26
29
|
position={position}
|
|
27
30
|
className={classNames('notification-center-container', className)}
|
|
28
31
|
renderButton={({ toggle }) => (
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
<div className="notification-button-container">
|
|
33
|
+
{hasNewNotifications && (
|
|
34
|
+
<Badge
|
|
35
|
+
className="new-notifications-dot"
|
|
36
|
+
variant="notification"
|
|
37
|
+
isDot
|
|
38
|
+
/>
|
|
39
|
+
)}
|
|
40
|
+
<IconButton
|
|
41
|
+
icon="Notification"
|
|
42
|
+
variant={variant}
|
|
43
|
+
accessibilityLabel={accessibilityLabel}
|
|
44
|
+
onClick={toggle}
|
|
45
|
+
/>
|
|
46
|
+
</div>
|
|
35
47
|
)}
|
|
36
48
|
closeOnClick={false}
|
|
37
49
|
>
|
|
@@ -47,7 +47,7 @@ export const NotificationCenterWithNotifications: Story = {
|
|
|
47
47
|
<h1>Header Title</h1>
|
|
48
48
|
|
|
49
49
|
<div style={{ display: 'flex', gap: '10px', marginRight: '30px' }}>
|
|
50
|
-
<NotificationCenter>
|
|
50
|
+
<NotificationCenter hasNewNotifications={true}>
|
|
51
51
|
<NotificationHeader title="Notifications">
|
|
52
52
|
<CheckableTagGroup>
|
|
53
53
|
<CheckableTag
|