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; +}