JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: NotificationItem: support link added

Browse Source 
link to support added if support mentioned in message

Change-Id: I9da5b869b2bfed39671b9c622e5262e2a80d0f09
This commit is contained in:
NickolaiYurchenko 2022-01-21 17:17:03 +02:00 committed by Nikolay Yurchenko
parent 9ce1a4e25d
commit 33b9d24c47
4 changed files with 139 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
web/satellite/src/components/notifications/NotificationItem.vue
View File

@ -3,11 +3,21 @@
<template> <template>
<div :style="notification.style" class="notification-wrap" :class="{ active: isClassActive }" @mouseover="onMouseOver" @mouseleave="onMouseLeave"> <div :style="notification.style" class="notification-wrap" :class="{ active: isClassActive }" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
<div class="notification-wrap__text-area"> <div class="notification-wrap__content-area">
<div class="notification-wrap__text-area__image"> <div class="notification-wrap__content-area__image">
<component :is="notification.icon" /> <component :is="notification.icon" />
</div> </div>
<p class="notification-wrap__text-area__message">{{ notification.message }}</p> <div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">{{ notification.message }}</p>
<a
v-if="isSupportLinkMentioned"
:href="requestUrl"
class="notification-wrap__content-area__link"
target="_blank"
>
{{ requestUrl }}
</a>
</div>
</div> </div>
<div class="notification-wrap__buttons-group" @click="onCloseClick"> <div class="notification-wrap__buttons-group" @click="onCloseClick">
<span class="notification-wrap__buttons-group__close"> <span class="notification-wrap__buttons-group__close">
@ -24,6 +34,7 @@ import CloseIcon from '@/../static/images/notifications/close.svg';
import { DelayedNotification } from '@/types/DelayedNotification'; import { DelayedNotification } from '@/types/DelayedNotification';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames'; import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { MetaUtils } from "@/utils/meta";
// @vue/component // @vue/component
@Component({ @Component({
@ -35,8 +46,17 @@ export default class NotificationItem extends Vue {
@Prop({default: () => new DelayedNotification(() => { return; }, '', '')}) @Prop({default: () => new DelayedNotification(() => { return; }, '', '')})
private notification: DelayedNotification; private notification: DelayedNotification;
public readonly requestUrl = MetaUtils.getMetaContent('general-request-url');
public isClassActive = false; public isClassActive = false;
/**
* Indicates if support word is mentioned in message.
* Temporal solution, can be changed later.
*/
public get isSupportLinkMentioned(): boolean {
return this.notification.message.toLowerCase().includes('support');
}
/** /**
* Forces notification deletion. * Forces notification deletion.
*/ */
@ -83,22 +103,38 @@ export default class NotificationItem extends Vue {
margin-bottom: 7px; margin-bottom: 7px;
transition: all 0.3s; transition: all 0.3s;
&__text-area { &__content-area {
display: flex; display: flex;
align-items: center; align-items: center;
font-family: 'font_medium', sans-serif;
font-size: 14px;
&__image { &__image {
max-height: 40px; max-height: 40px;
} }
&__message { &__message-area {
font-family: 'font_medium', sans-serif; display: flex;
font-size: 14px; flex-direction: column;
align-items: flex-start;
justify-content: space-between;
margin: 0 0 0 17px;
}
&__message,
&__link {
height: auto; height: auto;
width: 270px; width: 270px;
margin: 0 0 0 17px;
word-break: break-word; word-break: break-word;
} }
&__link {
margin-top: 5px;
color: #224ca5;
text-decoration: underline;
cursor: pointer;
word-break: normal;
}
} }
&__buttons-group { &__buttons-group {

28
web/satellite/tests/unit/notifications/NotificationItem.spec.ts
View File

@ -47,7 +47,7 @@ describe('NotificationItem', () => {
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.notification-wrap__text-area__message').text()).toMatch(testMessage); expect(wrapper.find('.notification-wrap__content-area__message').text()).toMatch(testMessage);
}); });
it('renders correctly with error props', () => { it('renders correctly with error props', () => {
@ -64,7 +64,7 @@ describe('NotificationItem', () => {
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.notification-wrap__text-area__message').text()).toMatch(testMessage); expect(wrapper.find('.notification-wrap__content-area__message').text()).toMatch(testMessage);
}); });
it('renders correctly with notification props', () => { it('renders correctly with notification props', () => {
@ -81,7 +81,7 @@ describe('NotificationItem', () => {
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.notification-wrap__text-area__message').text()).toMatch(testMessage); expect(wrapper.find('.notification-wrap__content-area__message').text()).toMatch(testMessage);
}); });
it('renders correctly with warning props', () => { it('renders correctly with warning props', () => {
@ -98,7 +98,27 @@ describe('NotificationItem', () => {
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.notification-wrap__text-area__message').text()).toMatch(testMessage); expect(wrapper.find('.notification-wrap__content-area__message').text()).toMatch(testMessage);
});
it('renders correctly with support link', async (): Promise<void> => {
const testMessage = 'testMessage support rest of message';
const wrapper = mount(NotificationItem, {
propsData: {
notification: new DelayedNotification(
jest.fn(),
NOTIFICATION_TYPES.NOTIFICATION,
testMessage,
),
},
});
await wrapper.setData({ requestUrl: 'https://requestUrl.com' })
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.notification-wrap__content-area__message').text()).toMatch(testMessage);
expect(wrapper.find('.notification-wrap__content-area__link').text()).toBeTruthy();
}); });
it('trigger pause correctly', () => { it('trigger pause correctly', () => {

36
web/satellite/tests/unit/notifications/__snapshots__/NotificationArea.spec.ts.snap
View File

@ -5,42 +5,54 @@ exports[`NotificationArea.vue renders correctly 1`] = ``;
exports[`NotificationArea.vue renders correctly with notification 1`] = ` exports[`NotificationArea.vue renders correctly with notification 1`] = `
<div class="notification-container"> <div class="notification-container">
<div class="notification-wrap" style="background-color: rgb(219, 241, 211);"> <div class="notification-wrap" style="background-color: rgb(219, 241, 211);">
<div class="notification-wrap__text-area"> <div class="notification-wrap__content-area">
<div class="notification-wrap__text-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="notification-wrap__content-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#95D486"></rect> <rect width="40" height="40" rx="10" fill="#95D486"></rect>
<path d="M27.7625 17.0601C28.348 16.4741 28.3475 15.5243 27.7614 14.9388C27.1753 14.3533 26.2256 14.3538 25.6401 14.9399L27.7625 17.0601ZM17.7003 25.01L16.6396 26.0707C16.921 26.3521 17.3027 26.5101 17.7007 26.51C18.0986 26.5099 18.4802 26.3517 18.7615 26.0701L17.7003 25.01ZM16.0607 21.249C15.4749 20.6633 14.5251 20.6633 13.9393 21.249C13.3536 21.8348 13.3536 22.7846 13.9393 23.3704L16.0607 21.249ZM25.6401 14.9399L16.6391 23.9499L18.7615 26.0701L27.7625 17.0601L25.6401 14.9399ZM18.761 23.9493L16.0607 21.249L13.9393 23.3704L16.6396 26.0707L18.761 23.9493Z" fill="white"></path> <path d="M27.7625 17.0601C28.348 16.4741 28.3475 15.5243 27.7614 14.9388C27.1753 14.3533 26.2256 14.3538 25.6401 14.9399L27.7625 17.0601ZM17.7003 25.01L16.6396 26.0707C16.921 26.3521 17.3027 26.5101 17.7007 26.51C18.0986 26.5099 18.4802 26.3517 18.7615 26.0701L17.7003 25.01ZM16.0607 21.249C15.4749 20.6633 14.5251 20.6633 13.9393 21.249C13.3536 21.8348 13.3536 22.7846 13.9393 23.3704L16.0607 21.249ZM25.6401 14.9399L16.6391 23.9499L18.7615 26.0701L27.7625 17.0601L25.6401 14.9399ZM18.761 23.9493L16.0607 21.249L13.9393 23.3704L16.6396 26.0707L18.761 23.9493Z" fill="white"></path>
</svg></div> </svg></div>
<p class="notification-wrap__text-area__message">testMessage</p> <div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">testMessage</p>
<!---->
</div>
</div> </div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div> <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
</div> </div>
<div class="notification-wrap" style="background-color: rgb(255, 212, 210);"> <div class="notification-wrap" style="background-color: rgb(255, 212, 210);">
<div class="notification-wrap__text-area"> <div class="notification-wrap__content-area">
<div class="notification-wrap__text-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="notification-wrap__content-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#EB5757"></rect> <rect width="40" height="40" rx="10" fill="#EB5757"></rect>
<path d="M20.5 22.75C21.7676 22.75 22.8047 21.645 22.8047 20.2944V10.4556C22.8047 10.3328 22.797 10.2019 22.7816 10.0791C22.6126 8.90857 21.6523 8 20.5 8C19.2324 8 18.1953 9.10502 18.1953 10.4556V20.2862C18.1953 21.645 19.2324 22.75 20.5 22.75Z" fill="#F5F5F9"></path> <path d="M20.5 22.75C21.7676 22.75 22.8047 21.645 22.8047 20.2944V10.4556C22.8047 10.3328 22.797 10.2019 22.7816 10.0791C22.6126 8.90857 21.6523 8 20.5 8C19.2324 8 18.1953 9.10502 18.1953 10.4556V20.2862C18.1953 21.645 19.2324 22.75 20.5 22.75Z" fill="#F5F5F9"></path>
<path d="M20.5 25.1465C18.7146 25.1465 17.2734 26.5877 17.2734 28.373C17.2734 30.1584 18.7146 31.5996 20.5 31.5996C22.2853 31.5996 23.7265 30.1584 23.7265 28.373C23.7337 26.5877 22.2925 25.1465 20.5 25.1465Z" fill="#F5F5F9"></path> <path d="M20.5 25.1465C18.7146 25.1465 17.2734 26.5877 17.2734 28.373C17.2734 30.1584 18.7146 31.5996 20.5 31.5996C22.2853 31.5996 23.7265 30.1584 23.7265 28.373C23.7337 26.5877 22.2925 25.1465 20.5 25.1465Z" fill="#F5F5F9"></path>
</svg></div> </svg></div>
<p class="notification-wrap__text-area__message">testMessage</p> <div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">testMessage</p>
<!---->
</div>
</div> </div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div> <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
</div> </div>
<div class="notification-wrap" style="background-color: rgb(252, 248, 227);"> <div class="notification-wrap" style="background-color: rgb(252, 248, 227);">
<div class="notification-wrap__text-area"> <div class="notification-wrap__content-area">
<div class="notification-wrap__text-area__image"><svg width="36" height="34" viewBox="0 0 36 34" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="notification-wrap__content-area__image"><svg width="36" height="34" viewBox="0 0 36 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M35.028 27.9606C34.5358 27.0512 34.0405 26.1403 33.5467 25.2262C32.628 23.5309 31.7108 21.8356 30.7936 20.1402C29.6921 18.109 28.5936 16.0746 27.4936 14.0434C26.4311 12.0825 25.3717 10.1247 24.3093 8.16544C23.528 6.7248 22.7499 5.28264 21.9686 3.84064C21.7577 3.45002 21.5467 3.0594 21.3358 2.67188C21.1171 2.26564 20.8858 1.875 20.5546 1.54376C19.3983 0.379681 17.4796 0.156241 16.089 1.03596C15.4921 1.41408 15.0609 1.95004 14.7296 2.56408C14.2218 3.5016 13.714 4.43908 13.2062 5.37972C12.2812 7.09064 11.3546 8.8016 10.4296 10.5125C9.31555 12.5547 8.21087 14.6017 7.10151 16.6485C6.05151 18.5892 4.99995 20.5266 3.94839 22.4689C3.17963 23.8908 2.40931 25.3096 1.63903 26.7313C1.4359 27.1063 1.23279 27.4813 1.02967 27.8563C0.745289 28.3844 0.521865 28.9188 0.451545 29.5282C0.253109 31.2501 1.45935 32.947 3.12655 33.3688C3.56719 33.4813 4.00155 33.486 4.44687 33.486H31.9469H31.9906C32.8969 33.4673 33.7563 33.1267 34.4203 32.5095C35.0609 31.9157 35.4359 31.1032 35.5422 30.2438C35.6437 29.4345 35.4094 28.6688 35.0281 27.961L35.028 27.9606ZM16.4372 10.9526C16.4372 10.0776 17.1528 9.42916 17.9997 9.39012C18.8434 9.35106 19.5621 10.137 19.5621 10.9526V21.9558C19.5621 22.8308 18.8465 23.4792 17.9997 23.5183C17.1559 23.5573 16.4372 22.7714 16.4372 21.9558V10.9526ZM17.9997 28.8402C17.1215 28.8402 16.409 28.1293 16.409 27.2496C16.409 26.3714 17.1199 25.6589 17.9997 25.6589C18.8778 25.6589 19.5903 26.3698 19.5903 27.2496C19.5903 28.1277 18.8778 28.8402 17.9997 28.8402Z" fill="#F4D638"></path> <path d="M35.028 27.9606C34.5358 27.0512 34.0405 26.1403 33.5467 25.2262C32.628 23.5309 31.7108 21.8356 30.7936 20.1402C29.6921 18.109 28.5936 16.0746 27.4936 14.0434C26.4311 12.0825 25.3717 10.1247 24.3093 8.16544C23.528 6.7248 22.7499 5.28264 21.9686 3.84064C21.7577 3.45002 21.5467 3.0594 21.3358 2.67188C21.1171 2.26564 20.8858 1.875 20.5546 1.54376C19.3983 0.379681 17.4796 0.156241 16.089 1.03596C15.4921 1.41408 15.0609 1.95004 14.7296 2.56408C14.2218 3.5016 13.714 4.43908 13.2062 5.37972C12.2812 7.09064 11.3546 8.8016 10.4296 10.5125C9.31555 12.5547 8.21087 14.6017 7.10151 16.6485C6.05151 18.5892 4.99995 20.5266 3.94839 22.4689C3.17963 23.8908 2.40931 25.3096 1.63903 26.7313C1.4359 27.1063 1.23279 27.4813 1.02967 27.8563C0.745289 28.3844 0.521865 28.9188 0.451545 29.5282C0.253109 31.2501 1.45935 32.947 3.12655 33.3688C3.56719 33.4813 4.00155 33.486 4.44687 33.486H31.9469H31.9906C32.8969 33.4673 33.7563 33.1267 34.4203 32.5095C35.0609 31.9157 35.4359 31.1032 35.5422 30.2438C35.6437 29.4345 35.4094 28.6688 35.0281 27.961L35.028 27.9606ZM16.4372 10.9526C16.4372 10.0776 17.1528 9.42916 17.9997 9.39012C18.8434 9.35106 19.5621 10.137 19.5621 10.9526V21.9558C19.5621 22.8308 18.8465 23.4792 17.9997 23.5183C17.1559 23.5573 16.4372 22.7714 16.4372 21.9558V10.9526ZM17.9997 28.8402C17.1215 28.8402 16.409 28.1293 16.409 27.2496C16.409 26.3714 17.1199 25.6589 17.9997 25.6589C18.8778 25.6589 19.5903 26.3698 19.5903 27.2496C19.5903 28.1277 18.8778 28.8402 17.9997 28.8402Z" fill="#F4D638"></path>
</svg></div> </svg></div>
<p class="notification-wrap__text-area__message">testMessage</p> <div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">testMessage</p>
<!---->
</div>
</div> </div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div> <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
</div> </div>
<div class="notification-wrap" style="background-color: rgb(208, 227, 254);"> <div class="notification-wrap" style="background-color: rgb(208, 227, 254);">
<div class="notification-wrap__text-area"> <div class="notification-wrap__content-area">
<div class="notification-wrap__text-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="notification-wrap__content-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#2683FF"></rect> <rect width="40" height="40" rx="10" fill="#2683FF"></rect>
<path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"></path> <path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"></path>
</svg></div> </svg></div>
<p class="notification-wrap__text-area__message">testMessage</p> <div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">testMessage</p>
<!---->
</div>
</div> </div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div> <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
</div> </div>

62
web/satellite/tests/unit/notifications/__snapshots__/NotificationItem.spec.ts.snap
View File

@ -2,12 +2,15 @@
exports[`NotificationItem renders correctly 1`] = ` exports[`NotificationItem renders correctly 1`] = `
<div class="notification-wrap" style="background-color: rgb(208, 227, 254);"> <div class="notification-wrap" style="background-color: rgb(208, 227, 254);">
<div class="notification-wrap__text-area"> <div class="notification-wrap__content-area">
<div class="notification-wrap__text-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="notification-wrap__content-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#2683FF"></rect> <rect width="40" height="40" rx="10" fill="#2683FF"></rect>
<path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"></path> <path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"></path>
</svg></div> </svg></div>
<p class="notification-wrap__text-area__message"></p> <div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message"></p>
<!---->
</div>
</div> </div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div> <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
</div> </div>
@ -15,13 +18,16 @@ exports[`NotificationItem renders correctly 1`] = `
exports[`NotificationItem renders correctly with error props 1`] = ` exports[`NotificationItem renders correctly with error props 1`] = `
<div class="notification-wrap" style="background-color: rgb(255, 212, 210);"> <div class="notification-wrap" style="background-color: rgb(255, 212, 210);">
<div class="notification-wrap__text-area"> <div class="notification-wrap__content-area">
<div class="notification-wrap__text-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="notification-wrap__content-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#EB5757"></rect> <rect width="40" height="40" rx="10" fill="#EB5757"></rect>
<path d="M20.5 22.75C21.7676 22.75 22.8047 21.645 22.8047 20.2944V10.4556C22.8047 10.3328 22.797 10.2019 22.7816 10.0791C22.6126 8.90857 21.6523 8 20.5 8C19.2324 8 18.1953 9.10502 18.1953 10.4556V20.2862C18.1953 21.645 19.2324 22.75 20.5 22.75Z" fill="#F5F5F9"></path> <path d="M20.5 22.75C21.7676 22.75 22.8047 21.645 22.8047 20.2944V10.4556C22.8047 10.3328 22.797 10.2019 22.7816 10.0791C22.6126 8.90857 21.6523 8 20.5 8C19.2324 8 18.1953 9.10502 18.1953 10.4556V20.2862C18.1953 21.645 19.2324 22.75 20.5 22.75Z" fill="#F5F5F9"></path>
<path d="M20.5 25.1465C18.7146 25.1465 17.2734 26.5877 17.2734 28.373C17.2734 30.1584 18.7146 31.5996 20.5 31.5996C22.2853 31.5996 23.7265 30.1584 23.7265 28.373C23.7337 26.5877 22.2925 25.1465 20.5 25.1465Z" fill="#F5F5F9"></path> <path d="M20.5 25.1465C18.7146 25.1465 17.2734 26.5877 17.2734 28.373C17.2734 30.1584 18.7146 31.5996 20.5 31.5996C22.2853 31.5996 23.7265 30.1584 23.7265 28.373C23.7337 26.5877 22.2925 25.1465 20.5 25.1465Z" fill="#F5F5F9"></path>
</svg></div> </svg></div>
<p class="notification-wrap__text-area__message">testMessage</p> <div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">testMessage</p>
<!---->
</div>
</div> </div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div> <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
</div> </div>
@ -29,12 +35,15 @@ exports[`NotificationItem renders correctly with error props 1`] = `
exports[`NotificationItem renders correctly with notification props 1`] = ` exports[`NotificationItem renders correctly with notification props 1`] = `
<div class="notification-wrap" style="background-color: rgb(208, 227, 254);"> <div class="notification-wrap" style="background-color: rgb(208, 227, 254);">
<div class="notification-wrap__text-area"> <div class="notification-wrap__content-area">
<div class="notification-wrap__text-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="notification-wrap__content-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#2683FF"></rect> <rect width="40" height="40" rx="10" fill="#2683FF"></rect>
<path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"></path> <path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"></path>
</svg></div> </svg></div>
<p class="notification-wrap__text-area__message">testMessage</p> <div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">testMessage</p>
<!---->
</div>
</div> </div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div> <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
</div> </div>
@ -42,12 +51,32 @@ exports[`NotificationItem renders correctly with notification props 1`] = `
exports[`NotificationItem renders correctly with success props 1`] = ` exports[`NotificationItem renders correctly with success props 1`] = `
<div class="notification-wrap" style="background-color: rgb(219, 241, 211);"> <div class="notification-wrap" style="background-color: rgb(219, 241, 211);">
<div class="notification-wrap__text-area"> <div class="notification-wrap__content-area">
<div class="notification-wrap__text-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="notification-wrap__content-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#95D486"></rect> <rect width="40" height="40" rx="10" fill="#95D486"></rect>
<path d="M27.7625 17.0601C28.348 16.4741 28.3475 15.5243 27.7614 14.9388C27.1753 14.3533 26.2256 14.3538 25.6401 14.9399L27.7625 17.0601ZM17.7003 25.01L16.6396 26.0707C16.921 26.3521 17.3027 26.5101 17.7007 26.51C18.0986 26.5099 18.4802 26.3517 18.7615 26.0701L17.7003 25.01ZM16.0607 21.249C15.4749 20.6633 14.5251 20.6633 13.9393 21.249C13.3536 21.8348 13.3536 22.7846 13.9393 23.3704L16.0607 21.249ZM25.6401 14.9399L16.6391 23.9499L18.7615 26.0701L27.7625 17.0601L25.6401 14.9399ZM18.761 23.9493L16.0607 21.249L13.9393 23.3704L16.6396 26.0707L18.761 23.9493Z" fill="white"></path> <path d="M27.7625 17.0601C28.348 16.4741 28.3475 15.5243 27.7614 14.9388C27.1753 14.3533 26.2256 14.3538 25.6401 14.9399L27.7625 17.0601ZM17.7003 25.01L16.6396 26.0707C16.921 26.3521 17.3027 26.5101 17.7007 26.51C18.0986 26.5099 18.4802 26.3517 18.7615 26.0701L17.7003 25.01ZM16.0607 21.249C15.4749 20.6633 14.5251 20.6633 13.9393 21.249C13.3536 21.8348 13.3536 22.7846 13.9393 23.3704L16.0607 21.249ZM25.6401 14.9399L16.6391 23.9499L18.7615 26.0701L27.7625 17.0601L25.6401 14.9399ZM18.761 23.9493L16.0607 21.249L13.9393 23.3704L16.6396 26.0707L18.761 23.9493Z" fill="white"></path>
</svg></div> </svg></div>
<p class="notification-wrap__text-area__message">testMessage</p> <div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">testMessage</p>
<!---->
</div>
</div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
</div>
`;
exports[`NotificationItem renders correctly with support link 1`] = `
<div class="notification-wrap" style="background-color: rgb(208, 227, 254);">
<div class="notification-wrap__content-area">
<div class="notification-wrap__content-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#2683FF"></rect>
<path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"></path>
</svg></div>
<div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">testMessage support rest of message</p> <a href="https://requestUrl.com" target="_blank" class="notification-wrap__content-area__link">
https://requestUrl.com
</a>
</div>
</div> </div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div> <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
</div> </div>
@ -55,11 +84,14 @@ exports[`NotificationItem renders correctly with success props 1`] = `
exports[`NotificationItem renders correctly with warning props 1`] = ` exports[`NotificationItem renders correctly with warning props 1`] = `
<div class="notification-wrap" style="background-color: rgb(252, 248, 227);"> <div class="notification-wrap" style="background-color: rgb(252, 248, 227);">
<div class="notification-wrap__text-area"> <div class="notification-wrap__content-area">
<div class="notification-wrap__text-area__image"><svg width="36" height="34" viewBox="0 0 36 34" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="notification-wrap__content-area__image"><svg width="36" height="34" viewBox="0 0 36 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M35.028 27.9606C34.5358 27.0512 34.0405 26.1403 33.5467 25.2262C32.628 23.5309 31.7108 21.8356 30.7936 20.1402C29.6921 18.109 28.5936 16.0746 27.4936 14.0434C26.4311 12.0825 25.3717 10.1247 24.3093 8.16544C23.528 6.7248 22.7499 5.28264 21.9686 3.84064C21.7577 3.45002 21.5467 3.0594 21.3358 2.67188C21.1171 2.26564 20.8858 1.875 20.5546 1.54376C19.3983 0.379681 17.4796 0.156241 16.089 1.03596C15.4921 1.41408 15.0609 1.95004 14.7296 2.56408C14.2218 3.5016 13.714 4.43908 13.2062 5.37972C12.2812 7.09064 11.3546 8.8016 10.4296 10.5125C9.31555 12.5547 8.21087 14.6017 7.10151 16.6485C6.05151 18.5892 4.99995 20.5266 3.94839 22.4689C3.17963 23.8908 2.40931 25.3096 1.63903 26.7313C1.4359 27.1063 1.23279 27.4813 1.02967 27.8563C0.745289 28.3844 0.521865 28.9188 0.451545 29.5282C0.253109 31.2501 1.45935 32.947 3.12655 33.3688C3.56719 33.4813 4.00155 33.486 4.44687 33.486H31.9469H31.9906C32.8969 33.4673 33.7563 33.1267 34.4203 32.5095C35.0609 31.9157 35.4359 31.1032 35.5422 30.2438C35.6437 29.4345 35.4094 28.6688 35.0281 27.961L35.028 27.9606ZM16.4372 10.9526C16.4372 10.0776 17.1528 9.42916 17.9997 9.39012C18.8434 9.35106 19.5621 10.137 19.5621 10.9526V21.9558C19.5621 22.8308 18.8465 23.4792 17.9997 23.5183C17.1559 23.5573 16.4372 22.7714 16.4372 21.9558V10.9526ZM17.9997 28.8402C17.1215 28.8402 16.409 28.1293 16.409 27.2496C16.409 26.3714 17.1199 25.6589 17.9997 25.6589C18.8778 25.6589 19.5903 26.3698 19.5903 27.2496C19.5903 28.1277 18.8778 28.8402 17.9997 28.8402Z" fill="#F4D638"></path> <path d="M35.028 27.9606C34.5358 27.0512 34.0405 26.1403 33.5467 25.2262C32.628 23.5309 31.7108 21.8356 30.7936 20.1402C29.6921 18.109 28.5936 16.0746 27.4936 14.0434C26.4311 12.0825 25.3717 10.1247 24.3093 8.16544C23.528 6.7248 22.7499 5.28264 21.9686 3.84064C21.7577 3.45002 21.5467 3.0594 21.3358 2.67188C21.1171 2.26564 20.8858 1.875 20.5546 1.54376C19.3983 0.379681 17.4796 0.156241 16.089 1.03596C15.4921 1.41408 15.0609 1.95004 14.7296 2.56408C14.2218 3.5016 13.714 4.43908 13.2062 5.37972C12.2812 7.09064 11.3546 8.8016 10.4296 10.5125C9.31555 12.5547 8.21087 14.6017 7.10151 16.6485C6.05151 18.5892 4.99995 20.5266 3.94839 22.4689C3.17963 23.8908 2.40931 25.3096 1.63903 26.7313C1.4359 27.1063 1.23279 27.4813 1.02967 27.8563C0.745289 28.3844 0.521865 28.9188 0.451545 29.5282C0.253109 31.2501 1.45935 32.947 3.12655 33.3688C3.56719 33.4813 4.00155 33.486 4.44687 33.486H31.9469H31.9906C32.8969 33.4673 33.7563 33.1267 34.4203 32.5095C35.0609 31.9157 35.4359 31.1032 35.5422 30.2438C35.6437 29.4345 35.4094 28.6688 35.0281 27.961L35.028 27.9606ZM16.4372 10.9526C16.4372 10.0776 17.1528 9.42916 17.9997 9.39012C18.8434 9.35106 19.5621 10.137 19.5621 10.9526V21.9558C19.5621 22.8308 18.8465 23.4792 17.9997 23.5183C17.1559 23.5573 16.4372 22.7714 16.4372 21.9558V10.9526ZM17.9997 28.8402C17.1215 28.8402 16.409 28.1293 16.409 27.2496C16.409 26.3714 17.1199 25.6589 17.9997 25.6589C18.8778 25.6589 19.5903 26.3698 19.5903 27.2496C19.5903 28.1277 18.8778 28.8402 17.9997 28.8402Z" fill="#F4D638"></path>
</svg></div> </svg></div>
<p class="notification-wrap__text-area__message">testMessage</p> <div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">testMessage</p>
<!---->
</div>
</div> </div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div> <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
</div> </div>