@salutejs/plasma-new-hope 0.238.1-canary.1688.12706274765.0 → 0.239.0-canary.1696.12706339837.0

package/styled-components/es/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -6,6 +7,11 @@ import { argTypesFromConfig, WithTheme } from '../../../_helpers';
 
 import { Avatar, mergedConfig } from './Avatar';
 
+const extraPlacements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+const extraType = ['', 'badge', 'counter'];
+const counterViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
+const badgeViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
+
 const meta: Meta<typeof Avatar> = {
     title: 'b2c/Data Display/Avatar',
     decorators: [WithTheme],
@@ -13,12 +19,77 @@ const meta: Meta<typeof Avatar> = {
     argTypes: {
         ...argTypesFromConfig(mergedConfig),
         status: { control: 'select', options: ['active', 'inactive'] },
+        type: {
+            control: 'select',
+            options: extraType,
+            if: { arg: 'hasExtra', truthy: true },
+        },
+        extraPlacement: {
+            control: 'select',
+            options: extraPlacements,
+            if: { arg: 'hasExtra', truthy: true },
+        },
+        counterView: {
+            control: 'select',
+            options: counterViews,
+            if: { arg: 'type', eq: 'counter' },
+        },
+        count: {
+            control: 'number',
+            if: { arg: 'type', eq: 'counter' },
+        },
+        maxCount: {
+            control: 'number',
+            if: { arg: 'type', eq: 'counter' },
+        },
+        badgeView: {
+            control: 'select',
+            options: badgeViews,
+            if: { arg: 'type', eq: 'badge' },
+        },
+        text: {
+            control: 'text',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        customColor: {
+            control: 'color',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        customBackgroundColor: {
+            control: 'color',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        pilled: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        transparent: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        clear: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'badge' },
+        },
     },
 };
 
 export default meta;
 
-type Story = StoryObj<ComponentProps<typeof Avatar>>;
+type StoryProps = ComponentProps<typeof Avatar> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+};
+type Story = StoryObj<StoryProps>;
+
+const BellIcon = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
+        <path
+            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"
+            fill="currentColor"
+        />
+    </svg>
+);
 
 export const Default: Story = {
     args: {
@@ -27,10 +98,58 @@ export const Default: Story = {
         name: 'Иван Фадеев',
         url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
         isScalable: false,
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
+        pilled: true,
+        clear: false,
+        transparent: false,
+        enableContentLeft: false,
+        enableContentRight: false,
     },
     argTypes: {
+        enableContentLeft: {
+            control: { type: 'boolean' },
+            if: { arg: 'type', eq: 'badge' },
+        },
+        enableContentRight: {
+            control: { type: 'boolean' },
+            if: { arg: 'type', eq: 'badge' },
+        },
         ...disableProps(['focused']),
     },
+    render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
+        const iconSize = () => {
+            switch (size) {
+                case 'xxl':
+                    return '1rem';
+                case 'm':
+                    return '0.625rem';
+                default:
+                    return '0.75rem';
+            }
+        };
+
+        return (
+            <>
+                <Avatar
+                    contentLeft={enableContentLeft ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
+                    contentRight={
+                        !enableContentLeft && enableContentRight ? (
+                            <BellIcon width={iconSize()} height={iconSize()} />
+                        ) : undefined
+                    }
+                    size={size}
+                    {...rest}
+                />
+            </>
+        );
+    },
 };
 
 export const Accessibility: Story = {
@@ -42,6 +161,14 @@ export const Accessibility: Story = {
         size: 'xxl',
         status: 'active',
         focused: true,
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
     },
 };
 
@@ -55,6 +182,14 @@ export const AccessibilityWithURL: Story = {
         focused: true,
         name: 'Микула Селянинович',
         url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
     },
 };
 
@@ -67,5 +202,13 @@ export const AccessibilityWithCustomText: Story = {
         status: 'inactive',
         focused: true,
         customText: 'ФИО',
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
     },
 };

