@salutejs/sdds-serv 0.223.1-canary.1692.12540362812.0 → 0.224.0-canary.1696.12710467472.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (24) hide show
  1. package/api/sdds-serv.api.md +72 -59
  2. package/components/Avatar/Avatar.config.d.ts +18 -0
  3. package/components/Avatar/Avatar.config.js +19 -1
  4. package/components/Avatar/Avatar.config.js.map +1 -1
  5. package/components/Avatar/Avatar.config_1buqzeq.css +21 -0
  6. package/components/Avatar/Avatar.css +21 -7
  7. package/components/Avatar/Avatar.d.ts +138 -6
  8. package/components/Badge/Badge.d.ts +8 -48
  9. package/components/Counter/Counter.d.ts +1 -6
  10. package/components/NumberInput/NumberInput.d.ts +2 -2
  11. package/emotion/cjs/components/Avatar/Avatar.config.js +23 -5
  12. package/emotion/cjs/components/Avatar/Avatar.stories.tsx +120 -3
  13. package/emotion/es/components/Avatar/Avatar.config.js +23 -5
  14. package/emotion/es/components/Avatar/Avatar.stories.tsx +120 -3
  15. package/es/components/Avatar/Avatar.config.js +19 -1
  16. package/es/components/Avatar/Avatar.config.js.map +1 -1
  17. package/es/components/Avatar/Avatar.config_1buqzeq.css +21 -0
  18. package/es/components/Avatar/Avatar.css +21 -7
  19. package/es/index.css +21 -7
  20. package/package.json +5 -5
  21. package/styled-components/cjs/components/Avatar/Avatar.config.js +23 -5
  22. package/styled-components/es/components/Avatar/Avatar.config.js +23 -5
  23. package/components/Avatar/Avatar.config_weecw4.css +0 -7
  24. package/es/components/Avatar/Avatar.config_weecw4.css +0 -7
package/components/Badge/Badge.d.ts CHANGED
@@ -37,28 +37,10 @@ export declare const Badge: import("react").FunctionComponent<import("@salutejs/
37
37
  } & {
38
38
  contentLeft?: import("react").ReactNode;
39
39
  contentRight?: undefined;
40
- } & {
41
- children?: import("react").ReactNode;
42
40
  } & {
43
41
  clear?: true | undefined;
44
- pilled?: false | undefined;
45
- transparent?: false | undefined;
46
- } & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
47
- text?: string | undefined;
48
- customColor?: string | undefined;
49
- customBackgroundColor?: string | undefined;
50
- maxWidth?: import("csstype").Property.Width<string | number> | undefined;
51
- size?: string | undefined;
52
- view?: string | undefined;
53
- } & {
54
- contentLeft?: import("react").ReactNode;
55
- contentRight?: undefined;
56
- } & {
57
- children?: import("react").ReactNode;
58
- } & {
59
- pilled?: true | undefined;
60
- transparent?: boolean | undefined;
61
- clear?: false | undefined;
42
+ pilled?: undefined;
43
+ transparent?: undefined;
62
44
  } & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
63
45
  text?: string | undefined;
64
46
  customColor?: string | undefined;
@@ -69,12 +51,10 @@ export declare const Badge: import("react").FunctionComponent<import("@salutejs/
69
51
  } & {
70
52
  contentLeft?: import("react").ReactNode;
71
53
  contentRight?: undefined;
72
- } & {
73
- children?: import("react").ReactNode;
74
54
  } & {
75
55
  pilled?: boolean | undefined;
76
- transparent?: true | undefined;
77
- clear?: false | undefined;
56
+ transparent?: boolean | undefined;
57
+ clear?: undefined;
78
58
  } & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
79
59
  text?: string | undefined;
80
60
  customColor?: string | undefined;
@@ -85,28 +65,10 @@ export declare const Badge: import("react").FunctionComponent<import("@salutejs/
85
65
  } & {
86
66
  contentLeft?: undefined;
87
67
  contentRight?: import("react").ReactNode;
88
- } & {
89
- children?: import("react").ReactNode;
90
68
  } & {
91
69
  clear?: true | undefined;
92
- pilled?: false | undefined;
93
- transparent?: false | undefined;
94
- } & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
95
- text?: string | undefined;
96
- customColor?: string | undefined;
97
- customBackgroundColor?: string | undefined;
98
- maxWidth?: import("csstype").Property.Width<string | number> | undefined;
99
- size?: string | undefined;
100
- view?: string | undefined;
101
- } & {
102
- contentLeft?: undefined;
103
- contentRight?: import("react").ReactNode;
104
- } & {
105
- children?: import("react").ReactNode;
106
- } & {
107
- pilled?: true | undefined;
108
- transparent?: boolean | undefined;
109
- clear?: false | undefined;
70
+ pilled?: undefined;
71
+ transparent?: undefined;
110
72
  } & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
