@mirai/ui 1.0.260 → 1.0.261
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/build/components/Notification/Notification.js +2 -3
- package/build/components/Notification/Notification.js.map +1 -1
- package/build/components/Notification/Notification.module.css +17 -28
- package/build/components/Notification/__tests__/__snapshots__/Notification.test.js.snap +22 -22
- package/build/theme/default.theme.css +8 -8
- package/package.json +1 -1
|
@@ -34,13 +34,12 @@ var Notification = function Notification(_ref) {
|
|
|
34
34
|
className: (0, _helpers.styles)(_NotificationModule.default.notification, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : info ? _NotificationModule.default.info : undefined, inline ? _NotificationModule.default.inline : _NotificationModule.default.outlined, large ? _NotificationModule.default.large : small ? _NotificationModule.default.small : undefined, wide && _NotificationModule.default.wide, others.className)
|
|
35
35
|
}), /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
36
36
|
headline: true,
|
|
37
|
-
level: large ? 1 : small
|
|
37
|
+
level: large ? 1 : small && !title ? 3 : 2,
|
|
38
38
|
value: (0, _helpers.getIconState)({
|
|
39
39
|
error: error,
|
|
40
40
|
success: success,
|
|
41
41
|
warning: warning
|
|
42
|
-
})
|
|
43
|
-
className: (0, _helpers.styles)(_NotificationModule.default.icon, (small || !title) && !large && _NotificationModule.default.small)
|
|
42
|
+
})
|
|
44
43
|
}), /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
45
44
|
className: _NotificationModule.default.texts
|
|
46
45
|
}, title && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","names":["Notification","children","error","info","inline","large","small","success","title","warning","wide","onClose","others","role","styles","style","notification","undefined","outlined","className","getIconState","
|
|
1
|
+
{"version":3,"file":"Notification.js","names":["Notification","children","error","info","inline","large","small","success","title","warning","wide","onClose","others","role","styles","style","notification","undefined","outlined","className","getIconState","texts","testId","ICON","CLOSE","displayName","propTypes","PropTypes","any","isRequired","bool","string","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({\n children,\n error,\n info,\n inline = false,\n large,\n small,\n success,\n title,\n warning,\n wide,\n onClose,\n ...others\n}) => (\n <View\n {...others}\n row\n role={others.role || 'notification'}\n className={styles(\n style.notification,\n error ? style.error : warning ? style.warning : success ? style.success : info ? style.info : undefined,\n inline ? style.inline : style.outlined,\n large ? style.large : small ? style.small : undefined,\n wide && style.wide,\n others.className,\n )}\n >\n <Icon headline level={large ? 1 : small && !title ? 3 : 2} value={getIconState({ error, success, warning })} />\n\n <View className={style.texts}>\n {title && (\n <Text action={small} bold headline={large}>\n {title}\n </Text>\n )}\n {children && (\n <Text action={!small} small={small}>\n {children}\n </Text>\n )}\n </View>\n\n {!inline && !large && onClose && (\n <Pressable onPress={onClose} testId={others.testId ? `${others.testId}-button-close` : undefined}>\n <Icon value={ICON.CLOSE} />\n </Pressable>\n )}\n </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n children: PropTypes.any.isRequired,\n error: PropTypes.bool,\n info: PropTypes.bool,\n inline: PropTypes.bool,\n large: PropTypes.bool,\n small: PropTypes.bool,\n success: PropTypes.bool,\n title: PropTypes.string,\n warning: PropTypes.bool,\n wide: PropTypes.bool,\n onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":"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"}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.notification .info {
|
|
24
|
-
color: var(--mirai-ui-
|
|
24
|
+
color: var(--mirai-ui-inysfo);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
/* -- outlined ------------------------------------------------------------------------------------------------------ */
|
|
@@ -55,43 +55,32 @@
|
|
|
55
55
|
background-color: var(--mirai-ui-info-background);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
/* -- <
|
|
59
|
-
.notification .
|
|
60
|
-
|
|
61
|
-
border-radius: 50%;
|
|
62
|
-
padding: calc(var(--mirai-ui-space-XS) / 2);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.notification.large .icon {
|
|
66
|
-
padding: var(--mirai-ui-space-XS);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.notification:not(.warning) .icon {
|
|
70
|
-
color: var(--mirai-ui-base);
|
|
58
|
+
/* -- <Text>s ------------------------------------------------------------------------------------------------------- */
|
|
59
|
+
.notification .texts {
|
|
60
|
+
flex: 1;
|
|
71
61
|
}
|
|
72
62
|
|
|
73
|
-
.notification.
|
|
74
|
-
|
|
63
|
+
.notification.large .texts {
|
|
64
|
+
align-items: center;
|
|
65
|
+
gap: var(--mirai-ui-notification-padding-small);
|
|
75
66
|
}
|
|
76
67
|
|
|
77
|
-
.notification.
|
|
78
|
-
|
|
68
|
+
.notification.large .texts * {
|
|
69
|
+
text-align: center;
|
|
79
70
|
}
|
|
80
71
|
|
|
81
|
-
.notification.
|
|
82
|
-
|
|
72
|
+
.notification.error * {
|
|
73
|
+
color: var(--mirai-ui-error);
|
|
83
74
|
}
|
|
84
75
|
|
|
85
|
-
.notification.
|
|
86
|
-
|
|
76
|
+
.notification.warning * {
|
|
77
|
+
color: var(--mirai-ui-warning);
|
|
87
78
|
}
|
|
88
79
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
flex: 1;
|
|
80
|
+
.notification.success * {
|
|
81
|
+
color: var(--mirai-ui-success);
|
|
92
82
|
}
|
|
93
83
|
|
|
94
|
-
.notification.
|
|
95
|
-
|
|
96
|
-
gap: var(--mirai-ui-notification-padding-small);
|
|
84
|
+
.notification.info * {
|
|
85
|
+
color: var(--mirai-ui-info);
|
|
97
86
|
}
|
|
@@ -6,7 +6,7 @@ exports[`component:<Notification> inherit:className 1`] = `
|
|
|
6
6
|
class="view row notification outlined mirai"
|
|
7
7
|
>
|
|
8
8
|
<span
|
|
9
|
-
class="icon headline-
|
|
9
|
+
class="icon headline-2"
|
|
10
10
|
>
|
|
11
11
|
<svg
|
|
12
12
|
fill="currentColor"
|
|
@@ -45,7 +45,7 @@ exports[`component:<Notification> prop:error & inline 1`] = `
|
|
|
45
45
|
class="view row notification error inline"
|
|
46
46
|
>
|
|
47
47
|
<span
|
|
48
|
-
class="icon headline-
|
|
48
|
+
class="icon headline-2"
|
|
49
49
|
>
|
|
50
50
|
<svg
|
|
51
51
|
fill="currentColor"
|
|
@@ -84,7 +84,7 @@ exports[`component:<Notification> prop:error & large 1`] = `
|
|
|
84
84
|
class="view row notification error outlined large"
|
|
85
85
|
>
|
|
86
86
|
<span
|
|
87
|
-
class="icon headline-1
|
|
87
|
+
class="icon headline-1"
|
|
88
88
|
>
|
|
89
89
|
<svg
|
|
90
90
|
fill="currentColor"
|
|
@@ -123,7 +123,7 @@ exports[`component:<Notification> prop:error & small 1`] = `
|
|
|
123
123
|
class="view row notification error outlined small"
|
|
124
124
|
>
|
|
125
125
|
<span
|
|
126
|
-
class="icon headline-3
|
|
126
|
+
class="icon headline-3"
|
|
127
127
|
>
|
|
128
128
|
<svg
|
|
129
129
|
fill="currentColor"
|
|
@@ -162,7 +162,7 @@ exports[`component:<Notification> prop:error 1`] = `
|
|
|
162
162
|
class="view row notification error outlined"
|
|
163
163
|
>
|
|
164
164
|
<span
|
|
165
|
-
class="icon headline-
|
|
165
|
+
class="icon headline-2"
|
|
166
166
|
>
|
|
167
167
|
<svg
|
|
168
168
|
fill="currentColor"
|
|
@@ -201,7 +201,7 @@ exports[`component:<Notification> prop:info & inline 1`] = `
|
|
|
201
201
|
class="view row notification info inline"
|
|
202
202
|
>
|
|
203
203
|
<span
|
|
204
|
-
class="icon headline-
|
|
204
|
+
class="icon headline-2"
|
|
205
205
|
>
|
|
206
206
|
<svg
|
|
207
207
|
fill="currentColor"
|
|
@@ -240,7 +240,7 @@ exports[`component:<Notification> prop:info & large 1`] = `
|
|
|
240
240
|
class="view row notification info outlined large"
|
|
241
241
|
>
|
|
242
242
|
<span
|
|
243
|
-
class="icon headline-1
|
|
243
|
+
class="icon headline-1"
|
|
244
244
|
>
|
|
245
245
|
<svg
|
|
246
246
|
fill="currentColor"
|
|
@@ -279,7 +279,7 @@ exports[`component:<Notification> prop:info & small 1`] = `
|
|
|
279
279
|
class="view row notification info outlined small"
|
|
280
280
|
>
|
|
281
281
|
<span
|
|
282
|
-
class="icon headline-3
|
|
282
|
+
class="icon headline-3"
|
|
283
283
|
>
|
|
284
284
|
<svg
|
|
285
285
|
fill="currentColor"
|
|
@@ -318,7 +318,7 @@ exports[`component:<Notification> prop:info 1`] = `
|
|
|
318
318
|
class="view row notification info outlined"
|
|
319
319
|
>
|
|
320
320
|
<span
|
|
321
|
-
class="icon headline-
|
|
321
|
+
class="icon headline-2"
|
|
322
322
|
>
|
|
323
323
|
<svg
|
|
324
324
|
fill="currentColor"
|
|
@@ -358,7 +358,7 @@ exports[`component:<Notification> prop:onClose 1`] = `
|
|
|
358
358
|
data-testid="mirai-onClose"
|
|
359
359
|
>
|
|
360
360
|
<span
|
|
361
|
-
class="icon headline-
|
|
361
|
+
class="icon headline-2"
|
|
362
362
|
>
|
|
363
363
|
<svg
|
|
364
364
|
fill="currentColor"
|
|
@@ -423,7 +423,7 @@ exports[`component:<Notification> prop:success & inline 1`] = `
|
|
|
423
423
|
class="view row notification success inline"
|
|
424
424
|
>
|
|
425
425
|
<span
|
|
426
|
-
class="icon headline-
|
|
426
|
+
class="icon headline-2"
|
|
427
427
|
>
|
|
428
428
|
<svg
|
|
429
429
|
fill="currentColor"
|
|
@@ -462,7 +462,7 @@ exports[`component:<Notification> prop:success & large 1`] = `
|
|
|
462
462
|
class="view row notification success outlined large"
|
|
463
463
|
>
|
|
464
464
|
<span
|
|
465
|
-
class="icon headline-1
|
|
465
|
+
class="icon headline-1"
|
|
466
466
|
>
|
|
467
467
|
<svg
|
|
468
468
|
fill="currentColor"
|
|
@@ -501,7 +501,7 @@ exports[`component:<Notification> prop:success & small 1`] = `
|
|
|
501
501
|
class="view row notification success outlined small"
|
|
502
502
|
>
|
|
503
503
|
<span
|
|
504
|
-
class="icon headline-3
|
|
504
|
+
class="icon headline-3"
|
|
505
505
|
>
|
|
506
506
|
<svg
|
|
507
507
|
fill="currentColor"
|
|
@@ -540,7 +540,7 @@ exports[`component:<Notification> prop:success 1`] = `
|
|
|
540
540
|
class="view row notification success outlined"
|
|
541
541
|
>
|
|
542
542
|
<span
|
|
543
|
-
class="icon headline-
|
|
543
|
+
class="icon headline-2"
|
|
544
544
|
>
|
|
545
545
|
<svg
|
|
546
546
|
fill="currentColor"
|
|
@@ -579,7 +579,7 @@ exports[`component:<Notification> prop:title 1`] = `
|
|
|
579
579
|
class="view row notification outlined"
|
|
580
580
|
>
|
|
581
581
|
<span
|
|
582
|
-
class="icon headline-2
|
|
582
|
+
class="icon headline-2"
|
|
583
583
|
>
|
|
584
584
|
<svg
|
|
585
585
|
fill="currentColor"
|
|
@@ -623,7 +623,7 @@ exports[`component:<Notification> prop:warning & inline 1`] = `
|
|
|
623
623
|
class="view row notification warning inline"
|
|
624
624
|
>
|
|
625
625
|
<span
|
|
626
|
-
class="icon headline-
|
|
626
|
+
class="icon headline-2"
|
|
627
627
|
>
|
|
628
628
|
<svg
|
|
629
629
|
fill="currentColor"
|
|
@@ -658,7 +658,7 @@ exports[`component:<Notification> prop:warning & large 1`] = `
|
|
|
658
658
|
class="view row notification warning outlined large"
|
|
659
659
|
>
|
|
660
660
|
<span
|
|
661
|
-
class="icon headline-1
|
|
661
|
+
class="icon headline-1"
|
|
662
662
|
>
|
|
663
663
|
<svg
|
|
664
664
|
fill="currentColor"
|
|
@@ -693,7 +693,7 @@ exports[`component:<Notification> prop:warning & small 1`] = `
|
|
|
693
693
|
class="view row notification warning outlined small"
|
|
694
694
|
>
|
|
695
695
|
<span
|
|
696
|
-
class="icon headline-3
|
|
696
|
+
class="icon headline-3"
|
|
697
697
|
>
|
|
698
698
|
<svg
|
|
699
699
|
fill="currentColor"
|
|
@@ -728,7 +728,7 @@ exports[`component:<Notification> prop:warning 1`] = `
|
|
|
728
728
|
class="view row notification warning outlined"
|
|
729
729
|
>
|
|
730
730
|
<span
|
|
731
|
-
class="icon headline-
|
|
731
|
+
class="icon headline-2"
|
|
732
732
|
>
|
|
733
733
|
<svg
|
|
734
734
|
fill="currentColor"
|
|
@@ -763,7 +763,7 @@ exports[`component:<Notification> prop:wide 1`] = `
|
|
|
763
763
|
class="view row notification outlined wide"
|
|
764
764
|
>
|
|
765
765
|
<span
|
|
766
|
-
class="icon headline-
|
|
766
|
+
class="icon headline-2"
|
|
767
767
|
>
|
|
768
768
|
<svg
|
|
769
769
|
fill="currentColor"
|
|
@@ -802,7 +802,7 @@ exports[`component:<Notification> renders 1`] = `
|
|
|
802
802
|
class="view row notification outlined"
|
|
803
803
|
>
|
|
804
804
|
<span
|
|
805
|
-
class="icon headline-
|
|
805
|
+
class="icon headline-2"
|
|
806
806
|
>
|
|
807
807
|
<svg
|
|
808
808
|
fill="currentColor"
|
|
@@ -842,7 +842,7 @@ exports[`component:<Notification> testId 1`] = `
|
|
|
842
842
|
data-testid="mirai"
|
|
843
843
|
>
|
|
844
844
|
<span
|
|
845
|
-
class="icon headline-
|
|
845
|
+
class="icon headline-2"
|
|
846
846
|
>
|
|
847
847
|
<svg
|
|
848
848
|
fill="currentColor"
|
|
@@ -46,17 +46,17 @@
|
|
|
46
46
|
--mirai-ui-accent-light: #88aedc;
|
|
47
47
|
--mirai-ui-accent-dark: #224876;
|
|
48
48
|
|
|
49
|
-
--mirai-ui-error: #
|
|
50
|
-
--mirai-ui-error-background: #
|
|
49
|
+
--mirai-ui-error: #d32f2f;
|
|
50
|
+
--mirai-ui-error-background: #fdeded;
|
|
51
51
|
|
|
52
|
-
--mirai-ui-warning: #
|
|
53
|
-
--mirai-ui-warning-background: #
|
|
52
|
+
--mirai-ui-warning: #663c00;
|
|
53
|
+
--mirai-ui-warning-background: #fff4e5;
|
|
54
54
|
|
|
55
|
-
--mirai-ui-success: #
|
|
56
|
-
--mirai-ui-success-background: #
|
|
55
|
+
--mirai-ui-success: #1e4620;
|
|
56
|
+
--mirai-ui-success-background: #edf7ed;
|
|
57
57
|
|
|
58
|
-
--mirai-ui-info: #
|
|
59
|
-
--mirai-ui-info-background: #
|
|
58
|
+
--mirai-ui-info: #014361;
|
|
59
|
+
--mirai-ui-info-background: #e6f5fd;
|
|
60
60
|
|
|
61
61
|
/* spacing */
|
|
62
62
|
--mirai-ui-space-XS: 8px;
|