@justeattakeaway/pie-notification 0.19.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +1 -1
  2. package/custom-elements.json +2 -2
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.js +47 -47
  5. package/dist/react.d.ts +2 -2
  6. package/package.json +2 -2
  7. package/src/defs.ts +1 -1
  8. package/src/notification.scss +7 -0
package/README.md CHANGED
@@ -32,7 +32,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
32
32
  ### Properties
33
33
  | Prop | Options | Description | Default |
34
34
  | --- | --- | --- | --- |
35
- | `variant` | `"neutral"`, `"neutral-alternative"`, `"info"`, `"success"`, `"warning"`, `"error"` | Sets the variant of the notification. | `"neutral"` |
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
37
  | `heading` | — | The heading text of the notification. | `undefined` |
38
38
  | `headingLevel` | `h2`, `h3`, `h4`, `h5`, `h6` | The HTML tag to use for the notification's heading. | `h2` |
package/custom-elements.json CHANGED
@@ -16,9 +16,9 @@
16
16
  "kind": "variable",
17
17
  "name": "variants",
18
18
  "type": {
19
- "text": "['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error']"
19
+ "text": "['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error', 'translucent']"
20
20
  },
21
- "default": "['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error']"
21
+ "default": "['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error', 'translucent']"
22
22
  },
