@megafon/ui-core 5.7.0 → 5.7.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 (14) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/es/components/RadioButton/RadioButton.css +47 -8
  3. package/dist/es/components/RadioButton/RadioButton.d.ts +2 -0
  4. package/dist/es/components/RadioButton/RadioButton.js +9 -5
  5. package/dist/es/components/Selector/Selector.css +59 -25
  6. package/dist/es/components/Selector/Selector.d.ts +2 -0
  7. package/dist/es/components/Selector/Selector.js +8 -5
  8. package/dist/lib/components/RadioButton/RadioButton.css +47 -8
  9. package/dist/lib/components/RadioButton/RadioButton.d.ts +2 -0
  10. package/dist/lib/components/RadioButton/RadioButton.js +10 -5
  11. package/dist/lib/components/Selector/Selector.css +59 -25
  12. package/dist/lib/components/Selector/Selector.d.ts +2 -0
  13. package/dist/lib/components/Selector/Selector.js +9 -5
  14. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
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
+ ## [5.7.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.7.0...@megafon/ui-core@5.7.1) (2024-03-26)
7
+
8
+ **Note:** Version bump only for package @megafon/ui-core
9
+
10
+
11
+
12
+
13
+
6
14
  # [5.7.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.6.1...@megafon/ui-core@5.7.0) (2024-03-18)
7
15
 
8
16
 
package/dist/es/components/RadioButton/RadioButton.css CHANGED
@@ -38,32 +38,71 @@
38
38
  box-sizing: border-box;
39
39
  width: 22px;
40
40
  height: 22px;
41
- border: 2px solid var(--spbSky2);
42
41
  border-radius: 50%;
43
- background-color: var(--base);
44
42
  -webkit-transition: background-color, border-color;
45
43
  transition: background-color, border-color;
46
44
  -webkit-transition-duration: 0.3s;
47
45
  transition-duration: 0.3s;
48
46
  }
49
- .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
47
+ .mfui-radio-button__label_dark {
48
+ color: var(--content);
49
+ }
50
+ .mfui-radio-button__label_dark .mfui-radio-button__custom-input:before {
51
+ border: 2px solid var(--spbSky2);
52
+ background-color: var(--base);
53
+ }
54
+ .mfui-radio-button__input_dark:checked + .mfui-radio-button__custom-input:before {
50
55
  border: 7px solid var(--brandGreen);
51
56
  }
52
- .mfui-radio-button__label:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
57
+ .mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
53
58
  border-color: var(--buttonHoverGreen);
54
59
  }