111
73
  text?: string | undefined;
112
74
  customColor?: string | undefined;
@@ -117,10 +79,8 @@ export declare const Badge: import("react").FunctionComponent<import("@salutejs/
117
79
  } & {
118
80
  contentLeft?: undefined;
119
81
  contentRight?: import("react").ReactNode;
120
- } & {
121
- children?: import("react").ReactNode;
122
82
  } & {
123
83
  pilled?: boolean | undefined;
124
- transparent?: true | undefined;
125
- clear?: false | undefined;
84
+ transparent?: boolean | undefined;
85
+ clear?: undefined;
126
86
  } & import("react").RefAttributes<HTMLDivElement>))>;
package/components/Counter/Counter.d.ts CHANGED
@@ -19,9 +19,4 @@ export declare const Counter: import("react").FunctionComponent<import("@salutej
19
19
  xs: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
20
20
  xxs: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
21
21
  };
22
- }> & import("react").HTMLAttributes<HTMLDivElement> & {
23
- count: number;
24
- maxCount?: number | undefined;
25
- size?: string | undefined;
26
- view?: string | undefined;
27
- } & import("react").RefAttributes<HTMLDivElement>>;
22
+ }> & import("react").HTMLAttributes<HTMLDivElement> & import("@salutejs/plasma-new-hope/types/components/Counter/Counter.types").CustomCounterProps & import("react").RefAttributes<HTMLDivElement>>;
package/components/NumberInput/NumberInput.d.ts CHANGED
@@ -53,7 +53,7 @@ export declare const NumberInput: import("react").FunctionComponent<import("@sal
53
53
  } & {
54
54
  segmentation?: "clear" | undefined;
55
55
  inputBackgroundType?: undefined;
56
- } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange" | "size" | "value"> & import("react").RefAttributes<HTMLInputElement>) | ({
56
+ } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> & import("react").RefAttributes<HTMLInputElement>) | ({
57
57
  value?: number | undefined;
58
58
  min?: number | undefined;
59
59
  max?: number | undefined;
@@ -78,4 +78,4 @@ export declare const NumberInput: import("react").FunctionComponent<import("@sal
78
78
  } & {
79
79
  segmentation?: string | undefined;
80
80
  inputBackgroundType?: string | undefined;
81
- } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange" | "size" | "value"> & import("react").RefAttributes<HTMLInputElement>))>;
81
+ } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> & import("react").RefAttributes<HTMLInputElement>))>;
package/emotion/cjs/components/Avatar/Avatar.config.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.config = void 0;
7
7
  var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
