@itcase/ui 1.0.41 → 1.0.42

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.
Files changed (6) hide show
  1. package/dist/components/Notification.js +55 -6
  2. package/dist/css/components/Notification/Notification.css +6 -9
  3. package/dist/css/components/Notification/css/__item/notification__item_set_float.css +15 -0
  4. package/dist/css/components/Notification/css/__item/notification__item_set_top.css +15 -0
  5. package/dist/css/components/Notification/css/__item/notification__item_status.css +37 -0
  6. package/package.json +1 -1
package/dist/components/Notification.js CHANGED
@@ -3,7 +3,31 @@
3
3
  var React = require('react');
4
4
  var PropTypes = require('prop-types');
5
5
  var clsx = require('clsx');
6
+ var index$1 = require('./Text.js');
7
+ var index = require('./Title.js');
8
+ var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
6
9
  var Notifications = require('../context/Notifications.js');
10
+ require('../constants/componentProps/textColor.js');
11
+ require('../constants/componentProps/textColorActive.js');
12
+ require('../constants/componentProps/textColorHover.js');
13
+ require('../constants/componentProps/size.js');
14
+ require('../constants/componentProps/textStyle.js');
15
+ require('../constants/componentProps/textWeight.js');
16
+ require('../useStyles-e4accb53.js');
17
+ require('lodash/camelCase');
18
+ require('lodash/maxBy');
19
+ require('lodash/upperFirst');
20
+ require('../hooks/styleAttributes.js');
21
+ require('../context/UIContext.js');
22
+ require('../hooks/useMediaQueries.js');
23
+ require('react-responsive');
24
+ require('lodash/castArray');
25
+ require('../constants/componentProps/fill.js');
26
+ require('../constants/componentProps/textAlign.js');
27
+ require('../constants/componentProps/textGradient.js');
28
+ require('../constants/componentProps/titleSize.js');
29
+ require('../constants/componentProps/type.js');
30
+ require('../constants/componentProps/wrap.js');
7
31
  require('uuid');
8
32
 
9
33
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -12,25 +36,45 @@ var React__default = /*#__PURE__*/_interopDefault(React);
12
36
  var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
13
37
  var clsx__default = /*#__PURE__*/_interopDefault(clsx);
14
38
 
39
+ var notificationItemConfig = {
40
+ appearance: {},
41
+ setAppearance: function setAppearance(newComponent) {
42
+ notificationItemConfig.appearance = newComponent;
43
+ }
44
+ };
15
45
  function NotificationItem(props) {
16
- var after = props.after,
46
+ var appearance = props.appearance,
47
+ after = props.after,
17
48
  before = props.before,
18
49
  set = props.set,
19
50
  status = props.status,
20
51
  size = props.size,
21
52
  dataTour = props.dataTour,
22
53
  text = props.text,
54
+ textSize = props.textSize,
55
+ textColor = props.textColor,
23
56
  title = props.title,
57
+ titleTextSize = props.titleTextSize,
58
+ titleTextColor = props.titleTextColor,
24
59
  className = props.className;
60
+ var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
61
+ prefix: 'fill_',
62
+ propsKey: 'fill'
63
+ });
64
+ console.log(notificationItemConfig.appearance[appearance].titleTextColor);
25
65
  return /*#__PURE__*/React__default.default.createElement("div", {
26
- className: clsx__default.default('notification__item', status && "notification__item_status_" + status, set && "notification__item_set_" + set, size && "notification__item_set_" + size),
66
+ className: clsx__default.default('notification__item', status && "notification__item_status_" + status, set && "notification__item_set_" + set, size && "notification__item_set_" + size, fillClass || notificationItemConfig.appearance[appearance] && ("fill_" + notificationItemConfig.appearance[appearance].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase()),
27
67
  "data-tour": dataTour
28
68
  }, before, /*#__PURE__*/React__default.default.createElement("div", {
29
69
  className: clsx__default.default(className, 'notification__item-wrapper')
30
- }, title && /*#__PURE__*/React__default.default.createElement("div", {
31
- className: "notification__item-title"
32
- }, title), text && /*#__PURE__*/React__default.default.createElement("div", {
33
- className: "notification__item-text"
70
+ }, title && /*#__PURE__*/React__default.default.createElement(index.Title, {
71
+ className: "notification__item-title",
72
+ size: titleTextSize,
73
+ textColor: titleTextColor || notificationItemConfig.appearance[appearance] && notificationItemConfig.appearance[appearance].titleTextColor.replace(/([A-Z])/g, '-$1').toLowerCase()
74
+ }, title), text && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
75
+ className: "notification__item-text",
76
+ size: textSize,
77
+ textColor: textColor || notificationItemConfig.appearance[appearance] && notificationItemConfig.appearance[appearance].textColor.replace(/([A-Z])/g, '-$1').toLowerCase()
34
78
  }, text)), after);
35
79
  }
