@zendeskgarden/react-notifications 9.0.0-next.24 → 9.0.0-next.25
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/toaster/styled.js +0 -7
- package/dist/esm/styled/StyledAlert.js +2 -5
- package/dist/esm/styled/StyledBase.js +2 -5
- package/dist/esm/styled/StyledIcon.js +2 -5
- package/dist/esm/styled/StyledNotification.js +2 -5
- package/dist/esm/styled/StyledWell.js +2 -5
- package/dist/esm/styled/content/StyledClose.js +2 -5
- package/dist/esm/styled/content/StyledParagraph.js +2 -5
- package/dist/esm/styled/content/StyledTitle.js +2 -5
- package/dist/esm/styled/global-alert/StyledGlobalAlert.js +2 -5
- package/dist/esm/styled/global-alert/StyledGlobalAlertButton.js +2 -5
- package/dist/esm/styled/global-alert/StyledGlobalAlertClose.js +2 -5
- package/dist/esm/styled/global-alert/StyledGlobalAlertContent.js +2 -5
- package/dist/esm/styled/global-alert/StyledGlobalAlertIcon.js +2 -5
- package/dist/esm/styled/global-alert/StyledGlobalAlertTitle.js +2 -5
- package/dist/index.cjs.js +14 -62
- package/package.json +4 -4
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { hideVisually } from 'polished';
|
|
9
|
-
import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
10
9
|
|
|
11
10
|
const TRANSITION_CLASS = 'garden-toast-transition';
|
|
12
11
|
const DEFAULT_DURATION = '400ms';
|
|
@@ -19,9 +18,6 @@ const StyledFadeInTransition = styled.div.withConfig({
|
|
|
19
18
|
}
|
|
20
19
|
return '-100px';
|
|
21
20
|
}, TRANSITION_CLASS, DEFAULT_DURATION, DEFAULT_DURATION, DEFAULT_DURATION, TRANSITION_CLASS, TRANSITION_CLASS, DEFAULT_DURATION);
|
|
22
|
-
StyledFadeInTransition.defaultProps = {
|
|
23
|
-
theme: DEFAULT_THEME
|
|
24
|
-
};
|
|
25
21
|
const placementStyles = props => {
|
|
26
22
|
const verticalDistance = `${props.theme.space.base * 16}px`;
|
|
27
23
|
const horizontalDistance = `${props.theme.space.base * 3}px`;
|
|
@@ -64,8 +60,5 @@ const StyledTransitionContainer = styled.div.withConfig({
|
|
|
64
60
|
displayName: "styled__StyledTransitionContainer",
|
|
65
61
|
componentId: "sc-nq0usb-1"
|
|
66
62
|
})(["position:fixed;z-index:", ";", ";"], props => props.toastZIndex, placementStyles);
|
|
67
|
-
StyledTransitionContainer.defaultProps = {
|
|
68
|
-
theme: DEFAULT_THEME
|
|
69
|
-
};
|
|
70
63
|
|
|
71
64
|
export { StyledFadeInTransition, StyledTransitionContainer, TRANSITION_CLASS };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledTitle } from './content/StyledTitle.js';
|
|
10
10
|
import { StyledBase } from './StyledBase.js';
|
|
11
11
|
import { validationTypes } from '../utils/icons.js';
|
|
@@ -39,13 +39,10 @@ const colorStyles = props => {
|
|
|
39
39
|
};
|
|
40
40
|
const StyledAlert = styled(StyledBase).attrs({
|
|
41
41
|
'data-garden-id': COMPONENT_ID,
|
|
42
|
-
'data-garden-version': '9.0.0-next.
|
|
42
|
+
'data-garden-version': '9.0.0-next.25'
|
|
43
43
|
}).withConfig({
|
|
44
44
|
displayName: "StyledAlert",
|
|
45
45
|
componentId: "sc-fyn8jp-0"
|
|
46
46
|
})(["", " ", ";"], colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
47
|
-
StyledAlert.defaultProps = {
|
|
48
|
-
theme: DEFAULT_THEME
|
|
49
|
-
};
|
|
50
47
|
|
|
51
48
|
export { StyledAlert };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { getLineHeight, retrieveComponentStyles,
|
|
8
|
+
import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { validationTypes } from '../utils/icons.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'notifications.base_container';
|
|
@@ -80,13 +80,10 @@ const padding = props => {
|
|
|
80
80
|
};
|
|
81
81
|
const StyledBase = styled.div.attrs({
|
|
82
82
|
'data-garden-id': COMPONENT_ID,
|
|
83
|
-
'data-garden-version': '9.0.0-next.
|
|
83
|
+
'data-garden-version': '9.0.0-next.25'
|
|
84
84
|
}).withConfig({
|
|
85
85
|
displayName: "StyledBase",
|
|
86
86
|
componentId: "sc-14syaqw-0"
|
|
87
87
|
})(["position:relative;border:", ";border-radius:", ";padding:", ";line-height:", ";font-size:", ";direction:", ";", ";", ""], props => props.theme.borders.sm, props => props.theme.borderRadii.md, padding, props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
88
|
-
StyledBase.defaultProps = {
|
|
89
|
-
theme: DEFAULT_THEME
|
|
90
|
-
};
|
|
91
88
|
|
|
92
89
|
export { StyledBase };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { StyledBaseIcon, retrieveComponentStyles,
|
|
8
|
+
import { StyledBaseIcon, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { validationTypes } from '../utils/icons.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'notifications.icon';
|
|
@@ -49,13 +49,10 @@ const colorStyles = _ref2 => {
|
|
|
49
49
|
};
|
|
50
50
|
const StyledIcon = styled(StyledBaseIcon).attrs({
|
|
51
51
|
'data-garden-id': COMPONENT_ID,
|
|
52
|
-
'data-garden-version': '9.0.0-next.
|
|
52
|
+
'data-garden-version': '9.0.0-next.25'
|
|
53
53
|
}).withConfig({
|
|
54
54
|
displayName: "StyledIcon",
|
|
55
55
|
componentId: "sc-msklws-0"
|
|
56
56
|
})(["position:absolute;", " ", " ", ""], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
57
|
-
StyledIcon.defaultProps = {
|
|
58
|
-
theme: DEFAULT_THEME
|
|
59
|
-
};
|
|
60
57
|
|
|
61
58
|
export { StyledIcon };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
8
|
import styled, { css } from 'styled-components';
|
|
9
|
-
import { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { TYPE } from '../types/index.js';
|
|
11
11
|
import { StyledTitle } from './content/StyledTitle.js';
|
|
12
12
|
import { StyledBase } from './StyledBase.js';
|
|
@@ -41,7 +41,7 @@ const colorStyles = props => {
|
|
|
41
41
|
};
|
|
42
42
|
const StyledNotification = styled(StyledBase).attrs({
|
|
43
43
|
'data-garden-id': COMPONENT_ID,
|
|
44
|
-
'data-garden-version': '9.0.0-next.
|
|
44
|
+
'data-garden-version': '9.0.0-next.25'
|
|
45
45
|
}).withConfig({
|
|
46
46
|
displayName: "StyledNotification",
|
|
47
47
|
componentId: "sc-uf6jh-0"
|
|
@@ -49,8 +49,5 @@ const StyledNotification = styled(StyledBase).attrs({
|
|
|
49
49
|
StyledNotification.propTypes = {
|
|
50
50
|
$type: PropTypes.oneOf(TYPE)
|
|
51
51
|
};
|
|
52
|
-
StyledNotification.defaultProps = {
|
|
53
|
-
theme: DEFAULT_THEME
|
|
54
|
-
};
|
|
55
52
|
|
|
56
53
|
export { StyledNotification };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledBase } from './StyledBase.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'notifications.well';
|
|
@@ -35,13 +35,10 @@ const colorStyles = _ref => {
|
|
|
35
35
|
};
|
|
36
36
|
const StyledWell = styled(StyledBase).attrs({
|
|
37
37
|
'data-garden-id': COMPONENT_ID,
|
|
38
|
-
'data-garden-version': '9.0.0-next.
|
|
38
|
+
'data-garden-version': '9.0.0-next.25'
|
|
39
39
|
}).withConfig({
|
|
40
40
|
displayName: "StyledWell",
|
|
41
41
|
componentId: "sc-a5831c-0"
|
|
42
42
|
})(["", " ", ";"], colorStyles, p => retrieveComponentStyles(COMPONENT_ID, p));
|
|
43
|
-
StyledWell.defaultProps = {
|
|
44
|
-
theme: DEFAULT_THEME
|
|
45
|
-
};
|
|
46
43
|
|
|
47
44
|
export { StyledWell };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { validationTypes } from '../../utils/icons.js';
|
|
10
10
|
import { IconButton } from '@zendeskgarden/react-buttons';
|
|
11
11
|
|
|
@@ -58,13 +58,10 @@ const colorStyles = _ref => {
|
|
|
58
58
|
};
|
|
59
59
|
const StyledClose = styled(IconButton).attrs({
|
|
60
60
|
'data-garden-id': COMPONENT_ID,
|
|
61
|
-
'data-garden-version': '9.0.0-next.
|
|
61
|
+
'data-garden-version': '9.0.0-next.25'
|
|
62
62
|
}).withConfig({
|
|
63
63
|
displayName: "StyledClose",
|
|
64
64
|
componentId: "sc-1mr9nx1-0"
|
|
65
65
|
})(["position:absolute;top:", "px;right:", ";left:", ";", " ", ";"], props => props.theme.space.base, p => !p.theme.rtl && `${p.theme.space.base}px`, p => p.theme.rtl && `${p.theme.space.base}px`, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
66
|
-
StyledClose.defaultProps = {
|
|
67
|
-
theme: DEFAULT_THEME
|
|
68
|
-
};
|
|
69
66
|
|
|
70
67
|
export { StyledClose };
|
|
@@ -5,18 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledParagraph",
|
|
16
16
|
componentId: "sc-12tmd6p-0"
|
|
17
17
|
})(["margin:", "px 0 0;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledParagraph.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledParagraph };
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { getColor, retrieveComponentStyles
|
|
8
|
+
import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledTitle",
|
|
16
16
|
componentId: "sc-xx4jsv-0"
|
|
@@ -18,8 +18,5 @@ const StyledTitle = styled.div.attrs({
|
|
|
18
18
|
variable: 'foreground.default',
|
|
19
19
|
theme: p.theme
|
|
20
20
|
}), props => props.$isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledTitle.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledTitle };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'notifications.global_alert';
|
|
11
11
|
const colorStyles = _ref => {
|
|
@@ -148,13 +148,10 @@ const sizeStyles = props => {
|
|
|
148
148
|
};
|
|
149
149
|
const StyledGlobalAlert = styled.div.attrs({
|
|
150
150
|
'data-garden-id': COMPONENT_ID,
|
|
151
|
-
'data-garden-version': '9.0.0-next.
|
|
151
|
+
'data-garden-version': '9.0.0-next.25'
|
|
152
152
|
}).withConfig({
|
|
153
153
|
displayName: "StyledGlobalAlert",
|
|
154
154
|
componentId: "sc-k6rimt-0"
|
|
155
155
|
})(["display:flex;flex-wrap:nowrap;overflow:auto;overflow-x:hidden;box-sizing:border-box;direction:", ";", " ", " && a{border-radius:", ";text-decoration:underline;}", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', sizeStyles, colorStyles, props => props.theme.borderRadii.sm, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
156
|
-
StyledGlobalAlert.defaultProps = {
|
|
157
|
-
theme: DEFAULT_THEME
|
|
158
|
-
};
|
|
159
156
|
|
|
160
157
|
export { StyledGlobalAlert };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { Button } from '@zendeskgarden/react-buttons';
|
|
10
10
|
import { colorStyles as colorStyles$1 } from './StyledGlobalAlertClose.js';
|
|
11
11
|
|
|
@@ -106,13 +106,10 @@ function sizeStyles(props) {
|
|
|
106
106
|
}
|
|
107
107
|
const StyledGlobalAlertButton = styled(Button).attrs({
|
|
108
108
|
'data-garden-id': COMPONENT_ID,
|
|
109
|
-
'data-garden-version': '9.0.0-next.
|
|
109
|
+
'data-garden-version': '9.0.0-next.25'
|
|
110
110
|
}).withConfig({
|
|
111
111
|
displayName: "StyledGlobalAlertButton",
|
|
112
112
|
componentId: "sc-1txe91a-0"
|
|
113
113
|
})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
114
|
-
StyledGlobalAlertButton.defaultProps = {
|
|
115
|
-
theme: DEFAULT_THEME
|
|
116
|
-
};
|
|
117
114
|
|
|
118
115
|
export { StyledGlobalAlertButton };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { IconButton } from '@zendeskgarden/react-buttons';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'notifications.global_alert.close';
|
|
@@ -91,13 +91,10 @@ const sizeStyles = props => {
|
|
|
91
91
|
};
|
|
92
92
|
const StyledGlobalAlertClose = styled(IconButton).attrs({
|
|
93
93
|
'data-garden-id': COMPONENT_ID,
|
|
94
|
-
'data-garden-version': '9.0.0-next.
|
|
94
|
+
'data-garden-version': '9.0.0-next.25'
|
|
95
95
|
}).withConfig({
|
|
96
96
|
displayName: "StyledGlobalAlertClose",
|
|
97
97
|
componentId: "sc-1g5s93s-0"
|
|
98
98
|
})(["", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
99
|
-
StyledGlobalAlertClose.defaultProps = {
|
|
100
|
-
theme: DEFAULT_THEME
|
|
101
|
-
};
|
|
102
99
|
|
|
103
100
|
export { StyledGlobalAlertClose, colorStyles };
|
|
@@ -5,18 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledGlobalAlertContent",
|
|
16
16
|
componentId: "sc-rept0u-0"
|
|
17
17
|
})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledGlobalAlertContent.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledGlobalAlertContent };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { StyledBaseIcon, retrieveComponentStyles,
|
|
9
|
+
import { StyledBaseIcon, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'notifications.global_alert.icon';
|
|
12
12
|
const sizeStyles = props => {
|
|
@@ -53,13 +53,10 @@ const colorStyles = _ref => {
|
|
|
53
53
|
};
|
|
54
54
|
const StyledGlobalAlertIcon = styled(StyledBaseIcon).attrs({
|
|
55
55
|
'data-garden-id': COMPONENT_ID,
|
|
56
|
-
'data-garden-version': '9.0.0-next.
|
|
56
|
+
'data-garden-version': '9.0.0-next.25'
|
|
57
57
|
}).withConfig({
|
|
58
58
|
displayName: "StyledGlobalAlertIcon",
|
|
59
59
|
componentId: "sc-84ne9k-0"
|
|
60
60
|
})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
61
|
-
StyledGlobalAlertIcon.defaultProps = {
|
|
62
|
-
theme: DEFAULT_THEME
|
|
63
|
-
};
|
|
64
61
|
|
|
65
62
|
export { StyledGlobalAlertIcon };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'notifications.global_alert.title';
|
|
11
11
|
const colorStyles = _ref => {
|
|
@@ -37,13 +37,10 @@ const colorStyles = _ref => {
|
|
|
37
37
|
};
|
|
38
38
|
const StyledGlobalAlertTitle = styled.div.attrs({
|
|
39
39
|
'data-garden-id': COMPONENT_ID,
|
|
40
|
-
'data-garden-version': '9.0.0-next.
|
|
40
|
+
'data-garden-version': '9.0.0-next.25'
|
|
41
41
|
}).withConfig({
|
|
42
42
|
displayName: "StyledGlobalAlertTitle",
|
|
43
43
|
componentId: "sc-10clqbo-0"
|
|
44
44
|
})(["display:inline;margin-", ":", "px;font-weight:", ";", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => props.$isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
45
|
-
StyledGlobalAlertTitle.defaultProps = {
|
|
46
|
-
theme: DEFAULT_THEME
|
|
47
|
-
};
|
|
48
45
|
|
|
49
46
|
export { StyledGlobalAlertTitle };
|
package/dist/index.cjs.js
CHANGED
|
@@ -206,31 +206,25 @@ const colorStyles$a = _ref => {
|
|
|
206
206
|
};
|
|
207
207
|
const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
|
|
208
208
|
'data-garden-id': COMPONENT_ID$d,
|
|
209
|
-
'data-garden-version': '9.0.0-next.
|
|
209
|
+
'data-garden-version': '9.0.0-next.25'
|
|
210
210
|
}).withConfig({
|
|
211
211
|
displayName: "StyledClose",
|
|
212
212
|
componentId: "sc-1mr9nx1-0"
|
|
213
213
|
})(["position:absolute;top:", "px;right:", ";left:", ";", " ", ";"], props => props.theme.space.base, p => !p.theme.rtl && `${p.theme.space.base}px`, p => p.theme.rtl && `${p.theme.space.base}px`, colorStyles$a, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
|
|
214
|
-
StyledClose.defaultProps = {
|
|
215
|
-
theme: reactTheming.DEFAULT_THEME
|
|
216
|
-
};
|
|
217
214
|
|
|
218
215
|
const COMPONENT_ID$c = 'notifications.paragraph';
|
|
219
216
|
const StyledParagraph = styled__default.default.p.attrs({
|
|
220
217
|
'data-garden-id': COMPONENT_ID$c,
|
|
221
|
-
'data-garden-version': '9.0.0-next.
|
|
218
|
+
'data-garden-version': '9.0.0-next.25'
|
|
222
219
|
}).withConfig({
|
|
223
220
|
displayName: "StyledParagraph",
|
|
224
221
|
componentId: "sc-12tmd6p-0"
|
|
225
222
|
})(["margin:", "px 0 0;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
|
|
226
|
-
StyledParagraph.defaultProps = {
|
|
227
|
-
theme: reactTheming.DEFAULT_THEME
|
|
228
|
-
};
|
|
229
223
|
|
|
230
224
|
const COMPONENT_ID$b = 'notifications.title';
|
|
231
225
|
const StyledTitle = styled__default.default.div.attrs({
|
|
232
226
|
'data-garden-id': COMPONENT_ID$b,
|
|
233
|
-
'data-garden-version': '9.0.0-next.
|
|
227
|
+
'data-garden-version': '9.0.0-next.25'
|
|
234
228
|
}).withConfig({
|
|
235
229
|
displayName: "StyledTitle",
|
|
236
230
|
componentId: "sc-xx4jsv-0"
|
|
@@ -238,9 +232,6 @@ const StyledTitle = styled__default.default.div.attrs({
|
|
|
238
232
|
variable: 'foreground.default',
|
|
239
233
|
theme: p.theme
|
|
240
234
|
}), props => props.$isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
|
|
241
|
-
StyledTitle.defaultProps = {
|
|
242
|
-
theme: reactTheming.DEFAULT_THEME
|
|
243
|
-
};
|
|
244
235
|
|
|
245
236
|
const COMPONENT_ID$a = 'notifications.base_container';
|
|
246
237
|
const colorStyles$9 = _ref => {
|
|
@@ -314,14 +305,11 @@ const padding = props => {
|
|
|
314
305
|
};
|
|
315
306
|
const StyledBase = styled__default.default.div.attrs({
|
|
316
307
|
'data-garden-id': COMPONENT_ID$a,
|
|
317
|
-
'data-garden-version': '9.0.0-next.
|
|
308
|
+
'data-garden-version': '9.0.0-next.25'
|
|
318
309
|
}).withConfig({
|
|
319
310
|
displayName: "StyledBase",
|
|
320
311
|
componentId: "sc-14syaqw-0"
|
|
321
312
|
})(["position:relative;border:", ";border-radius:", ";padding:", ";line-height:", ";font-size:", ";direction:", ";", ";", ""], props => props.theme.borders.sm, props => props.theme.borderRadii.md, padding, props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles$9, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
|
|
322
|
-
StyledBase.defaultProps = {
|
|
323
|
-
theme: reactTheming.DEFAULT_THEME
|
|
324
|
-
};
|
|
325
313
|
|
|
326
314
|
const COMPONENT_ID$9 = 'notifications.alert';
|
|
327
315
|
const colorStyles$8 = props => {
|
|
@@ -352,14 +340,11 @@ const colorStyles$8 = props => {
|
|
|
352
340
|
};
|
|
353
341
|
const StyledAlert = styled__default.default(StyledBase).attrs({
|
|
354
342
|
'data-garden-id': COMPONENT_ID$9,
|
|
355
|
-
'data-garden-version': '9.0.0-next.
|
|
343
|
+
'data-garden-version': '9.0.0-next.25'
|
|
356
344
|
}).withConfig({
|
|
357
345
|
displayName: "StyledAlert",
|
|
358
346
|
componentId: "sc-fyn8jp-0"
|
|
359
347
|
})(["", " ", ";"], colorStyles$8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
|
|
360
|
-
StyledAlert.defaultProps = {
|
|
361
|
-
theme: reactTheming.DEFAULT_THEME
|
|
362
|
-
};
|
|
363
348
|
|
|
364
349
|
const COMPONENT_ID$8 = 'notifications.notification';
|
|
365
350
|
const colorStyles$7 = props => {
|
|
@@ -390,7 +375,7 @@ const colorStyles$7 = props => {
|
|
|
390
375
|
};
|
|
391
376
|
const StyledNotification = styled__default.default(StyledBase).attrs({
|
|
392
377
|
'data-garden-id': COMPONENT_ID$8,
|
|
393
|
-
'data-garden-version': '9.0.0-next.
|
|
378
|
+
'data-garden-version': '9.0.0-next.25'
|
|
394
379
|
}).withConfig({
|
|
395
380
|
displayName: "StyledNotification",
|
|
396
381
|
componentId: "sc-uf6jh-0"
|
|
@@ -398,9 +383,6 @@ const StyledNotification = styled__default.default(StyledBase).attrs({
|
|
|
398
383
|
StyledNotification.propTypes = {
|
|
399
384
|
$type: PropTypes__default.default.oneOf(TYPE)
|
|
400
385
|
};
|
|
401
|
-
StyledNotification.defaultProps = {
|
|
402
|
-
theme: reactTheming.DEFAULT_THEME
|
|
403
|
-
};
|
|
404
386
|
|
|
405
387
|
const COMPONENT_ID$7 = 'notifications.well';
|
|
406
388
|
const colorStyles$6 = _ref => {
|
|
@@ -429,14 +411,11 @@ const colorStyles$6 = _ref => {
|
|
|
429
411
|
};
|
|
430
412
|
const StyledWell = styled__default.default(StyledBase).attrs({
|
|
431
413
|
'data-garden-id': COMPONENT_ID$7,
|
|
432
|
-
'data-garden-version': '9.0.0-next.
|
|
414
|
+
'data-garden-version': '9.0.0-next.25'
|
|
433
415
|
}).withConfig({
|
|
434
416
|
displayName: "StyledWell",
|
|
435
417
|
componentId: "sc-a5831c-0"
|
|
436
418
|
})(["", " ", ";"], colorStyles$6, p => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, p));
|
|
437
|
-
StyledWell.defaultProps = {
|
|
438
|
-
theme: reactTheming.DEFAULT_THEME
|
|
439
|
-
};
|
|
440
419
|
|
|
441
420
|
const COMPONENT_ID$6 = 'notifications.icon';
|
|
442
421
|
const sizeStyles$4 = _ref => {
|
|
@@ -479,14 +458,11 @@ const colorStyles$5 = _ref2 => {
|
|
|
479
458
|
};
|
|
480
459
|
const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
481
460
|
'data-garden-id': COMPONENT_ID$6,
|
|
482
|
-
'data-garden-version': '9.0.0-next.
|
|
461
|
+
'data-garden-version': '9.0.0-next.25'
|
|
483
462
|
}).withConfig({
|
|
484
463
|
displayName: "StyledIcon",
|
|
485
464
|
componentId: "sc-msklws-0"
|
|
486
465
|
})(["position:absolute;", " ", " ", ""], sizeStyles$4, colorStyles$5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
|
|
487
|
-
StyledIcon.defaultProps = {
|
|
488
|
-
theme: reactTheming.DEFAULT_THEME
|
|
489
|
-
};
|
|
490
466
|
|
|
491
467
|
const COMPONENT_ID$5 = 'notifications.global_alert';
|
|
492
468
|
const colorStyles$4 = _ref => {
|
|
@@ -629,14 +605,11 @@ const sizeStyles$3 = props => {
|
|
|
629
605
|
};
|
|
630
606
|
const StyledGlobalAlert = styled__default.default.div.attrs({
|
|
631
607
|
'data-garden-id': COMPONENT_ID$5,
|
|
632
|
-
'data-garden-version': '9.0.0-next.
|
|
608
|
+
'data-garden-version': '9.0.0-next.25'
|
|
633
609
|
}).withConfig({
|
|
634
610
|
displayName: "StyledGlobalAlert",
|
|
635
611
|
componentId: "sc-k6rimt-0"
|
|
636
612
|
})(["display:flex;flex-wrap:nowrap;overflow:auto;overflow-x:hidden;box-sizing:border-box;direction:", ";", " ", " && a{border-radius:", ";text-decoration:underline;}", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', sizeStyles$3, colorStyles$4, props => props.theme.borderRadii.sm, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
|
|
637
|
-
StyledGlobalAlert.defaultProps = {
|
|
638
|
-
theme: reactTheming.DEFAULT_THEME
|
|
639
|
-
};
|
|
640
613
|
|
|
641
614
|
const COMPONENT_ID$4 = 'notifications.global_alert.close';
|
|
642
615
|
const colorStyles$3 = props => {
|
|
@@ -721,14 +694,11 @@ const sizeStyles$2 = props => {
|
|
|
721
694
|
};
|
|
722
695
|
const StyledGlobalAlertClose = styled__default.default(reactButtons.IconButton).attrs({
|
|
723
696
|
'data-garden-id': COMPONENT_ID$4,
|
|
724
|
-
'data-garden-version': '9.0.0-next.
|
|
697
|
+
'data-garden-version': '9.0.0-next.25'
|
|
725
698
|
}).withConfig({
|
|
726
699
|
displayName: "StyledGlobalAlertClose",
|
|
727
700
|
componentId: "sc-1g5s93s-0"
|
|
728
701
|
})(["", ";", ";", ";"], sizeStyles$2, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
|
|
729
|
-
StyledGlobalAlertClose.defaultProps = {
|
|
730
|
-
theme: reactTheming.DEFAULT_THEME
|
|
731
|
-
};
|
|
732
702
|
|
|
733
703
|
const COMPONENT_ID$3 = 'notifications.global_alert.button';
|
|
734
704
|
function colorStyles$2(props) {
|
|
@@ -827,26 +797,20 @@ function sizeStyles$1(props) {
|
|
|
827
797
|
}
|
|
828
798
|
const StyledGlobalAlertButton = styled__default.default(reactButtons.Button).attrs({
|
|
829
799
|
'data-garden-id': COMPONENT_ID$3,
|
|
830
|
-
'data-garden-version': '9.0.0-next.
|
|
800
|
+
'data-garden-version': '9.0.0-next.25'
|
|
831
801
|
}).withConfig({
|
|
832
802
|
displayName: "StyledGlobalAlertButton",
|
|
833
803
|
componentId: "sc-1txe91a-0"
|
|
834
804
|
})(["flex-shrink:0;", ";", ";", ";"], sizeStyles$1, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
835
|
-
StyledGlobalAlertButton.defaultProps = {
|
|
836
|
-
theme: reactTheming.DEFAULT_THEME
|
|
837
|
-
};
|
|
838
805
|
|
|
839
806
|
const COMPONENT_ID$2 = 'notifications.global_alert.content';
|
|
840
807
|
const StyledGlobalAlertContent = styled__default.default.div.attrs({
|
|
841
808
|
'data-garden-id': COMPONENT_ID$2,
|
|
842
|
-
'data-garden-version': '9.0.0-next.
|
|
809
|
+
'data-garden-version': '9.0.0-next.25'
|
|
843
810
|
}).withConfig({
|
|
844
811
|
displayName: "StyledGlobalAlertContent",
|
|
845
812
|
componentId: "sc-rept0u-0"
|
|
846
813
|
})(["flex-grow:1;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
847
|
-
StyledGlobalAlertContent.defaultProps = {
|
|
848
|
-
theme: reactTheming.DEFAULT_THEME
|
|
849
|
-
};
|
|
850
814
|
|
|
851
815
|
const COMPONENT_ID$1 = 'notifications.global_alert.icon';
|
|
852
816
|
const sizeStyles = props => {
|
|
@@ -893,14 +857,11 @@ const colorStyles$1 = _ref => {
|
|
|
893
857
|
};
|
|
894
858
|
const StyledGlobalAlertIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
895
859
|
'data-garden-id': COMPONENT_ID$1,
|
|
896
|
-
'data-garden-version': '9.0.0-next.
|
|
860
|
+
'data-garden-version': '9.0.0-next.25'
|
|
897
861
|
}).withConfig({
|
|
898
862
|
displayName: "StyledGlobalAlertIcon",
|
|
899
863
|
componentId: "sc-84ne9k-0"
|
|
900
864
|
})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
|
|
901
|
-
StyledGlobalAlertIcon.defaultProps = {
|
|
902
|
-
theme: reactTheming.DEFAULT_THEME
|
|
903
|
-
};
|
|
904
865
|
|
|
905
866
|
const COMPONENT_ID = 'notifications.global_alert.title';
|
|
906
867
|
const colorStyles = _ref => {
|
|
@@ -932,14 +893,11 @@ const colorStyles = _ref => {
|
|
|
932
893
|
};
|
|
933
894
|
const StyledGlobalAlertTitle = styled__default.default.div.attrs({
|
|
934
895
|
'data-garden-id': COMPONENT_ID,
|
|
935
|
-
'data-garden-version': '9.0.0-next.
|
|
896
|
+
'data-garden-version': '9.0.0-next.25'
|
|
936
897
|
}).withConfig({
|
|
937
898
|
displayName: "StyledGlobalAlertTitle",
|
|
938
899
|
componentId: "sc-10clqbo-0"
|
|
939
900
|
})(["display:inline;margin-", ":", "px;font-weight:", ";", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => props.$isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
940
|
-
StyledGlobalAlertTitle.defaultProps = {
|
|
941
|
-
theme: reactTheming.DEFAULT_THEME
|
|
942
|
-
};
|
|
943
901
|
|
|
944
902
|
const NotificationsContext = React.createContext(undefined);
|
|
945
903
|
const useNotificationsContext = () => {
|
|
@@ -1280,9 +1238,6 @@ const StyledFadeInTransition = styled__default.default.div.withConfig({
|
|
|
1280
1238
|
}
|
|
1281
1239
|
return '-100px';
|
|
1282
1240
|
}, TRANSITION_CLASS, DEFAULT_DURATION, DEFAULT_DURATION, DEFAULT_DURATION, TRANSITION_CLASS, TRANSITION_CLASS, DEFAULT_DURATION);
|
|
1283
|
-
StyledFadeInTransition.defaultProps = {
|
|
1284
|
-
theme: reactTheming.DEFAULT_THEME
|
|
1285
|
-
};
|
|
1286
1241
|
const placementStyles = props => {
|
|
1287
1242
|
const verticalDistance = `${props.theme.space.base * 16}px`;
|
|
1288
1243
|
const horizontalDistance = `${props.theme.space.base * 3}px`;
|
|
@@ -1325,9 +1280,6 @@ const StyledTransitionContainer = styled__default.default.div.withConfig({
|
|
|
1325
1280
|
displayName: "styled__StyledTransitionContainer",
|
|
1326
1281
|
componentId: "sc-nq0usb-1"
|
|
1327
1282
|
})(["position:fixed;z-index:", ";", ";"], props => props.toastZIndex, placementStyles);
|
|
1328
|
-
StyledTransitionContainer.defaultProps = {
|
|
1329
|
-
theme: reactTheming.DEFAULT_THEME
|
|
1330
|
-
};
|
|
1331
1283
|
|
|
1332
1284
|
const ToastSlot = _ref => {
|
|
1333
1285
|
let {
|
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.25",
|
|
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.25",
|
|
25
25
|
"polished": "^4.3.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.11",
|
|
38
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
38
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.25",
|
|
39
39
|
"@zendeskgarden/svg-icons": "7.2.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": "460751d630ab1c46e11810d60e4d7701b9d30b8f"
|
|
52
52
|
}
|