@justeattakeaway/pie-cookie-banner 0.7.0 → 0.8.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 +1 -1
- package/dist/index.d.ts +5 -0
- package/dist/index.js +41 -38
- package/dist/react.d.ts +5 -0
- package/package.json +3 -3
- package/src/defs.ts +9 -6
- package/src/index.ts +5 -2
package/README.md
CHANGED
|
@@ -86,7 +86,7 @@ yarn dev --filter=pie-storybook
|
|
|
86
86
|
|
|
87
87
|
| Property | Type | Default | Description |
|
|
88
88
|
|---|---|---|---|
|
|
89
|
-
|
|
|
89
|
+
| hasPrimaryActionsOnly | `Boolean` | `false` | When true, sets the "Necessary only" button variant to "primary". |
|
|
90
90
|
|
|
91
91
|
In your markup or JSX, you can then use these to set the properties for the `pie-cookie-banner` component:
|
|
92
92
|
|
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,10 @@ import { PieToggleSwitch } from '@justeattakeaway/pie-toggle-switch';
|
|
|
4
4
|
import type { TemplateResult } from 'lit';
|
|
5
5
|
|
|
6
6
|
export declare interface CookieBannerProps {
|
|
7
|
+
/**
|
|
8
|
+
* When true, sets the "Necessary only" button variant to "primary".
|
|
9
|
+
*/
|
|
10
|
+
hasPrimaryActionsOnly: boolean;
|
|
7
11
|
}
|
|
8
12
|
|
|
9
13
|
/**
|
|
@@ -44,6 +48,7 @@ export declare const ON_COOKIE_BANNER_PREFS_SAVED = "pie-cookie-banner-prefs-sav
|
|
|
44
48
|
export declare class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
45
49
|
private _isCookieBannerHidden;
|
|
46
50
|
private _isModalOpen;
|
|
51
|
+
hasPrimaryActionsOnly: boolean;
|
|
47
52
|
_preferencesNodes: NodeListOf<PieToggleSwitch>;
|
|
48
53
|
/**
|
|
49
54
|
* Handles closing the modal and re-displaying the cookie banner
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { unsafeCSS as p, LitElement as g, html as
|
|
2
|
-
import { state as h,
|
|
3
|
-
import { repeat as
|
|
4
|
-
function
|
|
1
|
+
import { unsafeCSS as p, LitElement as g, html as c, nothing as l } from "lit";
|
|
2
|
+
import { state as h, property as f, queryAll as b } from "lit/decorators.js";
|
|
3
|
+
import { repeat as k } from "lit/directives/repeat.js";
|
|
4
|
+
function u(o, e) {
|
|
5
5
|
customElements.get(o) ? console.warn(`PIE Web Component: "${o}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(o, e);
|
|
6
6
|
}
|
|
7
|
-
const
|
|
8
|
-
`,
|
|
7
|
+
const v = `*{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:var(--dt-spacing-e)}.c-cookieBanner-preference p{margin-block-start:var(--dt-spacing-b)}.c-cookieBanner-preference:last-child{margin-block-end:0}
|
|
8
|
+
`, m = "pie-cookie-banner-accept-all", y = "pie-cookie-banner-necessary-only", _ = "pie-cookie-banner-manage-prefs", B = "pie-cookie-banner-prefs-saved", w = [
|
|
9
9
|
{
|
|
10
10
|
id: "all",
|
|
11
11
|
title: "Turn on all",
|
|
@@ -34,15 +34,15 @@ const u = `*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactiv
|
|
|
34
34
|
description: "These marketing cookies are used to tailor the delivery of information to you based upon your interest and to measure the effectiveness of such advertisements, both on our website and our advertising partners' websites."
|
|
35
35
|
}
|
|
36
36
|
];
|
|
37
|
-
var
|
|
38
|
-
for (var i = n > 1 ? void 0 : n ?
|
|
39
|
-
(
|
|
40
|
-
return n && i &&
|
|
37
|
+
var C = Object.defineProperty, x = Object.getOwnPropertyDescriptor, d = (o, e, t, n) => {
|
|
38
|
+
for (var i = n > 1 ? void 0 : n ? x(e, t) : e, a = o.length - 1, s; a >= 0; a--)
|
|
39
|
+
(s = o[a]) && (i = (n ? s(e, t, i) : s(i)) || i);
|
|
40
|
+
return n && i && C(e, t, i), i;
|
|
41
41
|
};
|
|
42
|
-
const
|
|
43
|
-
class
|
|
42
|
+
const O = "pie-cookie-banner";
|
|
43
|
+
class r extends g {
|
|
44
44
|
constructor() {
|
|
45
|
-
super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this._dispatchCookieBannerCustomEvent = (e, t) => {
|
|
45
|
+
super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = !1, this._dispatchCookieBannerCustomEvent = (e, t) => {
|
|
46
46
|
const n = new CustomEvent(e, {
|
|
47
47
|
bubbles: !0,
|
|
48
48
|
composed: !0,
|
|
@@ -50,11 +50,11 @@ class c extends g {
|
|
|
50
50
|
});
|
|
51
51
|
this.dispatchEvent(n);
|
|
52
52
|
}, this._onNecessaryOnly = () => {
|
|
53
|
-
this._dispatchCookieBannerCustomEvent(
|
|
53
|
+
this._dispatchCookieBannerCustomEvent(y), this._isCookieBannerHidden = !0;
|
|
54
54
|
}, this._onAcceptAll = () => {
|
|
55
|
-
this._dispatchCookieBannerCustomEvent(
|
|
55
|
+
this._dispatchCookieBannerCustomEvent(m), this._isCookieBannerHidden = !0;
|
|
56
56
|
}, this._openManagePreferencesModal = () => {
|
|
57
|
-
this._isCookieBannerHidden = !0, this._dispatchCookieBannerCustomEvent(
|
|
57
|
+
this._isCookieBannerHidden = !0, this._dispatchCookieBannerCustomEvent(_), this._isModalOpen = !0;
|
|
58
58
|
}, this._handleToggleStates = (e) => {
|
|
59
59
|
const { id: t } = e == null ? void 0 : e.currentTarget, n = [...this._preferencesNodes].find(({ id: i }) => i === "all");
|
|
60
60
|
if (t === n.id) {
|
|
@@ -86,7 +86,7 @@ class c extends g {
|
|
|
86
86
|
let e = {};
|
|
87
87
|
[...this._preferencesNodes].filter(({ id: t }) => t !== "all").forEach(({ id: t, isChecked: n }) => {
|
|
88
88
|
e = { ...e, [t]: n };
|
|
89
|
-
}), this._dispatchCookieBannerCustomEvent(
|
|
89
|
+
}), this._dispatchCookieBannerCustomEvent(B, e), this._isModalOpen = !1, this._isCookieBannerHidden = !0;
|
|
90
90
|
}
|
|
91
91
|
/**
|
|
92
92
|
* Renders the content of the preference item.
|
|
@@ -98,13 +98,13 @@ class c extends g {
|
|
|
98
98
|
description: n,
|
|
99
99
|
isChecked: i,
|
|
100
100
|
isDisabled: a,
|
|
101
|
-
hasDivider:
|
|
101
|
+
hasDivider: s
|
|
102
102
|
}) {
|
|
103
|
-
return
|
|
103
|
+
return c`
|
|
104
104
|
<div class="c-cookieBanner-preference">
|
|
105
105
|
<div>
|
|
106
106
|
<h3 class="c-cookieBanner-subheading">${t}</h3>
|
|
107
|
-
${n ?
|
|
107
|
+
${n ? c`<p class="c-cookieBanner-description">${n}</p>` : l}
|
|
108
108
|
</div>
|
|
109
109
|
<pie-toggle-switch
|
|
110
110
|
id="${e}"
|
|
@@ -112,20 +112,20 @@ class c extends g {
|
|
|
112
112
|
?isDisabled="${a}"
|
|
113
113
|
@pie-toggle-switch-changed="${this._handleToggleStates}"/>
|
|
114
114
|
</div>
|
|
115
|
-
${
|
|
115
|
+
${s ? c`<pie-divider></pie-divider>` : l}`;
|
|
116
116
|
}
|
|
117
117
|
/**
|
|
118
118
|
* Renders the modal content.
|
|
119
119
|
* @private
|
|
120
120
|
*/
|
|
121
121
|
renderModalContent() {
|
|
122
|
-
return
|
|
122
|
+
return c`
|
|
123
123
|
<p class="c-cookieBanner-description">You can find all the information in the
|
|
124
124
|
<pie-link href="#" size="small" target="_blank">Cookie Statement</pie-link> and
|
|
125
125
|
<pie-link href="#" size="small" target="_blank">Cookie technology list</pie-link>.
|
|
126
126
|
</p>
|
|
127
|
-
${
|
|
128
|
-
|
|
127
|
+
${k(
|
|
128
|
+
w,
|
|
129
129
|
({ id: e }) => e,
|
|
130
130
|
(e) => this.renderPreference(e)
|
|
131
131
|
)}`;
|
|
@@ -136,7 +136,7 @@ class c extends g {
|
|
|
136
136
|
variant: "primary",
|
|
137
137
|
ariaLabel: "Save your cookie preferences"
|
|
138
138
|
};
|
|
139
|
-
return
|
|
139
|
+
return c`
|
|
140
140
|
<pie-modal
|
|
141
141
|
.isOpen="${this._isModalOpen}"
|
|
142
142
|
hasBackButton
|
|
@@ -171,7 +171,7 @@ class c extends g {
|
|
|
171
171
|
<pie-button
|
|
172
172
|
data-test-id="actions-necessary-only"
|
|
173
173
|
@click="${this._onNecessaryOnly}"
|
|
174
|
-
variant="outline-inverse"
|
|
174
|
+
variant="${this.hasPrimaryActionsOnly ? "primary" : "outline-inverse"}"
|
|
175
175
|
isFullWidth
|
|
176
176
|
size="small-expressive">
|
|
177
177
|
Necessary only
|
|
@@ -188,22 +188,25 @@ class c extends g {
|
|
|
188
188
|
</aside>`;
|
|
189
189
|
}
|
|
190
190
|
}
|
|
191
|
-
|
|
191
|
+
r.styles = p(v);
|
|
192
192
|
d([
|
|
193
193
|
h()
|
|
194
|
-
],
|
|
194
|
+
], r.prototype, "_isCookieBannerHidden", 2);
|
|
195
195
|
d([
|
|
196
196
|
h()
|
|
197
|
-
],
|
|
197
|
+
], r.prototype, "_isModalOpen", 2);
|
|
198
|
+
d([
|
|
199
|
+
f({ type: Boolean })
|
|
200
|
+
], r.prototype, "hasPrimaryActionsOnly", 2);
|
|
198
201
|
d([
|
|
199
|
-
|
|
200
|
-
],
|
|
201
|
-
|
|
202
|
+
b("pie-toggle-switch")
|
|
203
|
+
], r.prototype, "_preferencesNodes", 2);
|
|
204
|
+
u(O, r);
|
|
202
205
|
export {
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
206
|
+
m as ON_COOKIE_BANNER_ACCEPT_ALL,
|
|
207
|
+
_ as ON_COOKIE_BANNER_MANAGE_PREFS,
|
|
208
|
+
y as ON_COOKIE_BANNER_NECESSARY_ONLY,
|
|
209
|
+
B as ON_COOKIE_BANNER_PREFS_SAVED,
|
|
210
|
+
r as PieCookieBanner,
|
|
211
|
+
w as preferences
|
|
209
212
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -6,6 +6,10 @@ import type { ReactWebComponent } from '@lit-labs/react';
|
|
|
6
6
|
import type { TemplateResult } from 'lit';
|
|
7
7
|
|
|
8
8
|
export declare interface CookieBannerProps {
|
|
9
|
+
/**
|
|
10
|
+
* When true, sets the "Necessary only" button variant to "primary".
|
|
11
|
+
*/
|
|
12
|
+
hasPrimaryActionsOnly: boolean;
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
/**
|
|
@@ -53,6 +57,7 @@ export declare const PieCookieBanner: ReactWebComponent<PieCookieBanner_2, {
|
|
|
53
57
|
declare class PieCookieBanner_2 extends LitElement implements CookieBannerProps {
|
|
54
58
|
private _isCookieBannerHidden;
|
|
55
59
|
private _isModalOpen;
|
|
60
|
+
hasPrimaryActionsOnly: boolean;
|
|
56
61
|
_preferencesNodes: NodeListOf<PieToggleSwitch>;
|
|
57
62
|
/**
|
|
58
63
|
* Handles closing the modal and re-displaying the cookie banner
|
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.8.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -29,11 +29,11 @@
|
|
|
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.34.0",
|
|
33
33
|
"@justeattakeaway/pie-components-config": "0.4.0",
|
|
34
34
|
"@justeattakeaway/pie-icon-button": "0.18.0",
|
|
35
35
|
"@justeattakeaway/pie-link": "0.10.0",
|
|
36
|
-
"@justeattakeaway/pie-modal": "0.
|
|
36
|
+
"@justeattakeaway/pie-modal": "0.29.0",
|
|
37
37
|
"@justeattakeaway/pie-toggle-switch": "0.14.0"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
package/src/defs.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export interface CookieBannerProps {
|
|
2
|
+
/**
|
|
3
|
+
* When true, sets the "Necessary only" button variant to "primary".
|
|
4
|
+
*/
|
|
5
|
+
hasPrimaryActionsOnly: boolean;
|
|
6
|
+
}
|
|
4
7
|
|
|
5
8
|
/**
|
|
6
9
|
* Event name for when all cookies are accepted.
|
|
@@ -36,9 +39,9 @@ export interface Preference {
|
|
|
36
39
|
id: PreferenceIds;
|
|
37
40
|
title: string;
|
|
38
41
|
description?: string;
|
|
39
|
-
isDisabled?: boolean
|
|
40
|
-
isChecked?: boolean
|
|
41
|
-
hasDivider?: boolean
|
|
42
|
+
isDisabled?: boolean;
|
|
43
|
+
isChecked?: boolean;
|
|
44
|
+
hasDivider?: boolean;
|
|
42
45
|
}
|
|
43
46
|
|
|
44
47
|
export const preferences: Preference[] = [
|
package/src/index.ts
CHANGED
|
@@ -2,7 +2,7 @@ import {
|
|
|
2
2
|
LitElement, html, unsafeCSS, TemplateResult, nothing,
|
|
3
3
|
} from 'lit';
|
|
4
4
|
import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
5
|
-
import { state, queryAll } from 'lit/decorators.js';
|
|
5
|
+
import { property, state, queryAll } from 'lit/decorators.js';
|
|
6
6
|
import { repeat } from 'lit/directives/repeat.js';
|
|
7
7
|
import { PieToggleSwitch } from '@justeattakeaway/pie-toggle-switch';
|
|
8
8
|
import styles from './cookie-banner.scss?inline';
|
|
@@ -36,6 +36,9 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
36
36
|
@state()
|
|
37
37
|
private _isModalOpen = false;
|
|
38
38
|
|
|
39
|
+
@property({ type: Boolean })
|
|
40
|
+
public hasPrimaryActionsOnly = false;
|
|
41
|
+
|
|
39
42
|
@queryAll('pie-toggle-switch')
|
|
40
43
|
_preferencesNodes!: NodeListOf<PieToggleSwitch>;
|
|
41
44
|
|
|
@@ -223,7 +226,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
223
226
|
<pie-button
|
|
224
227
|
data-test-id="actions-necessary-only"
|
|
225
228
|
@click="${this._onNecessaryOnly}"
|
|
226
|
-
variant="outline-inverse"
|
|
229
|
+
variant="${this.hasPrimaryActionsOnly ? 'primary' : 'outline-inverse'}"
|
|
227
230
|
isFullWidth
|
|
228
231
|
size="small-expressive">
|
|
229
232
|
Necessary only
|