@salutejs/plasma-new-hope 0.239.0-canary.1696.12710467472.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
@@ -17,7 +17,8 @@ var _base3 = /*#__PURE__*/require("./variations/_shape/base");
17
17
  var _base4 = /*#__PURE__*/require("./variations/_background-type/base");
18
18
  var _base5 = /*#__PURE__*/require("./variations/_segmentation/base");
19
19
  var _base6 = /*#__PURE__*/require("./variations/_disabled/base");
20
- 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"];
20
+ var _utils2 = /*#__PURE__*/require("./utils");
21
+ 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"];
21
22
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
22
23
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
23
24
  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); }
@@ -45,6 +46,8 @@ var numberInputRoot = exports.numberInputRoot = function numberInputRoot(Root) {
45
46
  max = _ref.max,
46
47
  _ref$step = _ref.step,
47
48
  step = _ref$step === void 0 ? 1 : _ref$step,
49
+ _ref$precision = _ref.precision,
50
+ precision = _ref$precision === void 0 ? 2 : _ref$precision,
48
51
  isLoading = _ref.isLoading,
49
52
  loader = _ref.loader,
50
53
  size = _ref.size,
@@ -98,7 +101,8 @@ var numberInputRoot = exports.numberInputRoot = function numberInputRoot(Root) {
98
101
  if (isLoading || disabled || isAnimationRun) {
99
102
  return;
100
103
  }
101
- var diffValue = Number(innerValue) - step;
104
+ var preciseDiff = (0, _utils2.getPreciseValue)(Number(innerValue) - step, precision);
105
+ var diffValue = Number(preciseDiff);
102
106
  var resValue = min !== undefined && diffValue <= min ? min : diffValue;
103
107
  setInnerValue(resValue);
104
108
  if (onDecrement) {
@@ -112,7 +116,8 @@ var numberInputRoot = exports.numberInputRoot = function numberInputRoot(Root) {
112
116
  if (isLoading || disabled || isAnimationRun) {
113
117
  return;
114
118
  }
115
- var diffValue = Number(innerValue) + step;
119
+ var preciseDiff = (0, _utils2.getPreciseValue)(Number(innerValue) + step, precision);
120
+ var diffValue = Number(preciseDiff);
116
121
  var resValue = max !== undefined && diffValue >= max ? max : diffValue;
117
122
  setInnerValue(resValue);
118
123
  if (onIncrement) {
@@ -156,6 +161,7 @@ var numberInputRoot = exports.numberInputRoot = function numberInputRoot(Root) {
156
161
  ref: ref,
157
162
  segmentation: segmentation,
158
163
  value: innerValue,
164
+ precision: precision,
159
165
  min: min,
160
166
  max: max,
161
167
  isManualInput: isManualInput,
@@ -14,7 +14,7 @@ var _utils2 = /*#__PURE__*/require("../../utils");
14
14
  var _constants = /*#__PURE__*/require("../../../../utils/constants");
15
15
  var _Input = /*#__PURE__*/require("./Input.styles");
16
16
  var _StyledSpinner;
17
- var _excluded = ["value", "min", "max", "isLoading", "loader", "disabled", "segmentation", "textBefore", "textAfter", "isManualInput", "isInputFocused", "setIsInputFocused", "setIsAnimationRun", "setInnerValue", "onChange", "onBlur", "onKeyDown"];
17
+ var _excluded = ["value", "precision", "min", "max", "isLoading", "loader", "disabled", "segmentation", "textBefore", "textAfter", "isManualInput", "isInputFocused", "setIsInputFocused", "setIsAnimationRun", "setInnerValue", "onChange", "onBlur", "onKeyDown"];
18
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
19
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
20
20
  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); }
@@ -28,6 +28,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
28
28
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
29
29
  var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
30
30
  var value = _ref.value,
31
+ precision = _ref.precision,
31
32
  min = _ref.min,
32
33
  max = _ref.max,
33
34
  isLoading = _ref.isLoading,
@@ -93,11 +94,6 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)(func
93
94
  setIsAnimationRun(false);
94
95
  return;
95
96
  }
96
- if (String(newValue).endsWith('.')) {
97
- setValues(null, Number(newValue));
98
- setIsAnimationRun(false);
99
- return;
100
- }
101
97
  var resValue = Number(newValue);
102
98
  if (max !== undefined && resValue > max) {
103
99
  setErrorClass(_NumberInput.classes.errorAnimation);
@@ -109,6 +105,16 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)(func
109
105
  setErrorClass(_NumberInput.classes.errorAnimation);
110
106
  setErrorValue(min);
111
107
  setIsAnimationRun(true);
108
+ return;
109
+ }
110
+ if (String(newValue).endsWith('.')) {
111
+ setValues(null, Number(newValue));
112
+ setIsAnimationRun(false);
113
+ return;
114
+ }
115
+ if (precision !== undefined) {
116
+ var preciseNewValue = Number((0, _utils2.getPreciseValue)(newValue, precision));
117
+ setValues(null, preciseNewValue);
112
118
  }
113
119
  setIsAnimationRun(false);
114
120
  };
@@ -3,7 +3,14 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.numberSchema = exports.excludingNumberSchema = exports.defaultCharacterWidth = void 0;
6
+ exports.numberSchema = exports.getPreciseValue = exports.excludingNumberSchema = exports.defaultCharacterWidth = void 0;
7
7
  var defaultCharacterWidth = exports.defaultCharacterWidth = '1ch';
8
8
  var numberSchema = exports.numberSchema = /^(-)?\d+(\.\d+)?$/;
9
- var excludingNumberSchema = exports.excludingNumberSchema = /[^-.\d]/g;
9
+ var excludingNumberSchema = exports.excludingNumberSchema = /[^-.\d]/g;
10
+ var getPreciseValue = exports.getPreciseValue = function getPreciseValue(value, precision) {
11
+ var innerValue = String(value);
12
+ if (precision !== undefined) {
13
+ return Number(innerValue).toFixed(precision);
14
+ }
15
+ return innerValue;
16
+ };
@@ -16,32 +16,14 @@ var config = exports.config = {
16
16
  "default": /*#__PURE__*/(0, _styledComponents.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;"], _Avatar.tokens.color, _Avatar.tokens.backgroundColor, _Avatar.tokens.statusOnlineColor, _Avatar.tokens.statusOfflineColor, _Avatar.tokens.scaleHover)
17
17
  },
18
18
  size: {
19
- xxl: /*#__PURE__*/(0, _styledComponents.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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.badgeBorderRadius, _Avatar.tokens.badgeHeight, _Avatar.tokens.badgePadding, _Avatar.tokens.badgePaddingIconOnly, _Avatar.tokens.badgeFontFamily, _Avatar.tokens.badgeFontSize, _Avatar.tokens.badgeFontStyle, _Avatar.tokens.badgeFontWeight, _Avatar.tokens.badgeLetterSpacing, _Avatar.tokens.badgeLineHeight, _Avatar.tokens.badgeLeftContentMarginLeft, _Avatar.tokens.badgeLeftContentMarginRight, _Avatar.tokens.badgeRightContentMarginLeft, _Avatar.tokens.badgeRightContentMarginRight, _Avatar.tokens.badgePilledBorderRadius, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
20
- l: /*#__PURE__*/(0, _styledComponents.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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.badgeBorderRadius, _Avatar.tokens.badgeHeight, _Avatar.tokens.badgePadding, _Avatar.tokens.badgePaddingIconOnly, _Avatar.tokens.badgeFontFamily, _Avatar.tokens.badgeFontSize, _Avatar.tokens.badgeFontStyle, _Avatar.tokens.badgeFontWeight, _Avatar.tokens.badgeLetterSpacing, _Avatar.tokens.badgeLineHeight, _Avatar.tokens.badgeLeftContentMarginLeft, _Avatar.tokens.badgeLeftContentMarginRight, _Avatar.tokens.badgeRightContentMarginLeft, _Avatar.tokens.badgeRightContentMarginRight, _Avatar.tokens.badgePilledBorderRadius, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
21
- m: /*#__PURE__*/(0, _styledComponents.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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.badgeBorderRadius, _Avatar.tokens.badgeHeight, _Avatar.tokens.badgePadding, _Avatar.tokens.badgePaddingIconOnly, _Avatar.tokens.badgeFontFamily, _Avatar.tokens.badgeFontSize, _Avatar.tokens.badgeFontStyle, _Avatar.tokens.badgeFontWeight, _Avatar.tokens.badgeLetterSpacing, _Avatar.tokens.badgeLineHeight, _Avatar.tokens.badgeLeftContentMarginLeft, _Avatar.tokens.badgeLeftContentMarginRight, _Avatar.tokens.badgeRightContentMarginLeft, _Avatar.tokens.badgeRightContentMarginRight, _Avatar.tokens.badgePilledBorderRadius, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
22
- s: /*#__PURE__*/(0, _styledComponents.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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
19
+ xxl: /*#__PURE__*/(0, _styledComponents.css)(["", ":6.25rem;", ":2rem;", ":600;", ":2rem;", ":0.75rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
20
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":1.25rem;", ":600;", ":1.25rem;", ":0.5rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
21
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.25rem;", ":0.875rem;", ":600;", ":0.875rem;", ":0.5rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
22
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.5rem;", ":600;", ":0.5rem;", ":0.375rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
23
23
  fit: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":0;", ":0;", ":0;", ":0;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize)
24
24
  },
25
25
  focused: {
26
26
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.1rem;", ":-0.2rem;", ":var(--surface-accent);"], _Avatar.tokens.outlineSize, _Avatar.tokens.outlineOffset, _Avatar.tokens.outlineColor)
27
- },
28
- badgeView: {
29
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-clear);"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
30
- accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
31
- positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
32
- warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
33
- negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
34
- dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-text-pri ", ":var(--surface-clear)mary);"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
35
- light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-prima ", ":var(--surface-clear)ry);"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear)
36
- },
37
- counterView: {
38
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
39
- accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
40
- positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
41
- warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
42
- negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
43
- dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
44
- light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground)
45
27
  }
46
28
  }
47
29
  };
@@ -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,
@@ -16,32 +16,14 @@ var config = exports.config = {
16
16
  "default": /*#__PURE__*/(0, _styledComponents.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;"], _Avatar.tokens.color, _Avatar.tokens.backgroundColor, _Avatar.tokens.statusOnlineColor, _Avatar.tokens.statusOfflineColor, _Avatar.tokens.scaleHover)
17
17
  },
18
18
  size: {
19
- xxl: /*#__PURE__*/(0, _styledComponents.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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.badgeBorderRadius, _Avatar.tokens.badgeHeight, _Avatar.tokens.badgePadding, _Avatar.tokens.badgePaddingIconOnly, _Avatar.tokens.badgeFontFamily, _Avatar.tokens.badgeFontSize, _Avatar.tokens.badgeFontStyle, _Avatar.tokens.badgeFontWeight, _Avatar.tokens.badgeLetterSpacing, _Avatar.tokens.badgeLineHeight, _Avatar.tokens.badgeLeftContentMarginLeft, _Avatar.tokens.badgeLeftContentMarginRight, _Avatar.tokens.badgeRightContentMarginLeft, _Avatar.tokens.badgeRightContentMarginRight, _Avatar.tokens.badgePilledBorderRadius, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
20
- l: /*#__PURE__*/(0, _styledComponents.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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.badgeBorderRadius, _Avatar.tokens.badgeHeight, _Avatar.tokens.badgePadding, _Avatar.tokens.badgePaddingIconOnly, _Avatar.tokens.badgeFontFamily, _Avatar.tokens.badgeFontSize, _Avatar.tokens.badgeFontStyle, _Avatar.tokens.badgeFontWeight, _Avatar.tokens.badgeLetterSpacing, _Avatar.tokens.badgeLineHeight, _Avatar.tokens.badgeLeftContentMarginLeft, _Avatar.tokens.badgeLeftContentMarginRight, _Avatar.tokens.badgeRightContentMarginLeft, _Avatar.tokens.badgeRightContentMarginRight, _Avatar.tokens.badgePilledBorderRadius, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
21
- m: /*#__PURE__*/(0, _styledComponents.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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.badgeBorderRadius, _Avatar.tokens.badgeHeight, _Avatar.tokens.badgePadding, _Avatar.tokens.badgePaddingIconOnly, _Avatar.tokens.badgeFontFamily, _Avatar.tokens.badgeFontSize, _Avatar.tokens.badgeFontStyle, _Avatar.tokens.badgeFontWeight, _Avatar.tokens.badgeLetterSpacing, _Avatar.tokens.badgeLineHeight, _Avatar.tokens.badgeLeftContentMarginLeft, _Avatar.tokens.badgeLeftContentMarginRight, _Avatar.tokens.badgeRightContentMarginLeft, _Avatar.tokens.badgeRightContentMarginRight, _Avatar.tokens.badgePilledBorderRadius, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
22
- s: /*#__PURE__*/(0, _styledComponents.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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
19
+ xxl: /*#__PURE__*/(0, _styledComponents.css)(["", ":6.25rem;", ":2rem;", ":600;", ":2rem;", ":0.75rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
20
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":1.25rem;", ":600;", ":1.25rem;", ":0.5rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
21
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.25rem;", ":0.875rem;", ":600;", ":0.875rem;", ":0.5rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
22
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.5rem;", ":600;", ":0.5rem;", ":0.375rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
23
23
  fit: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":0;", ":0;", ":0;", ":0;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize)
24
24
  },
25
25
  focused: {
26
26
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.1rem;", ":-0.2rem;", ":var(--surface-accent);"], _Avatar.tokens.outlineSize, _Avatar.tokens.outlineOffset, _Avatar.tokens.outlineColor)
27
- },
28
- badgeView: {
29
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-clear);"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
30
- accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
31
- positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
32
- warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
33
- negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
34
- dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-text-pri ", ":var(--surface-clear)mary);"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
35
- light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-prima ", ":var(--surface-clear)ry);"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear)
36
- },
37
- counterView: {
38
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
39
- accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
40
- positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
41
- warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
42
- negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
43
- dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
44
- light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground)
45
27
  }
46
28
  }
47
29
  };
@@ -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: 'web/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,