@alfalab/core-components-navigation-bar 1.0.2 → 1.0.4

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 (25) hide show
  1. package/Component.d.ts +4 -0
  2. package/Component.js +5 -3
  3. package/components/action-icon-addon/Component.js +1 -1
  4. package/components/action-icon-addon/index.css +7 -7
  5. package/components/action-text-addon/Component.js +1 -1
  6. package/components/action-text-addon/index.css +3 -3
  7. package/cssm/Component.d.ts +4 -0
  8. package/cssm/Component.js +4 -2
  9. package/esm/Component.d.ts +4 -0
  10. package/esm/Component.js +5 -3
  11. package/esm/components/action-icon-addon/Component.js +1 -1
  12. package/esm/components/action-icon-addon/index.css +7 -7
  13. package/esm/components/action-text-addon/Component.js +1 -1
  14. package/esm/components/action-text-addon/index.css +3 -3
  15. package/esm/index.css +17 -17
  16. package/index.css +17 -17
  17. package/modern/Component.d.ts +4 -0
  18. package/modern/Component.js +5 -3
  19. package/modern/components/action-icon-addon/Component.js +1 -1
  20. package/modern/components/action-icon-addon/index.css +7 -7
  21. package/modern/components/action-text-addon/Component.js +1 -1
  22. package/modern/components/action-text-addon/index.css +3 -3
  23. package/modern/index.css +17 -17
  24. package/package.json +2 -2
  25. package/src/Component.tsx +9 -1