55
- .mfui-radio-button__label:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before {
60
+ .mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before {
56
61
  border-color: var(--buttonDown);
57
62
  }
58
- .mfui-radio-button__label_disabled {
63
+ .mfui-radio-button__label_dark.mfui-radio-button__label_disabled {
59
64
  color: var(--spbSky3);
60
65
  cursor: default;
61
66
  }
62
- .mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before,
63
- .mfui-radio-button__label_disabled .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
67
+ .mfui-radio-button__label_dark.mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before,
68
+ .mfui-radio-button__label_dark.mfui-radio-button__label_disabled .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
64
69
  border-color: var(--spbSky2);
65
70
  background-color: var(--spbSky1);
66
71
  }
72
+ .mfui-radio-button__label_light {
73
+ color: var(--stcWhite);
74
+ }
75
+ .mfui-radio-button__label_light .mfui-radio-button__custom-input:before {
76
+ border: 2px solid var(--stcWhite);
77
+ background-color: var(--stcWhite);
78
+ }
79
+ .mfui-radio-button__input_light:checked + .mfui-radio-button__custom-input:before {
80
+ border: 7px solid var(--stcWhite);
81
+ background-color: var(--stcBlack);
82
+ }
83
+ .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
84
+ border-color: var(--buttonHoverGrey);
85
+ background-color: var(--buttonHoverGrey);
86
+ }
87
+ .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
88
+ background-color: var(--stcBlack);
89
+ }
90
+ .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before {
91
+ border-color: var(--buttonDown);
92
+ background-color: var(--buttonDown);
93
+ }
94
+ .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
95
+ background-color: var(--stcWhite);
96
+ }
97
+ .mfui-radio-button__label_light.mfui-radio-button__label_disabled {
98
+ color: var(--stcWhite50);
99
+ cursor: default;
100
+ }
101
+ .mfui-radio-button__label_light.mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before,
102
+ .mfui-radio-button__label_light.mfui-radio-button__label_disabled .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
103
+ border-color: var(--spbSky2);
104
+ background-color: var(--stcWhite);
105
+ }
67
106
  .mfui-radio-button__text_size_small {
68
107
  font-size: 12px;
69
108
  line-height: 18px;
package/dist/es/components/RadioButton/RadioButton.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import './RadioButton.less';
3
3
  export interface IRadioButtonProps {
4
+ /** Тема кнопки */
5
+ color?: 'dark' | 'light';
4
6
  /** Значение */
5
7
  value: string;
6
8
  /** Имя для тега form */
package/dist/es/components/RadioButton/RadioButton.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
3
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
4
  import "core-js/modules/es.function.name.js";
4
5
  import "core-js/modules/es.array.is-array.js";
@@ -10,7 +11,11 @@ import "./RadioButton.css";
10
11
  var cn = cnCreate('mfui-radio-button');
11
12
 
12
13
  var RadioButton = function RadioButton(_ref) {
13
- var isChecked = _ref.isChecked,
14
+ var _cn;
15
+
16
+ var _ref$color = _ref.color,
17
+ color = _ref$color === void 0 ? 'dark' : _ref$color,
18
+ isChecked = _ref.isChecked,
14
19
  _ref$disabled = _ref.disabled,
15
20
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
16
21
  name = _ref.name,
@@ -36,11 +41,9 @@ var RadioButton = function RadioButton(_ref) {
36
41
  return /*#__PURE__*/React.createElement("div", _extends({
37
42
  className: cn(rootClassNames)
38
43
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", {
39
- className: cn('label', {
40
- disabled: disabled
41
- }, classes.label)
44
+ className: cn('label', (_cn = {}, _defineProperty(_cn, color, true), _defineProperty(_cn, "disabled", disabled), _cn), classes.label)
42
45
  }, /*#__PURE__*/React.createElement("input", _extends({}, checkedProp, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
43
- className: cn('input'),
46
+ className: cn('input', _defineProperty({}, color, true)),
44
47
  type: "radio",
45
48
  name: name,
46
49
  value: value,
@@ -57,6 +60,7 @@ var RadioButton = function RadioButton(_ref) {
57
60
  };
58
61
 
59
62
  RadioButton.propTypes = {
63
+ color: PropTypes.oneOf(['dark', 'light']),
60
64
  value: PropTypes.string.isRequired,
61
65
  name: PropTypes.string,
62
66
  textSize: PropTypes.oneOf(['small', 'medium']),
package/dist/es/components/Selector/Selector.css CHANGED
@@ -34,9 +34,7 @@
34
34
  width: 20px;
35
35
  height: 20px;
36
36
  border: 2px solid;
37
- border-color: var(--spbSky2);
38
37
  border-radius: 50%;
39
- background-color: var(--base);
40
38
  -webkit-transition: background-color, border-color;
41
39
  transition: background-color, border-color;
42
40
  -webkit-transition-duration: 0.3s;
@@ -51,48 +49,84 @@
51
49
  transition: fill, opacity;
52
50
  -webkit-transition-duration: 0.3s;
53
51
  transition-duration: 0.3s;
52
+ }
53
+ .mfui-selector__label_dark .mfui-selector__custom-input {
54
+ border-color: var(--spbSky2);
55
+ background-color: var(--base);
56
+ }
57
+ .mfui-selector__label_dark .mfui-selector__icon {
54
58
  fill: var(--stcWhite);
55
59
  }
56
- .mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
60
+ .mfui-selector__label_dark:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
57
61
  border-color: var(--buttonHoverGreen);
58
62
  }
59
- .mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
63
+ .mfui-selector__label_dark:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
60
64
  border-color: var(--buttonDown);
61
65
  }
62
- .mfui-selector__label_disabled {
63
- cursor: default;
66
+ .mfui-selector__label_dark:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
67
+ border-color: var(--buttonHoverGreen);
68
+ background-color: var(--buttonHoverGreen);
64
69
  }
65
- .mfui-selector__label_disabled .mfui-selector__custom-input {
66
- border-color: var(--spbSky2);
67
- background-color: var(--spbSky1);
70
+ .mfui-selector__label_dark:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
71
+ border-color: var(--buttonDown);
72
+ background-color: var(--buttonDown);
68
73
  }
69
- .mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input {
70
- background-color: var(--spbSky2);
74
+ .mfui-selector__label_dark:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
75
+ border-color: var(--brandGreen);
76
+ background-color: var(--brandGreen);
71
77
  }
72
- .mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
73
- opacity: 1;
78
+ .mfui-selector__label_light .mfui-selector__custom-input {
79
+ border-color: var(--stcWhite);
80
+ background-color: var(--stcWhite);
74
81
  }
75
- .mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
76
- border-color: var(--buttonHoverGreen);
77
- background-color: var(--buttonHoverGreen);
82
+ .mfui-selector__label_light .mfui-selector__icon {
83
+ fill: var(--stcWhite);
78
84
  }
79
- .mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
80
- opacity: 1;
85
+ .mfui-selector__label_light:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
86
+ border-color: var(--buttonHoverGrey);
87
+ background-color: var(--buttonHoverGrey);
81
88
  }
82
- .mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
89
+ .mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
83
90
  border-color: var(--buttonDown);
84
91
  background-color: var(--buttonDown);
85
92
  }
86
- .mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
87
- opacity: 1;
93
+ .mfui-selector__label_light:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
94
+ border-color: var(--buttonHoverGrey);
95
+ background-color: var(--buttonHoverGrey);
88
96
  }
89
- .mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
90
- border-color: var(--brandGreen);
91
- background-color: var(--brandGreen);
97
+ .mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
98
+ border-color: var(--buttonDown);
99
+ background-color: var(--buttonDown);
100
+ }
101
+ .mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
102
+ fill: var(--stcWhite);
103
+ }
104
+ .mfui-selector__label_light:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
105
+ border-color: var(--stcWhite);
106
+ background-color: var(--stcWhite);
107
+ }
108
+ .mfui-selector__label_light:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
109
+ fill: var(--stcBlack);
110
+ }
111
+ .mfui-selector__label_lightk.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
112
+ fill: var(--stcWhite);
92
113
  }
