@zendeskgarden/react-notifications 9.0.0-next.8 → 9.0.0-next.9
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/esm/elements/Alert.js +1 -1
- package/dist/esm/elements/Notification.js +10 -10
- package/dist/esm/elements/global-alert/GlobalAlert.js +7 -6
- package/dist/esm/styled/StyledAlert.js +1 -1
- package/dist/esm/styled/StyledIcon.js +3 -10
- package/dist/esm/styled/StyledNotification.js +1 -1
- package/dist/esm/styled/StyledWell.js +1 -1
- package/dist/esm/styled/content/StyledClose.js +1 -1
- package/dist/esm/styled/content/StyledParagraph.js +1 -1
- package/dist/esm/styled/content/StyledTitle.js +1 -1
- package/dist/esm/styled/global-alert/StyledGlobalAlert.js +1 -1
- package/dist/esm/styled/global-alert/StyledGlobalAlertButton.js +1 -1
- package/dist/esm/styled/global-alert/StyledGlobalAlertClose.js +1 -1
- package/dist/esm/styled/global-alert/StyledGlobalAlertContent.js +1 -1
- package/dist/esm/styled/global-alert/StyledGlobalAlertIcon.js +3 -10
- package/dist/esm/styled/global-alert/StyledGlobalAlertTitle.js +1 -1
- package/dist/index.cjs.js +33 -44
- package/dist/typings/styled/StyledIcon.d.ts +2 -2
- package/dist/typings/styled/global-alert/StyledGlobalAlertButton.d.ts +2 -2
- package/dist/typings/styled/global-alert/StyledGlobalAlertIcon.d.ts +2 -2
- package/package.json +4 -4
|
@@ -41,7 +41,7 @@ const AlertComponent = React__default.forwardRef((_ref, ref) => {
|
|
|
41
41
|
hue: hue,
|
|
42
42
|
role: role === undefined ? 'alert' : role
|
|
43
43
|
}, props), React__default.createElement(StyledIcon, {
|
|
44
|
-
hue: hue
|
|
44
|
+
$hue: hue
|
|
45
45
|
}, React__default.createElement(Icon, null)), props.children));
|
|
46
46
|
});
|
|
47
47
|
AlertComponent.displayName = 'Alert';
|
|
@@ -29,20 +29,20 @@ import { Close } from './content/Close.js';
|
|
|
29
29
|
|
|
30
30
|
const NotificationComponent = forwardRef((_ref, ref) => {
|
|
31
31
|
let {
|
|
32
|
-
|
|
32
|
+
children,
|
|
33
|
+
type,
|
|
33
34
|
...props
|
|
34
35
|
} = _ref;
|
|
35
|
-
const Icon =
|
|
36
|
-
const hue =
|
|
36
|
+
const Icon = type ? validationIcons[type] : SvgInfoStroke;
|
|
37
|
+
const hue = type && validationHues[type];
|
|
37
38
|
return React__default.createElement(StyledNotification, Object.assign({
|
|
38
39
|
ref: ref,
|
|
39
|
-
type:
|
|
40
|
-
isFloating: true
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}, React__default.createElement(Icon, null)), props.children);
|
|
40
|
+
type: type,
|
|
41
|
+
isFloating: true,
|
|
42
|
+
role: "alert"
|
|
43
|
+
}, props), type && React__default.createElement(StyledIcon, {
|
|
44
|
+
$hue: hue
|
|
45
|
+
}, React__default.createElement(Icon, null)), children);
|
|
46
46
|
});
|
|
47
47
|
NotificationComponent.displayName = 'Notification';
|
|
48
48
|
NotificationComponent.propTypes = {
|
|
@@ -36,6 +36,12 @@ const GlobalAlertComponent = forwardRef((_ref, ref) => {
|
|
|
36
36
|
type,
|
|
37
37
|
...props
|
|
38
38
|
} = _ref;
|
|
39
|
+
const icon = {
|
|
40
|
+
success: React__default.createElement(SvgCheckCircleStroke, null),
|
|
41
|
+
error: React__default.createElement(SvgAlertErrorStroke, null),
|
|
42
|
+
warning: React__default.createElement(SvgAlertWarningStroke, null),
|
|
43
|
+
info: React__default.createElement(SvgInfoStroke, null)
|
|
44
|
+
}[type];
|
|
39
45
|
return React__default.createElement(GlobalAlertContext.Provider, {
|
|
40
46
|
value: useMemo(() => ({
|
|
41
47
|
type
|
|
@@ -44,12 +50,7 @@ const GlobalAlertComponent = forwardRef((_ref, ref) => {
|
|
|
44
50
|
ref: ref,
|
|
45
51
|
role: "status",
|
|
46
52
|
alertType: type
|
|
47
|
-
}, props),
|
|
48
|
-
success: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgCheckCircleStroke, null)),
|
|
49
|
-
error: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgAlertErrorStroke, null)),
|
|
50
|
-
warning: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgAlertWarningStroke, null)),
|
|
51
|
-
info: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgInfoStroke, null))
|
|
52
|
-
}[type], props.children));
|
|
53
|
+
}, props), React__default.createElement(StyledGlobalAlertIcon, null, icon), props.children));
|
|
53
54
|
});
|
|
54
55
|
GlobalAlertComponent.displayName = 'GlobalAlert';
|
|
55
56
|
const GlobalAlert = GlobalAlertComponent;
|
|
@@ -13,7 +13,7 @@ const COMPONENT_ID = 'notifications.alert';
|
|
|
13
13
|
const colorStyles = props => css(["", "{color:", ";}"], StyledTitle, props.hue && getColorV8(props.hue, 800, props.theme));
|
|
14
14
|
const StyledAlert = styled(StyledBase).attrs({
|
|
15
15
|
'data-garden-id': COMPONENT_ID,
|
|
16
|
-
'data-garden-version': '9.0.0-next.
|
|
16
|
+
'data-garden-version': '9.0.0-next.9'
|
|
17
17
|
}).withConfig({
|
|
18
18
|
displayName: "StyledAlert",
|
|
19
19
|
componentId: "sc-fyn8jp-0"
|
|
@@ -4,20 +4,13 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import React__default, { Children } from 'react';
|
|
8
7
|
import styled from 'styled-components';
|
|
9
|
-
import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
8
|
+
import { StyledBaseIcon, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
10
9
|
|
|
11
|
-
const StyledIcon = styled(
|
|
12
|
-
let {
|
|
13
|
-
children,
|
|
14
|
-
...props
|
|
15
|
-
} = _ref;
|
|
16
|
-
return React__default.cloneElement(Children.only(children), props);
|
|
17
|
-
}).withConfig({
|
|
10
|
+
const StyledIcon = styled(StyledBaseIcon).withConfig({
|
|
18
11
|
displayName: "StyledIcon",
|
|
19
12
|
componentId: "sc-msklws-0"
|
|
20
|
-
})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props
|
|
13
|
+
})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.$hue && getColorV8(props.$hue, props.$hue === 'warningHue' ? 700 : 600, props.theme));
|
|
21
14
|
StyledIcon.defaultProps = {
|
|
22
15
|
theme: DEFAULT_THEME
|
|
23
16
|
};
|
|
@@ -47,7 +47,7 @@ const colorStyles = props => {
|
|
|
47
47
|
};
|
|
48
48
|
const StyledNotification = styled(StyledBase).attrs({
|
|
49
49
|
'data-garden-id': COMPONENT_ID,
|
|
50
|
-
'data-garden-version': '9.0.0-next.
|
|
50
|
+
'data-garden-version': '9.0.0-next.9'
|
|
51
51
|
}).withConfig({
|
|
52
52
|
displayName: "StyledNotification",
|
|
53
53
|
componentId: "sc-uf6jh-0"
|
|
@@ -11,7 +11,7 @@ import { StyledBase } from './StyledBase.js';
|
|
|
11
11
|
const COMPONENT_ID = 'notifications.well';
|
|
12
12
|
const StyledWell = styled(StyledBase).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.9'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledWell",
|
|
17
17
|
componentId: "sc-a5831c-0"
|
|
@@ -10,7 +10,7 @@ import { getColorV8, focusStyles, retrieveComponentStyles, DEFAULT_THEME } from
|
|
|
10
10
|
const COMPONENT_ID = 'notifications.close';
|
|
11
11
|
const StyledClose = styled.button.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledClose",
|
|
16
16
|
componentId: "sc-1mr9nx1-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'notifications.paragraph';
|
|
11
11
|
const StyledParagraph = styled.p.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledParagraph",
|
|
16
16
|
componentId: "sc-12tmd6p-0"
|
|
@@ -10,7 +10,7 @@ import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgard
|
|
|
10
10
|
const COMPONENT_ID = 'notifications.title';
|
|
11
11
|
const StyledTitle = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledTitle",
|
|
16
16
|
componentId: "sc-xx4jsv-0"
|
|
@@ -73,7 +73,7 @@ const sizeStyles = props => {
|
|
|
73
73
|
};
|
|
74
74
|
const StyledGlobalAlert = styled.div.attrs({
|
|
75
75
|
'data-garden-id': COMPONENT_ID,
|
|
76
|
-
'data-garden-version': '9.0.0-next.
|
|
76
|
+
'data-garden-version': '9.0.0-next.9'
|
|
77
77
|
}).withConfig({
|
|
78
78
|
displayName: "StyledGlobalAlert",
|
|
79
79
|
componentId: "sc-k6rimt-0"
|
|
@@ -56,7 +56,7 @@ function sizeStyles(props) {
|
|
|
56
56
|
}
|
|
57
57
|
const StyledGlobalAlertButton = styled(Button).attrs({
|
|
58
58
|
'data-garden-id': COMPONENT_ID,
|
|
59
|
-
'data-garden-version': '9.0.0-next.
|
|
59
|
+
'data-garden-version': '9.0.0-next.9',
|
|
60
60
|
focusInset: false,
|
|
61
61
|
isDanger: false,
|
|
62
62
|
isLink: false,
|
|
@@ -61,7 +61,7 @@ const sizeStyles = props => {
|
|
|
61
61
|
};
|
|
62
62
|
const StyledGlobalAlertClose = styled(IconButton).attrs({
|
|
63
63
|
'data-garden-id': COMPONENT_ID,
|
|
64
|
-
'data-garden-version': '9.0.0-next.
|
|
64
|
+
'data-garden-version': '9.0.0-next.9',
|
|
65
65
|
size: 'small'
|
|
66
66
|
}).withConfig({
|
|
67
67
|
displayName: "StyledGlobalAlertClose",
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'notifications.global-alert.content';
|
|
11
11
|
const StyledGlobalAlertContent = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledGlobalAlertContent",
|
|
16
16
|
componentId: "sc-rept0u-0"
|
|
@@ -4,10 +4,9 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import React__default, { Children } from 'react';
|
|
8
7
|
import styled, { css } from 'styled-components';
|
|
9
8
|
import { math } from 'polished';
|
|
10
|
-
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
11
10
|
|
|
12
11
|
const COMPONENT_ID = 'notifications.global-alert.icon';
|
|
13
12
|
const sizeStyles = props => {
|
|
@@ -16,15 +15,9 @@ const sizeStyles = props => {
|
|
|
16
15
|
const marginHorizontal = `${props.theme.space.base * 2}px`;
|
|
17
16
|
return css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
|
|
18
17
|
};
|
|
19
|
-
const StyledGlobalAlertIcon = styled(
|
|
20
|
-
let {
|
|
21
|
-
children,
|
|
22
|
-
...props
|
|
23
|
-
} = _ref;
|
|
24
|
-
return React__default.cloneElement(Children.only(children), props);
|
|
25
|
-
}).attrs({
|
|
18
|
+
const StyledGlobalAlertIcon = styled(StyledBaseIcon).attrs({
|
|
26
19
|
'data-garden-id': COMPONENT_ID,
|
|
27
|
-
'data-garden-version': '9.0.0-next.
|
|
20
|
+
'data-garden-version': '9.0.0-next.9'
|
|
28
21
|
}).withConfig({
|
|
29
22
|
displayName: "StyledGlobalAlertIcon",
|
|
30
23
|
componentId: "sc-84ne9k-0"
|
|
@@ -26,7 +26,7 @@ const colorStyles = props => {
|
|
|
26
26
|
};
|
|
27
27
|
const StyledGlobalAlertTitle = styled.div.attrs({
|
|
28
28
|
'data-garden-id': COMPONENT_ID,
|
|
29
|
-
'data-garden-version': '9.0.0-next.
|
|
29
|
+
'data-garden-version': '9.0.0-next.9'
|
|
30
30
|
}).withConfig({
|
|
31
31
|
displayName: "StyledGlobalAlertTitle",
|
|
32
32
|
componentId: "sc-10clqbo-0"
|
package/dist/index.cjs.js
CHANGED
|
@@ -44,7 +44,7 @@ const TYPE = ['success', 'warning', 'error', 'info'];
|
|
|
44
44
|
const COMPONENT_ID$b = 'notifications.close';
|
|
45
45
|
const StyledClose = styled__default.default.button.attrs({
|
|
46
46
|
'data-garden-id': COMPONENT_ID$b,
|
|
47
|
-
'data-garden-version': '9.0.0-next.
|
|
47
|
+
'data-garden-version': '9.0.0-next.9'
|
|
48
48
|
}).withConfig({
|
|
49
49
|
displayName: "StyledClose",
|
|
50
50
|
componentId: "sc-1mr9nx1-0"
|
|
@@ -59,7 +59,7 @@ StyledClose.defaultProps = {
|
|
|
59
59
|
const COMPONENT_ID$a = 'notifications.paragraph';
|
|
60
60
|
const StyledParagraph = styled__default.default.p.attrs({
|
|
61
61
|
'data-garden-id': COMPONENT_ID$a,
|
|
62
|
-
'data-garden-version': '9.0.0-next.
|
|
62
|
+
'data-garden-version': '9.0.0-next.9'
|
|
63
63
|
}).withConfig({
|
|
64
64
|
displayName: "StyledParagraph",
|
|
65
65
|
componentId: "sc-12tmd6p-0"
|
|
@@ -71,7 +71,7 @@ StyledParagraph.defaultProps = {
|
|
|
71
71
|
const COMPONENT_ID$9 = 'notifications.title';
|
|
72
72
|
const StyledTitle = styled__default.default.div.attrs({
|
|
73
73
|
'data-garden-id': COMPONENT_ID$9,
|
|
74
|
-
'data-garden-version': '9.0.0-next.
|
|
74
|
+
'data-garden-version': '9.0.0-next.9'
|
|
75
75
|
}).withConfig({
|
|
76
76
|
displayName: "StyledTitle",
|
|
77
77
|
componentId: "sc-xx4jsv-0"
|
|
@@ -128,7 +128,7 @@ const COMPONENT_ID$8 = 'notifications.alert';
|
|
|
128
128
|
const colorStyles$5 = props => styled.css(["", "{color:", ";}"], StyledTitle, props.hue && reactTheming.getColorV8(props.hue, 800, props.theme));
|
|
129
129
|
const StyledAlert = styled__default.default(StyledBase).attrs({
|
|
130
130
|
'data-garden-id': COMPONENT_ID$8,
|
|
131
|
-
'data-garden-version': '9.0.0-next.
|
|
131
|
+
'data-garden-version': '9.0.0-next.9'
|
|
132
132
|
}).withConfig({
|
|
133
133
|
displayName: "StyledAlert",
|
|
134
134
|
componentId: "sc-fyn8jp-0"
|
|
@@ -173,7 +173,7 @@ const colorStyles$4 = props => {
|
|
|
173
173
|
};
|
|
174
174
|
const StyledNotification = styled__default.default(StyledBase).attrs({
|
|
175
175
|
'data-garden-id': COMPONENT_ID$7,
|
|
176
|
-
'data-garden-version': '9.0.0-next.
|
|
176
|
+
'data-garden-version': '9.0.0-next.9'
|
|
177
177
|
}).withConfig({
|
|
178
178
|
displayName: "StyledNotification",
|
|
179
179
|
componentId: "sc-uf6jh-0"
|
|
@@ -188,7 +188,7 @@ StyledNotification.defaultProps = {
|
|
|
188
188
|
const COMPONENT_ID$6 = 'notifications.well';
|
|
189
189
|
const StyledWell = styled__default.default(StyledBase).attrs({
|
|
190
190
|
'data-garden-id': COMPONENT_ID$6,
|
|
191
|
-
'data-garden-version': '9.0.0-next.
|
|
191
|
+
'data-garden-version': '9.0.0-next.9'
|
|
192
192
|
}).withConfig({
|
|
193
193
|
displayName: "StyledWell",
|
|
194
194
|
componentId: "sc-a5831c-0"
|
|
@@ -197,16 +197,10 @@ StyledWell.defaultProps = {
|
|
|
197
197
|
theme: reactTheming.DEFAULT_THEME
|
|
198
198
|
};
|
|
199
199
|
|
|
200
|
-
const StyledIcon = styled__default.default(
|
|
201
|
-
let {
|
|
202
|
-
children,
|
|
203
|
-
...props
|
|
204
|
-
} = _ref;
|
|
205
|
-
return React__namespace.default.cloneElement(React.Children.only(children), props);
|
|
206
|
-
}).withConfig({
|
|
200
|
+
const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).withConfig({
|
|
207
201
|
displayName: "StyledIcon",
|
|
208
202
|
componentId: "sc-msklws-0"
|
|
209
|
-
})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props
|
|
203
|
+
})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.$hue && reactTheming.getColorV8(props.$hue, props.$hue === 'warningHue' ? 700 : 600, props.theme));
|
|
210
204
|
StyledIcon.defaultProps = {
|
|
211
205
|
theme: reactTheming.DEFAULT_THEME
|
|
212
206
|
};
|
|
@@ -277,7 +271,7 @@ const sizeStyles$3 = props => {
|
|
|
277
271
|
};
|
|
278
272
|
const StyledGlobalAlert = styled__default.default.div.attrs({
|
|
279
273
|
'data-garden-id': COMPONENT_ID$5,
|
|
280
|
-
'data-garden-version': '9.0.0-next.
|
|
274
|
+
'data-garden-version': '9.0.0-next.9'
|
|
281
275
|
}).withConfig({
|
|
282
276
|
displayName: "StyledGlobalAlert",
|
|
283
277
|
componentId: "sc-k6rimt-0"
|
|
@@ -339,7 +333,7 @@ const sizeStyles$2 = props => {
|
|
|
339
333
|
};
|
|
340
334
|
const StyledGlobalAlertClose = styled__default.default(reactButtons.IconButton).attrs({
|
|
341
335
|
'data-garden-id': COMPONENT_ID$4,
|
|
342
|
-
'data-garden-version': '9.0.0-next.
|
|
336
|
+
'data-garden-version': '9.0.0-next.9',
|
|
343
337
|
size: 'small'
|
|
344
338
|
}).withConfig({
|
|
345
339
|
displayName: "StyledGlobalAlertClose",
|
|
@@ -396,7 +390,7 @@ function sizeStyles$1(props) {
|
|
|
396
390
|
}
|
|
397
391
|
const StyledGlobalAlertButton = styled__default.default(reactButtons.Button).attrs({
|
|
398
392
|
'data-garden-id': COMPONENT_ID$3,
|
|
399
|
-
'data-garden-version': '9.0.0-next.
|
|
393
|
+
'data-garden-version': '9.0.0-next.9',
|
|
400
394
|
focusInset: false,
|
|
401
395
|
isDanger: false,
|
|
402
396
|
isLink: false,
|
|
@@ -415,7 +409,7 @@ StyledGlobalAlertButton.defaultProps = {
|
|
|
415
409
|
const COMPONENT_ID$2 = 'notifications.global-alert.content';
|
|
416
410
|
const StyledGlobalAlertContent = styled__default.default.div.attrs({
|
|
417
411
|
'data-garden-id': COMPONENT_ID$2,
|
|
418
|
-
'data-garden-version': '9.0.0-next.
|
|
412
|
+
'data-garden-version': '9.0.0-next.9'
|
|
419
413
|
}).withConfig({
|
|
420
414
|
displayName: "StyledGlobalAlertContent",
|
|
421
415
|
componentId: "sc-rept0u-0"
|
|
@@ -431,15 +425,9 @@ const sizeStyles = props => {
|
|
|
431
425
|
const marginHorizontal = `${props.theme.space.base * 2}px`;
|
|
432
426
|
return styled.css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
|
|
433
427
|
};
|
|
434
|
-
const StyledGlobalAlertIcon = styled__default.default(
|
|
435
|
-
let {
|
|
436
|
-
children,
|
|
437
|
-
...props
|
|
438
|
-
} = _ref;
|
|
439
|
-
return React__namespace.default.cloneElement(React.Children.only(children), props);
|
|
440
|
-
}).attrs({
|
|
428
|
+
const StyledGlobalAlertIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
441
429
|
'data-garden-id': COMPONENT_ID$1,
|
|
442
|
-
'data-garden-version': '9.0.0-next.
|
|
430
|
+
'data-garden-version': '9.0.0-next.9'
|
|
443
431
|
}).withConfig({
|
|
444
432
|
displayName: "StyledGlobalAlertIcon",
|
|
445
433
|
componentId: "sc-84ne9k-0"
|
|
@@ -467,7 +455,7 @@ const colorStyles = props => {
|
|
|
467
455
|
};
|
|
468
456
|
const StyledGlobalAlertTitle = styled__default.default.div.attrs({
|
|
469
457
|
'data-garden-id': COMPONENT_ID,
|
|
470
|
-
'data-garden-version': '9.0.0-next.
|
|
458
|
+
'data-garden-version': '9.0.0-next.9'
|
|
471
459
|
}).withConfig({
|
|
472
460
|
displayName: "StyledGlobalAlertTitle",
|
|
473
461
|
componentId: "sc-10clqbo-0"
|
|
@@ -649,7 +637,7 @@ const AlertComponent = React__namespace.default.forwardRef((_ref, ref) => {
|
|
|
649
637
|
hue: hue,
|
|
650
638
|
role: role === undefined ? 'alert' : role
|
|
651
639
|
}, props), React__namespace.default.createElement(StyledIcon, {
|
|
652
|
-
hue: hue
|
|
640
|
+
$hue: hue
|
|
653
641
|
}, React__namespace.default.createElement(Icon, null)), props.children));
|
|
654
642
|
});
|
|
655
643
|
AlertComponent.displayName = 'Alert';
|
|
@@ -663,20 +651,20 @@ Alert.Title = Title;
|
|
|
663
651
|
|
|
664
652
|
const NotificationComponent = React.forwardRef((_ref, ref) => {
|
|
665
653
|
let {
|
|
666
|
-
|
|
654
|
+
children,
|
|
655
|
+
type,
|
|
667
656
|
...props
|
|
668
657
|
} = _ref;
|
|
669
|
-
const Icon =
|
|
670
|
-
const hue =
|
|
658
|
+
const Icon = type ? validationIcons[type] : SvgInfoStroke;
|
|
659
|
+
const hue = type && validationHues[type];
|
|
671
660
|
return React__namespace.default.createElement(StyledNotification, Object.assign({
|
|
672
661
|
ref: ref,
|
|
673
|
-
type:
|
|
674
|
-
isFloating: true
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
}, React__namespace.default.createElement(Icon, null)), props.children);
|
|
662
|
+
type: type,
|
|
663
|
+
isFloating: true,
|
|
664
|
+
role: "alert"
|
|
665
|
+
}, props), type && React__namespace.default.createElement(StyledIcon, {
|
|
666
|
+
$hue: hue
|
|
667
|
+
}, React__namespace.default.createElement(Icon, null)), children);
|
|
680
668
|
});
|
|
681
669
|
NotificationComponent.displayName = 'Notification';
|
|
682
670
|
NotificationComponent.propTypes = {
|
|
@@ -1121,6 +1109,12 @@ const GlobalAlertComponent = React.forwardRef((_ref, ref) => {
|
|
|
1121
1109
|
type,
|
|
1122
1110
|
...props
|
|
1123
1111
|
} = _ref;
|
|
1112
|
+
const icon = {
|
|
1113
|
+
success: React__namespace.default.createElement(SvgCheckCircleStroke, null),
|
|
1114
|
+
error: React__namespace.default.createElement(SvgAlertErrorStroke, null),
|
|
1115
|
+
warning: React__namespace.default.createElement(SvgAlertWarningStroke, null),
|
|
1116
|
+
info: React__namespace.default.createElement(SvgInfoStroke, null)
|
|
1117
|
+
}[type];
|
|
1124
1118
|
return React__namespace.default.createElement(GlobalAlertContext.Provider, {
|
|
1125
1119
|
value: React.useMemo(() => ({
|
|
1126
1120
|
type
|
|
@@ -1129,12 +1123,7 @@ const GlobalAlertComponent = React.forwardRef((_ref, ref) => {
|
|
|
1129
1123
|
ref: ref,
|
|
1130
1124
|
role: "status",
|
|
1131
1125
|
alertType: type
|
|
1132
|
-
}, props),
|
|
1133
|
-
success: React__namespace.default.createElement(StyledGlobalAlertIcon, null, React__namespace.default.createElement(SvgCheckCircleStroke, null)),
|
|
1134
|
-
error: React__namespace.default.createElement(StyledGlobalAlertIcon, null, React__namespace.default.createElement(SvgAlertErrorStroke, null)),
|
|
1135
|
-
warning: React__namespace.default.createElement(StyledGlobalAlertIcon, null, React__namespace.default.createElement(SvgAlertWarningStroke, null)),
|
|
1136
|
-
info: React__namespace.default.createElement(StyledGlobalAlertIcon, null, React__namespace.default.createElement(SvgInfoStroke, null))
|
|
1137
|
-
}[type], props.children));
|
|
1126
|
+
}, props), React__namespace.default.createElement(StyledGlobalAlertIcon, null, icon), props.children));
|
|
1138
1127
|
});
|
|
1139
1128
|
GlobalAlertComponent.displayName = 'GlobalAlert';
|
|
1140
1129
|
const GlobalAlert = GlobalAlertComponent;
|
|
@@ -4,5 +4,5 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
|
|
8
|
-
export declare const StyledIcon: import("styled-components").StyledComponent<({ children, ...props }: any) =>
|
|
7
|
+
/// <reference types="react" />
|
|
8
|
+
export declare const StyledIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -13,11 +13,11 @@ interface IStyledGlobalAlertButtonProps {
|
|
|
13
13
|
}
|
|
14
14
|
export declare const StyledGlobalAlertButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-buttons").IButtonProps & import("react").RefAttributes<HTMLButtonElement>> & {
|
|
15
15
|
EndIcon: {
|
|
16
|
-
(props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): import("react").JSX.Element;
|
|
16
|
+
({ isRotated, ...props }: import("@zendeskgarden/react-buttons").IButtonEndIconProps): import("react").JSX.Element;
|
|
17
17
|
displayName: string;
|
|
18
18
|
};
|
|
19
19
|
StartIcon: {
|
|
20
|
-
(props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): import("react").JSX.Element;
|
|
20
|
+
({ isRotated, ...props }: import("@zendeskgarden/react-buttons").IButtonEndIconProps): import("react").JSX.Element;
|
|
21
21
|
displayName: string;
|
|
22
22
|
};
|
|
23
23
|
}, DefaultTheme, {
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
|
|
7
|
+
/// <reference types="react" />
|
|
8
8
|
import { DefaultTheme } from 'styled-components';
|
|
9
|
-
export declare const StyledGlobalAlertIcon: import("styled-components").StyledComponent<({ children, ...props }: any) =>
|
|
9
|
+
export declare const StyledGlobalAlertIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
|
|
10
10
|
'data-garden-id': string;
|
|
11
11
|
'data-garden-version': string;
|
|
12
12
|
}, "data-garden-id" | "data-garden-version">;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-notifications",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.9",
|
|
4
4
|
"description": "Notification and Well components within the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"sideEffects": false,
|
|
22
22
|
"types": "dist/typings/index.d.ts",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@zendeskgarden/react-buttons": "^9.0.0-next.
|
|
24
|
+
"@zendeskgarden/react-buttons": "^9.0.0-next.9",
|
|
25
25
|
"polished": "^4.1.1",
|
|
26
26
|
"prop-types": "^15.5.7",
|
|
27
27
|
"react-transition-group": "^4.4.2",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/react-transition-group": "4.4.10",
|
|
38
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
38
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.9",
|
|
39
39
|
"@zendeskgarden/svg-icons": "7.0.0"
|
|
40
40
|
},
|
|
41
41
|
"keywords": [
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"access": "public"
|
|
49
49
|
},
|
|
50
50
|
"zendeskgarden:src": "src/index.ts",
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
|
|
52
52
|
}
|