package/styled-components/es/examples/plasma_web/components/Avatar/Avatar.config.js

@@ -10,14 +10,32 @@ export var config = {
       "default": /*#__PURE__*/css(["", ":var(--text-accent-gradient);", ":linear-gradient(94deg,rgba(62,121,240,0.2) 6.49%,rgba(39,198,229,0.2) 93.51%);", ":var(--surface-positive);", ":var(--surface-solid-tertiary);", ":1.02;"], tokens.color, tokens.backgroundColor, tokens.statusOnlineColor, tokens.statusOfflineColor, tokens.scaleHover)
     },
     size: {
-      xxl: /*#__PURE__*/css(["", ":6.25rem;", ":2rem;", ":600;", ":2rem;", ":0.75rem;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
-      l: /*#__PURE__*/css(["", ":3rem;", ":1.25rem;", ":600;", ":1.25rem;", ":0.5rem;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
-      m: /*#__PURE__*/css(["", ":2.25rem;", ":0.875rem;", ":600;", ":0.875rem;", ":0.5rem;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
-      s: /*#__PURE__*/css(["", ":1.5rem;", ":0.5rem;", ":600;", ":0.5rem;", ":0.375rem;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
+      xxl: /*#__PURE__*/css(["", ":6.25rem;", ":2rem;", ":600;", ":2rem;", ":0.75rem;", ":0.5rem;", ":1.75rem;", ":0 0.6875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;", ":1.25rem;", ":1rem;", ":1.75rem;", ":0 0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.badgeBorderRadius, tokens.badgeHeight, tokens.badgePadding, tokens.badgePaddingIconOnly, tokens.badgeFontFamily, tokens.badgeFontSize, tokens.badgeFontStyle, tokens.badgeFontWeight, tokens.badgeLetterSpacing, tokens.badgeLineHeight, tokens.badgeLeftContentMarginLeft, tokens.badgeLeftContentMarginRight, tokens.badgeRightContentMarginLeft, tokens.badgeRightContentMarginRight, tokens.badgePilledBorderRadius, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
+      l: /*#__PURE__*/css(["", ":3rem;", ":1.25rem;", ":600;", ":1.25rem;", ":0.5rem;", ":2;", ":0.375rem;", ":1.25rem;", ":0 0.4375rem;", ":0 0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;", ":1.25rem;", ":1rem;", ":1.25rem;", ":0 0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.extraPlacementFactor, tokens.badgeBorderRadius, tokens.badgeHeight, tokens.badgePadding, tokens.badgePaddingIconOnly, tokens.badgeFontFamily, tokens.badgeFontSize, tokens.badgeFontStyle, tokens.badgeFontWeight, tokens.badgeLetterSpacing, tokens.badgeLineHeight, tokens.badgeLeftContentMarginLeft, tokens.badgeLeftContentMarginRight, tokens.badgeRightContentMarginLeft, tokens.badgeRightContentMarginRight, tokens.badgePilledBorderRadius, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
+      m: /*#__PURE__*/css(["", ":2.25rem;", ":0.875rem;", ":600;", ":0.875rem;", ":0.5rem;", ":2;", ":0.25rem;", ":1rem;", ":0 0.25rem;", ":0 0.188rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;", ":1.25rem;", ":1rem;", ":1rem;", ":0 0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.extraPlacementFactor, tokens.badgeBorderRadius, tokens.badgeHeight, tokens.badgePadding, tokens.badgePaddingIconOnly, tokens.badgeFontFamily, tokens.badgeFontSize, tokens.badgeFontStyle, tokens.badgeFontWeight, tokens.badgeLetterSpacing, tokens.badgeLineHeight, tokens.badgeLeftContentMarginLeft, tokens.badgeLeftContentMarginRight, tokens.badgeRightContentMarginLeft, tokens.badgeRightContentMarginRight, tokens.badgePilledBorderRadius, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
+      s: /*#__PURE__*/css(["", ":1.5rem;", ":0.5rem;", ":600;", ":0.5rem;", ":0.375rem;", ":1;", ":1rem;", ":0.75rem;", ":0 0.125rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.extraPlacementFactor, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
       fit: /*#__PURE__*/css(["", ":100%;", ":0;", ":0;", ":0;", ":0;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize)
     },
     focused: {
       "true": /*#__PURE__*/css(["", ":0.1rem;", ":-0.2rem;", ":var(--surface-accent);"], tokens.outlineSize, tokens.outlineOffset, tokens.outlineColor)
+    },
+    badgeView: {
+      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-clear);"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);", ":var(--surface-clear)"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);", ":var(--surface-clear)"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);", ":var(--surface-clear)"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);", ":var(--surface-clear)"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-text-pri ", ":var(--surface-clear)mary);"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-prima ", ":var(--surface-clear)ry);"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear)
+    },
+    counterView: {
+      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);"], tokens.counterColor, tokens.counterBackground),
+      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);"], tokens.counterColor, tokens.counterBackground),
+      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);"], tokens.counterColor, tokens.counterBackground),
+      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);"], tokens.counterColor, tokens.counterBackground),
+      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);"], tokens.counterColor, tokens.counterBackground),
+      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);"], tokens.counterColor, tokens.counterBackground),
+      light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);"], tokens.counterColor, tokens.counterBackground)
     }
   }
 };

package/styled-components/es/examples/plasma_web/components/Avatar/Avatar.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -6,6 +7,11 @@ import { argTypesFromConfig, WithTheme } from '../../../_helpers';
 
 import { Avatar, mergedConfig } from './Avatar';
 
+const extraPlacements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+const extraType = ['', 'badge', 'counter'];
+const counterViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
+const badgeViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
+
 const meta: Meta<typeof Avatar> = {
     title: 'web/Data Display/Avatar',
     decorators: [WithTheme],
@@ -13,12 +19,77 @@ const meta: Meta<typeof Avatar> = {
     argTypes: {
         ...argTypesFromConfig(mergedConfig),
         status: { control: 'select', options: ['active', 'inactive'] },
+        type: {
+            control: 'select',
+            options: extraType,
+            if: { arg: 'hasExtra', truthy: true },
+        },
+        extraPlacement: {
+            control: 'select',
+            options: extraPlacements,
+            if: { arg: 'hasExtra', truthy: true },
+        },
+        counterView: {
+            control: 'select',
+            options: counterViews,
+            if: { arg: 'type', eq: 'counter' },
+        },
+        count: {
+            control: 'number',
+            if: { arg: 'type', eq: 'counter' },
+        },
+        maxCount: {
+            control: 'number',
+            if: { arg: 'type', eq: 'counter' },
+        },
+        badgeView: {
+            control: 'select',
+            options: badgeViews,
+            if: { arg: 'type', eq: 'badge' },
+        },
+        text: {
+            control: 'text',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        customColor: {
+            control: 'color',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        customBackgroundColor: {
+            control: 'color',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        pilled: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        transparent: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        clear: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'badge' },
+        },
     },
 };
 
 export default meta;
 
-type Story = StoryObj<ComponentProps<typeof Avatar>>;
+type StoryProps = ComponentProps<typeof Avatar> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+};
+type Story = StoryObj<StoryProps>;
+
+const BellIcon = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
+        <path
+            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"
+            fill="currentColor"
+        />
+    </svg>
+);
 
 export const Default: Story = {
     args: {
@@ -27,10 +98,58 @@ export const Default: Story = {
         name: 'Иван Фадеев',
         url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
         isScalable: false,
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
+        pilled: true,
+        clear: false,
+        transparent: false,
+        enableContentLeft: false,
+        enableContentRight: false,
     },
     argTypes: {
+        enableContentLeft: {
+            control: { type: 'boolean' },
+            if: { arg: 'type', eq: 'badge' },
+        },
+        enableContentRight: {
+            control: { type: 'boolean' },
+            if: { arg: 'type', eq: 'badge' },
+        },
         ...disableProps(['focused']),
     },
+    render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
+        const iconSize = () => {
+            switch (size) {
+                case 'xxl':
+                    return '1rem';
+                case 'm':
+                    return '0.625rem';
+                default:
+                    return '0.75rem';
+            }
+        };
+
+        return (
+            <>
+                <Avatar
+                    contentLeft={enableContentLeft ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
+                    contentRight={
+                        !enableContentLeft && enableContentRight ? (
+                            <BellIcon width={iconSize()} height={iconSize()} />
+                        ) : undefined
+                    }
+                    size={size}
+                    {...rest}
+                />
+            </>
+        );
+    },
 };
 
 export const Accessibility: Story = {
@@ -42,6 +161,14 @@ export const Accessibility: Story = {
         size: 'xxl',
         status: 'active',
         focused: true,
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
     },
 };
 
@@ -55,6 +182,14 @@ export const AccessibilityWithURL: Story = {
         focused: true,
         name: 'Микула Селянинович',
         url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
     },
 };
 
@@ -67,5 +202,13 @@ export const AccessibilityWithCustomText: Story = {
         status: 'inactive',
         focused: true,
         customText: 'ФИО',
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
     },
 };

package/types/components/Avatar/Avatar.d.ts

@@ -1,29 +1,11 @@
 import React from 'react';
 import { RootProps } from '../../engines';
-import type { AvatarProps, StatusLabels } from './Avatar.types';
-export declare const avatarRoot: (Root: RootProps<HTMLDivElement, AvatarProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    size: "m" | "s" | "l" | "xxl" | "fit";
-    name?: string | undefined;
-    url?: string | undefined;
-    customText?: string | undefined;
-    status?: "active" | "inactive" | undefined;
-    isScalable?: boolean | undefined;
-    focused?: boolean | undefined;
-    statusLabels?: StatusLabels | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+import type { AvatarProps } from './Avatar.types';
+export declare const avatarRoot: (Root: RootProps<HTMLDivElement, AvatarProps>) => React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
 export declare const avatarConfig: {
     name: string;
     tag: string;
-    layout: (Root: RootProps<HTMLDivElement, AvatarProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-        size: "m" | "s" | "l" | "xxl" | "fit";
-        name?: string | undefined;
-        url?: string | undefined;
-        customText?: string | undefined;
-        status?: "active" | "inactive" | undefined;
-        isScalable?: boolean | undefined;
-        focused?: boolean | undefined;
-        statusLabels?: StatusLabels | undefined;
-    } & React.RefAttributes<HTMLDivElement>>;
+    layout: (Root: RootProps<HTMLDivElement, AvatarProps>) => React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
     base: import("@linaria/core").LinariaClassName;
     variations: {
         size: {

package/types/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,SAAS,EAA0B,MAAM,eAAe,CAAC;AASlE,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAuDhE,eAAO,MAAM,UAAU,SAAU,UAAU,cAAc,EAAE,WAAW,CAAC;;;;;;;;;wCAwCtE,CAAC;AAEF,eAAO,MAAM,YAAY;;;mBA1CQ,UAAU,cAAc,EAAE,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;CA0DtE,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,SAAS,EAA0B,MAAM,eAAe,CAAC;AASlE,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,gBAAgB,CAAC;AAuDhE,eAAO,MAAM,UAAU,SAAU,UAAU,cAAc,EAAE,WAAW,CAAC,uFAsFtE,CAAC;AAEF,eAAO,MAAM,YAAY;;;mBAxFQ,UAAU,cAAc,EAAE,WAAW,CAAC;;;;;;;;;;;;;CAwGtE,CAAC"}

package/types/components/Avatar/Avatar.styles.d.ts

@@ -7,4 +7,63 @@ export declare const Wrapper: import("@linaria/react").StyledComponent<import("r
 export declare const StatusIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Image: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
 export declare const Text: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const ExtraContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ExtraBadge: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../engines/types").PropsType<import("../../engines/types").Variants> & ((import("react").HTMLAttributes<HTMLDivElement> & {
+    text?: string | undefined;
+    customColor?: string | undefined;
+    customBackgroundColor?: string | undefined;
+    maxWidth?: import("csstype").Property.Width<string | number> | undefined;
+    size?: string | undefined;
+    view?: string | undefined;
+} & {
+    contentLeft?: import("react").ReactNode;
+    contentRight?: undefined;
+} & {
+    clear?: true | undefined;
+    pilled?: undefined;
+    transparent?: undefined;
+} & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
+    text?: string | undefined;
+    customColor?: string | undefined;
+    customBackgroundColor?: string | undefined;
+    maxWidth?: import("csstype").Property.Width<string | number> | undefined;
+    size?: string | undefined;
+    view?: string | undefined;
+} & {
+    contentLeft?: import("react").ReactNode;
+    contentRight?: undefined;
+} & {
+    pilled?: boolean | undefined;
+    transparent?: boolean | undefined;
+    clear?: undefined;
+} & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
+    text?: string | undefined;
+    customColor?: string | undefined;
+    customBackgroundColor?: string | undefined;
+    maxWidth?: import("csstype").Property.Width<string | number> | undefined;
+    size?: string | undefined;
+    view?: string | undefined;
+} & {
+    contentLeft?: undefined;
+    contentRight?: import("react").ReactNode;
+} & {
+    clear?: true | undefined;
+    pilled?: undefined;
+    transparent?: undefined;
+} & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
+    text?: string | undefined;
+    customColor?: string | undefined;
+    customBackgroundColor?: string | undefined;
+    maxWidth?: import("csstype").Property.Width<string | number> | undefined;
+    size?: string | undefined;
+    view?: string | undefined;
+} & {
+    contentLeft?: undefined;
+    contentRight?: import("react").ReactNode;
+} & {
+    pilled?: boolean | undefined;
+    transparent?: boolean | undefined;
+    clear?: undefined;
+} & import("react").RefAttributes<HTMLDivElement>))>;
+export declare const ExtraCounter: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../engines/types").PropsType<import("../../engines/types").Variants> & import("react").HTMLAttributes<HTMLDivElement> & import("../Counter/Counter.types").CustomCounterProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Avatar.styles.d.ts.map

package/types/components/Avatar/Avatar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,IAAI,0CAEhB,CAAC;AAEF,eAAO,MAAM,OAAO;iBAA6B,WAAW,CAAC,YAAY,CAAC;EAczE,CAAC;AAEF,eAAO,MAAM,UAAU,qKAItB,CAAC;AAEF,eAAO,MAAM,KAAK,4KAIjB,CAAC;AAEF,eAAO,MAAM,IAAI,uKAUhB,CAAC"}
+{"version":3,"file":"Avatar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.styles.ts"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAQ7C,eAAO,MAAM,IAAI,0CAEhB,CAAC;AAEF,eAAO,MAAM,OAAO;iBAA6B,WAAW,CAAC,YAAY,CAAC;EAczE,CAAC;AAEF,eAAO,MAAM,UAAU,qKAItB,CAAC;AAEF,eAAO,MAAM,KAAK,4KAIjB,CAAC;AAEF,eAAO,MAAM,IAAI,uKAUhB,CAAC;AAEF,eAAO,MAAM,YAAY,qKA0BxB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAsBtB,CAAC;AAEF,eAAO,MAAM,YAAY,mTAYxB,CAAC"}

package/types/components/Avatar/Avatar.tokens.d.ts

@@ -1,5 +1,9 @@
 export declare const classes: {
     avatarItem: string;
+    extraPlacementTopRight: string;
+    extraPlacementTopLeft: string;
+    extraPlacementBottomLeft: string;
+    extraPlacementBottomRight: string;
 };
 export declare const tokens: {
     avatarSize: string;
@@ -16,5 +20,38 @@ export declare const tokens: {
     outlineSize: string;
     outlineOffset: string;
     scaleHover: string;
+    extraPlacementFactor: string;
+    badgeBackground: string;
+    badgeColor: string;
+    badgeBackgroundTransparent: string;
+    badgeColorTransparent: string;
+    badgeColorClear: string;
+    badgeBackgroundClear: string;
+    badgeBorderRadius: string;
+    badgePilledBorderRadius: string;
+    badgeHeight: string;
+    badgePadding: string;
+    badgePaddingIconOnly: string;
+    badgeFontFamily: string;
+    badgeFontSize: string;
+    badgeFontStyle: string;
+    badgeFontWeight: string;
+    badgeLetterSpacing: string;
+    badgeLineHeight: string;
+    badgeLeftContentMarginLeft: string;
+    badgeLeftContentMarginRight: string;
+    badgeRightContentMarginLeft: string;
+    badgeRightContentMarginRight: string;
+    counterBackground: string;
+    counterColor: string;
+    counterBorderRadius: string;
+    counterHeight: string;
+    counterPadding: string;
+    counterFontFamily: string;
+    counterFontSize: string;
+    counterFontStyle: string;
+    counterFontWeight: string;
+    counterLetterSpacing: string;
+    counterLineHeight: string;
 };
 //# sourceMappingURL=Avatar.tokens.d.ts.map

package/types/components/Avatar/Avatar.tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAelB,CAAC"}
+{"version":3,"file":"Avatar.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDlB,CAAC"}

package/types/components/Avatar/Avatar.types.d.ts

@@ -1,6 +1,35 @@
 import { HTMLAttributes } from 'react';
+import type { CustomCounterProps } from '../Counter/Counter.types';
+import type { ClearViewProps, CustomBadgeProps } from '../Badge/Badge.types';
+declare type Only<T, U> = {
+    [P in keyof T]: T[P];
+} & {
+    [P in keyof U]?: never;
+};
+declare type OneOf<T, U> = Only<T, U> | Only<U, T>;
+declare type ExtraBadgeProps = {
+    /**
+     * Вид Badge
+     * @default
+     * default
+     */
+    badgeView?: string;
+} & Omit<CustomBadgeProps, 'size' | 'view' | 'maxWidth'> & ClearViewProps;
+declare type ExtraCounterProps = {
+    /**
+     * Вид Counter
+     * @default
+     * default
+     */
+    counterView?: string;
+    /**
+     * Отображаемое число. Не может быть меньше 1.
+     */
+    count?: number;
+} & Omit<CustomCounterProps, 'size' | 'view' | 'count'>;
+declare type ExtraProps = OneOf<ExtraBadgeProps, ExtraCounterProps>;
 declare type CustomAvatarProps = {
-    size: 'xxl' | 'l' | 'm' | 's' | 'fit';
+    size?: string;
     name?: string;
     url?: string;
     customText?: string;
@@ -13,7 +42,19 @@ declare type CustomAvatarProps = {
      * { active: 'Активен', inactive: 'Неактивен' }
      */
     statusLabels?: StatusLabels;
-};
+    /**
+     * Включить отображение дополнительного элемента
+     */
+    hasExtra?: boolean;
+    /**
+     * Тип дополнительного элемента
+     */
+    type?: 'badge' | 'counter';
+    /**
+     * Расположение дополнительного элемента
+     */
+    extraPlacement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+} & ExtraProps;
 export declare type StatusLabels = Record<'active' | 'inactive', string>;
 export declare type AvatarProps = HTMLAttributes<HTMLDivElement> & CustomAvatarProps;
 export {};