93
- .mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
114
+ .mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon,
115
+ .mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon,
116
+ .mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon,
117
+ .mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
94
118
  opacity: 1;
95
119
  }
120
+ .mfui-selector__label_disabled {
121
+ cursor: default;
122
+ }
123
+ .mfui-selector__label_disabled .mfui-selector__custom-input {
124
+ border-color: var(--spbSky2);
125
+ background-color: var(--spbSky1);
126
+ }
127
+ .mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input {
128
+ background-color: var(--spbSky2);
129
+ }
96
130
  .mfui-selector__label_error .mfui-selector__custom-input {
97
131
  border-color: var(--fury);
98
132
  }
package/dist/es/components/Selector/Selector.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import './Selector.less';
3
3
  export interface ISelectorProps {
4
+ /** Цвет селектора */
5
+ color?: 'dark' | 'light';
4
6
  /** Базовый тип компонента */
5
7
  type?: 'radio' | 'checkbox';
6
8
  /** Значение */
package/dist/es/components/Selector/Selector.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
1
2
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
3
  import _extends from "@babel/runtime/helpers/extends";
3
4
  import "core-js/modules/es.function.name.js";
@@ -21,7 +22,11 @@ var CheckedIcon = function CheckedIcon(props) {
21
22
  var cn = cnCreate('mfui-selector');
22
23
 
23
24
  var Selector = function Selector(_ref) {
24
- var _ref$type = _ref.type,
25
+ var _cn;
26
+
27
+ var _ref$color = _ref.color,
28
+ color = _ref$color === void 0 ? 'dark' : _ref$color,
29
+ _ref$type = _ref.type,
25
30
  type = _ref$type === void 0 ? 'radio' : _ref$type,
26
31
  value = _ref.value,
27
32
  name = _ref.name,
@@ -54,10 +59,7 @@ var Selector = function Selector(_ref) {
54
59
  return /*#__PURE__*/React.createElement("div", _extends({
55
60
  className: cn('', className)
56
61
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", _extends({
57
- className: cn('label', {
58
- disabled: disabled,
59
- error: error
60
- }, classes.label)
62
+ className: cn('label', (_cn = {}, _defineProperty(_cn, color, true), _defineProperty(_cn, "disabled", disabled), _defineProperty(_cn, "error", error), _cn), classes.label)
61
63
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label)), /*#__PURE__*/React.createElement("input", _extends({
62
64
  className: cn('input'),
63
65
  type: type,
@@ -75,6 +77,7 @@ var Selector = function Selector(_ref) {
75
77
  };
76
78
 
77
79
  Selector.propTypes = {
80
+ color: PropTypes.oneOf(['dark', 'light']),
78
81
  type: PropTypes.oneOf(['radio', 'checkbox']),
79
82
  value: PropTypes.string.isRequired,
80
83
  name: PropTypes.string,
package/dist/lib/components/RadioButton/RadioButton.css CHANGED
@@ -38,32 +38,71 @@
38
38
  box-sizing: border-box;
39
39
  width: 22px;
40
40
  height: 22px;
41
- border: 2px solid var(--spbSky2);
42
41
  border-radius: 50%;
43
- background-color: var(--base);
44
42
  -webkit-transition: background-color, border-color;
45
43
  transition: background-color, border-color;
46
44
  -webkit-transition-duration: 0.3s;
47
45
  transition-duration: 0.3s;
48
46
  }
49
- .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
47
+ .mfui-radio-button__label_dark {
48
+ color: var(--content);
49
+ }
50
+ .mfui-radio-button__label_dark .mfui-radio-button__custom-input:before {
51
+ border: 2px solid var(--spbSky2);
52
+ background-color: var(--base);
53
+ }
54
+ .mfui-radio-button__input_dark:checked + .mfui-radio-button__custom-input:before {
50
55
  border: 7px solid var(--brandGreen);
51
56
  }
52
- .mfui-radio-button__label:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
57
+ .mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
53
58
  border-color: var(--buttonHoverGreen);
54
59
  }
55
- .mfui-radio-button__label:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before {
60
+ .mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before {
56
61
  border-color: var(--buttonDown);
57
62
  }
58
- .mfui-radio-button__label_disabled {
63
+ .mfui-radio-button__label_dark.mfui-radio-button__label_disabled {
59
64
  color: var(--spbSky3);
60
65
  cursor: default;
61
66
  }
62
- .mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before,
63
- .mfui-radio-button__label_disabled .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
67
+ .mfui-radio-button__label_dark.mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before,
68
+ .mfui-radio-button__label_dark.mfui-radio-button__label_disabled .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
64
69
  border-color: var(--spbSky2);
65
70
  background-color: var(--spbSky1);
66
71
  }
72
+ .mfui-radio-button__label_light {
73
+ color: var(--stcWhite);
74
+ }
75
+ .mfui-radio-button__label_light .mfui-radio-button__custom-input:before {
76
+ border: 2px solid var(--stcWhite);
77
+ background-color: var(--stcWhite);
78
+ }
79
+ .mfui-radio-button__input_light:checked + .mfui-radio-button__custom-input:before {
80
+ border: 7px solid var(--stcWhite);
81
+ background-color: var(--stcBlack);
82
+ }
83
+ .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
84
+ border-color: var(--buttonHoverGrey);
85
+ background-color: var(--buttonHoverGrey);
86
+ }
87
+ .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
88
+ background-color: var(--stcBlack);
89
+ }
90
+ .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before {
91
+ border-color: var(--buttonDown);
92
+ background-color: var(--buttonDown);
93
+ }
94
+ .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
95
+ background-color: var(--stcWhite);
96
+ }
97
+ .mfui-radio-button__label_light.mfui-radio-button__label_disabled {
98
+ color: var(--stcWhite50);
99
+ cursor: default;
100
+ }
101
+ .mfui-radio-button__label_light.mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before,
102
+ .mfui-radio-button__label_light.mfui-radio-button__label_disabled .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
103
+ border-color: var(--spbSky2);
104
+ background-color: var(--stcWhite);
105
+ }
67
106
  .mfui-radio-button__text_size_small {
68
107
  font-size: 12px;
69
108
  line-height: 18px;
package/dist/lib/components/RadioButton/RadioButton.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import './RadioButton.less';
3
3
  export interface IRadioButtonProps {
4
+ /** Тема кнопки */
5
+ color?: 'dark' | 'light';
4
6
  /** Значение */
5
7
  value: string;
6
8
  /** Имя для тега form */
package/dist/lib/components/RadioButton/RadioButton.js CHANGED
@@ -9,6 +9,8 @@ exports["default"] = void 0;
9
9
 
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
 
12
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
+
12
14
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
15
 
14
16
  require("core-js/modules/es.function.name.js");
@@ -32,7 +34,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
32
34
  var cn = (0, _uiHelpers.cnCreate)('mfui-radio-button');
33
35
 
34
36
  var RadioButton = function RadioButton(_ref) {
35
- var isChecked = _ref.isChecked,
37
+ var _cn;
38
+
39
+ var _ref$color = _ref.color,
40
+ color = _ref$color === void 0 ? 'dark' : _ref$color,
41
+ isChecked = _ref.isChecked,
36
42
  _ref$disabled = _ref.disabled,
37
43
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
38
44
  name = _ref.name,
@@ -58,11 +64,9 @@ var RadioButton = function RadioButton(_ref) {
58
64
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
59
65
  className: cn(rootClassNames)
60
66
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", {
61
- className: cn('label', {
62
- disabled: disabled
63
- }, classes.label)
67
+ className: cn('label', (_cn = {}, (0, _defineProperty2["default"])(_cn, color, true), (0, _defineProperty2["default"])(_cn, "disabled", disabled), _cn), classes.label)
64
68
  }, /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, checkedProp, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
65
- className: cn('input'),
69
+ className: cn('input', (0, _defineProperty2["default"])({}, color, true)),
66
70
  type: "radio",
67
71
  name: name,
68
72
  value: value,
@@ -79,6 +83,7 @@ var RadioButton = function RadioButton(_ref) {
79
83
  };
80
84
 
81
85
  RadioButton.propTypes = {
86
+ color: PropTypes.oneOf(['dark', 'light']),
82
87
  value: PropTypes.string.isRequired,
83
88
  name: PropTypes.string,
84
89
  textSize: PropTypes.oneOf(['small', 'medium']),
package/dist/lib/components/Selector/Selector.css CHANGED
@@ -34,9 +34,7 @@
34
34
  width: 20px;
35
35
  height: 20px;
36
36
  border: 2px solid;
37
- border-color: var(--spbSky2);
38
37
  border-radius: 50%;
39
- background-color: var(--base);
40
38
  -webkit-transition: background-color, border-color;
41
39
  transition: background-color, border-color;
42
40
  -webkit-transition-duration: 0.3s;
@@ -51,48 +49,84 @@
51
49
  transition: fill, opacity;
52
50
  -webkit-transition-duration: 0.3s;
53
51
  transition-duration: 0.3s;
52
+ }
53
+ .mfui-selector__label_dark .mfui-selector__custom-input {
54
+ border-color: var(--spbSky2);
55
+ background-color: var(--base);
56
+ }
57
+ .mfui-selector__label_dark .mfui-selector__icon {
54
58
  fill: var(--stcWhite);
55
59
  }
56
- .mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
60
+ .mfui-selector__label_dark:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
57
61
  border-color: var(--buttonHoverGreen);
58
62
  }
59
- .mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
63
+ .mfui-selector__label_dark:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
60
64
  border-color: var(--buttonDown);
61
65
  }
62
- .mfui-selector__label_disabled {
63
- cursor: default;
66
+ .mfui-selector__label_dark:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
67
+ border-color: var(--buttonHoverGreen);
68
+ background-color: var(--buttonHoverGreen);
64
69
  }
65
- .mfui-selector__label_disabled .mfui-selector__custom-input {
66
- border-color: var(--spbSky2);
67
- background-color: var(--spbSky1);
70
+ .mfui-selector__label_dark:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
71
+ border-color: var(--buttonDown);
72
+ background-color: var(--buttonDown);
68
73
  }
69
- .mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input {
70
- background-color: var(--spbSky2);
74
+ .mfui-selector__label_dark:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
75
+ border-color: var(--brandGreen);
76
+ background-color: var(--brandGreen);
71
77
  }
72
- .mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
73
- opacity: 1;
78
+ .mfui-selector__label_light .mfui-selector__custom-input {
79
+ border-color: var(--stcWhite);
80
+ background-color: var(--stcWhite);
74
81
  }
75
- .mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
76
- border-color: var(--buttonHoverGreen);
77
- background-color: var(--buttonHoverGreen);
82
+ .mfui-selector__label_light .mfui-selector__icon {
83
+ fill: var(--stcWhite);
78
84
  }
79
- .mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
80
- opacity: 1;
85
+ .mfui-selector__label_light:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
86
+ border-color: var(--buttonHoverGrey);
87
+ background-color: var(--buttonHoverGrey);
81
88
  }
82
- .mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
89
+ .mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
83
90
  border-color: var(--buttonDown);
84
91
  background-color: var(--buttonDown);
85
92
  }
86
- .mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
87
- opacity: 1;
93
+ .mfui-selector__label_light:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
94
+ border-color: var(--buttonHoverGrey);
95
+ background-color: var(--buttonHoverGrey);
88
96
  }
89
- .mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
90
- border-color: var(--brandGreen);
91
- background-color: var(--brandGreen);
97
+ .mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
98
+ border-color: var(--buttonDown);
99
+ background-color: var(--buttonDown);
100
+ }
101
+ .mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
102
+ fill: var(--stcWhite);
103
+ }
104
+ .mfui-selector__label_light:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
105
+ border-color: var(--stcWhite);
106
+ background-color: var(--stcWhite);
107
+ }
108
+ .mfui-selector__label_light:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
109
+ fill: var(--stcBlack);
110
+ }
111
+ .mfui-selector__label_lightk.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
112
+ fill: var(--stcWhite);
92
113
  }