8
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
8
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
9
9
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
10
10
  var config = exports.config = {
11
11
  defaults: {
@@ -18,14 +18,32 @@ var config = exports.config = {
18
18
  },
19
19
  size: {
20
20
  // TODO: #1044 токены типографики в Avatar
21
- xxl: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 6.25rem;\n ", ": 2rem;\n ", ": 600;\n ", ": 2rem;\n ", ": 0.75rem;\n "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize),
22
- l: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 3rem;\n ", ": 1.25rem;\n ", ": 600;\n ", ": 1.25rem;\n ", ": 0.5rem;\n "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize),
23
- m: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.25rem;\n ", ": 0.875rem;\n ", ": 600;\n ", ": 0.875rem;\n ", ": 0.5rem;\n "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize),
24
- s: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 0.5rem;\n ", ": 600;\n ", ": 0.5rem;\n ", ": 0.375rem;\n "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize),
21
+ xxl: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 6.25rem;\n ", ": 2rem;\n ", ": 600;\n ", ": 2rem;\n ", ": 0.75rem;\n\n ", ": 0.5rem;\n ", ": 1.75rem;\n ", ": 0 0.688rem;\n ", ": 0 0.375rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": -0.063rem;\n ", ": 0.25rem;\n\n ", ": 0.25rem;\n ", ": -0.063rem;\n ", ": 1.25rem;\n\n ", ": 1rem;\n ", ": 1.75rem;\n ", ": 0 0.625rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize, _emotion.avatarTokens.badgeBorderRadius, _emotion.avatarTokens.badgeHeight, _emotion.avatarTokens.badgePadding, _emotion.avatarTokens.badgePaddingIconOnly, _emotion.avatarTokens.badgeFontFamily, _emotion.avatarTokens.badgeFontSize, _emotion.avatarTokens.badgeFontStyle, _emotion.avatarTokens.badgeFontWeight, _emotion.avatarTokens.badgeLetterSpacing, _emotion.avatarTokens.badgeLineHeight, _emotion.avatarTokens.badgeLeftContentMarginLeft, _emotion.avatarTokens.badgeLeftContentMarginRight, _emotion.avatarTokens.badgeRightContentMarginLeft, _emotion.avatarTokens.badgeRightContentMarginRight, _emotion.avatarTokens.badgePilledBorderRadius, _emotion.avatarTokens.counterBorderRadius, _emotion.avatarTokens.counterHeight, _emotion.avatarTokens.counterPadding, _emotion.avatarTokens.counterFontFamily, _emotion.avatarTokens.counterFontSize, _emotion.avatarTokens.counterFontStyle, _emotion.avatarTokens.counterFontWeight, _emotion.avatarTokens.counterLetterSpacing, _emotion.avatarTokens.counterLineHeight),
22
+ l: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 3rem;\n ", ": 1.25rem;\n ", ": 600;\n ", ": 1.25rem;\n ", ": 0.5rem;\n\n ", ": 2;\n\n ", ": 0.375rem;\n ", ": 1.25rem;\n ", ": 0 0.438rem;\n ", ": 0 0.25rem;\n\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n\n ", ": -0.063rem;\n ", ": 0.125rem;\n\n ", ": 0.125rem;\n ", ": -0.063rem;\n ", ": 1.25rem;\n\n ", ": 1rem;\n ", ": 1.25rem;\n ", ": 0 0.375rem;\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize, _emotion.avatarTokens.extraPlacementFactor, _emotion.avatarTokens.badgeBorderRadius, _emotion.avatarTokens.badgeHeight, _emotion.avatarTokens.badgePadding, _emotion.avatarTokens.badgePaddingIconOnly, _emotion.avatarTokens.badgeFontFamily, _emotion.avatarTokens.badgeFontSize, _emotion.avatarTokens.badgeFontStyle, _emotion.avatarTokens.badgeFontWeight, _emotion.avatarTokens.badgeLetterSpacing, _emotion.avatarTokens.badgeLineHeight, _emotion.avatarTokens.badgeLeftContentMarginLeft, _emotion.avatarTokens.badgeLeftContentMarginRight, _emotion.avatarTokens.badgeRightContentMarginLeft, _emotion.avatarTokens.badgeRightContentMarginRight, _emotion.avatarTokens.badgePilledBorderRadius, _emotion.avatarTokens.counterBorderRadius, _emotion.avatarTokens.counterHeight, _emotion.avatarTokens.counterPadding, _emotion.avatarTokens.counterFontFamily, _emotion.avatarTokens.counterFontSize, _emotion.avatarTokens.counterFontStyle, _emotion.avatarTokens.counterFontWeight, _emotion.avatarTokens.counterLetterSpacing, _emotion.avatarTokens.counterLineHeight),
23
+ m: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.25rem;\n ", ": 0.875rem;\n ", ": 600;\n ", ": 0.875rem;\n ", ": 0.5rem;\n\n ", ": 2;\n\n ", ": 0.25rem;\n ", ": 1rem;\n ", ": 0 0.25rem;\n ", ": 0 0.188rem;\n\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n\n ", ": -0.063rem;\n ", ": 0.125rem;\n\n ", ": 0.125rem;\n ", ": -0.063rem;\n ", ": 1.25rem;\n\n ", ": 1rem;\n ", ": 1rem;\n ", ": 0 0.25rem;\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize, _emotion.avatarTokens.extraPlacementFactor, _emotion.avatarTokens.badgeBorderRadius, _emotion.avatarTokens.badgeHeight, _emotion.avatarTokens.badgePadding, _emotion.avatarTokens.badgePaddingIconOnly, _emotion.avatarTokens.badgeFontFamily, _emotion.avatarTokens.badgeFontSize, _emotion.avatarTokens.badgeFontStyle, _emotion.avatarTokens.badgeFontWeight, _emotion.avatarTokens.badgeLetterSpacing, _emotion.avatarTokens.badgeLineHeight, _emotion.avatarTokens.badgeLeftContentMarginLeft, _emotion.avatarTokens.badgeLeftContentMarginRight, _emotion.avatarTokens.badgeRightContentMarginLeft, _emotion.avatarTokens.badgeRightContentMarginRight, _emotion.avatarTokens.badgePilledBorderRadius, _emotion.avatarTokens.counterBorderRadius, _emotion.avatarTokens.counterHeight, _emotion.avatarTokens.counterPadding, _emotion.avatarTokens.counterFontFamily, _emotion.avatarTokens.counterFontSize, _emotion.avatarTokens.counterFontStyle, _emotion.avatarTokens.counterFontWeight, _emotion.avatarTokens.counterLetterSpacing, _emotion.avatarTokens.counterLineHeight),
24
+ s: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 0.5rem;\n ", ": 600;\n ", ": 0.5rem;\n ", ": 0.375rem;\n\n ", ": 1;\n\n ", ": 1rem;\n ", ": 0.75rem;\n ", ": 0 0.125rem;\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize, _emotion.avatarTokens.extraPlacementFactor, _emotion.avatarTokens.counterBorderRadius, _emotion.avatarTokens.counterHeight, _emotion.avatarTokens.counterPadding, _emotion.avatarTokens.counterFontFamily, _emotion.avatarTokens.counterFontSize, _emotion.avatarTokens.counterFontStyle, _emotion.avatarTokens.counterFontWeight, _emotion.avatarTokens.counterLetterSpacing, _emotion.avatarTokens.counterLineHeight),
25
25
  fit: /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 100%;\n ", ": 0;\n ", ": 0;\n ", ": 0;\n ", ": 0;\n "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize)
