@salutejs/plasma-new-hope 0.239.0-canary.1696.12711678920.0 → 0.239.0-canary.1699.12742131493.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 (136) hide show
  1. package/cjs/components/Avatar/Avatar.js +3 -39
  2. package/cjs/components/Avatar/Avatar.js.map +1 -1
  3. package/cjs/components/Avatar/Avatar.styles.js +1 -32
  4. package/cjs/components/Avatar/Avatar.styles.js.map +1 -1
  5. package/cjs/components/Avatar/Avatar.styles_1gd252x.css +5 -0
  6. package/cjs/components/Avatar/Avatar.tokens.js +2 -41
  7. package/cjs/components/Avatar/Avatar.tokens.js.map +1 -1
  8. package/cjs/components/NumberInput/NumberInput.js +9 -3
  9. package/cjs/components/NumberInput/NumberInput.js.map +1 -1
  10. package/cjs/components/NumberInput/ui/Input/Input.js +12 -6
  11. package/cjs/components/NumberInput/ui/Input/Input.js.map +1 -1
  12. package/cjs/components/NumberInput/utils/index.js +8 -0
  13. package/cjs/components/NumberInput/utils/index.js.map +1 -1
  14. package/cjs/index.css +5 -8
  15. package/emotion/cjs/components/Avatar/Avatar.js +4 -39
  16. package/emotion/cjs/components/Avatar/Avatar.styles.js +10 -29
  17. package/emotion/cjs/components/Avatar/Avatar.template-doc.mdx +0 -54
  18. package/emotion/cjs/components/Avatar/Avatar.tokens.js +2 -41
  19. package/emotion/cjs/components/Avatar/utils/index.js +1 -15
  20. package/emotion/cjs/components/NumberInput/NumberInput.js +9 -3
  21. package/emotion/cjs/components/NumberInput/ui/Input/Input.js +12 -6
  22. package/emotion/cjs/components/NumberInput/utils/index.js +9 -2
  23. package/emotion/cjs/examples/plasma_b2c/components/Avatar/Avatar.config.js +7 -25
  24. package/emotion/cjs/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +1 -134
  25. package/emotion/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +1 -0
  26. package/emotion/cjs/examples/plasma_web/components/Avatar/Avatar.config.js +7 -25
  27. package/emotion/cjs/examples/plasma_web/components/Avatar/Avatar.stories.tsx +1 -134
  28. package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +1 -0
  29. package/emotion/es/components/Avatar/Avatar.js +6 -41
  30. package/emotion/es/components/Avatar/Avatar.styles.js +10 -29
  31. package/emotion/es/components/Avatar/Avatar.template-doc.mdx +0 -54
  32. package/emotion/es/components/Avatar/Avatar.tokens.js +2 -41
  33. package/emotion/es/components/Avatar/utils/index.js +1 -14
  34. package/emotion/es/components/NumberInput/NumberInput.js +9 -3
  35. package/emotion/es/components/NumberInput/ui/Input/Input.js +13 -7
  36. package/emotion/es/components/NumberInput/utils/index.js +8 -1
  37. package/emotion/es/examples/plasma_b2c/components/Avatar/Avatar.config.js +7 -25
  38. package/emotion/es/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +1 -134
  39. package/emotion/es/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +1 -0
  40. package/emotion/es/examples/plasma_web/components/Avatar/Avatar.config.js +7 -25
  41. package/emotion/es/examples/plasma_web/components/Avatar/Avatar.stories.tsx +1 -134
  42. package/emotion/es/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +1 -0
  43. package/es/components/Avatar/Avatar.js +4 -40
  44. package/es/components/Avatar/Avatar.js.map +1 -1
  45. package/es/components/Avatar/Avatar.styles.js +2 -30
  46. package/es/components/Avatar/Avatar.styles.js.map +1 -1
  47. package/es/components/Avatar/Avatar.styles_1gd252x.css +5 -0
  48. package/es/components/Avatar/Avatar.tokens.js +2 -41
  49. package/es/components/Avatar/Avatar.tokens.js.map +1 -1
  50. package/es/components/NumberInput/NumberInput.js +9 -3
  51. package/es/components/NumberInput/NumberInput.js.map +1 -1
  52. package/es/components/NumberInput/ui/Input/Input.js +13 -7
  53. package/es/components/NumberInput/ui/Input/Input.js.map +1 -1
  54. package/es/components/NumberInput/utils/index.js +8 -1
  55. package/es/components/NumberInput/utils/index.js.map +1 -1
  56. package/es/index.css +5 -8
  57. package/package.json +2 -2
  58. package/styled-components/cjs/components/Avatar/Avatar.js +3 -38
  59. package/styled-components/cjs/components/Avatar/Avatar.styles.js +2 -18
  60. package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +0 -54
  61. package/styled-components/cjs/components/Avatar/Avatar.tokens.js +2 -41
  62. package/styled-components/cjs/components/Avatar/utils/index.js +1 -15
  63. package/styled-components/cjs/components/NumberInput/NumberInput.js +9 -3
  64. package/styled-components/cjs/components/NumberInput/ui/Input/Input.js +12 -6
  65. package/styled-components/cjs/components/NumberInput/utils/index.js +9 -2
  66. package/styled-components/cjs/examples/plasma_b2c/components/Avatar/Avatar.config.js +4 -22
  67. package/styled-components/cjs/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +1 -134
  68. package/styled-components/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +1 -0
  69. package/styled-components/cjs/examples/plasma_web/components/Avatar/Avatar.config.js +4 -22
  70. package/styled-components/cjs/examples/plasma_web/components/Avatar/Avatar.stories.tsx +1 -134
  71. package/styled-components/cjs/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +1 -0
  72. package/styled-components/es/components/Avatar/Avatar.js +5 -40
  73. package/styled-components/es/components/Avatar/Avatar.styles.js +2 -18
  74. package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +0 -54
  75. package/styled-components/es/components/Avatar/Avatar.tokens.js +2 -41
  76. package/styled-components/es/components/Avatar/utils/index.js +1 -14
  77. package/styled-components/es/components/NumberInput/NumberInput.js +9 -3
  78. package/styled-components/es/components/NumberInput/ui/Input/Input.js +13 -7
  79. package/styled-components/es/components/NumberInput/utils/index.js +8 -1
  80. package/styled-components/es/examples/plasma_b2c/components/Avatar/Avatar.config.js +4 -22
  81. package/styled-components/es/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +1 -134
  82. package/styled-components/es/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +1 -0
  83. package/styled-components/es/examples/plasma_web/components/Avatar/Avatar.config.js +4 -22
  84. package/styled-components/es/examples/plasma_web/components/Avatar/Avatar.stories.tsx +1 -134
  85. package/styled-components/es/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +1 -0
  86. package/types/components/Avatar/Avatar.d.ts +21 -3
  87. package/types/components/Avatar/Avatar.d.ts.map +1 -1
  88. package/types/components/Avatar/Avatar.styles.d.ts +0 -59
  89. package/types/components/Avatar/Avatar.styles.d.ts.map +1 -1
  90. package/types/components/Avatar/Avatar.tokens.d.ts +0 -37
  91. package/types/components/Avatar/Avatar.tokens.d.ts.map +1 -1
  92. package/types/components/Avatar/Avatar.types.d.ts +2 -47
  93. package/types/components/Avatar/Avatar.types.d.ts.map +1 -1
  94. package/types/components/Avatar/utils/index.d.ts +0 -1
  95. package/types/components/Avatar/utils/index.d.ts.map +1 -1
  96. package/types/components/Badge/Badge.types.d.ts +21 -8
  97. package/types/components/Badge/Badge.types.d.ts.map +1 -1
  98. package/types/components/Counter/Counter.d.ts +12 -2
  99. package/types/components/Counter/Counter.d.ts.map +1 -1
  100. package/types/components/Counter/Counter.types.d.ts +2 -1
  101. package/types/components/Counter/Counter.types.d.ts.map +1 -1
  102. package/types/components/NumberInput/NumberInput.d.ts.map +1 -1
  103. package/types/components/NumberInput/NumberInput.types.d.ts +5 -0
  104. package/types/components/NumberInput/NumberInput.types.d.ts.map +1 -1
  105. package/types/components/NumberInput/ui/Input/Input.d.ts +1 -0
  106. package/types/components/NumberInput/ui/Input/Input.d.ts.map +1 -1
  107. package/types/components/NumberInput/ui/Input/Input.types.d.ts +1 -0
  108. package/types/components/NumberInput/ui/Input/Input.types.d.ts.map +1 -1
  109. package/types/components/NumberInput/utils/index.d.ts +1 -0
  110. package/types/components/NumberInput/utils/index.d.ts.map +1 -1
  111. package/types/examples/plasma_b2c/components/Avatar/Avatar.config.d.ts +0 -18
  112. package/types/examples/plasma_b2c/components/Avatar/Avatar.config.d.ts.map +1 -1
  113. package/types/examples/plasma_b2c/components/Avatar/Avatar.d.ts +6 -138
  114. package/types/examples/plasma_b2c/components/Avatar/Avatar.d.ts.map +1 -1
  115. package/types/examples/plasma_b2c/components/Badge/Badge.d.ts +48 -8
  116. package/types/examples/plasma_b2c/components/Badge/Badge.d.ts.map +1 -1
  117. package/types/examples/plasma_b2c/components/Counter/Counter.d.ts +6 -1
  118. package/types/examples/plasma_b2c/components/Counter/Counter.d.ts.map +1 -1
  119. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.d.ts +2 -0
  120. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.d.ts.map +1 -1
  121. package/types/examples/plasma_web/components/Avatar/Avatar.config.d.ts +0 -18
  122. package/types/examples/plasma_web/components/Avatar/Avatar.config.d.ts.map +1 -1
  123. package/types/examples/plasma_web/components/Avatar/Avatar.d.ts +6 -138
  124. package/types/examples/plasma_web/components/Avatar/Avatar.d.ts.map +1 -1
  125. package/types/examples/plasma_web/components/Badge/Badge.d.ts +48 -8
  126. package/types/examples/plasma_web/components/Badge/Badge.d.ts.map +1 -1
  127. package/types/examples/plasma_web/components/Counter/Counter.d.ts +6 -1
  128. package/types/examples/plasma_web/components/Counter/Counter.d.ts.map +1 -1
  129. package/types/examples/plasma_web/components/NumberInput/NumberInput.d.ts +2 -0
  130. package/types/examples/plasma_web/components/NumberInput/NumberInput.d.ts.map +1 -1
  131. package/cjs/components/Avatar/Avatar.styles_131qvfx.css +0 -8
  132. package/cjs/components/Avatar/utils/index.js +0 -21
  133. package/cjs/components/Avatar/utils/index.js.map +0 -1
  134. package/es/components/Avatar/Avatar.styles_131qvfx.css +0 -8
  135. package/es/components/Avatar/utils/index.js +0 -17
  136. package/es/components/Avatar/utils/index.js.map +0 -1
