@justeattakeaway/pie-toast-provider 0.8.0 → 0.9.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 (4) hide show
  1. package/README.md +1 -0
  2. package/dist/index.js +7 -7
  3. package/package.json +8 -8
  4. package/src/toast-provider.scss +2 -1
package/README.md CHANGED
@@ -46,6 +46,7 @@ This component does not have any slots. All content is controlled through proper
46
46
  | Name | Description | Default |
47
47
  |--------------------------|---------------------------------------------|-----------------------------|
48
48
  | `--toast-provider-z-index` | Controls the stacking order of the toasts. | `--dt-z-index-toast` (6000) |
49
+ | `--toast-provider-position` | Controls the CSS positioning of the provider. Set to `absolute` to position relative to the nearest positioned ancestor instead of the viewport. | `fixed` |
49
50
  | `--toast-provider-offset` | Controls the gap between toasts and the boundary of the viewport. | `--dt-spacing-c (Desktop)` / `--dt-spacing-d (Mobile)` |
50
51
 
51
52
  ### Events
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement as _, unsafeCSS as T, nothing as y, html as v } from "lit";
1
+ import { LitElement as _, unsafeCSS as T, nothing as y, html as u } from "lit";
2
2
  import { property as h, state as g } from "lit/decorators.js";
3
3
  import { ifDefined as b } from "lit/directives/if-defined.js";
4
4
  import { classMap as f } from "lit/directives/class-map.js";
@@ -9,9 +9,9 @@ const l = class l extends _ {
9
9
  this.getAttribute("v") || this.setAttribute("v", l.v);
10
10
  }
11
11
  };
12
- l.v = "0.8.0";
12
+ l.v = "0.9.0";
13
13
  let d = l;
