@justeattakeaway/pie-notification 0.18.3 → 0.20.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/custom-elements.json +2 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +75 -75
- package/dist/react.d.ts +3 -2
- package/package.json +5 -5
- package/src/defs.ts +2 -1
- package/src/notification.scss +21 -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"`, `"translucent"` | 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/custom-elements.json
CHANGED
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
"kind": "variable",
|
|
17
17
|
"name": "variants",
|
|
18
18
|
"type": {
|
|
19
|
-
"text": "['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error']"
|
|
19
|
+
"text": "['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error', 'translucent']"
|
|
20
20
|
},
|
|
21
|
-
"default": "['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error']"
|
|
21
|
+
"default": "['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error', 'translucent']"
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
"kind": "variable",
|
package/dist/index.d.ts
CHANGED
|
@@ -83,6 +83,7 @@ export declare interface NotificationProps {
|
|
|
83
83
|
supportingAction?: ActionProps;
|
|
84
84
|
/**
|
|
85
85
|
* When true, action buttons will stack on narrow screens.
|
|
86
|
+
* Not available when `isCompact` is true.
|
|
86
87
|
*/
|
|
87
88
|
hasStackedActions?: boolean;
|
|
88
89
|
/**
|
|
@@ -131,7 +132,7 @@ export declare const ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT = "pie-notifi
|
|
|
131
132
|
*/
|
|
132
133
|
export declare class PieNotification extends PieElement implements NotificationProps {
|
|
133
134
|
isOpen: boolean;
|
|
134
|
-
variant: "neutral" | "neutral-alternative" | "info" | "success" | "warning" | "error";
|
|
135
|
+
variant: "neutral" | "neutral-alternative" | "info" | "success" | "warning" | "error" | "translucent";
|
|
135
136
|
position: "inline-content" | "full-width";
|
|
136
137
|
isDismissible: boolean;
|
|
137
138
|
isCompact: boolean;
|
|
@@ -215,6 +216,6 @@ export declare class PieNotification extends PieElement implements NotificationP
|
|
|
215
216
|
|
|
216
217
|
export declare const positions: readonly ["inline-content", "full-width"];
|
|
217
218
|
|
|
218
|
-
export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error"];
|
|
219
|
+
export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"];
|
|
219
220
|
|
|
220
221
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { LitElement as
|
|
1
|
+
import { LitElement as I, unsafeCSS as w, nothing as f } from "lit";
|
|
2
2
|
import { classMap as $ } from "lit/directives/class-map.js";
|
|
3
|
-
import { html as p, unsafeStatic as
|
|
3
|
+
import { html as p, unsafeStatic as z } from "lit/static-html.js";
|
|
4
4
|
import { validPropertyValues as O, safeCustomElement as _, dispatchCustomEvent as y } from "@justeattakeaway/pie-webc-core";
|
|
5
|
-
import { property as
|
|
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
|
|
14
|
+
const b = class b extends I {
|
|
15
15
|
willUpdate() {
|
|
16
|
-
this.getAttribute("v") || this.setAttribute("v",
|
|
16
|
+
this.getAttribute("v") || this.setAttribute("v", b.v);
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
|
|
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
|
+
b.v = "0.20.0";
|
|
20
|
+
let k = b;
|
|
21
|
+
const E = ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"], 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-
|
|
37
|
-
var G = Object.defineProperty, H = Object.getOwnPropertyDescriptor,
|
|
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.c-notification--translucent{--notification-background-color: var(--dt-color-container-prominent);-webkit-backdrop-filter:blur(var(--dt-blur-prominent));backdrop-filter:blur(var(--dt-blur-prominent))}.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
|
+
var G = Object.defineProperty, H = Object.getOwnPropertyDescriptor, a = (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
|
|
42
|
+
let c = class extends k {
|
|
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
|
|
@@ -83,10 +83,10 @@ let a = class extends x {
|
|
|
83
83
|
* @private
|
|
84
84
|
*/
|
|
85
85
|
renderNotificationHeading() {
|
|
86
|
-
const { heading: i, headingLevel: o } = this, n =
|
|
86
|
+
const { heading: i, headingLevel: o } = this, n = z(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:
|
|
199
|
-
aria:
|
|
198
|
+
isOpen: C,
|
|
199
|
+
aria: m
|
|
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
|
-
aria-label="${!n && g(
|
|
220
|
-
${
|
|
219
|
+
aria-label="${!n && g(m == null ? void 0 : m.label)}">
|
|
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}
|
|
@@ -231,60 +231,60 @@ let a = class extends x {
|
|
|
231
231
|
</div>`;
|
|
232
232
|
}
|
|
233
233
|
};
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
],
|
|
238
|
-
|
|
239
|
-
|
|
234
|
+
c.styles = w(j);
|
|
235
|
+
a([
|
|
236
|
+
r({ type: Boolean })
|
|
237
|
+
], c.prototype, "isOpen", 2);
|
|
238
|
+
a([
|
|
239
|
+
r({ type: String }),
|
|
240
240
|
O(t, E, l.variant)
|
|
241
|
-
],
|
|
242
|
-
|
|
243
|
-
|
|
241
|
+
], c.prototype, "variant", 2);
|
|
242
|
+
a([
|
|
243
|
+
r({ type: String }),
|
|
244
244
|
O(t, B, l.position)
|
|
245
|
-
],
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
],
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
],
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
],
|
|
255
|
-
|
|
256
|
-
|
|
245
|
+
], c.prototype, "position", 2);
|
|
246
|
+
a([
|
|
247
|
+
r({ type: Boolean })
|
|
248
|
+
], c.prototype, "isDismissible", 2);
|
|
249
|
+
a([
|
|
250
|
+
r({ type: Boolean })
|
|
251
|
+
], c.prototype, "isCompact", 2);
|
|
252
|
+
a([
|
|
253
|
+
r({ type: String })
|
|
254
|
+
], c.prototype, "heading", 2);
|
|
255
|
+
a([
|
|
256
|
+
r({ type: String }),
|
|
257
257
|
O(t, T, l.headingLevel)
|
|
258
|
-
],
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
],
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
],
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
],
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
],
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
],
|
|
274
|
-
|
|
258
|
+
], c.prototype, "headingLevel", 2);
|
|
259
|
+
a([
|
|
260
|
+
r({ type: Boolean })
|
|
261
|
+
], c.prototype, "hideIcon", 2);
|
|
262
|
+
a([
|
|
263
|
+
r({ type: Object })
|
|
264
|
+
], c.prototype, "leadingAction", 2);
|
|
265
|
+
a([
|
|
266
|
+
r({ type: Object })
|
|
267
|
+
], c.prototype, "supportingAction", 2);
|
|
268
|
+
a([
|
|
269
|
+
r({ type: Boolean })
|
|
270
|
+
], c.prototype, "hasStackedActions", 2);
|
|
271
|
+
a([
|
|
272
|
+
r({ type: Object })
|
|
273
|
+
], c.prototype, "aria", 2);
|
|
274
|
+
a([
|
|
275
275
|
S({ slot: "icon" })
|
|
276
|
-
],
|
|
277
|
-
|
|
276
|
+
], c.prototype, "_iconSlot", 2);
|
|
277
|
+
c = a([
|
|
278
278
|
_("pie-notification")
|
|
279
|
-
],
|
|
279
|
+
], c);
|
|
280
280
|
export {
|
|
281
281
|
D as ON_NOTIFICATION_CLOSE_EVENT,
|
|
282
282
|
P as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
|
|
283
283
|
V as ON_NOTIFICATION_OPEN_EVENT,
|
|
284
284
|
F as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
|
|
285
|
-
|
|
285
|
+
c 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
|
@@ -84,6 +84,7 @@ export declare interface NotificationProps {
|
|
|
84
84
|
supportingAction?: ActionProps;
|
|
85
85
|
/**
|
|
86
86
|
* When true, action buttons will stack on narrow screens.
|
|
87
|
+
* Not available when `isCompact` is true.
|
|
87
88
|
*/
|
|
88
89
|
hasStackedActions?: boolean;
|
|
89
90
|
/**
|
|
@@ -134,7 +135,7 @@ export declare const PieNotification: React_2.ForwardRefExoticComponent<React_2.
|
|
|
134
135
|
*/
|
|
135
136
|
declare class PieNotification_2 extends PieElement implements NotificationProps {
|
|
136
137
|
isOpen: boolean;
|
|
137
|
-
variant: "neutral" | "neutral-alternative" | "info" | "success" | "warning" | "error";
|
|
138
|
+
variant: "neutral" | "neutral-alternative" | "info" | "success" | "warning" | "error" | "translucent";
|
|
138
139
|
position: "inline-content" | "full-width";
|
|
139
140
|
isDismissible: boolean;
|
|
140
141
|
isCompact: boolean;
|
|
@@ -227,6 +228,6 @@ export declare const positions: readonly ["inline-content", "full-width"];
|
|
|
227
228
|
|
|
228
229
|
declare type ReactBaseType = React_2.HTMLAttributes<HTMLDivElement>;
|
|
229
230
|
|
|
230
|
-
export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error"];
|
|
231
|
+
export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"];
|
|
231
232
|
|
|
232
233
|
export { }
|
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.20.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.
|
|
55
|
-
"@justeattakeaway/pie-icons-webc": "1.16.
|
|
56
|
-
"@justeattakeaway/pie-webc-core": "3.0.
|
|
54
|
+
"@justeattakeaway/pie-icon-button": "2.3.0",
|
|
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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
|
|
3
|
-
export const variants = ['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error'] as const;
|
|
3
|
+
export const variants = ['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error', 'translucent'] as const;
|
|
4
4
|
export const headingLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;
|
|
5
5
|
export const positions = ['inline-content', 'full-width'] as const;
|
|
6
6
|
export const actionSizes = ['small-productive', 'xsmall'] as const;
|
|
@@ -81,6 +81,7 @@ export interface NotificationProps {
|
|
|
81
81
|
|
|
82
82
|
/**
|
|
83
83
|
* When true, action buttons will stack on narrow screens.
|
|
84
|
+
* Not available when `isCompact` is true.
|
|
84
85
|
*/
|
|
85
86
|
hasStackedActions?: boolean;
|
|
86
87
|
|
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,31 @@
|
|
|
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);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&.c-notification--translucent {
|
|
67
|
+
--notification-background-color: var(--dt-color-container-prominent);
|
|
68
|
+
|
|
69
|
+
backdrop-filter: blur(var(--dt-blur-prominent));
|
|
70
|
+
|
|
61
71
|
}
|
|
62
72
|
|
|
63
73
|
|
|
@@ -76,6 +86,7 @@
|
|
|
76
86
|
&-content-section {
|
|
77
87
|
display: flex;
|
|
78
88
|
flex-direction: row;
|
|
89
|
+
align-items: center;
|
|
79
90
|
gap: var(--dt-spacing-c);
|
|
80
91
|
|
|
81
92
|
&.c-notification-content-section--dismissible {
|
|
@@ -96,7 +107,7 @@
|
|
|
96
107
|
gap: var(--dt-spacing-d);
|
|
97
108
|
|
|
98
109
|
&.c-notification-footer--compact {
|
|
99
|
-
align-self:
|
|
110
|
+
align-self: center;
|
|
100
111
|
}
|
|
101
112
|
|
|
102
113
|
@include media('<md') {
|
|
@@ -110,10 +121,9 @@
|
|
|
110
121
|
.icon,
|
|
111
122
|
::slotted([slot="icon"]) {
|
|
112
123
|
display: inline-flex;
|
|
124
|
+
align-self: flex-start;
|
|
125
|
+
background-color: var(--notification-icon-background-color);
|
|
113
126
|
color: var(--notification-icon-fill);
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
@include media('<md') {
|
|
117
|
-
margin-block-start: 0;
|
|
118
|
-
}
|
|
127
|
+
border-radius: var(--dt-radius-rounded-b);
|
|
128
|
+
padding: var(--dt-spacing-a);
|
|
119
129
|
}
|