From af67e19cca850e40361bb3cc324fa56eff9939c8 Mon Sep 17 00:00:00 2001
From: maria-hambardzumian
<164881199+maria-hambardzumian@users.noreply.github.com>
Date: Mon, 23 Dec 2024 12:54:55 +0400
Subject: [PATCH] EPMRPP-97554 || Notification (#58)
* EPMRPP-97554 || Notification
* EPMRPP-97554 || review fix
* EPMRPP-97554 || review fix
* EPMRPP-97554 || review fix - 2
* EPMRPP-97554 || renaming Notification -> SystemAlert
---
src/components/icons/index.ts | 3 +
src/components/icons/svg/error.svg | 3 +
src/components/icons/svg/info.svg | 3 +
src/components/icons/svg/success.svg | 3 +
src/components/index.ts | 1 +
src/components/systemAlert/index.ts | 17 +++++
.../systemAlert/systemAlert.module.scss | 66 +++++++++++++++++++
.../systemAlert/systemAlert.stories.tsx | 30 +++++++++
src/components/systemAlert/systemAlert.tsx | 57 ++++++++++++++++
src/components/systemAlert/types.ts | 15 +++++
10 files changed, 198 insertions(+)
create mode 100644 src/components/icons/svg/error.svg
create mode 100644 src/components/icons/svg/info.svg
create mode 100644 src/components/icons/svg/success.svg
create mode 100644 src/components/systemAlert/index.ts
create mode 100644 src/components/systemAlert/systemAlert.module.scss
create mode 100644 src/components/systemAlert/systemAlert.stories.tsx
create mode 100644 src/components/systemAlert/systemAlert.tsx
create mode 100644 src/components/systemAlert/types.ts
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 8480677..5573141 100644
--- a/src/components/icons/index.ts
+++ b/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';
diff --git a/src/components/icons/svg/error.svg b/src/components/icons/svg/error.svg
new file mode 100644
index 0000000..438ad35
--- /dev/null
+++ b/src/components/icons/svg/error.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/components/icons/svg/info.svg b/src/components/icons/svg/info.svg
new file mode 100644
index 0000000..e5969d1
--- /dev/null
+++ b/src/components/icons/svg/info.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/components/icons/svg/success.svg b/src/components/icons/svg/success.svg
new file mode 100644
index 0000000..3626537
--- /dev/null
+++ b/src/components/icons/svg/success.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index 47a82ae..f2e7911 100644
--- a/src/components/index.ts
+++ b/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';
diff --git a/src/components/systemAlert/index.ts b/src/components/systemAlert/index.ts
new file mode 100644
index 0000000..3968fce
--- /dev/null
+++ b/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';
diff --git a/src/components/systemAlert/systemAlert.module.scss b/src/components/systemAlert/systemAlert.module.scss
new file mode 100644
index 0000000..41dfc8a
--- /dev/null
+++ b/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);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/systemAlert/systemAlert.stories.tsx b/src/components/systemAlert/systemAlert.stories.tsx
new file mode 100644
index 0000000..d1ea5b2
--- /dev/null
+++ b/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 = {
+ 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;
+
+export const Default: Story = {
+ render: (args) => (
+
+
+
+ ),
+};
diff --git a/src/components/systemAlert/systemAlert.tsx b/src/components/systemAlert/systemAlert.tsx
new file mode 100644
index 0000000..a5bb85a
--- /dev/null
+++ b/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 = ({
+ 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 ;
+ case 'success':
+ return ;
+ case 'error':
+ return ;
+ default:
+ return icon;
+ }
+ };
+ return (
+
+
{getIcon()}
+
+
{title}
+
+
+
+ );
+};
diff --git a/src/components/systemAlert/types.ts b/src/components/systemAlert/types.ts
new file mode 100644
index 0000000..2b70403
--- /dev/null
+++ b/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;
+}