@justeattakeaway/pie-cookie-banner 0.17.0 → 0.17.2
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 +5 -5
- package/dist/index.d.ts +7 -1
- package/dist/index.js +55 -51
- package/dist/react.d.ts +7 -1
- package/package.json +9 -9
- package/src/defs.ts +7 -1
- package/src/index.ts +2 -2
package/README.md
CHANGED
|
@@ -74,11 +74,11 @@ import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner/dist/react';
|
|
|
74
74
|
|
|
75
75
|
| Property | Type | Default | Description |
|
|
76
76
|
|---|---|---|---|
|
|
77
|
-
| hasPrimaryActionsOnly | `Boolean` | `false` | When true, sets the variant to "primary" for the button which accepts necessary cookies only.
|
|
78
|
-
| locale | `Object`
|
|
79
|
-
| cookieStatementLink | `String`
|
|
80
|
-
| cookieTechnologiesLink | `String`
|
|
81
|
-
| defaultPreferences | `Object`
|
|
77
|
+
| hasPrimaryActionsOnly | `Boolean` | `false` | When true, sets the variant to "primary" for the button which accepts necessary cookies only. |
|
|
78
|
+
| locale | `Object` | {English language locale} | Assigns the localisation data for the component strings. |
|
|
79
|
+
| cookieStatementLink | `String` | `''` | Allows a url to be passed for the cookie statement link. |
|
|
80
|
+
| cookieTechnologiesLink | `String` | `''` | Allows a url to be passed for the cookie technology link. |
|
|
81
|
+
| defaultPreferences | `Object` | `{}` | Allows default preferences to be passed in by the consumer`{ 'functional': true, 'personalized': true, 'analytical': true }` or `{ 'functional': true }`. |
|
|
82
82
|
|
|
83
83
|
In your markup or JSX, you can then use these to set the properties for the `pie-cookie-banner` component:
|
|
84
84
|
|
package/dist/index.d.ts
CHANGED
|
@@ -61,7 +61,13 @@ export declare interface CookieBannerProps {
|
|
|
61
61
|
* Allows consumers to pass in a specific cookie technology link.
|
|
62
62
|
*/
|
|
63
63
|
cookieTechnologiesLink: string;
|
|
64
|
-
|
|
64
|
+
/**
|
|
65
|
+
* Allows consumers to pass in specific preference(s) to the component which will toggle
|
|
66
|
+
* the switch to be on by default (if set to `true`).
|
|
67
|
+
*
|
|
68
|
+
* e.g. { 'functional': true }
|
|
69
|
+
*/
|
|
70
|
+
defaultPreferences?: Partial<Record<PreferenceIds, boolean>>;
|
|
65
71
|
}
|
|
66
72
|
|
|
67
73
|
export declare interface CustomTagEnhancers {
|
package/dist/index.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { state as
|
|
3
|
-
import { repeat as
|
|
1
|
+
import { unsafeCSS as w, LitElement as x, html as s, nothing as u } from "lit";
|
|
2
|
+
import { state as k, property as h, queryAll as B } from "lit/decorators.js";
|
|
3
|
+
import { repeat as C } from "lit/directives/repeat.js";
|
|
4
4
|
import "@justeattakeaway/pie-button";
|
|
5
5
|
import "@justeattakeaway/pie-divider";
|
|
6
6
|
import "@justeattakeaway/pie-icon-button";
|
|
7
7
|
import "@justeattakeaway/pie-link";
|
|
8
8
|
import "@justeattakeaway/pie-modal";
|
|
9
9
|
import "@justeattakeaway/pie-switch";
|
|
10
|
-
import { defineCustomElement as
|
|
11
|
-
const
|
|
12
|
-
`,
|
|
10
|
+
import { defineCustomElement as $ } from "@justeattakeaway/pie-webc-core";
|
|
11
|
+
const A = `*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactive-m-family);--cb-font-size: calc(var(--dt-font-body-l-size) * 1px);--cb-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--cb-font-weight: var(--dt-font-body-l-weight);--cb-padding-inline: var(--dt-spacing-d);--cb-padding-block: var(--dt-spacing-d);--cb-offset: 0;color-scheme:only dark;background-color:var(--dt-color-background-dark);color:var(--dt-color-content-inverse);font-family:var(--cb-font-family);font-size:var(--cb-font-size);line-height:var(--cb-line-height);font-weight:var(--cb-font-weight);padding-block-start:var(--cb-padding-block);padding-block-end:var(--cb-padding-block);max-height:432px;position:fixed;bottom:var(--cb-offset);left:var(--cb-offset);right:var(--cb-offset);border-top-left-radius:var(--dt-radius-rounded-c);border-top-right-radius:var(--dt-radius-rounded-c);z-index:var(--dt-z-index-cookie-banner)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner{--cb-padding-inline: var(--dt-spacing-f);--cb-offset: var(--dt-spacing-d);max-height:90%;border-bottom-left-radius:var(--dt-radius-rounded-c);border-bottom-right-radius:var(--dt-radius-rounded-c)}}.c-cookieBanner[isCookieBannerHidden]{display:none}.c-cookieBanner-title,.c-cookieBanner-body,.c-cookieBanner-actions{padding-inline-start:var(--cb-padding-inline);padding-inline-end:var(--cb-padding-inline)}.c-cookieBanner-title{--cb-title-font-size: var(--dt-font-heading-s-size--narrow);--cb-title-line-height: var(--dt-font-heading-s-line-height--narrow);font-size:calc(var(--cb-title-font-size) * 1px);font-weight:var(--dt-font-heading-s-weight);line-height:calc(var(--cb-title-line-height) * 1px)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-title{--cb-title-font-size: var(--dt-font-heading-s-size--wide);--cb-title-line-height: var(--dt-font-heading-s-line-height--wide)}}.c-cookieBanner-body{--cb-scroll-shadow-color: var(--dt-color-black);margin-block-start:var(--dt-spacing-a);max-height:200px;overflow-y:auto;background:linear-gradient(to bottom,transparent,var(--dt-color-background-dark) 75%) center bottom,linear-gradient(transparent,var(--cb-scroll-shadow-color)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 8px;background-attachment:local,scroll}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-body{max-height:150px}}.c-cookieBanner-actions{--cb-actions-flex-dir: column;margin-block-start:var(--dt-spacing-d);display:flex;gap:var(--dt-spacing-d);flex-direction:var(--cb-actions-flex-dir)}.c-cookieBanner-actions>pie-link{text-align:center;align-self:center}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-actions{--cb-actions-flex-dir: row-reverse;justify-content:flex-start;align-items:center}}.c-cookieBanner-subheading{--cb-subheading-font-size: var(--dt-font-heading-s-size--narrow);--cb-subheading-line-height: var(--dt-font-heading-s-line-height--narrow);font-size:calc(var(--cb-subheading-font-size) * 1px);font-weight:var(--dt-font-heading-s-weight);line-height:calc(var(--cb-subheading-line-height) * 1px)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-subheading{--cb-subheading-font-size: var(--dt-font-heading-s-size--wide);--cb-subheading-line-height: var(--dt-font-heading-s-line-height--wide)}}.c-cookieBanner-description{font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px)}.c-cookieBanner-preference{display:flex;gap:var(--dt-spacing-d);justify-content:space-between;margin-block-start:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-e)}.c-cookieBanner-preference p{margin-block-start:var(--dt-spacing-b)}.c-cookieBanner-preference:last-child{margin-block-end:0}
|
|
12
|
+
`, T = "pie-cookie-banner-accept-all", O = "pie-cookie-banner-necessary-only", E = "pie-cookie-banner-manage-prefs", S = "pie-cookie-banner-prefs-saved", M = [
|
|
13
13
|
{
|
|
14
14
|
id: "all",
|
|
15
15
|
hasDivider: !0,
|
|
@@ -34,30 +34,30 @@ const C = `*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactiv
|
|
|
34
34
|
hasDescription: !0
|
|
35
35
|
}
|
|
36
36
|
];
|
|
37
|
-
function
|
|
37
|
+
function b(a) {
|
|
38
38
|
console.error(`[localisation-utils]: ${a}`);
|
|
39
39
|
}
|
|
40
|
-
function
|
|
40
|
+
function N(a, e) {
|
|
41
41
|
const n = (t) => String.prototype.split.call(e, t).filter(Boolean).reduce((o, r) => o != null && typeof o == "object" ? o[r] : o, a), i = n(/[,[\]]+?/) || n(/[,[\].]+?/);
|
|
42
42
|
return typeof i != "string" ? "" : i;
|
|
43
43
|
}
|
|
44
|
-
function
|
|
44
|
+
function m(a, e) {
|
|
45
45
|
if (!a)
|
|
46
46
|
throw new Error('"locale" parameter cannot be empty');
|
|
47
47
|
if (!e)
|
|
48
48
|
throw new Error('"key" parameter cannot be empty');
|
|
49
|
-
const n =
|
|
50
|
-
return n || (
|
|
49
|
+
const n = N(a, e);
|
|
50
|
+
return n || (b(`Couldn't find a value for the key "${e}", it will be used as fallback.`), e);
|
|
51
51
|
}
|
|
52
|
-
function
|
|
52
|
+
function P(a) {
|
|
53
53
|
const n = a.map((t) => `(<${t}.*>.*</${t}>)`).join("|");
|
|
54
54
|
return new RegExp(n, "igm");
|
|
55
55
|
}
|
|
56
|
-
function
|
|
56
|
+
function z(a, e) {
|
|
57
57
|
const n = Object.keys(e);
|
|
58
58
|
if (n.length === 0)
|
|
59
59
|
return [a];
|
|
60
|
-
const i =
|
|
60
|
+
const i = P(n);
|
|
61
61
|
return a.split(i).filter((t) => !!t).map((t) => {
|
|
62
62
|
if (!t.match(i))
|
|
63
63
|
return t;
|
|
@@ -70,20 +70,20 @@ function N(a, e) {
|
|
|
70
70
|
if (!Array.isArray(t))
|
|
71
71
|
return t;
|
|
72
72
|
const [r, p] = t, l = e[r];
|
|
73
|
-
return l || typeof l == "function" ? l(p) : (
|
|
73
|
+
return l || typeof l == "function" ? l(p) : (b(`Custom tag "${r}" does not have a matching enhancer function`), p);
|
|
74
74
|
});
|
|
75
75
|
}
|
|
76
|
-
function
|
|
76
|
+
function L(a, e, n) {
|
|
77
77
|
if (!a)
|
|
78
78
|
throw new Error('"locale" parameter cannot be empty');
|
|
79
79
|
if (!e)
|
|
80
80
|
throw new Error('"key" parameter cannot be empty');
|
|
81
81
|
if (!n)
|
|
82
82
|
throw new Error('"customTagEnhancers" parameter cannot be empty');
|
|
83
|
-
const i =
|
|
84
|
-
return
|
|
83
|
+
const i = m(a, e);
|
|
84
|
+
return z(i, n);
|
|
85
85
|
}
|
|
86
|
-
const
|
|
86
|
+
const R = {
|
|
87
87
|
title: "Cookies",
|
|
88
88
|
description: "We use our own and third party cookies and other tech to enhance and personalise your user experience, optimize analytics, and show ads with third parties (read our <linkStatement>Statement</linkStatement>). Necessary cookies are always set. Click <linkNecessaryOnly>Necessary only</linkNecessaryOnly> to continue without accepting more. Click <linkManagePreferences>Manage preferences</linkManagePreferences> to share your preferences or <linkAcceptAll>Accept all</linkAcceptAll>.",
|
|
89
89
|
cta: {
|
|
@@ -91,7 +91,7 @@ const z = {
|
|
|
91
91
|
necessaryOnly: "Necessary only",
|
|
92
92
|
acceptAll: "Accept all"
|
|
93
93
|
}
|
|
94
|
-
},
|
|
94
|
+
}, j = {
|
|
95
95
|
title: "Manage your preferences",
|
|
96
96
|
description: "You can find all the information in the <linkCookieStatement>Cookie Statement</linkCookieStatement> and <linkCookieTechList>Cookie technology list</linkCookieTechList>.",
|
|
97
97
|
all: {
|
|
@@ -119,19 +119,19 @@ const z = {
|
|
|
119
119
|
ariaLabel: ""
|
|
120
120
|
}
|
|
121
121
|
}
|
|
122
|
-
},
|
|
123
|
-
banner:
|
|
124
|
-
preferencesManagement:
|
|
122
|
+
}, H = {
|
|
123
|
+
banner: R,
|
|
124
|
+
preferencesManagement: j
|
|
125
125
|
};
|
|
126
|
-
var
|
|
127
|
-
for (var t = i > 1 ? void 0 : i ?
|
|
126
|
+
var D = Object.defineProperty, K = Object.getOwnPropertyDescriptor, d = (a, e, n, i) => {
|
|
127
|
+
for (var t = i > 1 ? void 0 : i ? K(e, n) : e, o = a.length - 1, r; o >= 0; o--)
|
|
128
128
|
(r = a[o]) && (t = (i ? r(e, n, t) : r(t)) || t);
|
|
129
|
-
return i && t &&
|
|
129
|
+
return i && t && D(e, n, t), t;
|
|
130
130
|
};
|
|
131
|
-
const
|
|
132
|
-
class c extends
|
|
131
|
+
const F = "pie-cookie-banner";
|
|
132
|
+
class c extends x {
|
|
133
133
|
constructor() {
|
|
134
|
-
super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = !1, this.defaultPreferences = {}, this.locale =
|
|
134
|
+
super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = !1, this.defaultPreferences = {}, this.locale = H, this.cookieStatementLink = "", this.cookieTechnologiesLink = "", this._customTagEnhancers = {
|
|
135
135
|
linkStatement: (e) => s`<pie-link href="${this.cookieStatementLink}" variant="inverse" target="_blank" data-test-id="cookie-statement-link">${e}</pie-link>`,
|
|
136
136
|
linkNecessaryOnly: (e) => s`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${e}</pie-link>`,
|
|
137
137
|
linkManagePreferences: (e) => s`<pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">${e}</pie-link>`,
|
|
@@ -146,11 +146,11 @@ class c extends _ {
|
|
|
146
146
|
});
|
|
147
147
|
this.dispatchEvent(i);
|
|
148
148
|
}, this._onNecessaryOnly = () => {
|
|
149
|
-
this._dispatchCookieBannerCustomEvent(
|
|
149
|
+
this._dispatchCookieBannerCustomEvent(O), this._isCookieBannerHidden = !0;
|
|
150
150
|
}, this._onAcceptAll = () => {
|
|
151
|
-
this._dispatchCookieBannerCustomEvent(
|
|
151
|
+
this._dispatchCookieBannerCustomEvent(T), this._isCookieBannerHidden = !0;
|
|
152
152
|
}, this._openManagePreferencesModal = () => {
|
|
153
|
-
this._isCookieBannerHidden = !0, this._dispatchCookieBannerCustomEvent(
|
|
153
|
+
this._isCookieBannerHidden = !0, this._dispatchCookieBannerCustomEvent(E), this._isModalOpen = !0;
|
|
154
154
|
}, this._handleSwitchStates = (e) => {
|
|
155
155
|
const { id: n } = e == null ? void 0 : e.currentTarget, i = [...this._preferencesNodes].find(({ id: t }) => t === "all");
|
|
156
156
|
if (n === i.id) {
|
|
@@ -163,10 +163,10 @@ class c extends _ {
|
|
|
163
163
|
};
|
|
164
164
|
}
|
|
165
165
|
_localiseText(e) {
|
|
166
|
-
return
|
|
166
|
+
return m(this.locale, e);
|
|
167
167
|
}
|
|
168
168
|
_localiseRichText(e) {
|
|
169
|
-
return
|
|
169
|
+
return L(this.locale, e, this._customTagEnhancers);
|
|
170
170
|
}
|
|
171
171
|
/**
|
|
172
172
|
* Handles closing the modal and re-displaying the cookie banner
|
|
@@ -188,7 +188,7 @@ class c extends _ {
|
|
|
188
188
|
let e = {};
|
|
189
189
|
[...this._preferencesNodes].filter(({ id: n }) => n !== "all").forEach(({ id: n, checked: i }) => {
|
|
190
190
|
e = { ...e, [n]: i };
|
|
191
|
-
}), this._dispatchCookieBannerCustomEvent(
|
|
191
|
+
}), this._dispatchCookieBannerCustomEvent(S, e), this._isModalOpen = !1, this._isCookieBannerHidden = !0;
|
|
192
192
|
}
|
|
193
193
|
/**
|
|
194
194
|
* Renders the content of the preference item.
|
|
@@ -201,21 +201,25 @@ class c extends _ {
|
|
|
201
201
|
hasDivider: t,
|
|
202
202
|
hasDescription: o
|
|
203
203
|
}) {
|
|
204
|
-
|
|
204
|
+
var f;
|
|
205
|
+
const r = this._localiseText(`preferencesManagement.${e}.title`), p = `preferencesManagement.${e}.description`, l = o && this._localiseText(p), v = ["functional", "personalized", "analytical"].every((_) => {
|
|
206
|
+
var g;
|
|
207
|
+
return ((g = this.defaultPreferences) == null ? void 0 : g[_]) === !0;
|
|
208
|
+
});
|
|
205
209
|
return s`
|
|
206
210
|
<div class="c-cookieBanner-preference">
|
|
207
211
|
<div>
|
|
208
212
|
<h3 class="c-cookieBanner-subheading">${r}</h3>
|
|
209
|
-
${l ? s`<p class="c-cookieBanner-description">${l}</p>` :
|
|
213
|
+
${l ? s`<p class="c-cookieBanner-description">${l}</p>` : u}
|
|
210
214
|
</div>
|
|
211
215
|
<pie-switch
|
|
212
216
|
id="${e}"
|
|
213
|
-
?checked="${this.defaultPreferences[e] ||
|
|
217
|
+
?checked="${((f = this.defaultPreferences) == null ? void 0 : f[e]) || v || n}"
|
|
214
218
|
?disabled="${i}"
|
|
215
219
|
@change="${this._handleSwitchStates}">
|
|
216
220
|
</pie-switch>
|
|
217
221
|
</div>
|
|
218
|
-
${t ? s`<pie-divider></pie-divider>` :
|
|
222
|
+
${t ? s`<pie-divider></pie-divider>` : u}`;
|
|
219
223
|
}
|
|
220
224
|
/**
|
|
221
225
|
* Renders the modal content.
|
|
@@ -226,8 +230,8 @@ class c extends _ {
|
|
|
226
230
|
<p class="c-cookieBanner-description" data-test-id="modal-description">
|
|
227
231
|
${this._localiseRichText("preferencesManagement.description")}
|
|
228
232
|
</p>
|
|
229
|
-
${
|
|
230
|
-
|
|
233
|
+
${C(
|
|
234
|
+
M,
|
|
231
235
|
({ id: e }) => e,
|
|
232
236
|
(e) => this.renderPreference(e)
|
|
233
237
|
)}`;
|
|
@@ -286,12 +290,12 @@ class c extends _ {
|
|
|
286
290
|
</aside>`;
|
|
287
291
|
}
|
|
288
292
|
}
|
|
289
|
-
c.styles =
|
|
293
|
+
c.styles = w(A);
|
|
290
294
|
d([
|
|
291
|
-
|
|
295
|
+
k()
|
|
292
296
|
], c.prototype, "_isCookieBannerHidden", 2);
|
|
293
297
|
d([
|
|
294
|
-
|
|
298
|
+
k()
|
|
295
299
|
], c.prototype, "_isModalOpen", 2);
|
|
296
300
|
d([
|
|
297
301
|
h({ type: Boolean })
|
|
@@ -309,14 +313,14 @@ d([
|
|
|
309
313
|
h({ type: String })
|
|
310
314
|
], c.prototype, "cookieTechnologiesLink", 2);
|
|
311
315
|
d([
|
|
312
|
-
|
|
316
|
+
B("pie-switch")
|
|
313
317
|
], c.prototype, "_preferencesNodes", 2);
|
|
314
|
-
|
|
318
|
+
$(F, c);
|
|
315
319
|
export {
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
+
T as ON_COOKIE_BANNER_ACCEPT_ALL,
|
|
321
|
+
E as ON_COOKIE_BANNER_MANAGE_PREFS,
|
|
322
|
+
O as ON_COOKIE_BANNER_NECESSARY_ONLY,
|
|
323
|
+
S as ON_COOKIE_BANNER_PREFS_SAVED,
|
|
320
324
|
c as PieCookieBanner,
|
|
321
|
-
|
|
325
|
+
M as preferences
|
|
322
326
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -62,7 +62,13 @@ export declare interface CookieBannerProps {
|
|
|
62
62
|
* Allows consumers to pass in a specific cookie technology link.
|
|
63
63
|
*/
|
|
64
64
|
cookieTechnologiesLink: string;
|
|
65
|
-
|
|
65
|
+
/**
|
|
66
|
+
* Allows consumers to pass in specific preference(s) to the component which will toggle
|
|
67
|
+
* the switch to be on by default (if set to `true`).
|
|
68
|
+
*
|
|
69
|
+
* e.g. { 'functional': true }
|
|
70
|
+
*/
|
|
71
|
+
defaultPreferences?: Partial<Record<PreferenceIds, boolean>>;
|
|
66
72
|
}
|
|
67
73
|
|
|
68
74
|
export declare interface CustomTagEnhancers {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-cookie-banner",
|
|
3
3
|
"description": "PIE Design System Cookie Banner built using Web Components",
|
|
4
|
-
"version": "0.17.
|
|
4
|
+
"version": "0.17.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -34,18 +34,18 @@
|
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
36
36
|
"@justeat/pie-design-tokens": "5.9.0",
|
|
37
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
37
|
+
"@justeattakeaway/pie-components-config": "0.11.0",
|
|
38
38
|
"@justeattakeaway/pie-wrapper-react": "0.14.0",
|
|
39
39
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@justeattakeaway/pie-button": "0.45.
|
|
43
|
-
"@justeattakeaway/pie-divider": "0.12.
|
|
44
|
-
"@justeattakeaway/pie-icon-button": "0.27.
|
|
45
|
-
"@justeattakeaway/pie-link": "0.15.
|
|
46
|
-
"@justeattakeaway/pie-modal": "0.38.
|
|
47
|
-
"@justeattakeaway/pie-switch": "0.
|
|
48
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
42
|
+
"@justeattakeaway/pie-button": "0.45.4",
|
|
43
|
+
"@justeattakeaway/pie-divider": "0.12.2",
|
|
44
|
+
"@justeattakeaway/pie-icon-button": "0.27.4",
|
|
45
|
+
"@justeattakeaway/pie-link": "0.15.2",
|
|
46
|
+
"@justeattakeaway/pie-modal": "0.38.6",
|
|
47
|
+
"@justeattakeaway/pie-switch": "0.27.0",
|
|
48
|
+
"@justeattakeaway/pie-webc-core": "0.18.0"
|
|
49
49
|
},
|
|
50
50
|
"volta": {
|
|
51
51
|
"extends": "../../../package.json"
|
package/src/defs.ts
CHANGED
|
@@ -63,7 +63,13 @@ export interface CookieBannerProps {
|
|
|
63
63
|
*/
|
|
64
64
|
cookieTechnologiesLink: string;
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
/**
|
|
67
|
+
* Allows consumers to pass in specific preference(s) to the component which will toggle
|
|
68
|
+
* the switch to be on by default (if set to `true`).
|
|
69
|
+
*
|
|
70
|
+
* e.g. { 'functional': true }
|
|
71
|
+
*/
|
|
72
|
+
defaultPreferences?: Partial<Record<PreferenceIds, boolean>>;
|
|
67
73
|
}
|
|
68
74
|
|
|
69
75
|
/**
|
package/src/index.ts
CHANGED
|
@@ -203,7 +203,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
203
203
|
const requiredToggleAllKeys = ['functional', 'personalized', 'analytical'];
|
|
204
204
|
|
|
205
205
|
const shouldToggleAll =
|
|
206
|
-
requiredToggleAllKeys.every((key) => this.defaultPreferences[key] === true);
|
|
206
|
+
requiredToggleAllKeys.every((key) => this.defaultPreferences?.[key as PreferenceIds] === true);
|
|
207
207
|
|
|
208
208
|
return html`
|
|
209
209
|
<div class="c-cookieBanner-preference">
|
|
@@ -213,7 +213,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
213
213
|
</div>
|
|
214
214
|
<pie-switch
|
|
215
215
|
id="${id}"
|
|
216
|
-
?checked="${this.defaultPreferences[id] || shouldToggleAll || checked}"
|
|
216
|
+
?checked="${this.defaultPreferences?.[id] || shouldToggleAll || checked}"
|
|
217
217
|
?disabled="${disabled}"
|
|
218
218
|
@change="${this._handleSwitchStates}">
|
|
219
219
|
</pie-switch>
|