@alfalab/core-components-tab-bar 1.1.0 → 2.0.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 (35) hide show
  1. package/Component.js +7 -3
  2. package/components/tab/Component.js +9 -5
  3. package/components/tab/index.css +12 -9
  4. package/consts.d.ts +9 -0
  5. package/consts.js +15 -0
  6. package/cssm/Component.js +6 -2
  7. package/cssm/components/tab/Component.js +8 -4
  8. package/cssm/components/tab/index.module.css +6 -3
  9. package/cssm/consts.d.ts +9 -0
  10. package/cssm/consts.js +15 -0
  11. package/cssm/index.module.css +10 -8
  12. package/cssm/types.d.ts +11 -3
  13. package/esm/Component.js +7 -3
  14. package/esm/components/tab/Component.js +9 -5
  15. package/esm/components/tab/index.css +12 -9
  16. package/esm/consts.d.ts +9 -0
  17. package/esm/consts.js +10 -0
  18. package/esm/index.css +12 -10
  19. package/esm/types.d.ts +11 -3
  20. package/index.css +12 -10
  21. package/modern/Component.js +7 -3
  22. package/modern/components/tab/Component.js +9 -5
  23. package/modern/components/tab/index.css +12 -9
  24. package/modern/consts.d.ts +9 -0
  25. package/modern/consts.js +10 -0
  26. package/modern/index.css +12 -10
  27. package/modern/types.d.ts +11 -3
  28. package/package.json +4 -4
  29. package/src/Component.tsx +7 -1
  30. package/src/components/tab/Component.tsx +14 -3
  31. package/src/components/tab/index.module.css +6 -2
  32. package/src/consts.ts +9 -0
  33. package/src/index.module.css +9 -6
  34. package/src/types.ts +17 -4
  35. package/types.d.ts +11 -3
package/Component.js CHANGED
@@ -13,18 +13,22 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
15
 
16
- var styles = {"component":"tab-bar__component_16z03","border":"tab-bar__border_16z03"};
16
+ var styles = {"component":"tab-bar__component_13pzg","modal-bg-primary":"tab-bar__modal-bg-primary_13pzg","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_13pzg","border":"tab-bar__border_13pzg"};
17
17
  require('./index.css')
18
18
 
