Skip to content

Commit

Permalink
feat(vara-ui): add notification variant and dark mode support to `A…
Browse files Browse the repository at this point in the history 
…lert` (#1688)

Co-authored-by: Nikita Yutanov <[email protected]>
  • Loading branch information
@ereburg @nikitayutanov
ereburg and nikitayutanov authored Jan 8, 2025
1 parent e5b2f8c commit 9260f69
Show file tree
Hide file tree
Showing 10 changed files with 216 additions and 93 deletions.
2 changes: 1 addition & 1 deletion utils/vara-ui/src/assets/images/cross.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
184 changes: 104 additions & 80 deletions utils/vara-ui/src/components/alert/alert.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
@use '../../utils' as *;

@keyframes rotating {
to {
transform: rotate(360deg);
}
}

.root {
width: 480px;
position: fixed;
Expand All @@ -6,131 +14,147 @@
z-index: 20;
}

.alert {
padding: 24px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0px 10px 20px 0px #5b5b5b26;
.container {
@include lightDark(background-color, #fff, #272b2f);

> * + * {
margin-top: 8px;
}
}

.notification {
padding: 16px;
border-radius: 8px;
display: flex;
flex-direction: column;

.body {
padding-left: 32px;
}
border: 1px solid transparent;

.header::before {
margin-right: 12px;
@include lightMode() {
box-shadow: 0 10px 20px 0 rgba(92, 92, 92, 0.15);
}
}

.header {
display: flex;
align-items: center;
}

font-size: 16px;
font-weight: 500;
line-height: 19px;
letter-spacing: 0;
.title {
text-transform: capitalize;
}

.button {
@include lightDark(color, #000, #fff);

&::before {
content: '';
margin-left: auto;

svg {
width: 20px;
height: 20px;
margin-right: 8px;
background-size: cover;
background-repeat: no-repeat;
}
}

.success {
color: #0ed3a3;
.body {
@include lightDark(color, #525251, #fff);

&::before {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.6453 8.03281C17.3508 7.725 17.0461 7.40781 16.9312 7.12891C16.825 6.87344 16.8187 6.45 16.8125 6.03984C16.8008 5.27734 16.7883 4.41328 16.1875 3.8125C15.5867 3.21172 14.7227 3.19922 13.9602 3.1875C13.55 3.18125 13.1266 3.175 12.8711 3.06875C12.593 2.95391 12.275 2.64922 11.9672 2.35469C11.4281 1.83672 10.8156 1.25 10 1.25C9.18437 1.25 8.57266 1.83672 8.03281 2.35469C7.725 2.64922 7.40781 2.95391 7.12891 3.06875C6.875 3.175 6.45 3.18125 6.03984 3.1875C5.27734 3.19922 4.41328 3.21172 3.8125 3.8125C3.21172 4.41328 3.20312 5.27734 3.1875 6.03984C3.18125 6.45 3.175 6.87344 3.06875 7.12891C2.95391 7.40703 2.64922 7.725 2.35469 8.03281C1.83672 8.57188 1.25 9.18437 1.25 10C1.25 10.8156 1.83672 11.4273 2.35469 11.9672C2.64922 12.275 2.95391 12.5922 3.06875 12.8711C3.175 13.1266 3.18125 13.55 3.1875 13.9602C3.19922 14.7227 3.21172 15.5867 3.8125 16.1875C4.41328 16.7883 5.27734 16.8008 6.03984 16.8125C6.45 16.8187 6.87344 16.825 7.12891 16.9312C7.40703 17.0461 7.725 17.3508 8.03281 17.6453C8.57188 18.1633 9.18437 18.75 10 18.75C10.8156 18.75 11.4273 18.1633 11.9672 17.6453C12.275 17.3508 12.5922 17.0461 12.8711 16.9312C13.1266 16.825 13.55 16.8187 13.9602 16.8125C14.7227 16.8008 15.5867 16.7883 16.1875 16.1875C16.7883 15.5867 16.8008 14.7227 16.8125 13.9602C16.8187 13.55 16.825 13.1266 16.9312 12.8711C17.0461 12.593 17.3508 12.275 17.6453 11.9672C18.1633 11.4281 18.75 10.8156 18.75 10C18.75 9.18437 18.1633 8.57266 17.6453 8.03281ZM13.5672 8.56719L9.19219 12.9422C9.13414 13.0003 9.06521 13.0464 8.98934 13.0779C8.91346 13.1093 8.83213 13.1255 8.75 13.1255C8.66787 13.1255 8.58654 13.1093 8.51066 13.0779C8.43479 13.0464 8.36586 13.0003 8.30781 12.9422L6.43281 11.0672C6.31554 10.9499 6.24965 10.7909 6.24965 10.625C6.24965 10.4591 6.31554 10.3001 6.43281 10.1828C6.55009 10.0655 6.70915 9.99965 6.875 9.99965C7.04085 9.99965 7.19991 10.0655 7.31719 10.1828L8.75 11.6164L12.6828 7.68281C12.7409 7.62474 12.8098 7.57868 12.8857 7.54725C12.9616 7.51583 13.0429 7.49965 13.125 7.49965C13.2071 7.49965 13.2884 7.51583 13.3643 7.54725C13.4402 7.57868 13.5091 7.62474 13.5672 7.68281C13.6253 7.74088 13.6713 7.80982 13.7027 7.88569C13.7342 7.96156 13.7503 8.04288 13.7503 8.125C13.7503 8.20712 13.7342 8.28844 13.7027 8.36431C13.6713 8.44018 13.6253 8.50912 13.5672 8.56719Z' fill='%230ED3A3'/%3E%3C/svg%3E");
}
overflow: hidden;
text-overflow: ellipsis;
}

.error {
color: #ff0101;
.footer {
@include lightDark(color, #9babb0, rgba(245, 245, 245, 0.8));

&::before {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.3851 9.11873L10.8812 1.61404C10.647 1.38123 10.3302 1.25055 9.99999 1.25055C9.66976 1.25055 9.35294 1.38123 9.11874 1.61404L1.61874 9.11873C1.38593 9.35293 1.25525 9.66975 1.25525 9.99998C1.25525 10.3302 1.38593 10.647 1.61874 10.8812L9.12265 18.3859C9.35685 18.6187 9.67367 18.7494 10.0039 18.7494C10.3341 18.7494 10.6509 18.6187 10.8851 18.3859L18.3891 10.8812C18.6219 10.647 18.7525 10.3302 18.7525 9.99998C18.7525 9.66975 18.6219 9.35293 18.3891 9.11873H18.3851ZM9.37499 6.24998C9.37499 6.08422 9.44084 5.92525 9.55805 5.80804C9.67526 5.69083 9.83423 5.62498 9.99999 5.62498C10.1658 5.62498 10.3247 5.69083 10.4419 5.80804C10.5591 5.92525 10.625 6.08422 10.625 6.24998V10.625C10.625 10.7907 10.5591 10.9497 10.4419 11.0669C10.3247 11.1841 10.1658 11.25 9.99999 11.25C9.83423 11.25 9.67526 11.1841 9.55805 11.0669C9.44084 10.9497 9.37499 10.7907 9.37499 10.625V6.24998ZM9.99999 14.375C9.81457 14.375 9.63332 14.32 9.47914 14.217C9.32497 14.114 9.20481 13.9675 9.13385 13.7962C9.0629 13.6249 9.04433 13.4364 9.0805 13.2546C9.11668 13.0727 9.20597 12.9057 9.33708 12.7746C9.46819 12.6435 9.63524 12.5542 9.81709 12.518C9.99895 12.4818 10.1875 12.5004 10.3588 12.5713C10.5301 12.6423 10.6765 12.7625 10.7795 12.9166C10.8825 13.0708 10.9375 13.2521 10.9375 13.4375C10.9375 13.6861 10.8387 13.9246 10.6629 14.1004C10.4871 14.2762 10.2486 14.375 9.99999 14.375Z' fill='%23FF3231'/%3E%3C/svg%3E");
}
font-size: 14px;
font-weight: 400;
line-height: 20px;
}

.info {
color: #000;
.alert {
gap: 8px;
padding: 24px 48px 24px 24px;
border-radius: 4px;

&::before {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.99697 18.3312C14.5999 18.3312 18.3313 14.5998 18.3313 9.99685C18.3313 5.3939 14.5999 1.66248 9.99697 1.66248C5.39402 1.66248 1.6626 5.3939 1.6626 9.99685C1.6626 14.5998 5.39402 18.3312 9.99697 18.3312ZM9.9939 5.88123C9.56242 5.88123 9.21265 6.231 9.21265 6.66248C9.21265 7.09395 9.56242 7.44373 9.9939 7.44373C10.4254 7.44373 10.7752 7.09395 10.7752 6.66248C10.7752 6.231 10.4254 5.88123 9.9939 5.88123ZM10.7751 9.99581C10.7751 9.56434 10.4254 9.21456 9.9939 9.21456C9.56242 9.21456 9.21265 9.56434 9.21265 9.99581V13.3291C9.21265 13.7606 9.56242 14.1104 9.9939 14.1104C10.4254 14.1104 10.7751 13.7606 10.7751 13.3291V9.99581Z' fill='black'/%3E%3C/svg%3E");
.header {
gap: 8px;
}
}

.notification-warning {
color: #000;
.title {
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}

.body {
padding: 4px 0 6px;

&::before {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_11222_5954)'%3E%3Cpath d='M10.0001 6.66669V10M10.0001 13.3334H10.0084M18.3334 10C18.3334 14.6024 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6024 1.66675 10C1.66675 5.39765 5.39771 1.66669 10.0001 1.66669C14.6025 1.66669 18.3334 5.39765 18.3334 10Z' stroke='%23FF3231' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_11222_5954'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
font-size: 14px;
font-weight: 400;
line-height: 1.4;
}
}

.notification-info {
color: #000;
.notification {
gap: 4px;
padding: 16px 48px 16px 16px;
border-radius: 8px;

&::before {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_11222_5950)'%3E%3Cpath d='M10.0001 13.3334V10M10.0001 6.66669H10.0084M18.3334 10C18.3334 14.6024 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6024 1.66675 10C1.66675 5.39765 5.39771 1.66669 10.0001 1.66669C14.6025 1.66669 18.3334 5.39765 18.3334 10Z' stroke='%230ED3A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_11222_5950'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
.header {
gap: 12px;
}
}

.loading {
color: #3975e9;
.title {
@include lightDark(color, #000, #fff);

&::before {
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 2.5c3.393 0 6.474 1.361 8.729 3.564l1.418-1.418a.498.498 0 0 1 .834.216l2 7a.5.5 0 0 1-.618.618l-7-1.999a.5.5 0 0 1-.216-.835L21.6 8.192A9.446 9.446 0 0 0 15 5.5c-5.239 0-9.5 4.261-9.5 9.5 0 5.238 4.261 9.5 9.5 9.5 5.238 0 9.5-4.262 9.5-9.5 0-.248-.018-.492-.038-.736l3.035.875C27.422 21.968 21.846 27.5 15 27.5 8.107 27.5 2.5 21.892 2.5 15 2.5 8.107 8.107 2.5 15 2.5Z' fill='%233975E9'/%3E%3C/svg%3E");
animation: rotating 1s linear infinite;
font-size: 17px;
font-weight: 700;
line-height: 1.4;
}
}

.button {
align-self: flex-start;
margin-left: auto;
width: 12.5px;
height: 12.5px;
.body,
.footer {
padding-left: 28px;
}

.body {
font-size: 16px;
font-weight: 400;
line-height: 1.4;
}
}

.body {
padding-right: 24px;
.success {
@include darkMode() {
border-color: rgba(0, 255, 196, 0.6);
}

font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0;
.header {
@include lightDark(color, #0dd3a2, #00ffc4);
}
}

overflow: hidden;
text-overflow: ellipsis;
.error {
@include darkMode() {
border-color: rgba(255, 55, 87, 0.6);
}

.header {
@include lightDark(color, #ff3231, #ff3757);
}
}

.footer {
color: #9cacb1;
font-size: 14px;
font-weight: 400;
line-height: 20px;
.info {
@include darkMode() {
border-color: rgba(255, 255, 255, 0.6);
}

.header {
@include lightDark(color, #000, #fff);
}
}

@keyframes rotating {
from {
transform: rotate(0deg);
.loading {
@include darkMode() {
border-color: rgba(58, 172, 233, 0.6);
}

to {
transform: rotate(360deg);
.header {
@include lightDark(color, #3a74e9, rgba(58, 172, 233, 1));
}

.icon {
animation: rotating 1s linear infinite;
}
}
54 changes: 48 additions & 6 deletions utils/vara-ui/src/components/alert/alert.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const Success: Story = {
alert: {
id: '0',
content:
'Backups of this machine are stopped. There has no connection with machine. Please restore the connection with the machine to resume backups restore the connection with the machine.',
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, commodi dolore eaque eos est exercitationem inventore laboriosam modi perferendis voluptas!',
options: { type: 'success', isClosed: true },
},
},
Expand All @@ -25,7 +25,7 @@ const Error: Story = {
alert: {
id: '0',
content:
'Backups of this machine are stopped. There has no connection with machine. Please restore the connection with the machine to resume backups restore the connection with the machine.',
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, commodi dolore eaque eos est exercitationem inventore laboriosam modi perferendis voluptas!',
options: { type: 'error', isClosed: true },
},
},
Expand All @@ -36,7 +36,7 @@ const Loading: Story = {
alert: {
id: '0',
content:
'Backups of this machine are stopped. There has no connection with machine. Please restore the connection with the machine to resume backups restore the connection with the machine.',
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, commodi dolore eaque eos est exercitationem inventore laboriosam modi perferendis voluptas!',
options: { type: 'loading', isClosed: true },
},
},
Expand All @@ -47,7 +47,7 @@ const Info: Story = {
alert: {
id: '0',
content:
'Backups of this machine are stopped. There has no connection with machine. Please restore the connection with the machine to resume backups restore the connection with the machine.',
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, commodi dolore eaque eos est exercitationem inventore laboriosam modi perferendis voluptas!',
options: { type: 'info', isClosed: true },
},
},
Expand All @@ -58,7 +58,7 @@ const WithFooter: Story = {
alert: {
id: '0',
content:
'Backups of this machine are stopped. There has no connection with machine. Please restore the connection with the machine to resume backups restore the connection with the machine.',
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, commodi dolore eaque eos est exercitationem inventore laboriosam modi perferendis voluptas!',
footer: 'YYYY-MM-DD / 00:00:00',
options: { type: 'info', isClosed: true },
},
Expand All @@ -85,5 +85,47 @@ const NotificationInfo: Story = {
},
};

const NotificationSuccess: Story = {
args: {
alert: {
id: '0',
content: 'Text',
options: { type: 'success', variant: 'notification', isClosed: true, title: 'Heading' },
},
},
};

const NotificationLoading: Story = {
args: {
alert: {
id: '0',
content: 'Text',
options: { type: 'loading', variant: 'notification', isClosed: true, title: 'Heading' },
},
},
};

const NotificationWithFooter: Story = {
args: {
alert: {
id: '0',
content: 'Text',
footer: 'YYYY-MM-DD / 00:00:00',
options: { type: 'info', variant: 'notification', isClosed: true, title: 'Heading' },
},
},
};

export default meta;
export { Success, Error, Loading, Info, WithFooter, NotificationError, NotificationInfo };
export {
Success,
Error,
Loading,
Info,
WithFooter,
NotificationSuccess,
NotificationError,
NotificationLoading,
NotificationInfo,
NotificationWithFooter,
};
26 changes: 20 additions & 6 deletions utils/vara-ui/src/components/alert/alert.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import { CSSProperties, ReactNode } from 'react';
import cx from 'clsx';

import CrossSVG from '../../assets/images/cross.svg?react';
import { Button } from '../button';
import SuccessSVG from './assets/success.svg?react';
import WarningSVG from './assets/warning.svg?react';
import InfoSVG from './assets/info.svg?react';
import LoadingSVG from './assets/loading.svg?react';
import WarningCircleSVG from './assets/warning-circle.svg?react';
import styles from './alert.module.scss';

type Options = {
Expand All @@ -16,24 +22,32 @@ type Options = {
type AlertType = {
id: string;
content: ReactNode;
footer?: ReactNode;
options: Options;
footer?: ReactNode;
};

type Props = {
alert: AlertType;
close: () => void;
};

const ICONS = {
success: SuccessSVG,
error: WarningSVG,
info: InfoSVG,
loading: LoadingSVG,
} as const;

function Alert({ alert, close }: Props) {
const { content, options, footer } = alert;
const { type, title, style, isClosed, variant } = options;
const isNotification = variant === 'notification';
const { variant = 'alert', type, title, style, isClosed } = options;
const SVG = variant === 'alert' || type === 'loading' ? ICONS[type] : WarningCircleSVG;

return (
<div className={cx(styles.alert, isNotification && styles.notification)} style={style}>
<header className={cx(styles.header, styles[type])}>
{title || type}
<div className={cx(styles.container, styles[variant], styles[type])} style={style}>
<header className={styles.header}>
<SVG className={styles.icon} />
<h2 className={styles.title}>{title || type}</h2>

{isClosed && <Button icon={CrossSVG} color="transparent" className={styles.button} onClick={close} />}
</header>
Expand Down
3 changes: 3 additions & 0 deletions utils/vara-ui/src/components/alert/assets/info.svg
View file
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 utils/vara-ui/src/components/alert/assets/loading.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 9260f69

Please sign in to comment.