feat: added new view text content alert (#265)

docs/spec.md

@@ -182,6 +182,8 @@ You can provide all props of [original component](https://preview.gravity-ui.com
 | text       | `string`                                                                                                                                                                                                                                                                                          |   yes    | Text for input                                                      |
 | icon       | `string`                                                                                                                                                                                                                                                                                          |          | Icon name from the [library](https://gravity-ui.com/icons)          |
 | iconColor  | `'primary'` `'complementary'` `'secondary'` `'hint'` `'info'` `'info-heavy'` `'positive'` `'positive-heavy'` `'warning'` `'warning-heavy'` `'danger'` `'danger-heavy'` `'utility'` `'utility-heavy'` `'misc'` `'misc-heavy'` `'brand'` `'dark-primary'` `'dark-complementary'` `'dark-secondary'` |          | The color of the icon, if it does not have the themeLabel parameter |
+| themeIcon  | `'normal'` `'info'` `'success'` `'warning'` `'danger'` `'utility'`                                                                                                                                                                                                                                |          | Alert color                                                         |
+| titleAlert | `string`                                                                                                                                                                                                                                                                                          |          | Alert title                                                         |
 
 #### SelectParams
 

src/lib/core/types/specs.ts

@@ -1,4 +1,4 @@
-import {LabelProps} from '@gravity-ui/uikit';
+import {AlertProps, LabelProps} from '@gravity-ui/uikit';
 import {ColorTextBaseProps} from '@gravity-ui/uikit/build/esm/components/Text/colorText/colorText';
 
 import {ReadAsMethod, SpecTypes} from '../constants';
@@ -173,6 +173,8 @@ export interface StringSpec<
             text: string;
             icon?: string;
             iconColor?: ColorTextBaseProps['color'];
+            titleAlert?: string;
+            themeAlert?: AlertProps['theme'];
         };
         fileInput?: {
             accept?: string;

src/lib/kit/components/Inputs/TextContent/TextContent.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-import {Label, Text} from '@gravity-ui/uikit';
+import {isEmpty} from 'lodash';
+
+import {Alert, Label, Text} from '@gravity-ui/uikit';
 import cloneDeep from 'lodash/cloneDeep';
 
 import {StringIndependentInput, StringSpec} from '../../../../core';
@@ -41,7 +43,22 @@ export const TextContentComponent: React.FC<TextContentComponentProps> = ({
 
     let content = <span dangerouslySetInnerHTML={{__html: text}} />;
 
-    if (textContentParams?.themeLabel) {
+    if (textContentParams?.themeAlert) {
+        const titleAlert =
+            textContentParams?.titleAlert || !isEmpty(textContentParams?.titleAlert)
+                ? textContentParams.titleAlert
+                : undefined;
+
+        content = (
+            <Alert
+                icon={iconLib}
+                message={content}
+                // If the title is an empty line, then you need to explicitly write undefined, otherwise there will be an additional indent
+                title={titleAlert}
+                theme={textContentParams?.themeAlert}
+            />
+        );
+    } else if (textContentParams?.themeLabel) {
         content = (
             <Label
                 size="m"

src/lib/kit/components/Inputs/TextContent/__tests__/TextContent.visual.test.tsx

@@ -69,4 +69,36 @@ test.describe('Text Content', () => {
             await expectScreenshot();
         });
     });
+
+    test.describe('Alert', () => {
+        test('default', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.defaultAlert} />);
+
+            await expectScreenshot();
+        });
+
+        test('layout row', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.alertLayoutRow} />);
+
+            await expectScreenshot();
+        });
+
+        test('layout row verbose', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.alertLayoutRowVerbose} />);
+
+            await expectScreenshot();
+        });
+
+        test('layout transparent', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.alertLayoutTransparent} />);
+
+            await expectScreenshot();
+        });
+
+        test('without title', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.alertWithoutTitle} />);
+
+            await expectScreenshot();
+        });
+    });
 });

src/lib/kit/components/Inputs/TextContent/__tests__/helpers.ts

@@ -132,4 +132,67 @@ export const TEXT_CONTENT_SPEC: Record<string, StringSpec> = {
             },
         },
     },
+    defaultAlert: {
+        type: SpecTypes.String,
+        viewSpec: {
+            type: 'text_content',
+            textContentParams: {
+                text: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit',
+                themeAlert: 'info',
+                titleAlert: 'Title Alert',
+            },
+        },
+    },
+    alertLayoutRow: {
+        type: SpecTypes.String,
+        viewSpec: {
+            type: 'text_content',
+            textContentParams: {
+                text: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit',
+                themeAlert: 'info',
+                titleAlert: 'Title Alert',
+            },
+            layout: 'row',
+            layoutTitle: 'Text Content',
+            layoutDescription: 'Description',
+        },
+    },
+    alertLayoutRowVerbose: {
+        type: SpecTypes.String,
+        viewSpec: {
+            type: 'text_content',
+            textContentParams: {
+                text: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit',
+                themeAlert: 'info',
+                titleAlert: 'Title Alert',
+            },
+            layout: 'row_verbose',
+            layoutTitle: 'Text Content',
+            layoutDescription: 'Description',
+        },
+    },
+    alertLayoutTransparent: {
+        type: SpecTypes.String,
+        viewSpec: {
+            type: 'text_content',
+            textContentParams: {
+                text: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit',
+                themeAlert: 'info',
+                titleAlert: 'Title Alert',
+            },
+            layout: 'transparent',
+            layoutTitle: 'Text Content',
+            layoutDescription: 'Description',
+        },
+    },
+    alertWithoutTitle: {
+        type: SpecTypes.String,
+        viewSpec: {
+            type: 'text_content',
+            textContentParams: {
+                text: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit',
+                themeAlert: 'info',
+            },
+        },
+    },
 };

src/lib/kit/utils/common.ts

@@ -122,6 +122,11 @@ export const prepareSpec = <Type extends Spec>(
                 result.viewSpec.textContentParams.themeLabel.toLowerCase();
         }
 
+        if (isString(result.viewSpec?.textContentParams?.themeAlert)) {
+            result.viewSpec.textContentParams.themeAlert =
+                result.viewSpec.textContentParams.themeAlert.toLowerCase();
+        }
+
         if (isString(result.validator)) {
             result.validator = result.validator.toLowerCase();
         }

src/stories/StringTextContent.stories.tsx

@@ -76,3 +76,15 @@ export const Label = template({
         },
     },
 });
+
+export const Alert = template({
+    ...baseSpec,
+    viewSpec: {
+        ...baseSpec.viewSpec,
+        textContentParams: {
+            text: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit',
+            themeAlert: 'info',
+            titleAlert: 'Title alert',
+        },
+    },
+});

src/stories/components/InputPreview/constants.ts

@@ -350,6 +350,15 @@ const textContentParams: ObjectSpec = {
             enum: ['―', ...TEXT_COLORS],
             viewSpec: {type: 'select', layout: 'row', layoutTitle: 'Icon color'},
         },
+        titleAlert: {
+            type: SpecTypes.String,
+            viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Title alert'},
+        },
+        themeAlert: {
+            type: SpecTypes.String,
+            enum: ['―', 'normal', 'info', 'danger', 'warning', 'success', 'utility'],
+            viewSpec: {type: 'select', layout: 'row', layoutTitle: 'Theme alert'},
+        },
     },
     viewSpec: {
         type: 'base',