19
19
  var TabBarComponent = React.forwardRef(function (_a, ref) {
20
20
  var _b;
21
- var children = _a.children, className = _a.className, selectedId = _a.selectedId, border = _a.border, dataTestId = _a.dataTestId, tabClassNames = _a.tabClassNames, onChange = _a.onChange, restProps = tslib.__rest(_a, ["children", "className", "selectedId", "border", "dataTestId", "tabClassNames", "onChange"]);
21
+ var children = _a.children, className = _a.className, selectedId = _a.selectedId, border = _a.border, dataTestId = _a.dataTestId, tabClassNames = _a.tabClassNames, onChange = _a.onChange, _c = _a.accentColor, accentColor = _c === void 0 ? 'primary' : _c, _d = _a.bgColor, bgColor = _d === void 0 ? 'modal-bg-primary' : _d, restProps = tslib.__rest(_a, ["children", "className", "selectedId", "border", "dataTestId", "tabClassNames", "onChange", "accentColor", "bgColor"]);
22
22
  if (React.Children.count(children) > 5) {
23
23
  // eslint-disable-next-line no-console
24
24
  console.error('Компонент TabBar не может содержать больше 5 табов');
25
25
  }
26
- return (React__default.default.createElement("nav", tslib.__assign({ "data-test-id": dataTestId }, restProps, { ref: ref, className: cn__default.default(styles.component, className, (_b = {}, _b[styles.border] = border, _b)) }), React.Children.map(children, function (tab) {
26
+ return (React__default.default.createElement("nav", tslib.__assign({ "data-test-id": dataTestId }, restProps, { ref: ref, className: cn__default.default(styles.component, styles[bgColor], className, (_b = {},
27
+ _b[styles.border] = border,
28
+ _b)) }), React.Children.map(children, function (tab) {
27
29
  return React.cloneElement(tab, {
30
+ bgColor: bgColor,
31
+ accentColor: accentColor,
28
32
  selected: tab.props.id === selectedId,
29
33
  onChange: onChange,
30
34
  tabClassNames: tabClassNames,
package/components/tab/Component.js CHANGED
@@ -5,34 +5,38 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib = require('tslib');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
- var coreComponentsBadge = require('@alfalab/core-components-badge');
8
+ var coreComponentsIndicator = require('@alfalab/core-components-indicator');
9
9
  var coreComponentsTypography = require('@alfalab/core-components-typography');
10
+ var consts = require('../../consts.js');
10
11
 
11
12
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
12
13
 
13
14
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
15
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
16
 
16
- var styles = {"component":"tab-bar__component_lg08x","selected":"tab-bar__selected_lg08x","icon":"tab-bar__icon_lg08x","label":"tab-bar__label_lg08x","labelSelected":"tab-bar__labelSelected_lg08x","indicator":"tab-bar__indicator_lg08x"};
17
+ var styles = {"component":"tab-bar__component_1ifto","primary":"tab-bar__primary_1ifto","secondary":"tab-bar__secondary_1ifto","icon":"tab-bar__icon_1ifto","label":"tab-bar__label_1ifto","labelSelected":"tab-bar__labelSelected_1ifto","indicator":"tab-bar__indicator_1ifto"};
17
18
  require('./index.css')
18
19
 
19
20
  var TabComponent = React.forwardRef(function (_a, ref) {
20
21
  var _b, _c;
21
- var showIndicator = _a.showIndicator, indicatorProps = _a.indicatorProps, label = _a.label, icon = _a.icon, id = _a.id, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, _d = _a.tabClassNames, tabClassNames = _d === void 0 ? {} : _d, dataTestId = _a.dataTestId, className = _a.className, labelClassName = _a.labelClassName, selectedClassName = _a.selectedClassName, iconClassName = _a.iconClassName, href = _a.href, _e = _a.Component, Component = _e === void 0 ? href ? 'a' : 'button' : _e, restProps = tslib.__rest(_a, ["showIndicator", "indicatorProps", "label", "icon", "id", "selected", "onChange", "onClick", "tabClassNames", "dataTestId", "className", "labelClassName", "selectedClassName", "iconClassName", "href", "Component"]);
22
+ var showIndicator = _a.showIndicator, indicatorProps = _a.indicatorProps, label = _a.label, icon = _a.icon, id = _a.id, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, _d = _a.tabClassNames, tabClassNames = _d === void 0 ? {} : _d, dataTestId = _a.dataTestId, className = _a.className, labelClassName = _a.labelClassName, selectedClassName = _a.selectedClassName, iconClassName = _a.iconClassName, href = _a.href, _e = _a.Component, Component = _e === void 0 ? href ? 'a' : 'button' : _e, _f = _a.accentColor, accentColor = _f === void 0 ? 'primary' : _f, _g = _a.bgColor, bgColor = _g === void 0 ? 'modal-bg-primary' : _g, restProps = tslib.__rest(_a, ["showIndicator", "indicatorProps", "label", "icon", "id", "selected", "onChange", "onClick", "tabClassNames", "dataTestId", "className", "labelClassName", "selectedClassName", "iconClassName", "href", "Component", "accentColor", "bgColor"]);
22
23
  var handleClick = function (event) {
23
24
  onChange === null || onChange === void 0 ? void 0 : onChange(id);
24
25
  onClick === null || onClick === void 0 ? void 0 : onClick(event);
25
26
  };
26
27
  var commonClassName = tabClassNames.className, commonLabelClassName = tabClassNames.labelClassName, commonSelectedClassName = tabClassNames.selectedClassName, commonIconClassName = tabClassNames.iconClassName;
27
28
  return (React__default.default.createElement(Component, tslib.__assign({ "data-test-id": dataTestId, tabIndex: 0 }, (Component === 'button' ? { type: 'button' } : null), restProps, { href: href, id: id, ref: ref, className: cn__default.default(styles.component, commonClassName, className, selected && commonSelectedClassName, selected && selectedClassName, (_b = {},
28
- _b[styles.selected] = selected,
29
+ _b[styles[accentColor]] = selected,
29
30
  _b)), onClick: handleClick }),
30
31
  React__default.default.createElement("div", { className: cn__default.default(styles.icon, commonIconClassName, iconClassName) }, React.isValidElement(icon) ? React.cloneElement(icon, { selected: selected }) : icon),
31
32
  React__default.default.createElement(coreComponentsTypography.Typography.Text, { weight: 'medium', view: 'secondary-small', className: cn__default.default(styles.label, commonLabelClassName, labelClassName, (_c = {},
32
33
  _c[styles.labelSelected] = selected,
33
34
  _c)) }, React.isValidElement(label) ? React.cloneElement(label, { selected: selected }) : label),
34
35
  showIndicator && (React__default.default.createElement("div", { className: styles.indicator },
35
- React__default.default.createElement(coreComponentsBadge.Badge, tslib.__assign({ visibleIconOutline: true }, indicatorProps, { view: 'count' }))))));
36
+ React__default.default.createElement(coreComponentsIndicator.Indicator, tslib.__assign({}, indicatorProps, { height: (indicatorProps === null || indicatorProps === void 0 ? void 0 : indicatorProps.value) ? 16 : undefined, border: {
37
+ width: 2,
38
+ color: consts.INDICATOR_BORDER_COLOR[bgColor],
39
+ }, backgroundColor: consts.INDICATOR_BG_COLOR[accentColor] }))))));
36
40
  });
37
41
  var Tab = TabComponent;
38
42
 
package/components/tab/index.css CHANGED
@@ -1,7 +1,8 @@
1
- /* hash: 1ov0x */
2
- :root {
1
+ /* hash: 1vyw8 */
2
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-accent-primary: #ef3124;
5
+ --color-light-accent-secondary: #212124;
5
6
  --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
6
7
  --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
8
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -19,7 +20,7 @@
19
20
  --gap-xs: 8px;
20
21
  } :root {
21
22
  } :root {
22
- } .tab-bar__component_lg08x {
23
+ } .tab-bar__component_1ifto {
23
24
  box-sizing: border-box;
24
25
  background-color: transparent;
25
26
  -webkit-tap-highlight-color: transparent;
@@ -43,15 +44,17 @@
43
44
  align-items: center;
44
45
  padding: var(--gap-xs) 0;
45
46
  color: var(--color-light-neutral-translucent-700);
46
- } .tab-bar__selected_lg08x {
47
+ } .tab-bar__primary_1ifto {
47
48
  color: var(--color-light-accent-primary);
48
- } .tab-bar__icon_lg08x {
49
+ } .tab-bar__secondary_1ifto {
50
+ color: var(--color-light-accent-secondary);
51
+ } .tab-bar__icon_1ifto {
49
52
  display: flex;
50
53
  align-items: center;
51
54
  justify-content: center;
52
55
  flex-grow: 1;
53
56
  width: 100%;
54
- } .tab-bar__label_lg08x {
57
+ } .tab-bar__label_1ifto {
55
58
  -webkit-line-clamp: 1;
56
59
  display: -webkit-box;
57
60
  -webkit-box-orient: vertical;
@@ -60,11 +63,11 @@
60
63
  flex-shrink: 0;
61
64
 
62
65
  color: var(--color-light-text-secondary);
63
- } .tab-bar__labelSelected_lg08x {
66
+ } .tab-bar__labelSelected_1ifto {
64
67
  color: inherit;
65
- } .tab-bar__indicator_lg08x {
68
+ } .tab-bar__indicator_1ifto {
66
69
  position: absolute;
67
- top: var(--gap-2xs);
70
+ top: 3px;
68
71
  left: calc(50% + var(--gap-2xs));
69
72
  height: 16px;
70
73
  min-width: 16px;
package/consts.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ declare const INDICATOR_BORDER_COLOR: {
2
+ 'modal-bg-primary': string;
3
+ 'modal-bg-alt-primary': string;
4
+ };
5
+ declare const INDICATOR_BG_COLOR: {
6
+ primary: string;
7
+ secondary: string;
8
+ };
9
+ export { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR };
package/consts.js ADDED
@@ -0,0 +1,15 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var INDICATOR_BORDER_COLOR = {
6
+ 'modal-bg-primary': 'var(--color-light-base-bg-primary)',
7
+ 'modal-bg-alt-primary': 'var(--color-light-base-bg-alt-primary)',
8
+ };
9
+ var INDICATOR_BG_COLOR = {
10
+ primary: 'var(--color-light-accent-primary)',
11
+ secondary: 'var(--color-light-accent-secondary)',
12
+ };
13
+
14
+ exports.INDICATOR_BG_COLOR = INDICATOR_BG_COLOR;
15
+ exports.INDICATOR_BORDER_COLOR = INDICATOR_BORDER_COLOR;
package/cssm/Component.js CHANGED
@@ -17,13 +17,17 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
17
17
 
18
18
  var TabBarComponent = React.forwardRef(function (_a, ref) {
19
19
  var _b;
20
- var children = _a.children, className = _a.className, selectedId = _a.selectedId, border = _a.border, dataTestId = _a.dataTestId, tabClassNames = _a.tabClassNames, onChange = _a.onChange, restProps = tslib.__rest(_a, ["children", "className", "selectedId", "border", "dataTestId", "tabClassNames", "onChange"]);
20
+ var children = _a.children, className = _a.className, selectedId = _a.selectedId, border = _a.border, dataTestId = _a.dataTestId, tabClassNames = _a.tabClassNames, onChange = _a.onChange, _c = _a.accentColor, accentColor = _c === void 0 ? 'primary' : _c, _d = _a.bgColor, bgColor = _d === void 0 ? 'modal-bg-primary' : _d, restProps = tslib.__rest(_a, ["children", "className", "selectedId", "border", "dataTestId", "tabClassNames", "onChange", "accentColor", "bgColor"]);
21
21
  if (React.Children.count(children) > 5) {
22
22
  // eslint-disable-next-line no-console
23
23
  console.error('Компонент TabBar не может содержать больше 5 табов');
24
24
  }
25
- return (React__default.default.createElement("nav", tslib.__assign({ "data-test-id": dataTestId }, restProps, { ref: ref, className: cn__default.default(styles__default.default.component, className, (_b = {}, _b[styles__default.default.border] = border, _b)) }), React.Children.map(children, function (tab) {
25
+ return (React__default.default.createElement("nav", tslib.__assign({ "data-test-id": dataTestId }, restProps, { ref: ref, className: cn__default.default(styles__default.default.component, styles__default.default[bgColor], className, (_b = {},
26
+ _b[styles__default.default.border] = border,
27
+ _b)) }), React.Children.map(children, function (tab) {
26
28
  return React.cloneElement(tab, {
29
+ bgColor: bgColor,
30
+ accentColor: accentColor,
27
31
  selected: tab.props.id === selectedId,
28
32
  onChange: onChange,
29
33
  tabClassNames: tabClassNames,
package/cssm/components/tab/Component.js CHANGED
@@ -5,8 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib = require('tslib');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
- var coreComponentsBadge = require('@alfalab/core-components-badge/cssm');
8
+ var coreComponentsIndicator = require('@alfalab/core-components-indicator/cssm');
9
9
  var coreComponentsTypography = require('@alfalab/core-components-typography/cssm');
10
+ var consts = require('../../consts.js');
10
11
  var styles = require('./index.module.css');
11
12
 
12
13
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -17,21 +18,24 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
17
18
 
18
19
  var TabComponent = React.forwardRef(function (_a, ref) {
19
20
  var _b, _c;
20
- var showIndicator = _a.showIndicator, indicatorProps = _a.indicatorProps, label = _a.label, icon = _a.icon, id = _a.id, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, _d = _a.tabClassNames, tabClassNames = _d === void 0 ? {} : _d, dataTestId = _a.dataTestId, className = _a.className, labelClassName = _a.labelClassName, selectedClassName = _a.selectedClassName, iconClassName = _a.iconClassName, href = _a.href, _e = _a.Component, Component = _e === void 0 ? href ? 'a' : 'button' : _e, restProps = tslib.__rest(_a, ["showIndicator", "indicatorProps", "label", "icon", "id", "selected", "onChange", "onClick", "tabClassNames", "dataTestId", "className", "labelClassName", "selectedClassName", "iconClassName", "href", "Component"]);
21
+ var showIndicator = _a.showIndicator, indicatorProps = _a.indicatorProps, label = _a.label, icon = _a.icon, id = _a.id, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, _d = _a.tabClassNames, tabClassNames = _d === void 0 ? {} : _d, dataTestId = _a.dataTestId, className = _a.className, labelClassName = _a.labelClassName, selectedClassName = _a.selectedClassName, iconClassName = _a.iconClassName, href = _a.href, _e = _a.Component, Component = _e === void 0 ? href ? 'a' : 'button' : _e, _f = _a.accentColor, accentColor = _f === void 0 ? 'primary' : _f, _g = _a.bgColor, bgColor = _g === void 0 ? 'modal-bg-primary' : _g, restProps = tslib.__rest(_a, ["showIndicator", "indicatorProps", "label", "icon", "id", "selected", "onChange", "onClick", "tabClassNames", "dataTestId", "className", "labelClassName", "selectedClassName", "iconClassName", "href", "Component", "accentColor", "bgColor"]);
21
22
  var handleClick = function (event) {
22
23
  onChange === null || onChange === void 0 ? void 0 : onChange(id);
23
24
  onClick === null || onClick === void 0 ? void 0 : onClick(event);
24
25
  };
25
26
  var commonClassName = tabClassNames.className, commonLabelClassName = tabClassNames.labelClassName, commonSelectedClassName = tabClassNames.selectedClassName, commonIconClassName = tabClassNames.iconClassName;
26
27
  return (React__default.default.createElement(Component, tslib.__assign({ "data-test-id": dataTestId, tabIndex: 0 }, (Component === 'button' ? { type: 'button' } : null), restProps, { href: href, id: id, ref: ref, className: cn__default.default(styles__default.default.component, commonClassName, className, selected && commonSelectedClassName, selected && selectedClassName, (_b = {},
27
- _b[styles__default.default.selected] = selected,
28
+ _b[styles__default.default[accentColor]] = selected,
28
29
  _b)), onClick: handleClick }),
29
30
  React__default.default.createElement("div", { className: cn__default.default(styles__default.default.icon, commonIconClassName, iconClassName) }, React.isValidElement(icon) ? React.cloneElement(icon, { selected: selected }) : icon),
30
31
  React__default.default.createElement(coreComponentsTypography.Typography.Text, { weight: 'medium', view: 'secondary-small', className: cn__default.default(styles__default.default.label, commonLabelClassName, labelClassName, (_c = {},
31
32
  _c[styles__default.default.labelSelected] = selected,
32
33
  _c)) }, React.isValidElement(label) ? React.cloneElement(label, { selected: selected }) : label),
33
34
  showIndicator && (React__default.default.createElement("div", { className: styles__default.default.indicator },
34
- React__default.default.createElement(coreComponentsBadge.Badge, tslib.__assign({ visibleIconOutline: true }, indicatorProps, { view: 'count' }))))));
35
+ React__default.default.createElement(coreComponentsIndicator.Indicator, tslib.__assign({}, indicatorProps, { height: (indicatorProps === null || indicatorProps === void 0 ? void 0 : indicatorProps.value) ? 16 : undefined, border: {
36
+ width: 2,
37
+ color: consts.INDICATOR_BORDER_COLOR[bgColor],
38
+ }, backgroundColor: consts.INDICATOR_BG_COLOR[accentColor] }))))));
35
39
  });
36
40
  var Tab = TabComponent;
37
41
 
package/cssm/components/tab/index.module.css CHANGED
@@ -1,6 +1,7 @@
1
- :root {
1
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
2
2
  } /* deprecated */ :root {
3
3
  --color-light-accent-primary: #ef3124;
4
+ --color-light-accent-secondary: #212124;
4
5
  --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
5
6
  --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
7
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -42,8 +43,10 @@
42
43
  align-items: center;
43
44
  padding: var(--gap-xs) 0;
44
45
  color: var(--color-light-neutral-translucent-700);
45
- } .selected {
46
+ } .primary {
46
47
  color: var(--color-light-accent-primary);
48
+ } .secondary {
49
+ color: var(--color-light-accent-secondary);
47
50
  } .icon {
48
51
  display: flex;
49
52
  align-items: center;
@@ -63,7 +66,7 @@
63
66
  color: inherit;
64
67
  } .indicator {
65
68
  position: absolute;
66
- top: var(--gap-2xs);
69
+ top: 3px;
67
70
  left: calc(50% + var(--gap-2xs));
68
71
  height: 16px;
69
72
  min-width: 16px;
package/cssm/consts.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ declare const INDICATOR_BORDER_COLOR: {
2
+ 'modal-bg-primary': string;
3
+ 'modal-bg-alt-primary': string;
4
+ };
5
+ declare const INDICATOR_BG_COLOR: {
6
+ primary: string;
7
+ secondary: string;
8
+ };
9
+ export { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR };
package/cssm/consts.js ADDED
@@ -0,0 +1,15 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var INDICATOR_BORDER_COLOR = {
6
+ 'modal-bg-primary': 'var(--color-light-base-bg-primary)',
7
+ 'modal-bg-alt-primary': 'var(--color-light-base-bg-alt-primary)',
8
+ };
9
+ var INDICATOR_BG_COLOR = {
10
+ primary: 'var(--color-light-accent-primary)',
11
+ secondary: 'var(--color-light-accent-secondary)',
12
+ };
13
+
14
+ exports.INDICATOR_BG_COLOR = INDICATOR_BG_COLOR;
15
+ exports.INDICATOR_BORDER_COLOR = INDICATOR_BORDER_COLOR;
package/cssm/index.module.css CHANGED
@@ -1,7 +1,8 @@
1
- :root {
1
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
2
2
  } /* deprecated */ :root {
3
+ --color-light-base-bg-alt-primary: #f2f3f5;
3
4
  --color-light-base-bg-primary: #fff;
4
- --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
+ --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
6
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
7
  } :root {
7
8
  } :root {
@@ -15,17 +16,18 @@
15
16
  } :root {
16
17
  } :root {
17
18
  } :root {
18
- } :root {
19
- --tab-bar-bg-color: var(--color-light-base-bg-primary);
20
19
  } .component {
21
20
  display: flex;
22
21
  justify-content: center;
23
22
  height: 64px;
24
23
  max-height: 64px;
25
- background-color: var(--tab-bar-bg-color);
26
24
  box-sizing: border-box;
27
25
  overflow: hidden;
28
- transition: box-shadow 0.2s ease;
29
- } .border {
30
- box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
26
+ transition: box-shadow 0.2s ease
27
+ } .component.modal-bg-primary {
28
+ background-color: var(--color-light-base-bg-primary);
29
+ } .component.modal-bg-alt-primary {
30
+ background-color: var(--color-light-base-bg-alt-primary);
31
+ } .border {
32
+ box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
31
33
  }
package/cssm/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
2
- import { BadgeProps } from "@alfalab/core-components-badge";
2
+ import { IndicatorProps } from "@alfalab/core-components-indicator";
3
3
  type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
4
4
  interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
5
5
  /**
@@ -48,6 +48,14 @@ interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
48
48
  * Обработчик изменения выбранного таба
49
49
  */
50
50
  onChange?: (id: string) => void;
51
+ /**
52
+ * Цвет активного таба
53
+ */
54
+ accentColor?: 'primary' | 'secondary';
55
+ /**
56
+ * Цвет фона
57
+ */
58
+ bgColor?: 'modal-bg-primary' | 'modal-bg-alt-primary';
51
59
  }
52
60
  type AdditionalTabProps = Record<string, unknown>;
53
61
  interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'>, AdditionalTabProps {
@@ -75,7 +83,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
75
83
  /**
76
84
  * Свойства индикатора
77
85
  */
78
- indicatorProps?: Omit<BadgeProps, 'view' | 'visibleColorOutline' | 'size' | 'iconColor' | 'iconUnderlayColor'>;
86
+ indicatorProps?: Omit<IndicatorProps, 'color' | 'backgroundColor' | 'border' | 'view' | 'size' | 'height'>;
79
87
  /**
80
88
  * Дополнительный класс таба
81
89
  */
@@ -93,7 +101,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
93
101
  */
94
102
  iconClassName?: string;
95
103
  }
96
- interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId'> {
104
+ interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId' | 'accentColor' | 'bgColor'> {
97
105
  selected: boolean;
98
106
  }
99
107
  export { TabBarProps, TabProps, PrivateTabProps };
package/esm/Component.js CHANGED
@@ -4,18 +4,22 @@ import cn from 'classnames';
4
4
  import { getDataTestId } from '@alfalab/core-components-shared/esm';
5
5
  import { Tab } from './components/tab/Component.js';
6
6
 
7
- var styles = {"component":"tab-bar__component_16z03","border":"tab-bar__border_16z03"};
7
+ var styles = {"component":"tab-bar__component_13pzg","modal-bg-primary":"tab-bar__modal-bg-primary_13pzg","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_13pzg","border":"tab-bar__border_13pzg"};
8
8
  require('./index.css')
9
9
 
10
10
  var TabBarComponent = forwardRef(function (_a, ref) {
11
11
  var _b;
12
- var children = _a.children, className = _a.className, selectedId = _a.selectedId, border = _a.border, dataTestId = _a.dataTestId, tabClassNames = _a.tabClassNames, onChange = _a.onChange, restProps = __rest(_a, ["children", "className", "selectedId", "border", "dataTestId", "tabClassNames", "onChange"]);
12
+ var children = _a.children, className = _a.className, selectedId = _a.selectedId, border = _a.border, dataTestId = _a.dataTestId, tabClassNames = _a.tabClassNames, onChange = _a.onChange, _c = _a.accentColor, accentColor = _c === void 0 ? 'primary' : _c, _d = _a.bgColor, bgColor = _d === void 0 ? 'modal-bg-primary' : _d, restProps = __rest(_a, ["children", "className", "selectedId", "border", "dataTestId", "tabClassNames", "onChange", "accentColor", "bgColor"]);
13
13
  if (Children.count(children) > 5) {
14
14
  // eslint-disable-next-line no-console
15
15
  console.error('Компонент TabBar не может содержать больше 5 табов');
16
16
  }
17
- return (React.createElement("nav", __assign({ "data-test-id": dataTestId }, restProps, { ref: ref, className: cn(styles.component, className, (_b = {}, _b[styles.border] = border, _b)) }), Children.map(children, function (tab) {
17
+ return (React.createElement("nav", __assign({ "data-test-id": dataTestId }, restProps, { ref: ref, className: cn(styles.component, styles[bgColor], className, (_b = {},
18
+ _b[styles.border] = border,
19
+ _b)) }), Children.map(children, function (tab) {
18
20
  return cloneElement(tab, {
21
+ bgColor: bgColor,
22
+ accentColor: accentColor,
19
23
  selected: tab.props.id === selectedId,
20
24
  onChange: onChange,
21
25
  tabClassNames: tabClassNames,
package/esm/components/tab/Component.js CHANGED
@@ -1,29 +1,33 @@
1
1
  import { __rest, __assign } from 'tslib';
2
2
  import React, { forwardRef, isValidElement, cloneElement } from 'react';
3
3
  import cn from 'classnames';
4
- import { Badge } from '@alfalab/core-components-badge/esm';
4
+ import { Indicator } from '@alfalab/core-components-indicator/esm';
5
5
  import { Typography } from '@alfalab/core-components-typography/esm';
6
+ import { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR } from '../../consts.js';
6
7
 
7
- var styles = {"component":"tab-bar__component_lg08x","selected":"tab-bar__selected_lg08x","icon":"tab-bar__icon_lg08x","label":"tab-bar__label_lg08x","labelSelected":"tab-bar__labelSelected_lg08x","indicator":"tab-bar__indicator_lg08x"};
8
+ var styles = {"component":"tab-bar__component_1ifto","primary":"tab-bar__primary_1ifto","secondary":"tab-bar__secondary_1ifto","icon":"tab-bar__icon_1ifto","label":"tab-bar__label_1ifto","labelSelected":"tab-bar__labelSelected_1ifto","indicator":"tab-bar__indicator_1ifto"};
8
9
  require('./index.css')
9
10
 
10
11
  var TabComponent = forwardRef(function (_a, ref) {
11
12
  var _b, _c;
12
- var showIndicator = _a.showIndicator, indicatorProps = _a.indicatorProps, label = _a.label, icon = _a.icon, id = _a.id, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, _d = _a.tabClassNames, tabClassNames = _d === void 0 ? {} : _d, dataTestId = _a.dataTestId, className = _a.className, labelClassName = _a.labelClassName, selectedClassName = _a.selectedClassName, iconClassName = _a.iconClassName, href = _a.href, _e = _a.Component, Component = _e === void 0 ? href ? 'a' : 'button' : _e, restProps = __rest(_a, ["showIndicator", "indicatorProps", "label", "icon", "id", "selected", "onChange", "onClick", "tabClassNames", "dataTestId", "className", "labelClassName", "selectedClassName", "iconClassName", "href", "Component"]);
13
+ var showIndicator = _a.showIndicator, indicatorProps = _a.indicatorProps, label = _a.label, icon = _a.icon, id = _a.id, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, _d = _a.tabClassNames, tabClassNames = _d === void 0 ? {} : _d, dataTestId = _a.dataTestId, className = _a.className, labelClassName = _a.labelClassName, selectedClassName = _a.selectedClassName, iconClassName = _a.iconClassName, href = _a.href, _e = _a.Component, Component = _e === void 0 ? href ? 'a' : 'button' : _e, _f = _a.accentColor, accentColor = _f === void 0 ? 'primary' : _f, _g = _a.bgColor, bgColor = _g === void 0 ? 'modal-bg-primary' : _g, restProps = __rest(_a, ["showIndicator", "indicatorProps", "label", "icon", "id", "selected", "onChange", "onClick", "tabClassNames", "dataTestId", "className", "labelClassName", "selectedClassName", "iconClassName", "href", "Component", "accentColor", "bgColor"]);
13
14
  var handleClick = function (event) {
14
15
  onChange === null || onChange === void 0 ? void 0 : onChange(id);
15
16
  onClick === null || onClick === void 0 ? void 0 : onClick(event);
16
17
  };
17
18
  var commonClassName = tabClassNames.className, commonLabelClassName = tabClassNames.labelClassName, commonSelectedClassName = tabClassNames.selectedClassName, commonIconClassName = tabClassNames.iconClassName;
18
19
  return (React.createElement(Component, __assign({ "data-test-id": dataTestId, tabIndex: 0 }, (Component === 'button' ? { type: 'button' } : null), restProps, { href: href, id: id, ref: ref, className: cn(styles.component, commonClassName, className, selected && commonSelectedClassName, selected && selectedClassName, (_b = {},
19
- _b[styles.selected] = selected,
20
+ _b[styles[accentColor]] = selected,
20
21
  _b)), onClick: handleClick }),
21
22
  React.createElement("div", { className: cn(styles.icon, commonIconClassName, iconClassName) }, isValidElement(icon) ? cloneElement(icon, { selected: selected }) : icon),
22
23
  React.createElement(Typography.Text, { weight: 'medium', view: 'secondary-small', className: cn(styles.label, commonLabelClassName, labelClassName, (_c = {},
23
24
  _c[styles.labelSelected] = selected,
24
25
  _c)) }, isValidElement(label) ? cloneElement(label, { selected: selected }) : label),
25
26
  showIndicator && (React.createElement("div", { className: styles.indicator },
26
- React.createElement(Badge, __assign({ visibleIconOutline: true }, indicatorProps, { view: 'count' }))))));
27
+ React.createElement(Indicator, __assign({}, indicatorProps, { height: (indicatorProps === null || indicatorProps === void 0 ? void 0 : indicatorProps.value) ? 16 : undefined, border: {
28
+ width: 2,
29
+ color: INDICATOR_BORDER_COLOR[bgColor],
30
+ }, backgroundColor: INDICATOR_BG_COLOR[accentColor] }))))));
27
31
  });
28
32
  var Tab = TabComponent;
29
33
 
package/esm/components/tab/index.css CHANGED
@@ -1,7 +1,8 @@
1
- /* hash: 1ov0x */
2
- :root {
1
+ /* hash: 1vyw8 */
2
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-accent-primary: #ef3124;
5
+ --color-light-accent-secondary: #212124;
5
6
  --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
6
7
  --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
8
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -19,7 +20,7 @@
19
20
  --gap-xs: 8px;
20
21
  } :root {
21
22
  } :root {
22
- } .tab-bar__component_lg08x {
23
+ } .tab-bar__component_1ifto {
23
24
  box-sizing: border-box;
24
25
  background-color: transparent;
25
26
  -webkit-tap-highlight-color: transparent;
@@ -43,15 +44,17 @@
43
44
  align-items: center;
44
45
  padding: var(--gap-xs) 0;
45
46
  color: var(--color-light-neutral-translucent-700);
46
- } .tab-bar__selected_lg08x {
47
+ } .tab-bar__primary_1ifto {
47
48
  color: var(--color-light-accent-primary);
48
- } .tab-bar__icon_lg08x {
49
+ } .tab-bar__secondary_1ifto {
50
+ color: var(--color-light-accent-secondary);
51
+ } .tab-bar__icon_1ifto {
49
52
  display: flex;
50
53
  align-items: center;
51
54
  justify-content: center;
52
55
  flex-grow: 1;
53
56
  width: 100%;
54
- } .tab-bar__label_lg08x {
57
+ } .tab-bar__label_1ifto {
55
58
  -webkit-line-clamp: 1;
56
59
  display: -webkit-box;
57
60
  -webkit-box-orient: vertical;
@@ -60,11 +63,11 @@
60
63
  flex-shrink: 0;
61
64
 
62
65
  color: var(--color-light-text-secondary);
63
- } .tab-bar__labelSelected_lg08x {
66
+ } .tab-bar__labelSelected_1ifto {
64
67
  color: inherit;
65
- } .tab-bar__indicator_lg08x {
68
+ } .tab-bar__indicator_1ifto {
66
69
  position: absolute;
67
- top: var(--gap-2xs);
70
+ top: 3px;
68
71
  left: calc(50% + var(--gap-2xs));
69
72
  height: 16px;
70
73
  min-width: 16px;
package/esm/consts.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ declare const INDICATOR_BORDER_COLOR: {
2
+ 'modal-bg-primary': string;
3
+ 'modal-bg-alt-primary': string;
4
+ };
5
+ declare const INDICATOR_BG_COLOR: {
6
+ primary: string;
7
+ secondary: string;
8
+ };
9
+ export { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR };
package/esm/consts.js ADDED
@@ -0,0 +1,10 @@
1
+ var INDICATOR_BORDER_COLOR = {
2
+ 'modal-bg-primary': 'var(--color-light-base-bg-primary)',
3
+ 'modal-bg-alt-primary': 'var(--color-light-base-bg-alt-primary)',
4
+ };
5
+ var INDICATOR_BG_COLOR = {
6
+ primary: 'var(--color-light-accent-primary)',
7
+ secondary: 'var(--color-light-accent-secondary)',
8
+ };
9
+
10
+ export { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR };
package/esm/index.css CHANGED
@@ -1,8 +1,9 @@
1
- /* hash: 1y5xt */
2
- :root {
1
+ /* hash: 9ek3f */
2
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
+ --color-light-base-bg-alt-primary: #f2f3f5;
4
5
  --color-light-base-bg-primary: #fff;
5
- --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
+ --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
7
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
8
  } :root {
8
9
  } :root {
@@ -16,17 +17,18 @@
16
17
  } :root {
17
18
  } :root {
18
19
  } :root {
19
- } :root {
20
- --tab-bar-bg-color: var(--color-light-base-bg-primary);
21
- } .tab-bar__component_16z03 {
20
+ } .tab-bar__component_13pzg {
22
21
  display: flex;
23
22
  justify-content: center;
24
23
  height: 64px;
25
24
  max-height: 64px;
26
- background-color: var(--tab-bar-bg-color);
27
25
  box-sizing: border-box;
28
26
  overflow: hidden;
29
- transition: box-shadow 0.2s ease;
30
- } .tab-bar__border_16z03 {
31
- box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
27
+ transition: box-shadow 0.2s ease
28
+ } .tab-bar__component_13pzg.tab-bar__modal-bg-primary_13pzg {
29
+ background-color: var(--color-light-base-bg-primary);
30
+ } .tab-bar__component_13pzg.tab-bar__modal-bg-alt-primary_13pzg {
31
+ background-color: var(--color-light-base-bg-alt-primary);
32
+ } .tab-bar__border_13pzg {
33
+ box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
32
34
  }
package/esm/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
2
- import { BadgeProps } from "@alfalab/core-components-badge";
2
+ import { IndicatorProps } from "@alfalab/core-components-indicator";
3
3
  type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
4
4
  interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
5
5
  /**
@@ -48,6 +48,14 @@ interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
48
48
  * Обработчик изменения выбранного таба
49
49
  */
50
50
  onChange?: (id: string) => void;
51
+ /**
52
+ * Цвет активного таба
53
+ */
54
+ accentColor?: 'primary' | 'secondary';
55
+ /**
56
+ * Цвет фона
57
+ */
58
+ bgColor?: 'modal-bg-primary' | 'modal-bg-alt-primary';
51
59
  }
52
60
  type AdditionalTabProps = Record<string, unknown>;
53
61
  interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'>, AdditionalTabProps {
@@ -75,7 +83,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
75
83
  /**
76
84
  * Свойства индикатора
77
85
  */
78
- indicatorProps?: Omit<BadgeProps, 'view' | 'visibleColorOutline' | 'size' | 'iconColor' | 'iconUnderlayColor'>;
86
+ indicatorProps?: Omit<IndicatorProps, 'color' | 'backgroundColor' | 'border' | 'view' | 'size' | 'height'>;
79
87
  /**
80
88
  * Дополнительный класс таба
81
89
  */
@@ -93,7 +101,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
93
101
  */
94
102
  iconClassName?: string;
95
103
  }
96
- interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId'> {
104
+ interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId' | 'accentColor' | 'bgColor'> {
97
105
  selected: boolean;
98
106
  }
99
107
  export { TabBarProps, TabProps, PrivateTabProps };
package/index.css CHANGED
@@ -1,8 +1,9 @@
1
- /* hash: 1y5xt */
2
- :root {
1
+ /* hash: 9ek3f */
2
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
+ --color-light-base-bg-alt-primary: #f2f3f5;
4
5
  --color-light-base-bg-primary: #fff;
5
- --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
+ --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
7
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
8
  } :root {
8
9
  } :root {
@@ -16,17 +17,18 @@
16
17
  } :root {
17
18
  } :root {
18
19
  } :root {
19
- } :root {
20
- --tab-bar-bg-color: var(--color-light-base-bg-primary);
21
- } .tab-bar__component_16z03 {
20
+ } .tab-bar__component_13pzg {
22
21
  display: flex;
23
22
  justify-content: center;
24
23
  height: 64px;
25
24
  max-height: 64px;
26
- background-color: var(--tab-bar-bg-color);
27
25
  box-sizing: border-box;
28
26
  overflow: hidden;
29
- transition: box-shadow 0.2s ease;
30
- } .tab-bar__border_16z03 {
31
- box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
27
+ transition: box-shadow 0.2s ease
28
+ } .tab-bar__component_13pzg.tab-bar__modal-bg-primary_13pzg {
29
+ background-color: var(--color-light-base-bg-primary);
30
+ } .tab-bar__component_13pzg.tab-bar__modal-bg-alt-primary_13pzg {
31
+ background-color: var(--color-light-base-bg-alt-primary);
32
+ } .tab-bar__border_13pzg {
33
+ box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
32
34
  }
package/modern/Component.js CHANGED
@@ -3,15 +3,19 @@ import cn from 'classnames';
3
3
  import { getDataTestId } from '@alfalab/core-components-shared/modern';
4
4
  import { Tab } from './components/tab/Component.js';
5
5
 
6
- const styles = {"component":"tab-bar__component_16z03","border":"tab-bar__border_16z03"};
6
+ const styles = {"component":"tab-bar__component_13pzg","modal-bg-primary":"tab-bar__modal-bg-primary_13pzg","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_13pzg","border":"tab-bar__border_13pzg"};
7
7
  require('./index.css')
8
8
 
9
- const TabBarComponent = forwardRef(({ children, className, selectedId, border, dataTestId, tabClassNames, onChange, ...restProps }, ref) => {
9
+ const TabBarComponent = forwardRef(({ children, className, selectedId, border, dataTestId, tabClassNames, onChange, accentColor = 'primary', bgColor = 'modal-bg-primary', ...restProps }, ref) => {
10
10
  if (Children.count(children) > 5) {
11
11
  // eslint-disable-next-line no-console
12
12
  console.error('Компонент TabBar не может содержать больше 5 табов');
13
13
  }
14
- return (React.createElement("nav", { "data-test-id": dataTestId, ...restProps, ref: ref, className: cn(styles.component, className, { [styles.border]: border }) }, Children.map(children, (tab) => cloneElement(tab, {
14
+ return (React.createElement("nav", { "data-test-id": dataTestId, ...restProps, ref: ref, className: cn(styles.component, styles[bgColor], className, {
15
+ [styles.border]: border,
16
+ }) }, Children.map(children, (tab) => cloneElement(tab, {
17
+ bgColor,
18
+ accentColor,
15
19
  selected: tab.props.id === selectedId,
16
20
  onChange,
17
21
  tabClassNames,
package/modern/components/tab/Component.js CHANGED
@@ -1,26 +1,30 @@
1
1
  import React, { forwardRef, isValidElement, cloneElement } from 'react';
2
2
  import cn from 'classnames';
3
- import { Badge } from '@alfalab/core-components-badge/modern';
3
+ import { Indicator } from '@alfalab/core-components-indicator/modern';
4
4
  import { Typography } from '@alfalab/core-components-typography/modern';
5
+ import { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR } from '../../consts.js';
5
6
 
6
- const styles = {"component":"tab-bar__component_lg08x","selected":"tab-bar__selected_lg08x","icon":"tab-bar__icon_lg08x","label":"tab-bar__label_lg08x","labelSelected":"tab-bar__labelSelected_lg08x","indicator":"tab-bar__indicator_lg08x"};
7
+ const styles = {"component":"tab-bar__component_1ifto","primary":"tab-bar__primary_1ifto","secondary":"tab-bar__secondary_1ifto","icon":"tab-bar__icon_1ifto","label":"tab-bar__label_1ifto","labelSelected":"tab-bar__labelSelected_1ifto","indicator":"tab-bar__indicator_1ifto"};
7
8
  require('./index.css')
8
9
 
9
- const TabComponent = forwardRef(({ showIndicator, indicatorProps, label, icon, id, selected, onChange, onClick, tabClassNames = {}, dataTestId, className, labelClassName, selectedClassName, iconClassName, href, Component = href ? 'a' : 'button', ...restProps }, ref) => {
10
+ const TabComponent = forwardRef(({ showIndicator, indicatorProps, label, icon, id, selected, onChange, onClick, tabClassNames = {}, dataTestId, className, labelClassName, selectedClassName, iconClassName, href, Component = href ? 'a' : 'button', accentColor = 'primary', bgColor = 'modal-bg-primary', ...restProps }, ref) => {
10
11
  const handleClick = (event) => {
11
12
  onChange?.(id);
12
13
  onClick?.(event);
13
14
  };
14
15
  const { className: commonClassName, labelClassName: commonLabelClassName, selectedClassName: commonSelectedClassName, iconClassName: commonIconClassName, } = tabClassNames;
15
16
  return (React.createElement(Component, { "data-test-id": dataTestId, tabIndex: 0, ...(Component === 'button' ? { type: 'button' } : null), ...restProps, href: href, id: id, ref: ref, className: cn(styles.component, commonClassName, className, selected && commonSelectedClassName, selected && selectedClassName, {
16
- [styles.selected]: selected,
17
+ [styles[accentColor]]: selected,
17
18
  }), onClick: handleClick },
18
19
  React.createElement("div", { className: cn(styles.icon, commonIconClassName, iconClassName) }, isValidElement(icon) ? cloneElement(icon, { selected }) : icon),
19
20
  React.createElement(Typography.Text, { weight: 'medium', view: 'secondary-small', className: cn(styles.label, commonLabelClassName, labelClassName, {
20
21
  [styles.labelSelected]: selected,
21
22
  }) }, isValidElement(label) ? cloneElement(label, { selected }) : label),
22
23
  showIndicator && (React.createElement("div", { className: styles.indicator },
23
- React.createElement(Badge, { visibleIconOutline: true, ...indicatorProps, view: 'count' })))));
24
+ React.createElement(Indicator, { ...indicatorProps, height: indicatorProps?.value ? 16 : undefined, border: {
25
+ width: 2,
26
+ color: INDICATOR_BORDER_COLOR[bgColor],
27
+ }, backgroundColor: INDICATOR_BG_COLOR[accentColor] })))));
24
28
  });
25
29
  const Tab = TabComponent;
26
30
 
package/modern/components/tab/index.css CHANGED
@@ -1,7 +1,8 @@
1
- /* hash: 1ov0x */
2
- :root {
1
+ /* hash: 1vyw8 */
2
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-accent-primary: #ef3124;
5
+ --color-light-accent-secondary: #212124;
5
6
  --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
6
7
  --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
8
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -19,7 +20,7 @@
19
20
  --gap-xs: 8px;
20
21
  } :root {
21
22
  } :root {
22
- } .tab-bar__component_lg08x {
23
+ } .tab-bar__component_1ifto {
23
24
  box-sizing: border-box;
24
25
  background-color: transparent;
25
26
  -webkit-tap-highlight-color: transparent;
@@ -43,15 +44,17 @@
43
44
  align-items: center;
44
45
  padding: var(--gap-xs) 0;
45
46
  color: var(--color-light-neutral-translucent-700);
46
- } .tab-bar__selected_lg08x {
47
+ } .tab-bar__primary_1ifto {
47
48
  color: var(--color-light-accent-primary);
48
- } .tab-bar__icon_lg08x {
49
+ } .tab-bar__secondary_1ifto {
50
+ color: var(--color-light-accent-secondary);
51
+ } .tab-bar__icon_1ifto {
49
52
  display: flex;
50
53
  align-items: center;
51
54
  justify-content: center;
52
55
  flex-grow: 1;
53
56
  width: 100%;
54
- } .tab-bar__label_lg08x {
57
+ } .tab-bar__label_1ifto {
55
58
  -webkit-line-clamp: 1;
56
59
  display: -webkit-box;
57
60
  -webkit-box-orient: vertical;
@@ -60,11 +63,11 @@
60
63
  flex-shrink: 0;
61
64
 
62
65
  color: var(--color-light-text-secondary);
63
- } .tab-bar__labelSelected_lg08x {
66
+ } .tab-bar__labelSelected_1ifto {
64
67
  color: inherit;
65
- } .tab-bar__indicator_lg08x {
68
+ } .tab-bar__indicator_1ifto {
66
69
  position: absolute;
67
- top: var(--gap-2xs);
70
+ top: 3px;
68
71
  left: calc(50% + var(--gap-2xs));
69
72
  height: 16px;
70
73
  min-width: 16px;
package/modern/consts.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ declare const INDICATOR_BORDER_COLOR: {
2
+ 'modal-bg-primary': string;
3
+ 'modal-bg-alt-primary': string;
4
+ };
5
+ declare const INDICATOR_BG_COLOR: {
6
+ primary: string;
7
+ secondary: string;
8
+ };
9
+ export { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR };
package/modern/consts.js ADDED
@@ -0,0 +1,10 @@
1
+ const INDICATOR_BORDER_COLOR = {
2
+ 'modal-bg-primary': 'var(--color-light-base-bg-primary)',
3
+ 'modal-bg-alt-primary': 'var(--color-light-base-bg-alt-primary)',
4
+ };
5
+ const INDICATOR_BG_COLOR = {
6
+ primary: 'var(--color-light-accent-primary)',
7
+ secondary: 'var(--color-light-accent-secondary)',
8
+ };
9
+
10
+ export { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR };
package/modern/index.css CHANGED
@@ -1,8 +1,9 @@
1
- /* hash: 1y5xt */
2
- :root {
1
+ /* hash: 9ek3f */
2
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
+ --color-light-base-bg-alt-primary: #f2f3f5;
4
5
  --color-light-base-bg-primary: #fff;
5
- --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
+ --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
7
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
8
  } :root {
8
9
  } :root {
@@ -16,17 +17,18 @@
16
17
  } :root {
17
18
  } :root {
18
19
  } :root {
19
- } :root {
20
- --tab-bar-bg-color: var(--color-light-base-bg-primary);
21
- } .tab-bar__component_16z03 {
20
+ } .tab-bar__component_13pzg {
22
21
  display: flex;
23
22
  justify-content: center;
24
23
  height: 64px;
25
24
  max-height: 64px;
26
- background-color: var(--tab-bar-bg-color);
27
25
  box-sizing: border-box;
28
26
  overflow: hidden;
29
- transition: box-shadow 0.2s ease;
30
- } .tab-bar__border_16z03 {
31
- box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
27
+ transition: box-shadow 0.2s ease
28
+ } .tab-bar__component_13pzg.tab-bar__modal-bg-primary_13pzg {
29
+ background-color: var(--color-light-base-bg-primary);
30
+ } .tab-bar__component_13pzg.tab-bar__modal-bg-alt-primary_13pzg {
31
+ background-color: var(--color-light-base-bg-alt-primary);
32
+ } .tab-bar__border_13pzg {
33
+ box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
32
34
  }
package/modern/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
2
- import { BadgeProps } from "@alfalab/core-components-badge";
2
+ import { IndicatorProps } from "@alfalab/core-components-indicator";
3
3
  type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
4
4
  interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
5
5
  /**
@@ -48,6 +48,14 @@ interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
48
48
  * Обработчик изменения выбранного таба
49
49
  */
50
50
  onChange?: (id: string) => void;
51
+ /**
52
+ * Цвет активного таба
53
+ */
54
+ accentColor?: 'primary' | 'secondary';
55
+ /**
56
+ * Цвет фона
57
+ */
58
+ bgColor?: 'modal-bg-primary' | 'modal-bg-alt-primary';
51
59
  }
52
60
  type AdditionalTabProps = Record<string, unknown>;
53
61
  interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'>, AdditionalTabProps {
@@ -75,7 +83,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
75
83
  /**
76
84
  * Свойства индикатора
77
85
  */
78
- indicatorProps?: Omit<BadgeProps, 'view' | 'visibleColorOutline' | 'size' | 'iconColor' | 'iconUnderlayColor'>;
86
+ indicatorProps?: Omit<IndicatorProps, 'color' | 'backgroundColor' | 'border' | 'view' | 'size' | 'height'>;
79
87
  /**
80
88
  * Дополнительный класс таба
81
89
  */
@@ -93,7 +101,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
93
101
  */
94
102
  iconClassName?: string;
95
103
  }
96
- interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId'> {
104
+ interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId' | 'accentColor' | 'bgColor'> {
97
105
  selected: boolean;
98
106
  }
99
107
  export { TabBarProps, TabProps, PrivateTabProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-tab-bar",
3
- "version": "1.1.0",
3
+ "version": "2.0.1",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,9 +15,9 @@
15
15
  "react-dom": ">=16.8.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-typography": "^4.5.0",
19
- "@alfalab/core-components-badge": "^5.5.1",
20
- "@alfalab/core-components-shared": "^0.9.1",
18
+ "@alfalab/core-components-typography": "^4.5.1",
19
+ "@alfalab/core-components-indicator": "^2.0.1",
20
+ "@alfalab/core-components-shared": "^0.10.0",
21
21
  "classnames": "^2.3.1",
22
22
  "tslib": "^2.4.0"
23
23
  }
package/src/Component.tsx CHANGED
@@ -18,6 +18,8 @@ const TabBarComponent = forwardRef<HTMLDivElement, TabBarProps>(
18
18
  dataTestId,
19
19
  tabClassNames,
20
20
  onChange,
21
+ accentColor = 'primary',
22
+ bgColor = 'modal-bg-primary',
21
23
  ...restProps
22
24
  },
23
25
  ref,
@@ -32,10 +34,14 @@ const TabBarComponent = forwardRef<HTMLDivElement, TabBarProps>(
32
34
  data-test-id={dataTestId}
33
35
  {...restProps}
34
36
  ref={ref}
35
- className={cn(styles.component, className, { [styles.border]: border })}
37
+ className={cn(styles.component, styles[bgColor], className, {
38
+ [styles.border]: border,
39
+ })}
36
40
  >
37
41
  {Children.map(children, (tab) =>
38
42
  cloneElement(tab, {
43
+ bgColor,
44
+ accentColor,
39
45
  selected: tab.props.id === selectedId,
40
46
  onChange,
41
47
  tabClassNames,
package/src/components/tab/Component.tsx CHANGED
@@ -1,9 +1,10 @@
1
1
  import React, { cloneElement, forwardRef, isValidElement, MouseEvent } from 'react';
2
2
  import cn from 'classnames';
3
3
 
4
- import { Badge } from '@alfalab/core-components-badge';
4
+ import { Indicator } from '@alfalab/core-components-indicator';
5
5
  import { Typography } from '@alfalab/core-components-typography';
6
6
 
7
+ import { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR } from '../../consts';
7
8
  import { PrivateTabProps, TabProps } from '../../types';
8
9
 
9
10
  import styles from './index.module.css';
@@ -27,6 +28,8 @@ const TabComponent = forwardRef(
27
28
  iconClassName,
28
29
  href,
29
30
  Component = href ? 'a' : 'button',
31
+ accentColor = 'primary',
32
+ bgColor = 'modal-bg-primary',
30
33
  ...restProps
31
34
  }: PrivateTabProps & TabProps,
32
35
  ref,
@@ -59,7 +62,7 @@ const TabComponent = forwardRef(
59
62
  selected && commonSelectedClassName,
60
63
  selected && selectedClassName,
61
64
  {
62
- [styles.selected]: selected,
65
+ [styles[accentColor]]: selected,
63
66
  },
64
67
  )}
65
68
  onClick={handleClick}
@@ -80,7 +83,15 @@ const TabComponent = forwardRef(
80
83
 
81
84
  {showIndicator && (
82
85
  <div className={styles.indicator}>
83
- <Badge visibleIconOutline={true} {...indicatorProps} view='count' />
86
+ <Indicator
87
+ {...indicatorProps}
88
+ height={indicatorProps?.value ? 16 : undefined}
89
+ border={{
90
+ width: 2,
91
+ color: INDICATOR_BORDER_COLOR[bgColor],
92
+ }}
93
+ backgroundColor={INDICATOR_BG_COLOR[accentColor]}
94
+ />
84
95
  </div>
85
96
  )}
86
97
  </Component>
package/src/components/tab/index.module.css CHANGED
@@ -12,10 +12,14 @@
12
12
  color: var(--color-light-neutral-translucent-700);
13
13
  }
14
14
 
15
- .selected {
15
+ .primary {
16
16
  color: var(--color-light-accent-primary);
17
17
  }
18
18
 
19
+ .secondary {
20
+ color: var(--color-light-accent-secondary);
21
+ }
22
+
19
23
  .icon {
20
24
  display: flex;
21
25
  align-items: center;
@@ -38,7 +42,7 @@
38
42
 
39
43
  .indicator {
40
44
  position: absolute;
41
- top: var(--gap-2xs);
45
+ top: 3px;
42
46
  left: calc(50% + var(--gap-2xs));
43
47
  height: 16px;
44
48
  min-width: 16px;
package/src/consts.ts ADDED
@@ -0,0 +1,9 @@
1
+ export const INDICATOR_BORDER_COLOR = {
2
+ 'modal-bg-primary': 'var(--color-light-base-bg-primary)',
3
+ 'modal-bg-alt-primary': 'var(--color-light-base-bg-alt-primary)',
4
+ };
5
+
6
+ export const INDICATOR_BG_COLOR = {
7
+ primary: 'var(--color-light-accent-primary)',
8
+ secondary: 'var(--color-light-accent-secondary)',
9
+ };
package/src/index.module.css CHANGED
@@ -1,20 +1,23 @@
1
1
  @import '@alfalab/core-components-themes/src/default.css';
2
2
 
3
- :root {
4
- --tab-bar-bg-color: var(--color-light-base-bg-primary);
5
- }
6
-
7
3
  .component {
8
4
  display: flex;
9
5
  justify-content: center;
10
6
  height: 64px;
11
7
  max-height: 64px;
12
- background-color: var(--tab-bar-bg-color);
13
8
  box-sizing: border-box;
14
9
  overflow: hidden;
15
10
  transition: box-shadow 0.2s ease;
11
+
12
+ &.modal-bg-primary {
13
+ background-color: var(--color-light-base-bg-primary);
14
+ }
15
+
16
+ &.modal-bg-alt-primary {
17
+ background-color: var(--color-light-base-bg-alt-primary);
18
+ }
16
19
  }
17
20
 
18
21
  .border {
19
- box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
22
+ box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
20
23
  }
package/src/types.ts CHANGED
@@ -8,7 +8,7 @@ import type {
8
8
  RefAttributes,
9
9
  } from 'react';
10
10
 
11
- import type { BadgeProps } from '@alfalab/core-components-badge';
11
+ import type { IndicatorProps } from '@alfalab/core-components-indicator';
12
12
 
13
13
  type TabElementType = ReactElement<
14
14
  TabProps,
@@ -71,6 +71,16 @@ export interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCha
71
71
  * Обработчик изменения выбранного таба
72
72
  */
73
73
  onChange?: (id: string) => void;
74
+
75
+ /**
76
+ * Цвет активного таба
77
+ */
78
+ accentColor?: 'primary' | 'secondary';
79
+
80
+ /**
81
+ * Цвет фона
82
+ */
83
+ bgColor?: 'modal-bg-primary' | 'modal-bg-alt-primary';
74
84
  }
75
85
 
76
86
  type AdditionalTabProps = Record<string, unknown>;
@@ -108,8 +118,8 @@ export interface TabProps
108
118
  * Свойства индикатора
109
119
  */
110
120
  indicatorProps?: Omit<
111
- BadgeProps,
112
- 'view' | 'visibleColorOutline' | 'size' | 'iconColor' | 'iconUnderlayColor'
121
+ IndicatorProps,
122
+ 'color' | 'backgroundColor' | 'border' | 'view' | 'size' | 'height'
113
123
  >;
114
124
 
115
125
  /**
@@ -134,6 +144,9 @@ export interface TabProps
134
144
  }
135
145
 
136
146
  export interface PrivateTabProps
137
- extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId'> {
147
+ extends Pick<
148
+ TabBarProps,
149
+ 'tabClassNames' | 'onChange' | 'dataTestId' | 'accentColor' | 'bgColor'
150
+ > {
138
151
  selected: boolean;
139
152
  }
package/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
2
- import { BadgeProps } from "@alfalab/core-components-badge";
2
+ import { IndicatorProps } from "@alfalab/core-components-indicator";
3
3
  type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
4
4
  interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
5
5
  /**
@@ -48,6 +48,14 @@ interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
48
48
  * Обработчик изменения выбранного таба
49
49
  */
50
50
  onChange?: (id: string) => void;
51
+ /**
52
+ * Цвет активного таба
53
+ */
54
+ accentColor?: 'primary' | 'secondary';
55
+ /**
56
+ * Цвет фона
57
+ */
58
+ bgColor?: 'modal-bg-primary' | 'modal-bg-alt-primary';
51
59
  }
52
60
  type AdditionalTabProps = Record<string, unknown>;
53
61
  interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'>, AdditionalTabProps {
@@ -75,7 +83,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
75
83
  /**
76
84
  * Свойства индикатора
77
85
  */
78
- indicatorProps?: Omit<BadgeProps, 'view' | 'visibleColorOutline' | 'size' | 'iconColor' | 'iconUnderlayColor'>;
86
+ indicatorProps?: Omit<IndicatorProps, 'color' | 'backgroundColor' | 'border' | 'view' | 'size' | 'height'>;
79
87
  /**
80
88
  * Дополнительный класс таба
81
89
  */
@@ -93,7 +101,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
93
101
  */
94
102
  iconClassName?: string;
95
103
  }
96
- interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId'> {
104
+ interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId' | 'accentColor' | 'bgColor'> {
97
105
  selected: boolean;
98
106
  }
99
107
  export { TabBarProps, TabProps, PrivateTabProps };