26
26
  },
27
27
  focused: {
28
28
  "true": /*#__PURE__*/(0, _emotion.css)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.1rem;\n ", ": -0.2rem;\n ", ": var(--surface-accent);\n "])), _emotion.avatarTokens.outlineSize, _emotion.avatarTokens.outlineOffset, _emotion.avatarTokens.outlineColor)
29
+ },
30
+ badgeView: {
31
+ "default": /*#__PURE__*/(0, _emotion.css)(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default);\n\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n\n ", ": var(--text-primary);\n ", ": var(--surface-clear);\n "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
32
+ accent: /*#__PURE__*/(0, _emotion.css)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n\n ", ": var(--text-accent);\n ", ": var(--surface-transparent-accent);\n\n ", ": var(--text-accent);\n ", ": var(--surface-clear);\n "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
33
+ positive: /*#__PURE__*/(0, _emotion.css)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-positive);\n\n ", ": var(--text-positive);\n ", ": var(--surface-transparent-positive);\n\n ", ": var(--text-positive);\n ", ": var(--surface-clear);\n "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
34
+ warning: /*#__PURE__*/(0, _emotion.css)(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-warning);\n\n ", ": var(--text-warning);\n ", ": var(--surface-transparent-warning);\n\n ", ": var(--text-warning);\n ", ": var(--surface-clear);\n "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
35
+ negative: /*#__PURE__*/(0, _emotion.css)(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-negative);\n\n ", ": var(--text-negative);\n ", ": var(--surface-transparent-negative);\n\n ", ": var(--text-negative);\n ", ": var(--surface-clear);\n "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
36
+ dark: /*#__PURE__*/(0, _emotion.css)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-solid-default);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-transparent-deep);\n\n ", ": var(--on-light-text-primary);\n ", ": var(--surface-clear);\n "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
37
+ light: /*#__PURE__*/(0, _emotion.css)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-light-text-primary);\n ", ": var(--on-dark-surface-solid-default);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-dark-surface-transparent-card);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-clear);\n "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear)
38
+ },
39
+ counterView: {
40
+ "default": /*#__PURE__*/(0, _emotion.css)(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default);\n "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
41
+ accent: /*#__PURE__*/(0, _emotion.css)(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
42
+ positive: /*#__PURE__*/(0, _emotion.css)(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-positive);\n "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
43
+ warning: /*#__PURE__*/(0, _emotion.css)(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-warning);\n "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
44
+ negative: /*#__PURE__*/(0, _emotion.css)(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-negative);\n "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
45
+ dark: /*#__PURE__*/(0, _emotion.css)(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-solid-default);\n "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
46
+ light: /*#__PURE__*/(0, _emotion.css)(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-light-text-primary);\n ", ": var(--on-dark-surface-solid-default);\n "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground)
29
47
  }
30
48
  }
