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