@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.
Files changed (76) hide show
  1. package/CHANGELOG.md +261 -0
  2. package/build/Avatar/Avatar.js +69 -21
  3. package/build/Avatar/Avatar.test.js +15 -8
  4. package/build/Avatar/AvatarContent/AvatarContent.js +61 -21
  5. package/build/Avatar/AvatarContent/AvatarContent.test.js +4 -18
  6. package/build/Avatar/AvatarContent/__snapshots__/AvatarContent.test.js.snap +75 -15
  7. package/build/Avatar/AvatarContent/styles.js +88 -21
  8. package/build/Avatar/__snapshots__/Avatar.test.js.snap +11 -2
  9. package/build/Avatar/styles.js +18 -7
  10. package/build/Banner/Banner.js +30 -40
  11. package/build/Banner/Banner.test.js +64 -17
  12. package/build/Banner/__snapshots__/Banner.test.js.snap +0 -28
  13. package/build/Banner/index.js +1 -6
  14. package/build/Button/Button.js +1 -1
  15. package/build/Button/__snapshots__/Button.test.js.snap +19 -20
  16. package/build/Button/styles.js +8 -9
  17. package/build/Checkbox/Checkbox.js +48 -3
  18. package/build/Checkbox/__snapshots__/Checkbox.test.js.snap +81 -49
  19. package/build/Checkbox/styles.js +91 -48
  20. package/build/Footer/Footer.js +15 -8
  21. package/build/Footer/__snapshots__/Footer.test.js.snap +0 -6
  22. package/build/Footer/styles.js +0 -6
  23. package/build/Grid/Col/__snapshots__/Col.test.js.snap +34 -2
  24. package/build/Grid/Col/styles.js +18 -6
  25. package/build/Grid/Row/__snapshots__/Row.test.js.snap +36 -2
  26. package/build/Grid/Row/styles.js +21 -5
  27. package/build/Grid/styles.js +8 -8
  28. package/build/Pager/Page/Page.js +8 -5
  29. package/build/Pager/Page/Page.test.js +13 -9
  30. package/build/Pager/Page/__snapshots__/Page.test.js.snap +34 -10
  31. package/build/Pager/Page/styles.js +48 -14
  32. package/build/Pager/Pager.js +139 -235
  33. package/build/Pager/Pager.test.js +81 -36
  34. package/build/Pager/__snapshots__/Pager.test.js.snap +3 -36
  35. package/build/Pager/styles.js +5 -40
  36. package/build/Pill/Choice/Choice.js +6 -4
  37. package/build/Pill/Choice/styles.js +13 -10
  38. package/build/Pill/Group/styles.js +5 -5
  39. package/build/Pill/Stack/Stack.js +2 -2
  40. package/build/Pill/Stack/styles.js +5 -8
  41. package/build/Radio/Radio.js +42 -6
  42. package/build/Radio/__snapshots__/Radio.test.js.snap +81 -80
  43. package/build/Radio/styles.js +93 -85
  44. package/build/SlideToggle/SlideToggle.js +38 -6
  45. package/build/SlideToggle/SlideToggle.test.js +2 -2
  46. package/build/SlideToggle/__snapshots__/SlideToggle.test.js.snap +53 -37
  47. package/build/SlideToggle/styles.js +65 -45
  48. package/build/Tag/Tag.js +2 -2
  49. package/build/Tag/__snapshots__/Tag.test.js.snap +40 -43
  50. package/build/Tag/styles.js +76 -82
  51. package/build/Text/Text.js +4 -2
  52. package/build/TextField/TextField.js +7 -6
  53. package/build/TextField/__snapshots__/TextField.test.js.snap +3 -0
  54. package/build/TextField/styles.js +3 -0
  55. package/build/Tip/Tip.js +61 -95
  56. package/build/Tip/Tip.test.js +29 -6
  57. package/build/Tip/TipText/index.js +32 -0
  58. package/build/Tip/__snapshots__/Tip.test.js.snap +131 -15
  59. package/build/Tip/styles.js +126 -31
  60. package/build/Toaster/Toast/Toast.js +76 -64
  61. package/build/Toaster/Toast/styles.js +118 -46
  62. package/build/Toaster/Toaster.js +3 -2
  63. package/build/Toaster/Toaster.test.js +5 -2
  64. package/build/Toaster/__snapshots__/Toaster.test.js.snap +1 -1
  65. package/build/Toaster/functions.js +4 -0
  66. package/build/Toaster/styles.js +3 -3
  67. package/build/subatomic/grid.js +5 -5
  68. package/build/tokens/colors.json +21 -3
  69. package/package.json +4 -1
  70. package/build/Banner/styles.js +0 -41
  71. package/build/Pager/Break/Break.js +0 -27
  72. package/build/Pager/Break/Break.test.js +0 -53
  73. package/build/Pager/Break/__snapshots__/Break.test.js.snap +0 -13
  74. package/build/Pager/Break/index.js +0 -18
  75. package/build/Pager/Break/styles.js +0 -12
  76. /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("../../subatomic/colors"));
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
- var getIconData = function getIconData() {
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
- onMouseEnter: pauseTimer,
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
- className: classes.content
72
+ justifyContent: "between"
81
73
  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
82
74
  display: "flex",
83
- alignItems: "center"
84
- }, hasIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
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
- }, title && /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({
91
- subheading: true
92
- }, textColor), title), description && /*#__PURE__*/_react["default"].createElement(_Text["default"], textColor, description))), action && /*#__PURE__*/_react["default"].createElement("button", {
93
- className: classes.action,
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
- }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
98
- display: "flex",
99
- alignItems: "center",
100
- className: classes.actionWrap
101
- }, /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({}, textColor, {
102
- strong: true,
103
- className: classes.actionText
104
- }), action.label)))));
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
- hasIcon: _propTypes["default"].bool,
114
- onClose: _propTypes["default"].func.isRequired
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("../../subatomic/colors"));
8
+ var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
9
9
 
