@justeattakeaway/pie-cookie-banner 0.22.1 → 0.24.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/custom-elements.json +16 -16
- package/dist/index.js +17 -19
- package/dist/react.d.ts +2 -0
- package/dist/react.js +5 -4
- package/package.json +9 -8
- package/src/defs.ts +10 -0
- package/src/index.ts +4 -18
package/custom-elements.json
CHANGED
|
@@ -55,6 +55,14 @@
|
|
|
55
55
|
"text": "Preference[]"
|
|
56
56
|
},
|
|
57
57
|
"default": "[\n {\n id: 'all',\n hasDivider: true,\n hasDescription: false,\n },\n {\n id: 'necessary',\n checked: true,\n disabled: true,\n hasDescription: true,\n },\n {\n id: 'functional',\n hasDescription: true,\n },\n {\n id: 'analytical',\n hasDescription: true,\n },\n {\n id: 'personalized',\n hasDescription: true,\n }\n]"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"kind": "variable",
|
|
61
|
+
"name": "defaultProps",
|
|
62
|
+
"type": {
|
|
63
|
+
"text": "DefaultProps"
|
|
64
|
+
},
|
|
65
|
+
"default": "{\n hasPrimaryActionsOnly: false,\n defaultPreferences: {},\n locale: defaultLocale,\n cookieStatementLink: '',\n cookieTechnologiesLink: '',\n}"
|
|
58
66
|
}
|
|
59
67
|
],
|
|
60
68
|
"exports": [
|
|
@@ -97,6 +105,14 @@
|
|
|
97
105
|
"name": "preferences",
|
|
98
106
|
"module": "src/defs.js"
|
|
99
107
|
}
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"kind": "js",
|
|
111
|
+
"name": "defaultProps",
|
|
112
|
+
"declaration": {
|
|
113
|
+
"name": "defaultProps",
|
|
114
|
+
"module": "src/defs.js"
|
|
115
|
+
}
|
|
100
116
|
}
|
|
101
117
|
]
|
|
102
118
|
},
|
|
@@ -104,14 +120,6 @@
|
|
|
104
120
|
"kind": "javascript-module",
|
|
105
121
|
"path": "src/index.js",
|
|
106
122
|
"declarations": [
|
|
107
|
-
{
|
|
108
|
-
"kind": "variable",
|
|
109
|
-
"name": "defaultProps",
|
|
110
|
-
"type": {
|
|
111
|
-
"text": "DefaultProps"
|
|
112
|
-
},
|
|
113
|
-
"default": "{\n hasPrimaryActionsOnly: false,\n defaultPreferences: {},\n locale: defaultLocale,\n cookieStatementLink: '',\n cookieTechnologiesLink: '',\n}"
|
|
114
|
-
},
|
|
115
123
|
{
|
|
116
124
|
"kind": "class",
|
|
117
125
|
"description": "",
|
|
@@ -375,14 +383,6 @@
|
|
|
375
383
|
"package": "./defs"
|
|
376
384
|
}
|
|
377
385
|
},
|
|
378
|
-
{
|
|
379
|
-
"kind": "js",
|
|
380
|
-
"name": "defaultProps",
|
|
381
|
-
"declaration": {
|
|
382
|
-
"name": "defaultProps",
|
|
383
|
-
"module": "src/index.js"
|
|
384
|
-
}
|
|
385
|
-
},
|
|
386
386
|
{
|
|
387
387
|
"kind": "js",
|
|
388
388
|
"name": "PieCookieBanner",
|
package/dist/index.js
CHANGED
|
@@ -8,7 +8,8 @@ import "@justeattakeaway/pie-link";
|
|
|
8
8
|
import "@justeattakeaway/pie-modal";
|
|
9
9
|
import "@justeattakeaway/pie-switch";
|
|
10
10
|
import { defineCustomElement as T, dispatchCustomEvent as g } from "@justeattakeaway/pie-webc-core";
|
|
11
|
-
const O = {
|
|
11
|
+
const O = `*,*:after,*:before{box-sizing:inherit}*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactive-l-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}@media (prefers-reduced-motion: no-preference){.c-cookieBanner{animation:.5s animate-enter ease-out}@keyframes animate-enter{0%{transform:translate3d(0,75%,0)}to{transform:translateZ(0)}}}.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
|
+
`, S = {
|
|
12
13
|
title: "Cookies",
|
|
13
14
|
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>.",
|
|
14
15
|
cta: {
|
|
@@ -16,7 +17,7 @@ const O = {
|
|
|
16
17
|
necessaryOnly: "Necessary only",
|
|
17
18
|
acceptAll: "Accept all"
|
|
18
19
|
}
|
|
19
|
-
},
|
|
20
|
+
}, P = {
|
|
20
21
|
title: "Manage your preferences",
|
|
21
22
|
description: "You can find all the information in the <linkCookieStatement>Cookie Statement</linkCookieStatement> and <linkCookieTechList>Cookie technology list</linkCookieTechList>.",
|
|
22
23
|
all: {
|
|
@@ -44,11 +45,10 @@ const O = {
|
|
|
44
45
|
ariaLabel: ""
|
|
45
46
|
}
|
|
46
47
|
}
|
|
47
|
-
},
|
|
48
|
-
banner:
|
|
49
|
-
preferencesManagement:
|
|
50
|
-
},
|
|
51
|
-
`, N = "pie-cookie-banner-accept-all", z = "pie-cookie-banner-necessary-only", E = "pie-cookie-banner-manage-prefs", L = "pie-cookie-banner-prefs-saved", R = [
|
|
48
|
+
}, M = {
|
|
49
|
+
banner: S,
|
|
50
|
+
preferencesManagement: P
|
|
51
|
+
}, N = "pie-cookie-banner-accept-all", z = "pie-cookie-banner-necessary-only", E = "pie-cookie-banner-manage-prefs", L = "pie-cookie-banner-prefs-saved", R = [
|
|
52
52
|
{
|
|
53
53
|
id: "all",
|
|
54
54
|
hasDivider: !0,
|
|
@@ -72,7 +72,13 @@ const O = {
|
|
|
72
72
|
id: "personalized",
|
|
73
73
|
hasDescription: !0
|
|
74
74
|
}
|
|
75
|
-
]
|
|
75
|
+
], h = {
|
|
76
|
+
hasPrimaryActionsOnly: !1,
|
|
77
|
+
defaultPreferences: {},
|
|
78
|
+
locale: M,
|
|
79
|
+
cookieStatementLink: "",
|
|
80
|
+
cookieTechnologiesLink: ""
|
|
81
|
+
};
|
|
76
82
|
function y(a) {
|
|
77
83
|
console.error(`[localisation-utils]: ${a}`);
|
|
78
84
|
}
|
|
@@ -127,13 +133,7 @@ var F = Object.defineProperty, V = Object.getOwnPropertyDescriptor, d = (a, e, n
|
|
|
127
133
|
(r = a[o]) && (t = (i ? r(e, n, t) : r(t)) || t);
|
|
128
134
|
return i && t && F(e, n, t), t;
|
|
129
135
|
};
|
|
130
|
-
const
|
|
131
|
-
hasPrimaryActionsOnly: !1,
|
|
132
|
-
defaultPreferences: {},
|
|
133
|
-
locale: P,
|
|
134
|
-
cookieStatementLink: "",
|
|
135
|
-
cookieTechnologiesLink: ""
|
|
136
|
-
}, I = "pie-cookie-banner";
|
|
136
|
+
const I = "pie-cookie-banner";
|
|
137
137
|
class c extends $ {
|
|
138
138
|
constructor() {
|
|
139
139
|
super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = h.hasPrimaryActionsOnly, this.defaultPreferences = h.defaultPreferences, this.locale = h.locale, this.cookieStatementLink = h.cookieStatementLink, this.cookieTechnologiesLink = h.cookieTechnologiesLink, this._customTagEnhancers = {
|
|
@@ -237,9 +237,7 @@ class c extends $ {
|
|
|
237
237
|
render() {
|
|
238
238
|
const e = {
|
|
239
239
|
text: this._localiseText("preferencesManagement.cta.save.label"),
|
|
240
|
-
variant: "primary",
|
|
241
240
|
ariaLabel: this._localiseText("preferencesManagement.cta.save.label")
|
|
242
|
-
// TODO: Replace with the appropriate "ariaLabel" as soon as the spreadsheet is updated
|
|
243
241
|
};
|
|
244
242
|
return s`
|
|
245
243
|
<pie-modal
|
|
@@ -248,7 +246,7 @@ class c extends $ {
|
|
|
248
246
|
hasStackedActions
|
|
249
247
|
isFullWidthBelowMid
|
|
250
248
|
heading="${this._localiseText("preferencesManagement.title")}"
|
|
251
|
-
.leadingAction
|
|
249
|
+
.leadingAction=${e}
|
|
252
250
|
@pie-modal-leading-action-click="${this._handlePreferencesSaved}"
|
|
253
251
|
@pie-modal-back="${this._displayCookieBanner}">
|
|
254
252
|
${this.renderModalContent()}
|
|
@@ -288,7 +286,7 @@ class c extends $ {
|
|
|
288
286
|
</aside>`;
|
|
289
287
|
}
|
|
290
288
|
}
|
|
291
|
-
c.styles = B(
|
|
289
|
+
c.styles = B(O);
|
|
292
290
|
d([
|
|
293
291
|
m()
|
|
294
292
|
], c.prototype, "_isCookieBannerHidden", 2);
|
package/dist/react.d.ts
CHANGED
package/dist/react.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
2
|
import { createComponent as o } from "@lit/react";
|
|
3
3
|
import { PieCookieBanner as n } from "./index.js";
|
|
4
|
-
import { ON_COOKIE_BANNER_ACCEPT_ALL as A, ON_COOKIE_BANNER_MANAGE_PREFS as f, ON_COOKIE_BANNER_NECESSARY_ONLY as l, ON_COOKIE_BANNER_PREFS_SAVED as R,
|
|
4
|
+
import { ON_COOKIE_BANNER_ACCEPT_ALL as A, ON_COOKIE_BANNER_MANAGE_PREFS as f, ON_COOKIE_BANNER_NECESSARY_ONLY as l, ON_COOKIE_BANNER_PREFS_SAVED as R, defaultProps as S, preferences as b } from "./index.js";
|
|
5
5
|
import "lit";
|
|
6
6
|
import "lit/decorators.js";
|
|
7
7
|
import "lit/directives/repeat.js";
|
|
@@ -27,12 +27,13 @@ const r = o({
|
|
|
27
27
|
onPieCookieBannerPrefsSaved: "pie-cookie-banner-prefs-saved"
|
|
28
28
|
// when a user clicks save preferences.
|
|
29
29
|
}
|
|
30
|
-
}),
|
|
30
|
+
}), k = r;
|
|
31
31
|
export {
|
|
32
32
|
A as ON_COOKIE_BANNER_ACCEPT_ALL,
|
|
33
33
|
f as ON_COOKIE_BANNER_MANAGE_PREFS,
|
|
34
34
|
l as ON_COOKIE_BANNER_NECESSARY_ONLY,
|
|
35
35
|
R as ON_COOKIE_BANNER_PREFS_SAVED,
|
|
36
|
-
|
|
37
|
-
S as
|
|
36
|
+
k as PieCookieBanner,
|
|
37
|
+
S as defaultProps,
|
|
38
|
+
b as preferences
|
|
38
39
|
};
|
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.
|
|
4
|
+
"version": "0.24.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -38,17 +38,18 @@
|
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
40
40
|
"@justeat/pie-design-tokens": "6.3.1",
|
|
41
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
41
|
+
"@justeattakeaway/pie-components-config": "0.17.0",
|
|
42
|
+
"@justeattakeaway/pie-css": "0.12.1",
|
|
42
43
|
"@justeattakeaway/pie-wrapper-react": "0.14.1",
|
|
43
44
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
44
45
|
},
|
|
45
46
|
"dependencies": {
|
|
46
|
-
"@justeattakeaway/pie-button": "0.48.
|
|
47
|
-
"@justeattakeaway/pie-divider": "0.13.
|
|
48
|
-
"@justeattakeaway/pie-icon-button": "0.28.
|
|
49
|
-
"@justeattakeaway/pie-link": "0.17.
|
|
50
|
-
"@justeattakeaway/pie-modal": "0.
|
|
51
|
-
"@justeattakeaway/pie-switch": "0.29.
|
|
47
|
+
"@justeattakeaway/pie-button": "0.48.1",
|
|
48
|
+
"@justeattakeaway/pie-divider": "0.13.8",
|
|
49
|
+
"@justeattakeaway/pie-icon-button": "0.28.10",
|
|
50
|
+
"@justeattakeaway/pie-link": "0.17.8",
|
|
51
|
+
"@justeattakeaway/pie-modal": "0.45.0",
|
|
52
|
+
"@justeattakeaway/pie-switch": "0.29.12",
|
|
52
53
|
"@justeattakeaway/pie-webc-core": "0.24.0"
|
|
53
54
|
},
|
|
54
55
|
"volta": {
|
package/src/defs.ts
CHANGED
|
@@ -4,6 +4,8 @@ import {
|
|
|
4
4
|
TemplateResult,
|
|
5
5
|
} from 'lit';
|
|
6
6
|
|
|
7
|
+
import defaultLocale from '../locales/en-gb.json' assert { type: 'json' };
|
|
8
|
+
|
|
7
9
|
export interface CookieBannerLocale {
|
|
8
10
|
banner: {
|
|
9
11
|
title: string;
|
|
@@ -144,3 +146,11 @@ export interface CustomTagEnhancers {
|
|
|
144
146
|
}
|
|
145
147
|
|
|
146
148
|
export type DefaultProps = ComponentDefaultProps<CookieBannerProps>;
|
|
149
|
+
|
|
150
|
+
export const defaultProps: DefaultProps = {
|
|
151
|
+
hasPrimaryActionsOnly: false,
|
|
152
|
+
defaultPreferences: {},
|
|
153
|
+
locale: defaultLocale,
|
|
154
|
+
cookieStatementLink: '',
|
|
155
|
+
cookieTechnologiesLink: '',
|
|
156
|
+
};
|
package/src/index.ts
CHANGED
|
@@ -15,8 +15,6 @@ import { PieSwitch } from '@justeattakeaway/pie-switch';
|
|
|
15
15
|
import { defineCustomElement, dispatchCustomEvent } from '@justeattakeaway/pie-webc-core';
|
|
16
16
|
/* eslint-enable import/no-duplicates */
|
|
17
17
|
|
|
18
|
-
import defaultLocale from '../locales/en-gb.json';
|
|
19
|
-
|
|
20
18
|
import styles from './cookie-banner.scss?inline';
|
|
21
19
|
import {
|
|
22
20
|
CookieBannerProps,
|
|
@@ -24,12 +22,12 @@ import {
|
|
|
24
22
|
ON_COOKIE_BANNER_NECESSARY_ONLY,
|
|
25
23
|
ON_COOKIE_BANNER_MANAGE_PREFS,
|
|
26
24
|
ON_COOKIE_BANNER_PREFS_SAVED,
|
|
25
|
+
defaultProps,
|
|
27
26
|
preferences,
|
|
28
27
|
type Preference,
|
|
29
28
|
type PreferenceIds,
|
|
30
29
|
type CookieBannerLocale,
|
|
31
30
|
type CustomTagEnhancers,
|
|
32
|
-
DefaultProps,
|
|
33
31
|
} from './defs';
|
|
34
32
|
|
|
35
33
|
import { localiseText, localiseRichText } from './localisation-utils';
|
|
@@ -37,17 +35,6 @@ import { localiseText, localiseRichText } from './localisation-utils';
|
|
|
37
35
|
// Valid values available to consumers
|
|
38
36
|
export * from './defs';
|
|
39
37
|
|
|
40
|
-
// TODO: Move this object to defs.ts
|
|
41
|
-
// It can be moved as soon as we manage to figure a safe way to avoid the error TS2821
|
|
42
|
-
// Import assertions are only supported when the '--module' option is set to 'esnext' or 'nodenext'
|
|
43
|
-
export const defaultProps: DefaultProps = {
|
|
44
|
-
hasPrimaryActionsOnly: false,
|
|
45
|
-
defaultPreferences: {},
|
|
46
|
-
locale: defaultLocale,
|
|
47
|
-
cookieStatementLink: '',
|
|
48
|
-
cookieTechnologiesLink: '',
|
|
49
|
-
};
|
|
50
|
-
|
|
51
38
|
const componentSelector = 'pie-cookie-banner';
|
|
52
39
|
|
|
53
40
|
/**
|
|
@@ -229,10 +216,9 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
229
216
|
}
|
|
230
217
|
|
|
231
218
|
render () {
|
|
232
|
-
const
|
|
219
|
+
const modalLeadingActionProps = {
|
|
233
220
|
text: this._localiseText('preferencesManagement.cta.save.label'),
|
|
234
|
-
|
|
235
|
-
ariaLabel: this._localiseText('preferencesManagement.cta.save.label'), // TODO: Replace with the appropriate "ariaLabel" as soon as the spreadsheet is updated
|
|
221
|
+
ariaLabel: this._localiseText('preferencesManagement.cta.save.label'),
|
|
236
222
|
};
|
|
237
223
|
|
|
238
224
|
return html`
|
|
@@ -242,7 +228,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
242
228
|
hasStackedActions
|
|
243
229
|
isFullWidthBelowMid
|
|
244
230
|
heading="${this._localiseText('preferencesManagement.title')}"
|
|
245
|
-
.leadingAction
|
|
231
|
+
.leadingAction=${modalLeadingActionProps}
|
|
246
232
|
@pie-modal-leading-action-click="${this._handlePreferencesSaved}"
|
|
247
233
|
@pie-modal-back="${this._displayCookieBanner}">
|
|
248
234
|
${this.renderModalContent()}
|