31
49
  };
package/emotion/cjs/components/Avatar/Avatar.stories.tsx CHANGED
@@ -1,9 +1,15 @@
1
+ import React from 'react';
1
2
  import type { ComponentProps } from 'react';
2
3
  import type { StoryObj, Meta } from '@storybook/react';
3
4
  import { disableProps } from '@salutejs/plasma-sb-utils';
4
5
 
5
6
  import { Avatar } from './Avatar';
6
7
 
8
+ const extraPlacements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
9
+ const extraType = ['', 'badge', 'counter'];
10
+ const counterViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
11
+ const badgeViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
12
+
7
13
  const meta: Meta<typeof Avatar> = {
8
14
  title: 'Data Display/Avatar',
9
15
  component: Avatar,
@@ -11,12 +17,69 @@ const meta: Meta<typeof Avatar> = {
11
17
  view: { control: 'inline-radio', options: ['default'] },
12
18
  size: { control: 'select', options: ['xxl', 'l', 'm', 's', 'fit'] },
13
19
  status: { control: 'select', options: ['active', 'inactive'] },
20
+ type: {
21
+ control: 'select',
22
+ options: extraType,
23
+ if: { arg: 'hasExtra', truthy: true },
24
+ },
25
+ extraPlacement: {
26
+ control: 'select',
27
+ options: extraPlacements,
28
+ if: { arg: 'hasExtra', truthy: true },
29
+ },
30
+ counterView: {
31
+ control: 'select',
32
+ options: counterViews,
33
+ if: { arg: 'type', eq: 'counter' },
34
+ },
35
+ count: {
36
+ control: 'number',
37
+ if: { arg: 'type', eq: 'counter' },
38
+ },
39
+ maxCount: {
40
+ control: 'number',
41
+ if: { arg: 'type', eq: 'counter' },
42
+ },
43
+ badgeView: {
44
+ control: 'select',
45
+ options: badgeViews,
46
+ if: { arg: 'type', eq: 'badge' },
47
+ },
48
+ text: {
49
+ control: 'text',
50
+ if: { arg: 'type', eq: 'badge' },
51
+ },
52
+ customColor: {
53
+ control: 'color',
54
+ if: { arg: 'type', eq: 'badge' },
55
+ },
56
+ customBackgroundColor: {
57
+ control: 'color',
58
+ if: { arg: 'type', eq: 'badge' },
59
+ },
60
+ pilled: {
61
+ control: 'boolean',
62
+ if: { arg: 'type', eq: 'badge' },
63
+ },
14
64
  },
15
65
  };
16
66
 
17
67
  export default meta;
18
68
 
19
- type Story = StoryObj<ComponentProps<typeof Avatar>>;
69
+ type StoryProps = ComponentProps<typeof Avatar> & {
70
+ enableContentLeft: boolean;
71
+ enableContentRight: boolean;
72
+ };
73
+ type Story = StoryObj<StoryProps>;
74
+
75
+ const BellIcon = (props) => (
76
+ <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
77
+ <path
78
+ 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"
79
+ fill="currentColor"
80
+ />
81
+ </svg>
82
+ );
20
83
 