@@ -1,5 +1,5 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable", "statusLabels", "hasExtra", "extraPlacement", "type", "counterView", "count", "maxCount", "badgeView", "text", "customColor", "customBackgroundColor", "contentLeft", "contentRight", "pilled"];
2
+ var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable", "statusLabels"];
3
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -14,10 +14,10 @@ import { component, mergeConfig } from '../../engines';
14
14
  import { cx } from '../../utils';
15
15
  import { indicatorConfig, indicatorTokens } from '../Indicator';
16
16
  import { classes, tokens } from './Avatar.tokens';
17
- import { base, Wrapper, Image, StatusIcon, Text, ExtraContent, ExtraCounter, ExtraBadge } from './Avatar.styles';
17
+ import { base, Wrapper, Image, StatusIcon, Text } from './Avatar.styles';
18
18
  import { base as viewCSS } from './variations/_size/base';
19
19
  import { base as focusedCSS } from './variations/_focused/base';
20
- import { extraPlacementMap, getInitialsForName } from './utils';
20
+ import { getInitialsForName } from './utils';
21
21
  var StatusLabelsDefault = {
22
22
  active: 'Активен',
23
23
  inactive: 'Неактивен'
@@ -73,19 +73,6 @@ export var avatarRoot = function avatarRoot(Root) {
73
73
  isScalable = props.isScalable,
74
74
  _props$statusLabels = props.statusLabels,
75
75
  statusLabels = _props$statusLabels === void 0 ? StatusLabelsDefault : _props$statusLabels,
76
- hasExtra = props.hasExtra,
77
- extraPlacement = props.extraPlacement,
78
- type = props.type,
79
- counterView = props.counterView,
80
- count = props.count,
81
- maxCount = props.maxCount,
82
- badgeView = props.badgeView,
83
- text = props.text,
84
- customColor = props.customColor,
85
- customBackgroundColor = props.customBackgroundColor,
86
- contentLeft = props.contentLeft,
87
- contentRight = props.contentRight,
88
- pilled = props.pilled,
89
76
  rest = _objectWithoutProperties(props, _excluded);
90
77
  var initials = useMemo(function () {
91
78
  return getInitialsForName(name);
@@ -93,18 +80,13 @@ export var avatarRoot = function avatarRoot(Root) {
93
80
  var ariaLabel = getAriaLabel(_objectSpread(_objectSpread({}, props), {}, {
94
81
  statusLabels: statusLabels
95
82
  }));
96
- var extraViewProp = type === 'badge' ? {
97
- badgeView: badgeView
98
- } : {
99
- counterView: counterView
100
- };
101
83
  return /*#__PURE__*/React.createElement(Root, _extends({
102
84
  ref: ref,
103
85
  size: avatarSize,
104
86
  className: cx(classes.avatarItem, className),
105
87
  "aria-label": ariaLabel,
106
88
  focused: focused
107
- }, extraViewProp, rest), /*#__PURE__*/React.createElement(Wrapper, {
89
+ }, rest), /*#__PURE__*/React.createElement(Wrapper, {
108
90
  isScalable: isScalable
109
91
  }, getAvatarContent({
110
92
  customText: customText,
@@ -114,24 +96,7 @@ export var avatarRoot = function avatarRoot(Root) {
114
96
  })), status && /*#__PURE__*/React.createElement(StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
115
97
  "aria-label": statusLabels[status],
116
98
  status: status
117
- })), hasExtra && avatarSize !== 'fit' && /*#__PURE__*/React.createElement(ExtraContent, {
118
- className: extraPlacementMap(extraPlacement)
119
- }, type === 'counter' ? /*#__PURE__*/React.createElement(ExtraCounter, {
120
- view: counterView,
121
- count: count || 1,
122
- maxCount: maxCount
123
- }) : avatarSize !== 's' && /*#__PURE__*/React.createElement(ExtraBadge, _extends({
124
- view: badgeView,
125
- text: text,
126
- customColor: customColor,
127
- customBackgroundColor: customBackgroundColor,
128
- pilled: pilled,
129
- maxWidth: "100%"
130
- }, contentLeft ? {
131
- contentLeft: contentLeft
132
- } : {
133
- contentRight: contentRight
134
- }))));
99
+ })));
135
100
  });
