@salutejs/plasma-new-hope 0.142.0-canary.1428.10806066547.0 → 0.142.0-dev.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/_virtual/_rollupPluginBabelHelpers.js +0 -4
- package/cjs/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/cjs/components/Badge/Badge.css +2 -0
- package/cjs/components/Badge/Badge.js +12 -3
- package/cjs/components/Badge/Badge.js.map +1 -1
- package/cjs/components/Badge/Badge.tokens.js +3 -1
- package/cjs/components/Badge/Badge.tokens.js.map +1 -1
- package/cjs/components/Badge/variations/_clear/base.js +9 -0
- package/cjs/components/Badge/variations/_clear/base.js.map +1 -0
- package/cjs/components/Badge/variations/_clear/base_oopyb7.css +1 -0
- package/cjs/components/Badge/variations/_pilled/base.js.map +1 -1
- package/cjs/components/Badge/variations/_transparent/base.js.map +1 -1
- package/cjs/components/Calendar/Calendar.types.js.map +1 -1
- package/cjs/components/Calendar/CalendarBase/CalendarBase.js +4 -9
- package/cjs/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +2 -9
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
- package/cjs/components/Calendar/hooks/useMonths.js +4 -6
- package/cjs/components/Calendar/hooks/useMonths.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -3
- package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -4
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -4
- package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js.map +1 -1
- package/cjs/components/Calendar/utils/calendarGridHelper.js +1 -1
- package/cjs/components/Calendar/utils/calendarGridHelper.js.map +1 -1
- package/cjs/components/Calendar/utils/constants.js +3 -64
- package/cjs/components/Calendar/utils/constants.js.map +1 -1
- package/cjs/index.css +2 -0
- package/emotion/cjs/components/Badge/Badge.js +12 -3
- package/emotion/cjs/components/Badge/Badge.template-doc.mdx +19 -28
- package/emotion/cjs/components/Badge/Badge.tokens.js +3 -1
- package/emotion/cjs/components/Badge/variations/_clear/base.js +9 -0
- package/emotion/cjs/components/Badge/variations/_clear/tokens.json +1 -0
- package/emotion/cjs/components/Badge/variations/_pilled/base.js +1 -1
- package/emotion/cjs/components/Badge/variations/_transparent/base.js +1 -1
- package/emotion/cjs/components/Calendar/CalendarBase/CalendarBase.js +4 -9
- package/emotion/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +2 -9
- package/emotion/cjs/components/Calendar/hooks/useMonths.js +4 -6
- package/emotion/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -3
- package/emotion/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -4
- package/emotion/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -4
- package/emotion/cjs/components/Calendar/utils/calendarGridHelper.js +1 -1
- package/emotion/cjs/components/Calendar/utils/constants.js +4 -68
- package/emotion/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +15 -12
- package/emotion/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +38 -6
- package/emotion/cjs/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +1 -9
- package/emotion/cjs/examples/plasma_web/components/Badge/Badge.config.js +15 -12
- package/emotion/cjs/examples/plasma_web/components/Badge/Badge.stories.tsx +39 -6
- package/emotion/es/components/Badge/Badge.js +12 -3
- package/emotion/es/components/Badge/Badge.template-doc.mdx +19 -28
- package/emotion/es/components/Badge/Badge.tokens.js +3 -1
- package/emotion/es/components/Badge/variations/_clear/base.js +3 -0
- package/emotion/es/components/Badge/variations/_clear/tokens.json +1 -0
- package/emotion/es/components/Badge/variations/_pilled/base.js +1 -1
- package/emotion/es/components/Badge/variations/_transparent/base.js +1 -1
- package/emotion/es/components/Calendar/CalendarBase/CalendarBase.js +4 -9
- package/emotion/es/components/Calendar/CalendarDouble/CalendarDouble.js +2 -9
- package/emotion/es/components/Calendar/hooks/useMonths.js +4 -6
- package/emotion/es/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -3
- package/emotion/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -4
- package/emotion/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -4
- package/emotion/es/components/Calendar/utils/calendarGridHelper.js +2 -2
- package/emotion/es/components/Calendar/utils/constants.js +3 -67
- package/emotion/es/examples/plasma_b2c/components/Badge/Badge.config.js +15 -12
- package/emotion/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +38 -6
- package/emotion/es/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +1 -9
- package/emotion/es/examples/plasma_web/components/Badge/Badge.config.js +15 -12
- package/emotion/es/examples/plasma_web/components/Badge/Badge.stories.tsx +39 -6
- package/es/_virtual/_rollupPluginBabelHelpers.js +1 -4
- package/es/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/es/components/Badge/Badge.css +2 -0
- package/es/components/Badge/Badge.js +12 -3
- package/es/components/Badge/Badge.js.map +1 -1
- package/es/components/Badge/Badge.tokens.js +3 -1
- package/es/components/Badge/Badge.tokens.js.map +1 -1
- package/es/components/Badge/variations/_clear/base.js +5 -0
- package/es/components/Badge/variations/_clear/base.js.map +1 -0
- package/es/components/Badge/variations/_clear/base_oopyb7.css +1 -0
- package/es/components/Badge/variations/_pilled/base.js.map +1 -1
- package/es/components/Badge/variations/_transparent/base.js.map +1 -1
- package/es/components/Calendar/Calendar.types.js.map +1 -1
- package/es/components/Calendar/CalendarBase/CalendarBase.js +4 -9
- package/es/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
- package/es/components/Calendar/CalendarDouble/CalendarDouble.js +2 -9
- package/es/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
- package/es/components/Calendar/hooks/useMonths.js +4 -6
- package/es/components/Calendar/hooks/useMonths.js.map +1 -1
- package/es/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -3
- package/es/components/Calendar/ui/CalendarDays/CalendarDays.js.map +1 -1
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -4
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js.map +1 -1
- package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -4
- package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js.map +1 -1
- package/es/components/Calendar/utils/calendarGridHelper.js +2 -2
- package/es/components/Calendar/utils/calendarGridHelper.js.map +1 -1
- package/es/components/Calendar/utils/constants.js +4 -64
- package/es/components/Calendar/utils/constants.js.map +1 -1
- package/es/index.css +2 -0
- package/package.json +2 -2
- package/styled-components/cjs/components/Badge/Badge.js +12 -3
- package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +19 -28
- package/styled-components/cjs/components/Badge/Badge.tokens.js +3 -1
- package/styled-components/cjs/components/Badge/variations/_clear/base.js +9 -0
- package/styled-components/cjs/components/Badge/variations/_clear/tokens.json +1 -0
- package/styled-components/cjs/components/Badge/variations/_pilled/base.js +1 -1
- package/styled-components/cjs/components/Badge/variations/_transparent/base.js +1 -1
- package/styled-components/cjs/components/Calendar/CalendarBase/CalendarBase.js +4 -9
- package/styled-components/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +2 -9
- package/styled-components/cjs/components/Calendar/hooks/useMonths.js +4 -6
- package/styled-components/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -3
- package/styled-components/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -4
- package/styled-components/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -4
- package/styled-components/cjs/components/Calendar/utils/calendarGridHelper.js +1 -1
- package/styled-components/cjs/components/Calendar/utils/constants.js +4 -68
- package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +10 -7
- package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +38 -6
- package/styled-components/cjs/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +1 -9
- package/styled-components/cjs/examples/plasma_web/components/Badge/Badge.config.js +10 -7
- package/styled-components/cjs/examples/plasma_web/components/Badge/Badge.stories.tsx +39 -6
- package/styled-components/es/components/Badge/Badge.js +12 -3
- package/styled-components/es/components/Badge/Badge.template-doc.mdx +19 -28
- package/styled-components/es/components/Badge/Badge.tokens.js +3 -1
- package/styled-components/es/components/Badge/variations/_clear/base.js +3 -0
- package/styled-components/es/components/Badge/variations/_clear/tokens.json +1 -0
- package/styled-components/es/components/Badge/variations/_pilled/base.js +1 -1
- package/styled-components/es/components/Badge/variations/_transparent/base.js +1 -1
- package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js +4 -9
- package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js +2 -9
- package/styled-components/es/components/Calendar/hooks/useMonths.js +4 -6
- package/styled-components/es/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -3
- package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -4
- package/styled-components/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -4
- package/styled-components/es/components/Calendar/utils/calendarGridHelper.js +2 -2
- package/styled-components/es/components/Calendar/utils/constants.js +3 -67
- package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.config.js +10 -7
- package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +38 -6
- package/styled-components/es/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +1 -9
- package/styled-components/es/examples/plasma_web/components/Badge/Badge.config.js +10 -7
- package/styled-components/es/examples/plasma_web/components/Badge/Badge.stories.tsx +39 -6
- package/types/components/Badge/Badge.d.ts +7 -23
- package/types/components/Badge/Badge.d.ts.map +1 -1
- package/types/components/Badge/Badge.tokens.d.ts +2 -0
- package/types/components/Badge/Badge.tokens.d.ts.map +1 -1
- package/types/components/Badge/Badge.types.d.ts +52 -13
- package/types/components/Badge/Badge.types.d.ts.map +1 -1
- package/types/components/Badge/variations/_clear/base.d.ts +2 -0
- package/types/components/Badge/variations/_clear/base.d.ts.map +1 -0
- package/types/components/Calendar/Calendar.types.d.ts +0 -5
- package/types/components/Calendar/Calendar.types.d.ts.map +1 -1
- package/types/components/Calendar/CalendarBase/CalendarBase.d.ts.map +1 -1
- package/types/components/Calendar/CalendarDouble/CalendarDouble.d.ts.map +1 -1
- package/types/components/Calendar/hooks/types.d.ts +1 -2
- package/types/components/Calendar/hooks/types.d.ts.map +1 -1
- package/types/components/Calendar/hooks/useMonths.d.ts +1 -1
- package/types/components/Calendar/hooks/useMonths.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarDays/CalendarDays.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarDays/CalendarDays.types.d.ts +1 -2
- package/types/components/Calendar/ui/CalendarDays/CalendarDays.types.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarHeader/CalendarHeader.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarHeader/CalendarHeader.types.d.ts +1 -2
- package/types/components/Calendar/ui/CalendarHeader/CalendarHeader.types.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarMonths/CalendarMonths.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarMonths/CalendarMonths.types.d.ts +1 -2
- package/types/components/Calendar/ui/CalendarMonths/CalendarMonths.types.d.ts.map +1 -1
- package/types/components/Calendar/utils/calendarGridHelper.d.ts.map +1 -1
- package/types/components/Calendar/utils/constants.d.ts +5 -8
- package/types/components/Calendar/utils/constants.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Badge/Badge.config.d.ts +3 -0
- package/types/examples/plasma_b2c/components/Badge/Badge.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Badge/Badge.d.ts +32 -3
- package/types/examples/plasma_b2c/components/Badge/Badge.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Badge/Badge.config.d.ts +3 -0
- package/types/examples/plasma_web/components/Badge/Badge.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Badge/Badge.d.ts +32 -3
- package/types/examples/plasma_web/components/Badge/Badge.d.ts.map +1 -1
@@ -3,50 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.quarterDates = exports.offsetMap = exports.YEAR_RENDER_COUNT = exports.SHORT_MONTH_NAME = exports.SHORT_DAY_NAMES = exports.ROW_YEAR_STEP = exports.ROW_STEP = exports.ROW_QUARTER_STEP = exports.ROW_MONTH_STEP = exports.QUARTER_NAMES = exports.MONTH_NAMES = exports.
|
7
|
-
function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); }
|
8
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
9
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
10
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
11
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
12
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
13
|
-
var LOCAL = {
|
14
|
-
ru: 'ru-RU',
|
15
|
-
eng: 'en-US'
|
16
|
-
};
|
17
|
-
var MONTHS = exports.MONTHS = /*#__PURE__*/Array.from({
|
18
|
-
length: 12
|
19
|
-
}, function (_, i) {
|
20
|
-
return i + 1;
|
21
|
-
});
|
22
|
-
var WEEKS = /*#__PURE__*/Array.from({
|
23
|
-
length: 7
|
24
|
-
}, function (_, i) {
|
25
|
-
return i + 1;
|
26
|
-
});
|
27
|
-
var callbackDayFormatter = function callbackDayFormatter(local, options) {
|
28
|
-
var dateFormatter = new Intl.DateTimeFormat(LOCAL[local], options);
|
29
|
-
return function (index) {
|
30
|
-
// INFO: Start for monday
|
31
|
-
var day = new Date(Date.UTC(2024, 0, index));
|
32
|
-
var _dateFormatter$format = dateFormatter.format(day),
|
33
|
-
_dateFormatter$format2 = _toArray(_dateFormatter$format),
|
34
|
-
first = _dateFormatter$format2[0],
|
35
|
-
rest = _dateFormatter$format2.slice(1);
|
36
|
-
return first.toUpperCase() + rest.join('');
|
37
|
-
};
|
38
|
-
};
|
39
|
-
var callbackMonthFormatter = function callbackMonthFormatter(local, options) {
|
40
|
-
var dateFormatter = new Intl.DateTimeFormat(LOCAL[local], options);
|
41
|
-
return function (month) {
|
42
|
-
var data = new Date(Date.UTC(2024, month - 1));
|
43
|
-
var _dateFormatter$format3 = dateFormatter.format(data),
|
44
|
-
_dateFormatter$format4 = _toArray(_dateFormatter$format3),
|
45
|
-
first = _dateFormatter$format4[0],
|
46
|
-
rest = _dateFormatter$format4.slice(1);
|
47
|
-
return first.toUpperCase() + rest.join('').replace('.', '');
|
48
|
-
};
|
49
|
-
};
|
6
|
+
exports.quarterDates = exports.offsetMap = exports.YEAR_RENDER_COUNT = exports.SHORT_MONTH_NAME = exports.SHORT_DAY_NAMES = exports.ROW_YEAR_STEP = exports.ROW_STEP = exports.ROW_QUARTER_STEP = exports.ROW_MONTH_STEP = exports.QUARTER_NAMES = exports.MONTH_NAMES = exports.FULL_DAY_NAMES = void 0;
|
50
7
|
var ROW_STEP = exports.ROW_STEP = 6;
|
51
8
|
var ROW_MONTH_STEP = exports.ROW_MONTH_STEP = 4;
|
52
9
|
var ROW_YEAR_STEP = exports.ROW_YEAR_STEP = 4;
|
@@ -77,14 +34,7 @@ var quarterDates = exports.quarterDates = {
|
|
77
34
|
day: 1
|
78
35
|
}
|
79
36
|
};
|
80
|
-
var SHORT_DAY_NAMES = exports.SHORT_DAY_NAMES =
|
81
|
-
ru: /*#__PURE__*/WEEKS.map( /*#__PURE__*/callbackDayFormatter('ru', {
|
82
|
-
weekday: 'short'
|
83
|
-
})),
|
84
|
-
eng: /*#__PURE__*/WEEKS.map( /*#__PURE__*/callbackDayFormatter('eng', {
|
85
|
-
weekday: 'short'
|
86
|
-
}))
|
87
|
-
};
|
37
|
+
var SHORT_DAY_NAMES = exports.SHORT_DAY_NAMES = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
|
88
38
|
var FULL_DAY_NAMES = exports.FULL_DAY_NAMES = {
|
89
39
|
Пн: 'Понедельник',
|
90
40
|
Вт: 'Вторник',
|
@@ -94,19 +44,5 @@ var FULL_DAY_NAMES = exports.FULL_DAY_NAMES = {
|
|
94
44
|
Сб: 'Суббота',
|
95
45
|
Вс: 'Воскресенье'
|
96
46
|
};
|
97
|
-
var SHORT_MONTH_NAME = exports.SHORT_MONTH_NAME =
|
98
|
-
|
99
|
-
month: 'short'
|
100
|
-
})),
|
101
|
-
eng: /*#__PURE__*/MONTHS.map( /*#__PURE__*/callbackMonthFormatter('eng', {
|
102
|
-
month: 'short'
|
103
|
-
}))
|
104
|
-
};
|
105
|
-
var MONTH_NAMES = exports.MONTH_NAMES = {
|
106
|
-
ru: /*#__PURE__*/MONTHS.map( /*#__PURE__*/callbackMonthFormatter('ru', {
|
107
|
-
month: 'long'
|
108
|
-
})),
|
109
|
-
eng: /*#__PURE__*/MONTHS.map( /*#__PURE__*/callbackMonthFormatter('eng', {
|
110
|
-
month: 'long'
|
111
|
-
}))
|
112
|
-
};
|
47
|
+
var SHORT_MONTH_NAME = exports.SHORT_MONTH_NAME = ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'];
|
48
|
+
var MONTH_NAMES = exports.MONTH_NAMES = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
|
@@ -13,13 +13,13 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
17
|
-
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
18
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
19
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
20
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
21
|
-
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
22
|
-
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent)
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
17
|
+
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
18
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
19
|
+
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
20
|
+
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
21
|
+
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
22
|
+
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear)
|
23
23
|
},
|
24
24
|
size: {
|
25
25
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1.75rem;", ":0.6875rem;", ":0.6875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
|
@@ -31,6 +31,9 @@ var config = exports.config = {
|
|
31
31
|
},
|
32
32
|
transparent: {
|
33
33
|
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
34
|
+
},
|
35
|
+
clear: {
|
36
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
34
37
|
}
|
35
38
|
}
|
36
39
|
};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { ComponentProps } from 'react';
|
2
2
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
4
|
|
@@ -23,13 +23,25 @@ const meta: Meta<typeof Badge> = {
|
|
23
23
|
type: 'select',
|
24
24
|
},
|
25
25
|
},
|
26
|
+
pilled: {
|
27
|
+
control: { type: 'boolean' },
|
28
|
+
if: { arg: 'clear', truthy: false },
|
29
|
+
},
|
30
|
+
transparent: {
|
31
|
+
control: { type: 'boolean' },
|
32
|
+
if: { arg: 'clear', truthy: false },
|
33
|
+
},
|
26
34
|
...disableProps(['contentLeft', 'contentRight']),
|
27
35
|
},
|
28
36
|
};
|
29
37
|
|
30
38
|
export default meta;
|
31
39
|
|
32
|
-
type
|
40
|
+
type StoryProps = ComponentProps<typeof Badge> & {
|
41
|
+
enableContentLeft: boolean;
|
42
|
+
enableContentRight: boolean;
|
43
|
+
};
|
44
|
+
type Story = StoryObj<StoryProps>;
|
33
45
|
|
34
46
|
const BellIcon = (props) => (
|
35
47
|
<svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
|
@@ -41,16 +53,36 @@ const BellIcon = (props) => (
|
|
41
53
|
);
|
42
54
|
|
43
55
|
export const Default: Story = {
|
56
|
+
argTypes: {
|
57
|
+
enableContentLeft: {
|
58
|
+
control: { type: 'boolean' },
|
59
|
+
if: { arg: 'enableContentRight', truthy: false },
|
60
|
+
},
|
61
|
+
enableContentRight: {
|
62
|
+
control: { type: 'boolean' },
|
63
|
+
if: { arg: 'enableContentLeft', truthy: false },
|
64
|
+
},
|
65
|
+
},
|
44
66
|
args: {
|
45
67
|
text: 'Hello',
|
46
68
|
view: 'default',
|
47
69
|
size: 'm',
|
70
|
+
enableContentLeft: false,
|
71
|
+
enableContentRight: false,
|
72
|
+
clear: false,
|
48
73
|
pilled: false,
|
49
74
|
transparent: false,
|
50
75
|
},
|
51
|
-
}
|
76
|
+
render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
|
77
|
+
const iconSize = size === 'l' ? '1rem' : '0.75rem';
|
52
78
|
|
53
|
-
|
54
|
-
|
55
|
-
|
79
|
+
return (
|
80
|
+
<Badge
|
81
|
+
contentLeft={enableContentLeft ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
|
82
|
+
contentRight={enableContentRight ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
|
83
|
+
size={size}
|
84
|
+
{...rest}
|
85
|
+
/>
|
86
|
+
);
|
87
|
+
},
|
56
88
|
};
|
@@ -32,12 +32,6 @@ const meta: Meta<typeof CalendarBase> = {
|
|
32
32
|
type: 'inline-radio',
|
33
33
|
},
|
34
34
|
},
|
35
|
-
local: {
|
36
|
-
options: ['ru', 'eng'],
|
37
|
-
control: {
|
38
|
-
type: 'select',
|
39
|
-
},
|
40
|
-
},
|
41
35
|
},
|
42
36
|
};
|
43
37
|
|
@@ -81,7 +75,7 @@ const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumb
|
|
81
75
|
};
|
82
76
|
|
83
77
|
const StoryDefault = (args: CalendarProps) => {
|
84
|
-
const { isRange, isDouble, min, max, date, includeEdgeDates, size
|
78
|
+
const { isRange, isDouble, min, max, date, includeEdgeDates, size } = args;
|
85
79
|
const [value, setValue] = useState(new Date(2023, 10, 16));
|
86
80
|
const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
|
87
81
|
|
@@ -103,7 +97,6 @@ const StoryDefault = (args: CalendarProps) => {
|
|
103
97
|
min={min}
|
104
98
|
max={max}
|
105
99
|
includeEdgeDates={includeEdgeDates}
|
106
|
-
local={local}
|
107
100
|
onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
|
108
101
|
/>
|
109
102
|
);
|
@@ -117,7 +110,6 @@ export const Default: StoryObj<CalendarProps> = {
|
|
117
110
|
isRange: false,
|
118
111
|
includeEdgeDates: false,
|
119
112
|
size: 'm',
|
120
|
-
local: 'ru',
|
121
113
|
},
|
122
114
|
render: (args) => <StoryDefault {...args} />,
|
123
115
|
};
|
@@ -13,13 +13,13 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
17
|
-
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
18
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
19
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
20
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
21
|
-
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
22
|
-
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent)
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
17
|
+
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
18
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
19
|
+
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
20
|
+
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
21
|
+
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
22
|
+
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear)
|
23
23
|
},
|
24
24
|
size: {
|
25
25
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1.75rem;", ":0.6875rem;", ":0.6875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
|
@@ -31,6 +31,9 @@ var config = exports.config = {
|
|
31
31
|
},
|
32
32
|
transparent: {
|
33
33
|
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
34
|
+
},
|
35
|
+
clear: {
|
36
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
34
37
|
}
|
35
38
|
}
|
36
39
|
};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { ComponentProps } from 'react';
|
2
2
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
4
|
|
@@ -8,6 +8,7 @@ import { Badge } from './Badge';
|
|
8
8
|
|
9
9
|
const meta: Meta<typeof Badge> = {
|
10
10
|
title: 'plasma_web/Badge',
|
11
|
+
component: Badge,
|
11
12
|
decorators: [WithTheme],
|
12
13
|
argTypes: {
|
13
14
|
size: {
|
@@ -22,13 +23,25 @@ const meta: Meta<typeof Badge> = {
|
|
22
23
|
type: 'select',
|
23
24
|
},
|
24
25
|
},
|
26
|
+
pilled: {
|
27
|
+
control: { type: 'boolean' },
|
28
|
+
if: { arg: 'clear', truthy: false },
|
29
|
+
},
|
30
|
+
transparent: {
|
31
|
+
control: { type: 'boolean' },
|
32
|
+
if: { arg: 'clear', truthy: false },
|
33
|
+
},
|
25
34
|
...disableProps(['contentLeft', 'contentRight']),
|
26
35
|
},
|
27
36
|
};
|
28
37
|
|
29
38
|
export default meta;
|
30
39
|
|
31
|
-
type
|
40
|
+
type StoryProps = ComponentProps<typeof Badge> & {
|
41
|
+
enableContentLeft: boolean;
|
42
|
+
enableContentRight: boolean;
|
43
|
+
};
|
44
|
+
type Story = StoryObj<StoryProps>;
|
32
45
|
|
33
46
|
const BellIcon = (props) => (
|
34
47
|
<svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
|
@@ -40,16 +53,36 @@ const BellIcon = (props) => (
|
|
40
53
|
);
|
41
54
|
|
42
55
|
export const Default: Story = {
|
56
|
+
argTypes: {
|
57
|
+
enableContentLeft: {
|
58
|
+
control: { type: 'boolean' },
|
59
|
+
if: { arg: 'enableContentRight', truthy: false },
|
60
|
+
},
|
61
|
+
enableContentRight: {
|
62
|
+
control: { type: 'boolean' },
|
63
|
+
if: { arg: 'enableContentLeft', truthy: false },
|
64
|
+
},
|
65
|
+
},
|
43
66
|
args: {
|
44
67
|
text: 'Hello',
|
45
68
|
view: 'default',
|
46
69
|
size: 'm',
|
70
|
+
enableContentLeft: false,
|
71
|
+
enableContentRight: false,
|
72
|
+
clear: false,
|
47
73
|
pilled: false,
|
48
74
|
transparent: false,
|
49
75
|
},
|
50
|
-
}
|
76
|
+
render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
|
77
|
+
const iconSize = size === 'l' ? '1rem' : '0.75rem';
|
51
78
|
|
52
|
-
|
53
|
-
|
54
|
-
|
79
|
+
return (
|
80
|
+
<Badge
|
81
|
+
contentLeft={enableContentLeft ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
|
82
|
+
contentRight={enableContentRight ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
|
83
|
+
size={size}
|
84
|
+
{...rest}
|
85
|
+
/>
|
86
|
+
);
|
87
|
+
},
|
55
88
|
};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent"];
|
1
|
+
var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
3
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
@@ -8,6 +8,7 @@ import { base as viewCSS } from './variations/_view/base';
|
|
8
8
|
import { base as sizeCSS } from './variations/_size/base';
|
9
9
|
import { base as pilledCSS } from './variations/_pilled/base';
|
10
10
|
import { base as transparentCSS } from './variations/_transparent/base';
|
11
|
+
import { base as clearCSS } from './variations/_clear/base';
|
11
12
|
import { StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Badge.styles';
|
12
13
|
import { classes } from './Badge.tokens';
|
13
14
|
export var badgeRoot = function badgeRoot(Root) {
|
@@ -23,17 +24,21 @@ export var badgeRoot = function badgeRoot(Root) {
|
|
23
24
|
pilled = _props$pilled === void 0 ? false : _props$pilled,
|
24
25
|
_props$transparent = props.transparent,
|
25
26
|
transparent = _props$transparent === void 0 ? false : _props$transparent,
|
27
|
+
_props$clear = props.clear,
|
28
|
+
clear = _props$clear === void 0 ? false : _props$clear,
|
26
29
|
rest = _objectWithoutProperties(props, _excluded);
|
27
30
|
var pilledClass = pilled ? classes.badgePilled : undefined;
|
28
31
|
var transparentClass = transparent ? classes.badgeTransparent : undefined;
|
32
|
+
var clearClass = clear ? classes.badgeClear : undefined;
|
29
33
|
var txt = !text && typeof children === 'string' ? children : text;
|
30
34
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
31
35
|
ref: ref,
|
32
|
-
className: cx(pilledClass, transparentClass, className),
|
36
|
+
className: cx(pilledClass, transparentClass, clearClass, className),
|
33
37
|
view: view,
|
34
38
|
size: size,
|
35
39
|
pilled: pilled,
|
36
|
-
transparent: transparent
|
40
|
+
transparent: transparent,
|
41
|
+
clear: clear
|
37
42
|
}, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight));
|
38
43
|
});
|
39
44
|
};
|
@@ -56,6 +61,10 @@ export var badgeConfig = {
|
|
56
61
|
transparent: {
|
57
62
|
css: transparentCSS,
|
58
63
|
attrs: true
|
64
|
+
},
|
65
|
+
clear: {
|
66
|
+
css: clearCSS,
|
67
|
+
attrs: true
|
59
68
|
}
|
60
69
|
},
|
61
70
|
defaults: {
|
@@ -60,41 +60,32 @@ export function App() {
|
|
60
60
|
+ `"dark"` – темный badge;
|
61
61
|
+ `"light"` – светлый badge.
|
62
62
|
|
63
|
-
|
64
|
-
import React from 'react';
|
65
|
-
import { Badge } from '@salutejs/{{ package }}';
|
66
|
-
|
67
|
-
export function App() {
|
68
|
-
return (
|
69
|
-
<div>
|
70
|
-
<Badge text="Бейдж" size="l" view="primary" />
|
71
|
-
<Badge text="Бейдж" size="l" view="accent" />
|
72
|
-
<Badge text="Бейдж" size="l" view="positive" />
|
73
|
-
<Badge text="Бейдж" size="l" view="warning" />
|
74
|
-
<Badge text="Бейдж" size="l" view="negative" />
|
75
|
-
<Badge text="Бейдж" size="l" view="dark" />
|
76
|
-
<Badge text="Бейдж" size="l" view="light" />
|
77
|
-
</div>
|
78
|
-
);
|
79
|
-
}
|
80
|
-
```
|
81
|
-
|
82
|
-
Так же на вид badge влияет свойство `transparent`:
|
63
|
+
Так же на вид badge влияет свойства `transparent` и `clear`.
|
83
64
|
|
84
65
|
```tsx live
|
85
66
|
import React from 'react';
|
86
67
|
import { Badge } from '@salutejs/{{ package }}';
|
87
68
|
|
88
69
|
export function App() {
|
70
|
+
const Badges = ({transparent, clear}) => {
|
71
|
+
return (
|
72
|
+
<div style=\{{ display: 'flex', gap: '0.5rem' }}>
|
73
|
+
<Badge text="Бейдж" size="l" view="primary" transparent={transparent} clear={clear} />
|
74
|
+
<Badge text="Бейдж" size="l" view="accent" transparent={transparent} clear={clear} />
|
75
|
+
<Badge text="Бейдж" size="l" view="positive" transparent={transparent} clear={clear} />
|
76
|
+
<Badge text="Бейдж" size="l" view="warning" transparent={transparent} clear={clear} />
|
77
|
+
<Badge text="Бейдж" size="l" view="negative" transparent={transparent} clear={clear} />
|
78
|
+
<Badge text="Бейдж" size="l" view="dark" transparent={transparent} clear={clear} />
|
79
|
+
<Badge text="Бейдж" size="l" view="light" transparent={transparent} clear={clear} />
|
80
|
+
</div>
|
81
|
+
)
|
82
|
+
}
|
83
|
+
|
89
84
|
return (
|
90
|
-
<div>
|
91
|
-
<
|
92
|
-
<
|
93
|
-
<
|
94
|
-
<Badge text="Бейдж" size="l" view="warning" transparent />
|
95
|
-
<Badge text="Бейдж" size="l" view="negative" transparent />
|
96
|
-
<Badge text="Бейдж" size="l" view="dark" transparent />
|
97
|
-
<Badge text="Бейдж" size="l" view="light" transparent />
|
85
|
+
<div style=\{{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
|
86
|
+
<Badges />
|
87
|
+
<Badges transparent />
|
88
|
+
<Badges clear />
|
98
89
|
</div>
|
99
90
|
);
|
100
91
|
}
|
@@ -1,12 +1,14 @@
|
|
1
1
|
export var classes = {
|
2
2
|
badgePilled: 'badge-pilled',
|
3
|
-
badgeTransparent: 'badge-transparent'
|
3
|
+
badgeTransparent: 'badge-transparent',
|
4
|
+
badgeClear: 'badge-clear'
|
4
5
|
};
|
5
6
|
export var tokens = {
|
6
7
|
background: '--plasma-badge-background',
|
7
8
|
color: '--plasma-badge-color',
|
8
9
|
backgroundTransparent: '--plasma-badge-background-transparent',
|
9
10
|
colorTransparent: '--plasma-badge-color-transparent',
|
11
|
+
colorClear: '--plasma-badge-color-clear',
|
10
12
|
borderRadius: '--plasma-badge-border-radius',
|
11
13
|
pilledBorderRadius: '--plasma-badge-pilled-border-radius',
|
12
14
|
height: '--plasma-badge-height',
|
@@ -0,0 +1 @@
|
|
1
|
+
["--plasma-badge-color-clear"]
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../Badge.tokens';
|
3
|
-
export var base = /*#__PURE__*/css(["&.", "{border-radius:var(", ");}"],
|
3
|
+
export var base = /*#__PURE__*/css(["&.", "{border-radius:var(", ");}"], classes.badgePilled, tokens.pilledBorderRadius);
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../Badge.tokens';
|
3
|
-
export var base = /*#__PURE__*/css(["&.", "{color:var(", ");background-color:var(", ");}"],
|
3
|
+
export var base = /*#__PURE__*/css(["&.", "{color:var(", ");background-color:var(", ");}"], classes.badgeTransparent, tokens.colorTransparent, tokens.backgroundTransparent);
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue"
|
1
|
+
var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -37,8 +37,6 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
|
|
37
37
|
eventYearList = _ref.eventYearList,
|
38
38
|
disabledYearList = _ref.disabledYearList,
|
39
39
|
onChangeValue = _ref.onChangeValue,
|
40
|
-
_ref$local = _ref.local,
|
41
|
-
local = _ref$local === void 0 ? 'ru' : _ref$local,
|
42
40
|
rest = _objectWithoutProperties(_ref, _excluded);
|
43
41
|
var _useMemo = useMemo(function () {
|
44
42
|
return Array.isArray(externalValue) ? externalValue : [externalValue];
|
@@ -153,8 +151,7 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
|
|
153
151
|
type: calendarState,
|
154
152
|
onPrev: handlePrev,
|
155
153
|
onNext: handleNext,
|
156
|
-
onUpdateCalendarState: handleUpdateCalendarState
|
157
|
-
local: local
|
154
|
+
onUpdateCalendarState: handleUpdateCalendarState
|
158
155
|
}), calendarState === CalendarState.Days && /*#__PURE__*/React.createElement(CalendarDays, {
|
159
156
|
value: externalValue,
|
160
157
|
date: date,
|
@@ -169,8 +166,7 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
|
|
169
166
|
onSetSelected: onSelectIndexes,
|
170
167
|
onHoverDay: setHoveredItem,
|
171
168
|
onKeyDown: handleKeyDown,
|
172
|
-
outerRefs: outerRefs
|
173
|
-
local: local
|
169
|
+
outerRefs: outerRefs
|
174
170
|
}), calendarState === CalendarState.Months && /*#__PURE__*/React.createElement(CalendarMonths, {
|
175
171
|
value: externalValue,
|
176
172
|
date: date,
|
@@ -184,8 +180,7 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
|
|
184
180
|
onSetSelected: onSelectIndexes,
|
185
181
|
onHoverMonth: setHoveredItem,
|
186
182
|
onKeyDown: onKeyDown,
|
187
|
-
outerRefs: outerRefs
|
188
|
-
local: local
|
183
|
+
outerRefs: outerRefs
|
189
184
|
}), calendarState === CalendarState.Quarters && /*#__PURE__*/React.createElement(CalendarQuarters, {
|
190
185
|
value: externalValue,
|
191
186
|
date: date,
|
@@ -1,5 +1,5 @@
|
|
1
1
|
var _StyledSeparator, _StyledSeparator2, _StyledSeparator3, _StyledSeparator4;
|
2
|
-
var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue"
|
2
|
+
var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue"];
|
3
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
4
4
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
5
5
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -38,8 +38,6 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
|
|
38
38
|
eventYearList = _ref.eventYearList,
|
39
39
|
disabledYearList = _ref.disabledYearList,
|
40
40
|
onChangeValue = _ref.onChangeValue,
|
41
|
-
_ref$local = _ref.local,
|
42
|
-
local = _ref$local === void 0 ? 'ru' : _ref$local,
|
43
41
|
rest = _objectWithoutProperties(_ref, _excluded);
|
44
42
|
var _useMemo = useMemo(function () {
|
45
43
|
return Array.isArray(externalValue) ? externalValue : [externalValue];
|
@@ -213,8 +211,7 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
|
|
213
211
|
type: calendarState,
|
214
212
|
onPrev: handlePrev,
|
215
213
|
onNext: handleNext,
|
216
|
-
onUpdateCalendarState: handleUpdateCalendarState
|
217
|
-
local: local
|
214
|
+
onUpdateCalendarState: handleUpdateCalendarState
|
218
215
|
}), /*#__PURE__*/React.createElement(StyledWrapper, null, calendarState === CalendarState.Days && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarDays, {
|
219
216
|
value: externalValue,
|
220
217
|
date: firstDate,
|
@@ -230,7 +227,6 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
|
|
230
227
|
onSetSelected: onSelectIndexes,
|
231
228
|
onKeyDown: handleKeyDown,
|
232
229
|
outerRefs: outerRefs,
|
233
|
-
local: local,
|
234
230
|
isDouble: true
|
235
231
|
}), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/React.createElement(StyledSeparator, null)), /*#__PURE__*/React.createElement(CalendarDays, {
|
236
232
|
value: externalValue,
|
@@ -247,7 +243,6 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
|
|
247
243
|
onSetSelected: onSelectIndexes,
|
248
244
|
onKeyDown: handleKeyDown,
|
249
245
|
outerRefs: outerRefs,
|
250
|
-
local: local,
|
251
246
|
isDouble: true,
|
252
247
|
isSecond: true
|
253
248
|
})), calendarState === CalendarState.Months && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarMonths, {
|
@@ -264,7 +259,6 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
|
|
264
259
|
onHoverMonth: setHoveredItem,
|
265
260
|
onKeyDown: handleKeyDown,
|
266
261
|
outerRefs: outerRefs,
|
267
|
-
local: local,
|
268
262
|
isDouble: true
|
269
263
|
}), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/React.createElement(StyledSeparator, null)), /*#__PURE__*/React.createElement(CalendarMonths, {
|
270
264
|
value: externalValue,
|
@@ -280,7 +274,6 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
|
|
280
274
|
onHoverMonth: setHoveredItem,
|
281
275
|
onKeyDown: handleKeyDown,
|
282
276
|
outerRefs: outerRefs,
|
283
|
-
local: local,
|
284
277
|
isDouble: true,
|
285
278
|
isSecond: true
|
286
279
|
})), calendarState === CalendarState.Quarters && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarQuarters, {
|