93
- .mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
114
+ .mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon,
115
+ .mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon,
116
+ .mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon,
117
+ .mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
94
118
  opacity: 1;
95
119
  }
120
+ .mfui-selector__label_disabled {
121
+ cursor: default;
122
+ }
123
+ .mfui-selector__label_disabled .mfui-selector__custom-input {
124
+ border-color: var(--spbSky2);
125
+ background-color: var(--spbSky1);
126
+ }
127
+ .mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input {
128
+ background-color: var(--spbSky2);
129
+ }
96
130
  .mfui-selector__label_error .mfui-selector__custom-input {
97
131
  border-color: var(--fury);
98
132
  }
package/dist/lib/components/Selector/Selector.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import './Selector.less';
3
3
  export interface ISelectorProps {
4
+ /** Цвет селектора */
5
+ color?: 'dark' | 'light';
4
6
  /** Базовый тип компонента */
5
7
  type?: 'radio' | 'checkbox';
6
8
  /** Значение */
package/dist/lib/components/Selector/Selector.js CHANGED
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports["default"] = void 0;
9
9
 
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
10
12
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
13
 
12
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -44,7 +46,11 @@ var CheckedIcon = function CheckedIcon(props) {
44
46
  var cn = (0, _uiHelpers.cnCreate)('mfui-selector');
45
47
 
46
48
  var Selector = function Selector(_ref) {
47
- var _ref$type = _ref.type,
49
+ var _cn;
50
+
51
+ var _ref$color = _ref.color,
52
+ color = _ref$color === void 0 ? 'dark' : _ref$color,
53
+ _ref$type = _ref.type,
48
54
  type = _ref$type === void 0 ? 'radio' : _ref$type,
49
55
  value = _ref.value,
50
56
  name = _ref.name,
@@ -77,10 +83,7 @@ var Selector = function Selector(_ref) {
77
83
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
78
84
  className: cn('', className)
79
85
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", (0, _extends2["default"])({
80
- className: cn('label', {
81
- disabled: disabled,
82
- error: error
83
- }, classes.label)
86
+ className: cn('label', (_cn = {}, (0, _defineProperty2["default"])(_cn, color, true), (0, _defineProperty2["default"])(_cn, "disabled", disabled), (0, _defineProperty2["default"])(_cn, "error", error), _cn), classes.label)
84
87
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label)), /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
85
88
  className: cn('input'),
86
89
  type: type,
@@ -98,6 +101,7 @@ var Selector = function Selector(_ref) {
98
101
  };
99
102
 
100
103
  Selector.propTypes = {
104
+ color: PropTypes.oneOf(['dark', 'light']),
101
105
  type: PropTypes.oneOf(['radio', 'checkbox']),
102
106
  value: PropTypes.string.isRequired,
103
107
  name: PropTypes.string,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "5.7.0",
3
+ "version": "5.7.1",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -50,7 +50,7 @@
50
50
  "@babel/preset-env": "^7.8.6",
51
51
  "@babel/preset-react": "^7.8.3",
52
52
  "@babel/preset-typescript": "^7.8.3",
53
- "@megafon/ui-icons": "^2.21.0",
53
+ "@megafon/ui-icons": "^2.22.0",
54
54
  "@svgr/core": "^2.4.1",
55
55
  "@testing-library/jest-dom": "5.16.2",
56
56
  "@testing-library/react": "12.1.2",
@@ -96,5 +96,5 @@
96
96
  "react-popper": "^2.2.3",
97
97
  "swiper": "^6.5.6"
98
98
  },
99
- "gitHead": "485756c5d75b65cb1c0f68235b037a876a92ecd6"
99
+ "gitHead": "d43977adc9dee8977ae05c334a77c2d928abfd67"
100
100
  }