@alfalab/core-components-tab-bar 1.0.3 → 2.0.0

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 (63) hide show
  1. package/Component.js +7 -5
  2. package/components/tab/Component.js +9 -5
  3. package/components/tab/index.css +12 -9
  4. package/components/tab/index.js +0 -5
  5. package/consts.d.ts +9 -0
  6. package/consts.js +15 -0
  7. package/cssm/Component.js +6 -5
  8. package/cssm/components/tab/Component.js +8 -4
  9. package/cssm/components/tab/index.js +0 -6
  10. package/cssm/components/tab/index.module.css +6 -3
  11. package/cssm/consts.d.ts +9 -0
  12. package/cssm/consts.js +15 -0
  13. package/cssm/index.js +0 -9
  14. package/cssm/index.module.css +10 -8
  15. package/cssm/shared/index.d.ts +1 -0
  16. package/cssm/shared/index.js +9 -0
  17. package/cssm/types.d.ts +11 -3
  18. package/cssm/utils.d.ts +5 -0
  19. package/cssm/utils.js +14 -0
  20. package/esm/Component.js +7 -5
  21. package/esm/components/tab/Component.js +9 -5
  22. package/esm/components/tab/index.css +12 -9
  23. package/esm/components/tab/index.js +0 -5
  24. package/esm/consts.d.ts +9 -0
  25. package/esm/consts.js +10 -0
  26. package/esm/index.css +12 -10
  27. package/esm/index.js +0 -7
  28. package/esm/shared/index.d.ts +1 -0
  29. package/esm/shared/index.js +1 -0
  30. package/esm/types.d.ts +11 -3
  31. package/esm/utils.d.ts +5 -0
  32. package/esm/utils.js +10 -0
  33. package/index.css +12 -10
  34. package/index.js +0 -7
  35. package/modern/Component.js +7 -5
  36. package/modern/components/tab/Component.js +9 -5
  37. package/modern/components/tab/index.css +12 -9
  38. package/modern/components/tab/index.js +0 -4
  39. package/modern/consts.d.ts +9 -0
  40. package/modern/consts.js +10 -0
  41. package/modern/index.css +12 -10
  42. package/modern/index.js +0 -6
  43. package/modern/shared/index.d.ts +1 -0
  44. package/modern/shared/index.js +1 -0
  45. package/modern/types.d.ts +11 -3
  46. package/modern/utils.d.ts +5 -0
  47. package/modern/utils.js +10 -0
  48. package/package.json +4 -4
  49. package/shared/index.d.ts +1 -0
  50. package/shared/index.js +9 -0
  51. package/shared/package.json +3 -0
  52. package/src/Component.tsx +7 -1
  53. package/src/components/tab/Component.tsx +14 -3
  54. package/src/components/tab/index.module.css +6 -2
  55. package/src/consts.ts +9 -0
  56. package/src/index.module.css +9 -6
  57. package/src/shared/index.ts +1 -0
  58. package/src/shared/package.json +3 -0
  59. package/src/types.ts +17 -4
  60. package/src/utils.ts +8 -0
  61. package/types.d.ts +11 -3
  62. package/utils.d.ts +5 -0
  63. package/utils.js +14 -0
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: ftaot */
2
- :root {
1
+ /* hash: 1gvx2 */
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_15pc1 {
20
+ } .tab-bar__component_1b06f {
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_15pc1 {
31
- box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
27
+ transition: box-shadow 0.2s ease
28
+ } .tab-bar__component_1b06f.tab-bar__modal-bg-primary_1b06f {
29
+ background-color: var(--color-light-base-bg-primary);
30
+ } .tab-bar__component_1b06f.tab-bar__modal-bg-alt-primary_1b06f {
31
+ background-color: var(--color-light-base-bg-alt-primary);
32
+ } .tab-bar__border_1b06f {
33
+ box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
32
34
  }
package/esm/index.js CHANGED
@@ -1,8 +1 @@
1
1
  export { TabBar } from './Component.js';
2
- import 'tslib';
3
- import 'react';
4
- import 'classnames';
5
- import '@alfalab/core-components-shared/esm';
6
- import './components/tab/Component.js';
7
- import '@alfalab/core-components-badge/esm';
8
- import '@alfalab/core-components-typography/esm';
package/esm/shared/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { getTabBarTestIds } from "../utils";
package/esm/shared/index.js ADDED
@@ -0,0 +1 @@
1
+ export { getTabBarTestIds } from '../utils.js';
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/esm/utils.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ declare function getTabBarTestIds(dataTestId: string): {
2
+ tabBar: string;
3
+ tab: string;
4
+ };
5
+ export { getTabBarTestIds };
package/esm/utils.js ADDED
@@ -0,0 +1,10 @@
1
+ import { getDataTestId } from '@alfalab/core-components-shared/esm';
2
+
3
+ function getTabBarTestIds(dataTestId) {
4
+ return {
5
+ tabBar: dataTestId,
6
+ tab: getDataTestId(dataTestId, 'tab'),
7
+ };
8
+ }
9
+
10
+ export { getTabBarTestIds };
package/index.css CHANGED
@@ -1,8 +1,9 @@
1
- /* hash: ftaot */
2
- :root {
1
+ /* hash: 1gvx2 */
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_15pc1 {
20
+ } .tab-bar__component_1b06f {
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_15pc1 {
31
- box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
27
+ transition: box-shadow 0.2s ease
28
+ } .tab-bar__component_1b06f.tab-bar__modal-bg-primary_1b06f {
29
+ background-color: var(--color-light-base-bg-primary);
30
+ } .tab-bar__component_1b06f.tab-bar__modal-bg-alt-primary_1b06f {
31
+ background-color: var(--color-light-base-bg-alt-primary);
32
+ } .tab-bar__border_1b06f {
33
+ box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
32
34
  }
package/index.js CHANGED
@@ -3,13 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var Component = require('./Component.js');
6
- require('tslib');
7
- require('react');
8
- require('classnames');
9
- require('@alfalab/core-components-shared');
10
- require('./components/tab/Component.js');
11
- require('@alfalab/core-components-badge');
12
- require('@alfalab/core-components-typography');
13
6
 
14
7
 
15
8
 
package/modern/Component.js CHANGED
@@ -2,18 +2,20 @@ import React, { forwardRef, Children, cloneElement } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { getDataTestId } from '@alfalab/core-components-shared/modern';
4
4
  import { Tab } from './components/tab/Component.js';
5
- import '@alfalab/core-components-badge/modern';
6
- import '@alfalab/core-components-typography/modern';
7
5
 
8
- const styles = {"component":"tab-bar__component_15pc1","border":"tab-bar__border_15pc1"};
6
+ const styles = {"component":"tab-bar__component_1b06f","modal-bg-primary":"tab-bar__modal-bg-primary_1b06f","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_1b06f","border":"tab-bar__border_1b06f"};
9
7
  require('./index.css')
10
8
 
11
- 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) => {
12
10
  if (Children.count(children) > 5) {
13
11
  // eslint-disable-next-line no-console
14
12
  console.error('Компонент TabBar не может содержать больше 5 табов');
15
13
  }
16
- 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,
17
19
  selected: tab.props.id === selectedId,
18
20
  onChange,
19
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_1js6c","selected":"tab-bar__selected_1js6c","icon":"tab-bar__icon_1js6c","label":"tab-bar__label_1js6c","labelSelected":"tab-bar__labelSelected_1js6c","indicator":"tab-bar__indicator_1js6c"};
7
+ const styles = {"component":"tab-bar__component_m43fu","primary":"tab-bar__primary_m43fu","secondary":"tab-bar__secondary_m43fu","icon":"tab-bar__icon_m43fu","label":"tab-bar__label_m43fu","labelSelected":"tab-bar__labelSelected_m43fu","indicator":"tab-bar__indicator_m43fu"};
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: okzse */
2
- :root {
1
+ /* hash: y33p9 */
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_1js6c {
23
+ } .tab-bar__component_m43fu {
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_1js6c {
47
+ } .tab-bar__primary_m43fu {
47
48
  color: var(--color-light-accent-primary);
48
- } .tab-bar__icon_1js6c {
49
+ } .tab-bar__secondary_m43fu {
50
+ color: var(--color-light-accent-secondary);
51
+ } .tab-bar__icon_m43fu {
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_1js6c {
57
+ } .tab-bar__label_m43fu {
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_1js6c {
66
+ } .tab-bar__labelSelected_m43fu {
64
67
  color: inherit;
65
- } .tab-bar__indicator_1js6c {
68
+ } .tab-bar__indicator_m43fu {
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/components/tab/index.js CHANGED
@@ -1,5 +1 @@
1
1
  export { Tab } from './Component.js';
2
- import 'react';
3
- import 'classnames';
4
- import '@alfalab/core-components-badge/modern';
5
- import '@alfalab/core-components-typography/modern';
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: ftaot */
2
- :root {
1
+ /* hash: 1gvx2 */
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_15pc1 {
20
+ } .tab-bar__component_1b06f {
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_15pc1 {
31
- box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
27
+ transition: box-shadow 0.2s ease
28
+ } .tab-bar__component_1b06f.tab-bar__modal-bg-primary_1b06f {
29
+ background-color: var(--color-light-base-bg-primary);
30
+ } .tab-bar__component_1b06f.tab-bar__modal-bg-alt-primary_1b06f {
31
+ background-color: var(--color-light-base-bg-alt-primary);
32
+ } .tab-bar__border_1b06f {
33
+ box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
32
34
  }
package/modern/index.js CHANGED
@@ -1,7 +1 @@
1
1
  export { TabBar } from './Component.js';
2
- import 'react';
3
- import 'classnames';
4
- import '@alfalab/core-components-shared/modern';
5
- import './components/tab/Component.js';
6
- import '@alfalab/core-components-badge/modern';
7
- import '@alfalab/core-components-typography/modern';
package/modern/shared/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { getTabBarTestIds } from "../utils";
package/modern/shared/index.js ADDED
@@ -0,0 +1 @@
1
+ export { getTabBarTestIds } from '../utils.js';
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/modern/utils.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ declare function getTabBarTestIds(dataTestId: string): {
2
+ tabBar: string;
3
+ tab: string;
4
+ };
5
+ export { getTabBarTestIds };
package/modern/utils.js ADDED
@@ -0,0 +1,10 @@
1
+ import { getDataTestId } from '@alfalab/core-components-shared/modern';
2
+
3
+ function getTabBarTestIds(dataTestId) {
4
+ return {
5
+ tabBar: dataTestId,
6
+ tab: getDataTestId(dataTestId, 'tab'),
7
+ };
8
+ }
9
+
10
+ export { getTabBarTestIds };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-tab-bar",
3
- "version": "1.0.3",
3
+ "version": "2.0.0",
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.4.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.0",
20
+ "@alfalab/core-components-shared": "^0.10.0",
21
21
  "classnames": "^2.3.1",
22
22
  "tslib": "^2.4.0"
23
23
  }
package/shared/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { getTabBarTestIds } from "../utils";
package/shared/index.js ADDED
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var utils = require('../utils.js');
6
+
7
+
8
+
9
+ exports.getTabBarTestIds = utils.getTabBarTestIds;
package/shared/package.json ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "module": "../esm/shared/index.js"
3
+ }
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
+ };