@justeattakeaway/pie-notification 0.19.0 → 0.20.1

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 +10 -10
  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 +5 -5
  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",
@@ -90,7 +90,7 @@
90
90
  "type": {
91
91
  "text": "ActionProps"
92
92
  },
93
- "default": "{\n text: '',\n ariaLabel: '',\n size: 'small-productive',\n}"
93
+ "default": "{\r\n text: '',\r\n ariaLabel: '',\r\n size: 'small-productive',\r\n}"
94
94
  },
95
95
  {
96
96
  "kind": "variable",
@@ -98,7 +98,7 @@
98
98
  "type": {
99
99
  "text": "DefaultProps"
100
100
  },
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}"
101
+ "default": "{\r\n variant: 'neutral',\r\n position: 'inline-content',\r\n isDismissible: false,\r\n isCompact: false,\r\n headingLevel: 'h2',\r\n hideIcon: false,\r\n isOpen: true,\r\n hasStackedActions: false,\r\n leadingAction: defaultActionButtonProps,\r\n supportingAction: defaultActionButtonProps,\r\n}"
102
102
  }
103
103
  ],
104
104
  "exports": [
@@ -302,7 +302,7 @@
302
302
  "kind": "method",
303
303
  "name": "renderFooter",
304
304
  "privacy": "private",
305
- "description": "Template for the footer area\nCalled within the main render function."
305
+ "description": "Template for the footer area\r\nCalled within the main render function."
306
306
  },
307
307
  {
308
308
  "kind": "method",
@@ -313,7 +313,7 @@
313
313
  "text": "TemplateResult"
314
314
  }
315
315
  },
316
- "description": "Template for the header area\nCalled within the main render function."
316
+ "description": "Template for the header area\r\nCalled within the main render function."
317
317
  },
318
318
  {
319
319
  "kind": "method",
@@ -330,7 +330,7 @@
330
330
  "text": "TemplateResult | typeof nothing"
331
331
  }
332
332
  },
333
- "description": "Template for the heading icon area.\nIt can return an icon provided externally via named slot or it can return a default icon according to the chosen variant if defined.\nCalled within the main render function."
333
+ "description": "Template for the heading icon area.\r\nIt can return an icon provided externally via named slot or it can return a default icon according to the chosen variant if defined.\r\nCalled within the main render function."
334
334
  },
335
335
  {
336
336
  "kind": "method",
@@ -341,13 +341,13 @@
341
341
  "text": "TemplateResult"
342
342
  }
343
343
  },
344
- "description": "Template for the close button element. Called within the\nmain render function."
344
+ "description": "Template for the close button element. Called within the\r\nmain render function."
345
345
  },
346
346
  {
347
347
  "kind": "method",
348
348
  "name": "handleCloseButton",
349
349
  "privacy": "private",
350
- "description": "It handles the action when user clicks in the close button.\nAlso triggers an event when is executed."
350
+ "description": "It handles the action when user clicks in the close button.\r\nAlso triggers an event when is executed."
351
351
  },
352
352
  {
353
353
  "kind": "method",
@@ -361,7 +361,7 @@
361
361
  }
362
362
  }
363
363
  ],
364
- "description": "It handles the action button action.\nAlso triggers an event according to its `actionType`."
364
+ "description": "It handles the action button action.\r\nAlso triggers an event according to its `actionType`."
365
365
  },
366
366
  {
367
367
  "kind": "method",
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.1";
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.1",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -45,15 +45,15 @@
45
45
  "devDependencies": {
46
46
  "@custom-elements-manifest/analyzer": "0.9.0",
47
47
  "@justeattakeaway/pie-components-config": "0.21.0",
48
- "@justeattakeaway/pie-css": "0.23.2",
48
+ "@justeattakeaway/pie-css": "0.24.0",
49
49
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
50
50
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
51
51
  "cem-plugin-module-file-extensions": "0.0.5"
52
52
  },
53
53
  "dependencies": {
54
- "@justeattakeaway/pie-icon-button": "2.2.4",
55
- "@justeattakeaway/pie-icons-webc": "1.16.1",
56
- "@justeattakeaway/pie-webc-core": "3.0.2"
54
+ "@justeattakeaway/pie-icon-button": "2.3.1",
55
+ "@justeattakeaway/pie-icons-webc": "1.16.2",
56
+ "@justeattakeaway/pie-webc-core": "4.0.0"
57
57
  },
58
58
  "volta": {
59
59
  "extends": "../../../package.json"
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;