@justeattakeaway/pie-cookie-banner 0.7.0 → 0.9.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 +5 -61
- package/dist/index.d.ts +5 -0
- package/dist/index.js +41 -38
- package/dist/react.d.ts +5 -0
- package/package.json +6 -6
- package/src/defs.ts +9 -6
- package/src/index.ts +5 -2
package/README.md
CHANGED
|
@@ -14,9 +14,8 @@
|
|
|
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. [Testing](#testing)
|
|
17
|
+
5. [Props](#props)
|
|
18
|
+
6. [Contributing](#contributing)
|
|
20
19
|
|
|
21
20
|
|
|
22
21
|
## pie-cookie-banner
|
|
@@ -57,36 +56,11 @@ import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner/dist/react';
|
|
|
57
56
|
> [!IMPORTANT]
|
|
58
57
|
> When using `pie-cookie-banner`, 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.
|
|
59
58
|
|
|
60
|
-
|
|
61
|
-
## Local development
|
|
62
|
-
|
|
63
|
-
Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
|
|
64
|
-
|
|
65
|
-
```bash
|
|
66
|
-
yarn
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
To build the `pie-cookie-banner` package, run the following command:
|
|
70
|
-
|
|
71
|
-
```bash
|
|
72
|
-
yarn build --filter=pie-cookie-banner
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
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:
|
|
76
|
-
|
|
77
|
-
```bash
|
|
78
|
-
yarn watch --filter=pie-cookie-banner
|
|
79
|
-
|
|
80
|
-
# in a separate terminal tab, run
|
|
81
|
-
yarn dev --filter=pie-storybook
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
|
|
85
59
|
## Props
|
|
86
60
|
|
|
87
61
|
| Property | Type | Default | Description |
|
|
88
62
|
|---|---|---|---|
|
|
89
|
-
|
|
|
63
|
+
| hasPrimaryActionsOnly | `Boolean` | `false` | When true, sets the variant to "primary" for the button which accepts necessary cookies only. |
|
|
90
64
|
|
|
91
65
|
In your markup or JSX, you can then use these to set the properties for the `pie-cookie-banner` component:
|
|
92
66
|
|
|
@@ -98,36 +72,6 @@ In your markup or JSX, you can then use these to set the properties for the `pie
|
|
|
98
72
|
<PieCookieBanner></PieCookieBanner>
|
|
99
73
|
```
|
|
100
74
|
|
|
101
|
-
##
|
|
102
|
-
|
|
103
|
-
### Browser tests
|
|
104
|
-
|
|
105
|
-
To run the browser tests, run the following command from the root of the monorepo:
|
|
75
|
+
## Contributing
|
|
106
76
|
|
|
107
|
-
|
|
108
|
-
yarn test:browsers --filter=pie-cookie-banner
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
### Visual tests
|
|
112
|
-
|
|
113
|
-
To run the visual regression tests, run the following command from the root of the monorepo:
|
|
114
|
-
|
|
115
|
-
```bash
|
|
116
|
-
yarn test:visual --filter=pie-cookie-banner
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
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.
|
|
120
|
-
|
|
121
|
-
#### Setup via bash
|
|
122
|
-
|
|
123
|
-
```bash
|
|
124
|
-
export PERCY_TOKEN_PIE_COOKIE_BANNER=abcde
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
#### Setup via package.json
|
|
128
|
-
|
|
129
|
-
Under scripts `test:visual` replace the environment variable with the below:
|
|
130
|
-
|
|
131
|
-
```bash
|
|
132
|
-
PERCY_TOKEN_PIE_COOKIE_BANNER=abcde
|
|
133
|
-
```
|
|
77
|
+
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.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 variant to "primary" for the button which accepts necessary cookies only.
|
|
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 variant to "primary" for the button which accepts necessary cookies only.
|
|
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.9.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "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-link": "0.
|
|
36
|
-
"@justeattakeaway/pie-modal": "0.
|
|
37
|
-
"@justeattakeaway/pie-toggle-switch": "0.
|
|
34
|
+
"@justeattakeaway/pie-icon-button": "0.19.0",
|
|
35
|
+
"@justeattakeaway/pie-link": "0.11.0",
|
|
36
|
+
"@justeattakeaway/pie-modal": "0.30.0",
|
|
37
|
+
"@justeattakeaway/pie-toggle-switch": "0.15.0"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@justeattakeaway/pie-webc-core": "0.11.0"
|
package/src/defs.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export interface CookieBannerProps {
|
|
2
|
+
/**
|
|
3
|
+
* When true, sets the variant to "primary" for the button which accepts necessary cookies only.
|
|
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
|