21
84
  export const Default: Story = {
22
85
  args: {
@@ -24,21 +87,75 @@ export const Default: Story = {
24
87
  size: 'xxl',
25
88
  name: 'Иван Фадеев',
26
89
  url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
27
- status: 'active',
28
90
  isScalable: false,
91
+ hasExtra: false,
92
+ extraPlacement: 'top-right',
93
+ type: undefined,
94
+ counterView: 'accent',
95
+ count: 3,
96
+ maxCount: 10,
97
+ badgeView: 'accent',
98
+ text: '31',
99
+ pilled: true,
100
+ enableContentLeft: false,
101
+ enableContentRight: false,
29
102
  },
30
103
  argTypes: {
104
+ enableContentLeft: {
105
+ control: { type: 'boolean' },
106
+ if: { arg: 'type', eq: 'badge' },
107
+ },
108
+ enableContentRight: {
109
+ control: { type: 'boolean' },
110
+ if: { arg: 'type', eq: 'badge' },
111
+ },
31
112
  ...disableProps(['focused']),
32
113
  },
114
+ render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
115
+ const iconSize = () => {
116
+ switch (size) {
117
+ case 'xxl':
118
+ return '1rem';
119
+ case 'm':
120
+ return '0.625rem';
121
+ default:
122
+ return '0.75rem';
123
+ }
124
+ };
125
+
126
+ return (
127
+ <>
128
+ <Avatar
129
+ contentLeft={enableContentLeft ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
130
+ contentRight={
131
+ !enableContentLeft && enableContentRight ? (
132
+ <BellIcon width={iconSize()} height={iconSize()} />
133
+ ) : undefined
134
+ }
135
+ size={size}
136
+ {...rest}
137
+ />
138
+ </>
139
+ );
140
+ },
33
141
  };
34
142
 
35
143
  export const Accessibility: Story = {
36
144
  args: {
37
145
  role: 'button',
146
+ name: 'Иван Фадеев',
38
147
  tabIndex: 0,
39
148
  view: 'default',
40
149
  size: 'xxl',
41
- name: 'Иван Фадеев',
42
150
  status: 'active',
151
+ focused: true,
152
+ hasExtra: false,
153
+ extraPlacement: 'top-right',
154
+ type: undefined,
155
+ counterView: 'accent',
156
+ count: 3,
157
+ maxCount: 10,
158
+ badgeView: 'accent',
159
+ text: '31',
43
160
  },
44
161
  };
package/emotion/es/components/Avatar/Avatar.config.js CHANGED
@@ -1,4 +1,4 @@
1
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
1
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
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, avatarTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
4
4
  export var config = {
@@ -12,14 +12,32 @@ export var config = {
12
12
  },
13
13
  size: {
14
14
  // TODO: #1044 токены типографики в Avatar
15
- xxl: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 6.25rem;\n ", ": 2rem;\n ", ": 600;\n ", ": 2rem;\n ", ": 0.75rem;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
16
- l: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 3rem;\n ", ": 1.25rem;\n ", ": 600;\n ", ": 1.25rem;\n ", ": 0.5rem;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
17
- m: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.25rem;\n ", ": 0.875rem;\n ", ": 600;\n ", ": 0.875rem;\n ", ": 0.5rem;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
18
- s: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 0.5rem;\n ", ": 600;\n ", ": 0.5rem;\n ", ": 0.375rem;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
15
+ xxl: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 6.25rem;\n ", ": 2rem;\n ", ": 600;\n ", ": 2rem;\n ", ": 0.75rem;\n\n ", ": 0.5rem;\n ", ": 1.75rem;\n ", ": 0 0.688rem;\n ", ": 0 0.375rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": -0.063rem;\n ", ": 0.25rem;\n\n ", ": 0.25rem;\n ", ": -0.063rem;\n ", ": 1.25rem;\n\n ", ": 1rem;\n ", ": 1.75rem;\n ", ": 0 0.625rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n "])), 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),
16
+ l: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 3rem;\n ", ": 1.25rem;\n ", ": 600;\n ", ": 1.25rem;\n ", ": 0.5rem;\n\n ", ": 2;\n\n ", ": 0.375rem;\n ", ": 1.25rem;\n ", ": 0 0.438rem;\n ", ": 0 0.25rem;\n\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n\n ", ": -0.063rem;\n ", ": 0.125rem;\n\n ", ": 0.125rem;\n ", ": -0.063rem;\n ", ": 1.25rem;\n\n ", ": 1rem;\n ", ": 1.25rem;\n ", ": 0 0.375rem;\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n "])), 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),
17
+ m: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.25rem;\n ", ": 0.875rem;\n ", ": 600;\n ", ": 0.875rem;\n ", ": 0.5rem;\n\n ", ": 2;\n\n ", ": 0.25rem;\n ", ": 1rem;\n ", ": 0 0.25rem;\n ", ": 0 0.188rem;\n\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n\n ", ": -0.063rem;\n ", ": 0.125rem;\n\n ", ": 0.125rem;\n ", ": -0.063rem;\n ", ": 1.25rem;\n\n ", ": 1rem;\n ", ": 1rem;\n ", ": 0 0.25rem;\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n "])), 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),
18
+ s: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 0.5rem;\n ", ": 600;\n ", ": 0.5rem;\n ", ": 0.375rem;\n\n ", ": 1;\n\n ", ": 1rem;\n ", ": 0.75rem;\n ", ": 0 0.125rem;\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n "])), 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),
19
19
  fit: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 100%;\n ", ": 0;\n ", ": 0;\n ", ": 0;\n ", ": 0;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize)
20
20
  },
