From c6119a37f0b2ba1c85a24db0d236432bdccacbe9 Mon Sep 17 00:00:00 2001
From: Katrinputrina <putrina.katya@gmail.ru>
Date: Fri, 9 Feb 2024 02:10:32 +0300
Subject: [PATCH] feat(Harmony): create alert component

---
 src/harmony/Alert/Alert.module.css  | 22 +++++++++++++++++++
 src/harmony/Alert/Alert.stories.tsx | 17 +++++++++++++++
 src/harmony/Alert/Alert.tsx         | 34 +++++++++++++++++++++++++++++
 src/harmony/index.ts                |  1 +
 4 files changed, 74 insertions(+)
 create mode 100644 src/harmony/Alert/Alert.module.css
 create mode 100644 src/harmony/Alert/Alert.stories.tsx
 create mode 100644 src/harmony/Alert/Alert.tsx

diff --git a/src/harmony/Alert/Alert.module.css b/src/harmony/Alert/Alert.module.css
new file mode 100644
index 00000000..24817896
--- /dev/null
+++ b/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);
+}
diff --git a/src/harmony/Alert/Alert.stories.tsx b/src/harmony/Alert/Alert.stories.tsx
new file mode 100644
index 00000000..f3516c65
--- /dev/null
+++ b/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',
+    },
+};
diff --git a/src/harmony/Alert/Alert.tsx b/src/harmony/Alert/Alert.tsx
new file mode 100644
index 00000000..dc881051
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/src/harmony/index.ts b/src/harmony/index.ts
index 6ca2df94..ec4eb6c4 100644
--- a/src/harmony/index.ts
+++ b/src/harmony/index.ts
@@ -1,3 +1,4 @@
+export * from './Alert/Alert';
 export * from './AutoComplete/AutoComplete';
 export * from './Badge/Badge';
 export * from './Button/Button';