feat(Alert): add size props; add css-api; refactor component

src/components/Alert/Alert.scss

@@ -3,12 +3,106 @@
 $block: '.#{variables.$ns}alert';
 
 #{$block} {
+    --_--gap: var(--g-spacing-2);
+    --_--align: baseline;
+    --_--title-font-weight: var(--g-text-subheader-font-weight);
+    --_--message-font-weight: var(--g-text-body-font-weight);
+    --_--message-font-size: var(--g-text-body-1-font-size);
+    --_--message-line-height: var(--g-text-body-1-line-height);
+
+    padding: var(--g-alert-padding, var(--_--padding));
+    --g-card-border-radius: var(--g-alert-border-radius, var(--_--border-radius));
+
+    display: flex;
+    align-items: var(--_--align);
+    gap: var(--g-alert-gap, var(--_--gap));
+
+    &_align-center {
+        --_--align: center;
+    }
+
     &_corners_square {
         --g-card-border-radius: 0;
     }
 
+    &_size {
+        &_s {
+            --_--padding: 11px var(--g-spacing-3);
+            --_--border-radius: var(--g-border-radius-m);
+            --_--text-content-gap: 0;
+            --_--content-gap: var(--g-spacing-2);
+            --_--title-font-size: var(--g-text-subheader-1-font-size);
+            --_--title-line-height: var(--g-text-subheader-1-line-height);
+        }
+
+        &_m {
+            --_--padding: var(--g-spacing-4) var(--g-spacing-5);
+            --_--border-radius: var(--g-border-radius-l);
+            --_--text-content-gap: var(--g-spacing-1);
+            --_--content-gap: var(--g-spacing-3);
+            --_--title-font-size: var(--g-text-subheader-2-font-size);
+            --_--title-line-height: var(--g-text-subheader-2-line-height);
+        }
+
+        &_l {
+            --_--padding: var(--g-spacing-6);
+            --_--border-radius: 12px;
+            --_--gap: var(--g-spacing-3);
+            --_--text-content-gap: var(--g-spacing-2);
+            --_--content-gap: var(--g-spacing-5);
+            --_--title-font-size: var(--g-text-subheader-3-font-size);
+            --_--title-line-height: var(--g-text-subheader-3-line-height);
+            --_--message-font-size: var(--g-text-body-2-font-size);
+            --_--message-line-height: var(--g-text-body-2-line-height);
+        }
+    }
+
+    &__main {
+        display: flex;
+        gap: var(--g-alert-content-gap, var(--_--content-gap));
+
+        &_layout_vertical {
+            flex-direction: column;
+        }
+
+        &_layout_horizontal {
+            flex-direction: row;
+        }
+    }
+
     &__text-content {
+        display: flex;
+        flex-direction: column;
         width: 100%;
+        flex-grow: 1;
+
+        gap: var(--g-alert-text-content-gap, var(--_--text-content-gap));
+    }
+
+    &__title {
+        color: var(--g-alert-title-color, var(--g-color-text-primary));
+        font-size: var(--g-alert-title-font-size, var(--_--title-font-size));
+        font-weight: var(--g-alert-title-font-weight, var(--_--title-font-weight));
+        line-height: var(--g-alert-title-line-height, var(--_--title-line-height));
+    }
+
+    &__message {
+        color: var(--g-alert-message-color, var(--g-color-text-complementary));
+        font-size: var(--g-alert-message-font-size, var(--_--message-font-size));
+        font-weight: var(--g-alert-message-font-weight, var(--_--message-font-weight));
+        line-height: var(--g-alert-message-line-height, var(--_--message-line-height));
+    }
+
+    &__actions {
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: wrap;
+
+        gap: var(--g-alert-actions-gap, var(--g-spacing-3));
+
+        &_center {
+            align-items: center;
+        }
     }
 
     &__actions_minContent {

src/components/Alert/Alert.tsx

@@ -4,7 +4,6 @@ import {Button} from '../Button';
 import {Card} from '../Card';
 import {Icon} from '../Icon';
 import {colorText} from '../Text';
-import {Flex, spacing} from '../layout';
 
 import {AlertAction} from './AlertAction';
 import {AlertActions} from './AlertActions';
@@ -19,63 +18,60 @@ export const Alert = (props: AlertProps) => {
     const {
         theme = 'normal',
         view = 'filled',
+        size = 'm',
         layout = 'vertical',
         message,
         className,
         corners,
         style,
         onClose,
-        align,
+        align = 'baseline',
         qa,
     } = props;
 
     return (
         <AlertContextProvider layout={layout} view={view}>
             <Card
                 style={style}
-                className={bAlert({corners}, spacing({py: 4, px: 5}, className))}
+                className={bAlert({corners, size, 'align-center': align === 'center'}, className)}
                 theme={theme}
                 view={view}
                 qa={qa}
             >
-                <Flex gap="3" alignItems={align}>
-                    {typeof props.icon === 'undefined' ? (
-                        <Alert.Icon theme={theme} view={view} />
-                    ) : (
-                        props.icon // ability to pass `null` as `icon` prop value
-                    )}
-                    <Flex direction={layout === 'vertical' ? 'column' : 'row'} gap="5" grow>
-                        <Flex gap="2" grow className={bAlert('text-content')}>
-                            <Flex direction="column" gap="1" grow justifyContent={align}>
-                                {typeof props.title === 'string' ? (
-                                    <Alert.Title text={props.title} />
-                                ) : (
-                                    props.title
-                                )}
-                                {message}
-                            </Flex>
-                        </Flex>
-                        {Array.isArray(props.actions) ? (
-                            <Alert.Actions items={props.actions} />
+                {typeof props.icon === 'undefined' ? (
+                    <Alert.Icon theme={theme} view={view} />
+                ) : (
+                    props.icon // ability to pass `null` as `icon` prop value
+                )}
+                <div className={bAlert('main', {layout})}>
+                    <div className={bAlert('text-content')}>
+                        {typeof props.title === 'string' ? (
+                            <Alert.Title text={props.title} />
                         ) : (
-                            props.actions
+                            props.title
                         )}
-                    </Flex>
-                    {onClose && (
-                        <Button
-                            view="flat"
-                            className={bAlert('close-btn')}
-                            onClick={onClose}
-                            aria-label={i18n('label_close')}
-                        >
-                            <Icon
-                                data={Xmark}
-                                size={DEFAULT_ICON_SIZE}
-                                className={colorText({color: 'secondary'})}
-                            />
-                        </Button>
+                        <div className={bAlert('message')}>{message}</div>
+                    </div>
+                    {Array.isArray(props.actions) ? (
+                        <Alert.Actions items={props.actions} />
+                    ) : (
+                        props.actions
                     )}
-                </Flex>
+                </div>
+                {onClose && (
+                    <Button
+                        view="flat"
+                        className={bAlert('close-btn')}
+                        onClick={onClose}
+                        aria-label={i18n('label_close')}
+                    >
+                        <Icon
+                            data={Xmark}
+                            size={DEFAULT_ICON_SIZE}
+                            className={colorText({color: 'secondary'})}
+                        />
+                    </Button>
+                )}
             </Card>
         </AlertContextProvider>
     );

src/components/Alert/AlertActions.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import {Flex} from '../layout';
-
 import {AlertAction} from './AlertAction';
 import {bAlert} from './constants';
 import type {AlertActionsProps} from './types';
@@ -11,18 +9,18 @@ export const AlertActions = ({items, children, className}: AlertActionsProps) =>
     const {layout} = useAlertContext();
 
     return (
-        <Flex
-            className={bAlert('actions', {minContent: layout === 'horizontal'}, className)}
-            direction="row"
-            gap="3"
-            wrap
-            alignItems={layout === 'horizontal' ? 'center' : 'flex-start'}
+        <div
+            className={bAlert(
+                'actions',
+                {minContent: layout === 'horizontal', center: layout === 'horizontal'},
+                className,
+            )}
         >
             {items?.map(({handler, text}, i) => (
                 <AlertAction key={i} onClick={handler}>
                     {text}
                 </AlertAction>
             )) || children}
-        </Flex>
+        </div>
     );
 };

src/components/Alert/AlertTitle.tsx

@@ -1,12 +1,6 @@
-import {Text} from '../Text';
-
 import {bAlert} from './constants';
 import type {AlertTitleProps} from './types';
 
 export const AlertTitle = ({text, className}: AlertTitleProps) => {
-    return (
-        <Text variant="subheader-2" className={bAlert('title', className)}>
-            {text}
-        </Text>
-    );
+    return <div className={bAlert('title', className)}>{text}</div>;
 };

src/components/Alert/README-ru.md

@@ -219,6 +219,7 @@ LANDING_BLOCK-->
 | Имя       | Описание                                                                                                   |                                Тип                                 | Значение по умолчанию |
 | :-------- | :--------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------: | :-------------------: |
 | theme     | Внешний вид алерта.                                                                                        | `"normal"` `"info"` `"success"` `"warning"` `"danger"` `"utility"` |      `"normal"`       |
+| size      | Размер алерта.                                                                                             |                         `"s"` `"m"` `"l"`                          |         `"m"`         |
 | view      | Включает или отключает цвет фона окна алерта.                                                              |                      `"filled"` `"outlined"`                       |      `"filled"`       |
 | layout    | Используется для привлечения внимания пользователей к контенту, если задано свойство `actions` с кнопками. |                    `"vertical"` `"horizontal"`                     |     `"vertical"`      |
 | corners   | Управляет оформлением углов (прямые или скругленные) для окна алерта.                                      |                       `"rounded"` `"square"`                       |      `"rounded"`      |
@@ -231,3 +232,22 @@ LANDING_BLOCK-->
 | className | Имя CSS-класса алерта.                                                                                     |                              `string`                              |                       |
 | icon      | Переопределяет иконку по умолчанию.                                                                        |                         `React.ReactNode`                          |                       |
 | qa        | HTML-атрибут `data-qa`, используется для тестирования.                                                     |                              `string`                              |                       |
+
+## CSS API
+
+| Name                            | Description                                                                                   |
+| :------------------------------ | :-------------------------------------------------------------------------------------------- |
+| `--g-alert-padding`             | Боковые отступы.                                                                              |
+| `--g-alert-border-radius`       | Радиус скругления углов.                                                                      |
+| `--g-alert-gap-size`            | Расстояние между иконкой, котнетной частью (текстовый контент + действия) и кнопкой закрытия. |
+| `--g-alert-content-gap`         | Расстояние между текстовым контентом и блоком действий.                                       |
+| `--g-alert-text-content-gap`    | Расстояние между заголовком и сообщением.                                                     |
+| `--g-alert-actions-gap`         | Расстояние между кнопками действий.                                                           |
+| `--g-alert-title-color`         | Цвет заголовка.                                                                               |
+| `--g-alert-title-font-size`     | Размер шрифта заголовка.                                                                      |
+| `--g-alert-title-font-weight`   | Жирность шрифта заголовка.                                                                    |
+| `--g-alert-title-line-height`   | Межстрочный интервал заголовка.                                                               |
+| `--g-alert-message-color`       | Цвет сообщения.                                                                               |
+| `--g-alert-message-font-size`   | Размер шрифта сообщения.                                                                      |
+| `--g-alert-message-font-weight` | Жирность шрифта сообщения.                                                                    |
+| `--g-alert-message-line-height` | Межстрочный интервал сообщения.                                                               |

src/components/Alert/README.md

@@ -219,6 +219,7 @@ LANDING_BLOCK-->
 | Name      | Description                                                                 |                                Type                                |   Default    |
 | :-------- | :-------------------------------------------------------------------------- | :----------------------------------------------------------------: | :----------: |
 | theme     | Alert appearance                                                            | `"normal"` `"info"` `"success"` `"warning"` `"danger"` `"utility"` |  `"normal"`  |
+| size      | Alert size                                                                  |                         `"s"` `"m"` `"l"`                          |    `"m"`     |
 | view      | Enable/disable background color of the alert                                |                      `"filled"` `"outlined"`                       |  `"filled"`  |
 | layout    | Used to direct users to content if there is property `actions` with buttons |                    `"vertical"` `"horizontal"`                     | `"vertical"` |
 | corners   | Used for round/square corners of the alert window                           |                       `"rounded"` `"square"`                       | `"rounded"`  |
@@ -231,3 +232,22 @@ LANDING_BLOCK-->
 | className | Name of alert class                                                         |                              `string`                              |              |
 | icon      | Override default icon                                                       |                         `React.ReactNode`                          |              |
 | qa        | HTML `data-qa` attribute, used in tests.                                    |                              `string`                              |              |
+
+## CSS API
+
+| Name                            | Description                                                               |
+| :------------------------------ | :------------------------------------------------------------------------ |
+| `--g-alert-padding`             | Side paddings.                                                            |
+| `--g-alert-border-radius`       | Border radius.                                                            |
+| `--g-alert-gap-size`            | Gap between icon, content part (text content + actions) and close button. |
+| `--g-alert-content-gap`         | Gap between text content and actions.                                     |
+| `--g-alert-text-content-gap`    | Gap between title and message.                                            |
+| `--g-alert-actions-gap`         | Gap between action buttons.                                               |
+| `--g-alert-title-color`         | Title color.                                                              |
+| `--g-alert-title-font-size`     | Title font size.                                                          |
+| `--g-alert-title-font-weight`   | Title font weight.                                                        |
+| `--g-alert-title-line-height`   | Title line height.                                                        |
+| `--g-alert-message-color`       | Message color.                                                            |
+| `--g-alert-message-font-size`   | Message font size.                                                        |
+| `--g-alert-message-font-weight` | Message font weight.                                                      |
+| `--g-alert-message-line-height` | Message line height.                                                      |

src/components/Alert/__stories__/Alert.stories.tsx

@@ -6,7 +6,14 @@ import {Showcase} from '../../../demo/Showcase';
 import {ShowcaseItem} from '../../../demo/ShowcaseItem';
 import {Icon as IconComponent} from '../../Icon';
 import {Alert} from '../Alert';
-import {alignCases, cornersCases, layoutCases, themeCases, viewCases} from '../__tests__/cases';
+import {
+    alignCases,
+    cornersCases,
+    layoutCases,
+    sizeCases,
+    themeCases,
+    viewCases,
+} from '../__tests__/cases';
 import type {AlertProps} from '../types';
 
 export default {
@@ -39,6 +46,22 @@ export const Theme: Story = {
     },
 };
 
+export const Size: Story = {
+    render: (args) => (
+        <Showcase>
+            {sizeCases.map((size, index) => (
+                <ShowcaseItem title={size} key={index}>
+                    <Alert {...args} size={size} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+        actions: [{text: 'First action'}],
+    },
+};
+
 export const CustomIcon: Story = {
     args: {
         ...Default.args,

src/components/Alert/__tests__/Alert.visual.test.tsx

@@ -29,6 +29,12 @@ test.describe('Alert', {tag: '@Alert'}, () => {
         await expectScreenshot();
     });
 
+    test('render story: <Size>', async ({mount, expectScreenshot}) => {
+        await mount(<AlertStories.Size />);
+
+        await expectScreenshot();
+    });
+
     test('render story: <CustomIcon>', async ({mount, expectScreenshot}) => {
         await mount(<AlertStories.CustomIcon />);
 

src/components/Alert/__tests__/cases.tsx

@@ -11,6 +11,8 @@ export const themeCases: Array<NonNullable<AlertProps['theme']>> = [
     'utility',
 ];
 
+export const sizeCases: Array<NonNullable<AlertProps['size']>> = ['s', 'm', 'l'];
+
 export const viewCases: Cases<AlertProps['view']> = ['filled', 'outlined'];
 
 export const layoutCases: Cases<AlertProps['layout']> = ['vertical', 'horizontal'];