@occmundial/occ-atomic 3.0.0-beta.3 → 3.0.0-beta.31
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +261 -0
- package/build/Avatar/Avatar.js +69 -21
- package/build/Avatar/Avatar.test.js +15 -8
- package/build/Avatar/AvatarContent/AvatarContent.js +61 -21
- package/build/Avatar/AvatarContent/AvatarContent.test.js +4 -18
- package/build/Avatar/AvatarContent/__snapshots__/AvatarContent.test.js.snap +75 -15
- package/build/Avatar/AvatarContent/styles.js +88 -21
- package/build/Avatar/__snapshots__/Avatar.test.js.snap +11 -2
- package/build/Avatar/styles.js +18 -7
- package/build/Banner/Banner.js +30 -40
- package/build/Banner/Banner.test.js +64 -17
- package/build/Banner/__snapshots__/Banner.test.js.snap +0 -28
- package/build/Banner/index.js +1 -6
- package/build/Button/Button.js +1 -1
- package/build/Button/__snapshots__/Button.test.js.snap +19 -20
- package/build/Button/styles.js +8 -9
- package/build/Checkbox/Checkbox.js +48 -3
- package/build/Checkbox/__snapshots__/Checkbox.test.js.snap +81 -49
- package/build/Checkbox/styles.js +91 -48
- package/build/Footer/Footer.js +15 -8
- package/build/Footer/__snapshots__/Footer.test.js.snap +0 -6
- package/build/Footer/styles.js +0 -6
- package/build/Grid/Col/__snapshots__/Col.test.js.snap +34 -2
- package/build/Grid/Col/styles.js +18 -6
- package/build/Grid/Row/__snapshots__/Row.test.js.snap +36 -2
- package/build/Grid/Row/styles.js +21 -5
- package/build/Grid/styles.js +8 -8
- package/build/Pager/Page/Page.js +8 -5
- package/build/Pager/Page/Page.test.js +13 -9
- package/build/Pager/Page/__snapshots__/Page.test.js.snap +34 -10
- package/build/Pager/Page/styles.js +48 -14
- package/build/Pager/Pager.js +139 -235
- package/build/Pager/Pager.test.js +81 -36
- package/build/Pager/__snapshots__/Pager.test.js.snap +3 -36
- package/build/Pager/styles.js +5 -40
- package/build/Pill/Choice/Choice.js +6 -4
- package/build/Pill/Choice/styles.js +13 -10
- package/build/Pill/Group/styles.js +5 -5
- package/build/Pill/Stack/Stack.js +2 -2
- package/build/Pill/Stack/styles.js +5 -8
- package/build/Radio/Radio.js +42 -6
- package/build/Radio/__snapshots__/Radio.test.js.snap +81 -80
- package/build/Radio/styles.js +93 -85
- package/build/SlideToggle/SlideToggle.js +38 -6
- package/build/SlideToggle/SlideToggle.test.js +2 -2
- package/build/SlideToggle/__snapshots__/SlideToggle.test.js.snap +53 -37
- package/build/SlideToggle/styles.js +65 -45
- package/build/Tag/Tag.js +2 -2
- package/build/Tag/__snapshots__/Tag.test.js.snap +40 -43
- package/build/Tag/styles.js +76 -82
- package/build/Text/Text.js +4 -2
- package/build/TextField/TextField.js +7 -6
- package/build/TextField/__snapshots__/TextField.test.js.snap +3 -0
- package/build/TextField/styles.js +3 -0
- package/build/Tip/Tip.js +61 -95
- package/build/Tip/Tip.test.js +29 -6
- package/build/Tip/TipText/index.js +32 -0
- package/build/Tip/__snapshots__/Tip.test.js.snap +131 -15
- package/build/Tip/styles.js +126 -31
- package/build/Toaster/Toast/Toast.js +76 -64
- package/build/Toaster/Toast/styles.js +118 -46
- package/build/Toaster/Toaster.js +3 -2
- package/build/Toaster/Toaster.test.js +5 -2
- package/build/Toaster/__snapshots__/Toaster.test.js.snap +1 -1
- package/build/Toaster/functions.js +4 -0
- package/build/Toaster/styles.js +3 -3
- package/build/subatomic/grid.js +5 -5
- package/build/tokens/colors.json +21 -3
- package/package.json +4 -1
- package/build/Banner/styles.js +0 -41
- package/build/Pager/Break/Break.js +0 -27
- package/build/Pager/Break/Break.test.js +0 -53
- package/build/Pager/Break/__snapshots__/Break.test.js.snap +0 -13
- package/build/Pager/Break/index.js +0 -18
- package/build/Pager/Break/styles.js +0 -12
- /package/build/Button/{Loading.js → Loading/index.js} +0 -0
@@ -9,109 +9,121 @@ var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
11
11
|
|
12
|
-
var _Text = _interopRequireDefault(require("../../Text"));
|
13
|
-
|
14
12
|
var _Icon = _interopRequireDefault(require("../../Icon"));
|
15
13
|
|
16
14
|
var _Flexbox = _interopRequireDefault(require("../../Flexbox"));
|
17
15
|
|
18
|
-
var _colors = _interopRequireDefault(require("../../
|
16
|
+
var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
|
17
|
+
|
18
|
+
var _Button = _interopRequireDefault(require("../../Button"));
|
19
19
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
21
21
|
|
22
22
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
23
23
|
|
24
|
+
var icons = {
|
25
|
+
info: 'info-circle',
|
26
|
+
warning: 'alert',
|
27
|
+
success: 'check-circle',
|
28
|
+
error: 'x-circle',
|
29
|
+
promote: null
|
30
|
+
};
|
31
|
+
var colorTextClasses = {
|
32
|
+
info: 'textInfo',
|
33
|
+
promote: 'textPromote',
|
34
|
+
warning: 'textWarning',
|
35
|
+
success: 'textSuccess',
|
36
|
+
error: 'textError'
|
37
|
+
};
|
38
|
+
var colorLinkClasses = {
|
39
|
+
info: 'linkInfo',
|
40
|
+
promote: 'linkPromote',
|
41
|
+
warning: 'linkWarning',
|
42
|
+
success: 'linkSuccess',
|
43
|
+
error: 'linkError'
|
44
|
+
};
|
45
|
+
|
24
46
|
var Toast = function Toast(_ref) {
|
25
47
|
var classes = _ref.classes,
|
26
48
|
theme = _ref.theme,
|
27
49
|
title = _ref.title,
|
28
50
|
description = _ref.description,
|
29
51
|
action = _ref.action,
|
30
|
-
hasIcon = _ref.hasIcon,
|
31
52
|
closing = _ref.closing,
|
32
53
|
onClose = _ref.onClose,
|
33
54
|
pauseTimer = _ref.pauseTimer,
|
34
|
-
resumeTimer = _ref.resumeTimer
|
35
|
-
|
36
|
-
|
37
|
-
switch (theme) {
|
38
|
-
case 'success':
|
39
|
-
return {
|
40
|
-
icon: 'check-circle',
|
41
|
-
color: _colors["default"].bgWhite
|
42
|
-
};
|
43
|
-
|
44
|
-
case 'error':
|
45
|
-
return {
|
46
|
-
icon: 'x-circle',
|
47
|
-
color: _colors["default"].bgWhite
|
48
|
-
};
|
49
|
-
|
50
|
-
case 'info':
|
51
|
-
return {
|
52
|
-
icon: 'info-circle',
|
53
|
-
color: _colors["default"].bgWhite
|
54
|
-
};
|
55
|
-
|
56
|
-
case 'warning':
|
57
|
-
return {
|
58
|
-
icon: 'alert',
|
59
|
-
color: _colors["default"].grey900
|
60
|
-
};
|
61
|
-
}
|
62
|
-
};
|
63
|
-
|
64
|
-
var textColor = theme === 'warning' ? {} : {
|
65
|
-
white: true
|
66
|
-
};
|
67
|
-
var iconData = hasIcon ? getIconData() : null;
|
55
|
+
resumeTimer = _ref.resumeTimer,
|
56
|
+
closeIcon = _ref.closeIcon,
|
57
|
+
testId = _ref.testId;
|
68
58
|
|
69
59
|
var onActionClick = function onActionClick(action) {
|
70
60
|
action.onClick();
|
71
61
|
onClose();
|
72
62
|
};
|
73
63
|
|
74
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
75
|
-
className: "".concat(classes.toast, " ").concat(classes[theme]).concat(closing ? " ".concat(classes.closing) : '')
|
76
|
-
|
64
|
+
return /*#__PURE__*/_react["default"].createElement("div", _extends({
|
65
|
+
className: "".concat(classes.toast, " ").concat(classes[theme]).concat(closing ? " ".concat(classes.closing) : '')
|
66
|
+
}, !closeIcon && {
|
67
|
+
onMouseEnter: pauseTimer
|
68
|
+
}, !closeIcon && {
|
77
69
|
onMouseLeave: resumeTimer
|
78
|
-
}, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
|
70
|
+
}), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
|
79
71
|
display: "flex",
|
80
|
-
|
72
|
+
justifyContent: "between"
|
81
73
|
}, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
|
82
74
|
display: "flex",
|
83
|
-
alignItems: "center"
|
84
|
-
|
85
|
-
iconName: iconData.icon,
|
86
|
-
colors: [iconData.color],
|
87
|
-
className: classes.icon
|
88
|
-
}), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
|
75
|
+
alignItems: "center",
|
76
|
+
alignSelf: "center",
|
89
77
|
flex: "1"
|
90
|
-
},
|
91
|
-
|
92
|
-
|
93
|
-
|
78
|
+
}, theme !== 'promote' && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
79
|
+
iconName: icons[theme],
|
80
|
+
className: classes.icon,
|
81
|
+
colors: [theme === 'info' ? _colors["default"].icon.brand["default"] : _colors["default"].icon[theme]]
|
82
|
+
}), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
|
83
|
+
display: "flex",
|
84
|
+
flex: "1",
|
85
|
+
className: classes.content,
|
86
|
+
alignSelf: description ? 'start' : 'center',
|
87
|
+
justifyContent: "between"
|
88
|
+
}, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
|
89
|
+
display: "flex",
|
90
|
+
direction: "col"
|
91
|
+
}, /*#__PURE__*/_react["default"].createElement("p", {
|
92
|
+
className: "".concat(classes.title, " ").concat(classes[colorTextClasses[theme]])
|
93
|
+
}, title), description && /*#__PURE__*/_react["default"].createElement("p", {
|
94
|
+
className: "".concat(classes.description, " ").concat(classes[colorTextClasses[theme]])
|
95
|
+
}, description)), action ? /*#__PURE__*/_react["default"].createElement("a", _extends({
|
96
|
+
className: "".concat(classes.actionText, " ").concat(classes[colorLinkClasses[theme]]),
|
94
97
|
onClick: function onClick() {
|
95
98
|
return onActionClick(action);
|
96
99
|
}
|
97
|
-
},
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
100
|
+
}, testId && {
|
101
|
+
'data-testid': "".concat(testId, "__link")
|
102
|
+
}), action.label) : null)), !action && closeIcon ? /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
|
103
|
+
onClick: onClose,
|
104
|
+
className: classes.closeIcon,
|
105
|
+
icon: "x",
|
106
|
+
size: "md",
|
107
|
+
theme: theme === 'promote' ? 'ghostWhite' : 'ghostGrey'
|
108
|
+
}, testId && {
|
109
|
+
testId: "".concat(testId, "__close-icon")
|
110
|
+
})) : null));
|
105
111
|
};
|
106
112
|
|
107
113
|
Toast.propTypes = {
|
108
114
|
classes: _propTypes["default"].object.isRequired,
|
109
115
|
theme: _propTypes["default"].oneOf(['success', 'error', 'info', 'warning']),
|
110
|
-
title: _propTypes["default"].string,
|
116
|
+
title: _propTypes["default"].string.isRequired,
|
111
117
|
description: _propTypes["default"].string,
|
112
118
|
action: _propTypes["default"].object,
|
113
|
-
|
114
|
-
|
119
|
+
closing: _propTypes["default"].bool,
|
120
|
+
pauseTimer: _propTypes["default"].func,
|
121
|
+
resumeTimer: _propTypes["default"].func,
|
122
|
+
onClose: _propTypes["default"].func.isRequired,
|
123
|
+
closeIcon: _propTypes["default"].bool,
|
124
|
+
|
125
|
+
/** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
|
126
|
+
testId: _propTypes["default"].string
|
115
127
|
};
|
116
128
|
var _default = Toast;
|
117
129
|
exports["default"] = _default;
|
@@ -5,17 +5,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports["default"] = void 0;
|
7
7
|
|
8
|
-
var _colors = _interopRequireDefault(require("../../
|
8
|
+
var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
|
9
9
|
|
10
|
-
var
|
10
|
+
var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
|
11
11
|
|
12
|
-
var
|
12
|
+
var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
|
13
|
+
|
14
|
+
var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
|
15
|
+
|
16
|
+
var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
|
13
17
|
|
14
18
|
var _grid = _interopRequireDefault(require("../../subatomic/grid"));
|
15
19
|
|
16
|
-
var
|
20
|
+
var _styles = require("../../Text/styles");
|
17
21
|
|
18
|
-
var _toast
|
22
|
+
var _toast;
|
19
23
|
|
20
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
21
25
|
|
@@ -33,16 +37,18 @@ var _default = {
|
|
33
37
|
}
|
34
38
|
},
|
35
39
|
toast: (_toast = {
|
36
|
-
borderRadius:
|
37
|
-
boxShadow: _shadows["default"]
|
38
|
-
padding:
|
40
|
+
borderRadius: _borderRadius["default"]['br-xs'],
|
41
|
+
boxShadow: _shadows["default"]['elevation-elevation-5'],
|
42
|
+
padding: _spacing["default"]['size-3'],
|
39
43
|
pointerEvents: 'auto',
|
40
44
|
zIndex: 1001,
|
41
45
|
animation: 'slideToasterIn 0.3s ease-out',
|
42
|
-
transition: '0.3s all ease-out'
|
46
|
+
transition: '0.3s all ease-out',
|
47
|
+
outlineOffset: '-1px'
|
43
48
|
}, _defineProperty(_toast, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
|
44
49
|
maxWidth: 480,
|
45
|
-
|
50
|
+
minWidth: 400,
|
51
|
+
padding: _spacing["default"]['size-4']
|
46
52
|
}), _defineProperty(_toast, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
|
47
53
|
width: '100%'
|
48
54
|
}), _toast),
|
@@ -51,54 +57,120 @@ var _default = {
|
|
51
57
|
opacity: 0
|
52
58
|
},
|
53
59
|
success: {
|
54
|
-
|
60
|
+
backgroundColor: _colors["default"].alert.success.bg,
|
61
|
+
outline: "1px solid ".concat(_colors["default"].alert.success.border)
|
55
62
|
},
|
56
63
|
error: {
|
57
|
-
|
64
|
+
backgroundColor: _colors["default"].alert.error.bg,
|
65
|
+
outline: "1px solid ".concat(_colors["default"].alert.error.border)
|
58
66
|
},
|
59
67
|
warning: {
|
60
|
-
|
68
|
+
backgroundColor: _colors["default"].alert.warning.bg,
|
69
|
+
outline: "1px solid ".concat(_colors["default"].alert.warning.border)
|
61
70
|
},
|
62
71
|
info: {
|
63
|
-
|
72
|
+
backgroundColor: _colors["default"].alert.info.bg,
|
73
|
+
outline: "1px solid ".concat(_colors["default"].alert.info.border)
|
74
|
+
},
|
75
|
+
promote: {
|
76
|
+
backgroundColor: _colors["default"].alert.neutral.bg,
|
77
|
+
outline: "1px solid ".concat(_colors["default"].alert.neutral.border)
|
78
|
+
},
|
79
|
+
textInfo: {
|
80
|
+
color: _colors["default"].text.indigo.primary
|
81
|
+
},
|
82
|
+
textWarning: {
|
83
|
+
color: _colors["default"].text.warning
|
84
|
+
},
|
85
|
+
textSuccess: {
|
86
|
+
color: _colors["default"].text.success
|
87
|
+
},
|
88
|
+
textError: {
|
89
|
+
color: _colors["default"].text.error
|
90
|
+
},
|
91
|
+
textPromote: {
|
92
|
+
color: _colors["default"].text.white.primary
|
93
|
+
},
|
94
|
+
linkInfo: {
|
95
|
+
color: _colors["default"].text.indigo.primary,
|
96
|
+
backgroundRepeat: 'no-repeat',
|
97
|
+
background: "linear-gradient(".concat(_colors["default"].link.brand.bg.hover, ", ").concat(_colors["default"].link.brand.bg.hover, ")"),
|
98
|
+
'&:active': {
|
99
|
+
background: "linear-gradient(".concat(_colors["default"].link.brand.bg.active, ", ").concat(_colors["default"].link.brand.bg.active, ")")
|
100
|
+
}
|
101
|
+
},
|
102
|
+
linkWarning: {
|
103
|
+
color: _colors["default"].text.warning,
|
104
|
+
backgroundRepeat: 'no-repeat',
|
105
|
+
background: "linear-gradient(".concat(_colors["default"].link.warning.bg.hover, ", ").concat(_colors["default"].link.warning.bg.hover, ")"),
|
106
|
+
'&:active': {
|
107
|
+
background: "linear-gradient(".concat(_colors["default"].link.warning.bg.active, ", ").concat(_colors["default"].link.warning.bg.active, ")")
|
108
|
+
}
|
109
|
+
},
|
110
|
+
linkSuccess: {
|
111
|
+
color: _colors["default"].text.success,
|
112
|
+
backgroundRepeat: 'no-repeat',
|
113
|
+
background: "linear-gradient(".concat(_colors["default"].link.success.bg.hover, ", ").concat(_colors["default"].link.success.bg.hover, ")"),
|
114
|
+
'&:active': {
|
115
|
+
background: "linear-gradient(".concat(_colors["default"].link.success.bg.active, ", ").concat(_colors["default"].link.success.bg.active, ")")
|
116
|
+
}
|
64
117
|
},
|
65
|
-
|
118
|
+
linkError: {
|
119
|
+
color: _colors["default"].text.error,
|
120
|
+
backgroundRepeat: 'no-repeat',
|
121
|
+
background: "linear-gradient(".concat(_colors["default"].link.error.bg.hover, ", ").concat(_colors["default"].link.error.bg.hover, ")"),
|
122
|
+
'&:active': {
|
123
|
+
background: "linear-gradient(".concat(_colors["default"].link.error.bg.active, ", ").concat(_colors["default"].link.error.bg.active, ")")
|
124
|
+
}
|
125
|
+
},
|
126
|
+
linkPromote: {
|
127
|
+
color: _colors["default"].text.white.primary,
|
128
|
+
backgroundRepeat: 'no-repeat',
|
129
|
+
background: "linear-gradient(".concat(_colors["default"].link.white.bg.hover, ", ").concat(_colors["default"].link.white.bg.hover, ")"),
|
130
|
+
'&:active': {
|
131
|
+
background: "linear-gradient(".concat(_colors["default"].link.white.bg.active, ", ").concat(_colors["default"].link.white.bg.active, ")")
|
132
|
+
}
|
133
|
+
},
|
134
|
+
title: {
|
135
|
+
font: (0, _styles.parseFontValue)(_fonts["default"]['alert-default']),
|
136
|
+
margin: 0
|
137
|
+
},
|
138
|
+
description: {
|
139
|
+
font: (0, _styles.parseFontValue)(_fonts["default"]['alert-description']),
|
140
|
+
margin: [_spacing["default"]['size-1'], 0, 0]
|
141
|
+
},
|
142
|
+
content: _defineProperty({
|
66
143
|
flexDirection: 'column'
|
144
|
+
}, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
|
145
|
+
flexDirection: 'row'
|
67
146
|
}),
|
68
|
-
icon:
|
69
|
-
marginRight: _spacing["default"]
|
70
|
-
|
71
|
-
|
72
|
-
}, _defineProperty(_icon, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
|
73
|
-
width: _iconSizes["default"].base,
|
74
|
-
height: _iconSizes["default"].base
|
75
|
-
}), _defineProperty(_icon, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
|
76
|
-
display: 'none'
|
77
|
-
}), _icon),
|
78
|
-
action: (_action = {
|
79
|
-
marginTop: _spacing["default"].xTiny,
|
80
|
-
cursor: 'pointer',
|
81
|
-
background: 'none',
|
82
|
-
border: 'none'
|
83
|
-
}, _defineProperty(_action, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
|
84
|
-
margin: -_spacing["default"].small,
|
85
|
-
marginLeft: _spacing["default"].small,
|
86
|
-
padding: [0, _spacing["default"].small],
|
87
|
-
borderRadius: [0, _spacing["default"].radius, _spacing["default"].radius, 0],
|
88
|
-
borderLeft: '1px solid rgba(255, 255, 255, 0.1)',
|
89
|
-
transition: '0.3s all',
|
90
|
-
'&:hover': {
|
91
|
-
background: 'rgba(255, 255, 255, 0.15)'
|
92
|
-
}
|
93
|
-
}), _defineProperty(_action, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
|
94
|
-
alignSelf: 'flex-end'
|
95
|
-
}), _action),
|
147
|
+
icon: {
|
148
|
+
marginRight: _spacing["default"]['size-2'],
|
149
|
+
alignSelf: 'start'
|
150
|
+
},
|
96
151
|
actionWrap: {
|
97
152
|
height: '100%'
|
98
153
|
},
|
99
|
-
actionText: {
|
100
|
-
|
101
|
-
whiteSpace: 'nowrap'
|
154
|
+
actionText: _defineProperty({
|
155
|
+
font: (0, _styles.parseFontValue)(_fonts["default"]['link-small-strong']),
|
156
|
+
whiteSpace: 'nowrap',
|
157
|
+
textDecoration: 'underline',
|
158
|
+
cursor: 'pointer',
|
159
|
+
alignSelf: 'start',
|
160
|
+
transition: 'all ease-out 150ms',
|
161
|
+
backgroundSize: '0%',
|
162
|
+
'&:hover': {
|
163
|
+
backgroundSize: '100%',
|
164
|
+
cursor: 'pointer'
|
165
|
+
},
|
166
|
+
margin: [_spacing["default"]['size-2'], 0, 0]
|
167
|
+
}, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
|
168
|
+
margin: [0, 0, 0, _spacing["default"]['size-4']],
|
169
|
+
alignSelf: 'center'
|
170
|
+
}),
|
171
|
+
closeIcon: {
|
172
|
+
marginLeft: _spacing["default"]['size-4'],
|
173
|
+
alignSelf: 'center'
|
102
174
|
}
|
103
175
|
};
|
104
176
|
exports["default"] = _default;
|
package/build/Toaster/Toaster.js
CHANGED
@@ -78,7 +78,7 @@ var Toaster = /*#__PURE__*/function (_React$Component) {
|
|
78
78
|
toast: toast,
|
79
79
|
toastId: toastId
|
80
80
|
}, function () {
|
81
|
-
_this.addTimer();
|
81
|
+
if (!toast.closeIcon) _this.addTimer();
|
82
82
|
});
|
83
83
|
});
|
84
84
|
|
@@ -164,8 +164,9 @@ var Toaster = /*#__PURE__*/function (_React$Component) {
|
|
164
164
|
title: toast.title,
|
165
165
|
theme: toast.type,
|
166
166
|
action: toast.action,
|
167
|
-
|
167
|
+
closeIcon: toast.closeIcon,
|
168
168
|
closing: toast.closing,
|
169
|
+
testId: toast.testId,
|
169
170
|
onClose: function onClose() {
|
170
171
|
return _this2.onClose(toast);
|
171
172
|
},
|
@@ -104,11 +104,14 @@ describe("Toaster", function () {
|
|
104
104
|
|
105
105
|
_functions.toaster.success({
|
106
106
|
title: 'Title',
|
107
|
-
action: action
|
107
|
+
action: action,
|
108
|
+
testId: "toaster-test"
|
108
109
|
});
|
109
110
|
|
110
111
|
wrapper.update();
|
111
|
-
wrapper.find(
|
112
|
+
wrapper.find({
|
113
|
+
"data-testid": 'toaster-test__link'
|
114
|
+
}).simulate('click');
|
112
115
|
expect(action.onClick).toHaveBeenCalled();
|
113
116
|
setTimeout(function () {
|
114
117
|
wrapper.update();
|
@@ -1,5 +1,5 @@
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
2
|
|
3
|
-
exports[`Toaster launches a toast 1`] = `"<div class=\\"container\\"><div class=\\"Toast-toast-0-1-1 Toast-success-0-1-3\\"><div class=\\"Flexbox-flex-0-1-
|
3
|
+
exports[`Toaster launches a toast 1`] = `"<div class=\\"container\\"><div class=\\"Toast-toast-0-1-1 Toast-success-0-1-3\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-jbetween-0-1-37\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-acenter-0-1-42 Flexbox-scenter-0-1-54\\" style=\\"flex: 1;\\"><svg class=\\"Icon-icon-0-1-60 Icon-icon-0-1-57 undefined__check-circle Toast-icon-0-1-21\\" width=\\"24\\" height=\\"24\\" fill=\\"#38d373\\" style=\\"transition: 0.3s all;\\"><use xlink:href=\\"undefined#undefined__check-circle\\"></use></svg><div class=\\"Flexbox-flex-0-1-25 Flexbox-jbetween-0-1-37 Flexbox-scenter-0-1-54 Toast-content-0-1-20\\" style=\\"flex: 1;\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-col-0-1-29\\"><p class=\\"Toast-title-0-1-18 Toast-textSuccess-0-1-10\\">Title</p></div></div></div></div></div></div>"`;
|
4
4
|
|
5
5
|
exports[`Toaster matches the snapshot 1`] = `"<div class=\\"container\\"></div>"`;
|
@@ -29,6 +29,10 @@ var toaster = {
|
|
29
29
|
value.type = 'warning';
|
30
30
|
this.addToast(value);
|
31
31
|
},
|
32
|
+
promote: function promote(value) {
|
33
|
+
value.type = 'promote';
|
34
|
+
this.addToast(value);
|
35
|
+
},
|
32
36
|
close: function close() {
|
33
37
|
if (this.closeListener && !(0, _isEmpty["default"])(this.toast)) this.closeListener(this.toast);
|
34
38
|
},
|
package/build/Toaster/styles.js
CHANGED
@@ -7,7 +7,7 @@ exports["default"] = void 0;
|
|
7
7
|
|
8
8
|
var _grid = _interopRequireDefault(require("../subatomic/grid"));
|
9
9
|
|
10
|
-
var _spacing = _interopRequireDefault(require("../
|
10
|
+
var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
|
11
11
|
|
12
12
|
var _container;
|
13
13
|
|
@@ -21,9 +21,9 @@ var _default = {
|
|
21
21
|
zIndex: 1001,
|
22
22
|
bottom: 0,
|
23
23
|
left: 0,
|
24
|
-
padding: _spacing["default"]
|
24
|
+
padding: _spacing["default"]['size-4']
|
25
25
|
}, _defineProperty(_container, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
|
26
|
-
padding: _spacing["default"]
|
26
|
+
padding: _spacing["default"]['size-6']
|
27
27
|
}), _defineProperty(_container, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
|
28
28
|
width: '100vw'
|
29
29
|
}), _defineProperty(_container, "pointerEvents", 'none'), _container)
|
package/build/subatomic/grid.js
CHANGED
@@ -12,10 +12,10 @@ var _default = {
|
|
12
12
|
lg: 1200,
|
13
13
|
xl: 1500,
|
14
14
|
full: '100%',
|
15
|
-
xsGrid:
|
16
|
-
smGrid:
|
17
|
-
mdGrid:
|
18
|
-
lgGrid:
|
19
|
-
xlGrid:
|
15
|
+
xsGrid: '100%',
|
16
|
+
smGrid: '100%',
|
17
|
+
mdGrid: '100%',
|
18
|
+
lgGrid: 1140,
|
19
|
+
xlGrid: 1440
|
20
20
|
};
|
21
21
|
exports["default"] = _default;
|
package/build/tokens/colors.json
CHANGED
@@ -343,7 +343,7 @@
|
|
343
343
|
},
|
344
344
|
"info": {
|
345
345
|
"bg": "#e3efff",
|
346
|
-
"border": "#
|
346
|
+
"border": "#b9d7ff"
|
347
347
|
},
|
348
348
|
"neutral": {
|
349
349
|
"bg": "#000",
|
@@ -402,7 +402,7 @@
|
|
402
402
|
},
|
403
403
|
"info": {
|
404
404
|
"bg": "#e3efff",
|
405
|
-
"border": "#
|
405
|
+
"border": "#b9d7ff"
|
406
406
|
},
|
407
407
|
"featured": {
|
408
408
|
"border": "rgba(255,255,255,0.2)",
|
@@ -437,6 +437,12 @@
|
|
437
437
|
"hover": "hsl(221 91.2% 35.7% / 0.1)",
|
438
438
|
"active": "hsl(221 91.2% 35.7% / 0.2)"
|
439
439
|
}
|
440
|
+
},
|
441
|
+
"white": {
|
442
|
+
"bg": {
|
443
|
+
"hover": "rgba(255,255,255,0.2)",
|
444
|
+
"active": "rgba(255,255,255,0.3)"
|
445
|
+
}
|
440
446
|
}
|
441
447
|
},
|
442
448
|
"nav": {
|
@@ -463,6 +469,18 @@
|
|
463
469
|
}
|
464
470
|
}
|
465
471
|
},
|
472
|
+
"avatar": {
|
473
|
+
"bg": {
|
474
|
+
"default": "#E9EEF8",
|
475
|
+
"hover": "#CAD5EE",
|
476
|
+
"active": "#ABBDE4",
|
477
|
+
"disabled": "#EDEDF1",
|
478
|
+
"overlay": {
|
479
|
+
"hover": "hsl(234 75.4% 12.7% / 0.3)",
|
480
|
+
"active": "hsl(234 75.4% 12.7% / 0.4)"
|
481
|
+
}
|
482
|
+
}
|
483
|
+
},
|
466
484
|
"bg": {
|
467
485
|
"action": {
|
468
486
|
"primary": {
|
@@ -567,7 +585,7 @@
|
|
567
585
|
"subtle": "#d7f6e3"
|
568
586
|
},
|
569
587
|
"info": {
|
570
|
-
"subtle": "#
|
588
|
+
"subtle": "#b9d7ff"
|
571
589
|
}
|
572
590
|
},
|
573
591
|
"text": {
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@occmundial/occ-atomic",
|
3
|
-
"version": "3.0.0-beta.
|
3
|
+
"version": "3.0.0-beta.31",
|
4
4
|
"description": "Collection of shareable styled React components for OCC applications.",
|
5
5
|
"homepage": "http://occmundial.github.io/occ-atomic",
|
6
6
|
"main": "build/index.js",
|
@@ -120,5 +120,8 @@
|
|
120
120
|
"roots": [
|
121
121
|
"<rootDir>/lib/"
|
122
122
|
]
|
123
|
+
},
|
124
|
+
"volta": {
|
125
|
+
"node": "16.18.0"
|
123
126
|
}
|
124
127
|
}
|
package/build/Banner/styles.js
DELETED
@@ -1,41 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports["default"] = void 0;
|
7
|
-
|
8
|
-
var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
|
9
|
-
|
10
|
-
var _colors = _interopRequireDefault(require("../subatomic/colors"));
|
11
|
-
|
12
|
-
var _grid = _interopRequireDefault(require("../subatomic/grid"));
|
13
|
-
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
15
|
-
|
16
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
17
|
-
|
18
|
-
var _default = {
|
19
|
-
container: {
|
20
|
-
padding: _spacing["default"].small,
|
21
|
-
backgroundColor: _colors["default"].ink
|
22
|
-
},
|
23
|
-
textBanner: {
|
24
|
-
display: 'inline-block'
|
25
|
-
},
|
26
|
-
textFlex: _defineProperty({
|
27
|
-
textAlign: 'start'
|
28
|
-
}, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
|
29
|
-
textAlign: 'center'
|
30
|
-
}),
|
31
|
-
iconFlex: _defineProperty({
|
32
|
-
paddingLeft: _spacing["default"].small,
|
33
|
-
paddingTop: _spacing["default"].small
|
34
|
-
}, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
|
35
|
-
padding: 0
|
36
|
-
}),
|
37
|
-
icon: {
|
38
|
-
cursor: 'pointer'
|
39
|
-
}
|
40
|
-
};
|
41
|
-
exports["default"] = _default;
|
@@ -1,27 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports["default"] = void 0;
|
7
|
-
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
9
|
-
|
10
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
11
|
-
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
13
|
-
|
14
|
-
var Break = function Break(_ref) {
|
15
|
-
var classes = _ref.classes,
|
16
|
-
label = _ref.label;
|
17
|
-
return /*#__PURE__*/_react["default"].createElement("li", {
|
18
|
-
className: classes.li
|
19
|
-
}, label);
|
20
|
-
};
|
21
|
-
|
22
|
-
Break.propTypes = {
|
23
|
-
classes: _propTypes["default"].object,
|
24
|
-
label: _propTypes["default"].string
|
25
|
-
};
|
26
|
-
var _default = Break;
|
27
|
-
exports["default"] = _default;
|