feat(Harmony): create alert component

src/harmony/Alert/Alert.module.css

@@ -0,0 +1,22 @@
+.Alert {
+    display: flex;
+    align-items: center;
+    border-radius: var(--radius-m);
+    padding: var(--gap-sm);
+    gap: var(--gap-s);
+}
+
+.Alert_default {
+    background: var(--gray-900);
+    color: var(--text-primary);
+}
+
+.Alert_danger {
+    color: var(--danger-300);
+    background: var(--danger-900);
+}
+
+.Alert_warning {
+    color: var(--warn-300);
+    background: var(--warn-900);
+}

src/harmony/Alert/Alert.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Alert } from './Alert';
+
+const meta: Meta = {
+    title: '@harmony/Alert',
+    component: Alert,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Alert> = {
+    args: {
+        view: 'default',
+        text: 'The selected date has already passed',
+    },
+};

src/harmony/Alert/Alert.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+import cn from 'classnames';
+import { IconExclamationCircleOutline, IconInfoCircleOutline } from '@taskany/icons';
+
+import { nullable } from '../../utils/nullable';
+import { Text } from '../../harmony/Text/Text';
+
+import s from './Alert.module.css';
+
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    view: 'default' | 'danger' | 'warning';
+    text: string;
+    icon?: ReactNode;
+}
+const viewMap = {
+    default: s.Alert_default,
+    danger: s.Alert_danger,
+    warning: s.Alert_warning,
+};
+
+const iconMap = {
+    default: <IconInfoCircleOutline size="s" />,
+    danger: <IconExclamationCircleOutline size="s" />,
+    warning: <IconExclamationCircleOutline size="s" />,
+};
+
+export const Alert: React.FC<AlertProps> = ({ text, icon, className, view, ...props }) => {
+    return (
+        <div className={cn(s.Alert, viewMap[view], className)} {...props}>
+            {nullable(icon, (i) => i, iconMap[view])}
+            <Text color="inherit">{text}</Text>
+        </div>
+    );
+};

src/harmony/index.ts

@@ -1,3 +1,4 @@
+export * from './Alert/Alert';
 export * from './AutoComplete/AutoComplete';
 export * from './Badge/Badge';
 export * from './Button/Button';