21
21
  focused: {
22
22
  "true": /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.1rem;\n ", ": -0.2rem;\n ", ": var(--surface-accent);\n "])), tokens.outlineSize, tokens.outlineOffset, tokens.outlineColor)
23
+ },
24
+ badgeView: {
25
+ "default": /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default);\n\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n\n ", ": var(--text-primary);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
26
+ accent: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n\n ", ": var(--text-accent);\n ", ": var(--surface-transparent-accent);\n\n ", ": var(--text-accent);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
27
+ positive: /*#__PURE__*/css(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-positive);\n\n ", ": var(--text-positive);\n ", ": var(--surface-transparent-positive);\n\n ", ": var(--text-positive);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
28
+ warning: /*#__PURE__*/css(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-warning);\n\n ", ": var(--text-warning);\n ", ": var(--surface-transparent-warning);\n\n ", ": var(--text-warning);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
29
+ negative: /*#__PURE__*/css(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-negative);\n\n ", ": var(--text-negative);\n ", ": var(--surface-transparent-negative);\n\n ", ": var(--text-negative);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
30
+ dark: /*#__PURE__*/css(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-solid-default);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-transparent-deep);\n\n ", ": var(--on-light-text-primary);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
31
+ light: /*#__PURE__*/css(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-light-text-primary);\n ", ": var(--on-dark-surface-solid-default);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-dark-surface-transparent-card);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear)
32
+ },
33
+ counterView: {
34
+ "default": /*#__PURE__*/css(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default);\n "])), tokens.counterColor, tokens.counterBackground),
35
+ accent: /*#__PURE__*/css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n "])), tokens.counterColor, tokens.counterBackground),
36
+ positive: /*#__PURE__*/css(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-positive);\n "])), tokens.counterColor, tokens.counterBackground),
37
+ warning: /*#__PURE__*/css(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-warning);\n "])), tokens.counterColor, tokens.counterBackground),
38
+ negative: /*#__PURE__*/css(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-negative);\n "])), tokens.counterColor, tokens.counterBackground),
39
+ dark: /*#__PURE__*/css(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-solid-default);\n "])), tokens.counterColor, tokens.counterBackground),
40
+ light: /*#__PURE__*/css(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-light-text-primary);\n ", ": var(--on-dark-surface-solid-default);\n "])), tokens.counterColor, tokens.counterBackground)
23
41
  }
24
42
  }
25
43
  };
package/emotion/es/components/Avatar/Avatar.stories.tsx CHANGED
@@ -1,9 +1,15 @@
1
+ import React from 'react';
1
2
  import type { ComponentProps } from 'react';
2
3
  import type { StoryObj, Meta } from '@storybook/react';
3
4
  import { disableProps } from '@salutejs/plasma-sb-utils';
4
5
 
5
6
  import { Avatar } from './Avatar';
6
7
 
8
+ const extraPlacements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
9
+ const extraType = ['', 'badge', 'counter'];
10
+ const counterViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
11
+ const badgeViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
12
+
7
13
  const meta: Meta<typeof Avatar> = {
8
14
  title: 'Data Display/Avatar',
9
15
  component: Avatar,
@@ -11,12 +17,69 @@ const meta: Meta<typeof Avatar> = {
11
17
  view: { control: 'inline-radio', options: ['default'] },
12
18
  size: { control: 'select', options: ['xxl', 'l', 'm', 's', 'fit'] },
13
19
  status: { control: 'select', options: ['active', 'inactive'] },
20
+ type: {
21
+ control: 'select',
22
+ options: extraType,
23
+ if: { arg: 'hasExtra', truthy: true },
24
+ },
25
+ extraPlacement: {
26
+ control: 'select',
27
+ options: extraPlacements,
28
+ if: { arg: 'hasExtra', truthy: true },
29
+ },
30
+ counterView: {
31
+ control: 'select',
32
+ options: counterViews,
33
+ if: { arg: 'type', eq: 'counter' },
34
+ },
35
+ count: {
36
+ control: 'number',
37
+ if: { arg: 'type', eq: 'counter' },
38
+ },
39
+ maxCount: {
40
+ control: 'number',
41
+ if: { arg: 'type', eq: 'counter' },
42
+ },
43
+ badgeView: {
44
+ control: 'select',
45
+ options: badgeViews,
46
+ if: { arg: 'type', eq: 'badge' },
47
+ },
48
+ text: {
49
+ control: 'text',
50
+ if: { arg: 'type', eq: 'badge' },
51
+ },
52
+ customColor: {
53
+ control: 'color',
54
+ if: { arg: 'type', eq: 'badge' },
55
+ },
56
+ customBackgroundColor: {
57
+ control: 'color',
58
+ if: { arg: 'type', eq: 'badge' },
59
+ },
60
+ pilled: {
61
+ control: 'boolean',
62
+ if: { arg: 'type', eq: 'badge' },
63
+ },
14
64
  },
15
65
  };
