@justeattakeaway/pie-notification 0.14.9 → 0.15.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 +2 -2
- package/custom-elements.json +33 -1
- package/dist/index.d.ts +9 -1
- package/dist/index.js +127 -116
- package/dist/react.d.ts +9 -1
- package/dist/react.js +8 -6
- package/package.json +4 -4
- package/src/defs.ts +15 -1
- package/src/index.ts +6 -3
package/README.md
CHANGED
|
@@ -41,8 +41,8 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
|
|
|
41
41
|
| `isOpen` | `true`, `false` | When true, the notification is set to be open and visible. | `true` |
|
|
42
42
|
| `hideIcon` | `true`, `false` | When true, the icon will be hidden. | `false` |
|
|
43
43
|
| `hasStackedActions`| `true`, `false` | When true, action buttons will stack on narrow screens. | `false` |
|
|
44
|
-
| `leadingAction` | `{ text: string, ariaLabel?: string }` | An object representing the leading action of the notification. | `undefined` |
|
|
45
|
-
| `supportingAction` | `{ text: string, ariaLabel?: string }` | An object representing the supporting action of the notification. <br> The action will only render if `leadingAction` is passed. | `undefined` |
|
|
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
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
|
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": "actionSizes",
|
|
42
|
+
"type": {
|
|
43
|
+
"text": "['small-productive', 'xsmall']"
|
|
44
|
+
},
|
|
45
|
+
"default": "['small-productive', 'xsmall']"
|
|
46
|
+
},
|
|
39
47
|
{
|
|
40
48
|
"kind": "variable",
|
|
41
49
|
"name": "componentSelector",
|
|
@@ -76,13 +84,21 @@
|
|
|
76
84
|
"default": "`${componentSelector}-supporting-action-click`",
|
|
77
85
|
"description": "Event name for when the notification supporting action is clicked."
|
|
78
86
|
},
|
|
87
|
+
{
|
|
88
|
+
"kind": "variable",
|
|
89
|
+
"name": "defaultActionButtonProps",
|
|
90
|
+
"type": {
|
|
91
|
+
"text": "ActionProps"
|
|
92
|
+
},
|
|
93
|
+
"default": "{\n text: '',\n ariaLabel: '',\n size: 'small-productive',\n}"
|
|
94
|
+
},
|
|
79
95
|
{
|
|
80
96
|
"kind": "variable",
|
|
81
97
|
"name": "defaultProps",
|
|
82
98
|
"type": {
|
|
83
99
|
"text": "DefaultProps"
|
|
84
100
|
},
|
|
85
|
-
"default": "{\n variant: 'neutral',\n position: 'inline-content',\n isDismissible: false,\n isCompact: false,\n headingLevel: 'h2',\n hideIcon: false,\n isOpen: true,\n hasStackedActions: false,\n}"
|
|
101
|
+
"default": "{\n variant: 'neutral',\n position: 'inline-content',\n isDismissible: false,\n isCompact: false,\n headingLevel: 'h2',\n hideIcon: false,\n isOpen: true,\n hasStackedActions: false,\n leadingAction: defaultActionButtonProps,\n supportingAction: defaultActionButtonProps,\n}"
|
|
86
102
|
}
|
|
87
103
|
],
|
|
88
104
|
"exports": [
|
|
@@ -110,6 +126,14 @@
|
|
|
110
126
|
"module": "src/defs.js"
|
|
111
127
|
}
|
|
112
128
|
},
|
|
129
|
+
{
|
|
130
|
+
"kind": "js",
|
|
131
|
+
"name": "actionSizes",
|
|
132
|
+
"declaration": {
|
|
133
|
+
"name": "actionSizes",
|
|
134
|
+
"module": "src/defs.js"
|
|
135
|
+
}
|
|
136
|
+
},
|
|
113
137
|
{
|
|
114
138
|
"kind": "js",
|
|
115
139
|
"name": "componentSelector",
|
|
@@ -158,6 +182,14 @@
|
|
|
158
182
|
"module": "src/defs.js"
|
|
159
183
|
}
|
|
160
184
|
},
|
|
185
|
+
{
|
|
186
|
+
"kind": "js",
|
|
187
|
+
"name": "defaultActionButtonProps",
|
|
188
|
+
"declaration": {
|
|
189
|
+
"name": "defaultActionButtonProps",
|
|
190
|
+
"module": "src/defs.js"
|
|
191
|
+
}
|
|
192
|
+
},
|
|
161
193
|
{
|
|
162
194
|
"kind": "js",
|
|
163
195
|
"name": "defaultProps",
|
package/dist/index.d.ts
CHANGED
|
@@ -14,8 +14,14 @@ export declare type ActionProps = {
|
|
|
14
14
|
* The ARIA label for the button.
|
|
15
15
|
*/
|
|
16
16
|
ariaLabel?: string;
|
|
17
|
+
/**
|
|
18
|
+
* The size of the button.
|
|
19
|
+
*/
|
|
20
|
+
size?: typeof actionSizes[number];
|
|
17
21
|
};
|
|
18
22
|
|
|
23
|
+
export declare const actionSizes: readonly ["small-productive", "xsmall"];
|
|
24
|
+
|
|
19
25
|
declare type AriaProps = {
|
|
20
26
|
close?: string;
|
|
21
27
|
label?: string;
|
|
@@ -25,7 +31,9 @@ export declare const componentClass = "c-notification";
|
|
|
25
31
|
|
|
26
32
|
export declare const componentSelector = "pie-notification";
|
|
27
33
|
|
|
28
|
-
export declare
|
|
34
|
+
export declare const defaultActionButtonProps: ActionProps;
|
|
35
|
+
|
|
36
|
+
export declare type DefaultProps = ComponentDefaultProps<NotificationProps, keyof Omit<NotificationProps, 'heading' | 'aria'>>;
|
|
29
37
|
|
|
30
38
|
export declare const defaultProps: DefaultProps;
|
|
31
39
|
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { LitElement as k, unsafeCSS as
|
|
2
|
-
import { classMap as
|
|
1
|
+
import { LitElement as k, unsafeCSS as z, nothing as f } from "lit";
|
|
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
|
|
6
|
-
import { ifDefined as
|
|
4
|
+
import { validPropertyValues as O, safeCustomElement as _, dispatchCustomEvent as y } from "@justeattakeaway/pie-webc-core";
|
|
5
|
+
import { property as s, queryAssignedElements as S } 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,14 +11,18 @@ 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 m = class m extends k {
|
|
15
15
|
willUpdate() {
|
|
16
|
-
this.getAttribute("v") || this.setAttribute("v",
|
|
16
|
+
this.getAttribute("v") || this.setAttribute("v", m.v);
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
|
|
20
|
-
let
|
|
21
|
-
const
|
|
19
|
+
m.v = "0.15.0";
|
|
20
|
+
let x = 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", r = "c-notification", D = `${t}-close`, V = `${t}-open`, P = `${t}-leading-action-click`, F = `${t}-supporting-action-click`, v = {
|
|
22
|
+
text: "",
|
|
23
|
+
ariaLabel: "",
|
|
24
|
+
size: "small-productive"
|
|
25
|
+
}, l = {
|
|
22
26
|
variant: "neutral",
|
|
23
27
|
position: "inline-content",
|
|
24
28
|
isDismissible: !1,
|
|
@@ -26,23 +30,25 @@ const S = ["neutral", "neutral-alternative", "info", "success", "warning", "erro
|
|
|
26
30
|
headingLevel: "h2",
|
|
27
31
|
hideIcon: !1,
|
|
28
32
|
isOpen: !0,
|
|
29
|
-
hasStackedActions: !1
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
hasStackedActions: !1,
|
|
34
|
+
leadingAction: v,
|
|
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-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);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-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}}";
|
|
37
|
+
var G = Object.defineProperty, H = Object.getOwnPropertyDescriptor, c = (i, o, n, d) => {
|
|
38
|
+
for (var e = d > 1 ? void 0 : d ? H(o, n) : o, u = i.length - 1, h; u >= 0; u--)
|
|
39
|
+
(h = i[u]) && (e = (d ? h(o, n, e) : h(e)) || e);
|
|
40
|
+
return d && e && G(o, n, e), e;
|
|
35
41
|
};
|
|
36
|
-
let
|
|
42
|
+
let a = class extends x {
|
|
37
43
|
constructor() {
|
|
38
|
-
super(...arguments), this.isOpen =
|
|
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;
|
|
39
45
|
}
|
|
40
46
|
/**
|
|
41
47
|
* Lifecycle method executed when component is updated.
|
|
42
48
|
* It dispatches an event if notification is opened.
|
|
43
49
|
*/
|
|
44
50
|
updated(i) {
|
|
45
|
-
i.has("isOpen") && this.isOpen &&
|
|
51
|
+
i.has("isOpen") && this.isOpen && y(this, V, { targetNotification: this });
|
|
46
52
|
}
|
|
47
53
|
/**
|
|
48
54
|
* Template for the footer area
|
|
@@ -55,18 +61,18 @@ let e = class extends $ {
|
|
|
55
61
|
leadingAction: i,
|
|
56
62
|
supportingAction: o,
|
|
57
63
|
isCompact: n,
|
|
58
|
-
hasStackedActions:
|
|
59
|
-
} = this,
|
|
60
|
-
[`${
|
|
61
|
-
[`${
|
|
62
|
-
[`${
|
|
64
|
+
hasStackedActions: d
|
|
65
|
+
} = this, e = {
|
|
66
|
+
[`${r}-footer`]: !0,
|
|
67
|
+
[`${r}-footer--compact`]: n,
|
|
68
|
+
[`${r}-footer--stacked`]: d && !n
|
|
63
69
|
};
|
|
64
70
|
return p`
|
|
65
71
|
<footer
|
|
66
|
-
class="${
|
|
72
|
+
class="${$(e)}"
|
|
67
73
|
data-test-id="${t}-footer">
|
|
68
|
-
${o ? this.renderActionButton(o, "supporting") :
|
|
69
|
-
${i ? this.renderActionButton(i, "leading") :
|
|
74
|
+
${o ? this.renderActionButton(o, "supporting") : f}
|
|
75
|
+
${i ? this.renderActionButton(i, "leading") : f}
|
|
70
76
|
</footer>
|
|
71
77
|
`;
|
|
72
78
|
}
|
|
@@ -80,7 +86,7 @@ let e = class extends $ {
|
|
|
80
86
|
const { heading: i, headingLevel: o } = this, n = w(o);
|
|
81
87
|
return p`<${n}
|
|
82
88
|
id="${t}-heading"
|
|
83
|
-
class="${
|
|
89
|
+
class="${r}-heading"
|
|
84
90
|
data-test-id="${t}-heading">
|
|
85
91
|
${i}
|
|
86
92
|
</${n}>`;
|
|
@@ -101,7 +107,7 @@ let e = class extends $ {
|
|
|
101
107
|
case "error":
|
|
102
108
|
return p`<icon-alert-circle class="icon" size="m" data-test-id="${t}-heading-icon-error"></icon-alert-circle>`;
|
|
103
109
|
default:
|
|
104
|
-
return
|
|
110
|
+
return f;
|
|
105
111
|
}
|
|
106
112
|
}
|
|
107
113
|
/**
|
|
@@ -126,10 +132,10 @@ let e = class extends $ {
|
|
|
126
132
|
<pie-icon-button
|
|
127
133
|
variant="ghost-secondary"
|
|
128
134
|
size="small"
|
|
129
|
-
class="${
|
|
135
|
+
class="${r}-icon-close"
|
|
130
136
|
data-test-id="${t}-icon-close"
|
|
131
137
|
@click="${this.handleCloseButton}"
|
|
132
|
-
aria-label="${
|
|
138
|
+
aria-label="${g((i = this.aria) == null ? void 0 : i.close)}">
|
|
133
139
|
<icon-close></icon-close>
|
|
134
140
|
</pie-icon-button>`;
|
|
135
141
|
}
|
|
@@ -140,7 +146,7 @@ let e = class extends $ {
|
|
|
140
146
|
* @private
|
|
141
147
|
*/
|
|
142
148
|
handleCloseButton() {
|
|
143
|
-
this.isOpen = !1,
|
|
149
|
+
this.isOpen = !1, y(this, D, { targetNotification: this });
|
|
144
150
|
}
|
|
145
151
|
/**
|
|
146
152
|
* It handles the action button action.
|
|
@@ -151,7 +157,7 @@ let e = class extends $ {
|
|
|
151
157
|
* @private
|
|
152
158
|
*/
|
|
153
159
|
handleActionClick(i) {
|
|
154
|
-
|
|
160
|
+
y(this, i === "leading" ? P : F, { targetNotification: this });
|
|
155
161
|
}
|
|
156
162
|
/**
|
|
157
163
|
* Render the action button depending on action type and its action.
|
|
@@ -163,121 +169,126 @@ let e = class extends $ {
|
|
|
163
169
|
* @private
|
|
164
170
|
*/
|
|
165
171
|
renderActionButton(i, o) {
|
|
166
|
-
const { text: n, ariaLabel:
|
|
167
|
-
|
|
172
|
+
const { text: n, ariaLabel: d, size: e = v.size } = i;
|
|
173
|
+
if (!n)
|
|
174
|
+
return f;
|
|
175
|
+
const u = o === "leading" ? "primary" : "ghost", h = e && L.includes(e) ? e : v.size;
|
|
176
|
+
return p`
|
|
168
177
|
<pie-button
|
|
169
|
-
variant="${
|
|
170
|
-
size="
|
|
171
|
-
aria-label="${
|
|
178
|
+
variant="${u}"
|
|
179
|
+
size="${g(h)}"
|
|
180
|
+
aria-label="${g(d)}"
|
|
172
181
|
@click="${() => this.handleActionClick(o)}"
|
|
173
182
|
data-test-id="${t}-${o}-action"
|
|
174
183
|
?isFullWidth="${this.hasStackedActions}"
|
|
175
184
|
type="button">
|
|
176
185
|
${n}
|
|
177
186
|
</pie-button>
|
|
178
|
-
|
|
187
|
+
`;
|
|
179
188
|
}
|
|
180
189
|
render() {
|
|
181
190
|
const {
|
|
182
191
|
variant: i,
|
|
183
192
|
position: o,
|
|
184
193
|
heading: n,
|
|
185
|
-
isDismissible:
|
|
186
|
-
isCompact:
|
|
187
|
-
hideIcon:
|
|
194
|
+
isDismissible: d,
|
|
195
|
+
isCompact: e,
|
|
196
|
+
hideIcon: u,
|
|
188
197
|
leadingAction: h,
|
|
189
|
-
isOpen:
|
|
190
|
-
aria:
|
|
198
|
+
isOpen: N,
|
|
199
|
+
aria: b
|
|
191
200
|
} = this;
|
|
192
|
-
if (!
|
|
193
|
-
return
|
|
194
|
-
const
|
|
195
|
-
[
|
|
196
|
-
[`${
|
|
197
|
-
[`${
|
|
198
|
-
[`${
|
|
201
|
+
if (!N)
|
|
202
|
+
return f;
|
|
203
|
+
const C = d && !e, A = {
|
|
204
|
+
[r]: !0,
|
|
205
|
+
[`${r}--${i}`]: !0,
|
|
206
|
+
[`${r}--${o}`]: !0,
|
|
207
|
+
[`${r}--compact`]: e
|
|
199
208
|
}, I = {
|
|
200
|
-
[`${
|
|
201
|
-
[`${
|
|
209
|
+
[`${r}-content-section`]: !0,
|
|
210
|
+
[`${r}-content-section--dismissible`]: C
|
|
202
211
|
};
|
|
203
212
|
return p`
|
|
204
213
|
<div
|
|
205
214
|
data-test-id="${t}"
|
|
206
|
-
class="${
|
|
215
|
+
class="${$(A)}"
|
|
207
216
|
role="region"
|
|
208
217
|
aria-live="${i === "error" ? "assertive" : "polite"}"
|
|
209
|
-
aria-labelledby="${n ? `${t}-heading` :
|
|
210
|
-
aria-label="${!n &&
|
|
211
|
-
${
|
|
218
|
+
aria-labelledby="${n ? `${t}-heading` : f}"
|
|
219
|
+
aria-label="${!n && g(b == null ? void 0 : b.label)}">
|
|
220
|
+
${C ? this.renderCloseButton() : f}
|
|
212
221
|
|
|
213
|
-
<section class="${
|
|
214
|
-
${
|
|
222
|
+
<section class="${$(I)}">
|
|
223
|
+
${u ? f : this.renderIcon()}
|
|
215
224
|
<article>
|
|
216
|
-
${n ? this.renderNotificationHeading() :
|
|
225
|
+
${n ? this.renderNotificationHeading() : f}
|
|
217
226
|
<slot></slot>
|
|
218
227
|
</article>
|
|
219
228
|
</section>
|
|
220
229
|
|
|
221
|
-
${h != null && h.text ? this.renderFooter() :
|
|
230
|
+
${h != null && h.text ? this.renderFooter() : f}
|
|
222
231
|
</div>`;
|
|
223
232
|
}
|
|
224
233
|
};
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
],
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
],
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
],
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
],
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
],
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
],
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
],
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
],
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
],
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
],
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
],
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
],
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
],
|
|
268
|
-
|
|
234
|
+
a.styles = z(j);
|
|
235
|
+
c([
|
|
236
|
+
s({ type: Boolean })
|
|
237
|
+
], a.prototype, "isOpen", 2);
|
|
238
|
+
c([
|
|
239
|
+
s({ type: String }),
|
|
240
|
+
O(t, E, l.variant)
|
|
241
|
+
], a.prototype, "variant", 2);
|
|
242
|
+
c([
|
|
243
|
+
s({ type: String }),
|
|
244
|
+
O(t, B, l.position)
|
|
245
|
+
], a.prototype, "position", 2);
|
|
246
|
+
c([
|
|
247
|
+
s({ type: Boolean })
|
|
248
|
+
], a.prototype, "isDismissible", 2);
|
|
249
|
+
c([
|
|
250
|
+
s({ type: Boolean })
|
|
251
|
+
], a.prototype, "isCompact", 2);
|
|
252
|
+
c([
|
|
253
|
+
s({ type: String })
|
|
254
|
+
], a.prototype, "heading", 2);
|
|
255
|
+
c([
|
|
256
|
+
s({ type: String }),
|
|
257
|
+
O(t, T, l.headingLevel)
|
|
258
|
+
], a.prototype, "headingLevel", 2);
|
|
259
|
+
c([
|
|
260
|
+
s({ type: Boolean })
|
|
261
|
+
], a.prototype, "hideIcon", 2);
|
|
262
|
+
c([
|
|
263
|
+
s({ type: Object })
|
|
264
|
+
], a.prototype, "leadingAction", 2);
|
|
265
|
+
c([
|
|
266
|
+
s({ type: Object })
|
|
267
|
+
], a.prototype, "supportingAction", 2);
|
|
268
|
+
c([
|
|
269
|
+
s({ type: Boolean })
|
|
270
|
+
], a.prototype, "hasStackedActions", 2);
|
|
271
|
+
c([
|
|
272
|
+
s({ type: Object })
|
|
273
|
+
], a.prototype, "aria", 2);
|
|
274
|
+
c([
|
|
275
|
+
S({ slot: "icon" })
|
|
276
|
+
], a.prototype, "_iconSlot", 2);
|
|
277
|
+
a = c([
|
|
269
278
|
_("pie-notification")
|
|
270
|
-
],
|
|
279
|
+
], a);
|
|
271
280
|
export {
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
281
|
+
D as ON_NOTIFICATION_CLOSE_EVENT,
|
|
282
|
+
P as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
|
|
283
|
+
V as ON_NOTIFICATION_OPEN_EVENT,
|
|
284
|
+
F as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
|
|
285
|
+
a as PieNotification,
|
|
286
|
+
L as actionSizes,
|
|
287
|
+
r as componentClass,
|
|
278
288
|
t as componentSelector,
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
T as
|
|
282
|
-
|
|
289
|
+
v as defaultActionButtonProps,
|
|
290
|
+
l as defaultProps,
|
|
291
|
+
T as headingLevels,
|
|
292
|
+
B as positions,
|
|
293
|
+
E as variants
|
|
283
294
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -15,8 +15,14 @@ export declare type ActionProps = {
|
|
|
15
15
|
* The ARIA label for the button.
|
|
16
16
|
*/
|
|
17
17
|
ariaLabel?: string;
|
|
18
|
+
/**
|
|
19
|
+
* The size of the button.
|
|
20
|
+
*/
|
|
21
|
+
size?: typeof actionSizes[number];
|
|
18
22
|
};
|
|
19
23
|
|
|
24
|
+
export declare const actionSizes: readonly ["small-productive", "xsmall"];
|
|
25
|
+
|
|
20
26
|
declare type AriaProps = {
|
|
21
27
|
close?: string;
|
|
22
28
|
label?: string;
|
|
@@ -26,7 +32,9 @@ export declare const componentClass = "c-notification";
|
|
|
26
32
|
|
|
27
33
|
export declare const componentSelector = "pie-notification";
|
|
28
34
|
|
|
29
|
-
export declare
|
|
35
|
+
export declare const defaultActionButtonProps: ActionProps;
|
|
36
|
+
|
|
37
|
+
export declare type DefaultProps = ComponentDefaultProps<NotificationProps, keyof Omit<NotificationProps, 'heading' | 'aria'>>;
|
|
30
38
|
|
|
31
39
|
export declare const defaultProps: DefaultProps;
|
|
32
40
|
|
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 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
|
|
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, actionSizes as r, componentClass as C, componentSelector as _, defaultActionButtonProps as l, defaultProps as T, headingLevels as P, positions as m, variants as E } from "./index.js";
|
|
5
5
|
const n = o({
|
|
6
6
|
displayName: "PieNotification",
|
|
7
7
|
elementClass: t,
|
|
@@ -24,10 +24,12 @@ export {
|
|
|
24
24
|
I as ON_NOTIFICATION_OPEN_EVENT,
|
|
25
25
|
O as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
|
|
26
26
|
c as PieNotification,
|
|
27
|
+
r as actionSizes,
|
|
27
28
|
C as componentClass,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
T as
|
|
31
|
-
|
|
32
|
-
m as
|
|
29
|
+
_ as componentSelector,
|
|
30
|
+
l as defaultActionButtonProps,
|
|
31
|
+
T as defaultProps,
|
|
32
|
+
P as headingLevels,
|
|
33
|
+
m as positions,
|
|
34
|
+
E as variants
|
|
33
35
|
};
|
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.15.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -40,14 +40,14 @@
|
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
42
|
"@justeattakeaway/pie-components-config": "0.21.0",
|
|
43
|
-
"@justeattakeaway/pie-css": "0.
|
|
43
|
+
"@justeattakeaway/pie-css": "0.19.0",
|
|
44
44
|
"@justeattakeaway/pie-monorepo-utils": "0.6.0",
|
|
45
45
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
46
46
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@justeattakeaway/pie-icon-button": "2.0.
|
|
50
|
-
"@justeattakeaway/pie-icons-webc": "1.14.
|
|
49
|
+
"@justeattakeaway/pie-icon-button": "2.0.5",
|
|
50
|
+
"@justeattakeaway/pie-icons-webc": "1.14.1",
|
|
51
51
|
"@justeattakeaway/pie-webc-core": "1.0.0"
|
|
52
52
|
},
|
|
53
53
|
"volta": {
|
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'] 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 actionSizes = ['small-productive', 'xsmall'] as const;
|
|
6
7
|
|
|
7
8
|
type AriaProps = {
|
|
8
9
|
close?: string;
|
|
@@ -19,6 +20,11 @@ export type ActionProps = {
|
|
|
19
20
|
* The ARIA label for the button.
|
|
20
21
|
*/
|
|
21
22
|
ariaLabel?: string;
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* The size of the button.
|
|
26
|
+
*/
|
|
27
|
+
size?: typeof actionSizes[number];
|
|
22
28
|
};
|
|
23
29
|
|
|
24
30
|
export interface NotificationProps {
|
|
@@ -116,7 +122,13 @@ export const ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT = `${componentSelector}-
|
|
|
116
122
|
*/
|
|
117
123
|
export const ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT = `${componentSelector}-supporting-action-click`;
|
|
118
124
|
|
|
119
|
-
export type DefaultProps = ComponentDefaultProps<NotificationProps, keyof Omit<NotificationProps, 'heading' | 'aria'
|
|
125
|
+
export type DefaultProps = ComponentDefaultProps<NotificationProps, keyof Omit<NotificationProps, 'heading' | 'aria'>>;
|
|
126
|
+
|
|
127
|
+
export const defaultActionButtonProps: ActionProps = {
|
|
128
|
+
text: '',
|
|
129
|
+
ariaLabel: '',
|
|
130
|
+
size: 'small-productive',
|
|
131
|
+
};
|
|
120
132
|
|
|
121
133
|
export const defaultProps: DefaultProps = {
|
|
122
134
|
variant: 'neutral',
|
|
@@ -127,4 +139,6 @@ export const defaultProps: DefaultProps = {
|
|
|
127
139
|
hideIcon: false,
|
|
128
140
|
isOpen: true,
|
|
129
141
|
hasStackedActions: false,
|
|
142
|
+
leadingAction: defaultActionButtonProps,
|
|
143
|
+
supportingAction: defaultActionButtonProps,
|
|
130
144
|
};
|
package/src/index.ts
CHANGED
|
@@ -16,6 +16,7 @@ import {
|
|
|
16
16
|
variants,
|
|
17
17
|
positions,
|
|
18
18
|
headingLevels,
|
|
19
|
+
actionSizes,
|
|
19
20
|
componentSelector,
|
|
20
21
|
componentClass,
|
|
21
22
|
ON_NOTIFICATION_CLOSE_EVENT,
|
|
@@ -23,6 +24,7 @@ import {
|
|
|
23
24
|
ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
|
|
24
25
|
ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
|
|
25
26
|
defaultProps,
|
|
27
|
+
defaultActionButtonProps,
|
|
26
28
|
} from './defs';
|
|
27
29
|
import styles from './notification.scss?inline';
|
|
28
30
|
|
|
@@ -230,19 +232,20 @@ export class PieNotification extends PieElement implements NotificationProps {
|
|
|
230
232
|
* @private
|
|
231
233
|
*/
|
|
232
234
|
private renderActionButton (action: ActionProps, actionType: 'leading' | 'supporting') : TemplateResult | typeof nothing {
|
|
233
|
-
const { text, ariaLabel } = action;
|
|
235
|
+
const { text, ariaLabel, size = defaultActionButtonProps.size } = action;
|
|
234
236
|
|
|
235
237
|
if (!text) {
|
|
236
238
|
return nothing;
|
|
237
239
|
}
|
|
238
240
|
|
|
239
241
|
const buttonVariant = actionType === 'leading' ? 'primary' : 'ghost';
|
|
242
|
+
const buttonSize = size && actionSizes.includes(size) ? size : defaultActionButtonProps.size;
|
|
240
243
|
|
|
241
244
|
return html`
|
|
242
245
|
<pie-button
|
|
243
246
|
variant="${buttonVariant}"
|
|
244
|
-
size="
|
|
245
|
-
aria-label="${ariaLabel
|
|
247
|
+
size="${ifDefined(buttonSize)}"
|
|
248
|
+
aria-label="${ifDefined(ariaLabel)}"
|
|
246
249
|
@click="${() => this.handleActionClick(actionType)}"
|
|
247
250
|
data-test-id="${componentSelector}-${actionType}-action"
|
|
248
251
|
?isFullWidth="${this.hasStackedActions}"
|