@pareto-engineering/design-system 4.5.0 → 4.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/a/Notification/styles.scss +12 -15
- package/dist/cjs/a/NotificationStack/NotificationStack.js +0 -1
- package/dist/cjs/a/NotificationStack/styles.scss +7 -2
- package/dist/es/a/Notification/styles.scss +12 -15
- package/dist/es/a/NotificationStack/NotificationStack.js +0 -1
- package/dist/es/a/NotificationStack/styles.scss +7 -2
- package/package.json +2 -2
- package/src/ui/a/Notification/styles.scss +12 -15
- package/src/ui/a/NotificationStack/NotificationStack.jsx +0 -1
- package/src/ui/a/NotificationStack/styles.scss +7 -2
- package/tests/__snapshots__/Storyshots.test.js.snap +4 -4
|
@@ -4,12 +4,11 @@
|
|
|
4
4
|
@use "@pareto-engineering/styles/src/mixins";
|
|
5
5
|
@use "@pareto-engineering/styles/src/globals" as *;
|
|
6
6
|
|
|
7
|
-
$default-padding:
|
|
8
|
-
$default-margin:
|
|
9
|
-
$default-border-radius: 1.
|
|
10
|
-
$default-width:
|
|
11
|
-
$default-height:
|
|
12
|
-
$default-right-offset: 7rem;
|
|
7
|
+
$default-padding: 1rem;
|
|
8
|
+
$default-margin: 1rem;
|
|
9
|
+
$default-border-radius: 1.5rem;
|
|
10
|
+
$default-width: var(--notification-width, 30rem);
|
|
11
|
+
$default-height: var(--notification-height, 5rem);
|
|
13
12
|
|
|
14
13
|
.#{bem.$base}.notification {
|
|
15
14
|
align-items: center;
|
|
@@ -18,31 +17,29 @@ $default-right-offset: 7rem;
|
|
|
18
17
|
bottom: 0;
|
|
19
18
|
color: var(--on-x);
|
|
20
19
|
display: flex;
|
|
21
|
-
height: $default-height;
|
|
22
20
|
justify-content: space-between;
|
|
21
|
+
margin-bottom: $default-margin;
|
|
22
|
+
margin-right: $default-margin;
|
|
23
|
+
min-height: $default-height;
|
|
23
24
|
overflow: hidden;
|
|
24
25
|
padding: $default-padding calc($default-padding * 2);
|
|
25
|
-
position:
|
|
26
|
-
right:
|
|
26
|
+
position: fixed;
|
|
27
|
+
right: 0;
|
|
27
28
|
width: $default-width;
|
|
28
29
|
z-index: 9999;
|
|
29
30
|
|
|
30
|
-
&.stacked {
|
|
31
|
-
position: relative;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
31
|
> .message-container {
|
|
35
32
|
align-items: center;
|
|
36
33
|
display: flex;
|
|
37
34
|
overflow: auto;
|
|
38
35
|
|
|
39
36
|
> .message {
|
|
40
|
-
font-size: calc(var(--s0) *
|
|
37
|
+
font-size: calc(var(--s0) * 1rem);
|
|
41
38
|
margin-left: calc($default-margin / 2);
|
|
42
39
|
}
|
|
43
40
|
|
|
44
41
|
> span {
|
|
45
|
-
font-size: calc(var(--s2) *
|
|
42
|
+
font-size: calc(var(--s2) * 1rem);
|
|
46
43
|
}
|
|
47
44
|
}
|
|
48
45
|
|
|
@@ -30,7 +30,6 @@ const NotificationStack = _ref => {
|
|
|
30
30
|
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
|
|
31
31
|
style: style
|
|
32
32
|
}, otherProps), notificationsToDisplay.map(notification => /*#__PURE__*/React.createElement(_Notification.Notification, _extends({
|
|
33
|
-
className: "stacked",
|
|
34
33
|
key: notification?.id || notification.message
|
|
35
34
|
}, notification))));
|
|
36
35
|
};
|
|
@@ -4,15 +4,20 @@
|
|
|
4
4
|
|
|
5
5
|
$default-padding: 1rem;
|
|
6
6
|
$default-margin: 1rem;
|
|
7
|
+
$default-width: var(--notification-stack-width, 30rem);
|
|
7
8
|
|
|
8
9
|
.#{bem.$base}.notification-stack {
|
|
9
10
|
align-items: center;
|
|
10
11
|
bottom: 0;
|
|
11
12
|
display: flex;
|
|
12
13
|
flex-direction: column;
|
|
13
|
-
margin-bottom: $default-margin;
|
|
14
14
|
position: fixed;
|
|
15
15
|
right: 0;
|
|
16
|
-
|
|
16
|
+
width: $default-width;
|
|
17
17
|
z-index: 9999;
|
|
18
|
+
|
|
19
|
+
> .#{bem.$base}.notification {
|
|
20
|
+
position: relative;
|
|
21
|
+
width: 100%;
|
|
22
|
+
}
|
|
18
23
|
}
|
|
@@ -4,12 +4,11 @@
|
|
|
4
4
|
@use "@pareto-engineering/styles/src/mixins";
|
|
5
5
|
@use "@pareto-engineering/styles/src/globals" as *;
|
|
6
6
|
|
|
7
|
-
$default-padding:
|
|
8
|
-
$default-margin:
|
|
9
|
-
$default-border-radius: 1.
|
|
10
|
-
$default-width:
|
|
11
|
-
$default-height:
|
|
12
|
-
$default-right-offset: 7rem;
|
|
7
|
+
$default-padding: 1rem;
|
|
8
|
+
$default-margin: 1rem;
|
|
9
|
+
$default-border-radius: 1.5rem;
|
|
10
|
+
$default-width: var(--notification-width, 30rem);
|
|
11
|
+
$default-height: var(--notification-height, 5rem);
|
|
13
12
|
|
|
14
13
|
.#{bem.$base}.notification {
|
|
15
14
|
align-items: center;
|
|
@@ -18,31 +17,29 @@ $default-right-offset: 7rem;
|
|
|
18
17
|
bottom: 0;
|
|
19
18
|
color: var(--on-x);
|
|
20
19
|
display: flex;
|
|
21
|
-
height: $default-height;
|
|
22
20
|
justify-content: space-between;
|
|
21
|
+
margin-bottom: $default-margin;
|
|
22
|
+
margin-right: $default-margin;
|
|
23
|
+
min-height: $default-height;
|
|
23
24
|
overflow: hidden;
|
|
24
25
|
padding: $default-padding calc($default-padding * 2);
|
|
25
|
-
position:
|
|
26
|
-
right:
|
|
26
|
+
position: fixed;
|
|
27
|
+
right: 0;
|
|
27
28
|
width: $default-width;
|
|
28
29
|
z-index: 9999;
|
|
29
30
|
|
|
30
|
-
&.stacked {
|
|
31
|
-
position: relative;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
31
|
> .message-container {
|
|
35
32
|
align-items: center;
|
|
36
33
|
display: flex;
|
|
37
34
|
overflow: auto;
|
|
38
35
|
|
|
39
36
|
> .message {
|
|
40
|
-
font-size: calc(var(--s0) *
|
|
37
|
+
font-size: calc(var(--s0) * 1rem);
|
|
41
38
|
margin-left: calc($default-margin / 2);
|
|
42
39
|
}
|
|
43
40
|
|
|
44
41
|
> span {
|
|
45
|
-
font-size: calc(var(--s2) *
|
|
42
|
+
font-size: calc(var(--s2) * 1rem);
|
|
46
43
|
}
|
|
47
44
|
}
|
|
48
45
|
|
|
@@ -24,7 +24,6 @@ const NotificationStack = ({
|
|
|
24
24
|
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
|
|
25
25
|
style: style
|
|
26
26
|
}, otherProps), notificationsToDisplay.map(notification => /*#__PURE__*/React.createElement(Notification, _extends({
|
|
27
|
-
className: "stacked",
|
|
28
27
|
key: notification?.id || notification.message
|
|
29
28
|
}, notification))));
|
|
30
29
|
};
|
|
@@ -4,15 +4,20 @@
|
|
|
4
4
|
|
|
5
5
|
$default-padding: 1rem;
|
|
6
6
|
$default-margin: 1rem;
|
|
7
|
+
$default-width: var(--notification-stack-width, 30rem);
|
|
7
8
|
|
|
8
9
|
.#{bem.$base}.notification-stack {
|
|
9
10
|
align-items: center;
|
|
10
11
|
bottom: 0;
|
|
11
12
|
display: flex;
|
|
12
13
|
flex-direction: column;
|
|
13
|
-
margin-bottom: $default-margin;
|
|
14
14
|
position: fixed;
|
|
15
15
|
right: 0;
|
|
16
|
-
|
|
16
|
+
width: $default-width;
|
|
17
17
|
z-index: 9999;
|
|
18
|
+
|
|
19
|
+
> .#{bem.$base}.notification {
|
|
20
|
+
position: relative;
|
|
21
|
+
width: 100%;
|
|
22
|
+
}
|
|
18
23
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pareto-engineering/design-system",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.6.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/es/index.js",
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"relay-test-utils": "^15.0.0"
|
|
83
83
|
},
|
|
84
84
|
"browserslist": "> 2%",
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "55eab180bec6adf2c4acb1908e2e1381495cf4ca"
|
|
86
86
|
}
|
|
@@ -4,12 +4,11 @@
|
|
|
4
4
|
@use "@pareto-engineering/styles/src/mixins";
|
|
5
5
|
@use "@pareto-engineering/styles/src/globals" as *;
|
|
6
6
|
|
|
7
|
-
$default-padding:
|
|
8
|
-
$default-margin:
|
|
9
|
-
$default-border-radius: 1.
|
|
10
|
-
$default-width:
|
|
11
|
-
$default-height:
|
|
12
|
-
$default-right-offset: 7rem;
|
|
7
|
+
$default-padding: 1rem;
|
|
8
|
+
$default-margin: 1rem;
|
|
9
|
+
$default-border-radius: 1.5rem;
|
|
10
|
+
$default-width: var(--notification-width, 30rem);
|
|
11
|
+
$default-height: var(--notification-height, 5rem);
|
|
13
12
|
|
|
14
13
|
.#{bem.$base}.notification {
|
|
15
14
|
align-items: center;
|
|
@@ -18,31 +17,29 @@ $default-right-offset: 7rem;
|
|
|
18
17
|
bottom: 0;
|
|
19
18
|
color: var(--on-x);
|
|
20
19
|
display: flex;
|
|
21
|
-
height: $default-height;
|
|
22
20
|
justify-content: space-between;
|
|
21
|
+
margin-bottom: $default-margin;
|
|
22
|
+
margin-right: $default-margin;
|
|
23
|
+
min-height: $default-height;
|
|
23
24
|
overflow: hidden;
|
|
24
25
|
padding: $default-padding calc($default-padding * 2);
|
|
25
|
-
position:
|
|
26
|
-
right:
|
|
26
|
+
position: fixed;
|
|
27
|
+
right: 0;
|
|
27
28
|
width: $default-width;
|
|
28
29
|
z-index: 9999;
|
|
29
30
|
|
|
30
|
-
&.stacked {
|
|
31
|
-
position: relative;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
31
|
> .message-container {
|
|
35
32
|
align-items: center;
|
|
36
33
|
display: flex;
|
|
37
34
|
overflow: auto;
|
|
38
35
|
|
|
39
36
|
> .message {
|
|
40
|
-
font-size: calc(var(--s0) *
|
|
37
|
+
font-size: calc(var(--s0) * 1rem);
|
|
41
38
|
margin-left: calc($default-margin / 2);
|
|
42
39
|
}
|
|
43
40
|
|
|
44
41
|
> span {
|
|
45
|
-
font-size: calc(var(--s2) *
|
|
42
|
+
font-size: calc(var(--s2) * 1rem);
|
|
46
43
|
}
|
|
47
44
|
}
|
|
48
45
|
|
|
@@ -4,15 +4,20 @@
|
|
|
4
4
|
|
|
5
5
|
$default-padding: 1rem;
|
|
6
6
|
$default-margin: 1rem;
|
|
7
|
+
$default-width: var(--notification-stack-width, 30rem);
|
|
7
8
|
|
|
8
9
|
.#{bem.$base}.notification-stack {
|
|
9
10
|
align-items: center;
|
|
10
11
|
bottom: 0;
|
|
11
12
|
display: flex;
|
|
12
13
|
flex-direction: column;
|
|
13
|
-
margin-bottom: $default-margin;
|
|
14
14
|
position: fixed;
|
|
15
15
|
right: 0;
|
|
16
|
-
|
|
16
|
+
width: $default-width;
|
|
17
17
|
z-index: 9999;
|
|
18
|
+
|
|
19
|
+
> .#{bem.$base}.notification {
|
|
20
|
+
position: relative;
|
|
21
|
+
width: 100%;
|
|
22
|
+
}
|
|
18
23
|
}
|
|
@@ -10696,7 +10696,7 @@ exports[`Storyshots a/NotificationStack Base 1`] = `
|
|
|
10696
10696
|
className="base notification-stack"
|
|
10697
10697
|
>
|
|
10698
10698
|
<div
|
|
10699
|
-
className="base notification
|
|
10699
|
+
className="base notification x-error"
|
|
10700
10700
|
>
|
|
10701
10701
|
<div
|
|
10702
10702
|
className="message-container"
|
|
@@ -10725,7 +10725,7 @@ exports[`Storyshots a/NotificationStack Base 1`] = `
|
|
|
10725
10725
|
</button>
|
|
10726
10726
|
</div>
|
|
10727
10727
|
<div
|
|
10728
|
-
className="base notification
|
|
10728
|
+
className="base notification x-blocked"
|
|
10729
10729
|
>
|
|
10730
10730
|
<div
|
|
10731
10731
|
className="message-container"
|
|
@@ -10754,7 +10754,7 @@ exports[`Storyshots a/NotificationStack Base 1`] = `
|
|
|
10754
10754
|
</button>
|
|
10755
10755
|
</div>
|
|
10756
10756
|
<div
|
|
10757
|
-
className="base notification
|
|
10757
|
+
className="base notification x-in-progress"
|
|
10758
10758
|
>
|
|
10759
10759
|
<div
|
|
10760
10760
|
className="message-container"
|
|
@@ -10783,7 +10783,7 @@ exports[`Storyshots a/NotificationStack Base 1`] = `
|
|
|
10783
10783
|
</button>
|
|
10784
10784
|
</div>
|
|
10785
10785
|
<div
|
|
10786
|
-
className="base notification
|
|
10786
|
+
className="base notification x-success"
|
|
10787
10787
|
>
|
|
10788
10788
|
<div
|
|
10789
10789
|
className="message-container"
|