EPMRPP-97554 || Notification

src/components/icons/index.ts

@@ -16,4 +16,7 @@ export { default as CalendarIcon } from './svg/calendar.svg';
 export { default as SearchIcon } from './svg/search.svg';
 export { default as FilterOutlineIcon } from './svg/filterOutline.svg';
 export { default as FilterFilledIcon } from './svg/filterFilled.svg';
+export { default as InfoIcon } from './svg/info.svg';
+export { default as SuccessIcon } from './svg/success.svg';
+export { default as ErrorIcon } from './svg/error.svg';
 export { default as ExportIcon } from './svg/export.svg';

src/components/index.ts

@@ -16,4 +16,5 @@ export { Popover } from './popover';
 export { Pagination } from './pagination';
 export { Table } from './table';
 export { DatePicker } from './datePicker';
+export { SystemAlert } from './systemAlert';
 export * from './icons';

src/components/systemAlert/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { SystemAlert } from './systemAlert';

src/components/systemAlert/systemAlert.module.scss

@@ -0,0 +1,66 @@
+@import 'src/assets/styles/variables/typography';
+@import 'src/assets/styles/mixins/font-scale';
+
+.system-alert {
+  display: flex;
+  box-sizing: border-box;
+  width: 600px;
+  padding: 16px;
+  gap: 16px;
+  border-radius: 16px;
+  justify-content: space-between;
+  box-shadow: var(--rp-ui-base-shadow-secondary);
+
+  &.error {
+    background-color: var(--rp-ui-base-sm-error);
+  }
+
+  &.success {
+    background-color: var(--rp-ui-base-test-execution-status-passed);
+  }
+
+  &.info {
+    background-color: var(--rp-ui-base-no-defect-bug-group);
+  }
+
+  .icon-wrapper {
+    width: 20px;
+    height: 24px;
+    display: grid;
+    place-content: center;
+  }
+
+  .content-wrapper {
+    display: flex;
+    gap: 16px;
+    flex-direction: column;
+    flex: 1;
+
+    .title {
+      text-align: start;
+      font-family: var(--rp-ui-base-font-family);
+      @include font-scale(x2-medium);
+      font-weight: $fw-semi-bold;
+      color: var(--rp-ui-base-bg-000);
+      display: -webkit-box;
+      max-width: 100%;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  }
+
+  .close-button {
+    background: none;
+    border: none;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+
+    svg {
+      path {
+        fill: var(--rp-ui-base-bg-000);
+      }
+    }
+  }
+}

src/components/systemAlert/systemAlert.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SystemAlert } from './systemAlert';
+import { SystemAlertType } from '@components/systemAlert/types';
+
+const meta: Meta<typeof SystemAlert> = {
+  title: 'SystemAlert',
+  component: SystemAlert,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    uid: '1',
+    title: 'Ab dignissimos exercitationem laudantium magni voluptas.',
+    onClose: () => {},
+    type: SystemAlertType.SUCCESS,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SystemAlert>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div style={{ minHeight: '500px', padding: '200px' }}>
+      <SystemAlert {...args}></SystemAlert>
+    </div>
+  ),
+};

src/components/systemAlert/systemAlert.tsx

@@ -0,0 +1,57 @@
+import { FC, ReactElement, useEffect } from 'react';
+import { SystemAlertProps, SystemAlertType } from './types';
+import styles from './systemAlert.module.scss';
+import classNames from 'classnames/bind';
+import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon } from '@components/icons';
+
+const cx = classNames.bind(styles);
+const ERROR_DURATION = 7000;
+const DEFAULT_DURATION = 4000;
+
+export const SystemAlert: FC<SystemAlertProps> = ({
+  uid,
+  title,
+  onClose,
+  icon = null,
+  type = SystemAlertType.INFO,
+  duration = DEFAULT_DURATION,
+  className,
+}): ReactElement => {
+  const adjustedDuration = type === SystemAlertType.ERROR ? ERROR_DURATION : duration;
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onClose(uid);
+    }, adjustedDuration);
+
+    return () => clearTimeout(timer);
+  }, [adjustedDuration, uid, onClose]);
+
+  const getIcon = (): ReactElement | null => {
+    switch (type) {
+      case 'info':
+        return <InfoIcon />;
+      case 'success':
+        return <SuccessIcon />;
+      case 'error':
+        return <ErrorIcon />;
+      default:
+        return icon;
+    }
+  };
+  return (
+    <div className={cx('system-alert', type, className)}>
+      <div className={cx('icon-wrapper')}>{getIcon()}</div>
+      <div className={cx('content-wrapper')}>
+        <h2 className={cx('title')}>{title}</h2>
+      </div>
+      <button
+        className={cx('close-button')}
+        onClick={() => onClose(uid)}
+        aria-label="close system alert"
+      >
+        <CloseIcon />
+      </button>
+    </div>
+  );
+};

src/components/systemAlert/types.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+export enum SystemAlertType {
+  INFO = 'info',
+  SUCCESS = 'success',
+  ERROR = 'error',
+}
+export interface SystemAlertProps {
+  uid: string | number;
+  title: string;
+  onClose: (id: string | number) => void;
+  icon?: ReactElement | null;
+  type?: SystemAlertType;
+  duration?: number;
+  className?: string;
+}