16
66
 
17
67
  export default meta;
18
68
 
19
- type Story = StoryObj<ComponentProps<typeof Avatar>>;
69
+ type StoryProps = ComponentProps<typeof Avatar> & {
70
+ enableContentLeft: boolean;
71
+ enableContentRight: boolean;
72
+ };
73
+ type Story = StoryObj<StoryProps>;
74
+
75
+ const BellIcon = (props) => (
76
+ <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
77
+ <path
78
+ 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"
79
+ fill="currentColor"
80
+ />
81
+ </svg>
82
+ );
20
83
 
21
84
  export const Default: Story = {
22
85
  args: {
@@ -24,21 +87,75 @@ export const Default: Story = {
24
87
  size: 'xxl',
25
88
  name: 'Иван Фадеев',
26
89
  url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
27
- status: 'active',
28
90
  isScalable: false,
91
+ hasExtra: false,
92
+ extraPlacement: 'top-right',
93
+ type: undefined,
94
+ counterView: 'accent',
95
+ count: 3,
96
+ maxCount: 10,
97
+ badgeView: 'accent',
98
+ text: '31',
99
+ pilled: true,
100
+ enableContentLeft: false,
101
+ enableContentRight: false,
29
102
  },
30
103
  argTypes: {
104
+ enableContentLeft: {
105
+ control: { type: 'boolean' },
106
+ if: { arg: 'type', eq: 'badge' },
107
+ },
108
+ enableContentRight: {
109
+ control: { type: 'boolean' },
110
+ if: { arg: 'type', eq: 'badge' },
111
+ },
31
112
  ...disableProps(['focused']),
32
113
  },
114
+ render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
115
+ const iconSize = () => {
116
+ switch (size) {
117
+ case 'xxl':
118
+ return '1rem';
119
+ case 'm':
120
+ return '0.625rem';
121
+ default:
122
+ return '0.75rem';
123
+ }
124
+ };
125
+
126
+ return (
127
+ <>
128
+ <Avatar
129
+ contentLeft={enableContentLeft ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
130
+ contentRight={
131
+ !enableContentLeft && enableContentRight ? (
132
+ <BellIcon width={iconSize()} height={iconSize()} />
133
+ ) : undefined
134
+ }
135
+ size={size}
136
+ {...rest}
137
+ />
138
+ </>
139
+ );
140
+ },
33
141
  };
34
142
 
35
143
  export const Accessibility: Story = {
36
144
  args: {
37
145
  role: 'button',
146
+ name: 'Иван Фадеев',
38
147
  tabIndex: 0,
39
148
  view: 'default',
40
149
  size: 'xxl',
41
- name: 'Иван Фадеев',
42
150
  status: 'active',
151
+ focused: true,
152
+ hasExtra: false,
153
+ extraPlacement: 'top-right',
154
+ type: undefined,
155
+ counterView: 'accent',
156
+ count: 3,
157
+ maxCount: 10,
158
+ badgeView: 'accent',
159
+ text: '31',
43
160
  },
44
161
  };
package/es/components/Avatar/Avatar.config.js CHANGED
@@ -1,4 +1,4 @@
1
- import './Avatar.config_weecw4.css';
1
+ import './Avatar.config_1buqzeq.css';
2
2
  var config = {
3
3
  defaults: {
4
4
  view: 'default',
@@ -18,6 +18,24 @@ var config = {
18
18
  },
19
19
  focused: {
20
20
  "true": "t12fbiph"
21
+ },
22
+ badgeView: {
23
+ "default": "d1v24dm1",
24
+ accent: "aklmhlm",
25
+ positive: "pts1qri",
26
+ warning: "wu8qekr",
27
+ negative: "nc00x8o",
28
+ dark: "d4vpurz",
29
+ light: "lh713v8"
30
+ },
31
+ counterView: {
32
+ "default": "d18xlm4d",
33
+ accent: "a19kwqy5",
34
+ positive: "p1jpkhmc",
35
+ warning: "w1rt05zb",
36
+ negative: "n18uzb5o",
37
+ dark: "dwmydiz",
38
+ light: "l84jq18"
21
39
  }
22
40
  }
23
41
  };