14
- const A = "*,*:after,*:before{box-sizing:inherit}:root{--pie-animation-slide-translate-start: -100%}.pie-animation--slide-in{animation:pie-animation-slide-in var(--dt-motion-timing-200) var(--dt-motion-easing-out)}.pie-animation--slide-out{animation:pie-animation-slide-out var(--dt-motion-timing-100) var(--dt-motion-easing-in)}@keyframes pie-animation-slide-in{0%{transform:translate(var(--pie-animation-slide-translate-start))}to{transform:translate(0)}}@keyframes pie-animation-slide-out{0%{transform:translate(0)}to{transform:translate(var(--pie-animation-slide-translate-start))}}:host{--toast-provider-z-index: var(--dt-z-index-toast);--toast-provider-offset: var(--dt-spacing-d)}@media (min-width: 769px){:host{--toast-provider-offset: var(--dt-spacing-e)}}.c-toast-provider{position:fixed;z-index:var(--toast-provider-z-index)}.c-toast-provider.c-toast-provider--default{inset-inline-start:var(--toast-provider-offset);inset-block-end:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--default:dir(rtl){--pie-animation-slide-translate-start: 100%}.c-toast-provider.c-toast-provider--bottom-left{--pie-animation-slide-translate-start: -100%;left:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-right{--pie-animation-slide-translate-start: 100%;right:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-center{--pie-animation-slide-translate-start: 0, 100%;left:50%;bottom:var(--toast-provider-offset);transform:translate(-50%)}", w = {
14
+ const A = "*,*:after,*:before{box-sizing:inherit}:root{--pie-animation-slide-translate-start: -100%}.pie-animation--slide-in{animation:pie-animation-slide-in var(--dt-motion-timing-200) var(--dt-motion-easing-out)}.pie-animation--slide-out{animation:pie-animation-slide-out var(--dt-motion-timing-100) var(--dt-motion-easing-in)}@keyframes pie-animation-slide-in{0%{transform:translate(var(--pie-animation-slide-translate-start))}to{transform:translate(0)}}@keyframes pie-animation-slide-out{0%{transform:translate(0)}to{transform:translate(var(--pie-animation-slide-translate-start))}}:host{--toast-provider-z-index: var(--dt-z-index-toast);--toast-provider-position: fixed;--toast-provider-offset: var(--dt-spacing-d)}@media (min-width: 769px){:host{--toast-provider-offset: var(--dt-spacing-e)}}.c-toast-provider{position:var(--toast-provider-position);z-index:var(--toast-provider-z-index)}.c-toast-provider.c-toast-provider--default{inset-inline-start:var(--toast-provider-offset);inset-block-end:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--default:dir(rtl){--pie-animation-slide-translate-start: 100%}.c-toast-provider.c-toast-provider--bottom-left{--pie-animation-slide-translate-start: -100%;left:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-right{--pie-animation-slide-translate-start: 100%;right:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-center{--pie-animation-slide-translate-start: 0, 100%;left:50%;bottom:var(--toast-provider-offset);transform:translate(-50%)}", w = {
15
15
  "error-actionable": 1,
16
16
  error: 2,
17
17
  "warning-actionable": 3,
@@ -108,9 +108,9 @@ let r = class extends d {
108
108
  createToast(o) {
109
109
  const t = { ...m, ...this.options, ...o };
110
110
  this._toasts = [...this._toasts, t].sort((i, e) => {
111
- var a, u;
111
+ var a, v;
112
112
  const s = this.getPriority(e.variant, !!((a = e.leadingAction) != null && a.text));
113
- return this.getPriority(i.variant, !!((u = i.leadingAction) != null && u.text)) - s;
113
+ return this.getPriority(i.variant, !!((v = i.leadingAction) != null && v.text)) - s;
114
114
  }), this._currentToast || this._showNextToast();
115
115
  }
116
116
  /**
@@ -131,11 +131,11 @@ let r = class extends d {
131
131
  "pie-animation--slide-in": !!t,
132
132
  "pie-animation--slide-out": t === null
133
133
  };
134
- return v`
134
+ return u`
135
135
  <div
136
136
  class=${f(i)}
137
137
  data-test-id="pie-toast-provider">
138
- ${t && v`
138
+ ${t && u`
139
139
  <pie-toast
140
140
  class=${f(e)}
141
141
  message="${t.message}"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-toast-provider",
3
3
  "description": "PIE Design System Toast Provider built using Web Components",
4
- "version": "0.8.0",
4
+ "version": "0.9.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -26,28 +26,28 @@
26
26
  },
27
27
  "scripts": {
28
28
  "build": "run -T vite build",
29
- "build:react-wrapper": "npx build-react-wrapper",
29
+ "build:react-wrapper": "run -T build-react-wrapper",
30
30
  "create:manifest": "run -T cem analyze --litelement",
31
31
  "lint:scripts": "run -T eslint .",
32
32
  "lint:scripts:fix": "yarn lint:scripts --fix",
33
33
  "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
34
34
  "lint:style:fix": "yarn lint:style --fix",
35
35
  "watch": "run -T vite build --watch",
36
- "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
36
+ "test:browsers": "run -T playwright test -c ./playwright-lit.config.ts",
37
37
  "test:browsers:ci": "yarn test:browsers",
38
- "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_TOAST_PROVIDER} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
38
+ "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_TOAST_PROVIDER} percy exec --allowed-hostname cloudfront.net -- run -T playwright test -c ./playwright-lit-visual.config.ts",
39
39
  "test:visual:ci": "yarn test:visual"
40
40
  },
41
41
  "author": "Just Eat Takeaway.com - Design System Team",
42
42
  "license": "Apache-2.0",
43
43
  "devDependencies": {
44
- "@justeattakeaway/pie-components-config": "0.21.2",
44
+ "@justeattakeaway/pie-components-config": "0.21.3",
45
45
  "@justeattakeaway/pie-css": "1.1.1",
46
- "@justeattakeaway/pie-monorepo-utils": "0.9.1"
46
+ "@justeattakeaway/pie-monorepo-utils": "0.9.2"
47
47
  },
48
48
  "dependencies": {
49
- "@justeattakeaway/pie-toast": "0.12.44",
50
- "@justeattakeaway/pie-webc-core": "14.0.1"
49
+ "@justeattakeaway/pie-toast": "0.13.0",
50
+ "@justeattakeaway/pie-webc-core": "14.0.2"
51
51
  },
52
52
  "customElements": "custom-elements.json",
53
53
  "sideEffects": [
package/src/toast-provider.scss CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  :host {
6
6
  --toast-provider-z-index: var(--dt-z-index-toast);
7
+ --toast-provider-position: fixed;
7
8
  --toast-provider-offset: var(--dt-spacing-d);
8
9
 
9
10
  @include media('>md') {
@@ -12,7 +13,7 @@
12
13
  }
13
14
 
14
15
  .c-toast-provider {
15
- position: fixed;
16
+ position: var(--toast-provider-position);
16
17
  z-index: var(--toast-provider-z-index);
17
18
 
18
19
  &.c-toast-provider--default {