@justeattakeaway/pie-cookie-banner 0.1.0

package/LICENSE

@@ -0,0 +1,17 @@
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+Copyright (c) Just Eat Takeaway.com
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,106 @@
+<p align="center">
+  <img align="center" src="../../../readme_image.png" height="200" alt="">
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/@justeattakeaway/pie-cookie-banner">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-cookie-banner.svg">
+  </a>
+</p>
+
+# Table of Contents
+
+1. [Introduction](#pie-cookie-banner)
+2. [Local Development](#local-development)
+3. [Importing the component](#importing-the-component)
+4. [Props](#props)
+5. [Testing](#testing)
+
+# pie-cookie-banner
+
+`pie-cookie-banner` is a Web Component built using the Lit library.
+
+This component can be easily integrated into various frontend frameworks and customized through a set of properties.
+
+## Local development
+
+Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
+
+```bash
+yarn
+```
+
+To build the `pie-cookie-banner` package, run the following command:
+
+```bash
+yarn build --filter=pie-cookie-banner
+```
+
+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:
+
+```bash
+yarn watch --filter=pie-cookie-banner
+
+# in a separate terminal tab, run
+yarn dev --filter=pie-storybook
+```
+
+### Importing the component
+
+```js
+// default
+import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner';
+
+// react
+import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner/dist/react';
+```
+
+## Props
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| - | - | - | - |
+
+In your markup or JSX, you can then use these to set the properties for the `pie-cookie-banner` component:
+
+```html
+<!-- Native HTML -->
+<pie-cookie-banner></pie-cookie-banner>
+
+<!-- JSX -->
+<PieCookieBanner></PieCookieBanner>
+```
+
+## Testing
+
+### Browser tests
+
+To run the browser tests, run the following command from the root of the monorepo:
+
+```bash
+yarn test:browsers --filter=pie-cookie-banner
+```
+
+### Visual tests
+
+To run the visual regression tests, run the following command from the root of the monorepo:
+
+```bash
+yarn test:visual --filter=pie-cookie-banner
+```
+
+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.
+
+#### Setup via bash
+
+```bash
+export PERCY_TOKEN_PIE_COOKIE_BANNER=abcde
+```
+
+#### Setup via package.json
+
+Under scripts `test:visual` replace the environment variable with the below:
+
+```bash
+PERCY_TOKEN_PIE_COOKIE_BANNER=abcde
+```

package/declaration.d.ts

@@ -0,0 +1,9 @@
+declare module '*.scss' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.scss?inline' {
+    const content: Record<string, string>;
+    export default content;
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import type { CSSResult } from 'lit';
+import type { LitElement } from 'lit';
+import type { TemplateResult } from 'lit-html';
+
+export declare interface CookieBannerProps {
+}
+
+export declare class PieCookieBanner extends LitElement implements CookieBannerProps {
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,36 @@
+import { unsafeCSS as i, LitElement as n, html as t } from "lit";
+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)}@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-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{width:max-content;margin-inline-start:auto;margin-inline-end:auto}@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-actions>pie-link{margin-inline-start:0;margin-inline-end:0}}
+`, o = "pie-cookie-banner";
+class e extends n {
+  render() {
+    return t`
+        <aside data-test-id="pie-cookie-banner" class="c-cookieBanner">
+            <h2 class="c-cookieBanner-title">Cookies</h2>
+            <div class="c-cookieBanner-body">
+                <p>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 <pie-link variant="inverse">Statement</pie-link>).
+                Necessary cookies are always set. Click <pie-link variant="inverse">Necessary only</pie-link>
+                to continue without accepting more. Click <pie-link variant="inverse">Manage preferences</pie-link>
+                to share your preferences or <pie-link variant="inverse">Accept all</pie-link>.</p>
+            </div>
+
+            <div class="c-cookieBanner-actions">
+                <pie-button variant="primary" isFullWidth="true" size="small-expressive">
+                    Accept all
+                </pie-button>
+                <pie-button variant="outline" isFullWidth="true" size="small-expressive">
+                    Necessary only
+                </pie-button>
+                <pie-link variant="inverse" size="medium" isBold="true">
+                    Manage preferences
+                </pie-link>
+            </div>
+        </aside>`;
+  }
+}
+e.styles = i(a);
+customElements.define(o, e);
+export {
+  e as PieCookieBanner
+};

package/dist/react.d.ts

@@ -0,0 +1,16 @@
+import type { CSSResult } from 'lit';
+import type { LitElement } from 'lit';
+import type { ReactWebComponent } from '@lit-labs/react';
+import type { TemplateResult } from 'lit-html';
+
+export declare interface CookieBannerProps {
+}
+
+export declare const PieCookieBanner: ReactWebComponent<PieCookieBanner_2, {}>;
+
+declare class PieCookieBanner_2 extends LitElement implements CookieBannerProps {
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+export { }

package/dist/react.js

@@ -0,0 +1,67 @@
+import * as C from "react";
+import { PieCookieBanner as E } from "./index.js";
+import "lit";
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const g = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), w = /* @__PURE__ */ new WeakMap(), b = (d, r, m, p, h) => {
+  const i = h == null ? void 0 : h[r];
+  i === void 0 || m === p ? m == null && r in HTMLElement.prototype ? d.removeAttribute(r) : d[r] = m : ((o, t, u) => {
+    let s = w.get(o);
+    s === void 0 && w.set(o, s = /* @__PURE__ */ new Map());
+    let a = s.get(t);
+    u !== void 0 ? a === void 0 ? (s.set(t, a = { handleEvent: u }), o.addEventListener(t, a)) : a.handleEvent = u : a !== void 0 && (s.delete(t), o.removeEventListener(t, a));
+  })(d, i, m);
+};
+function B(d = window.React, r, m, p, h) {
+  let i, o, t;
+  if (r === void 0) {
+    const l = d;
+    ({ tagName: o, elementClass: t, events: p, displayName: h } = l), i = l.react;
+  } else
+    i = d, t = m, o = r;
+  const u = i.Component, s = i.createElement, a = new Set(Object.keys(p ?? {}));
+  class f extends u {
+    constructor() {
+      super(...arguments), this.o = null;
+    }
+    t(e) {
+      if (this.o !== null)
+        for (const v in this.i)
+          b(this.o, v, this.props[v], e ? e[v] : void 0, p);
+    }
+    componentDidMount() {
+      this.t();
+    }
+    componentDidUpdate(e) {
+      this.t(e);
+    }
+    render() {
+      const { _$Gl: e, ...v } = this.props;
+      this.h !== e && (this.u = (n) => {
+        e !== null && ((c, k) => {
+          typeof c == "function" ? c(k) : c.current = k;
+        })(e, n), this.o = n, this.h = e;
+      }), this.i = {};
+      const y = { ref: this.u };
+      for (const [n, c] of Object.entries(v))
+        g.has(n) ? y[n === "className" ? "class" : n] = c : a.has(n) || n in t.prototype ? this.i[n] = c : y[n] = c;
+      return s(o, y);
+    }
+  }
+  f.displayName = h ?? t.name;
+  const N = i.forwardRef((l, e) => s(f, { ...l, _$Gl: e }, l == null ? void 0 : l.children));
+  return N.displayName = f.displayName, N;
+}
+const L = B({
+  displayName: "PieCookieBanner",
+  elementClass: E,
+  react: C,
+  tagName: "pie-cookie-banner",
+  events: {}
+});
+export {
+  L as PieCookieBanner
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@justeattakeaway/pie-cookie-banner",
+  "description": "PIE Design System Cookie Banner built using Web Components",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist",
+    "**/*.d.ts"
+  ],
+  "scripts": {
+    "build": "yarn build:wrapper pie-cookie-banner && run -T vite build",
+    "lint:scripts": "run -T eslint .",
+    "lint:scripts:fix": "yarn lint:scripts --fix",
+    "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
+    "lint:style:fix": "yarn lint:style --fix",
+    "watch": "run -T vite build --watch",
+    "test": "echo \"Error: no test specified\" && exit 0",
+    "test:ci": "yarn test",
+    "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
+    "test:browsers:ci": "yarn test:browsers",
+    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_COOKIE_BANNER} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual:ci": "yarn test:visual"
+  },
+  "author": "JustEatTakeaway.com - Design System Web Team",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@justeattakeaway/pie-button": "0.26.0",
+    "@justeattakeaway/pie-components-config": "0.4.0",
+    "@justeattakeaway/pie-link": "0.3.0"
+  },
+  "dependencies": {
+    "@justeattakeaway/pie-webc-core": "0.8.0"
+  },
+  "volta": {
+    "extends": "../../../package.json"
+  }
+}

package/src/cookie-banner.scss

@@ -0,0 +1,120 @@
+@use '@justeattakeaway/pie-css/scss' as p;
+
+* {
+    margin: 0;
+}
+
+$breakpoint-wide: 700px;
+
+.c-cookieBanner {
+    --cb-font-family: var(--dt-font-interactive-m-family);
+    --cb-font-size: #{p.font-size('--dt-font-body-l-size')};
+    --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; // For Dark mode we will need to switch this to only light
+    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);
+
+
+    @media (min-width: $breakpoint-wide) and (orientation: landscape) {
+        --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-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);
+
+    @include p.font-size(--cb-title-font-size);
+    font-weight: var(--dt-font-heading-s-weight);
+    line-height: calc(var(--cb-title-line-height) * 1px);
+
+    @media (min-width: $breakpoint-wide) and (orientation: landscape) {
+        --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 {
+    // We have to use a color darker than --dt-color-background-dark.
+    // Current the only option is this global token
+    --cb-scroll-shadow-color: var(--dt-color-black);
+
+    margin-block-start: var(--dt-spacing-a);
+    max-height: 200px;
+    overflow-y: auto;
+    background:
+        // Scroll shadow cover
+        // A top-to-bottom opacity gradient from transparent to the component background colour
+        linear-gradient(to bottom, transparent, var(--dt-color-background-dark) 75%) center bottom,
+        // Scroll shadow
+        linear-gradient(transparent, var(--cb-scroll-shadow-color)) center bottom;
+    background-repeat: no-repeat;
+    background-size: 100% 48px, 100% 8px;
+
+    // The shadow cover is an opacity gradient which is attached to the bottom of the scrollable element
+    // and scrolls with it, so as you reach the bottom of the content the more opaque portion covers
+    // (and therefore hides) the shadow. This gives the effect of the shadow fading away.
+    // The shadow itself does not move as you scroll.
+    background-attachment: local, scroll;
+
+    @media (min-width: $breakpoint-wide) and (orientation: landscape) {
+        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);
+
+    > pie-link {
+        width: max-content;
+        margin-inline-start: auto;
+        margin-inline-end: auto;
+    }
+
+    @media (min-width: $breakpoint-wide) and (orientation: landscape) {
+        --cb-actions-flex-dir: row-reverse;
+
+        justify-content: flex-start;
+        align-items: center;
+
+        > pie-link {
+            margin-inline-start: 0;
+            margin-inline-end: 0;
+        }
+    }
+}

package/src/defs.ts

@@ -0,0 +1,3 @@
+// TODO - please remove the eslint disable comment below when you add props to this interface
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface CookieBannerProps {}

package/src/index.ts

@@ -0,0 +1,49 @@
+import { LitElement, html, unsafeCSS } from 'lit';
+
+import styles from './cookie-banner.scss?inline';
+import { CookieBannerProps } from './defs';
+
+// Valid values available to consumers
+export * from './defs';
+
+const componentSelector = 'pie-cookie-banner';
+
+export class PieCookieBanner extends LitElement implements CookieBannerProps {
+    render () {
+        return html`
+        <aside data-test-id="pie-cookie-banner" class="c-cookieBanner">
+            <h2 class="c-cookieBanner-title">Cookies</h2>
+            <div class="c-cookieBanner-body">
+                <p>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 <pie-link variant="inverse">Statement</pie-link>).
+                Necessary cookies are always set. Click <pie-link variant="inverse">Necessary only</pie-link>
+                to continue without accepting more. Click <pie-link variant="inverse">Manage preferences</pie-link>
+                to share your preferences or <pie-link variant="inverse">Accept all</pie-link>.</p>
+            </div>
+
+            <div class="c-cookieBanner-actions">
+                <pie-button variant="primary" isFullWidth="true" size="small-expressive">
+                    Accept all
+                </pie-button>
+                <pie-button variant="outline" isFullWidth="true" size="small-expressive">
+                    Necessary only
+                </pie-button>
+                <pie-link variant="inverse" size="medium" isBold="true">
+                    Manage preferences
+                </pie-link>
+            </div>
+        </aside>`;
+    }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
+}
+
+customElements.define(componentSelector, PieCookieBanner);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieCookieBanner;
+    }
+}