@justeattakeaway/pie-modal 0.28.0 → 0.30.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.
- package/README.md +8 -62
- package/dist/index.js +27 -27
- package/package.json +5 -5
- package/src/modal.scss +44 -29
package/README.md
CHANGED
|
@@ -14,10 +14,9 @@
|
|
|
14
14
|
2. [Installation](#installation)
|
|
15
15
|
3. [Importing the component](#importing-the-component)
|
|
16
16
|
4. [Peer Dependencies](#peer-dependencies)
|
|
17
|
-
5. [
|
|
18
|
-
6. [
|
|
19
|
-
7. [
|
|
20
|
-
8. [Legacy browser support](#legacy-browser-support)
|
|
17
|
+
5. [Props](#props)
|
|
18
|
+
6. [Legacy browser support](#legacy-browser-support)
|
|
19
|
+
7. [Contributing](#contributing)
|
|
21
20
|
|
|
22
21
|
|
|
23
22
|
## pie-modal
|
|
@@ -59,30 +58,6 @@ import { PieModal } from '@justeattakeaway/pie-modal/dist/react';
|
|
|
59
58
|
> When using `pie-modal`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
|
|
60
59
|
|
|
61
60
|
|
|
62
|
-
## Local development
|
|
63
|
-
|
|
64
|
-
Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
|
|
65
|
-
|
|
66
|
-
```bash
|
|
67
|
-
yarn
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
To build the `pie-modal` package, run the following command:
|
|
71
|
-
|
|
72
|
-
```bash
|
|
73
|
-
yarn build --filter=pie-modal
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
|
|
77
|
-
|
|
78
|
-
```bash
|
|
79
|
-
yarn watch --filter=pie-modal
|
|
80
|
-
|
|
81
|
-
# in a separate terminal tab, run
|
|
82
|
-
yarn dev --filter=pie-storybook
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
|
|
86
61
|
## Props
|
|
87
62
|
|
|
88
63
|
| Property | Type | Default | Description |
|
|
@@ -113,40 +88,6 @@ In your markup or JSX, you can then use these to set the properties for the `pie
|
|
|
113
88
|
<PieModal heading='My Awesome Heading' headingLevel='h3'>Click me!</PieModal>
|
|
114
89
|
```
|
|
115
90
|
|
|
116
|
-
## Testing
|
|
117
|
-
|
|
118
|
-
### Browser tests
|
|
119
|
-
|
|
120
|
-
To run the browser tests, run the following command from the root of the monorepo:
|
|
121
|
-
|
|
122
|
-
```bash
|
|
123
|
-
yarn test:browsers --filter=pie-modal
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
### Visual tests
|
|
127
|
-
|
|
128
|
-
To run the visual regression tests, run the following command from the root of the monorepo:
|
|
129
|
-
|
|
130
|
-
```bash
|
|
131
|
-
yarn test:visual --filter=pie-modal
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
|
|
135
|
-
|
|
136
|
-
#### Setup via bash
|
|
137
|
-
|
|
138
|
-
```bash
|
|
139
|
-
export PERCY_TOKEN_PIE_MODAL=abcde
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
#### Setup via package.json
|
|
143
|
-
|
|
144
|
-
Under scripts `test:visual` replace the environment variable with the below:
|
|
145
|
-
|
|
146
|
-
```bash
|
|
147
|
-
PERCY_TOKEN_PIE_MODAL=abcde
|
|
148
|
-
```
|
|
149
|
-
|
|
150
91
|
## Legacy browser support
|
|
151
92
|
|
|
152
93
|
`pie-modal` uses the Dialog element which might not be supported by legacy browsers.
|
|
@@ -159,3 +100,8 @@ The polyfill comes with a few limitations, as noted on its [documentation page](
|
|
|
159
100
|
- Changes to the CSS top/bottom values while open aren't retained
|
|
160
101
|
|
|
161
102
|
For more details, check the package documentation mentioned above.
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
## Contributing
|
|
106
|
+
|
|
107
|
+
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
package/dist/index.js
CHANGED
|
@@ -24,12 +24,12 @@ const ie = (n) => {
|
|
|
24
24
|
return this[r];
|
|
25
25
|
},
|
|
26
26
|
set(h) {
|
|
27
|
-
const
|
|
27
|
+
const g = this[r];
|
|
28
28
|
e.includes(h) ? this[r] = h : (console.error(
|
|
29
29
|
`<${n}> Invalid value "${h}" provided for property "${a}".`,
|
|
30
30
|
`Must be one of: ${e.join(" | ")}.`,
|
|
31
31
|
`Falling back to default value: "${t}"`
|
|
32
|
-
), this[r] = t), this.requestUpdate(a,
|
|
32
|
+
), this[r] = t), this.requestUpdate(a, g);
|
|
33
33
|
}
|
|
34
34
|
});
|
|
35
35
|
}, oe = (n) => function(t, i) {
|
|
@@ -50,28 +50,28 @@ function ne(n, e) {
|
|
|
50
50
|
function P(n, e) {
|
|
51
51
|
customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, e);
|
|
52
52
|
}
|
|
53
|
-
const
|
|
53
|
+
const _ = {
|
|
54
54
|
xs: 16,
|
|
55
55
|
s: 20,
|
|
56
56
|
m: 24,
|
|
57
57
|
l: 28,
|
|
58
58
|
xl: 32,
|
|
59
59
|
xxl: 40
|
|
60
|
-
}, W = Object.keys(
|
|
60
|
+
}, W = Object.keys(_), q = "xs", V = 8, z = 32;
|
|
61
61
|
function ae(n, e, t) {
|
|
62
62
|
const i = parseInt(n, 10), o = i % t === 0;
|
|
63
63
|
return i >= e && o;
|
|
64
64
|
}
|
|
65
65
|
const Y = {
|
|
66
|
-
large: (n) => ae(n,
|
|
66
|
+
large: (n) => ae(n, z, V),
|
|
67
67
|
regular: (n) => W.includes(n)
|
|
68
68
|
};
|
|
69
69
|
function re(n) {
|
|
70
70
|
const e = Y.large(n);
|
|
71
|
-
return { isValid: e, size: e ? n :
|
|
71
|
+
return { isValid: e, size: e ? n : z };
|
|
72
72
|
}
|
|
73
73
|
function le(n) {
|
|
74
|
-
const e = Y.regular(n), t = e ?
|
|
74
|
+
const e = Y.regular(n), t = e ? _[n] : _[q];
|
|
75
75
|
return { isValid: e, size: t };
|
|
76
76
|
}
|
|
77
77
|
const u = (n, e, t, i) => {
|
|
@@ -79,11 +79,11 @@ const u = (n, e, t, i) => {
|
|
|
79
79
|
let a, r;
|
|
80
80
|
if (t) {
|
|
81
81
|
if ({ isValid: a, size: r } = o ? re(t) : le(t), !a) {
|
|
82
|
-
const h = o ? `Invalid prop "size" value supplied to "${i}". The prop value should be a number equal or greater than ${
|
|
82
|
+
const h = o ? `Invalid prop "size" value supplied to "${i}". The prop value should be a number equal or greater than ${z} and multiple of ${V}.` : `Invalid prop "size" value supplied to "${i}". The prop value should be one of the following values: ${W.join(", ")}.`;
|
|
83
83
|
console.error(h);
|
|
84
84
|
}
|
|
85
85
|
} else
|
|
86
|
-
r = o ?
|
|
86
|
+
r = o ? z : _[q];
|
|
87
87
|
return {
|
|
88
88
|
class: [n, e].filter(Boolean).join(" "),
|
|
89
89
|
width: r,
|
|
@@ -139,7 +139,7 @@ var he = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, T = (n, e,
|
|
|
139
139
|
(r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
|
|
140
140
|
return i && o && he(e, t, o), o;
|
|
141
141
|
};
|
|
142
|
-
const
|
|
142
|
+
const me = "icon-chevron-left";
|
|
143
143
|
class w extends $ {
|
|
144
144
|
constructor() {
|
|
145
145
|
super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronLeft";
|
|
@@ -177,11 +177,11 @@ T([
|
|
|
177
177
|
T([
|
|
178
178
|
O("svg")
|
|
179
179
|
], w.prototype, "_svg", 2);
|
|
180
|
-
P(
|
|
181
|
-
var
|
|
180
|
+
P(me, w);
|
|
181
|
+
var ge = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, j = (n, e, t, i) => {
|
|
182
182
|
for (var o = i > 1 ? void 0 : i ? ue(e, t) : e, a = n.length - 1, r; a >= 0; a--)
|
|
183
183
|
(r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
|
|
184
|
-
return i && o &&
|
|
184
|
+
return i && o && ge(e, t, o), o;
|
|
185
185
|
};
|
|
186
186
|
const ve = "icon-chevron-right";
|
|
187
187
|
class y extends $ {
|
|
@@ -239,8 +239,8 @@ if (typeof window < "u") {
|
|
|
239
239
|
};
|
|
240
240
|
window.addEventListener("testPassive", null, N), window.removeEventListener("testPassive", null, N);
|
|
241
241
|
}
|
|
242
|
-
var U = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1),
|
|
243
|
-
return
|
|
242
|
+
var U = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), m = [], C = !1, H = -1, v = void 0, f = void 0, Z = function(e) {
|
|
243
|
+
return m.some(function(t) {
|
|
244
244
|
return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
|
|
245
245
|
});
|
|
246
246
|
}, A = function(e) {
|
|
@@ -264,29 +264,29 @@ var U = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
264
264
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
265
265
|
return;
|
|
266
266
|
}
|
|
267
|
-
if (!
|
|
267
|
+
if (!m.some(function(o) {
|
|
268
268
|
return o.targetElement === e;
|
|
269
269
|
})) {
|
|
270
270
|
var i = {
|
|
271
271
|
targetElement: e,
|
|
272
272
|
options: t || {}
|
|
273
273
|
};
|
|
274
|
-
|
|
274
|
+
m = [].concat(fe(m), [i]), U ? (e.ontouchstart = function(o) {
|
|
275
275
|
o.targetTouches.length === 1 && (H = o.targetTouches[0].clientY);
|
|
276
276
|
}, e.ontouchmove = function(o) {
|
|
277
277
|
o.targetTouches.length === 1 && ke(o, e);
|
|
278
278
|
}, C || (document.addEventListener("touchmove", A, F ? { passive: !1 } : void 0), C = !0)) : be(t);
|
|
279
279
|
}
|
|
280
|
-
},
|
|
280
|
+
}, _e = function(e) {
|
|
281
281
|
if (!e) {
|
|
282
282
|
console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
|
|
283
283
|
return;
|
|
284
284
|
}
|
|
285
|
-
|
|
285
|
+
m = m.filter(function(t) {
|
|
286
286
|
return t.targetElement !== e;
|
|
287
|
-
}), U ? (e.ontouchstart = null, e.ontouchmove = null, C &&
|
|
287
|
+
}), U ? (e.ontouchstart = null, e.ontouchmove = null, C && m.length === 0 && (document.removeEventListener("touchmove", A, F ? { passive: !1 } : void 0), C = !1)) : m.length || we();
|
|
288
288
|
};
|
|
289
|
-
const
|
|
289
|
+
const ze = `dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}@media (max-width: 767px){.c-modal[size=medium][isfullwidthbelowmid]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline:var(--dt-spacing-d);margin-block:14px}@media (min-width: 768px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline:var(--dt-spacing-e);margin-block:20px}}.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-b) var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-c) var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-none) var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-none) var(--dt-spacing-c)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--spinner-size: 48px;--spinner-border-width: 6px;--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;min-block-size:var(--dt-spacing-j);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline:var(--modal-content-padding-inline);padding-block:var(--modal-content-padding-block);flex-grow:1}@media (min-width: 768px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal .c-modal-content:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;opacity:0}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;height:100%;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal[isfooterpinned] .c-modal-content{overflow-y:auto}.c-modal[isLoading] .c-modal-content:before{animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);opacity:1}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{opacity:0}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}
|
|
290
290
|
`, Ce = ["h1", "h2", "h3", "h4", "h5", "h6"], Ae = ["small", "medium", "large"], $e = ["top", "center"], B = "pie-modal-close", x = "pie-modal-open", S = "pie-modal-back", Oe = "pie-modal-leading-action-click", Le = "pie-modal-supporting-action-click";
|
|
291
291
|
var Be = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, d = (n, e, t, i) => {
|
|
292
292
|
for (var o = i > 1 ? void 0 : i ? Se(e, t) : e, a = n.length - 1, r; a >= 0; a--)
|
|
@@ -299,10 +299,10 @@ class s extends ie($) {
|
|
|
299
299
|
super(...arguments), this.headingLevel = "h2", this.hasBackButton = !1, this.hasStackedActions = !1, this.isDismissible = !1, this.isFooterPinned = !0, this.isFullWidthBelowMid = !1, this.isLoading = !1, this.isOpen = !1, this.position = "center", this.size = "medium", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
|
|
300
300
|
this.isDismissible || e.preventDefault();
|
|
301
301
|
}, this._handleDialogLightDismiss = (e) => {
|
|
302
|
-
var
|
|
302
|
+
var g;
|
|
303
303
|
if (!this.isDismissible)
|
|
304
304
|
return;
|
|
305
|
-
const t = (
|
|
305
|
+
const t = (g = this._dialog) == null ? void 0 : g.getBoundingClientRect(), {
|
|
306
306
|
top: i = 0,
|
|
307
307
|
bottom: o = 0,
|
|
308
308
|
left: a = 0,
|
|
@@ -347,7 +347,7 @@ class s extends ie($) {
|
|
|
347
347
|
_handleModalClosed() {
|
|
348
348
|
var t, i;
|
|
349
349
|
const e = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
|
|
350
|
-
e &&
|
|
350
|
+
e && _e(e), (i = this._dialog) == null || i.close(), this._returnFocus();
|
|
351
351
|
}
|
|
352
352
|
// Handles the value of the isOpen property on first render of the component
|
|
353
353
|
_handleModalOpenStateOnFirstRender(e) {
|
|
@@ -485,7 +485,7 @@ class s extends ie($) {
|
|
|
485
485
|
headingLevel: a = "h2",
|
|
486
486
|
isDismissible: r,
|
|
487
487
|
isFooterPinned: h,
|
|
488
|
-
isFullWidthBelowMid:
|
|
488
|
+
isFullWidthBelowMid: g,
|
|
489
489
|
isLoading: L,
|
|
490
490
|
leadingAction: G,
|
|
491
491
|
position: X,
|
|
@@ -503,7 +503,7 @@ class s extends ie($) {
|
|
|
503
503
|
?hasStackedActions=${i}
|
|
504
504
|
?isDismissible=${r}
|
|
505
505
|
?isFooterPinned=${h}
|
|
506
|
-
?isFullWidthBelowMid=${
|
|
506
|
+
?isFullWidthBelowMid=${g}
|
|
507
507
|
?isLoading=${L}
|
|
508
508
|
aria-busy="${L ? "true" : "false"}"
|
|
509
509
|
aria-label="${L && (e == null ? void 0 : e.loading) || c}"
|
|
@@ -524,7 +524,7 @@ class s extends ie($) {
|
|
|
524
524
|
</dialog>`;
|
|
525
525
|
}
|
|
526
526
|
}
|
|
527
|
-
s.styles = ee(
|
|
527
|
+
s.styles = ee(ze);
|
|
528
528
|
d([
|
|
529
529
|
l({ type: Object })
|
|
530
530
|
], s.prototype, "aria", 2);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.30.0",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -29,12 +29,12 @@
|
|
|
29
29
|
"license": "Apache-2.0",
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@justeat/pie-design-tokens": "5.8.2",
|
|
32
|
-
"@justeattakeaway/pie-button": "0.
|
|
32
|
+
"@justeattakeaway/pie-button": "0.35.0",
|
|
33
33
|
"@justeattakeaway/pie-components-config": "0.4.0",
|
|
34
|
-
"@justeattakeaway/pie-icon-button": "0.
|
|
35
|
-
"@justeattakeaway/pie-icons-webc": "0.11.
|
|
34
|
+
"@justeattakeaway/pie-icon-button": "0.19.0",
|
|
35
|
+
"@justeattakeaway/pie-icons-webc": "0.11.1",
|
|
36
36
|
"@justeattakeaway/pie-webc-core": "0.11.0",
|
|
37
|
-
"@types/body-scroll-lock": "3.1.
|
|
37
|
+
"@types/body-scroll-lock": "3.1.1"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"body-scroll-lock": "3.1.5"
|
package/src/modal.scss
CHANGED
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
|
|
41
41
|
// We need to override the icon sizes at different screen sizes regardless of size prop passed in
|
|
42
42
|
pie-icon-button {
|
|
43
|
-
@media (max-width: $breakpoint-wide) {
|
|
43
|
+
@media (max-width: calc($breakpoint-wide - 1px)) {
|
|
44
44
|
--btn-dimension: 40px;
|
|
45
45
|
}
|
|
46
46
|
}
|
|
@@ -172,8 +172,8 @@
|
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
& .c-modal-heading {
|
|
175
|
-
--modal-header-font-size: calc(var(--dt-font-heading-m-size--
|
|
176
|
-
--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--
|
|
175
|
+
--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);
|
|
176
|
+
--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);
|
|
177
177
|
--modal-header-font-weight: var(--dt-font-heading-m-weight);
|
|
178
178
|
|
|
179
179
|
font-size: var(--modal-header-font-size);
|
|
@@ -186,6 +186,8 @@
|
|
|
186
186
|
margin-block: 14px; // This is deliberately not a custom property
|
|
187
187
|
|
|
188
188
|
@media (min-width: $breakpoint-wide) {
|
|
189
|
+
--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);
|
|
190
|
+
--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
|
|
189
191
|
margin-inline: var(--dt-spacing-e);
|
|
190
192
|
margin-block: 20px; // This is deliberately not a custom property
|
|
191
193
|
}
|
|
@@ -231,32 +233,6 @@
|
|
|
231
233
|
}
|
|
232
234
|
}
|
|
233
235
|
|
|
234
|
-
&[isfooterpinned] .c-modal-content,
|
|
235
|
-
& .c-modal-scrollContainer {
|
|
236
|
-
overflow-y: auto;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
& .c-modal-scrollContainer {
|
|
240
|
-
// These are the shadows used to indicate scrolling above and below content
|
|
241
|
-
--bg-scroll-start: linear-gradient(var(--dt-color-container-default) 30%, rgba(255, 255, 255, 0));
|
|
242
|
-
--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;
|
|
243
|
-
--bg-scroll-top: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
|
|
244
|
-
--bg-scroll-bottom: radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0 100%;
|
|
245
|
-
|
|
246
|
-
// Sizes of the scroll shadows
|
|
247
|
-
--bg-size-scroll-start: 100% 40px;
|
|
248
|
-
--bg-size-scroll-end: 100% 40px;
|
|
249
|
-
--bg-size-scroll-top: 100% 16px;
|
|
250
|
-
--bg-size-scroll-bottom: 100% 16px;
|
|
251
|
-
|
|
252
|
-
background: var(--bg-scroll-start), var(--bg-scroll-end), var(--bg-scroll-top), var(--bg-scroll-bottom);
|
|
253
|
-
background-repeat: no-repeat;
|
|
254
|
-
background-color: var(--dt-color-container-default);
|
|
255
|
-
background-size: var(--bg-size-scroll-start), var(--bg-size-scroll-end), var(--bg-size-scroll-top), var(--bg-size-scroll-bottom);
|
|
256
|
-
|
|
257
|
-
background-attachment: local, local, scroll, scroll;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
236
|
& .c-modal-content {
|
|
261
237
|
// Modal content Custom Props
|
|
262
238
|
--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);
|
|
@@ -295,6 +271,7 @@
|
|
|
295
271
|
|
|
296
272
|
padding-inline: var(--modal-content-padding-inline);
|
|
297
273
|
padding-block: var(--modal-content-padding-block);
|
|
274
|
+
flex-grow: 1;
|
|
298
275
|
|
|
299
276
|
&--scrollable {
|
|
300
277
|
background:
|
|
@@ -335,6 +312,35 @@
|
|
|
335
312
|
}
|
|
336
313
|
}
|
|
337
314
|
|
|
315
|
+
& > .c-modal-scrollContainer {
|
|
316
|
+
display: flex;
|
|
317
|
+
flex-direction: column;
|
|
318
|
+
height: 100%;
|
|
319
|
+
overflow-y: auto;
|
|
320
|
+
|
|
321
|
+
// These are the shadows used to indicate scrolling above and below content
|
|
322
|
+
--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;
|
|
323
|
+
--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0 100%;
|
|
324
|
+
|
|
325
|
+
// Sizes of the scroll shadows
|
|
326
|
+
--bg-size-scroll-end: 100% 40px;
|
|
327
|
+
--bg-size-scroll-bottom: 100% 8px;
|
|
328
|
+
|
|
329
|
+
background: var(--bg-scroll-end), var(--bg-scroll-bottom);
|
|
330
|
+
background-repeat: no-repeat;
|
|
331
|
+
background-size: var(--bg-size-scroll-end), var(--bg-size-scroll-bottom);
|
|
332
|
+
|
|
333
|
+
background-attachment: local, scroll;
|
|
334
|
+
|
|
335
|
+
.c-modal-content {
|
|
336
|
+
flex-shrink: 0;
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
&[isfooterpinned] .c-modal-content {
|
|
341
|
+
overflow-y: auto;
|
|
342
|
+
}
|
|
343
|
+
|
|
338
344
|
&[isLoading] .c-modal-content {
|
|
339
345
|
&:before {
|
|
340
346
|
animation: rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);
|
|
@@ -345,4 +351,13 @@
|
|
|
345
351
|
opacity: 0;
|
|
346
352
|
}
|
|
347
353
|
}
|
|
354
|
+
|
|
355
|
+
// removes the scroll shadow effect if "background-attachment" isn't supported.
|
|
356
|
+
// @supports (background-attachment: local) isn't used as Safari 14 recognizes the property but it has no effect.
|
|
357
|
+
// thus, "aspect-ratio" is used instead as it's only supported in Safari>=15
|
|
358
|
+
@supports not (aspect-ratio: 1 / 1) {
|
|
359
|
+
.c-modal-scrollContainer {
|
|
360
|
+
background: none;
|
|
361
|
+
}
|
|
362
|
+
}
|
|
348
363
|
}
|