agroptima-design-system 1.2.20 → 1.2.21-beta-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/package.json
CHANGED
|
@@ -3,6 +3,7 @@ import './NotificationCenter.scss'
|
|
|
3
3
|
import React from 'react'
|
|
4
4
|
import { classNames } from '../../utils/classNames'
|
|
5
5
|
import { Icon } from '../Icon'
|
|
6
|
+
import { IconButton } from '../Button'
|
|
6
7
|
|
|
7
8
|
export interface NotificationLineProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
8
9
|
title: string
|
|
@@ -11,7 +12,9 @@ export interface NotificationLineProps extends React.ComponentPropsWithoutRef<'d
|
|
|
11
12
|
expandLabel?: string
|
|
12
13
|
collapseLabel?: string
|
|
13
14
|
className?: string
|
|
15
|
+
clearAccessibilityLabel: string
|
|
14
16
|
onClick?: () => void
|
|
17
|
+
onClear: (event: React.MouseEvent) => void
|
|
15
18
|
children: React.ReactNode
|
|
16
19
|
}
|
|
17
20
|
|
|
@@ -22,7 +25,9 @@ function NotificationLine({
|
|
|
22
25
|
expandLabel = 'View more',
|
|
23
26
|
collapseLabel = 'View less',
|
|
24
27
|
className,
|
|
28
|
+
clearAccessibilityLabel,
|
|
25
29
|
onClick = () => {},
|
|
30
|
+
onClear,
|
|
26
31
|
children,
|
|
27
32
|
}: NotificationLineProps) {
|
|
28
33
|
return (
|
|
@@ -32,7 +37,16 @@ function NotificationLine({
|
|
|
32
37
|
{!isRead && <Icon variant="primary" name="TimelineCircleSelected" />}
|
|
33
38
|
{title}
|
|
34
39
|
</span>
|
|
35
|
-
<
|
|
40
|
+
<div className="notification-line-aside">
|
|
41
|
+
<span className="notification-line-date">{date}</span>
|
|
42
|
+
<IconButton
|
|
43
|
+
type="button"
|
|
44
|
+
size="3"
|
|
45
|
+
icon="Close"
|
|
46
|
+
accessibilityLabel={clearAccessibilityLabel}
|
|
47
|
+
onClick={onClear}
|
|
48
|
+
/>
|
|
49
|
+
</div>
|
|
36
50
|
</div>
|
|
37
51
|
<details className="notification-line-description">
|
|
38
52
|
<summary data-open={collapseLabel} data-close={expandLabel}></summary>
|
|
@@ -86,25 +86,35 @@ export const NotificationCenterWithNotifications: Story = {
|
|
|
86
86
|
<NotificationLine
|
|
87
87
|
title="Trophy: Parting on Good Terms"
|
|
88
88
|
date="Jan 04"
|
|
89
|
+
clearAccessibilityLabel='Close'
|
|
89
90
|
onClick={() => alert('Notification clicked')}
|
|
91
|
+
onClear={() => alert('Notification cleared')}
|
|
90
92
|
>
|
|
91
93
|
Good terms? No. I'm here to burn bridges.
|
|
92
94
|
</NotificationLine>
|
|
93
95
|
<NotificationLine
|
|
94
96
|
title="New operating system update"
|
|
95
97
|
date="Jan 02"
|
|
98
|
+
clearAccessibilityLabel='Close'
|
|
99
|
+
onClear={() => alert('Notification cleared')}
|
|
96
100
|
>
|
|
97
101
|
Enjoy the new UI and performance improvements. <br /> Contact{' '}
|
|
98
102
|
<a href="support@fakemail.com">support@fakemail.com</a> for
|
|
99
103
|
help.
|
|
100
104
|
</NotificationLine>
|
|
101
|
-
<NotificationLine
|
|
105
|
+
<NotificationLine
|
|
106
|
+
title="Trophy: Shell of the Past" date="Dec 30"
|
|
107
|
+
clearAccessibilityLabel='Close'
|
|
108
|
+
onClear={() => alert('Notification cleared')}
|
|
109
|
+
>
|
|
102
110
|
What exactly have we learned?
|
|
103
111
|
</NotificationLine>
|
|
104
112
|
<NotificationLine
|
|
105
113
|
title="New SHf game patch update"
|
|
106
114
|
date="Dec 29"
|
|
107
115
|
isRead={true}
|
|
116
|
+
clearAccessibilityLabel='Close'
|
|
117
|
+
onClear={() => alert('Notification cleared')}
|
|
108
118
|
>
|
|
109
119
|
Fixes a bug when saving the game in certain conditions.
|
|
110
120
|
</NotificationLine>
|
|
@@ -112,6 +122,8 @@ export const NotificationCenterWithNotifications: Story = {
|
|
|
112
122
|
title="Trophy: On the Way to School"
|
|
113
123
|
date="Dec 28"
|
|
114
124
|
isRead={true}
|
|
125
|
+
clearAccessibilityLabel='Close'
|
|
126
|
+
onClear={() => alert('Notification cleared')}
|
|
115
127
|
onClick={() => alert('Notification clicked')}
|
|
116
128
|
>
|
|
117
129
|
The little sparrow escapes with its friends, wings flapping
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { render } from '@testing-library/react'
|
|
1
|
+
import { getByLabelText, getByRole, render } from '@testing-library/react'
|
|
2
2
|
import React from 'react'
|
|
3
3
|
import { Button } from '../src/atoms/Button'
|
|
4
4
|
import { CheckableTag, CheckableTagGroup } from '../src/atoms/CheckableTag'
|
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
|
|
12
12
|
describe('NotificationCenter', () => {
|
|
13
13
|
it('renders with expected content and buttons', () => {
|
|
14
|
-
const { getByText } = render(
|
|
14
|
+
const { getByText, getAllByLabelText } = render(
|
|
15
15
|
<NotificationCenter>
|
|
16
16
|
<NotificationHeader
|
|
17
17
|
title="Notifications"
|
|
@@ -49,15 +49,19 @@ describe('NotificationCenter', () => {
|
|
|
49
49
|
<NotificationList>
|
|
50
50
|
<NotificationLine
|
|
51
51
|
title="Trophy: Parting on Good Terms"
|
|
52
|
+
clearAccessibilityLabel="Clear notification"
|
|
52
53
|
date="Jan 04"
|
|
53
54
|
onClick={() => alert('Notification clicked')}
|
|
55
|
+
onClear={() => alert('Notification cleared')}
|
|
54
56
|
>
|
|
55
57
|
Good terms? No. I'm here to burn bridges.
|
|
56
58
|
</NotificationLine>
|
|
57
59
|
<NotificationLine
|
|
58
60
|
title="New SHf game patch update"
|
|
61
|
+
clearAccessibilityLabel="Clear notification"
|
|
59
62
|
date="Dec 29"
|
|
60
63
|
isRead={true}
|
|
64
|
+
onClear={() => alert('Notification cleared')}
|
|
61
65
|
>
|
|
62
66
|
Fixes a bug when saving the game in certain conditions.
|
|
63
67
|
</NotificationLine>
|
|
@@ -83,5 +87,6 @@ describe('NotificationCenter', () => {
|
|
|
83
87
|
expect(
|
|
84
88
|
getByText('Fixes a bug when saving the game in certain conditions.'),
|
|
85
89
|
).toBeInTheDocument()
|
|
90
|
+
expect(getAllByLabelText('Clear notification')).toHaveLength(2)
|
|
86
91
|
})
|
|
87
92
|
})
|