@justeattakeaway/pie-notification 0.10.2 → 0.11.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.
Files changed (5) hide show
  1. package/dist/index.js +130 -117
  2. package/dist/react.js +14 -13
  3. package/package.json +1 -1
  4. package/src/index.ts +26 -11
  5. package/src/notification.scss +11 -11
package/dist/index.js CHANGED
@@ -1,8 +1,9 @@
1
- import { unsafeCSS as O, LitElement as x, nothing as s } from "lit";
2
- import { html as d, unsafeStatic as N } from "lit/static-html.js";
3
- import { validPropertyValues as b, defineCustomElement as I, dispatchCustomEvent as m } from "@justeattakeaway/pie-webc-core";
4
- import { property as c, queryAssignedElements as k } from "lit/decorators.js";
5
- import { ifDefined as y } from "lit/directives/if-defined.js";
1
+ import { unsafeCSS as I, LitElement as k, nothing as s } from "lit";
2
+ import { classMap as m } from "lit/directives/class-map.js";
3
+ import { html as f, unsafeStatic as _ } from "lit/static-html.js";
4
+ import { validPropertyValues as b, defineCustomElement as w, dispatchCustomEvent as $ } from "@justeattakeaway/pie-webc-core";
5
+ import { property as r, queryAssignedElements as A } from "lit/decorators.js";
6
+ import { ifDefined as O } from "lit/directives/if-defined.js";
6
7
  import "@justeattakeaway/pie-button";
7
8
  import "@justeattakeaway/pie-icon-button";
8
9
  import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
@@ -10,7 +11,7 @@ import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
10
11
  import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
11
12
  import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
12
13
  import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