10
- var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
10
+ var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
11
11
 
12
- var _shadows = _interopRequireDefault(require("../../subatomic/shadows"));
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 _iconSizes = _interopRequireDefault(require("../../subatomic/iconSizes"));
20
+ var _styles = require("../../Text/styles");
17
21
 
18
- var _toast, _icon, _action;
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: _spacing["default"].radius,
37
- boxShadow: _shadows["default"].lvl5,
38
- padding: [_spacing["default"].tiny, _spacing["default"].small],
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
- padding: _spacing["default"].small
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
- background: _colors["default"].success
60
+ backgroundColor: _colors["default"].alert.success.bg,
61
+ outline: "1px solid ".concat(_colors["default"].alert.success.border)
55
62
  },
56
63
  error: {
57
- background: _colors["default"].error
64
+ backgroundColor: _colors["default"].alert.error.bg,
65
+ outline: "1px solid ".concat(_colors["default"].alert.error.border)
58
66
  },
59
67
  warning: {
60
- background: _colors["default"].warning
68
+ backgroundColor: _colors["default"].alert.warning.bg,
69
+ outline: "1px solid ".concat(_colors["default"].alert.warning.border)
61
70
  },
62
71
  info: {
63
- background: _colors["default"].info
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
- content: _defineProperty({}, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
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: (_icon = {
69
- marginRight: _spacing["default"].small,
70
- width: _iconSizes["default"].small,
71
- height: _iconSizes["default"].small
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
- textTransform: 'uppercase',
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;
@@ -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
- hasIcon: toast.hasIcon,
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('button').simulate('click');
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-12 Toast-content-0-1-7\\"><div class=\\"Flexbox-flex-0-1-12 Flexbox-acenter-0-1-29\\"><div class=\\"\\" style=\\"flex: 1;\\"><p class=\\"Text-text-0-1-44 Text-h5-0-1-50 Text-whitePrimary-0-1-70\\">Title</p></div></div></div></div></div>"`;
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
  },
@@ -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("../subatomic/spacing"));
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"].small
24
+ padding: _spacing["default"]['size-4']
25
25
  }, _defineProperty(_container, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
26
- padding: _spacing["default"].medium
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)
@@ -12,10 +12,10 @@ var _default = {
12
12
  lg: 1200,
13
13
  xl: 1500,
14
14
  full: '100%',
15
- xsGrid: 564,
16
- smGrid: 744,
17
- mdGrid: 984,
18
- lgGrid: 1164,
19
- xlGrid: 1464
15
+ xsGrid: '100%',
16
+ smGrid: '100%',
17
+ mdGrid: '100%',
18
+ lgGrid: 1140,
19
+ xlGrid: 1440
20
20
  };
21
21
  exports["default"] = _default;
@@ -343,7 +343,7 @@
343
343
  },
344
344
  "info": {
345
345
  "bg": "#e3efff",
346
- "border": "#e3efff"
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": "#e3efff"
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": "#e3efff"
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",
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
  }
@@ -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;