23
23
  {
24
24
  "kind": "variable",
package/dist/index.d.ts CHANGED
@@ -132,7 +132,7 @@ export declare const ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT = "pie-notifi
132
132
  */
133
133
  export declare class PieNotification extends PieElement implements NotificationProps {
134
134
  isOpen: boolean;
135
- variant: "neutral" | "neutral-alternative" | "info" | "success" | "warning" | "error";
135
+ variant: "neutral" | "neutral-alternative" | "info" | "success" | "warning" | "error" | "translucent";
136
136
  position: "inline-content" | "full-width";
137
137
  isDismissible: boolean;
138
138
  isCompact: boolean;
@@ -216,6 +216,6 @@ export declare class PieNotification extends PieElement implements NotificationP
216
216
 
217
217
  export declare const positions: readonly ["inline-content", "full-width"];
218
218
 
219
- export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error"];
219
+ export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"];
220
220
 
221
221
  export { }
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
- import { LitElement as I, unsafeCSS as z, nothing as f } from "lit";
1
+ import { LitElement as I, unsafeCSS as w, nothing as f } from "lit";
2
2
  import { classMap as $ } from "lit/directives/class-map.js";
3
- import { html as p, unsafeStatic as w } from "lit/static-html.js";
4
- import { validPropertyValues as k, safeCustomElement as _, dispatchCustomEvent as y } from "@justeattakeaway/pie-webc-core";
3
+ import { html as p, unsafeStatic as z } from "lit/static-html.js";
4
+ import { validPropertyValues as O, safeCustomElement as _, dispatchCustomEvent as y } from "@justeattakeaway/pie-webc-core";
5
5
  import { property as r, queryAssignedElements as S } from "lit/decorators.js";
6
6
  import { ifDefined as g } from "lit/directives/if-defined.js";
7
7
  import "@justeattakeaway/pie-button";
@@ -11,14 +11,14 @@ import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
11
11
  import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
12
12
  import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
13
13
  import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
14
- const m = class m extends I {
14
+ const b = class b extends I {
15
15
  willUpdate() {
16
- this.getAttribute("v") || this.setAttribute("v", m.v);
16
+ this.getAttribute("v") || this.setAttribute("v", b.v);
17
17
  }
18
18
  };
19
- m.v = "0.19.0";
20
- let O = 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", s = "c-notification", D = `${t}-close`, V = `${t}-open`, P = `${t}-leading-action-click`, F = `${t}-supporting-action-click`, v = {
19
+ b.v = "0.20.0";
20
+ let k = b;
21
+ const E = ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"], T = ["h2", "h3", "h4", "h5", "h6"], B = ["inline-content", "full-width"], L = ["small-productive", "xsmall"], t = "pie-notification", s = "c-notification", D = `${t}-close`, V = `${t}-open`, P = `${t}-leading-action-click`, F = `${t}-supporting-action-click`, v = {
22
22
  text: "",
23
23
  ariaLabel: "",
24
24
  size: "small-productive"
@@ -33,13 +33,13 @@ const E = ["neutral", "neutral-alternative", "info", "success", "warning", "erro
33
33
  hasStackedActions: !1,
34
34
  leadingAction: v,
35
35
  supportingAction: v
36
- }, j = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-close-icon-offset: var(--dt-spacing-b);--notification-icon-fill: var(--dt-color-content-inverse);--notification-icon-background-color: var(--dt-color-container-inverse);--icon-size-override: 24px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height);color:var(--dt-color-content-default)}.c-notification.c-notification--compact{--notification-direction: row}.c-notification.c-notification--full-width{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification.c-notification--neutral-alternative{--notification-background-color: var(--dt-color-container-default)}.c-notification.c-notification--info{--notification-background-color: var(--dt-color-support-info-tonal);--notification-icon-background-color: var(--dt-color-support-info)}.c-notification.c-notification--success{--notification-background-color: var(--dt-color-support-positive-tonal);--notification-icon-background-color: var(--dt-color-support-positive)}.c-notification.c-notification--warning{--notification-background-color: var(--dt-color-support-warning-tonal);--notification-icon-background-color: var(--dt-color-support-warning);--notification-icon-fill: var(--dt-color-content-dark)}.c-notification.c-notification--error{--notification-background-color: var(--dt-color-support-error-tonal);--notification-icon-background-color: var(--dt-color-support-error);--notification-icon-fill: var(--dt-color-content-light)}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}@media (min-width: 769px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row;align-items:center;gap:var(--dt-spacing-c)}.c-notification-content-section.c-notification-content-section--dismissible{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer.c-notification-footer--compact{align-self:center}@media (max-width: 767px){.c-notification-footer.c-notification-footer--stacked{flex-direction:column-reverse}}.icon,::slotted([slot=icon]){display:inline-flex;align-self:flex-start;background-color:var(--notification-icon-background-color);color:var(--notification-icon-fill);border-radius:var(--dt-radius-rounded-b);padding:var(--dt-spacing-a)}";
37
- var G = Object.defineProperty, H = Object.getOwnPropertyDescriptor, c = (i, o, n, d) => {
36
+ }, j = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-close-icon-offset: var(--dt-spacing-b);--notification-icon-fill: var(--dt-color-content-inverse);--notification-icon-background-color: var(--dt-color-container-inverse);--icon-size-override: 24px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height);color:var(--dt-color-content-default)}.c-notification.c-notification--compact{--notification-direction: row}.c-notification.c-notification--full-width{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification.c-notification--neutral-alternative{--notification-background-color: var(--dt-color-container-default)}.c-notification.c-notification--info{--notification-background-color: var(--dt-color-support-info-tonal);--notification-icon-background-color: var(--dt-color-support-info)}.c-notification.c-notification--success{--notification-background-color: var(--dt-color-support-positive-tonal);--notification-icon-background-color: var(--dt-color-support-positive)}.c-notification.c-notification--warning{--notification-background-color: var(--dt-color-support-warning-tonal);--notification-icon-background-color: var(--dt-color-support-warning);--notification-icon-fill: var(--dt-color-content-dark)}.c-notification.c-notification--error{--notification-background-color: var(--dt-color-support-error-tonal);--notification-icon-background-color: var(--dt-color-support-error);--notification-icon-fill: var(--dt-color-content-light)}.c-notification.c-notification--translucent{--notification-background-color: var(--dt-color-container-prominent);-webkit-backdrop-filter:blur(var(--dt-blur-prominent));backdrop-filter:blur(var(--dt-blur-prominent))}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}@media (min-width: 769px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row;align-items:center;gap:var(--dt-spacing-c)}.c-notification-content-section.c-notification-content-section--dismissible{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer.c-notification-footer--compact{align-self:center}@media (max-width: 767px){.c-notification-footer.c-notification-footer--stacked{flex-direction:column-reverse}}.icon,::slotted([slot=icon]){display:inline-flex;align-self:flex-start;background-color:var(--notification-icon-background-color);color:var(--notification-icon-fill);border-radius:var(--dt-radius-rounded-b);padding:var(--dt-spacing-a)}";
37
+ var G = Object.defineProperty, H = Object.getOwnPropertyDescriptor, a = (i, o, n, d) => {
38
38
  for (var e = d > 1 ? void 0 : d ? H(o, n) : o, u = i.length - 1, h; u >= 0; u--)
39
39
  (h = i[u]) && (e = (d ? h(o, n, e) : h(e)) || e);
40
40
  return d && e && G(o, n, e), e;
41
41
  };
42
- let a = class extends O {
42
+ let c = class extends k {
43
43
  constructor() {
44
44
  super(...arguments), this.isOpen = l.isOpen, this.variant = l.variant, this.position = l.position, this.isDismissible = l.isDismissible, this.isCompact = l.isCompact, this.headingLevel = l.headingLevel, this.hideIcon = l.hideIcon, this.hasStackedActions = l.hasStackedActions;
45
45
  }
@@ -83,7 +83,7 @@ let a = class extends O {
83
83
  * @private
84
84
  */
85
85
  renderNotificationHeading() {
86
- const { heading: i, headingLevel: o } = this, n = w(o);
86
+ const { heading: i, headingLevel: o } = this, n = z(o);
87
87
  return p`<${n}
88
88
  id="${t}-heading"
89
89
  class="${s}-heading"
@@ -196,7 +196,7 @@ let a = class extends O {
196
196
  hideIcon: u,
197
197
  leadingAction: h,
198
198
  isOpen: C,
199
- aria: b
199
+ aria: m
200
200
  } = this;
201
201
  if (!C)
202
202
  return f;
@@ -216,7 +216,7 @@ let a = class extends O {
216
216
  role="region"
217
217
  aria-live="${i === "error" ? "assertive" : "polite"}"
218
218
  aria-labelledby="${n ? `${t}-heading` : f}"
219
- aria-label="${!n && g(b == null ? void 0 : b.label)}">
219
+ aria-label="${!n && g(m == null ? void 0 : m.label)}">
220
220
  ${x ? this.renderCloseButton() : f}
221
221
 
222
222
  <section class="${$(A)}">
@@ -231,58 +231,58 @@ let a = class extends O {
231
231
  </div>`;
232
232
  }
233
233
  };
234
- a.styles = z(j);
235
- c([
234
+ c.styles = w(j);
235
+ a([
236
236
  r({ type: Boolean })
237
- ], a.prototype, "isOpen", 2);
238
- c([
237
+ ], c.prototype, "isOpen", 2);
238
+ a([
239
239
  r({ type: String }),
240
- k(t, E, l.variant)
241
- ], a.prototype, "variant", 2);
242
- c([
240
+ O(t, E, l.variant)
241
+ ], c.prototype, "variant", 2);
242
+ a([
243
243
  r({ type: String }),
244
- k(t, B, l.position)
245
- ], a.prototype, "position", 2);
246
- c([
244
+ O(t, B, l.position)
245
+ ], c.prototype, "position", 2);
246
+ a([
247
247
  r({ type: Boolean })
248
- ], a.prototype, "isDismissible", 2);
249
- c([
248
+ ], c.prototype, "isDismissible", 2);
249
+ a([
250
250
  r({ type: Boolean })
251
- ], a.prototype, "isCompact", 2);
252
- c([
251
+ ], c.prototype, "isCompact", 2);
252
+ a([
253
253
  r({ type: String })
254
- ], a.prototype, "heading", 2);
255
- c([
254
+ ], c.prototype, "heading", 2);
255
+ a([
256
256
  r({ type: String }),
257
- k(t, T, l.headingLevel)
258
- ], a.prototype, "headingLevel", 2);
259
- c([
257
+ O(t, T, l.headingLevel)
258
+ ], c.prototype, "headingLevel", 2);
259
+ a([
260
260
  r({ type: Boolean })
261
- ], a.prototype, "hideIcon", 2);
262
- c([
261
+ ], c.prototype, "hideIcon", 2);
262
+ a([
263
263
  r({ type: Object })
264
- ], a.prototype, "leadingAction", 2);
265
- c([
264
+ ], c.prototype, "leadingAction", 2);
265
+ a([
266
266
  r({ type: Object })
267
- ], a.prototype, "supportingAction", 2);
268
- c([
267
+ ], c.prototype, "supportingAction", 2);
268
+ a([
269
269
  r({ type: Boolean })
270
- ], a.prototype, "hasStackedActions", 2);
271
- c([
270
+ ], c.prototype, "hasStackedActions", 2);
271
+ a([
272
272
  r({ type: Object })
273
- ], a.prototype, "aria", 2);
274
- c([
273
+ ], c.prototype, "aria", 2);
274
+ a([
275
275
  S({ slot: "icon" })
276
- ], a.prototype, "_iconSlot", 2);
277
- a = c([
276
+ ], c.prototype, "_iconSlot", 2);
277
+ c = a([
278
278
  _("pie-notification")
279
- ], a);
279
+ ], c);
280
280
  export {
281
281
  D as ON_NOTIFICATION_CLOSE_EVENT,
282
282
  P as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
283
283
  V as ON_NOTIFICATION_OPEN_EVENT,
284
284
  F as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
285
- a as PieNotification,
285
+ c as PieNotification,
286
286
  L as actionSizes,
287
287
  s as componentClass,
288
288
  t as componentSelector,
package/dist/react.d.ts CHANGED
@@ -135,7 +135,7 @@ export declare const PieNotification: React_2.ForwardRefExoticComponent<React_2.
135
135
  */
136
136
  declare class PieNotification_2 extends PieElement implements NotificationProps {
137
137
  isOpen: boolean;
138
- variant: "neutral" | "neutral-alternative" | "info" | "success" | "warning" | "error";
138
+ variant: "neutral" | "neutral-alternative" | "info" | "success" | "warning" | "error" | "translucent";
139
139
  position: "inline-content" | "full-width";
140
140
  isDismissible: boolean;
141
141
  isCompact: boolean;
@@ -228,6 +228,6 @@ export declare const positions: readonly ["inline-content", "full-width"];
228
228
 
229
229
  declare type ReactBaseType = React_2.HTMLAttributes<HTMLDivElement>;
230
230
 
231
- export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error"];
231
+ export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"];
232
232
 
233
233
  export { }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-notification",
3
3
  "description": "PIE Design System Notification built using Web Components",
4
- "version": "0.19.0",
4
+ "version": "0.20.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -51,7 +51,7 @@
51
51
  "cem-plugin-module-file-extensions": "0.0.5"
52
52
  },
53
53
  "dependencies": {
54
- "@justeattakeaway/pie-icon-button": "2.2.4",
54
+ "@justeattakeaway/pie-icon-button": "2.3.0",
55
55
  "@justeattakeaway/pie-icons-webc": "1.16.1",
56
56
  "@justeattakeaway/pie-webc-core": "3.0.2"
57
57
  },
package/src/defs.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
 
3
- export const variants = ['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error'] as const;
3
+ export const variants = ['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error', 'translucent'] as const;
4
4
  export const headingLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;
5
5
  export const positions = ['inline-content', 'full-width'] as const;
6
6
  export const actionSizes = ['small-productive', 'xsmall'] as const;
package/src/notification.scss CHANGED
@@ -63,6 +63,13 @@
63
63
  --notification-icon-fill: var(--dt-color-content-light);
64
64
  }
65
65
 
66
+ &.c-notification--translucent {
67
+ --notification-background-color: var(--dt-color-container-prominent);
68
+
69
+ backdrop-filter: blur(var(--dt-blur-prominent));
70
+
71
+ }
72
+
66
73
 
67
74
  &-heading {
68
75
  margin: 0;