@justeattakeaway/pie-notification 0.23.4 → 0.24.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 +1 -0
- package/custom-elements.json +27 -1
- package/dist/index.d.ts +9 -0
- package/dist/index.js +123 -115
- package/dist/react.d.ts +9 -0
- package/dist/react.js +5 -4
- package/package.json +1 -1
- package/src/defs.ts +9 -0
- package/src/index.ts +13 -3
- package/src/notification.scss +68 -6
package/README.md
CHANGED
|
@@ -34,6 +34,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
|
|
|
34
34
|
| --- | --- | --- | --- |
|
|
35
35
|
| `variant` | `"neutral"`, `"neutral-alternative"`, `"info"`, `"success"`, `"warning"`, `"error"`, `"translucent"` | Sets the variant of the notification. | `"neutral"` |
|
|
36
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
|
+
| `size` | `"small"`, `"large"` | Sets the size of the notification. When `small`, renders with reduced dimensions on narrow screens (below the `md` breakpoint). On wide screens, both sizes render identically. | `"large"` |
|
|
37
38
|
| `heading` | — | The heading text of the notification. | `undefined` |
|
|
38
39
|
| `headingLevel` | `h2`, `h3`, `h4`, `h5`, `h6` | The HTML tag to use for the notification's heading. | `h2` |
|
|
39
40
|
| `isDismissible` | `true`, `false` | When true, allows dismissing the notification by clicking on the close button. | `false` |
|
package/custom-elements.json
CHANGED
|
@@ -36,6 +36,14 @@
|
|
|
36
36
|
},
|
|
37
37
|
"default": "['inline-content', 'full-width']"
|
|
38
38
|
},
|
|
39
|
+
{
|
|
40
|
+
"kind": "variable",
|
|
41
|
+
"name": "sizes",
|
|
42
|
+
"type": {
|
|
43
|
+
"text": "['small', 'large']"
|
|
44
|
+
},
|
|
45
|
+
"default": "['small', 'large']"
|
|
46
|
+
},
|
|
39
47
|
{
|
|
40
48
|
"kind": "variable",
|
|
41
49
|
"name": "actionSizes",
|
|
@@ -98,7 +106,7 @@
|
|
|
98
106
|
"type": {
|
|
99
107
|
"text": "DefaultProps"
|
|
100
108
|
},
|
|
101
|
-
"default": "{ variant: 'neutral', position: 'inline-content', isDismissible: false, isCompact: false, headingLevel: 'h2', hideIcon: false, isOpen: true, hasStackedActions: false, leadingAction: defaultActionButtonProps, supportingAction: defaultActionButtonProps, }"
|
|
109
|
+
"default": "{ variant: 'neutral', position: 'inline-content', size: 'large', isDismissible: false, isCompact: false, headingLevel: 'h2', hideIcon: false, isOpen: true, hasStackedActions: false, leadingAction: defaultActionButtonProps, supportingAction: defaultActionButtonProps, }"
|
|
102
110
|
}
|
|
103
111
|
],
|
|
104
112
|
"exports": [
|
|
@@ -126,6 +134,14 @@
|
|
|
126
134
|
"module": "src/defs.js"
|
|
127
135
|
}
|
|
128
136
|
},
|
|
137
|
+
{
|
|
138
|
+
"kind": "js",
|
|
139
|
+
"name": "sizes",
|
|
140
|
+
"declaration": {
|
|
141
|
+
"name": "sizes",
|
|
142
|
+
"module": "src/defs.js"
|
|
143
|
+
}
|
|
144
|
+
},
|
|
129
145
|
{
|
|
130
146
|
"kind": "js",
|
|
131
147
|
"name": "actionSizes",
|
|
@@ -245,6 +261,12 @@
|
|
|
245
261
|
"privacy": "public",
|
|
246
262
|
"attribute": "position"
|
|
247
263
|
},
|
|
264
|
+
{
|
|
265
|
+
"kind": "field",
|
|
266
|
+
"name": "size",
|
|
267
|
+
"privacy": "public",
|
|
268
|
+
"attribute": "size"
|
|
269
|
+
},
|
|
248
270
|
{
|
|
249
271
|
"kind": "field",
|
|
250
272
|
"name": "isDismissible",
|
|
@@ -468,6 +490,10 @@
|
|
|
468
490
|
"name": "position",
|
|
469
491
|
"fieldName": "position"
|
|
470
492
|
},
|
|
493
|
+
{
|
|
494
|
+
"name": "size",
|
|
495
|
+
"fieldName": "size"
|
|
496
|
+
},
|
|
471
497
|
{
|
|
472
498
|
"name": "isDismissible",
|
|
473
499
|
"fieldName": "isDismissible"
|
package/dist/index.d.ts
CHANGED
|
@@ -64,6 +64,12 @@ export declare interface NotificationProps {
|
|
|
64
64
|
* Defines the proper styles, whether the component appears within the content or at the top of the interface
|
|
65
65
|
*/
|
|
66
66
|
position?: typeof positions[number];
|
|
67
|
+
/**
|
|
68
|
+
* Sets the size of the notification. When `small`, the component renders with
|
|
69
|
+
* reduced dimensions on narrow screens (below the md breakpoint).
|
|
70
|
+
* On wide screens, both sizes render identically.
|
|
71
|
+
*/
|
|
72
|
+
size?: typeof sizes[number];
|
|
67
73
|
/**
|
|
68
74
|
* When true, allows dismissing the notification by clicking on the close button.
|
|
69
75
|
*/
|
|
@@ -152,6 +158,7 @@ export declare class PieNotification extends PieElement implements NotificationP
|
|
|
152
158
|
isOpen: boolean;
|
|
153
159
|
variant: "neutral" | "neutral-alternative" | "info" | "success" | "warning" | "error" | "translucent";
|
|
154
160
|
position: "inline-content" | "full-width";
|
|
161
|
+
size: "small" | "large";
|
|
155
162
|
isDismissible: boolean;
|
|
156
163
|
isCompact: boolean;
|
|
157
164
|
heading: NotificationProps['heading'];
|
|
@@ -247,6 +254,8 @@ export declare class PieNotification extends PieElement implements NotificationP
|
|
|
247
254
|
|
|
248
255
|
export declare const positions: readonly ["inline-content", "full-width"];
|
|
249
256
|
|
|
257
|
+
export declare const sizes: readonly ["small", "large"];
|
|
258
|
+
|
|
250
259
|
export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"];
|
|
251
260
|
|
|
252
261
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { classMap as
|
|
3
|
-
import { html as d, unsafeStatic as
|
|
4
|
-
import { validPropertyValues as
|
|
5
|
-
import { property as
|
|
6
|
-
import { ifDefined as
|
|
1
|
+
import { LitElement as O, unsafeCSS as N, nothing as f } from "lit";
|
|
2
|
+
import { classMap as k } from "lit/directives/class-map.js";
|
|
3
|
+
import { html as d, unsafeStatic as I } from "lit/static-html.js";
|
|
4
|
+
import { validPropertyValues as $, safeCustomElement as S, dispatchCustomEvent as z } from "@justeattakeaway/pie-webc-core";
|
|
5
|
+
import { property as s, queryAssignedElements as _ } from "lit/decorators.js";
|
|
6
|
+
import { ifDefined as g } 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,44 +11,45 @@ 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 y = class y extends O {
|
|
15
15
|
willUpdate() {
|
|
16
|
-
this.getAttribute("v") || this.setAttribute("v",
|
|
16
|
+
this.getAttribute("v") || this.setAttribute("v", y.v);
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
|
|
20
|
-
let
|
|
21
|
-
const E = ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"], L = ["h2", "h3", "h4", "h5", "h6"], T = ["inline-content", "full-width"], B = ["small-productive", "xsmall"], o = "pie-notification",
|
|
19
|
+
y.v = "0.24.0";
|
|
20
|
+
let A = y;
|
|
21
|
+
const E = ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"], L = ["h2", "h3", "h4", "h5", "h6"], T = ["inline-content", "full-width"], B = ["small", "large"], D = ["small-productive", "xsmall"], o = "pie-notification", h = "c-notification", V = `${o}-close`, P = `${o}-open`, F = `${o}-leading-action-click`, j = `${o}-supporting-action-click`, C = {
|
|
22
22
|
text: "",
|
|
23
23
|
ariaLabel: "",
|
|
24
24
|
size: "small-productive"
|
|
25
|
-
},
|
|
25
|
+
}, r = {
|
|
26
26
|
variant: "neutral",
|
|
27
27
|
position: "inline-content",
|
|
28
|
+
size: "large",
|
|
28
29
|
isDismissible: !1,
|
|
29
30
|
isCompact: !1,
|
|
30
31
|
headingLevel: "h2",
|
|
31
32
|
hideIcon: !1,
|
|
32
33
|
isOpen: !0,
|
|
33
34
|
hasStackedActions: !1,
|
|
34
|
-
leadingAction:
|
|
35
|
-
supportingAction:
|
|
36
|
-
},
|
|
37
|
-
var
|
|
38
|
-
for (var
|
|
39
|
-
(
|
|
40
|
-
return
|
|
35
|
+
leadingAction: C,
|
|
36
|
+
supportingAction: C
|
|
37
|
+
}, G = "*,*: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-family: var(--dt-font-heading-s-family);--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-heading-font-weight: var(--dt-font-heading-s-weight);--notification-font-family: var(--dt-font-body-l-family);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-font-weight: var(--dt-font-body-l-weight);--notification-close-btn-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);font-family:var(--notification-font-family);font-size:var(--notification-font-size);line-height:var(--notification-line-height);font-weight:var(--notification-font-weight);color:var(--dt-color-content-default)}.c-notification.is-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.c-notification--small{--notification-close-btn-size: 40px;--notification-content-min-height: 20px;--notification-content-min-height-dismissible: 32px}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-family:var(--notification-heading-font-family);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height);font-weight:var(--notification-heading-font-weight)}@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.is-dismissible{max-width:calc(100% - var(--notification-close-btn-offset) - 40px)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-btn-offset);inset-inline-end:var(--notification-close-btn-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer pie-button,.c-notification-footer ::slotted(pie-button){margin-block-start:var(--dt-spacing-d)}.c-notification-footer.is-compact{align-self:center;margin-inline-start:auto}@media(max-width:767px){.c-notification-footer.c-notification-footer--stacked{flex-direction:column-reverse;gap:0}.c-notification-footer.c-notification-footer--stacked pie-button,.c-notification-footer.c-notification-footer--stacked ::slotted(pie-button){--btn-inline-size: 100%}}@media(min-width:768px){.c-notification-footer.c-notification-footer--stacked>pie-button{width:auto}}.c-notification-footer ::slotted(:not(pie-button)){display:none}@media(max-width:767px){.c-notification.c-notification--small{--notification-heading-font-family: var(--dt-font-heading-xs-family);--notification-heading-font-size: calc(var(--dt-font-heading-xs-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-xs-line-height--narrow) * 1px);--notification-heading-font-weight: var(--dt-font-heading-xs-weight);--notification-font-family: var(--dt-font-body-s-family);--notification-font-size: calc(var(--dt-font-body-s-size) * 1px);--notification-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--notification-font-weight: var(--dt-font-body-s-weight);--notification-close-btn-offset: var(--dt-spacing-a);padding:var(--dt-spacing-b);gap:0}.c-notification.c-notification--small.is-compact{gap:var(--dt-spacing-b)}.c-notification.c-notification--small .c-notification-icon-close{inset-block-start:var(--notification-close-btn-offset);inset-inline-end:var(--notification-close-btn-offset)}.c-notification.c-notification--small .c-notification-content-section{gap:var(--dt-spacing-b);min-height:var(--notification-content-min-height)}.c-notification.c-notification--small .c-notification-content-section.is-dismissible{min-height:var(--notification-content-min-height-dismissible);max-width:calc(100% - var(--notification-close-btn-size))}.c-notification.c-notification--small.is-compact .c-notification-content-section{flex:1;min-width:0}.c-notification.c-notification--small .c-notification-footer{align-items:flex-end}.c-notification.c-notification--small .c-notification-footer.is-compact{align-self:stretch;align-items:center}.c-notification.c-notification--small .c-notification-footer pie-button,.c-notification.c-notification--small .c-notification-footer ::slotted(pie-button){margin-block-start:var(--dt-spacing-b)}}:host([isCompact]) .c-notification-footer pie-button,:host([isCompact]) .c-notification-footer ::slotted(pie-button){margin-block-start:0}.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)}";
|
|
38
|
+
var H = Object.defineProperty, K = Object.getOwnPropertyDescriptor, e = (i, t, a, l) => {
|
|
39
|
+
for (var c = l > 1 ? void 0 : l ? K(t, a) : t, p = i.length - 1, u; p >= 0; p--)
|
|
40
|
+
(u = i[p]) && (c = (l ? u(t, a, c) : u(c)) || c);
|
|
41
|
+
return l && c && H(t, a, c), c;
|
|
41
42
|
};
|
|
42
|
-
let n = class extends
|
|
43
|
+
let n = class extends A {
|
|
43
44
|
constructor() {
|
|
44
|
-
super(...arguments), this.isOpen =
|
|
45
|
+
super(...arguments), this.isOpen = r.isOpen, this.variant = r.variant, this.position = r.position, this.size = r.size, this.isDismissible = r.isDismissible, this.isCompact = r.isCompact, this.headingLevel = r.headingLevel, this.hideIcon = r.hideIcon, this.hasStackedActions = r.hasStackedActions;
|
|
45
46
|
}
|
|
46
47
|
/**
|
|
47
48
|
* Lifecycle method executed when component is updated.
|
|
48
49
|
* It dispatches an event if notification is opened.
|
|
49
50
|
*/
|
|
50
51
|
updated(i) {
|
|
51
|
-
i.has("isOpen") && this.isOpen &&
|
|
52
|
+
i.has("isOpen") && this.isOpen && z(this, P, { targetNotification: this });
|
|
52
53
|
}
|
|
53
54
|
/**
|
|
54
55
|
* Renders the supporting action - either from slot or props.
|
|
@@ -58,7 +59,7 @@ let n = class extends C {
|
|
|
58
59
|
*/
|
|
59
60
|
renderSupportingAction() {
|
|
60
61
|
const { supportingAction: i, leadingAction: t } = this;
|
|
61
|
-
return i && (t != null && t.text) ? this.renderActionButton(i, "supporting") :
|
|
62
|
+
return i && (t != null && t.text) ? this.renderActionButton(i, "supporting") : f;
|
|
62
63
|
}
|
|
63
64
|
/**
|
|
64
65
|
* Renders the leading action from props.
|
|
@@ -67,7 +68,7 @@ let n = class extends C {
|
|
|
67
68
|
*/
|
|
68
69
|
renderLeadingAction() {
|
|
69
70
|
const { leadingAction: i } = this;
|
|
70
|
-
return i ? this.renderActionButton(i, "leading") :
|
|
71
|
+
return i ? this.renderActionButton(i, "leading") : f;
|
|
71
72
|
}
|
|
72
73
|
/**
|
|
73
74
|
* Template for the footer area
|
|
@@ -79,14 +80,14 @@ let n = class extends C {
|
|
|
79
80
|
const {
|
|
80
81
|
isCompact: i,
|
|
81
82
|
hasStackedActions: t
|
|
82
|
-
} = this,
|
|
83
|
-
[`${
|
|
83
|
+
} = this, a = {
|
|
84
|
+
[`${h}-footer`]: !0,
|
|
84
85
|
"is-compact": i,
|
|
85
|
-
[`${
|
|
86
|
+
[`${h}-footer--stacked`]: t && !i
|
|
86
87
|
};
|
|
87
88
|
return d`
|
|
88
89
|
<div
|
|
89
|
-
class="${
|
|
90
|
+
class="${k(a)}"
|
|
90
91
|
data-test-id="${o}-footer">
|
|
91
92
|
${this.renderSupportingAction()}
|
|
92
93
|
<slot name="supportingAction"></slot>
|
|
@@ -102,13 +103,13 @@ let n = class extends C {
|
|
|
102
103
|
* @private
|
|
103
104
|
*/
|
|
104
105
|
renderNotificationHeading() {
|
|
105
|
-
const { heading: i, headingLevel: t } = this,
|
|
106
|
-
return d`<${
|
|
106
|
+
const { heading: i, headingLevel: t } = this, a = I(t);
|
|
107
|
+
return d`<${a}
|
|
107
108
|
id="${o}-heading"
|
|
108
|
-
class="${
|
|
109
|
+
class="${h}-heading"
|
|
109
110
|
data-test-id="${o}-heading">
|
|
110
111
|
${i}
|
|
111
|
-
</${
|
|
112
|
+
</${a}>`;
|
|
112
113
|
}
|
|
113
114
|
/**
|
|
114
115
|
* Util method that returns an icon from a variant that has default icon.
|
|
@@ -126,7 +127,7 @@ let n = class extends C {
|
|
|
126
127
|
case "error":
|
|
127
128
|
return d`<icon-alert-circle class="icon" size="m" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
|
|
128
129
|
default:
|
|
129
|
-
return
|
|
130
|
+
return f;
|
|
130
131
|
}
|
|
131
132
|
}
|
|
132
133
|
/**
|
|
@@ -151,10 +152,10 @@ let n = class extends C {
|
|
|
151
152
|
<pie-icon-button
|
|
152
153
|
variant="ghost-secondary"
|
|
153
154
|
size="small"
|
|
154
|
-
class="${
|
|
155
|
+
class="${h}-icon-close"
|
|
155
156
|
data-test-id="${o}-icon-close"
|
|
156
157
|
@click="${this.handleCloseButton}"
|
|
157
|
-
aria-label="${
|
|
158
|
+
aria-label="${g((i = this.aria) == null ? void 0 : i.close)}">
|
|
158
159
|
<icon-close></icon-close>
|
|
159
160
|
</pie-icon-button>`;
|
|
160
161
|
}
|
|
@@ -165,7 +166,7 @@ let n = class extends C {
|
|
|
165
166
|
* @private
|
|
166
167
|
*/
|
|
167
168
|
handleCloseButton() {
|
|
168
|
-
this.isOpen = !1,
|
|
169
|
+
this.isOpen = !1, z(this, V, { targetNotification: this });
|
|
169
170
|
}
|
|
170
171
|
/**
|
|
171
172
|
* It handles the action button action.
|
|
@@ -176,7 +177,7 @@ let n = class extends C {
|
|
|
176
177
|
* @private
|
|
177
178
|
*/
|
|
178
179
|
handleActionClick(i) {
|
|
179
|
-
|
|
180
|
+
z(this, i === "leading" ? F : j, { targetNotification: this });
|
|
180
181
|
}
|
|
181
182
|
/**
|
|
182
183
|
* Render the action button depending on action type and its action.
|
|
@@ -189,32 +190,32 @@ let n = class extends C {
|
|
|
189
190
|
*/
|
|
190
191
|
renderActionButton(i, t) {
|
|
191
192
|
const {
|
|
192
|
-
text:
|
|
193
|
-
ariaLabel:
|
|
194
|
-
size:
|
|
193
|
+
text: a,
|
|
194
|
+
ariaLabel: l,
|
|
195
|
+
size: c,
|
|
195
196
|
href: p,
|
|
196
|
-
target:
|
|
197
|
-
rel:
|
|
198
|
-
download:
|
|
197
|
+
target: u,
|
|
198
|
+
rel: x,
|
|
199
|
+
download: v
|
|
199
200
|
} = i;
|
|
200
|
-
if (!
|
|
201
|
-
return
|
|
202
|
-
const
|
|
201
|
+
if (!a)
|
|
202
|
+
return f;
|
|
203
|
+
const m = t === "leading" ? "primary" : "ghost", w = c && D.includes(c) ? c : C.size, b = !!p;
|
|
203
204
|
return d`
|
|
204
205
|
<pie-button
|
|
205
|
-
variant="${
|
|
206
|
-
size="${
|
|
207
|
-
aria-label="${
|
|
206
|
+
variant="${m}"
|
|
207
|
+
size="${g(w)}"
|
|
208
|
+
aria-label="${g(l)}"
|
|
208
209
|
@click="${() => this.handleActionClick(t)}"
|
|
209
210
|
data-test-id="${o}-${t}-action"
|
|
210
211
|
?isFullWidth="${this.hasStackedActions}"
|
|
211
|
-
tag="${
|
|
212
|
-
type="${
|
|
213
|
-
href="${
|
|
214
|
-
target="${
|
|
215
|
-
rel="${
|
|
216
|
-
download="${
|
|
217
|
-
${
|
|
212
|
+
tag="${b ? "a" : "button"}"
|
|
213
|
+
type="${b ? f : "button"}"
|
|
214
|
+
href="${g(p)}"
|
|
215
|
+
target="${g(u)}"
|
|
216
|
+
rel="${g(x)}"
|
|
217
|
+
download="${g(v)}">
|
|
218
|
+
${a}
|
|
218
219
|
</pie-button>
|
|
219
220
|
`;
|
|
220
221
|
}
|
|
@@ -222,38 +223,40 @@ let n = class extends C {
|
|
|
222
223
|
const {
|
|
223
224
|
variant: i,
|
|
224
225
|
position: t,
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
226
|
+
size: a,
|
|
227
|
+
heading: l,
|
|
228
|
+
isDismissible: c,
|
|
229
|
+
isCompact: p,
|
|
230
|
+
hideIcon: u,
|
|
231
|
+
isOpen: x,
|
|
230
232
|
aria: v
|
|
231
233
|
} = this;
|
|
232
|
-
if (!
|
|
233
|
-
return
|
|
234
|
-
const m =
|
|
235
|
-
[
|
|
236
|
-
[`${
|
|
237
|
-
[`${
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
234
|
+
if (!x)
|
|
235
|
+
return f;
|
|
236
|
+
const m = c && !p, w = {
|
|
237
|
+
[h]: !0,
|
|
238
|
+
[`${h}--${i}`]: !0,
|
|
239
|
+
[`${h}--${t}`]: !0,
|
|
240
|
+
[`${h}--${a}`]: !0,
|
|
241
|
+
"is-compact": p
|
|
242
|
+
}, b = {
|
|
243
|
+
[`${h}-content-section`]: !0,
|
|
241
244
|
"is-dismissible": m
|
|
242
245
|
};
|
|
243
246
|
return d`
|
|
244
247
|
<div
|
|
245
248
|
data-test-id="${o}"
|
|
246
|
-
class="${w
|
|
249
|
+
class="${k(w)}"
|
|
247
250
|
role="region"
|
|
248
251
|
aria-live="${i === "error" ? "assertive" : "polite"}"
|
|
249
|
-
aria-labelledby="${
|
|
250
|
-
aria-label="${!
|
|
251
|
-
${m ? this.renderCloseButton() :
|
|
252
|
+
aria-labelledby="${l ? `${o}-heading` : f}"
|
|
253
|
+
aria-label="${!l && g(v == null ? void 0 : v.label)}">
|
|
254
|
+
${m ? this.renderCloseButton() : f}
|
|
252
255
|
|
|
253
|
-
<div class="${
|
|
254
|
-
${
|
|
256
|
+
<div class="${k(b)}">
|
|
257
|
+
${u ? f : this.renderIcon()}
|
|
255
258
|
<div>
|
|
256
|
-
${
|
|
259
|
+
${l ? this.renderNotificationHeading() : f}
|
|
257
260
|
<slot></slot>
|
|
258
261
|
</div>
|
|
259
262
|
</div>
|
|
@@ -262,64 +265,69 @@ let n = class extends C {
|
|
|
262
265
|
</div>`;
|
|
263
266
|
}
|
|
264
267
|
};
|
|
265
|
-
n.styles =
|
|
266
|
-
|
|
267
|
-
|
|
268
|
+
n.styles = N(G);
|
|
269
|
+
e([
|
|
270
|
+
s({ type: Boolean })
|
|
268
271
|
], n.prototype, "isOpen", 2);
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
+
e([
|
|
273
|
+
s({ type: String }),
|
|
274
|
+
$(o, E, r.variant)
|
|
272
275
|
], n.prototype, "variant", 2);
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
+
e([
|
|
277
|
+
s({ type: String }),
|
|
278
|
+
$(o, T, r.position)
|
|
276
279
|
], n.prototype, "position", 2);
|
|
277
|
-
|
|
278
|
-
|
|
280
|
+
e([
|
|
281
|
+
s({ type: String }),
|
|
282
|
+
$(o, B, r.size)
|
|
283
|
+
], n.prototype, "size", 2);
|
|
284
|
+
e([
|
|
285
|
+
s({ type: Boolean })
|
|
279
286
|
], n.prototype, "isDismissible", 2);
|
|
280
|
-
|
|
281
|
-
|
|
287
|
+
e([
|
|
288
|
+
s({ type: Boolean, reflect: !0 })
|
|
282
289
|
], n.prototype, "isCompact", 2);
|
|
283
|
-
|
|
284
|
-
|
|
290
|
+
e([
|
|
291
|
+
s({ type: String })
|
|
285
292
|
], n.prototype, "heading", 2);
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
293
|
+
e([
|
|
294
|
+
s({ type: String }),
|
|
295
|
+
$(o, L, r.headingLevel)
|
|
289
296
|
], n.prototype, "headingLevel", 2);
|
|
290
|
-
|
|
291
|
-
|
|
297
|
+
e([
|
|
298
|
+
s({ type: Boolean })
|
|
292
299
|
], n.prototype, "hideIcon", 2);
|
|
293
|
-
|
|
294
|
-
|
|
300
|
+
e([
|
|
301
|
+
s({ type: Object })
|
|
295
302
|
], n.prototype, "leadingAction", 2);
|
|
296
|
-
|
|
297
|
-
|
|
303
|
+
e([
|
|
304
|
+
s({ type: Object })
|
|
298
305
|
], n.prototype, "supportingAction", 2);
|
|
299
|
-
|
|
300
|
-
|
|
306
|
+
e([
|
|
307
|
+
s({ type: Boolean, reflect: !0 })
|
|
301
308
|
], n.prototype, "hasStackedActions", 2);
|
|
302
|
-
|
|
303
|
-
|
|
309
|
+
e([
|
|
310
|
+
s({ type: Object })
|
|
304
311
|
], n.prototype, "aria", 2);
|
|
305
|
-
|
|
312
|
+
e([
|
|
306
313
|
_({ slot: "icon" })
|
|
307
314
|
], n.prototype, "_iconSlot", 2);
|
|
308
|
-
n =
|
|
315
|
+
n = e([
|
|
309
316
|
S("pie-notification")
|
|
310
317
|
], n);
|
|
311
318
|
export {
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
319
|
+
V as ON_NOTIFICATION_CLOSE_EVENT,
|
|
320
|
+
F as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
|
|
321
|
+
P as ON_NOTIFICATION_OPEN_EVENT,
|
|
322
|
+
j as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
|
|
316
323
|
n as PieNotification,
|
|
317
|
-
|
|
318
|
-
|
|
324
|
+
D as actionSizes,
|
|
325
|
+
h as componentClass,
|
|
319
326
|
o as componentSelector,
|
|
320
|
-
|
|
321
|
-
|
|
327
|
+
C as defaultActionButtonProps,
|
|
328
|
+
r as defaultProps,
|
|
322
329
|
L as headingLevels,
|
|
323
330
|
T as positions,
|
|
331
|
+
B as sizes,
|
|
324
332
|
E as variants
|
|
325
333
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -65,6 +65,12 @@ export declare interface NotificationProps {
|
|
|
65
65
|
* Defines the proper styles, whether the component appears within the content or at the top of the interface
|
|
66
66
|
*/
|
|
67
67
|
position?: typeof positions[number];
|
|
68
|
+
/**
|
|
69
|
+
* Sets the size of the notification. When `small`, the component renders with
|
|
70
|
+
* reduced dimensions on narrow screens (below the md breakpoint).
|
|
71
|
+
* On wide screens, both sizes render identically.
|
|
72
|
+
*/
|
|
73
|
+
size?: typeof sizes[number];
|
|
68
74
|
/**
|
|
69
75
|
* When true, allows dismissing the notification by clicking on the close button.
|
|
70
76
|
*/
|
|
@@ -155,6 +161,7 @@ declare class PieNotification_2 extends PieElement implements NotificationProps
|
|
|
155
161
|
isOpen: boolean;
|
|
156
162
|
variant: "neutral" | "neutral-alternative" | "info" | "success" | "warning" | "error" | "translucent";
|
|
157
163
|
position: "inline-content" | "full-width";
|
|
164
|
+
size: "small" | "large";
|
|
158
165
|
isDismissible: boolean;
|
|
159
166
|
isCompact: boolean;
|
|
160
167
|
heading: NotificationProps['heading'];
|
|
@@ -259,6 +266,8 @@ export declare const positions: readonly ["inline-content", "full-width"];
|
|
|
259
266
|
|
|
260
267
|
declare type ReactBaseType = React_2.HTMLAttributes<HTMLDivElement>;
|
|
261
268
|
|
|
269
|
+
export declare const sizes: readonly ["small", "large"];
|
|
270
|
+
|
|
262
271
|
export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"];
|
|
263
272
|
|
|
264
273
|
export { }
|
package/dist/react.js
CHANGED
|
@@ -1,7 +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
|
|
4
|
+
import { ON_NOTIFICATION_CLOSE_EVENT as s, ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT as f, ON_NOTIFICATION_OPEN_EVENT as I, ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT as O, actionSizes as r, componentClass as C, componentSelector as _, defaultActionButtonProps as l, defaultProps as T, headingLevels as P, positions as m, sizes as E, variants as A } from "./index.js";
|
|
5
5
|
const n = o({
|
|
6
6
|
displayName: "PieNotification",
|
|
7
7
|
elementClass: t,
|
|
@@ -19,8 +19,8 @@ const n = o({
|
|
|
19
19
|
}
|
|
20
20
|
}), c = n;
|
|
21
21
|
export {
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
s as ON_NOTIFICATION_CLOSE_EVENT,
|
|
23
|
+
f as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
|
|
24
24
|
I as ON_NOTIFICATION_OPEN_EVENT,
|
|
25
25
|
O as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
|
|
26
26
|
c as PieNotification,
|
|
@@ -31,5 +31,6 @@ export {
|
|
|
31
31
|
T as defaultProps,
|
|
32
32
|
P as headingLevels,
|
|
33
33
|
m as positions,
|
|
34
|
-
E as
|
|
34
|
+
E as sizes,
|
|
35
|
+
A as variants
|
|
35
36
|
};
|
package/package.json
CHANGED
package/src/defs.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
|
3
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
|
+
export const sizes = ['small', 'large'] as const;
|
|
6
7
|
export const actionSizes = ['small-productive', 'xsmall'] as const;
|
|
7
8
|
|
|
8
9
|
type AriaProps = {
|
|
@@ -58,6 +59,13 @@ export interface NotificationProps {
|
|
|
58
59
|
*/
|
|
59
60
|
position?: typeof positions[number];
|
|
60
61
|
|
|
62
|
+
/**
|
|
63
|
+
* Sets the size of the notification. When `small`, the component renders with
|
|
64
|
+
* reduced dimensions on narrow screens (below the md breakpoint).
|
|
65
|
+
* On wide screens, both sizes render identically.
|
|
66
|
+
*/
|
|
67
|
+
size?: typeof sizes[number];
|
|
68
|
+
|
|
61
69
|
/**
|
|
62
70
|
* When true, allows dismissing the notification by clicking on the close button.
|
|
63
71
|
*/
|
|
@@ -154,6 +162,7 @@ export const defaultActionButtonProps: ActionProps = {
|
|
|
154
162
|
export const defaultProps: DefaultProps = {
|
|
155
163
|
variant: 'neutral',
|
|
156
164
|
position: 'inline-content',
|
|
165
|
+
size: 'large',
|
|
157
166
|
isDismissible: false,
|
|
158
167
|
isCompact: false,
|
|
159
168
|
headingLevel: 'h2',
|
package/src/index.ts
CHANGED
|
@@ -8,13 +8,17 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
|
|
|
8
8
|
import { classMap } from 'lit/directives/class-map.js';
|
|
9
9
|
import { html, unsafeStatic } from 'lit/static-html.js';
|
|
10
10
|
import { validPropertyValues, dispatchCustomEvent, safeCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
11
|
-
import {
|
|
11
|
+
import {
|
|
12
|
+
property,
|
|
13
|
+
queryAssignedElements,
|
|
14
|
+
} from 'lit/decorators.js';
|
|
12
15
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
13
16
|
import {
|
|
14
17
|
type NotificationProps,
|
|
15
18
|
type ActionProps,
|
|
16
19
|
variants,
|
|
17
20
|
positions,
|
|
21
|
+
sizes,
|
|
18
22
|
headingLevels,
|
|
19
23
|
actionSizes,
|
|
20
24
|
componentSelector,
|
|
@@ -63,6 +67,10 @@ export class PieNotification extends PieElement implements NotificationProps {
|
|
|
63
67
|
@validPropertyValues(componentSelector, positions, defaultProps.position)
|
|
64
68
|
public position = defaultProps.position;
|
|
65
69
|
|
|
70
|
+
@property({ type: String })
|
|
71
|
+
@validPropertyValues(componentSelector, sizes, defaultProps.size)
|
|
72
|
+
public size = defaultProps.size;
|
|
73
|
+
|
|
66
74
|
@property({ type: Boolean })
|
|
67
75
|
public isDismissible = defaultProps.isDismissible;
|
|
68
76
|
|
|
@@ -273,7 +281,7 @@ export class PieNotification extends PieElement implements NotificationProps {
|
|
|
273
281
|
const {
|
|
274
282
|
text,
|
|
275
283
|
ariaLabel,
|
|
276
|
-
size
|
|
284
|
+
size: actionSize,
|
|
277
285
|
href,
|
|
278
286
|
target,
|
|
279
287
|
rel,
|
|
@@ -285,7 +293,7 @@ export class PieNotification extends PieElement implements NotificationProps {
|
|
|
285
293
|
}
|
|
286
294
|
|
|
287
295
|
const buttonVariant = actionType === 'leading' ? 'primary' : 'ghost';
|
|
288
|
-
const buttonSize =
|
|
296
|
+
const buttonSize = actionSize && actionSizes.includes(actionSize) ? actionSize : defaultActionButtonProps.size;
|
|
289
297
|
const isLink = !!href;
|
|
290
298
|
|
|
291
299
|
return html`
|
|
@@ -311,6 +319,7 @@ export class PieNotification extends PieElement implements NotificationProps {
|
|
|
311
319
|
const {
|
|
312
320
|
variant,
|
|
313
321
|
position,
|
|
322
|
+
size,
|
|
314
323
|
heading,
|
|
315
324
|
isDismissible,
|
|
316
325
|
isCompact,
|
|
@@ -329,6 +338,7 @@ export class PieNotification extends PieElement implements NotificationProps {
|
|
|
329
338
|
[componentClass]: true,
|
|
330
339
|
[`${componentClass}--${variant}`]: true,
|
|
331
340
|
[`${componentClass}--${position}`]: true,
|
|
341
|
+
[`${componentClass}--${size}`]: true,
|
|
332
342
|
'is-compact': isCompact,
|
|
333
343
|
};
|
|
334
344
|
|
package/src/notification.scss
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
--notification-font-size: #{p.font-size(--dt-font-body-l-size)};
|
|
18
18
|
--notification-line-height: #{p.line-height(--dt-font-body-l-line-height)};
|
|
19
19
|
--notification-font-weight: var(--dt-font-body-l-weight);
|
|
20
|
-
--notification-close-
|
|
20
|
+
--notification-close-btn-offset: var(--dt-spacing-b);
|
|
21
21
|
--notification-icon-fill: var(--dt-color-content-inverse);
|
|
22
22
|
--notification-icon-background-color: var(--dt-color-container-inverse);
|
|
23
23
|
--icon-size-override: 24px;
|
|
@@ -68,13 +68,17 @@
|
|
|
68
68
|
--notification-icon-fill: var(--dt-color-content-light);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
|
|
71
|
+
&.c-notification--translucent {
|
|
72
72
|
--notification-background-color: var(--dt-color-container-prominent);
|
|
73
73
|
|
|
74
74
|
backdrop-filter: blur(var(--dt-blur-prominent));
|
|
75
|
-
|
|
76
75
|
}
|
|
77
76
|
|
|
77
|
+
&.c-notification--small {
|
|
78
|
+
--notification-close-btn-size: 40px;
|
|
79
|
+
--notification-content-min-height: 20px; // 36px total - 8px padding top - 8px padding bottom
|
|
80
|
+
--notification-content-min-height-dismissible: 32px; // 48px total - 8px padding top - 8px padding bottom
|
|
81
|
+
}
|
|
78
82
|
|
|
79
83
|
&-heading {
|
|
80
84
|
margin: 0;
|
|
@@ -97,14 +101,14 @@
|
|
|
97
101
|
gap: var(--dt-spacing-c);
|
|
98
102
|
|
|
99
103
|
&.is-dismissible {
|
|
100
|
-
max-width: calc(100% - var(--notification-close-
|
|
104
|
+
max-width: calc(100% - var(--notification-close-btn-offset) - 40px); // 40px is the size of the medium icon button
|
|
101
105
|
}
|
|
102
106
|
}
|
|
103
107
|
|
|
104
108
|
&-icon-close {
|
|
105
109
|
position: absolute;
|
|
106
|
-
inset-block-start: var(--notification-close-
|
|
107
|
-
inset-inline-end: var(--notification-close-
|
|
110
|
+
inset-block-start: var(--notification-close-btn-offset);
|
|
111
|
+
inset-inline-end: var(--notification-close-btn-offset);
|
|
108
112
|
}
|
|
109
113
|
|
|
110
114
|
&-footer {
|
|
@@ -128,6 +132,7 @@
|
|
|
128
132
|
flex-direction: column-reverse;
|
|
129
133
|
gap: 0;
|
|
130
134
|
|
|
135
|
+
pie-button,
|
|
131
136
|
::slotted(pie-button) {
|
|
132
137
|
--btn-inline-size: 100%;
|
|
133
138
|
}
|
|
@@ -145,6 +150,63 @@
|
|
|
145
150
|
display: none;
|
|
146
151
|
}
|
|
147
152
|
}
|
|
153
|
+
|
|
154
|
+
@include media('<md') {
|
|
155
|
+
&.c-notification--small {
|
|
156
|
+
--notification-heading-font-family: var(--dt-font-heading-xs-family);
|
|
157
|
+
--notification-heading-font-size: #{p.font-size(--dt-font-heading-xs-size--narrow)};
|
|
158
|
+
--notification-heading-line-height: #{p.line-height(--dt-font-heading-xs-line-height--narrow)};
|
|
159
|
+
--notification-heading-font-weight: var(--dt-font-heading-xs-weight);
|
|
160
|
+
--notification-font-family: var(--dt-font-body-s-family);
|
|
161
|
+
--notification-font-size: #{p.font-size(--dt-font-body-s-size)};
|
|
162
|
+
--notification-line-height: #{p.line-height(--dt-font-body-s-line-height)};
|
|
163
|
+
--notification-font-weight: var(--dt-font-body-s-weight);
|
|
164
|
+
--notification-close-btn-offset: var(--dt-spacing-a);
|
|
165
|
+
|
|
166
|
+
padding: var(--dt-spacing-b);
|
|
167
|
+
gap: 0;
|
|
168
|
+
|
|
169
|
+
&.is-compact {
|
|
170
|
+
gap: var(--dt-spacing-b);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.c-notification-icon-close {
|
|
174
|
+
inset-block-start: var(--notification-close-btn-offset);
|
|
175
|
+
inset-inline-end: var(--notification-close-btn-offset);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.c-notification-content-section {
|
|
179
|
+
gap: var(--dt-spacing-b);
|
|
180
|
+
|
|
181
|
+
min-height: var(--notification-content-min-height);
|
|
182
|
+
|
|
183
|
+
&.is-dismissible {
|
|
184
|
+
min-height: var(--notification-content-min-height-dismissible);
|
|
185
|
+
max-width: calc(100% - var(--notification-close-btn-size));
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
&.is-compact .c-notification-content-section {
|
|
190
|
+
flex: 1;
|
|
191
|
+
min-width: 0;
|
|
192
|
+
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.c-notification-footer {
|
|
196
|
+
align-items: flex-end;
|
|
197
|
+
|
|
198
|
+
&.is-compact {
|
|
199
|
+
align-self: stretch;
|
|
200
|
+
align-items: center;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
pie-button,
|
|
204
|
+
::slotted(pie-button) {
|
|
205
|
+
margin-block-start: var(--dt-spacing-b);
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
}
|
|
148
210
|
}
|
|
149
211
|
|
|
150
212
|
:host([isCompact]) {
|