@megafon/ui-core 4.14.2 → 4.15.1

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 (20) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/es/components/Badges/components/PriceBadge/PriceBadge.css +16 -0
  3. package/dist/es/components/Badges/components/PriceBadge/PriceBadge.d.ts +9 -0
  4. package/dist/es/components/Badges/components/PriceBadge/PriceBadge.js +73 -11
  5. package/dist/es/components/Button/Button.css +22 -0
  6. package/dist/es/components/Button/Button.d.ts +1 -0
  7. package/dist/es/components/Button/Button.js +2 -1
  8. package/dist/es/components/Select/Select.css +21 -23
  9. package/dist/es/components/Tabs/Tabs.d.ts +2 -0
  10. package/dist/es/components/Tabs/Tabs.js +8 -5
  11. package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.css +16 -0
  12. package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.d.ts +9 -0
  13. package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.js +75 -12
  14. package/dist/lib/components/Button/Button.css +22 -0
  15. package/dist/lib/components/Button/Button.d.ts +1 -0
  16. package/dist/lib/components/Button/Button.js +2 -1
  17. package/dist/lib/components/Select/Select.css +21 -23
  18. package/dist/lib/components/Tabs/Tabs.d.ts +2 -0
  19. package/dist/lib/components/Tabs/Tabs.js +8 -5
  20. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,34 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [4.15.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.15.0...@megafon/ui-core@4.15.1) (2023-04-04)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **color:** new danger color for text type button ([7f53fd8](https://github.com/MegafonWebLab/megafon-ui/commit/7f53fd8d369f664e678c8cb2a437ef4fa5c801fc))
12
+ * **pricebadge:** new props size and subtitle ([5f40360](https://github.com/MegafonWebLab/megafon-ui/commit/5f40360509e703a8fab2f4936aa109a9b63bafcd))
13
+
14
+
15
+
16
+
17
+
18
+ # [4.15.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.14.2...@megafon/ui-core@4.15.0) (2023-03-27)
19
+
20
+
21
+ ### Bug Fixes
22
+
23
+ * **select:** reduce opened z index ([eb95b6b](https://github.com/MegafonWebLab/megafon-ui/commit/eb95b6b5ff4d18c0e782a571428fdb4680e11474))
24
+
25
+
26
+ ### Features
27
+
28
+ * **select:** fix pseudo element position, fix z-index of drop-down list ([8d74450](https://github.com/MegafonWebLab/megafon-ui/commit/8d744504b0829323a94727a49823ec4d6a6e0d0d))
29
+
30
+
31
+
32
+
33
+
6
34
  ## [4.14.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.14.1...@megafon/ui-core@4.14.2) (2023-03-20)
7
35
 
8
36
 
package/dist/es/components/Badges/components/PriceBadge/PriceBadge.css CHANGED
@@ -63,6 +63,11 @@
63
63
  .mfui-price-badge_theme_red .mfui-price-badge__icon {
64
64
  fill: var(--fury);
65
65
  }
66
+ .mfui-price-badge_size_big {
67
+ font-size: 15px;
68
+ line-height: 18px;
69
+ padding: 12px 12px 12px 4px;
70
+ }
66
71
  .mfui-price-badge__text {
67
72
  font-family: inherit;
68
73
  margin-left: 2px;
@@ -75,4 +80,15 @@
75
80
  .mfui-price-badge__icon {
76
81
  height: 20px;
77
82
  width: 20px;
83
+ min-width: 20px;
84
+ }
85
+ .mfui-price-badge_size_big .mfui-price-badge__icon {
86
+ height: 32px;
87
+ width: 32px;
88
+ min-width: 32px;
89
+ }
90
+ .mfui-price-badge_size_big .mfui-price-badge__sub-title {
91
+ font-size: 12px;
92
+ line-height: 18px;
93
+ margin-top: 2px;
78
94
  }
package/dist/es/components/Badges/components/PriceBadge/PriceBadge.d.ts CHANGED
@@ -12,8 +12,13 @@ export declare const PriceBadgeIcon: {
12
12
  readonly CHECK: "check";
13
13
  readonly ATTENTION: "attention";
14
14
  };
15
+ export declare const PriseBadgeSize: {
16
+ readonly SMALL: "small";
17
+ readonly BIG: "big";
18
+ };
15
19
  declare type PriceBadgeThemeType = typeof PriceBadgeTheme[keyof typeof PriceBadgeTheme];
16
20
  declare type PriceBadgeIconType = typeof PriceBadgeIcon[keyof typeof PriceBadgeIcon];
21
+ declare type PriseBadgeSizeType = typeof PriseBadgeSize[keyof typeof PriseBadgeSize];
17
22
  export interface IPriceBadgeProps {
18
23
  /** Адаптивный режим */
19
24
  isAdaptive?: boolean;
@@ -23,6 +28,10 @@ export interface IPriceBadgeProps {
23
28
  theme?: PriceBadgeThemeType;
24
29
  /** Дополнительный класс корневого элемента */
25
30
  className?: string;
31
+ /** Размер бейджа */
32
+ size?: PriseBadgeSizeType;
33
+ /** Дополнительный текст (только для size="big") */
34
+ subTitle?: string;
26
35
  /** Дополнительные data-атрибуты к внутренним элементам */
27
36
  dataAttrs?: {
28
37
  root?: Record<string, string>;
package/dist/es/components/Badges/components/PriceBadge/PriceBadge.js CHANGED
@@ -43,6 +43,44 @@ var TimerIcon = function TimerIcon(props) {
43
43
  }));
44
44
  };
45
45
 
46
+ var AttentionIconBig = function AttentionIconBig(props) {
47
+ return /*#__PURE__*/React.createElement("svg", _extends({
48
+ viewBox: "0 0 32 32"
49
+ }, props), /*#__PURE__*/React.createElement("path", {
50
+ d: "M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm1 18h-2v-2h2v2zm0-4h-2v-8h2v8z"
51
+ }));
52
+ };
53
+
54
+ var CheckIconBig = function CheckIconBig(props) {
55
+ return /*#__PURE__*/React.createElement("svg", _extends({
56
+ viewBox: "0 0 32 32"
57
+ }, props), /*#__PURE__*/React.createElement("path", {
58
+ fillRule: "evenodd",
59
+ clipRule: "evenodd",
60
+ d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm-1.306-10.016l6.32-7.672 1.486 1.37s-7.538 9.186-7.7 9.193c-.136 0-4.488-4.484-4.488-4.484l1.438-1.425 2.944 3.018z"
61
+ }));
62
+ };
63
+
64
+ var PriceIconBig = function PriceIconBig(props) {
65
+ return /*#__PURE__*/React.createElement("svg", _extends({
66
+ viewBox: "0 0 32 32"
67
+ }, props), /*#__PURE__*/React.createElement("path", {
68
+ fillRule: "evenodd",
69
+ clipRule: "evenodd",
70
+ d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm-5-7v-2h2v-2h-2v-2h2V9h4a4 4 0 110 8h-2v2h4v2h-4v2h-2v-2h-2zm7.414-9.414A2 2 0 0017 11h-2v4h2a2 2 0 001.414-3.414z"
71
+ }));
72
+ };
73
+
74
+ var TimerIconBig = function TimerIconBig(props) {
75
+ return /*#__PURE__*/React.createElement("svg", _extends({
76
+ viewBox: "0 0 32 32"
77
+ }, props), /*#__PURE__*/React.createElement("path", {
78
+ fillRule: "evenodd",
79
+ clipRule: "evenodd",
80
+ d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm1-12.414V9h-2v7.414l4 4L20.414 19 17 15.586z"
81
+ }));
82
+ };
83
+
46
84
  export var PriceBadgeTheme = {
47
85
  RED: 'red',
48
86
  GREY: 'grey',
@@ -55,19 +93,34 @@ export var PriceBadgeIcon = {
55
93
  CHECK: 'check',
56
94
  ATTENTION: 'attention'
57
95
  };
96
+ export var PriseBadgeSize = {
97
+ SMALL: 'small',
98
+ BIG: 'big'
99
+ };
58
100
 
59
- var getPriceBadgeIcon = function getPriceBadgeIcon(iconType) {
60
- switch (iconType) {
61
- case PriceBadgeIcon.TIMER:
62
- return TimerIcon;
101
+ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
102
+ var isBigIcon = size === PriseBadgeSize.BIG;
103
+
104
+ switch (true) {
105
+ case iconType === PriceBadgeIcon.TIMER && isBigIcon:
106
+ return TimerIconBig;
107
+
108
+ case iconType === PriceBadgeIcon.PRICE && isBigIcon:
109
+ return PriceIconBig;
110
+
111
+ case iconType === PriceBadgeIcon.CHECK && isBigIcon:
112
+ return CheckIconBig;
113
+
114
+ case iconType === PriceBadgeIcon.ATTENTION && isBigIcon:
115
+ return AttentionIconBig;
63
116
 
64
- case PriceBadgeIcon.PRICE:
117
+ case iconType === PriceBadgeIcon.PRICE:
65
118
  return PriceIcon;
66
119
 
67
- case PriceBadgeIcon.CHECK:
120
+ case iconType === PriceBadgeIcon.CHECK:
68
121
  return CheckIcon;
69
122
 
70
- case PriceBadgeIcon.ATTENTION:
123
+ case iconType === PriceBadgeIcon.ATTENTION:
71
124
  return AttentionIcon;
72
125
 
73
126
  default:
@@ -84,28 +137,37 @@ var PriceBadge = function PriceBadge(_ref) {
84
137
  isAdaptive = _ref$isAdaptive === void 0 ? false : _ref$isAdaptive,
85
138
  _ref$theme = _ref.theme,
86
139
  theme = _ref$theme === void 0 ? 'grey' : _ref$theme,
140
+ _ref$size = _ref.size,
141
+ size = _ref$size === void 0 ? 'small' : _ref$size,
142
+ subTitle = _ref.subTitle,
87
143
  className = _ref.className,
88
144
  dataAttrs = _ref.dataAttrs,
89
145
  children = _ref.children;
90
- var Icon = getPriceBadgeIcon(iconType);
146
+ var Icon = getPriceBadgeIcon(iconType, size);
147
+ var showSubTitle = size === 'big' && !!subTitle;
91
148
  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
92
149
  className: cn({
93
150
  theme: theme,
94
- adaptive: isAdaptive
151
+ adaptive: isAdaptive,
152
+ size: size
95
153
  }, className)
96
154
  }), /*#__PURE__*/React.createElement("div", {
97
155
  className: cn('icon-container')
98
156
  }, /*#__PURE__*/React.createElement(Icon, {
99
157
  className: cn('icon')
100
- })), /*#__PURE__*/React.createElement("span", {
158
+ })), /*#__PURE__*/React.createElement("div", {
101
159
  className: cn('text')
102
- }, children));
160
+ }, /*#__PURE__*/React.createElement("div", null, children), showSubTitle && /*#__PURE__*/React.createElement("div", {
161
+ className: cn('sub-title')
162
+ }, subTitle)));
103
163
  };
104
164
 
105
165
  PriceBadge.propTypes = {
106
166
  isAdaptive: PropTypes.bool,
107
167
  iconType: PropTypes.oneOf(Object.values(PriceBadgeIcon)),
108
168
  theme: PropTypes.oneOf(Object.values(PriceBadgeTheme)),
169
+ size: PropTypes.oneOf(Object.values(PriseBadgeSize)),
170
+ subTitle: PropTypes.string,
109
171
  className: PropTypes.string,
110
172
  dataAttrs: PropTypes.shape({
111
173
  root: PropTypes.objectOf(PropTypes.string.isRequired).isRequired
package/dist/es/components/Button/Button.css CHANGED
@@ -494,6 +494,28 @@
494
494
  .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):active svg {
495
495
  fill: var(--buttonDown);
496
496
  }
497
+ .mfui-button_type_text.mfui-button_theme_danger {
498
+ width: -webkit-fit-content;
499
+ width: -moz-fit-content;
500
+ width: fit-content;
501
+ color: var(--fury);
502
+ background-color: transparent;
503
+ }
504
+ .mfui-button_type_text.mfui-button_theme_danger svg {
505
+ fill: var(--fury);
506
+ }
507
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):hover {
508
+ color: var(--warmRedC);
509
+ }
510
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):hover svg {
511
+ fill: var(--warmRedC);
512
+ }
513
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):active {
514
+ color: var(--buttonDown);
515
+ }
516
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):active svg {
517
+ fill: var(--buttonDown);
518
+ }
497
519
  .mfui-button_type_primary.mfui-button_theme_green {
498
520
  color: var(--stcWhite);
499
521
  background-color: var(--brandGreen);
package/dist/es/components/Button/Button.d.ts CHANGED
@@ -13,6 +13,7 @@ export declare const ButtonThemes: {
13
13
  readonly PURPLE_SOFT: "purple-soft";
14
14
  readonly WHITE: "white";
15
15
  readonly BLACK: "black";
16
+ readonly DANGER: "danger";
16
17
  };
17
18
  declare type ButtonThemesType = typeof ButtonThemes[keyof typeof ButtonThemes];
18
19
  export declare const ButtonSizes: {
package/dist/es/components/Button/Button.js CHANGED
@@ -29,7 +29,8 @@ export var ButtonThemes = {
29
29
  PURPLE: 'purple',
30
30
  PURPLE_SOFT: 'purple-soft',
31
31
  WHITE: 'white',
32
- BLACK: 'black'
32
+ BLACK: 'black',
33
+ DANGER: 'danger'
33
34
  };
34
35
  export var ButtonSizes = {
35
36
  EXTRA_SMALL: 'extra-small',
package/dist/es/components/Select/Select.css CHANGED
@@ -38,8 +38,6 @@
38
38
  position: relative;
39
39
  }
40
40
  .mfui-select__control {
41
- position: relative;
42
- z-index: 11;
43
41
  -webkit-box-sizing: border-box;
44
42
  box-sizing: border-box;
45
43
  width: 100%;
@@ -53,24 +51,6 @@
53
51
  -webkit-transition: border-color 0.3s;
54
52
  transition: border-color 0.3s;
55
53
  }
56
- .mfui-select__control:after {
57
- content: '';
58
- position: absolute;
59
- top: 50%;
60
- right: 27px;
61
- z-index: 1;
62
- display: block;
63
- border-top: 6px solid;
64
- border-right: 5px solid transparent;
65
- border-bottom: none;
66
- border-left: 5px solid transparent;
67
- color: var(--brandGreen);
68
- cursor: pointer;
69
- -webkit-transition: -webkit-transform 0.6s;
70
- transition: -webkit-transform 0.6s;
71
- transition: transform 0.6s;
72
- transition: transform 0.6s, -webkit-transform 0.6s;
73
- }
74
54
  .mfui-select__combobox {
75
55
  font-size: 15px;
76
56
  line-height: 24px;
@@ -113,6 +93,24 @@
113
93
  height: 100%;
114
94
  outline: none;
115
95
  }
96
+ .mfui-select__title:after {
97
+ content: '';
98
+ position: absolute;
99
+ top: 50%;
100
+ right: 27px;
101
+ z-index: 1;
102
+ display: block;
103
+ border-top: 6px solid;
104
+ border-right: 5px solid transparent;
105
+ border-bottom: none;
106
+ border-left: 5px solid transparent;
107
+ color: var(--brandGreen);
108
+ cursor: pointer;
109
+ -webkit-transition: -webkit-transform 0.6s;
110
+ transition: -webkit-transform 0.6s;
111
+ transition: transform 0.6s;
112
+ transition: transform 0.6s, -webkit-transform 0.6s;
113
+ }
116
114
  .mfui-select__title-value {
117
115
  display: -webkit-box;
118
116
  display: -ms-flexbox;
@@ -343,9 +341,9 @@
343
341
  opacity: 1;
344
342
  }
345
343
  .mfui-select_open {
346
- z-index: 100;
344
+ z-index: 12;
347
345
  }
348
- .mfui-select_open .mfui-select__control:after {
346
+ .mfui-select_open .mfui-select__title:after {
349
347
  -webkit-transform: rotate(-180deg);
350
348
  transform: rotate(-180deg);
351
349
  }
@@ -385,7 +383,7 @@
385
383
  .mfui-select_disabled .mfui-select__title-inner:after {
386
384
  display: none;
387
385
  }
388
- .mfui-select_disabled .mfui-select__control:after {
386
+ .mfui-select_disabled .mfui-select__title:after {
389
387
  color: var(--content);
390
388
  opacity: 0.5;
391
389
  }
package/dist/es/components/Tabs/Tabs.d.ts CHANGED
@@ -36,6 +36,8 @@ export interface ITabsProps {
36
36
  panel?: Record<string, string>;
37
37
  prev?: Record<string, string>;
38
38
  next?: Record<string, string>;
39
+ wrapper?: Record<string, string>;
40
+ swiperWrapper?: Record<string, string>;
39
41
  };
40
42
  /** Размер табов */
41
43
  size?: TabSizeType;
package/dist/es/components/Tabs/Tabs.js CHANGED
@@ -394,19 +394,20 @@ var Tabs = function Tabs(_ref) {
394
394
  'auto-width': autoWidth
395
395
  }, [className, classes.root]),
396
396
  ref: rootRef
397
- }), /*#__PURE__*/React.createElement("div", {
398
- className: cn('wrapper', [classes === null || classes === void 0 ? void 0 : classes.wrapper]),
397
+ }), /*#__PURE__*/React.createElement("div", _extends({
399
398
  ref: tabListRef,
400
399
  style: {
401
400
  height: tabListHeight
402
401
  }
403
- }, /*#__PURE__*/React.createElement("div", {
402
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper), {
403
+ className: cn('wrapper', [classes === null || classes === void 0 ? void 0 : classes.wrapper])
404
+ }), /*#__PURE__*/React.createElement("div", _extends({
404
405
  className: cn('swiper-wrapper', [classes === null || classes === void 0 ? void 0 : classes.swiperWrapper]),
405
406
  style: {
406
407
  paddingLeft: stickyOffset.left,
407
408
  paddingRight: stickyOffset.right
408
409
  }
409
- }, /*#__PURE__*/React.createElement(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
410
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiperWrapper)), /*#__PURE__*/React.createElement(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
410
411
  simulateTouch: false,
411
412
  className: cn('swiper', {
412
413
  beginning: isBeginning,
@@ -458,7 +459,9 @@ Tabs.propTypes = {
458
459
  slider: PropTypes.objectOf(PropTypes.string.isRequired),
459
460
  panel: PropTypes.objectOf(PropTypes.string.isRequired),
460
461
  prev: PropTypes.objectOf(PropTypes.string.isRequired),
461
- next: PropTypes.objectOf(PropTypes.string.isRequired)
462
+ next: PropTypes.objectOf(PropTypes.string.isRequired),
463
+ wrapper: PropTypes.objectOf(PropTypes.string.isRequired),
464
+ swiperWrapper: PropTypes.objectOf(PropTypes.string.isRequired)
462
465
  }),
463
466
  size: PropTypes.oneOf(Object.values(TabSize)),
464
467
  align: PropTypes.oneOf(Object.values(TabAlign)),
package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.css CHANGED
@@ -63,6 +63,11 @@
63
63
  .mfui-price-badge_theme_red .mfui-price-badge__icon {
64
64
  fill: var(--fury);
65
65
  }
66
+ .mfui-price-badge_size_big {
67
+ font-size: 15px;
68
+ line-height: 18px;
69
+ padding: 12px 12px 12px 4px;
70
+ }
66
71
  .mfui-price-badge__text {
67
72
  font-family: inherit;
68
73
  margin-left: 2px;
@@ -75,4 +80,15 @@
75
80
  .mfui-price-badge__icon {
76
81
  height: 20px;
77
82
  width: 20px;
83
+ min-width: 20px;
84
+ }
85
+ .mfui-price-badge_size_big .mfui-price-badge__icon {
86
+ height: 32px;
87
+ width: 32px;
88
+ min-width: 32px;
89
+ }
90
+ .mfui-price-badge_size_big .mfui-price-badge__sub-title {
91
+ font-size: 12px;
92
+ line-height: 18px;
93
+ margin-top: 2px;
78
94
  }
package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.d.ts CHANGED
@@ -12,8 +12,13 @@ export declare const PriceBadgeIcon: {
12
12
  readonly CHECK: "check";
13
13
  readonly ATTENTION: "attention";
14
14
  };
15
+ export declare const PriseBadgeSize: {
16
+ readonly SMALL: "small";
17
+ readonly BIG: "big";
18
+ };
15
19
  declare type PriceBadgeThemeType = typeof PriceBadgeTheme[keyof typeof PriceBadgeTheme];
16
20
  declare type PriceBadgeIconType = typeof PriceBadgeIcon[keyof typeof PriceBadgeIcon];
21
+ declare type PriseBadgeSizeType = typeof PriseBadgeSize[keyof typeof PriseBadgeSize];
17
22
  export interface IPriceBadgeProps {
18
23
  /** Адаптивный режим */
19
24
  isAdaptive?: boolean;
@@ -23,6 +28,10 @@ export interface IPriceBadgeProps {
23
28
  theme?: PriceBadgeThemeType;
24
29
  /** Дополнительный класс корневого элемента */
25
30
  className?: string;
31
+ /** Размер бейджа */
32
+ size?: PriseBadgeSizeType;
33
+ /** Дополнительный текст (только для size="big") */
34
+ subTitle?: string;
26
35
  /** Дополнительные data-атрибуты к внутренним элементам */
27
36
  dataAttrs?: {
28
37
  root?: Record<string, string>;
package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.js CHANGED
@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports["default"] = exports.PriceBadgeIcon = exports.PriceBadgeTheme = void 0;
8
+ exports["default"] = exports.PriseBadgeSize = exports.PriceBadgeIcon = exports.PriceBadgeTheme = void 0;
9
9
 
10
10
  require("core-js/modules/es.object.values");
11
11
 
@@ -61,6 +61,44 @@ var TimerIcon = function TimerIcon(props) {
61
61
  }));
62
62
  };
63
63
 
64
+ var AttentionIconBig = function AttentionIconBig(props) {
65
+ return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
66
+ viewBox: "0 0 32 32"
67
+ }, props), /*#__PURE__*/React.createElement("path", {
68
+ d: "M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm1 18h-2v-2h2v2zm0-4h-2v-8h2v8z"
69
+ }));
70
+ };
71
+
72
+ var CheckIconBig = function CheckIconBig(props) {
73
+ return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
74
+ viewBox: "0 0 32 32"
75
+ }, props), /*#__PURE__*/React.createElement("path", {
76
+ fillRule: "evenodd",
77
+ clipRule: "evenodd",
78
+ d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm-1.306-10.016l6.32-7.672 1.486 1.37s-7.538 9.186-7.7 9.193c-.136 0-4.488-4.484-4.488-4.484l1.438-1.425 2.944 3.018z"
79
+ }));
80
+ };
81
+
82
+ var PriceIconBig = function PriceIconBig(props) {
83
+ return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
84
+ viewBox: "0 0 32 32"
85
+ }, props), /*#__PURE__*/React.createElement("path", {
86
+ fillRule: "evenodd",
87
+ clipRule: "evenodd",
88
+ d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm-5-7v-2h2v-2h-2v-2h2V9h4a4 4 0 110 8h-2v2h4v2h-4v2h-2v-2h-2zm7.414-9.414A2 2 0 0017 11h-2v4h2a2 2 0 001.414-3.414z"
89
+ }));
90
+ };
91
+
92
+ var TimerIconBig = function TimerIconBig(props) {
93
+ return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
94
+ viewBox: "0 0 32 32"
95
+ }, props), /*#__PURE__*/React.createElement("path", {
96
+ fillRule: "evenodd",
97
+ clipRule: "evenodd",
98
+ d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm1-12.414V9h-2v7.414l4 4L20.414 19 17 15.586z"
99
+ }));
100
+ };
101
+
64
102
  var PriceBadgeTheme = {
65
103
  RED: 'red',
66
104
  GREY: 'grey',
@@ -75,19 +113,35 @@ var PriceBadgeIcon = {
75
113
  ATTENTION: 'attention'
76
114
  };
77
115
  exports.PriceBadgeIcon = PriceBadgeIcon;
116
+ var PriseBadgeSize = {
117
+ SMALL: 'small',
118
+ BIG: 'big'
119
+ };
120
+ exports.PriseBadgeSize = PriseBadgeSize;
78
121
 
79
- var getPriceBadgeIcon = function getPriceBadgeIcon(iconType) {
80
- switch (iconType) {
81
- case PriceBadgeIcon.TIMER:
82
- return TimerIcon;
122
+ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
123
+ var isBigIcon = size === PriseBadgeSize.BIG;
124
+
125
+ switch (true) {
126
+ case iconType === PriceBadgeIcon.TIMER && isBigIcon:
127
+ return TimerIconBig;
128
+
129
+ case iconType === PriceBadgeIcon.PRICE && isBigIcon:
130
+ return PriceIconBig;
131
+
132
+ case iconType === PriceBadgeIcon.CHECK && isBigIcon:
133
+ return CheckIconBig;
134
+
135
+ case iconType === PriceBadgeIcon.ATTENTION && isBigIcon:
136
+ return AttentionIconBig;
83
137
 
84
- case PriceBadgeIcon.PRICE:
138
+ case iconType === PriceBadgeIcon.PRICE:
85
139
  return PriceIcon;
86
140
 
87
- case PriceBadgeIcon.CHECK:
141
+ case iconType === PriceBadgeIcon.CHECK:
88
142
  return CheckIcon;
89
143
 
90
- case PriceBadgeIcon.ATTENTION:
144
+ case iconType === PriceBadgeIcon.ATTENTION:
91
145
  return AttentionIcon;
92
146
 
93
147
  default:
@@ -104,28 +158,37 @@ var PriceBadge = function PriceBadge(_ref) {
104
158
  isAdaptive = _ref$isAdaptive === void 0 ? false : _ref$isAdaptive,
105
159
  _ref$theme = _ref.theme,
106
160
  theme = _ref$theme === void 0 ? 'grey' : _ref$theme,
161
+ _ref$size = _ref.size,
162
+ size = _ref$size === void 0 ? 'small' : _ref$size,
163
+ subTitle = _ref.subTitle,
107
164
  className = _ref.className,
108
165
  dataAttrs = _ref.dataAttrs,
109
166
  children = _ref.children;
110
- var Icon = getPriceBadgeIcon(iconType);
167
+ var Icon = getPriceBadgeIcon(iconType, size);
168
+ var showSubTitle = size === 'big' && !!subTitle;
111
169
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
112
170
  className: cn({
113
171
  theme: theme,
114
- adaptive: isAdaptive
172
+ adaptive: isAdaptive,
173
+ size: size
115
174
  }, className)
116
175
  }), /*#__PURE__*/React.createElement("div", {
117
176
  className: cn('icon-container')
118
177
  }, /*#__PURE__*/React.createElement(Icon, {
119
178
  className: cn('icon')
120
- })), /*#__PURE__*/React.createElement("span", {
179
+ })), /*#__PURE__*/React.createElement("div", {
121
180
  className: cn('text')
122
- }, children));
181
+ }, /*#__PURE__*/React.createElement("div", null, children), showSubTitle && /*#__PURE__*/React.createElement("div", {
182
+ className: cn('sub-title')
183
+ }, subTitle)));
123
184
  };