36
80
  NotificationItem.propTypes = {
@@ -43,6 +87,10 @@ NotificationItem.propTypes = {
43
87
  after: PropTypes__default.default.any,
44
88
  before: PropTypes__default.default.any
45
89
  };
90
+ NotificationItem.defaultProps = {
91
+ titleTextSize: 'h5',
92
+ textSize: 's'
93
+ };
46
94
 
47
95
  function NotificationList(props) {
48
96
  var notifications = Notifications.useNotifications();
@@ -81,3 +129,4 @@ NotificationList.propTypes = {
81
129
 
82
130
  exports.NotificationItem = NotificationItem;
83
131
  exports.NotificationList = NotificationList;
132
+ exports.notificationItemConfig = notificationItemConfig;
package/dist/css/components/Notification/Notification.css CHANGED
@@ -17,16 +17,19 @@
17
17
  top: 20px;
18
18
  right: 40px;
19
19
  flex-flow: column nowrap;
20
+ ^^&__item {
21
+ width: 320px;
22
+ }
20
23
  }
21
24
  }
22
25
  }
23
26
  :root {
24
- --image-shape-rounded: 6px;
27
+
25
28
  }
26
29
  .notification__item {
27
30
  &_set {
28
31
  &_float {
29
- width: 320px;
32
+ width: 100%;
30
33
  ^^&-wrapper {
31
34
  display: flex;
32
35
  flex-direction: column;
@@ -41,7 +44,7 @@
41
44
  .notification__item {
42
45
  &_set {
43
46
  &_top {
44
- width: 320px;
47
+ width: 100%;
45
48
  ^^&-wrapper {
46
49
  padding: 12px 0;
47
50
  display: flex;
@@ -60,11 +63,9 @@
60
63
  background: var(--color-success-primary);
61
64
  ^^^&-title {
62
65
  color: var(--color-success-text-secondary);
63
- @mixin h5;
64
66
  }
65
67
  ^^^&-text {
66
68
  color: var(--color-success-text-secondary);
67
- @mixin text-s;
68
69
  }
69
70
  }
70
71
  }
@@ -73,11 +74,9 @@
73
74
  background: var(--color-error-primary);
74
75
  ^^^&-title {
75
76
  color: var(--color-error-text-secondary);
76
- @mixin h5;
77
77
  }
78
78
  ^^^&-text {
79
79
  color: var(--color-error-text-secondary);
80
- @mixin text-s;
81
80
  }
82
81
  }
83
82
  }
@@ -86,11 +85,9 @@
86
85
  background: var(--color-primary-primary);
87
86
  ^^^&-title {
88
87
  color: var(--color-primary-text-primary);
89
- @mixin h5;
90
88
  }
91
89
  ^^^&-text {
92
90
  color: var(--color-primary-text-primary);
93
- @mixin text-s;
94
91
  }
95
92
  }
96
93
  }
package/dist/css/components/Notification/css/__item/notification__item_set_float.css ADDED
@@ -0,0 +1,15 @@
1
+ .notification__item {
2
+ &_set {
3
+ &_float {
4
+ width: 100%;
5
+ ^^&-wrapper {
6
+ display: flex;
7
+ flex-direction: column;
8
+ gap: 4px;
9
+ border-radius: 8px;
10
+ @mixin elevation-8;
11
+ padding: 12px 16px;
12
+ }
13
+ }
14
+ }
15
+ }
package/dist/css/components/Notification/css/__item/notification__item_set_top.css ADDED
@@ -0,0 +1,15 @@
1
+ .notification__item {
2
+ &_set {
3
+ &_top {
4
+ width: 100%;
5
+ ^^&-wrapper {
6
+ padding: 12px 0;
7
+ display: flex;
8
+ flex-direction: column;
9
+ justify-content: center;
10
+ align-items: center;
11
+ gap: 4px;
12
+ }
13
+ }
14
+ }
15
+ }
package/dist/css/components/Notification/css/__item/notification__item_status.css ADDED
@@ -0,0 +1,37 @@
1
+ .notification__item {
2
+ &_status {
3
+ &_success {
4
+ ^^&-wrapper {
5
+ background: var(--color-success-primary);
6
+ ^^^&-title {
7
+ color: var(--color-success-text-secondary);
8
+ }
9
+ ^^^&-text {
10
+ color: var(--color-success-text-secondary);
11
+ }
12
+ }
13
+ }
14
+ &_error {
15
+ ^^&-wrapper {
16
+ background: var(--color-error-primary);
17
+ ^^^&-title {
18
+ color: var(--color-error-text-secondary);
19
+ }
20
+ ^^^&-text {
21
+ color: var(--color-error-text-secondary);
22
+ }
23
+ }
24
+ }
25
+ &_warning {
26
+ ^^&-wrapper {
27
+ background: var(--color-primary-primary);
28
+ ^^^&-title {
29
+ color: var(--color-primary-text-primary);
30
+ }
31
+ ^^^&-text {
32
+ color: var(--color-primary-text-primary);
33
+ }
34
+ }
35
+ }
36
+ }
37
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.0.41",
3
+ "version": "1.0.42",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",