@justeattakeaway/pie-notification 0.11.0 → 0.12.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/index.js +86 -86
- package/dist/react.js +13 -26
- package/package.json +2 -2
- package/src/notification.scss +4 -5
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { classMap as
|
|
3
|
-
import { html as f, unsafeStatic as
|
|
4
|
-
import {
|
|
5
|
-
import { property as r, queryAssignedElements as
|
|
6
|
-
import { ifDefined as
|
|
1
|
+
import { LitElement as N, unsafeCSS as A, nothing as s } from "lit";
|
|
2
|
+
import { classMap as v } from "lit/directives/class-map.js";
|
|
3
|
+
import { html as f, unsafeStatic as w } from "lit/static-html.js";
|
|
4
|
+
import { dispatchCustomEvent as m, validPropertyValues as $, defineCustomElement as _ } from "@justeattakeaway/pie-webc-core";
|
|
5
|
+
import { property as r, queryAssignedElements as E } from "lit/decorators.js";
|
|
6
|
+
import { ifDefined as C } from "lit/directives/if-defined.js";
|
|
7
7
|
import "@justeattakeaway/pie-button";
|
|
8
8
|
import "@justeattakeaway/pie-icon-button";
|
|
9
9
|
import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
|
|
@@ -11,7 +11,7 @@ import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
|
|
|
11
11
|
import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
|
|
12
12
|
import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
|
|
13
13
|
import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
|
|
14
|
-
const
|
|
14
|
+
const z = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], S = ["h2", "h3", "h4", "h5", "h6"], T = ["inline-content", "full-width"], t = "pie-notification", l = "c-notification", B = `${t}-close`, L = `${t}-open`, V = `${t}-leading-action-click`, D = `${t}-supporting-action-click`, d = {
|
|
15
15
|
variant: "neutral",
|
|
16
16
|
position: "inline-content",
|
|
17
17
|
isDismissible: !1,
|
|
@@ -20,14 +20,13 @@ const E = ["neutral", "neutral-alternative", "info", "success", "warning", "erro
|
|
|
20
20
|
hideIcon: !1,
|
|
21
21
|
isOpen: !0,
|
|
22
22
|
hasStackedActions: !1
|
|
23
|
-
},
|
|
24
|
-
|
|
25
|
-
var
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
return o && a && P(i, n, a), a;
|
|
23
|
+
}, F = "*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-close-icon-offset: var(--dt-spacing-b);--notification-icon-fill: var(--dt-color-content-default);--notification-icon-offset: 2px;--icon-size-override: 24px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height)}.c-notification.c-notification--compact{--notification-direction: row}.c-notification.c-notification--full-width{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification.c-notification--neutral-alternative{--notification-background-color: var(--dt-color-container-default)}.c-notification.c-notification--info{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification.c-notification--success{--notification-background-color: var(--dt-color-support-positive-02);--notification-icon-fill: var(--dt-color-content-positive)}.c-notification.c-notification--warning{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification.c-notification--error{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-support-error)}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}@media (min-width: 769px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row;gap:var(--dt-spacing-c)}.c-notification-content-section.c-notification-content-section--dismissible{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer.c-notification-footer--compact{align-self:flex-end}@media (max-width: 767px){.c-notification-footer.c-notification-footer--stacked{flex-direction:column-reverse}}.icon,::slotted([slot=icon]){display:inline-flex;color:var(--notification-icon-fill);margin-block-start:var(--notification-icon-offset)}@media (max-width: 767px){.icon,::slotted([slot=icon]){margin-block-start:0}}";
|
|
24
|
+
var j = Object.defineProperty, a = (y, i, n, e) => {
|
|
25
|
+
for (var c = void 0, p = y.length - 1, h; p >= 0; p--)
|
|
26
|
+
(h = y[p]) && (c = h(i, n, c) || c);
|
|
27
|
+
return c && j(i, n, c), c;
|
|
29
28
|
};
|
|
30
|
-
class
|
|
29
|
+
const b = class b extends N {
|
|
31
30
|
constructor() {
|
|
32
31
|
super(...arguments), this.isOpen = d.isOpen, this.variant = d.variant, this.position = d.position, this.isDismissible = d.isDismissible, this.isCompact = d.isCompact, this.headingLevel = d.headingLevel, this.hideIcon = d.hideIcon, this.hasStackedActions = d.hasStackedActions;
|
|
33
32
|
}
|
|
@@ -36,7 +35,7 @@ class e extends k {
|
|
|
36
35
|
* It dispatches an event if notification is opened.
|
|
37
36
|
*/
|
|
38
37
|
updated(i) {
|
|
39
|
-
i.has("isOpen") && this.isOpen &&
|
|
38
|
+
i.has("isOpen") && this.isOpen && m(this, L, { targetNotification: this });
|
|
40
39
|
}
|
|
41
40
|
/**
|
|
42
41
|
* Template for the footer area
|
|
@@ -48,16 +47,16 @@ class e extends k {
|
|
|
48
47
|
const {
|
|
49
48
|
leadingAction: i,
|
|
50
49
|
supportingAction: n,
|
|
51
|
-
isCompact:
|
|
52
|
-
hasStackedActions:
|
|
50
|
+
isCompact: e,
|
|
51
|
+
hasStackedActions: c
|
|
53
52
|
} = this, p = {
|
|
54
53
|
[`${l}-footer`]: !0,
|
|
55
|
-
[`${l}-footer--compact`]:
|
|
56
|
-
[`${l}-footer--stacked`]:
|
|
54
|
+
[`${l}-footer--compact`]: e,
|
|
55
|
+
[`${l}-footer--stacked`]: c && !e
|
|
57
56
|
};
|
|
58
57
|
return f`
|
|
59
58
|
<footer
|
|
60
|
-
class="${
|
|
59
|
+
class="${v(p)}"
|
|
61
60
|
data-test-id="${t}-footer">
|
|
62
61
|
${n ? this.renderActionButton(n, "supporting") : s}
|
|
63
62
|
${i ? this.renderActionButton(i, "leading") : s}
|
|
@@ -71,13 +70,13 @@ class e extends k {
|
|
|
71
70
|
* @private
|
|
72
71
|
*/
|
|
73
72
|
renderNotificationHeading() {
|
|
74
|
-
const { heading: i, headingLevel: n } = this,
|
|
75
|
-
return f`<${
|
|
73
|
+
const { heading: i, headingLevel: n } = this, e = w(n);
|
|
74
|
+
return f`<${e}
|
|
76
75
|
id="${t}-heading"
|
|
77
76
|
class="${l}-heading"
|
|
78
77
|
data-test-id="${t}-heading">
|
|
79
78
|
${i}
|
|
80
|
-
</${
|
|
79
|
+
</${e}>`;
|
|
81
80
|
}
|
|
82
81
|
/**
|
|
83
82
|
* Util method that returns an icon from a variant that has default icon.
|
|
@@ -123,7 +122,7 @@ class e extends k {
|
|
|
123
122
|
class="${l}-icon-close"
|
|
124
123
|
data-test-id="${t}-icon-close"
|
|
125
124
|
@click="${this.handleCloseButton}"
|
|
126
|
-
aria-label="${
|
|
125
|
+
aria-label="${C((i = this.aria) == null ? void 0 : i.close)}">
|
|
127
126
|
<icon-close></icon-close>
|
|
128
127
|
</pie-icon-button>`;
|
|
129
128
|
}
|
|
@@ -134,7 +133,7 @@ class e extends k {
|
|
|
134
133
|
* @private
|
|
135
134
|
*/
|
|
136
135
|
handleCloseButton() {
|
|
137
|
-
this.isOpen = !1,
|
|
136
|
+
this.isOpen = !1, m(this, B, { targetNotification: this });
|
|
138
137
|
}
|
|
139
138
|
/**
|
|
140
139
|
* It handles the action button action.
|
|
@@ -145,7 +144,7 @@ class e extends k {
|
|
|
145
144
|
* @private
|
|
146
145
|
*/
|
|
147
146
|
handleActionClick(i) {
|
|
148
|
-
|
|
147
|
+
m(this, i === "leading" ? V : D, { targetNotification: this });
|
|
149
148
|
}
|
|
150
149
|
/**
|
|
151
150
|
* Render the action button depending on action type and its action.
|
|
@@ -157,17 +156,17 @@ class e extends k {
|
|
|
157
156
|
* @private
|
|
158
157
|
*/
|
|
159
158
|
renderActionButton(i, n) {
|
|
160
|
-
const { text:
|
|
161
|
-
return
|
|
159
|
+
const { text: e, ariaLabel: c } = i;
|
|
160
|
+
return e ? f`
|
|
162
161
|
<pie-button
|
|
163
162
|
variant="${n === "leading" ? "primary" : "ghost"}"
|
|
164
163
|
size="small-productive"
|
|
165
|
-
aria-label="${
|
|
164
|
+
aria-label="${c || s}"
|
|
166
165
|
@click="${() => this.handleActionClick(n)}"
|
|
167
166
|
data-test-id="${t}-${n}-action"
|
|
168
167
|
?isFullWidth="${this.hasStackedActions}"
|
|
169
168
|
type="button">
|
|
170
|
-
${
|
|
169
|
+
${e}
|
|
171
170
|
</pie-button>
|
|
172
171
|
` : s;
|
|
173
172
|
}
|
|
@@ -175,101 +174,102 @@ class e extends k {
|
|
|
175
174
|
const {
|
|
176
175
|
variant: i,
|
|
177
176
|
position: n,
|
|
178
|
-
heading:
|
|
179
|
-
isDismissible:
|
|
177
|
+
heading: e,
|
|
178
|
+
isDismissible: c,
|
|
180
179
|
isCompact: p,
|
|
181
180
|
hideIcon: h,
|
|
182
|
-
leadingAction:
|
|
183
|
-
isOpen:
|
|
184
|
-
aria:
|
|
181
|
+
leadingAction: g,
|
|
182
|
+
isOpen: O,
|
|
183
|
+
aria: u
|
|
185
184
|
} = this;
|
|
186
|
-
if (!
|
|
185
|
+
if (!O)
|
|
187
186
|
return s;
|
|
188
|
-
const
|
|
187
|
+
const x = c && !p, k = {
|
|
189
188
|
[l]: !0,
|
|
190
189
|
[`${l}--${i}`]: !0,
|
|
191
190
|
[`${l}--${n}`]: !0,
|
|
192
191
|
[`${l}--compact`]: p
|
|
193
|
-
},
|
|
192
|
+
}, I = {
|
|
194
193
|
[`${l}-content-section`]: !0,
|
|
195
|
-
[`${l}-content-section--dismissible`]:
|
|
194
|
+
[`${l}-content-section--dismissible`]: x
|
|
196
195
|
};
|
|
197
196
|
return f`
|
|
198
197
|
<div
|
|
199
198
|
data-test-id="${t}"
|
|
200
|
-
class="${
|
|
199
|
+
class="${v(k)}"
|
|
201
200
|
role="region"
|
|
202
201
|
aria-live="${i === "error" ? "assertive" : "polite"}"
|
|
203
|
-
aria-labelledby="${
|
|
204
|
-
aria-label="${!
|
|
205
|
-
${
|
|
202
|
+
aria-labelledby="${e ? `${t}-heading` : s}"
|
|
203
|
+
aria-label="${!e && C(u == null ? void 0 : u.label)}">
|
|
204
|
+
${x ? this.renderCloseButton() : s}
|
|
206
205
|
|
|
207
|
-
<section class="${
|
|
206
|
+
<section class="${v(I)}">
|
|
208
207
|
${h ? s : this.renderIcon()}
|
|
209
208
|
<article>
|
|
210
|
-
${
|
|
209
|
+
${e ? this.renderNotificationHeading() : s}
|
|
211
210
|
<slot></slot>
|
|
212
211
|
</article>
|
|
213
212
|
</section>
|
|
214
213
|
|
|
215
|
-
${
|
|
214
|
+
${g != null && g.text ? this.renderFooter() : s}
|
|
216
215
|
</div>`;
|
|
217
216
|
}
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
|
|
217
|
+
};
|
|
218
|
+
b.styles = A(F);
|
|
219
|
+
let o = b;
|
|
220
|
+
a([
|
|
221
221
|
r({ type: Boolean })
|
|
222
|
-
],
|
|
223
|
-
|
|
222
|
+
], o.prototype, "isOpen");
|
|
223
|
+
a([
|
|
224
224
|
r(),
|
|
225
|
-
|
|
226
|
-
],
|
|
227
|
-
|
|
225
|
+
$(t, z, d.variant)
|
|
226
|
+
], o.prototype, "variant");
|
|
227
|
+
a([
|
|
228
228
|
r(),
|
|
229
|
-
|
|
230
|
-
],
|
|
231
|
-
|
|
229
|
+
$(t, T, d.position)
|
|
230
|
+
], o.prototype, "position");
|
|
231
|
+
a([
|
|
232
232
|
r({ type: Boolean })
|
|
233
|
-
],
|
|
234
|
-
|
|
233
|
+
], o.prototype, "isDismissible");
|
|
234
|
+
a([
|
|
235
235
|
r({ type: Boolean })
|
|
236
|
-
],
|
|
237
|
-
|
|
236
|
+
], o.prototype, "isCompact");
|
|
237
|
+
a([
|
|
238
238
|
r({ type: String })
|
|
239
|
-
],
|
|
240
|
-
|
|
239
|
+
], o.prototype, "heading");
|
|
240
|
+
a([
|
|
241
241
|
r(),
|
|
242
|
-
|
|
243
|
-
],
|
|
244
|
-
|
|
242
|
+
$(t, S, d.headingLevel)
|
|
243
|
+
], o.prototype, "headingLevel");
|
|
244
|
+
a([
|
|
245
245
|
r({ type: Boolean })
|
|
246
|
-
],
|
|
247
|
-
|
|
246
|
+
], o.prototype, "hideIcon");
|
|
247
|
+
a([
|
|
248
248
|
r({ type: Object })
|
|
249
|
-
],
|
|
250
|
-
|
|
249
|
+
], o.prototype, "leadingAction");
|
|
250
|
+
a([
|
|
251
251
|
r({ type: Object })
|
|
252
|
-
],
|
|
253
|
-
|
|
252
|
+
], o.prototype, "supportingAction");
|
|
253
|
+
a([
|
|
254
254
|
r({ type: Boolean })
|
|
255
|
-
],
|
|
256
|
-
|
|
255
|
+
], o.prototype, "hasStackedActions");
|
|
256
|
+
a([
|
|
257
257
|
r({ type: Object })
|
|
258
|
-
],
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
],
|
|
262
|
-
|
|
258
|
+
], o.prototype, "aria");
|
|
259
|
+
a([
|
|
260
|
+
E({ slot: "icon" })
|
|
261
|
+
], o.prototype, "_iconSlot");
|
|
262
|
+
_(t, o);
|
|
263
263
|
export {
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
264
|
+
B as ON_NOTIFICATION_CLOSE_EVENT,
|
|
265
|
+
V as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
|
|
266
|
+
L as ON_NOTIFICATION_OPEN_EVENT,
|
|
267
267
|
D as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
|
|
268
|
-
|
|
268
|
+
o as PieNotification,
|
|
269
269
|
l as componentClass,
|
|
270
270
|
t as componentSelector,
|
|
271
271
|
d as defaultProps,
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
272
|
+
S as headingLevels,
|
|
273
|
+
T as positions,
|
|
274
|
+
z as variants
|
|
275
275
|
};
|
package/dist/react.js
CHANGED
|
@@ -1,20 +1,7 @@
|
|
|
1
1
|
import * as i from "react";
|
|
2
2
|
import { createComponent as o } from "@lit/react";
|
|
3
3
|
import { PieNotification as t } from "./index.js";
|
|
4
|
-
import { ON_NOTIFICATION_CLOSE_EVENT as
|
|
5
|
-
import "lit";
|
|
6
|
-
import "lit/directives/class-map.js";
|
|
7
|
-
import "lit/static-html.js";
|
|
8
|
-
import "@justeattakeaway/pie-webc-core";
|
|
9
|
-
import "lit/decorators.js";
|
|
10
|
-
import "lit/directives/if-defined.js";
|
|
11
|
-
import "@justeattakeaway/pie-button";
|
|
12
|
-
import "@justeattakeaway/pie-icon-button";
|
|
13
|
-
import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
|
|
14
|
-
import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
|
|
15
|
-
import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
|
|
16
|
-
import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
|
|
17
|
-
import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
|
|
4
|
+
import { ON_NOTIFICATION_CLOSE_EVENT as f, ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT as s, ON_NOTIFICATION_OPEN_EVENT as I, ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT as O, componentClass as C, componentSelector as r, defaultProps as _, headingLevels as T, positions as l, variants as m } from "./index.js";
|
|
18
5
|
const n = o({
|
|
19
6
|
displayName: "PieNotification",
|
|
20
7
|
elementClass: t,
|
|
@@ -30,17 +17,17 @@ const n = o({
|
|
|
30
17
|
onPieNotificationOpen: "pie-notification-open"
|
|
31
18
|
// When the notification is opened.
|
|
32
19
|
}
|
|
33
|
-
}),
|
|
20
|
+
}), c = n;
|
|
34
21
|
export {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
22
|
+
f as ON_NOTIFICATION_CLOSE_EVENT,
|
|
23
|
+
s as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
|
|
24
|
+
I as ON_NOTIFICATION_OPEN_EVENT,
|
|
25
|
+
O as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
|
|
26
|
+
c as PieNotification,
|
|
27
|
+
C as componentClass,
|
|
28
|
+
r as componentSelector,
|
|
29
|
+
_ as defaultProps,
|
|
30
|
+
T as headingLevels,
|
|
31
|
+
l as positions,
|
|
32
|
+
m as variants
|
|
46
33
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-notification",
|
|
3
3
|
"description": "PIE Design System Notification built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.12.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
39
39
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
40
|
-
"@justeattakeaway/pie-css": "0.
|
|
40
|
+
"@justeattakeaway/pie-css": "0.13.0",
|
|
41
41
|
"@justeattakeaway/pie-wrapper-react": "0.14.1",
|
|
42
42
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
43
43
|
},
|
package/src/notification.scss
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
@use '@justeattakeaway/pie-css/scss' as p;
|
|
2
|
-
|
|
3
|
-
$breakpoint-wide: 768px;
|
|
2
|
+
@use '@justeattakeaway/pie-css/scss/settings' as *;
|
|
4
3
|
|
|
5
4
|
.c-notification {
|
|
6
5
|
--notification-border-radius: var(--dt-radius-rounded-c);
|
|
@@ -63,7 +62,7 @@ $breakpoint-wide: 768px;
|
|
|
63
62
|
font-size: var(--notification-heading-font-size);
|
|
64
63
|
line-height: var(--notification-heading-line-height);
|
|
65
64
|
|
|
66
|
-
@media
|
|
65
|
+
@include media('>md') {
|
|
67
66
|
--notification-heading-font-size: #{p.font-size(--dt-font-heading-s-size--wide)};
|
|
68
67
|
--notification-heading-line-height: #{p.line-height(--dt-font-heading-s-line-height--wide)};
|
|
69
68
|
}
|
|
@@ -95,7 +94,7 @@ $breakpoint-wide: 768px;
|
|
|
95
94
|
align-self: flex-end;
|
|
96
95
|
}
|
|
97
96
|
|
|
98
|
-
@media
|
|
97
|
+
@include media('<md') {
|
|
99
98
|
&.c-notification-footer--stacked {
|
|
100
99
|
flex-direction: column-reverse;
|
|
101
100
|
}
|
|
@@ -109,7 +108,7 @@ $breakpoint-wide: 768px;
|
|
|
109
108
|
color: var(--notification-icon-fill);
|
|
110
109
|
margin-block-start: var(--notification-icon-offset);
|
|
111
110
|
|
|
112
|
-
@media
|
|
111
|
+
@include media('<md') {
|
|
113
112
|
margin-block-start: 0;
|
|
114
113
|
}
|
|
115
114
|
}
|