124
185
 
125
186
  PriceBadge.propTypes = {
126
187
  isAdaptive: PropTypes.bool,
127
188
  iconType: PropTypes.oneOf(Object.values(PriceBadgeIcon)),
128
189
  theme: PropTypes.oneOf(Object.values(PriceBadgeTheme)),
190
+ size: PropTypes.oneOf(Object.values(PriseBadgeSize)),
191
+ subTitle: PropTypes.string,
129
192
  className: PropTypes.string,
130
193
  dataAttrs: PropTypes.shape({
131
194
  root: PropTypes.objectOf(PropTypes.string.isRequired).isRequired
package/dist/lib/components/Button/Button.css CHANGED
@@ -494,6 +494,28 @@
494
494
  .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):active svg {
495
495
  fill: var(--buttonDown);
496
496
  }
497
+ .mfui-button_type_text.mfui-button_theme_danger {
498
+ width: -webkit-fit-content;
499
+ width: -moz-fit-content;
500
+ width: fit-content;
501
+ color: var(--fury);
502
+ background-color: transparent;
503
+ }
504
+ .mfui-button_type_text.mfui-button_theme_danger svg {
505
+ fill: var(--fury);
506
+ }
507
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):hover {
508
+ color: var(--warmRedC);
509
+ }
510
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):hover svg {
511
+ fill: var(--warmRedC);
512
+ }
513
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):active {
514
+ color: var(--buttonDown);
515
+ }
516
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):active svg {
517
+ fill: var(--buttonDown);
518
+ }
497
519
  .mfui-button_type_primary.mfui-button_theme_green {
498
520
  color: var(--stcWhite);
499
521
  background-color: var(--brandGreen);
package/dist/lib/components/Button/Button.d.ts CHANGED
@@ -13,6 +13,7 @@ export declare const ButtonThemes: {
13
13
  readonly PURPLE_SOFT: "purple-soft";
14
14
  readonly WHITE: "white";
15
15
  readonly BLACK: "black";
16
+ readonly DANGER: "danger";
16
17
  };
17
18
  declare type ButtonThemesType = typeof ButtonThemes[keyof typeof ButtonThemes];
18
19
  export declare const ButtonSizes: {
package/dist/lib/components/Button/Button.js CHANGED
@@ -53,7 +53,8 @@ var ButtonThemes = {
53
53
  PURPLE: 'purple',
54
54
  PURPLE_SOFT: 'purple-soft',
55
55
  WHITE: 'white',
56
- BLACK: 'black'
56
+ BLACK: 'black',
57
+ DANGER: 'danger'
57
58
  };
58
59
  exports.ButtonThemes = ButtonThemes;
59
60
  var ButtonSizes = {
package/dist/lib/components/Select/Select.css CHANGED
@@ -38,8 +38,6 @@
38
38
  position: relative;
39
39
  }
40
40
  .mfui-select__control {
41
- position: relative;
42
- z-index: 11;
43
41
  -webkit-box-sizing: border-box;
44
42
  box-sizing: border-box;
45
43
  width: 100%;
@@ -53,24 +51,6 @@
53
51
  -webkit-transition: border-color 0.3s;
54
52
  transition: border-color 0.3s;
55
53
  }
56
- .mfui-select__control:after {
57
- content: '';
58
- position: absolute;
59
- top: 50%;
60
- right: 27px;
61
- z-index: 1;
62
- display: block;
63
- border-top: 6px solid;
64
- border-right: 5px solid transparent;
65
- border-bottom: none;
66
- border-left: 5px solid transparent;
67
- color: var(--brandGreen);
68
- cursor: pointer;
69
- -webkit-transition: -webkit-transform 0.6s;
70
- transition: -webkit-transform 0.6s;
71
- transition: transform 0.6s;
72
- transition: transform 0.6s, -webkit-transform 0.6s;
73
- }
74
54
  .mfui-select__combobox {
75
55
  font-size: 15px;
76
56
  line-height: 24px;
@@ -113,6 +93,24 @@
113
93
  height: 100%;
114
94
  outline: none;
115
95
  }
96
+ .mfui-select__title:after {
97
+ content: '';
98
+ position: absolute;
99
+ top: 50%;
100
+ right: 27px;
101
+ z-index: 1;
102
+ display: block;
103
+ border-top: 6px solid;
104
+ border-right: 5px solid transparent;
105
+ border-bottom: none;
106
+ border-left: 5px solid transparent;
107
+ color: var(--brandGreen);
108
+ cursor: pointer;
109
+ -webkit-transition: -webkit-transform 0.6s;
110
+ transition: -webkit-transform 0.6s;
111
+ transition: transform 0.6s;
112
+ transition: transform 0.6s, -webkit-transform 0.6s;
113
+ }
116
114
  .mfui-select__title-value {
117
115
  display: -webkit-box;
118
116
  display: -ms-flexbox;
@@ -343,9 +341,9 @@
343
341
  opacity: 1;
344
342
  }
345
343
  .mfui-select_open {
346
- z-index: 100;
344
+ z-index: 12;
347
345
  }
348
- .mfui-select_open .mfui-select__control:after {
346
+ .mfui-select_open .mfui-select__title:after {
349
347
  -webkit-transform: rotate(-180deg);
350
348
  transform: rotate(-180deg);
351
349
  }
@@ -385,7 +383,7 @@
385
383
  .mfui-select_disabled .mfui-select__title-inner:after {
386
384
  display: none;
387
385
  }
388
- .mfui-select_disabled .mfui-select__control:after {
386
+ .mfui-select_disabled .mfui-select__title:after {
389
387
  color: var(--content);
390
388
  opacity: 0.5;
391
389
  }
package/dist/lib/components/Tabs/Tabs.d.ts CHANGED
@@ -36,6 +36,8 @@ export interface ITabsProps {
36
36
  panel?: Record<string, string>;
37
37
  prev?: Record<string, string>;
38
38
  next?: Record<string, string>;
39
+ wrapper?: Record<string, string>;
40
+ swiperWrapper?: Record<string, string>;
39
41
  };
40
42
  /** Размер табов */
41
43
  size?: TabSizeType;
package/dist/lib/components/Tabs/Tabs.js CHANGED
@@ -425,19 +425,20 @@ var Tabs = function Tabs(_ref) {
425
425
  'auto-width': autoWidth
426
426
  }, [className, classes.root]),
427
427
  ref: rootRef
428
- }), /*#__PURE__*/React.createElement("div", {
429
- className: cn('wrapper', [classes === null || classes === void 0 ? void 0 : classes.wrapper]),
428
+ }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
430
429
  ref: tabListRef,
431
430
  style: {
432
431
  height: tabListHeight
433
432
  }
434
- }, /*#__PURE__*/React.createElement("div", {
433
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper), {
434
+ className: cn('wrapper', [classes === null || classes === void 0 ? void 0 : classes.wrapper])
435
+ }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
435
436
  className: cn('swiper-wrapper', [classes === null || classes === void 0 ? void 0 : classes.swiperWrapper]),
436
437
  style: {
437
438
  paddingLeft: stickyOffset.left,
438
439
  paddingRight: stickyOffset.right
439
440
  }
440
- }, /*#__PURE__*/React.createElement(_react2.Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
441
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiperWrapper)), /*#__PURE__*/React.createElement(_react2.Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
441
442
  simulateTouch: false,
442
443
  className: cn('swiper', {
443
444
  beginning: isBeginning,
@@ -489,7 +490,9 @@ Tabs.propTypes = {
489
490
  slider: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
490
491
  panel: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
491
492
  prev: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
492
- next: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
493
+ next: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
494
+ wrapper: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
495
+ swiperWrapper: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
493
496
  }),
494
497
  size: _propTypes["default"].oneOf(Object.values(TabSize)),
495
498
  align: _propTypes["default"].oneOf(Object.values(TabAlign)),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "4.14.2",
3
+ "version": "4.15.1",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -54,7 +54,7 @@
54
54
  "@babel/preset-env": "^7.8.6",
55
55
  "@babel/preset-react": "^7.8.3",
56
56
  "@babel/preset-typescript": "^7.8.3",
57
- "@megafon/ui-icons": "^2.8.0",
57
+ "@megafon/ui-icons": "^2.8.1",
58
58
  "@svgr/core": "^2.4.1",
59
59
  "@testing-library/jest-dom": "5.16.2",
60
60
  "@testing-library/react": "12.1.2",
@@ -100,5 +100,5 @@
100
100
  "react-popper": "^2.2.3",
101
101
  "swiper": "^6.5.6"
102
102
  },
103
- "gitHead": "43725eddf6f23f91c95f9f7c932e9b9589a4af04"
103
+ "gitHead": "ff8786e64e8cc9220fc248899a2328d28bd159b0"
104
104
  }