136
101
  };
137
102
  export var avatarConfig = {
@@ -2,14 +2,7 @@ var _templateObject;
2
2
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
3
  import { css } from 'styled-components';
4
4
  import styled from 'styled-components';
5
- import { component, mergeConfig } from '../../engines';
6
- import { badgeConfig, badgeTokens } from '../Badge';
7
- import { counterConfig, counterTokens } from '../Counter';
8
- import { classes, tokens } from './Avatar.tokens';
9
- var mergedBadgeConfig = /*#__PURE__*/mergeConfig(badgeConfig);
10
- var Badge = /*#__PURE__*/component(mergedBadgeConfig);
11
- var mergedCounterConfig = /*#__PURE__*/mergeConfig(counterConfig);
12
- var Counter = /*#__PURE__*/component(mergedCounterConfig);
5
+ import { tokens } from './Avatar.tokens';
13
6
  export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n"])));
14
7
  export var Wrapper = /*#__PURE__*/styled.div.withConfig({
15
8
  componentId: "plasma-new-hope__sc-t16ccn-0"
@@ -28,13 +21,4 @@ export var Image = /*#__PURE__*/styled.img.withConfig({
28
21
  })(["width:100%;height:100%;border-radius:50%;"]);
29
22
  export var Text = /*#__PURE__*/styled.span.withConfig({
30
23
  componentId: "plasma-new-hope__sc-t16ccn-3"
31
- })(["font-size:var(", ");font-family:var(", ");font-weight:var(", ");line-height:var(", ");background-image:var(", ");background-color:var(", ");background-size:100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;"], tokens.fontSize, tokens.fontFamily, tokens.fontWeight, tokens.lineHeight, tokens.color, tokens.color);
32
- export var ExtraContent = /*#__PURE__*/styled.div.withConfig({
33
- componentId: "plasma-new-hope__sc-t16ccn-4"
34
- })(["max-width:100%;display:flex;position:absolute;z-index:2;&.", "{top:calc(-0.063rem * var(", ",0));left:calc(-0.063rem * var(", ",0));}&.", "{top:calc(-0.063rem * var(", ",0));right:calc(-0.063rem * var(", ",0));}&.", "{bottom:calc(-0.063rem * var(", ",0));right:calc(-0.063rem * var(", ",0));}&.", "{bottom:calc(-0.063rem * var(", ",0));left:calc(-0.063rem * var(", ",0));}"], classes.extraPlacementTopLeft, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementTopRight, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementBottomRight, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementBottomLeft, tokens.extraPlacementFactor, tokens.extraPlacementFactor);
35
- export var ExtraBadge = /*#__PURE__*/styled(Badge).withConfig({
36
- componentId: "plasma-new-hope__sc-t16ccn-5"
37
- })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], badgeTokens.background, tokens.badgeBackground, badgeTokens.color, tokens.badgeColor, badgeTokens.backgroundTransparent, tokens.badgeBackgroundTransparent, badgeTokens.colorTransparent, tokens.badgeColorTransparent, badgeTokens.colorClear, tokens.badgeColorClear, badgeTokens.backgroundClear, tokens.badgeBackgroundClear, badgeTokens.borderRadius, tokens.badgeBorderRadius, badgeTokens.pilledBorderRadius, tokens.badgePilledBorderRadius, badgeTokens.height, tokens.badgeHeight, badgeTokens.padding, tokens.badgePadding, badgeTokens.paddingIconOnly, tokens.badgePaddingIconOnly, badgeTokens.fontFamily, tokens.badgeFontFamily, badgeTokens.fontSize, tokens.badgeFontSize, badgeTokens.fontStyle, tokens.badgeFontStyle, badgeTokens.fontWeight, tokens.badgeFontWeight, badgeTokens.letterSpacing, tokens.badgeLetterSpacing, badgeTokens.lineHeight, tokens.badgeLineHeight, badgeTokens.leftContentMarginLeft, tokens.badgeLeftContentMarginLeft, badgeTokens.leftContentMarginRight, tokens.badgeLeftContentMarginRight, badgeTokens.rightContentMarginLeft, tokens.badgeRightContentMarginLeft, badgeTokens.rightContentMarginRight, tokens.badgeRightContentMarginRight);
38
- export var ExtraCounter = /*#__PURE__*/styled(Counter).withConfig({
39
- componentId: "plasma-new-hope__sc-t16ccn-6"
40
- })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], counterTokens.background, tokens.counterBackground, counterTokens.color, tokens.counterColor, counterTokens.borderRadius, tokens.counterBorderRadius, counterTokens.height, tokens.counterHeight, counterTokens.padding, tokens.counterPadding, counterTokens.fontFamily, tokens.counterFontFamily, counterTokens.fontSize, tokens.counterFontSize, counterTokens.fontStyle, tokens.counterFontStyle, counterTokens.fontWeight, tokens.counterFontWeight, counterTokens.letterSpacing, tokens.counterLetterSpacing, counterTokens.lineHeight, tokens.counterLineHeight);
24
+ })(["font-size:var(", ");font-family:var(", ");font-weight:var(", ");line-height:var(", ");background-image:var(", ");background-color:var(", ");background-size:100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;"], tokens.fontSize, tokens.fontFamily, tokens.fontWeight, tokens.lineHeight, tokens.color, tokens.color);
@@ -147,57 +147,3 @@ export function App() {
147
147
  Опциональное свойство для корректной озвучки значений свойства `status`.
148
148
 
149
149
  По-умолчанию стоит значение для русскоговорящих `{ active: 'Активен', inactive: 'Неактивен' }`.
150
-
151
- #### Avatar и дополнительный контент
152
-
153
- Чтобы отобразить дополнительный контент нужно передать свойство `hasExtra`.
154
- Тип дополнительного контента задается с помощью свойства `type`, а его вид с помощью `badgeView` и `counterView` соответственно.
155
- За положение дополнительного контента отвечает `extraPlacement`:
156
-
157
- ```tsx live
158
- import React from 'react';
159
- import { Avatar } from '@salutejs/{{ package }}';
160
-
161
- export function App() {
162
- return (
163
- <>
164
- <Avatar
165
- size="l"
166
- name="Иван Фадеев"
167
- extraPlacement="top-left"
168
- type="counter"
169
- count={33}
170
- counterView="positive"
171
- hasExtra
172
- />
173
- <Avatar
174
- size="l"
175
- name="Иван Фадеев"
176
- extraPlacement="top-right"
177
- type="counter"
178
- count={33}
179
- counterView="accent"
180
- hasExtra
181
- />
182
- <Avatar
183
- size="l"
184
- name="Иван Фадеев"
185
- extraPlacement="bottom-right"
186
- type="badge"
187
- text="15"
188
- badgeView="warning"
189
- hasExtra
190
- />
191
- <Avatar
192
- size="l"
193
- name="Иван Фадеев"
194
- extraPlacement="bottom-left"
195
- type="badge"
196
- text="15"
197
- badgeView="negative"
198
- hasExtra
199
- />
200
- </>
201
- );
202
- }
203
- ```
@@ -1,9 +1,5 @@
1
1
  export var classes = {
2
- avatarItem: 'avatar-item',
3
- extraPlacementTopRight: 'avatar-extra-placement-top-right',
4
- extraPlacementTopLeft: 'avatar-extra-placement-top-left',
5
- extraPlacementBottomLeft: 'avatar-extra-placement-bottom-left',
6
- extraPlacementBottomRight: 'avatar-extra-placement-bottom-right'
2
+ avatarItem: 'avatar-item'
7
3
  };
8
4
  export var tokens = {
9
5
  avatarSize: '--plasma-avatar-size',
@@ -19,40 +15,5 @@ export var tokens = {
19
15
  outlineColor: '--plasma-avatar-outline-color',
20
16
  outlineSize: '--plasma-avatar-outline-size',
21
17
  outlineOffset: '--plasma-avatar-outline-offset',
22
- scaleHover: '--plasma-avatar-scale-hover',
23
- extraPlacementFactor: '--plasma-avatar-extra-placement-factor',
24
- // extra badge tokens
25
- badgeBackground: '--plasma-avatar-extra-badge-background',
26
- badgeColor: '--plasma-avatar-extra-badge-color',
27
- badgeBackgroundTransparent: '--plasma-avatar-extra-badge-background-transparent',
28
- badgeColorTransparent: '--plasma-avatar-extra-badge-color-transparent',
29
- badgeColorClear: '--plasma-avatar-extra-badge-color-clear',
30
- badgeBackgroundClear: '--plasma-avatar-extra-badge-background-clear',
31
- badgeBorderRadius: '--plasma-avatar-extra-badge-border-radius',
32
- badgePilledBorderRadius: '--plasma-avatar-extra-badge-pilled-border-radius',
33
- badgeHeight: '--plasma-avatar-extra-badge-height',
34
- badgePadding: '--plasma-avatar-extra-badge-padding',
35
- badgePaddingIconOnly: '--plasma-avatar-extra-badge-padding-icon-only',
36
- badgeFontFamily: '--plasma-avatar-extra-badge-font-family',
37
- badgeFontSize: '--plasma-avatar-extra-badge-font-size',
38
- badgeFontStyle: '--plasma-avatar-extra-badge-font-style',
39
- badgeFontWeight: '--plasma-avatar-extra-badge-font-weight',
40
- badgeLetterSpacing: '--plasma-avatar-extra-badge-letter-spacing',
41
- badgeLineHeight: '--plasma-avatar-extra-badge-lineheight',
42
- badgeLeftContentMarginLeft: '--plasma-avatar-extra-badge-left-content-margin-left',
43
- badgeLeftContentMarginRight: '--plasma-avatar-extra-badge-left-content-margin-right',
44
- badgeRightContentMarginLeft: '--plasma-avatar-extra-badge-right-content-margin-left',
45
- badgeRightContentMarginRight: '--plasma-avatar-extra-badge-right-content-margin-right',
46
- // extra counter tokens
47
- counterBackground: '--plasma-avatar-extra-counter-background',
48
- counterColor: '--plasma-avatar-extra-counter-color',
49
- counterBorderRadius: '--plasma-avatar-extra-counter-border-radius',
50
- counterHeight: '--plasma-avatar-extra-counter-height',
51
- counterPadding: '--plasma-avatar-extra-counter-padding',
52
- counterFontFamily: '--plasma-avatar-extra-counter-font-family',
53
- counterFontSize: '--plasma-avatar-extra-counter-font-size',
54
- counterFontStyle: '--plasma-avatar-extra-counter-font-style',
55
- counterFontWeight: '--plasma-avatar-extra-counter-font-weight',
56
- counterLetterSpacing: '--plasma-avatar-extra-counter-letter-spacing',
57
- counterLineHeight: '--plasma-avatar-extra-counter-lineheight'
18
+ scaleHover: '--plasma-avatar-scale-hover'
58
19
  };
@@ -1,14 +1 @@
1
- import { classes } from '../Avatar.tokens';
2
- export { getInitialsForName } from './getInitialsForName';
3
- export var extraPlacementMap = function extraPlacementMap(extraPlacement) {
4
- switch (extraPlacement) {
5
- case 'top-left':
6
- return classes.extraPlacementTopLeft;
7
- case 'bottom-left':
8
- return classes.extraPlacementBottomLeft;
9
- case 'bottom-right':
10
- return classes.extraPlacementBottomRight;
11
- default:
12
- return classes.extraPlacementTopRight;
13
- }
14
- };
1
+ export { getInitialsForName } from './getInitialsForName';
@@ -1,5 +1,5 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["className", "style", "width", "value", "min", "max", "step", "isLoading", "loader", "size", "view", "clear", "shape", "segmentation", "inputBackgroundType", "disabled", "textBefore", "textAfter", "customIncrementButton", "incrementIcon", "customDecrementButton", "decrementIcon", "isManualInput", "onChange", "onIncrement", "onDecrement"];
2
+ var _excluded = ["className", "style", "width", "value", "min", "max", "step", "precision", "isLoading", "loader", "size", "view", "clear", "shape", "segmentation", "inputBackgroundType", "disabled", "textBefore", "textAfter", "customIncrementButton", "incrementIcon", "customDecrementButton", "decrementIcon", "isManualInput", "onChange", "onIncrement", "onDecrement"];
3
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -26,6 +26,7 @@ import { base as shapeCSS } from './variations/_shape/base';
26
26
  import { base as inputBackgroundTypeCSS } from './variations/_background-type/base';
27
27
  import { base as segmentationCSS } from './variations/_segmentation/base';
28
28
  import { base as disabledCSS } from './variations/_disabled/base';
29
+ import { getPreciseValue } from './utils';
29
30
  export var numberInputRoot = function numberInputRoot(Root) {
30
31
  return /*#__PURE__*/forwardRef(function (_ref, ref) {
31
32
  var _ref2;
@@ -37,6 +38,8 @@ export var numberInputRoot = function numberInputRoot(Root) {
37
38
  max = _ref.max,
38
39
  _ref$step = _ref.step,
39
40
  step = _ref$step === void 0 ? 1 : _ref$step,
41
+ _ref$precision = _ref.precision,
42
+ precision = _ref$precision === void 0 ? 2 : _ref$precision,
40
43
  isLoading = _ref.isLoading,
41
44
  loader = _ref.loader,
42
45
  size = _ref.size,
@@ -90,7 +93,8 @@ export var numberInputRoot = function numberInputRoot(Root) {
90
93
  if (isLoading || disabled || isAnimationRun) {
91
94
  return;
92
95
  }
93
- var diffValue = Number(innerValue) - step;
96
+ var preciseDiff = getPreciseValue(Number(innerValue) - step, precision);
97
+ var diffValue = Number(preciseDiff);
94
98
  var resValue = min !== undefined && diffValue <= min ? min : diffValue;
95
99
  setInnerValue(resValue);
96
100
  if (onDecrement) {
@@ -104,7 +108,8 @@ export var numberInputRoot = function numberInputRoot(Root) {
104
108
  if (isLoading || disabled || isAnimationRun) {
105
109
  return;
106
110
  }
107
- var diffValue = Number(innerValue) + step;
111
+ var preciseDiff = getPreciseValue(Number(innerValue) + step, precision);
112
+ var diffValue = Number(preciseDiff);
108
113
  var resValue = max !== undefined && diffValue >= max ? max : diffValue;
109
114
  setInnerValue(resValue);
110
115
  if (onIncrement) {
@@ -148,6 +153,7 @@ export var numberInputRoot = function numberInputRoot(Root) {
148
153
  ref: ref,
149
154
  segmentation: segmentation,
150
155
  value: innerValue,
156
+ precision: precision,
151
157
  min: min,
152
158
  max: max,
153
159
  isManualInput: isManualInput,
@@ -1,5 +1,5 @@
1
1
  var _StyledSpinner;
2
- var _excluded = ["value", "min", "max", "isLoading", "loader", "disabled", "segmentation", "textBefore", "textAfter", "isManualInput", "isInputFocused", "setIsInputFocused", "setIsAnimationRun", "setInnerValue", "onChange", "onBlur", "onKeyDown"];
2
+ var _excluded = ["value", "precision", "min", "max", "isLoading", "loader", "disabled", "segmentation", "textBefore", "textAfter", "isManualInput", "isInputFocused", "setIsInputFocused", "setIsAnimationRun", "setInnerValue", "onChange", "onBlur", "onKeyDown"];
3
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
5
5
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -14,11 +14,12 @@ import { useForkRef } from '@salutejs/plasma-core';
14
14
  import { classes } from '../../NumberInput.tokens';
15
15
  import { cx, isNumber } from '../../../../utils';
16
16
  import { useDidMountEffect } from '../../../../hooks';
17
- import { defaultCharacterWidth, excludingNumberSchema, numberSchema } from '../../utils';
17
+ import { defaultCharacterWidth, excludingNumberSchema, getPreciseValue, numberSchema } from '../../utils';
18
18
  import { keyCodes } from '../../../../utils/constants';
19
19
  import { AdditionalText, Input, InputWrapper, DynamicInput, InputWidthHelper, TextWrapper, StyledSpinner, Loader } from './Input.styles';
20
20
  export var NumberInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
21
21
  var value = _ref.value,
22
+ precision = _ref.precision,
22
23
  min = _ref.min,
23
24
  max = _ref.max,
24
25
  isLoading = _ref.isLoading,
@@ -84,11 +85,6 @@ export var NumberInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
84
85
  setIsAnimationRun(false);
85
86
  return;
86
87
  }
87
- if (String(newValue).endsWith('.')) {
88
- setValues(null, Number(newValue));
89
- setIsAnimationRun(false);
90
- return;
91
- }
92
88
  var resValue = Number(newValue);
93
89
  if (max !== undefined && resValue > max) {
94
90
  setErrorClass(classes.errorAnimation);
@@ -100,6 +96,16 @@ export var NumberInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
100
96
  setErrorClass(classes.errorAnimation);
101
97
  setErrorValue(min);
102
98
  setIsAnimationRun(true);
99
+ return;
100
+ }
101
+ if (String(newValue).endsWith('.')) {
102
+ setValues(null, Number(newValue));
103
+ setIsAnimationRun(false);
104
+ return;
105
+ }
106
+ if (precision !== undefined) {
107
+ var preciseNewValue = Number(getPreciseValue(newValue, precision));
108
+ setValues(null, preciseNewValue);
103
109
  }
104
110
  setIsAnimationRun(false);
105
111
  };
@@ -1,3 +1,10 @@
1
1
  export var defaultCharacterWidth = '1ch';
2
2
  export var numberSchema = /^(-)?\d+(\.\d+)?$/;
3
- export var excludingNumberSchema = /[^-.\d]/g;
3
+ export var excludingNumberSchema = /[^-.\d]/g;
4
+ export var getPreciseValue = function getPreciseValue(value, precision) {
5
+ var innerValue = String(value);
6
+ if (precision !== undefined) {
7
+ return Number(innerValue).toFixed(precision);
8
+ }
9
+ return innerValue;
10
+ };
@@ -10,32 +10,14 @@ export var config = {
10
10
  "default": /*#__PURE__*/css(["", ":var(--text-accent-gradient);", ":linear-gradient(94deg,rgba(62,121,240,0.2) 6.49%,rgba(39,198,229,0.2) 93.51%);", ":var(--surface-positive);", ":var(--surface-solid-tertiary);", ":1.02;"], tokens.color, tokens.backgroundColor, tokens.statusOnlineColor, tokens.statusOfflineColor, tokens.scaleHover)
11
11
  },
12
12
  size: {
13
- xxl: /*#__PURE__*/css(["", ":6.25rem;", ":2rem;", ":600;", ":2rem;", ":0.75rem;", ":0.5rem;", ":1.75rem;", ":0 0.6875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;", ":1.25rem;", ":1rem;", ":1.75rem;", ":0 0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.badgeBorderRadius, tokens.badgeHeight, tokens.badgePadding, tokens.badgePaddingIconOnly, tokens.badgeFontFamily, tokens.badgeFontSize, tokens.badgeFontStyle, tokens.badgeFontWeight, tokens.badgeLetterSpacing, tokens.badgeLineHeight, tokens.badgeLeftContentMarginLeft, tokens.badgeLeftContentMarginRight, tokens.badgeRightContentMarginLeft, tokens.badgeRightContentMarginRight, tokens.badgePilledBorderRadius, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
14
- l: /*#__PURE__*/css(["", ":3rem;", ":1.25rem;", ":600;", ":1.25rem;", ":0.5rem;", ":2;", ":0.375rem;", ":1.25rem;", ":0 0.4375rem;", ":0 0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;", ":1.25rem;", ":1rem;", ":1.25rem;", ":0 0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.extraPlacementFactor, tokens.badgeBorderRadius, tokens.badgeHeight, tokens.badgePadding, tokens.badgePaddingIconOnly, tokens.badgeFontFamily, tokens.badgeFontSize, tokens.badgeFontStyle, tokens.badgeFontWeight, tokens.badgeLetterSpacing, tokens.badgeLineHeight, tokens.badgeLeftContentMarginLeft, tokens.badgeLeftContentMarginRight, tokens.badgeRightContentMarginLeft, tokens.badgeRightContentMarginRight, tokens.badgePilledBorderRadius, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
15
- m: /*#__PURE__*/css(["", ":2.25rem;", ":0.875rem;", ":600;", ":0.875rem;", ":0.5rem;", ":2;", ":0.25rem;", ":1rem;", ":0 0.25rem;", ":0 0.188rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;", ":1.25rem;", ":1rem;", ":1rem;", ":0 0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.extraPlacementFactor, tokens.badgeBorderRadius, tokens.badgeHeight, tokens.badgePadding, tokens.badgePaddingIconOnly, tokens.badgeFontFamily, tokens.badgeFontSize, tokens.badgeFontStyle, tokens.badgeFontWeight, tokens.badgeLetterSpacing, tokens.badgeLineHeight, tokens.badgeLeftContentMarginLeft, tokens.badgeLeftContentMarginRight, tokens.badgeRightContentMarginLeft, tokens.badgeRightContentMarginRight, tokens.badgePilledBorderRadius, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
16
- s: /*#__PURE__*/css(["", ":1.5rem;", ":0.5rem;", ":600;", ":0.5rem;", ":0.375rem;", ":1;", ":1rem;", ":0.75rem;", ":0 0.125rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.extraPlacementFactor, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
13
+ xxl: /*#__PURE__*/css(["", ":6.25rem;", ":2rem;", ":600;", ":2rem;", ":0.75rem;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
14
+ l: /*#__PURE__*/css(["", ":3rem;", ":1.25rem;", ":600;", ":1.25rem;", ":0.5rem;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
15
+ m: /*#__PURE__*/css(["", ":2.25rem;", ":0.875rem;", ":600;", ":0.875rem;", ":0.5rem;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
16
+ s: /*#__PURE__*/css(["", ":1.5rem;", ":0.5rem;", ":600;", ":0.5rem;", ":0.375rem;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
17
17
  fit: /*#__PURE__*/css(["", ":100%;", ":0;", ":0;", ":0;", ":0;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize)
18
18
  },
19
19
  focused: {
20
20
  "true": /*#__PURE__*/css(["", ":0.1rem;", ":-0.2rem;", ":var(--surface-accent);"], tokens.outlineSize, tokens.outlineOffset, tokens.outlineColor)
21
- },
22
- badgeView: {
23
- "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-clear);"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
24
- accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);", ":var(--surface-clear)"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
25
- positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);", ":var(--surface-clear)"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
26
- warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);", ":var(--surface-clear)"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
27
- negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);", ":var(--surface-clear)"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
28
- dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-text-pri ", ":var(--surface-clear)mary);"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
29
- light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-prima ", ":var(--surface-clear)ry);"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear)
30
- },
31
- counterView: {
32
- "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);"], tokens.counterColor, tokens.counterBackground),
33
- accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);"], tokens.counterColor, tokens.counterBackground),
34
- positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);"], tokens.counterColor, tokens.counterBackground),
35
- warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);"], tokens.counterColor, tokens.counterBackground),
36
- negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);"], tokens.counterColor, tokens.counterBackground),
37
- dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);"], tokens.counterColor, tokens.counterBackground),
38
- light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);"], tokens.counterColor, tokens.counterBackground)
39
21
  }
40
22
  }
41
23
  };
@@ -1,4 +1,3 @@
1
- import React from 'react';
2
1
  import type { ComponentProps } from 'react';
3
2
  import type { StoryObj, Meta } from '@storybook/react';
4
3
  import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -7,11 +6,6 @@ import { argTypesFromConfig, WithTheme } from '../../../_helpers';
7
6
 
8
7
  import { Avatar, mergedConfig } from './Avatar';
9
8
 
10
- const extraPlacements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
11
- const extraType = ['', 'badge', 'counter'];
12
- const counterViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
13
- const badgeViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
14
-
15
9
  const meta: Meta<typeof Avatar> = {
16
10
  title: 'b2c/Data Display/Avatar',
17
11
  decorators: [WithTheme],
@@ -19,69 +13,12 @@ const meta: Meta<typeof Avatar> = {
19
13
  argTypes: {
20
14
  ...argTypesFromConfig(mergedConfig),
21
15
  status: { control: 'select', options: ['active', 'inactive'] },
22
- type: {
23
- control: 'select',
24
- options: extraType,
25
- if: { arg: 'hasExtra', truthy: true },
26
- },
27
- extraPlacement: {
28
- control: 'select',
29
- options: extraPlacements,
30
- if: { arg: 'hasExtra', truthy: true },
31
- },
32
- counterView: {
33
- control: 'select',
34
- options: counterViews,
35
- if: { arg: 'type', eq: 'counter' },
36
- },
37
- count: {
38
- control: 'number',
39
- if: { arg: 'type', eq: 'counter' },
40
- },
41
- maxCount: {
42
- control: 'number',
43
- if: { arg: 'type', eq: 'counter' },
44
- },
45
- badgeView: {
46
- control: 'select',
47
- options: badgeViews,
48
- if: { arg: 'type', eq: 'badge' },
49
- },
50
- text: {
51
- control: 'text',
52
- if: { arg: 'type', eq: 'badge' },
53
- },
54
- customColor: {
55
- control: 'color',
56
- if: { arg: 'type', eq: 'badge' },
57
- },
58
- customBackgroundColor: {
59
- control: 'color',
60
- if: { arg: 'type', eq: 'badge' },
61
- },
62
- pilled: {
63
- control: 'boolean',
64
- if: { arg: 'type', eq: 'badge' },
65
- },
66
16
  },
67
17
  };
68
18
 
69
19
  export default meta;
70
20
 
71
- type StoryProps = ComponentProps<typeof Avatar> & {
72
- enableContentLeft: boolean;
73
- enableContentRight: boolean;
74
- };
75
- type Story = StoryObj<StoryProps>;
76
-
77
- const BellIcon = (props) => (
78
- <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
79
- <path
80
- d="M11.501 21.28c1.088 0 1.978-.889 1.978-1.977H9.524c0 1.088.88 1.978 1.977 1.978zm5.933-5.932v-4.944c0-3.035-1.622-5.576-4.45-6.248v-.673c0-.82-.662-1.483-1.483-1.483-.82 0-1.483.662-1.483 1.483v.672c-2.838.673-4.45 3.204-4.45 6.25v4.943l-1.275 1.276c-.623.623-.188 1.69.692 1.69h13.022c.88 0 1.325-1.067.702-1.69l-1.275-1.276z"
81
- fill="currentColor"
82
- />
83
- </svg>
84
- );
21
+ type Story = StoryObj<ComponentProps<typeof Avatar>>;
85
22
 
86
23
  export const Default: Story = {
87
24
  args: {
@@ -90,56 +27,10 @@ export const Default: Story = {
90
27
  name: 'Иван Фадеев',
91
28
  url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
92
29
  isScalable: false,
93
- hasExtra: false,
94
- extraPlacement: 'top-right',
95
- type: undefined,
96
- counterView: 'accent',
97
- count: 3,
98
- maxCount: 10,
99
- badgeView: 'accent',
100
- text: '31',
101
- pilled: true,
102
- enableContentLeft: false,
103
- enableContentRight: false,
104
30
  },
105
31
  argTypes: {
106
- enableContentLeft: {
107
- control: { type: 'boolean' },
108
- if: { arg: 'type', eq: 'badge' },
109
- },
110
- enableContentRight: {
111
- control: { type: 'boolean' },
112
- if: { arg: 'type', eq: 'badge' },
113
- },
114
32
  ...disableProps(['focused']),
115
33
  },
116
- render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
117
- const iconSize = () => {
118
- switch (size) {
119
- case 'xxl':
120
- return '1rem';
121
- case 'm':
122
- return '0.625rem';
123
- default:
124
- return '0.75rem';
125
- }
126
- };
127
-
128
- return (
129
- <>
130
- <Avatar
131
- contentLeft={enableContentLeft ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
132
- contentRight={
133
- !enableContentLeft && enableContentRight ? (
134
- <BellIcon width={iconSize()} height={iconSize()} />
135
- ) : undefined
136
- }
137
- size={size}
138
- {...rest}
139
- />
140
- </>
141
- );
142
- },
143
34
  };
144
35
 
145
36
  export const Accessibility: Story = {
@@ -151,14 +42,6 @@ export const Accessibility: Story = {
151
42
  size: 'xxl',
152
43
  status: 'active',
153
44
  focused: true,
154
- hasExtra: false,
155
- extraPlacement: 'top-right',
156
- type: undefined,
157
- counterView: 'accent',
158
- count: 3,
159
- maxCount: 10,
160
- badgeView: 'accent',
161
- text: '31',
162
45
  },
163
46
  };
164
47
 
@@ -172,14 +55,6 @@ export const AccessibilityWithURL: Story = {
172
55
  focused: true,
173
56
  name: 'Микула Селянинович',
174
57
  url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
175
- hasExtra: false,
176
- extraPlacement: 'top-right',
177
- type: undefined,
178
- counterView: 'accent',
179
- count: 3,
180
- maxCount: 10,
181
- badgeView: 'accent',
182
- text: '31',
183
58
  },
184
59
  };
185
60
 
@@ -192,13 +67,5 @@ export const AccessibilityWithCustomText: Story = {
192
67
  status: 'inactive',
193
68
  focused: true,
194
69
  customText: 'ФИО',
195
- hasExtra: false,
196
- extraPlacement: 'top-right',
197
- type: undefined,
198
- counterView: 'accent',
199
- count: 3,
200
- maxCount: 10,
201
- badgeView: 'accent',
202
- text: '31',
203
70
  },
204
71
  };
@@ -96,6 +96,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
96
96
  segmentation: 'default',
97
97
  min: 0,
98
98
  max: 9,
99
+ precision: 2,
99
100
  step: 1,
100
101
  width: 188,
101
102
  isManualInput: false,