13
- const _ = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], w = ["h2", "h3", "h4", "h5", "h6"], A = ["inline-content", "full-width"], t = "pie-notification", h = "c-notification", E = `${t}-close`, z = `${t}-open`, S = `${t}-leading-action-click`, T = `${t}-supporting-action-click`, l = {
14
+ const E = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], z = ["h2", "h3", "h4", "h5", "h6"], S = ["inline-content", "full-width"], t = "pie-notification", l = "c-notification", T = `${t}-close`, B = `${t}-open`, L = `${t}-leading-action-click`, D = `${t}-supporting-action-click`, d = {
14
15
  variant: "neutral",
15
16
  position: "inline-content",
16
17
  isDismissible: !1,
@@ -19,23 +20,23 @@ const _ = ["neutral", "neutral-alternative", "info", "success", "warning", "erro
19
20
  hideIcon: !1,
20
21
  isOpen: !0,
21
22
  hasStackedActions: !1
22
- }, B = `*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-close-icon-offset: var(--dt-spacing-b);--notification-icon-fill: var(--dt-color-content-default);--notification-icon-offset: 2px;--icon-size-override: 24px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height)}.c-notification[isCompact]{--notification-direction: row}.c-notification[position=full-width]{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification[variant=neutral-alternative]{--notification-background-color: var(--dt-color-container-default)}.c-notification[variant=info]{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification[variant=success]{--notification-background-color: var(--dt-color-support-positive-02);--notification-icon-fill: var(--dt-color-content-positive)}.c-notification[variant=warning]{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification[variant=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: 768px){.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[isDismissible]{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[isCompact]{align-self:flex-end}@media (max-width: 768px){.c-notification-footer[isStacked]{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: 768px){.icon,::slotted([slot=icon]){margin-block-start:0}}
23
+ }, V = `*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-close-icon-offset: var(--dt-spacing-b);--notification-icon-fill: var(--dt-color-content-default);--notification-icon-offset: 2px;--icon-size-override: 24px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height)}.c-notification.c-notification--compact{--notification-direction: row}.c-notification.c-notification--full-width{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification.c-notification--neutral-alternative{--notification-background-color: var(--dt-color-container-default)}.c-notification.c-notification--info{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification.c-notification--success{--notification-background-color: var(--dt-color-support-positive-02);--notification-icon-fill: var(--dt-color-content-positive)}.c-notification.c-notification--warning{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification.c-notification--error{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-support-error)}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}@media (min-width: 768px){.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: 768px){.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: 768px){.icon,::slotted([slot=icon]){margin-block-start:0}}
23
24
  `;
24
- var D = Object.defineProperty, L = Object.getOwnPropertyDescriptor, a = (g, i, o, e) => {
25
- for (var r = e > 1 ? void 0 : e ? L(i, o) : i, f = g.length - 1, p; f >= 0; f--)
26
- (p = g[f]) && (r = (e ? p(i, o, r) : p(r)) || r);
27
- return e && r && D(i, o, r), r;
25
+ var P = Object.defineProperty, F = Object.getOwnPropertyDescriptor, c = (g, i, n, o) => {
26
+ for (var a = o > 1 ? void 0 : o ? F(i, n) : i, p = g.length - 1, h; p >= 0; p--)
27
+ (h = g[p]) && (a = (o ? h(i, n, a) : h(a)) || a);
28
+ return o && a && P(i, n, a), a;
28
29
  };
29
- class n extends x {
30
+ class e extends k {
30
31
  constructor() {
31
- 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;
32
+ super(...arguments), this.isOpen = d.isOpen, this.variant = d.variant, this.position = d.position, this.isDismissible = d.isDismissible, this.isCompact = d.isCompact, this.headingLevel = d.headingLevel, this.hideIcon = d.hideIcon, this.hasStackedActions = d.hasStackedActions;
32
33
  }
33
34
  /**
34
35
  * Lifecycle method executed when component is updated.
35
36
  * It dispatches an event if notification is opened.
36
37
  */
37
38
  updated(i) {
38
- i.has("isOpen") && this.isOpen && m(this, z, { targetNotification: this });
39
+ i.has("isOpen") && this.isOpen && $(this, B, { targetNotification: this });
39
40
  }
40
41
  /**
41
42
  * Template for the footer area
@@ -44,14 +45,21 @@ class n extends x {
44
45
  * @private
45
46
  */
46
47
  renderFooter() {
47
- const { leadingAction: i, supportingAction: o } = this;
48
- return d`
49
- <footer
50
- class="${h}-footer"
51
- data-test-id="${t}-footer"
52
- ?isCompact="${this.isCompact}"
53
- ?isStacked="${this.hasStackedActions && !this.isCompact}">
54
- ${o ? this.renderActionButton(o, "supporting") : s}
48
+ const {
49
+ leadingAction: i,
50
+ supportingAction: n,
51
+ isCompact: o,
52
+ hasStackedActions: a
53
+ } = this, p = {
54
+ [`${l}-footer`]: !0,
55
+ [`${l}-footer--compact`]: o,
56
+ [`${l}-footer--stacked`]: a && !o
57
+ };
58
+ return f`
59
+ <footer
60
+ class="${m(p)}"
61
+ data-test-id="${t}-footer">
62
+ ${n ? this.renderActionButton(n, "supporting") : s}
55
63
  ${i ? this.renderActionButton(i, "leading") : s}
56
64
  </footer>
57
65
  `;
@@ -63,13 +71,13 @@ class n extends x {
63
71
  * @private
64
72
  */
65
73
  renderNotificationHeading() {
66
- const { heading: i, headingLevel: o } = this, e = N(o);
67
- return d`<${e}
74
+ const { heading: i, headingLevel: n } = this, o = _(n);
75
+ return f`<${o}
68
76
  id="${t}-heading"
69
- class="${h}-heading"
77
+ class="${l}-heading"
70
78
  data-test-id="${t}-heading">
71
79
  ${i}
72
- </${e}>`;
80
+ </${o}>`;
73
81
  }
74
82
  /**
75
83
  * Util method that returns an icon from a variant that has default icon.
@@ -79,13 +87,13 @@ class n extends x {
79
87
  getDefaultVariantIcon() {
80
88
  switch (this.variant) {
81
89
  case "info":
82
- return d`<icon-info-circle class="icon" size="m" data-test-id="${t}-heading-icon-info"></icon-info-circle>`;
90
+ return f`<icon-info-circle class="icon" size="m" data-test-id="${t}-heading-icon-info"></icon-info-circle>`;
83
91
  case "success":
84
- return d`<icon-check-circle class="icon" size="m" data-test-id="${t}-heading-icon-success"></icon-check-circle>`;
92
+ return f`<icon-check-circle class="icon" size="m" data-test-id="${t}-heading-icon-success"></icon-check-circle>`;
85
93
  case "warning":
86
- return d`<icon-alert-triangle class="icon" size="m" data-test-id="${t}-heading-icon-warning"></icon-alert-triangle>`;
94
+ return f`<icon-alert-triangle class="icon" size="m" data-test-id="${t}-heading-icon-warning"></icon-alert-triangle>`;
87
95
  case "error":
88
- return d`<icon-alert-circle class="icon" size="m" data-test-id="${t}-heading-icon-error"></icon-alert-circle>`;
96
+ return f`<icon-alert-circle class="icon" size="m" data-test-id="${t}-heading-icon-error"></icon-alert-circle>`;
89
97
  default:
90
98
  return s;
91
99
  }
@@ -98,7 +106,7 @@ class n extends x {
98
106
  * @private
99
107
  */
100
108
  renderIcon() {
101
- return d`<slot name="icon">${this.getDefaultVariantIcon()}</slot>`;
109
+ return f`<slot name="icon">${this.getDefaultVariantIcon()}</slot>`;
102
110
  }
103
111
  /**
104
112
  * Template for the close button element. Called within the
@@ -108,14 +116,14 @@ class n extends x {
108
116
  */
109
117
  renderCloseButton() {
110
118
  var i;
111
- return d`
119
+ return f`
112
120
  <pie-icon-button
113
121
  variant="ghost-secondary"
114
122
  size="small"
115
- class="${h}-icon-close"
123
+ class="${l}-icon-close"
116
124
  data-test-id="${t}-icon-close"
117
125
  @click="${this.handleCloseButton}"
118
- aria-label="${y((i = this.aria) == null ? void 0 : i.close)}">
126
+ aria-label="${O((i = this.aria) == null ? void 0 : i.close)}">
119
127
  <icon-close></icon-close>
120
128
  </pie-icon-button>`;
121
129
  }
@@ -126,7 +134,7 @@ class n extends x {
126
134
  * @private
127
135
  */
128
136
  handleCloseButton() {
129
- this.isOpen = !1, m(this, E, { targetNotification: this });
137
+ this.isOpen = !1, $(this, T, { targetNotification: this });
130
138
  }
131
139
  /**
132
140
  * It handles the action button action.
@@ -137,7 +145,7 @@ class n extends x {
137
145
  * @private
138
146
  */
139
147
  handleActionClick(i) {
140
- m(this, i === "leading" ? S : T, { targetNotification: this });
148
+ $(this, i === "leading" ? L : D, { targetNotification: this });
141
149
  }
142
150
  /**
143
151
  * Render the action button depending on action type and its action.
@@ -148,53 +156,58 @@ class n extends x {
148
156
  * @returns {TemplateResult | typeof nothing} - The rendered action button or nothing if the action text is not defined.
149
157
  * @private
150
158
  */
151
- renderActionButton(i, o) {
152
- const { text: e, ariaLabel: r } = i;
153
- return e ? d`
159
+ renderActionButton(i, n) {
160
+ const { text: o, ariaLabel: a } = i;
161
+ return o ? f`
154
162
  <pie-button
155
- variant="${o === "leading" ? "primary" : "ghost"}"
163
+ variant="${n === "leading" ? "primary" : "ghost"}"
156
164
  size="small-productive"
157
- aria-label="${r || s}"
158
- @click="${() => this.handleActionClick(o)}"
159
- data-test-id="${t}-${o}-action"
165
+ aria-label="${a || s}"
166
+ @click="${() => this.handleActionClick(n)}"
167
+ data-test-id="${t}-${n}-action"
160
168
  ?isFullWidth="${this.hasStackedActions}"
161
169
  type="button">
162
- ${e}
170
+ ${o}
163
171
  </pie-button>
164
172
  ` : s;
165
173
  }
166
174
  render() {
167
175
  const {
168
176
  variant: i,
169
- position: o,
170
- heading: e,
171
- isDismissible: r,
172
- isCompact: f,
173
- hideIcon: p,
177
+ position: n,
178
+ heading: o,
179
+ isDismissible: a,
180
+ isCompact: p,
181
+ hideIcon: h,
174
182
  leadingAction: u,
175
- isOpen: C,
183
+ isOpen: x,
176
184
  aria: v
177
185
  } = this;
178
- if (!C)
186
+ if (!x)
179
187
  return s;
180
- const $ = r && !f;
181
- return d`
188
+ const y = a && !p, C = {
189
+ [l]: !0,
190
+ [`${l}--${i}`]: !0,
191
+ [`${l}--${n}`]: !0,
192
+ [`${l}--compact`]: p
193
+ }, N = {
194
+ [`${l}-content-section`]: !0,
195
+ [`${l}-content-section--dismissible`]: y
196
+ };
197
+ return f`
182
198
  <div
183
199
  data-test-id="${t}"
184
- class="${h}"
185
- variant="${i}"
186
- position="${o}"
187
- ?isCompact="${f}"
200
+ class="${m(C)}"
188
201
  role="region"
189
202
  aria-live="${i === "error" ? "assertive" : "polite"}"
190
- aria-labelledby="${e ? `${t}-heading` : s}"
191
- aria-label="${!e && y(v == null ? void 0 : v.label)}">
192
- ${$ ? this.renderCloseButton() : s}
203
+ aria-labelledby="${o ? `${t}-heading` : s}"
204
+ aria-label="${!o && O(v == null ? void 0 : v.label)}">
205
+ ${y ? this.renderCloseButton() : s}
193
206
 
194
- <section class="${h}-content-section" ?isDismissible="${$}">
195
- ${p ? s : this.renderIcon()}
207
+ <section class="${m(N)}">
208
+ ${h ? s : this.renderIcon()}
196
209
  <article>
197
- ${e ? this.renderNotificationHeading() : s}
210
+ ${o ? this.renderNotificationHeading() : s}
198
211
  <slot></slot>
199
212
  </article>
200
213
  </section>
@@ -203,60 +216,60 @@ class n extends x {
203
216
  </div>`;
204
217
  }
205
218
  }
206
- n.styles = O(B);
207
- a([
208
- c({ type: Boolean })
209
- ], n.prototype, "isOpen", 2);
210
- a([
211
- c(),
212
- b(t, _, l.variant)
213
- ], n.prototype, "variant", 2);
214
- a([
215
- c(),
216
- b(t, A, l.position)
217
- ], n.prototype, "position", 2);
218
- a([
219
- c({ type: Boolean })
220
- ], n.prototype, "isDismissible", 2);
221
- a([
222
- c({ type: Boolean })
223
- ], n.prototype, "isCompact", 2);
224
- a([
225
- c({ type: String })
226
- ], n.prototype, "heading", 2);
227
- a([
228
- c(),
229
- b(t, w, l.headingLevel)
230
- ], n.prototype, "headingLevel", 2);
231
- a([
232
- c({ type: Boolean })
233
- ], n.prototype, "hideIcon", 2);
234
- a([
235
- c({ type: Object })
236
- ], n.prototype, "leadingAction", 2);
237
- a([
238
- c({ type: Object })
239
- ], n.prototype, "supportingAction", 2);
240
- a([
241
- c({ type: Boolean })
242
- ], n.prototype, "hasStackedActions", 2);
243
- a([
244
- c({ type: Object })
245
- ], n.prototype, "aria", 2);
246
- a([
247
- k({ slot: "icon" })
248
- ], n.prototype, "_iconSlot", 2);
249
- I(t, n);
219
+ e.styles = I(V);
220
+ c([
221
+ r({ type: Boolean })
222
+ ], e.prototype, "isOpen", 2);
223
+ c([
224
+ r(),
225
+ b(t, E, d.variant)
226
+ ], e.prototype, "variant", 2);
227
+ c([
228
+ r(),
229
+ b(t, S, d.position)
230
+ ], e.prototype, "position", 2);
231
+ c([
232
+ r({ type: Boolean })
233
+ ], e.prototype, "isDismissible", 2);
234
+ c([
235
+ r({ type: Boolean })
236
+ ], e.prototype, "isCompact", 2);
237
+ c([
238
+ r({ type: String })
239
+ ], e.prototype, "heading", 2);
240
+ c([
241
+ r(),
242
+ b(t, z, d.headingLevel)
243
+ ], e.prototype, "headingLevel", 2);
244
+ c([
245
+ r({ type: Boolean })
246
+ ], e.prototype, "hideIcon", 2);
247
+ c([
248
+ r({ type: Object })
249
+ ], e.prototype, "leadingAction", 2);
250
+ c([
251
+ r({ type: Object })
252
+ ], e.prototype, "supportingAction", 2);
253
+ c([
254
+ r({ type: Boolean })
255
+ ], e.prototype, "hasStackedActions", 2);
256
+ c([
257
+ r({ type: Object })
258
+ ], e.prototype, "aria", 2);
259
+ c([
260
+ A({ slot: "icon" })
261
+ ], e.prototype, "_iconSlot", 2);
262
+ w(t, e);
250
263
  export {
251
- E as ON_NOTIFICATION_CLOSE_EVENT,
252
- S as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
253
- z as ON_NOTIFICATION_OPEN_EVENT,
254
- T as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
255
- n as PieNotification,
256
- h as componentClass,
264
+ T as ON_NOTIFICATION_CLOSE_EVENT,
265
+ L as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
266
+ B as ON_NOTIFICATION_OPEN_EVENT,
267
+ D as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
268
+ e as PieNotification,
269
+ l as componentClass,
257
270
  t as componentSelector,
258
- l as defaultProps,
259
- w as headingLevels,
260
- A as positions,
261
- _ as variants
271
+ d as defaultProps,
272
+ z as headingLevels,
273
+ S as positions,
274
+ E as variants
262
275
  };
package/dist/react.js CHANGED
@@ -1,8 +1,9 @@
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 A, ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT as g, ON_NOTIFICATION_OPEN_EVENT as L, ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT as d, componentClass as k, componentSelector as F, defaultProps as S, headingLevels as V, positions as u, variants as v } from "./index.js";
4
+ import { ON_NOTIFICATION_CLOSE_EVENT as g, ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT as L, ON_NOTIFICATION_OPEN_EVENT as d, ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT as k, componentClass as F, componentSelector as S, defaultProps as V, headingLevels as u, positions as v, variants as R } from "./index.js";
5
5
  import "lit";
6
+ import "lit/directives/class-map.js";
6
7
  import "lit/static-html.js";
7
8
  import "@justeattakeaway/pie-webc-core";
8
9
  import "lit/decorators.js";
@@ -29,17 +30,17 @@ const n = o({
29
30
  onPieNotificationOpen: "pie-notification-open"
30
31
  // When the notification is opened.
31
32
  }
32
- }), l = n;
33
+ }), P = n;
33
34
  export {
34
- A as ON_NOTIFICATION_CLOSE_EVENT,
35
- g as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
36
- L as ON_NOTIFICATION_OPEN_EVENT,
37
- d as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
38
- l as PieNotification,
39
- k as componentClass,
40
- F as componentSelector,
41
- S as defaultProps,
42
- V as headingLevels,
43
- u as positions,
44
- v as variants
35
+ g as ON_NOTIFICATION_CLOSE_EVENT,
36
+ L as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
37
+ d as ON_NOTIFICATION_OPEN_EVENT,
38
+ k as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
39
+ P as PieNotification,
40
+ F as componentClass,
41
+ S as componentSelector,
42
+ V as defaultProps,
43
+ u as headingLevels,
44
+ v as positions,
45
+ R as variants
45
46
  };
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.10.2",
4
+ "version": "0.11.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
package/src/index.ts CHANGED
@@ -5,6 +5,7 @@ import {
5
5
  type TemplateResult,
6
6
  type PropertyValues,
7
7
  } from 'lit';
8
+ import { classMap } from 'lit/directives/class-map.js';
8
9
  import { html, unsafeStatic } from 'lit/static-html.js';
9
10
  import { defineCustomElement, validPropertyValues, dispatchCustomEvent } from '@justeattakeaway/pie-webc-core';
10
11
  import { property, queryAssignedElements } from 'lit/decorators.js';
@@ -107,13 +108,18 @@ export class PieNotification extends LitElement implements NotificationProps {
107
108
  * @private
108
109
  */
109
110
  private renderFooter () {
110
- const { leadingAction, supportingAction } = this;
111
+ const {
112
+ leadingAction, supportingAction, isCompact, hasStackedActions,
113
+ } = this;
114
+ const classes = {
115
+ [`${componentClass}-footer`]: true,
116
+ [`${componentClass}-footer--compact`]: isCompact,
117
+ [`${componentClass}-footer--stacked`]: hasStackedActions && !isCompact,
118
+ };
111
119
  return html`
112
- <footer
113
- class="${componentClass}-footer"
114
- data-test-id="${componentSelector}-footer"
115
- ?isCompact="${this.isCompact}"
116
- ?isStacked="${this.hasStackedActions && !this.isCompact}">
120
+ <footer
121
+ class="${classMap(classes)}"
122
+ data-test-id="${componentSelector}-footer">
117
123
  ${supportingAction ? this.renderActionButton(supportingAction, 'supporting') : nothing}
118
124
  ${leadingAction ? this.renderActionButton(leadingAction, 'leading') : nothing}
119
125
  </footer>
@@ -264,20 +270,29 @@ export class PieNotification extends LitElement implements NotificationProps {
264
270
 
265
271
  const showCloseButton = isDismissible && !isCompact;
266
272
 
273
+ const classes = {
274
+ [componentClass]: true,
275
+ [`${componentClass}--${variant}`]: true,
276
+ [`${componentClass}--${position}`]: true,
277
+ [`${componentClass}--compact`]: isCompact,
278
+ };
279
+
280
+ const contentSectionClasses = {
281
+ [`${componentClass}-content-section`]: true,
282
+ [`${componentClass}-content-section--dismissible`]: showCloseButton,
283
+ };
284
+
267
285
  return html`
268
286
  <div
269
287
  data-test-id="${componentSelector}"
270
- class="${componentClass}"
271
- variant="${variant}"
272
- position="${position}"
273
- ?isCompact="${isCompact}"
288
+ class="${classMap(classes)}"
274
289
  role="region"
275
290
  aria-live="${variant === 'error' ? 'assertive' : 'polite'}"
276
291
  aria-labelledby="${heading ? `${componentSelector}-heading` : nothing}"
277
292
  aria-label="${!heading && ifDefined(aria?.label)}">
278
293
  ${showCloseButton ? this.renderCloseButton() : nothing}
279
294
 
280
- <section class="${componentClass}-content-section" ?isDismissible="${showCloseButton}">
295
+ <section class="${classMap(contentSectionClasses)}">
281
296
  ${!hideIcon ? this.renderIcon() : nothing}
282
297
  <article>
283
298
  ${heading ? this.renderNotificationHeading() : nothing}
package/src/notification.scss CHANGED
@@ -25,33 +25,33 @@ $breakpoint-wide: 768px;
25
25
  font-size: var(--notification-font-size);
26
26
  line-height: var(--notification-line-height);
27
27
 
28
- &[isCompact] {
28
+ &.c-notification--compact {
29
29
  --notification-direction: row;
30
30
  }
31
31
 
32
- &[position='full-width'] {
32
+ &.c-notification--full-width {
33
33
  --notification-border-radius: var(--dt-radius-rounded-none);
34
34
  }
35
35
 
36
- &[variant='neutral-alternative'] {
36
+ &.c-notification--neutral-alternative {
37
37
  --notification-background-color: var(--dt-color-container-default);
38
38
  }
39
39
 
40
- &[variant='info'] {
40
+ &.c-notification--info {
41
41
  --notification-background-color: var(--dt-color-support-info-02);
42
42
  --notification-icon-fill: var(--dt-color-blue);
43
43
  }
44
44
 
45
- &[variant='success'] {
45
+ &.c-notification--success {
46
46
  --notification-background-color: var(--dt-color-support-positive-02);
47
47
  --notification-icon-fill: var(--dt-color-content-positive);
48
48
  }
49
49
 
50
- &[variant='warning'] {
50
+ &.c-notification--warning {
51
51
  --notification-background-color: var(--dt-color-support-warning-02);
52
52
  }
53
53
 
54
- &[variant='error'] {
54
+ &.c-notification--error {
55
55
  --notification-background-color: var(--dt-color-support-error-02);
56
56
  --notification-icon-fill: var(--dt-color-support-error);
57
57
  }
@@ -74,7 +74,7 @@ $breakpoint-wide: 768px;
74
74
  flex-direction: row;
75
75
  gap: var(--dt-spacing-c);
76
76
 
77
- &[isDismissible] {
77
+ &.c-notification-content-section--dismissible {
78
78
  max-width: calc(100% - var(--notification-close-icon-offset) - 40px); // 40px is the size of the medium icon button
79
79
  }
80
80
  }
@@ -91,12 +91,12 @@ $breakpoint-wide: 768px;
91
91
  justify-content: flex-end;
92
92
  gap: var(--dt-spacing-d);
93
93
 
94
- &[isCompact] {
94
+ &.c-notification-footer--compact {
95
95
  align-self: flex-end;
96
96
  }
97
97
 
98
98
  @media (max-width: $breakpoint-wide) {
99
- &[isStacked] {
99
+ &.c-notification-footer--stacked {
100
100
  flex-direction: column-reverse;
101
101
  }
102
102
  }
@@ -112,4 +112,4 @@ $breakpoint-wide: 768px;
112
112
  @media (max-width: $breakpoint-wide) {
113
113
  margin-block-start: 0;
114
114
  }
115
- }
115
+ }