@justeattakeaway/pie-cookie-banner 0.17.4 → 0.17.6
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 +13 -1
- package/dist/index.js +9 -9
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
3. [Importing the component](#importing-the-component)
|
|
16
16
|
4. [Peer Dependencies](#peer-dependencies)
|
|
17
17
|
5. [Props](#props)
|
|
18
|
-
6. [
|
|
18
|
+
6. [Events](#events)
|
|
19
|
+
7. [Contributing](#contributing)
|
|
19
20
|
|
|
20
21
|
|
|
21
22
|
## pie-cookie-banner
|
|
@@ -80,6 +81,17 @@ import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner/dist/react';
|
|
|
80
81
|
| cookieTechnologiesLink | `String` | `''` | Allows a url to be passed for the cookie technology link. |
|
|
81
82
|
| defaultPreferences | `Object` | `{}` | Allows default preferences to be passed in by the consumer`{ 'functional': true, 'personalized': true, 'analytical': true }` or `{ 'functional': true }`. |
|
|
82
83
|
|
|
84
|
+
## Events
|
|
85
|
+
|
|
86
|
+
The pie cookie banner does not directly establish cookies within the application or component. Instead, it offers events that application developers (consumers of this component) can subscribe to. This, in turn, enables applications to manage the process of setting their own cookies. The table below provides a list of events you can listen to:
|
|
87
|
+
|
|
88
|
+
| Event | Type | Description |
|
|
89
|
+
|-------|------|-------------|
|
|
90
|
+
| `pie-cookie-banner-accept-all` | `CustomEvent` | Triggered when `accept all` is clicked. |
|
|
91
|
+
| `pie-cookie-banner-necessary-only` | `CustomEvent` | Triggered when `necessary` is clicked. |
|
|
92
|
+
| `pie-cookie-banner-manage-prefs` | `CustomEvent` | Triggered when `manage prefs` is clicked. |
|
|
93
|
+
| `pie-cookie-banner-prefs-saved` | `CustomEvent` | Triggered when `manage prefs saved` is clicked. |
|
|
94
|
+
|
|
83
95
|
In your markup or JSX, you can then use these to set the properties for the `pie-cookie-banner` component:
|
|
84
96
|
|
|
85
97
|
```html
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
1
|
+
import { unsafeCSS as w, LitElement as B, html as s, nothing as k } from "lit";
|
|
2
2
|
import { state as b, property as h, queryAll as $ } from "lit/decorators.js";
|
|
3
3
|
import { repeat as A } from "lit/directives/repeat.js";
|
|
4
4
|
import "@justeattakeaway/pie-button";
|
|
@@ -8,7 +8,7 @@ import "@justeattakeaway/pie-link";
|
|
|
8
8
|
import "@justeattakeaway/pie-modal";
|
|
9
9
|
import "@justeattakeaway/pie-switch";
|
|
10
10
|
import { defineCustomElement as C, dispatchCustomEvent as f } from "@justeattakeaway/pie-webc-core";
|
|
11
|
-
const T =
|
|
11
|
+
const T = `*,*:after,*:before{box-sizing:inherit}*{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
12
|
`, O = "pie-cookie-banner-accept-all", S = "pie-cookie-banner-necessary-only", M = "pie-cookie-banner-manage-prefs", N = "pie-cookie-banner-prefs-saved", P = [
|
|
13
13
|
{
|
|
14
14
|
id: "all",
|
|
@@ -37,7 +37,7 @@ const T = `*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactiv
|
|
|
37
37
|
function m(a) {
|
|
38
38
|
console.error(`[localisation-utils]: ${a}`);
|
|
39
39
|
}
|
|
40
|
-
function
|
|
40
|
+
function z(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
|
}
|
|
@@ -46,10 +46,10 @@ function y(a, e) {
|
|
|
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 =
|
|
49
|
+
const n = z(a, e);
|
|
50
50
|
return n || (m(`Couldn't find a value for the key "${e}", it will be used as fallback.`), e);
|
|
51
51
|
}
|
|
52
|
-
function
|
|
52
|
+
function E(a) {
|
|
53
53
|
const n = a.map((t) => `(<${t}.*>.*</${t}>)`).join("|");
|
|
54
54
|
return new RegExp(n, "igm");
|
|
55
55
|
}
|
|
@@ -57,7 +57,7 @@ function L(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 = E(n);
|
|
61
61
|
return a.split(i).filter((t) => !!t).map((t) => {
|
|
62
62
|
if (!t.match(i))
|
|
63
63
|
return t;
|
|
@@ -195,9 +195,9 @@ class c extends B {
|
|
|
195
195
|
hasDescription: o
|
|
196
196
|
}) {
|
|
197
197
|
var g;
|
|
198
|
-
const r = this._localiseText(`preferencesManagement.${e}.title`), p = `preferencesManagement.${e}.description`, l = o && this._localiseText(p), _ = ["functional", "personalized", "analytical"].every((
|
|
198
|
+
const r = this._localiseText(`preferencesManagement.${e}.title`), p = `preferencesManagement.${e}.description`, l = o && this._localiseText(p), _ = ["functional", "personalized", "analytical"].every((x) => {
|
|
199
199
|
var u;
|
|
200
|
-
return ((u = this.defaultPreferences) == null ? void 0 : u[
|
|
200
|
+
return ((u = this.defaultPreferences) == null ? void 0 : u[x]) === !0;
|
|
201
201
|
});
|
|
202
202
|
return s`
|
|
203
203
|
<div class="c-cookieBanner-preference">
|
|
@@ -283,7 +283,7 @@ class c extends B {
|
|
|
283
283
|
</aside>`;
|
|
284
284
|
}
|
|
285
285
|
}
|
|
286
|
-
c.styles =
|
|
286
|
+
c.styles = w(T);
|
|
287
287
|
d([
|
|
288
288
|
b()
|
|
289
289
|
], c.prototype, "_isCookieBannerHidden", 2);
|
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.6",
|
|
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.12.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.
|
|
47
|
-
"@justeattakeaway/pie-switch": "0.27.
|
|
48
|
-
"@justeattakeaway/pie-webc-core": "0.19.
|
|
42
|
+
"@justeattakeaway/pie-button": "0.45.6",
|
|
43
|
+
"@justeattakeaway/pie-divider": "0.12.4",
|
|
44
|
+
"@justeattakeaway/pie-icon-button": "0.27.7",
|
|
45
|
+
"@justeattakeaway/pie-link": "0.15.4",
|
|
46
|
+
"@justeattakeaway/pie-modal": "0.40.0",
|
|
47
|
+
"@justeattakeaway/pie-switch": "0.27.3",
|
|
48
|
+
"@justeattakeaway/pie-webc-core": "0.19.1"
|
|
49
49
|
},
|
|
50
50
|
"volta": {
|
|
51
51
|
"extends": "../../../package.json"
|