package/Component.d.ts CHANGED
@@ -45,6 +45,10 @@ interface NavigationBarProps {
45
45
  * Дополнительный класс для контента
46
46
  */
47
47
  contentClassName?: string;
48
+ /**
49
+ * Дополнительный класс для обертки контента
50
+ */
51
+ contentWrapperClassName?: string;
48
52
  /**
49
53
  * Дополнительный класс
50
54
  */
package/Component.js CHANGED
@@ -12,12 +12,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
13
13
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
14
14
 
15
- var styles = {"component":"navigation-bar__component_1k747","sticky":"navigation-bar__sticky_1k747","border":"navigation-bar__border_1k747","mainLine":"navigation-bar__mainLine_1k747","left":"navigation-bar__left_1k747","center":"navigation-bar__center_1k747","children":"navigation-bar__children_1k747","content":"navigation-bar__content_1k747","title":"navigation-bar__title_1k747","subtitle":"navigation-bar__subtitle_1k747","addons":"navigation-bar__addons_1k747","rightAddons":"navigation-bar__rightAddons_1k747"};
15
+ var styles = {"component":"navigation-bar__component_no3a1","sticky":"navigation-bar__sticky_no3a1","border":"navigation-bar__border_no3a1","mainLine":"navigation-bar__mainLine_no3a1","left":"navigation-bar__left_no3a1","center":"navigation-bar__center_no3a1","children":"navigation-bar__children_no3a1","content":"navigation-bar__content_no3a1","title":"navigation-bar__title_no3a1","subtitle":"navigation-bar__subtitle_no3a1","addons":"navigation-bar__addons_no3a1","rightAddons":"navigation-bar__rightAddons_no3a1"};
16
16
  require('./index.css')
17
17
 
18
18
  var NavigationBar = function (_a) {
19
19
  var _b, _c, _d;
20
- var _e = _a.align, align = _e === void 0 ? 'center' : _e, rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, bottomAddons = _a.bottomAddons, sticky = _a.sticky, border = _a.border, subtitle = _a.subtitle, title = _a.title, children = _a.children, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? 'var(--color-light-base-bg-primary)' : _f, className = _a.className, contentClassName = _a.contentClassName, rightAddonsClassName = _a.rightAddonsClassName, leftAddonsClassName = _a.leftAddonsClassName, bottomAddonsClassName = _a.bottomAddonsClassName, dataTestId = _a.dataTestId;
20
+ var _e = _a.align, align = _e === void 0 ? 'center' : _e, rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, bottomAddons = _a.bottomAddons, sticky = _a.sticky, border = _a.border, subtitle = _a.subtitle, title = _a.title, children = _a.children, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? 'var(--color-light-base-bg-primary)' : _f, contentWrapperClassName = _a.contentWrapperClassName, className = _a.className, contentClassName = _a.contentClassName, rightAddonsClassName = _a.rightAddonsClassName, leftAddonsClassName = _a.leftAddonsClassName, bottomAddonsClassName = _a.bottomAddonsClassName, dataTestId = _a.dataTestId;
21
21
  var _g = React.useState({ left: 0, right: 0 }), titleMargin = _g[0], setTitleMargin = _g[1];
22
22
  var leftAddonsRef = React.useRef(null);
23
23
  var rightAddonsRef = React.useRef(null);
@@ -45,7 +45,9 @@ var NavigationBar = function (_a) {
45
45
  React__default.default.createElement("div", { className: cn__default.default(styles.mainLine, styles[align], contentClassName) },
46
46
  hasLeftAddons && (React__default.default.createElement("div", { className: cn__default.default(styles.addons, leftAddonsClassName), ref: leftAddonsRef }, leftAddons)),
47
47
  children && React__default.default.createElement("div", { className: styles.children }, children),
48
- title && (React__default.default.createElement("div", { className: cn__default.default(styles.content, (_c = {}, _c[styles[align]] = !hasLeftAddons, _c)), style: tslib.__assign({}, (align === 'center'
48
+ title && (React__default.default.createElement("div", { className: cn__default.default(styles.content, contentWrapperClassName, (_c = {},
49
+ _c[styles[align]] = !hasLeftAddons,
50
+ _c)), style: tslib.__assign({}, (align === 'center'
49
51
  ? {
50
52
  marginLeft: titleMargin.left,
51
53
  marginRight: titleMargin.right,
package/components/action-icon-addon/Component.js CHANGED
@@ -14,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
14
14
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
15
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
16
16
 
17
- var styles = {"component":"navigation-bar__component_1ice7","iconWrapper":"navigation-bar__iconWrapper_1ice7","back":"navigation-bar__back_1ice7","floating":"navigation-bar__floating_1ice7"};
17
+ var styles = {"component":"navigation-bar__component_173s4","iconWrapper":"navigation-bar__iconWrapper_173s4","back":"navigation-bar__back_173s4","floating":"navigation-bar__floating_173s4"};
18
18
  require('./index.css')
19
19
 
20
20
  var iconComponents = {
package/components/action-icon-addon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: nals4 */
1
+ /* hash: 1g5k3 */
2
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-neutral-translucent-100: rgba(38, 55, 88, 0.06);
@@ -20,11 +20,11 @@
20
20
  } :root {
21
21
  } :root {
22
22
  } :root {
23
- } .navigation-bar__component_1ice7 {
23
+ } .navigation-bar__component_173s4 {
24
24
  height: 100%;
25
25
  border-radius: var(--border-radius-pill);
26
26
  min-width: 48px;
27
- } .navigation-bar__iconWrapper_1ice7 {
27
+ } .navigation-bar__iconWrapper_173s4 {
28
28
  display: inline-flex;
29
29
  align-items: center;
30
30
  justify-content: center;
@@ -33,12 +33,12 @@
33
33
  border-radius: var(--border-radius-circle);
34
34
  background: var(--color-light-neutral-translucent-100);
35
35
  vertical-align: middle
36
- } .navigation-bar__iconWrapper_1ice7.navigation-bar__back_1ice7 {
36
+ } .navigation-bar__iconWrapper_173s4.navigation-bar__back_173s4 {
37
37
  background: transparent;
38
- } .navigation-bar__floating_1ice7 path {
38
+ } .navigation-bar__floating_173s4 path {
39
39
  fill: var(--color-light-neutral-translucent-700);
40
- } .navigation-bar__floating_1ice7:hover path {
40
+ } .navigation-bar__floating_173s4:hover path {
41
41
  fill: var(--color-light-neutral-translucent-700-hover);
42
- } .navigation-bar__floating_1ice7:active path {
42
+ } .navigation-bar__floating_173s4:active path {
43
43
  fill: var(--color-light-neutral-translucent-700-press);
44
44
  }
package/components/action-text-addon/Component.js CHANGED
@@ -13,7 +13,7 @@ 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":"navigation-bar__component_12plo","text":"navigation-bar__text_12plo"};
16
+ var styles = {"component":"navigation-bar__component_1r3re","text":"navigation-bar__text_1r3re"};
17
17
  require('./index.css')
18
18
 
19
19
  var ActionTextAddon = function (_a) {
package/components/action-text-addon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: lo1xq */
1
+ /* hash: r35la */
2
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 { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :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 */
@@ -16,8 +16,8 @@
16
16
  --gap-m: 16px;
17
17
  } :root {
18
18
  } :root {
19
- } .navigation-bar__component_12plo {
19
+ } .navigation-bar__component_1r3re {
20
20
  height: 100%;
21
- } .navigation-bar__text_12plo {
21
+ } .navigation-bar__text_1r3re {
22
22
  padding: var(--gap-xs) var(--gap-m);
23
23
  }
package/cssm/Component.d.ts CHANGED
@@ -45,6 +45,10 @@ interface NavigationBarProps {
45
45
  * Дополнительный класс для контента
46
46
  */
47
47
  contentClassName?: string;
48
+ /**
49
+ * Дополнительный класс для обертки контента
50
+ */
51
+ contentWrapperClassName?: string;
48
52
  /**
49
53
  * Дополнительный класс
50
54
  */
package/cssm/Component.js CHANGED
@@ -16,7 +16,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
16
16
 
17
17
  var NavigationBar = function (_a) {
18
18
  var _b, _c, _d;
19
- var _e = _a.align, align = _e === void 0 ? 'center' : _e, rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, bottomAddons = _a.bottomAddons, sticky = _a.sticky, border = _a.border, subtitle = _a.subtitle, title = _a.title, children = _a.children, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? 'var(--color-light-base-bg-primary)' : _f, className = _a.className, contentClassName = _a.contentClassName, rightAddonsClassName = _a.rightAddonsClassName, leftAddonsClassName = _a.leftAddonsClassName, bottomAddonsClassName = _a.bottomAddonsClassName, dataTestId = _a.dataTestId;
19
+ var _e = _a.align, align = _e === void 0 ? 'center' : _e, rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, bottomAddons = _a.bottomAddons, sticky = _a.sticky, border = _a.border, subtitle = _a.subtitle, title = _a.title, children = _a.children, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? 'var(--color-light-base-bg-primary)' : _f, contentWrapperClassName = _a.contentWrapperClassName, className = _a.className, contentClassName = _a.contentClassName, rightAddonsClassName = _a.rightAddonsClassName, leftAddonsClassName = _a.leftAddonsClassName, bottomAddonsClassName = _a.bottomAddonsClassName, dataTestId = _a.dataTestId;
20
20
  var _g = React.useState({ left: 0, right: 0 }), titleMargin = _g[0], setTitleMargin = _g[1];
21
21
  var leftAddonsRef = React.useRef(null);
22
22
  var rightAddonsRef = React.useRef(null);
@@ -44,7 +44,9 @@ var NavigationBar = function (_a) {
44
44
  React__default.default.createElement("div", { className: cn__default.default(styles__default.default.mainLine, styles__default.default[align], contentClassName) },
45
45
  hasLeftAddons && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.addons, leftAddonsClassName), ref: leftAddonsRef }, leftAddons)),
46
46
  children && React__default.default.createElement("div", { className: styles__default.default.children }, children),
47
- title && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.content, (_c = {}, _c[styles__default.default[align]] = !hasLeftAddons, _c)), style: tslib.__assign({}, (align === 'center'
47
+ title && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.content, contentWrapperClassName, (_c = {},
48
+ _c[styles__default.default[align]] = !hasLeftAddons,
49
+ _c)), style: tslib.__assign({}, (align === 'center'
48
50
  ? {
49
51
  marginLeft: titleMargin.left,
50
52
  marginRight: titleMargin.right,
package/esm/Component.d.ts CHANGED
@@ -45,6 +45,10 @@ interface NavigationBarProps {
45
45
  * Дополнительный класс для контента
46
46
  */
47
47
  contentClassName?: string;
48
+ /**
49
+ * Дополнительный класс для обертки контента
50
+ */
51
+ contentWrapperClassName?: string;
48
52
  /**
49
53
  * Дополнительный класс
50
54
  */
package/esm/Component.js CHANGED
@@ -3,12 +3,12 @@ import React, { useState, useRef, useEffect } from 'react';
3
3
  import cn from 'classnames';
4
4
  import { getDataTestId } from '@alfalab/core-components-shared/esm';
5
5
 
6
- var styles = {"component":"navigation-bar__component_1k747","sticky":"navigation-bar__sticky_1k747","border":"navigation-bar__border_1k747","mainLine":"navigation-bar__mainLine_1k747","left":"navigation-bar__left_1k747","center":"navigation-bar__center_1k747","children":"navigation-bar__children_1k747","content":"navigation-bar__content_1k747","title":"navigation-bar__title_1k747","subtitle":"navigation-bar__subtitle_1k747","addons":"navigation-bar__addons_1k747","rightAddons":"navigation-bar__rightAddons_1k747"};
6
+ var styles = {"component":"navigation-bar__component_no3a1","sticky":"navigation-bar__sticky_no3a1","border":"navigation-bar__border_no3a1","mainLine":"navigation-bar__mainLine_no3a1","left":"navigation-bar__left_no3a1","center":"navigation-bar__center_no3a1","children":"navigation-bar__children_no3a1","content":"navigation-bar__content_no3a1","title":"navigation-bar__title_no3a1","subtitle":"navigation-bar__subtitle_no3a1","addons":"navigation-bar__addons_no3a1","rightAddons":"navigation-bar__rightAddons_no3a1"};
7
7
  require('./index.css')
8
8
 
9
9
  var NavigationBar = function (_a) {
10
10
  var _b, _c, _d;
11
- var _e = _a.align, align = _e === void 0 ? 'center' : _e, rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, bottomAddons = _a.bottomAddons, sticky = _a.sticky, border = _a.border, subtitle = _a.subtitle, title = _a.title, children = _a.children, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? 'var(--color-light-base-bg-primary)' : _f, className = _a.className, contentClassName = _a.contentClassName, rightAddonsClassName = _a.rightAddonsClassName, leftAddonsClassName = _a.leftAddonsClassName, bottomAddonsClassName = _a.bottomAddonsClassName, dataTestId = _a.dataTestId;
11
+ var _e = _a.align, align = _e === void 0 ? 'center' : _e, rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, bottomAddons = _a.bottomAddons, sticky = _a.sticky, border = _a.border, subtitle = _a.subtitle, title = _a.title, children = _a.children, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? 'var(--color-light-base-bg-primary)' : _f, contentWrapperClassName = _a.contentWrapperClassName, className = _a.className, contentClassName = _a.contentClassName, rightAddonsClassName = _a.rightAddonsClassName, leftAddonsClassName = _a.leftAddonsClassName, bottomAddonsClassName = _a.bottomAddonsClassName, dataTestId = _a.dataTestId;
12
12
  var _g = useState({ left: 0, right: 0 }), titleMargin = _g[0], setTitleMargin = _g[1];
13
13
  var leftAddonsRef = useRef(null);
14
14
  var rightAddonsRef = useRef(null);
@@ -36,7 +36,9 @@ var NavigationBar = function (_a) {
36
36
  React.createElement("div", { className: cn(styles.mainLine, styles[align], contentClassName) },
37
37
  hasLeftAddons && (React.createElement("div", { className: cn(styles.addons, leftAddonsClassName), ref: leftAddonsRef }, leftAddons)),
38
38
  children && React.createElement("div", { className: styles.children }, children),
39
- title && (React.createElement("div", { className: cn(styles.content, (_c = {}, _c[styles[align]] = !hasLeftAddons, _c)), style: __assign({}, (align === 'center'
39
+ title && (React.createElement("div", { className: cn(styles.content, contentWrapperClassName, (_c = {},
40
+ _c[styles[align]] = !hasLeftAddons,
41
+ _c)), style: __assign({}, (align === 'center'
40
42
  ? {
41
43
  marginLeft: titleMargin.left,
42
44
  marginRight: titleMargin.right,
package/esm/components/action-icon-addon/Component.js CHANGED
@@ -5,7 +5,7 @@ import { ButtonDesktop } from '@alfalab/core-components-button/esm/desktop';
5
5
  import { ChevronLeftMIcon } from '@alfalab/icons-glyph/ChevronLeftMIcon';
6
6
  import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
7
7
 
8
- var styles = {"component":"navigation-bar__component_1ice7","iconWrapper":"navigation-bar__iconWrapper_1ice7","back":"navigation-bar__back_1ice7","floating":"navigation-bar__floating_1ice7"};
8
+ var styles = {"component":"navigation-bar__component_173s4","iconWrapper":"navigation-bar__iconWrapper_173s4","back":"navigation-bar__back_173s4","floating":"navigation-bar__floating_173s4"};
9
9
  require('./index.css')
10
10
 
11
11
  var iconComponents = {
package/esm/components/action-icon-addon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: nals4 */
1
+ /* hash: 1g5k3 */
2
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-neutral-translucent-100: rgba(38, 55, 88, 0.06);
@@ -20,11 +20,11 @@
20
20
  } :root {
21
21
  } :root {
22
22
  } :root {
23
- } .navigation-bar__component_1ice7 {
23
+ } .navigation-bar__component_173s4 {
24
24
  height: 100%;
25
25
  border-radius: var(--border-radius-pill);
26
26
  min-width: 48px;
27
- } .navigation-bar__iconWrapper_1ice7 {
27
+ } .navigation-bar__iconWrapper_173s4 {
28
28
  display: inline-flex;
29
29
  align-items: center;
30
30
  justify-content: center;
@@ -33,12 +33,12 @@
33
33
  border-radius: var(--border-radius-circle);
34
34
  background: var(--color-light-neutral-translucent-100);
35
35
  vertical-align: middle
36
- } .navigation-bar__iconWrapper_1ice7.navigation-bar__back_1ice7 {
36
+ } .navigation-bar__iconWrapper_173s4.navigation-bar__back_173s4 {
37
37
  background: transparent;
38
- } .navigation-bar__floating_1ice7 path {
38
+ } .navigation-bar__floating_173s4 path {
39
39
  fill: var(--color-light-neutral-translucent-700);
40
- } .navigation-bar__floating_1ice7:hover path {
40
+ } .navigation-bar__floating_173s4:hover path {
41
41
  fill: var(--color-light-neutral-translucent-700-hover);
42
- } .navigation-bar__floating_1ice7:active path {
42
+ } .navigation-bar__floating_173s4:active path {
43
43
  fill: var(--color-light-neutral-translucent-700-press);
44
44
  }
package/esm/components/action-text-addon/Component.js CHANGED
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import { ButtonDesktop } from '@alfalab/core-components-button/esm/desktop';
5
5
  import { Typography } from '@alfalab/core-components-typography/esm';
6
6
 
7
- var styles = {"component":"navigation-bar__component_12plo","text":"navigation-bar__text_12plo"};
7
+ var styles = {"component":"navigation-bar__component_1r3re","text":"navigation-bar__text_1r3re"};
8
8
  require('./index.css')
9
9
 
10
10
  var ActionTextAddon = function (_a) {
package/esm/components/action-text-addon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: lo1xq */
1
+ /* hash: r35la */
2
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 { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :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 */
@@ -16,8 +16,8 @@
16
16
  --gap-m: 16px;
17
17
  } :root {
18
18
  } :root {
19
- } .navigation-bar__component_12plo {
19
+ } .navigation-bar__component_1r3re {
20
20
  height: 100%;
21
- } .navigation-bar__text_12plo {
21
+ } .navigation-bar__text_1r3re {
22
22
  padding: var(--gap-xs) var(--gap-m);
23
23
  }
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: qosxw */
1
+ /* hash: 1jjr9 */
2
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-neutral-300: #e7e8eb;
@@ -20,60 +20,60 @@
20
20
  --gap-m: 16px;
21
21
  } :root {
22
22
  } :root {
23
- } .navigation-bar__component_1k747 {
23
+ } .navigation-bar__component_no3a1 {
24
24
  padding: var(--gap-xs) var(--gap-2xs);
25
25
  box-sizing: border-box;
26
26
  width: 100%;
27
- } .navigation-bar__sticky_1k747 {
27
+ } .navigation-bar__sticky_no3a1 {
28
28
  position: sticky;
29
29
  top: 0;
30
30
  z-index: 1;
31
- } .navigation-bar__border_1k747 {
31
+ } .navigation-bar__border_no3a1 {
32
32
  box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
33
- } .navigation-bar__mainLine_1k747 {
33
+ } .navigation-bar__mainLine_no3a1 {
34
34
  display: flex;
35
35
  background-color: inherit;
36
36
  justify-content: space-between;
37
37
  min-height: 40px;
38
38
  align-items: stretch;
39
- } .navigation-bar__left_1k747 {
39
+ } .navigation-bar__left_no3a1 {
40
40
  text-align: left;
41
- } .navigation-bar__center_1k747 {
41
+ } .navigation-bar__center_no3a1 {
42
42
  text-align: center;
43
- } .navigation-bar__children_1k747 {
43
+ } .navigation-bar__children_no3a1 {
44
44
  width: 100%;
45
- } .navigation-bar__content_1k747 {
45
+ } .navigation-bar__content_no3a1 {
46
46
  display: flex;
47
47
  flex-grow: 1;
48
48
  justify-content: center;
49
49
  flex-flow: column nowrap;
50
50
  color: var(--color-light-text-primary)
51
- } .navigation-bar__content_1k747.navigation-bar__left_1k747 {
51
+ } .navigation-bar__content_no3a1.navigation-bar__left_no3a1 {
52
52
  padding: 0 var(--gap-m);
53
- } .navigation-bar__content_1k747 > .navigation-bar__title_1k747,
54
- .navigation-bar__content_1k747 > .navigation-bar__subtitle_1k747 {
53
+ } .navigation-bar__content_no3a1 > .navigation-bar__title_no3a1,
54
+ .navigation-bar__content_no3a1 > .navigation-bar__subtitle_no3a1 {
55
55
  -webkit-line-clamp: 1;
56
56
  display: -webkit-box;
57
57
  -webkit-box-orient: vertical;
58
58
  overflow: hidden;
59
59
  word-break: break-all;
60
- } .navigation-bar__title_1k747 {
60
+ } .navigation-bar__title_no3a1 {
61
61
  font-size: 16px;
62
62
  line-height: 20px;
63
63
  font-weight: 500
64
- } .navigation-bar__title_1k747.navigation-bar__left_1k747 {
64
+ } .navigation-bar__title_no3a1.navigation-bar__left_no3a1 {
65
65
  font-size: 20px;
66
66
  line-height: 28px;
67
67
  font-weight: 600;
68
- } .navigation-bar__subtitle_1k747 {
68
+ } .navigation-bar__subtitle_no3a1 {
69
69
  font-size: 14px;
70
70
  line-height: 20px;
71
71
  font-weight: 400;
72
72
  color: var(--color-light-text-secondary);
73
- } .navigation-bar__addons_1k747 {
73
+ } .navigation-bar__addons_no3a1 {
74
74
  min-width: 48px;
75
75
  display: flex;
76
76
  justify-content: center;
77
- } .navigation-bar__rightAddons_1k747 {
77
+ } .navigation-bar__rightAddons_no3a1 {
78
78
  margin-left: auto;
79
79
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: qosxw */
1
+ /* hash: 1jjr9 */
2
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-neutral-300: #e7e8eb;
@@ -20,60 +20,60 @@
20
20
  --gap-m: 16px;
21
21
  } :root {
22
22
  } :root {
23
- } .navigation-bar__component_1k747 {
23
+ } .navigation-bar__component_no3a1 {
24
24
  padding: var(--gap-xs) var(--gap-2xs);
25
25
  box-sizing: border-box;
26
26
  width: 100%;
27
- } .navigation-bar__sticky_1k747 {
27
+ } .navigation-bar__sticky_no3a1 {
28
28
  position: sticky;
29
29
  top: 0;
30
30
  z-index: 1;
31
- } .navigation-bar__border_1k747 {
31
+ } .navigation-bar__border_no3a1 {
32
32
  box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
33
- } .navigation-bar__mainLine_1k747 {
33
+ } .navigation-bar__mainLine_no3a1 {
34
34
  display: flex;
35
35
  background-color: inherit;
36
36
  justify-content: space-between;
37
37
  min-height: 40px;
38
38
  align-items: stretch;
39
- } .navigation-bar__left_1k747 {
39
+ } .navigation-bar__left_no3a1 {
40
40
  text-align: left;
41
- } .navigation-bar__center_1k747 {
41
+ } .navigation-bar__center_no3a1 {
42
42
  text-align: center;
43
- } .navigation-bar__children_1k747 {
43
+ } .navigation-bar__children_no3a1 {
44
44
  width: 100%;
45
- } .navigation-bar__content_1k747 {
45
+ } .navigation-bar__content_no3a1 {
46
46
  display: flex;
47
47
  flex-grow: 1;
48
48
  justify-content: center;
49
49
  flex-flow: column nowrap;
50
50
  color: var(--color-light-text-primary)
51
- } .navigation-bar__content_1k747.navigation-bar__left_1k747 {
51
+ } .navigation-bar__content_no3a1.navigation-bar__left_no3a1 {
52
52
  padding: 0 var(--gap-m);
53
- } .navigation-bar__content_1k747 > .navigation-bar__title_1k747,
54
- .navigation-bar__content_1k747 > .navigation-bar__subtitle_1k747 {
53
+ } .navigation-bar__content_no3a1 > .navigation-bar__title_no3a1,
54
+ .navigation-bar__content_no3a1 > .navigation-bar__subtitle_no3a1 {
55
55
  -webkit-line-clamp: 1;
56
56
  display: -webkit-box;
57
57
  -webkit-box-orient: vertical;
58
58
  overflow: hidden;
59
59
  word-break: break-all;
60
- } .navigation-bar__title_1k747 {
60
+ } .navigation-bar__title_no3a1 {
61
61
  font-size: 16px;
62
62
  line-height: 20px;
63
63
  font-weight: 500
64
- } .navigation-bar__title_1k747.navigation-bar__left_1k747 {
64
+ } .navigation-bar__title_no3a1.navigation-bar__left_no3a1 {
65
65
  font-size: 20px;
66
66
  line-height: 28px;
67
67
  font-weight: 600;
68
- } .navigation-bar__subtitle_1k747 {
68
+ } .navigation-bar__subtitle_no3a1 {
69
69
  font-size: 14px;
70
70
  line-height: 20px;
71
71
  font-weight: 400;
72
72
  color: var(--color-light-text-secondary);
73
- } .navigation-bar__addons_1k747 {
73
+ } .navigation-bar__addons_no3a1 {
74
74
  min-width: 48px;
75
75
  display: flex;
76
76
  justify-content: center;
77
- } .navigation-bar__rightAddons_1k747 {
77
+ } .navigation-bar__rightAddons_no3a1 {
78
78
  margin-left: auto;
79
79
  }
package/modern/Component.d.ts CHANGED
@@ -45,6 +45,10 @@ interface NavigationBarProps {
45
45
  * Дополнительный класс для контента
46
46
  */
47
47
  contentClassName?: string;
48
+ /**
49
+ * Дополнительный класс для обертки контента
50
+ */
51
+ contentWrapperClassName?: string;
48
52
  /**
49
53
  * Дополнительный класс
50
54
  */
package/modern/Component.js CHANGED
@@ -2,10 +2,10 @@ import React, { useState, useRef, useEffect } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { getDataTestId } from '@alfalab/core-components-shared/modern';
4
4
 
5
- const styles = {"component":"navigation-bar__component_1k747","sticky":"navigation-bar__sticky_1k747","border":"navigation-bar__border_1k747","mainLine":"navigation-bar__mainLine_1k747","left":"navigation-bar__left_1k747","center":"navigation-bar__center_1k747","children":"navigation-bar__children_1k747","content":"navigation-bar__content_1k747","title":"navigation-bar__title_1k747","subtitle":"navigation-bar__subtitle_1k747","addons":"navigation-bar__addons_1k747","rightAddons":"navigation-bar__rightAddons_1k747"};
5
+ const styles = {"component":"navigation-bar__component_no3a1","sticky":"navigation-bar__sticky_no3a1","border":"navigation-bar__border_no3a1","mainLine":"navigation-bar__mainLine_no3a1","left":"navigation-bar__left_no3a1","center":"navigation-bar__center_no3a1","children":"navigation-bar__children_no3a1","content":"navigation-bar__content_no3a1","title":"navigation-bar__title_no3a1","subtitle":"navigation-bar__subtitle_no3a1","addons":"navigation-bar__addons_no3a1","rightAddons":"navigation-bar__rightAddons_no3a1"};
6
6
  require('./index.css')
7
7
 
8
- const NavigationBar = ({ align = 'center', rightAddons, leftAddons, bottomAddons, sticky, border, subtitle, title, children, backgroundColor = 'var(--color-light-base-bg-primary)', className, contentClassName, rightAddonsClassName, leftAddonsClassName, bottomAddonsClassName, dataTestId, }) => {
8
+ const NavigationBar = ({ align = 'center', rightAddons, leftAddons, bottomAddons, sticky, border, subtitle, title, children, backgroundColor = 'var(--color-light-base-bg-primary)', contentWrapperClassName, className, contentClassName, rightAddonsClassName, leftAddonsClassName, bottomAddonsClassName, dataTestId, }) => {
9
9
  const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });
10
10
  const leftAddonsRef = useRef(null);
11
11
  const rightAddonsRef = useRef(null);
@@ -34,7 +34,9 @@ const NavigationBar = ({ align = 'center', rightAddons, leftAddons, bottomAddons
34
34
  React.createElement("div", { className: cn(styles.mainLine, styles[align], contentClassName) },
35
35
  hasLeftAddons && (React.createElement("div", { className: cn(styles.addons, leftAddonsClassName), ref: leftAddonsRef }, leftAddons)),
36
36
  children && React.createElement("div", { className: styles.children }, children),
37
- title && (React.createElement("div", { className: cn(styles.content, { [styles[align]]: !hasLeftAddons }), style: {
37
+ title && (React.createElement("div", { className: cn(styles.content, contentWrapperClassName, {
38
+ [styles[align]]: !hasLeftAddons,
39
+ }), style: {
38
40
  ...(align === 'center'
39
41
  ? {
40
42
  marginLeft: titleMargin.left,
package/modern/components/action-icon-addon/Component.js CHANGED
@@ -4,7 +4,7 @@ import { ButtonDesktop } from '@alfalab/core-components-button/modern/desktop';
4
4
  import { ChevronLeftMIcon } from '@alfalab/icons-glyph/ChevronLeftMIcon';
5
5
  import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
6
6
 
7
- const styles = {"component":"navigation-bar__component_1ice7","iconWrapper":"navigation-bar__iconWrapper_1ice7","back":"navigation-bar__back_1ice7","floating":"navigation-bar__floating_1ice7"};
7
+ const styles = {"component":"navigation-bar__component_173s4","iconWrapper":"navigation-bar__iconWrapper_173s4","back":"navigation-bar__back_173s4","floating":"navigation-bar__floating_173s4"};
8
8
  require('./index.css')
9
9
 
10
10
  const iconComponents = {
package/modern/components/action-icon-addon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: nals4 */
1
+ /* hash: 1g5k3 */
2
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-neutral-translucent-100: rgba(38, 55, 88, 0.06);
@@ -20,11 +20,11 @@
20
20
  } :root {
21
21
  } :root {
22
22
  } :root {
23
- } .navigation-bar__component_1ice7 {
23
+ } .navigation-bar__component_173s4 {
24
24
  height: 100%;
25
25
  border-radius: var(--border-radius-pill);
26
26
  min-width: 48px;
27
- } .navigation-bar__iconWrapper_1ice7 {
27
+ } .navigation-bar__iconWrapper_173s4 {
28
28
  display: inline-flex;
29
29
  align-items: center;
30
30
  justify-content: center;
@@ -33,12 +33,12 @@
33
33
  border-radius: var(--border-radius-circle);
34
34
  background: var(--color-light-neutral-translucent-100);
35
35
  vertical-align: middle
36
- } .navigation-bar__iconWrapper_1ice7.navigation-bar__back_1ice7 {
36
+ } .navigation-bar__iconWrapper_173s4.navigation-bar__back_173s4 {
37
37
  background: transparent;
38
- } .navigation-bar__floating_1ice7 path {
38
+ } .navigation-bar__floating_173s4 path {
39
39
  fill: var(--color-light-neutral-translucent-700);
40
- } .navigation-bar__floating_1ice7:hover path {
40
+ } .navigation-bar__floating_173s4:hover path {
41
41
  fill: var(--color-light-neutral-translucent-700-hover);
42
- } .navigation-bar__floating_1ice7:active path {
42
+ } .navigation-bar__floating_173s4:active path {
43
43
  fill: var(--color-light-neutral-translucent-700-press);
44
44
  }
package/modern/components/action-text-addon/Component.js CHANGED
@@ -3,7 +3,7 @@ import cn from 'classnames';
3
3
  import { ButtonDesktop } from '@alfalab/core-components-button/modern/desktop';
4
4
  import { Typography } from '@alfalab/core-components-typography/modern';
5
5
 
6
- const styles = {"component":"navigation-bar__component_12plo","text":"navigation-bar__text_12plo"};
6
+ const styles = {"component":"navigation-bar__component_1r3re","text":"navigation-bar__text_1r3re"};
7
7
  require('./index.css')
8
8
 
9
9
  const ActionTextAddon = ({ text = 'Назад', onClick, className, action, dataTestId, ...htmlAttributes }) => (React.createElement(ButtonDesktop, { view: 'text', size: 's', onClick: onClick, "aria-label": text, className: cn(styles.component, className), dataTestId: dataTestId, ...htmlAttributes },
package/modern/components/action-text-addon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: lo1xq */
1
+ /* hash: r35la */
2
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 { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :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 */
@@ -16,8 +16,8 @@
16
16
  --gap-m: 16px;
17
17
  } :root {
18
18
  } :root {
19
- } .navigation-bar__component_12plo {
19
+ } .navigation-bar__component_1r3re {
20
20
  height: 100%;
21
- } .navigation-bar__text_12plo {
21
+ } .navigation-bar__text_1r3re {
22
22
  padding: var(--gap-xs) var(--gap-m);
23
23
  }
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: qosxw */
1
+ /* hash: 1jjr9 */
2
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-neutral-300: #e7e8eb;
@@ -20,60 +20,60 @@
20
20
  --gap-m: 16px;
21
21
  } :root {
22
22
  } :root {
23
- } .navigation-bar__component_1k747 {
23
+ } .navigation-bar__component_no3a1 {
24
24
  padding: var(--gap-xs) var(--gap-2xs);
25
25
  box-sizing: border-box;
26
26
  width: 100%;
27
- } .navigation-bar__sticky_1k747 {
27
+ } .navigation-bar__sticky_no3a1 {
28
28
  position: sticky;
29
29
  top: 0;
30
30
  z-index: 1;
31
- } .navigation-bar__border_1k747 {
31
+ } .navigation-bar__border_no3a1 {
32
32
  box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
33
- } .navigation-bar__mainLine_1k747 {
33
+ } .navigation-bar__mainLine_no3a1 {
34
34
  display: flex;
35
35
  background-color: inherit;
36
36
  justify-content: space-between;
37
37
  min-height: 40px;
38
38
  align-items: stretch;
39
- } .navigation-bar__left_1k747 {
39
+ } .navigation-bar__left_no3a1 {
40
40
  text-align: left;
41
- } .navigation-bar__center_1k747 {
41
+ } .navigation-bar__center_no3a1 {
42
42
  text-align: center;
43
- } .navigation-bar__children_1k747 {
43
+ } .navigation-bar__children_no3a1 {
44
44
  width: 100%;
45
- } .navigation-bar__content_1k747 {
45
+ } .navigation-bar__content_no3a1 {
46
46
  display: flex;
47
47
  flex-grow: 1;
48
48
  justify-content: center;
49
49
  flex-flow: column nowrap;
50
50
  color: var(--color-light-text-primary)
51
- } .navigation-bar__content_1k747.navigation-bar__left_1k747 {
51
+ } .navigation-bar__content_no3a1.navigation-bar__left_no3a1 {
52
52
  padding: 0 var(--gap-m);
53
- } .navigation-bar__content_1k747 > .navigation-bar__title_1k747,
54
- .navigation-bar__content_1k747 > .navigation-bar__subtitle_1k747 {
53
+ } .navigation-bar__content_no3a1 > .navigation-bar__title_no3a1,
54
+ .navigation-bar__content_no3a1 > .navigation-bar__subtitle_no3a1 {
55
55
  -webkit-line-clamp: 1;
56
56
  display: -webkit-box;
57
57
  -webkit-box-orient: vertical;
58
58
  overflow: hidden;
59
59
  word-break: break-all;
60
- } .navigation-bar__title_1k747 {
60
+ } .navigation-bar__title_no3a1 {
61
61
  font-size: 16px;
62
62
  line-height: 20px;
63
63
  font-weight: 500
64
- } .navigation-bar__title_1k747.navigation-bar__left_1k747 {
64
+ } .navigation-bar__title_no3a1.navigation-bar__left_no3a1 {
65
65
  font-size: 20px;
66
66
  line-height: 28px;
67
67
  font-weight: 600;
68
- } .navigation-bar__subtitle_1k747 {
68
+ } .navigation-bar__subtitle_no3a1 {
69
69
  font-size: 14px;
70
70
  line-height: 20px;
71
71
  font-weight: 400;
72
72
  color: var(--color-light-text-secondary);
73
- } .navigation-bar__addons_1k747 {
73
+ } .navigation-bar__addons_no3a1 {
74
74
  min-width: 48px;
75
75
  display: flex;
76
76
  justify-content: center;
77
- } .navigation-bar__rightAddons_1k747 {
77
+ } .navigation-bar__rightAddons_no3a1 {
78
78
  margin-left: auto;
79
79
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-navigation-bar",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "NavigationBar",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,7 +14,7 @@
14
14
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
15
15
  },
16
16
  "dependencies": {
17
- "@alfalab/core-components-button": "^11.4.4",
17
+ "@alfalab/core-components-button": "^11.4.5",
18
18
  "@alfalab/core-components-typography": "^4.5.1",
19
19
  "@alfalab/core-components-shared": "^0.10.0",
20
20
  "@alfalab/icons-glyph": "^2.139.0",
package/src/Component.tsx CHANGED
@@ -62,6 +62,11 @@ export interface NavigationBarProps {
62
62
  */
63
63
  contentClassName?: string;
64
64
 
65
+ /**
66
+ * Дополнительный класс для обертки контента
67
+ */
68
+ contentWrapperClassName?: string;
69
+
65
70
  /**
66
71
  * Дополнительный класс
67
72
  */
@@ -99,6 +104,7 @@ export const NavigationBar: FC<NavigationBarProps> = ({
99
104
  title,
100
105
  children,
101
106
  backgroundColor = 'var(--color-light-base-bg-primary)',
107
+ contentWrapperClassName,
102
108
  className,
103
109
  contentClassName,
104
110
  rightAddonsClassName,
@@ -157,7 +163,9 @@ export const NavigationBar: FC<NavigationBarProps> = ({
157
163
 
158
164
  {title && (
159
165
  <div
160
- className={cn(styles.content, { [styles[align]]: !hasLeftAddons })}
166
+ className={cn(styles.content, contentWrapperClassName, {
167
+ [styles[align]]: !hasLeftAddons,
168
+ })}
161
169
  style={{
162
170
  ...(align === 'center'
163
171
  ? {