Skip to content

Commit

Permalink
EPMRPP-97554 || Notification (#58)
Browse files Browse the repository at this point in the history
* EPMRPP-97554 || Notification

* EPMRPP-97554 || review fix

* EPMRPP-97554 || review fix

* EPMRPP-97554 || review fix - 2

* EPMRPP-97554 || renaming Notification -> SystemAlert
  • Loading branch information
maria-hambardzumian authored Dec 23, 2024
1 parent 5d988de commit af67e19
Show file tree
Hide file tree
Showing 10 changed files with 198 additions and 0 deletions.
3 changes: 3 additions & 0 deletions src/components/icons/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
3 changes: 3 additions & 0 deletions src/components/icons/svg/error.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/components/icons/svg/info.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/components/icons/svg/success.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
17 changes: 17 additions & 0 deletions src/components/systemAlert/index.ts
Original file line number Diff line number Diff line change
@@ -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';
66 changes: 66 additions & 0 deletions src/components/systemAlert/systemAlert.module.scss
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
}
30 changes: 30 additions & 0 deletions src/components/systemAlert/systemAlert.stories.tsx
Original file line number Diff line number Diff line change
@@ -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>
),
};
57 changes: 57 additions & 0 deletions src/components/systemAlert/systemAlert.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
15 changes: 15 additions & 0 deletions src/components/systemAlert/types.ts
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit af67e19

Please sign in to comment.