@justeattakeaway/pie-notification 0.18.2 → 0.19.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/README.md +14 -14
- package/dist/index.d.ts +1 -0
- package/dist/index.js +43 -43
- package/dist/react.d.ts +1 -0
- package/package.json +5 -5
- package/src/defs.ts +1 -0
- package/src/notification.scss +14 -11
package/README.md
CHANGED
|
@@ -30,20 +30,20 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
|
|
|
30
30
|
## Documentation
|
|
31
31
|
|
|
32
32
|
### Properties
|
|
33
|
-
| Prop
|
|
34
|
-
|
|
35
|
-
| `variant`
|
|
36
|
-
| `position`
|
|
37
|
-
| `heading`
|
|
38
|
-
| `headingLevel`
|
|
39
|
-
| `isDismissible`
|
|
40
|
-
| `isCompact`
|
|
41
|
-
| `isOpen`
|
|
42
|
-
| `hideIcon`
|
|
43
|
-
| `hasStackedActions
|
|
44
|
-
| `leadingAction`
|
|
45
|
-
| `supportingAction` | `{ text: string, ariaLabel?: string, size?: "small-productive"
|
|
46
|
-
| `aria`
|
|
33
|
+
| Prop | Options | Description | Default |
|
|
34
|
+
| --- | --- | --- | --- |
|
|
35
|
+
| `variant` | `"neutral"`, `"neutral-alternative"`, `"info"`, `"success"`, `"warning"`, `"error"` | Sets the variant of the notification. | `"neutral"` |
|
|
36
|
+
| `position` | `"inline-content"`, `"full-width"` | Defines the proper styles, whether the component appears within the content or at the top of the interface. | `"inline-content"` |
|
|
37
|
+
| `heading` | — | The heading text of the notification. | `undefined` |
|
|
38
|
+
| `headingLevel` | `h2`, `h3`, `h4`, `h5`, `h6` | The HTML tag to use for the notification's heading. | `h2` |
|
|
39
|
+
| `isDismissible` | `true`, `false` | When true, allows dismissing the notification by clicking on the close button. | `false` |
|
|
40
|
+
| `isCompact` | `true`, `false` | When true, aligns the footer with the header and icons, making the component compact. | `false` |
|
|
41
|
+
| `isOpen` | `true`, `false` | When true, the notification is set to be open and visible. | `true` |
|
|
42
|
+
| `hideIcon` | `true`, `false` | When true, the icon will be hidden. | `false` |
|
|
43
|
+
| `hasStackedActions` | `true`, `false` | When true, action buttons will stack on narrow screens. Not available when `isCompact` is true. | `false` |
|
|
44
|
+
| `leadingAction` | `{ text: string, ariaLabel?: string, size?: "small-productive" \| "xsmall" }` | An object representing the leading action of the notification. | `undefined` |
|
|
45
|
+
| `supportingAction` | `{ text: string, ariaLabel?: string, size?: "small-productive" \| "xsmall" }` | An object representing the supporting action of the notification. <br> The action will only render if `leadingAction` is passed. | `undefined` |
|
|
46
|
+
| `aria` | `{ close?: string, label?: string }` | The ARIA labels used for various parts of the notification. Only pass `label` if there is no heading to ensure the region is announced with a title. | `undefined` |
|
|
47
47
|
|
|
48
48
|
### Slots
|
|
49
49
|
| Slot | Description |
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { LitElement as
|
|
1
|
+
import { LitElement as I, unsafeCSS as z, nothing as f } from "lit";
|
|
2
2
|
import { classMap as $ } from "lit/directives/class-map.js";
|
|
3
3
|
import { html as p, unsafeStatic as w } from "lit/static-html.js";
|
|
4
|
-
import { validPropertyValues as
|
|
5
|
-
import { property as
|
|
4
|
+
import { validPropertyValues as k, safeCustomElement as _, dispatchCustomEvent as y } from "@justeattakeaway/pie-webc-core";
|
|
5
|
+
import { property as r, queryAssignedElements as S } from "lit/decorators.js";
|
|
6
6
|
import { ifDefined as g } from "lit/directives/if-defined.js";
|
|
7
7
|
import "@justeattakeaway/pie-button";
|
|
8
8
|
import "@justeattakeaway/pie-icon-button";
|
|
@@ -11,14 +11,14 @@ 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 m = class m extends
|
|
14
|
+
const m = class m extends I {
|
|
15
15
|
willUpdate() {
|
|
16
16
|
this.getAttribute("v") || this.setAttribute("v", m.v);
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
m.v = "0.
|
|
20
|
-
let
|
|
21
|
-
const E = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], T = ["h2", "h3", "h4", "h5", "h6"], B = ["inline-content", "full-width"], L = ["small-productive", "xsmall"], t = "pie-notification",
|
|
19
|
+
m.v = "0.19.0";
|
|
20
|
+
let O = m;
|
|
21
|
+
const E = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], T = ["h2", "h3", "h4", "h5", "h6"], B = ["inline-content", "full-width"], L = ["small-productive", "xsmall"], t = "pie-notification", s = "c-notification", D = `${t}-close`, V = `${t}-open`, P = `${t}-leading-action-click`, F = `${t}-supporting-action-click`, v = {
|
|
22
22
|
text: "",
|
|
23
23
|
ariaLabel: "",
|
|
24
24
|
size: "small-productive"
|
|
@@ -33,13 +33,13 @@ const E = ["neutral", "neutral-alternative", "info", "success", "warning", "erro
|
|
|
33
33
|
hasStackedActions: !1,
|
|
34
34
|
leadingAction: v,
|
|
35
35
|
supportingAction: v
|
|
36
|
-
}, j = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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-
|
|
36
|
+
}, j = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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-inverse);--notification-icon-background-color: var(--dt-color-container-inverse);--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);color:var(--dt-color-content-default)}.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-tonal);--notification-icon-background-color: var(--dt-color-support-info)}.c-notification.c-notification--success{--notification-background-color: var(--dt-color-support-positive-tonal);--notification-icon-background-color: var(--dt-color-support-positive)}.c-notification.c-notification--warning{--notification-background-color: var(--dt-color-support-warning-tonal);--notification-icon-background-color: var(--dt-color-support-warning);--notification-icon-fill: var(--dt-color-content-dark)}.c-notification.c-notification--error{--notification-background-color: var(--dt-color-support-error-tonal);--notification-icon-background-color: var(--dt-color-support-error);--notification-icon-fill: var(--dt-color-content-light)}.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;align-items:center;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:center}@media (max-width: 767px){.c-notification-footer.c-notification-footer--stacked{flex-direction:column-reverse}}.icon,::slotted([slot=icon]){display:inline-flex;align-self:flex-start;background-color:var(--notification-icon-background-color);color:var(--notification-icon-fill);border-radius:var(--dt-radius-rounded-b);padding:var(--dt-spacing-a)}";
|
|
37
37
|
var G = Object.defineProperty, H = Object.getOwnPropertyDescriptor, c = (i, o, n, d) => {
|
|
38
38
|
for (var e = d > 1 ? void 0 : d ? H(o, n) : o, u = i.length - 1, h; u >= 0; u--)
|
|
39
39
|
(h = i[u]) && (e = (d ? h(o, n, e) : h(e)) || e);
|
|
40
40
|
return d && e && G(o, n, e), e;
|
|
41
41
|
};
|
|
42
|
-
let a = class extends
|
|
42
|
+
let a = class extends O {
|
|
43
43
|
constructor() {
|
|
44
44
|
super(...arguments), this.isOpen = l.isOpen, this.variant = l.variant, this.position = l.position, this.isDismissible = l.isDismissible, this.isCompact = l.isCompact, this.headingLevel = l.headingLevel, this.hideIcon = l.hideIcon, this.hasStackedActions = l.hasStackedActions;
|
|
45
45
|
}
|
|
@@ -63,9 +63,9 @@ let a = class extends x {
|
|
|
63
63
|
isCompact: n,
|
|
64
64
|
hasStackedActions: d
|
|
65
65
|
} = this, e = {
|
|
66
|
-
[`${
|
|
67
|
-
[`${
|
|
68
|
-
[`${
|
|
66
|
+
[`${s}-footer`]: !0,
|
|
67
|
+
[`${s}-footer--compact`]: n,
|
|
68
|
+
[`${s}-footer--stacked`]: d && !n
|
|
69
69
|
};
|
|
70
70
|
return p`
|
|
71
71
|
<footer
|
|
@@ -86,7 +86,7 @@ let a = class extends x {
|
|
|
86
86
|
const { heading: i, headingLevel: o } = this, n = w(o);
|
|
87
87
|
return p`<${n}
|
|
88
88
|
id="${t}-heading"
|
|
89
|
-
class="${
|
|
89
|
+
class="${s}-heading"
|
|
90
90
|
data-test-id="${t}-heading">
|
|
91
91
|
${i}
|
|
92
92
|
</${n}>`;
|
|
@@ -132,7 +132,7 @@ let a = class extends x {
|
|
|
132
132
|
<pie-icon-button
|
|
133
133
|
variant="ghost-secondary"
|
|
134
134
|
size="small"
|
|
135
|
-
class="${
|
|
135
|
+
class="${s}-icon-close"
|
|
136
136
|
data-test-id="${t}-icon-close"
|
|
137
137
|
@click="${this.handleCloseButton}"
|
|
138
138
|
aria-label="${g((i = this.aria) == null ? void 0 : i.close)}">
|
|
@@ -195,31 +195,31 @@ let a = class extends x {
|
|
|
195
195
|
isCompact: e,
|
|
196
196
|
hideIcon: u,
|
|
197
197
|
leadingAction: h,
|
|
198
|
-
isOpen:
|
|
198
|
+
isOpen: C,
|
|
199
199
|
aria: b
|
|
200
200
|
} = this;
|
|
201
|
-
if (!
|
|
201
|
+
if (!C)
|
|
202
202
|
return f;
|
|
203
|
-
const
|
|
204
|
-
[
|
|
205
|
-
[`${
|
|
206
|
-
[`${
|
|
207
|
-
[`${
|
|
208
|
-
},
|
|
209
|
-
[`${
|
|
210
|
-
[`${
|
|
203
|
+
const x = d && !e, N = {
|
|
204
|
+
[s]: !0,
|
|
205
|
+
[`${s}--${i}`]: !0,
|
|
206
|
+
[`${s}--${o}`]: !0,
|
|
207
|
+
[`${s}--compact`]: e
|
|
208
|
+
}, A = {
|
|
209
|
+
[`${s}-content-section`]: !0,
|
|
210
|
+
[`${s}-content-section--dismissible`]: x
|
|
211
211
|
};
|
|
212
212
|
return p`
|
|
213
213
|
<div
|
|
214
214
|
data-test-id="${t}"
|
|
215
|
-
class="${$(
|
|
215
|
+
class="${$(N)}"
|
|
216
216
|
role="region"
|
|
217
217
|
aria-live="${i === "error" ? "assertive" : "polite"}"
|
|
218
218
|
aria-labelledby="${n ? `${t}-heading` : f}"
|
|
219
219
|
aria-label="${!n && g(b == null ? void 0 : b.label)}">
|
|
220
|
-
${
|
|
220
|
+
${x ? this.renderCloseButton() : f}
|
|
221
221
|
|
|
222
|
-
<section class="${$(
|
|
222
|
+
<section class="${$(A)}">
|
|
223
223
|
${u ? f : this.renderIcon()}
|
|
224
224
|
<article>
|
|
225
225
|
${n ? this.renderNotificationHeading() : f}
|
|
@@ -233,43 +233,43 @@ let a = class extends x {
|
|
|
233
233
|
};
|
|
234
234
|
a.styles = z(j);
|
|
235
235
|
c([
|
|
236
|
-
|
|
236
|
+
r({ type: Boolean })
|
|
237
237
|
], a.prototype, "isOpen", 2);
|
|
238
238
|
c([
|
|
239
|
-
|
|
240
|
-
|
|
239
|
+
r({ type: String }),
|
|
240
|
+
k(t, E, l.variant)
|
|
241
241
|
], a.prototype, "variant", 2);
|
|
242
242
|
c([
|
|
243
|
-
|
|
244
|
-
|
|
243
|
+
r({ type: String }),
|
|
244
|
+
k(t, B, l.position)
|
|
245
245
|
], a.prototype, "position", 2);
|
|
246
246
|
c([
|
|
247
|
-
|
|
247
|
+
r({ type: Boolean })
|
|
248
248
|
], a.prototype, "isDismissible", 2);
|
|
249
249
|
c([
|
|
250
|
-
|
|
250
|
+
r({ type: Boolean })
|
|
251
251
|
], a.prototype, "isCompact", 2);
|
|
252
252
|
c([
|
|
253
|
-
|
|
253
|
+
r({ type: String })
|
|
254
254
|
], a.prototype, "heading", 2);
|
|
255
255
|
c([
|
|
256
|
-
|
|
257
|
-
|
|
256
|
+
r({ type: String }),
|
|
257
|
+
k(t, T, l.headingLevel)
|
|
258
258
|
], a.prototype, "headingLevel", 2);
|
|
259
259
|
c([
|
|
260
|
-
|
|
260
|
+
r({ type: Boolean })
|
|
261
261
|
], a.prototype, "hideIcon", 2);
|
|
262
262
|
c([
|
|
263
|
-
|
|
263
|
+
r({ type: Object })
|
|
264
264
|
], a.prototype, "leadingAction", 2);
|
|
265
265
|
c([
|
|
266
|
-
|
|
266
|
+
r({ type: Object })
|
|
267
267
|
], a.prototype, "supportingAction", 2);
|
|
268
268
|
c([
|
|
269
|
-
|
|
269
|
+
r({ type: Boolean })
|
|
270
270
|
], a.prototype, "hasStackedActions", 2);
|
|
271
271
|
c([
|
|
272
|
-
|
|
272
|
+
r({ type: Object })
|
|
273
273
|
], a.prototype, "aria", 2);
|
|
274
274
|
c([
|
|
275
275
|
S({ slot: "icon" })
|
|
@@ -284,7 +284,7 @@ export {
|
|
|
284
284
|
F as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
|
|
285
285
|
a as PieNotification,
|
|
286
286
|
L as actionSizes,
|
|
287
|
-
|
|
287
|
+
s as componentClass,
|
|
288
288
|
t as componentSelector,
|
|
289
289
|
v as defaultActionButtonProps,
|
|
290
290
|
l as defaultProps,
|
package/dist/react.d.ts
CHANGED
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.19.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -45,15 +45,15 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
47
47
|
"@justeattakeaway/pie-components-config": "0.21.0",
|
|
48
|
-
"@justeattakeaway/pie-css": "0.23.
|
|
48
|
+
"@justeattakeaway/pie-css": "0.23.2",
|
|
49
49
|
"@justeattakeaway/pie-monorepo-utils": "0.7.0",
|
|
50
50
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
51
51
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@justeattakeaway/pie-icon-button": "2.2.
|
|
55
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
56
|
-
"@justeattakeaway/pie-webc-core": "3.0.
|
|
54
|
+
"@justeattakeaway/pie-icon-button": "2.2.4",
|
|
55
|
+
"@justeattakeaway/pie-icons-webc": "1.16.1",
|
|
56
|
+
"@justeattakeaway/pie-webc-core": "3.0.2"
|
|
57
57
|
},
|
|
58
58
|
"volta": {
|
|
59
59
|
"extends": "../../../package.json"
|
package/src/defs.ts
CHANGED
package/src/notification.scss
CHANGED
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
--notification-font-size: #{p.font-size(--dt-font-body-l-size)};
|
|
15
15
|
--notification-line-height: #{p.line-height(--dt-font-body-l-line-height)};
|
|
16
16
|
--notification-close-icon-offset: var(--dt-spacing-b);
|
|
17
|
-
--notification-icon-fill: var(--dt-color-content-
|
|
18
|
-
--notification-icon-
|
|
17
|
+
--notification-icon-fill: var(--dt-color-content-inverse);
|
|
18
|
+
--notification-icon-background-color: var(--dt-color-container-inverse);
|
|
19
19
|
--icon-size-override: 24px;
|
|
20
20
|
|
|
21
21
|
padding: var(--dt-spacing-d);
|
|
@@ -43,21 +43,24 @@
|
|
|
43
43
|
|
|
44
44
|
&.c-notification--info {
|
|
45
45
|
--notification-background-color: var(--dt-color-support-info-tonal);
|
|
46
|
-
--notification-icon-
|
|
46
|
+
--notification-icon-background-color: var(--dt-color-support-info);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
&.c-notification--success {
|
|
50
50
|
--notification-background-color: var(--dt-color-support-positive-tonal);
|
|
51
|
-
--notification-icon-
|
|
51
|
+
--notification-icon-background-color: var(--dt-color-support-positive);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
&.c-notification--warning {
|
|
55
55
|
--notification-background-color: var(--dt-color-support-warning-tonal);
|
|
56
|
+
--notification-icon-background-color: var(--dt-color-support-warning);
|
|
57
|
+
--notification-icon-fill: var(--dt-color-content-dark);
|
|
56
58
|
}
|
|
57
59
|
|
|
58
60
|
&.c-notification--error {
|
|
59
61
|
--notification-background-color: var(--dt-color-support-error-tonal);
|
|
60
|
-
--notification-icon-
|
|
62
|
+
--notification-icon-background-color: var(--dt-color-support-error);
|
|
63
|
+
--notification-icon-fill: var(--dt-color-content-light);
|
|
61
64
|
}
|
|
62
65
|
|
|
63
66
|
|
|
@@ -76,6 +79,7 @@
|
|
|
76
79
|
&-content-section {
|
|
77
80
|
display: flex;
|
|
78
81
|
flex-direction: row;
|
|
82
|
+
align-items: center;
|
|
79
83
|
gap: var(--dt-spacing-c);
|
|
80
84
|
|
|
81
85
|
&.c-notification-content-section--dismissible {
|
|
@@ -96,7 +100,7 @@
|
|
|
96
100
|
gap: var(--dt-spacing-d);
|
|
97
101
|
|
|
98
102
|
&.c-notification-footer--compact {
|
|
99
|
-
align-self:
|
|
103
|
+
align-self: center;
|
|
100
104
|
}
|
|
101
105
|
|
|
102
106
|
@include media('<md') {
|
|
@@ -110,10 +114,9 @@
|
|
|
110
114
|
.icon,
|
|
111
115
|
::slotted([slot="icon"]) {
|
|
112
116
|
display: inline-flex;
|
|
117
|
+
align-self: flex-start;
|
|
118
|
+
background-color: var(--notification-icon-background-color);
|
|
113
119
|
color: var(--notification-icon-fill);
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
@include media('<md') {
|
|
117
|
-
margin-block-start: 0;
|
|
118
|
-
}
|
|
120
|
+
border-radius: var(--dt-radius-rounded-b);
|
|
121
|
+
padding: var(--dt-spacing-a);
|
|
119
122
|
}
|