@justeattakeaway/pie-switch 0.16.0

package/README.md

@@ -0,0 +1,79 @@
+<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-switch">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-switch.svg">
+  </a>
+</p>
+
+# Table of Contents
+
+1. [Introduction](#pie-switch)
+2. [Installation](#installation)
+3. [Importing the component](#importing-the-component)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Props](#props)
+6. [Contributing](#contributing)
+
+## pie-switch
+
+`pie-switch` 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.
+
+
+## Installation
+
+To install `pie-switch` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-switch
+
+# yarn
+$ yarn add @justeattakeaway/pie-switch
+```
+
+For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
+
+
+### Importing the component
+
+```js
+// default
+import { PieSwitch } from '@justeattakeaway/pie-switch';
+
+// react
+import { PieSwitch } from '@justeattakeaway/pie-switch/dist/react';
+```
+
+
+## Peer Dependencies
+
+> [!IMPORTANT]
+> When using `pie-switch`, 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.
+
+
+## Props
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| isChecked | `Boolean` | false | Indicates whether the switch is on or off |
+| isDisabled | `Boolean` | false | Indicates whether the switch is disabled or not |
+| aria  | `Object`  | `undefined`  | An object representing the aria labels `label` & `describedBy` that can be used on the switch;
+
+In your markup or JSX, you can then use these to set the properties for the `pie-switch` component:
+
+```html
+<!-- Native HTML -->
+<pie-switch></pie-switch>
+
+<!-- JSX -->
+<PieSwitch></PieSwitch>
+```
+
+## Contributing
+
+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/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,70 @@
+import type { CSSResult } from 'lit';
+import type { LitElement } from 'lit';
+import type { TemplateResult } from 'lit';
+
+export declare type AriaProps = {
+    label?: string;
+    describedBy?: string;
+};
+
+export declare type LabelPlacement = typeof labelPlacements[number];
+
+export declare const labelPlacements: readonly ["leading", "trailing"];
+
+/**
+ * Event name for when the switch checked state is changed.
+ *
+ * @constant
+ */
+export declare const ON_SWITCH_CHANGED_EVENT = "pie-switch-changed";
+
+/**
+ * @tagname pie-switch
+ * @event {CustomEvent} pie-switch-changed - when the switch checked state is changed.
+ */
+export declare class PieSwitch extends PieSwitch_base implements SwitchProps {
+    label?: string;
+    labelPlacement: SwitchProps['labelPlacement'];
+    aria: AriaProps;
+    isChecked: boolean;
+    isDisabled: boolean;
+    static styles: CSSResult;
+    onChange(event: Event): void;
+    /**
+     * Renders the label for a switch if provided.
+     * if invalid value is passed, nothing gets rendered
+     *
+     * @private
+     */
+    private renderSwitchLabel;
+    render(): TemplateResult<1>;
+}
+
+declare const PieSwitch_base: (new (...args: any[]) => {
+    isRTL: boolean;
+}) & typeof LitElement;
+
+export declare interface SwitchProps {
+    /**
+     * The ARIA labels used for the switch.
+     */
+    aria?: AriaProps;
+    /**
+     * Same as the HTML checked attribute - indicates whether the switch is on or off
+     */
+    isChecked?: boolean;
+    /**
+     * Same as the HTML checked attribute - indicates whether the switch disabled or not
+     */
+    isDisabled?: boolean;
+    /**
+     * The label value of the component
+     */
+    label?: string;
+    /**
+     * The placement of the label such as leading or trailing
+     */
+    labelPlacement?: LabelPlacement;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,226 @@
+import { isServer as z, css as I, LitElement as f, html as d, unsafeCSS as P, nothing as l } from "lit";
+import { property as n, query as E } from "lit/decorators.js";
+const _ = (c) => {
+  class e extends c {
+    /**
+     * A getter to determine whether the text direction is right-to-left (RTL).
+     * If the `dir` property is present on the component, it will be used to determine the text direction.
+     * If running on the client-side (not SSR) and the `dir` property is not present, the text direction will be inferred
+     * from the document's root element. This inference is not available during SSR.
+     * In all other cases, it will return `false`, indicating a left-to-right (LTR) text direction.
+     *
+     * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
+     */
+    get isRTL() {
+      return this.dir ? this.dir === "rtl" : !z && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
+    }
+  }
+  return e;
+}, L = (c, e, t) => function(i, s) {
+  const o = `#${s}`;
+  Object.defineProperty(i, s, {
+    get() {
+      return this[o];
+    },
+    set(h) {
+      const C = this[o];
+      e.includes(h) ? this[o] = h : (console.error(
+        `<${c}> Invalid value "${h}" provided for property "${s}".`,
+        `Must be one of: ${e.join(" | ")}.`,
+        `Falling back to default value: "${t}"`
+      ), this[o] = t), this.requestUpdate(s, C);
+    }
+  });
+};
+function S(c, e) {
+  customElements.get(c) ? console.warn(`PIE Web Component: "${c}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(c, e);
+}
+const T = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[isDisabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{background-color:var(--switch-bg-color);box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer)}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[isChecked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[isChecked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[isChecked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[isChecked]:focus,.c-switch[isChecked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[isChecked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[isDisabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{appearance:none;margin:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.c-switch-wrapper[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
+`, O = ["leading", "trailing"], j = "pie-switch-changed";
+function D(c, e) {
+  customElements.get(c) ? console.warn(`PIE Web Component: "${c}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(c, e);
+}
+const b = {
+  xs: 16,
+  s: 20,
+  m: 24,
+  l: 28,
+  xl: 32,
+  xxl: 40
+}, m = Object.keys(b), k = "xs", y = 8, w = 32;
+function R(c, e, t) {
+  const r = parseInt(c, 10), i = r % t === 0;
+  return r >= e && i;
+}
+const x = {
+  large: (c) => R(c, w, y),
+  regular: (c) => m.includes(c)
+};
+function A(c) {
+  const e = x.large(c);
+  return { isValid: e, size: e ? c : w };
+}
+function B(c) {
+  const e = x.regular(c), t = e ? b[c] : b[k];
+  return { isValid: e, size: t };
+}
+const g = (c, e, t, r) => {
+  const i = c.endsWith("Large") || c.endsWith("-large");
+  let s, o;
+  if (t) {
+    if ({ isValid: s, size: o } = i ? A(t) : B(t), !s) {
+      const h = i ? `Invalid prop "size" value supplied to "${r}". The prop value should be a number equal or greater than ${w} and multiple of ${y}.` : `Invalid prop "size" value supplied to "${r}". The prop value should be one of the following values: ${m.join(", ")}.`;
+      console.error(h);
+    }
+  } else
+    o = i ? w : b[k];
+  return {
+    class: [c, e].filter(Boolean).join(" "),
+    width: o,
+    height: o
+  };
+};
+var V = Object.defineProperty, W = Object.getOwnPropertyDescriptor, v = (c, e, t, r) => {
+  for (var i = r > 1 ? void 0 : r ? W(e, t) : e, s = c.length - 1, o; s >= 0; s--)
+    (o = c[s]) && (i = (r ? o(e, t, i) : o(i)) || i);
+  return r && i && V(e, t, i), i;
+};
+const q = "icon-check";
+class p extends f {
+  constructor() {
+    super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--check";
+  }
+  connectedCallback() {
+    var e, t, r;
+    if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
+      const i = g("c-pieIcon c-pieIcon--check", "", null, "IconCheck");
+      (t = this._svg) == null || t.setAttribute("width", i.width), (r = this._svg) == null || r.setAttribute("height", i.height);
+    }
+  }
+  updated(e) {
+    var t, r;
+    let i;
+    e.has("size") && (i = g("c-pieIcon c-pieIcon--check", "", this.size, "IconCheck"), (t = this._svg) == null || t.setAttribute("width", i.width), (r = this._svg) == null || r.setAttribute("height", i.height));
+  }
+  render() {
+    return d`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--check"><path d="M5.865 12.489a1.217 1.217 0 0 1-.875-.385L1.875 8.656l.98-.875 3.028 3.369 7.253-7.822.963.875-7.35 7.875a1.216 1.216 0 0 1-.875.385l-.009.026Z"></path></svg>`;
+  }
+}
+p.styles = I`
+        :host-context(pie-icon-button) svg,
+        :host-context(pie-button) svg {
+            display: block;
+            width: var(--btn-icon-size);
+            height: var(--btn-icon-size);
+        }
+    `;
+v([
+  n({ type: String, reflect: !0 })
+], p.prototype, "size", 2);
+v([
+  n({ type: String, reflect: !0 })
+], p.prototype, "class", 2);
+v([
+  E("svg")
+], p.prototype, "_svg", 2);
+D(q, p);
+var M = Object.defineProperty, N = Object.getOwnPropertyDescriptor, u = (c, e, t, r) => {
+  for (var i = r > 1 ? void 0 : r ? N(e, t) : e, s = c.length - 1, o; s >= 0; s--)
+    (o = c[s]) && (i = (r ? o(e, t, i) : o(i)) || i);
+  return r && i && M(e, t, i), i;
+};
+const $ = "pie-switch";
+class a extends _(f) {
+  constructor() {
+    super(...arguments), this.labelPlacement = "leading", this.isChecked = !1, this.isDisabled = !1;
+  }
+  onChange(e) {
+    const { checked: t } = e == null ? void 0 : e.currentTarget;
+    this.isChecked = t;
+    const r = new CustomEvent(
+      j,
+      {
+        bubbles: !0,
+        composed: !0,
+        detail: this.isChecked
+      }
+    );
+    this.dispatchEvent(r);
+  }
+  /**
+   * Renders the label for a switch if provided.
+   * if invalid value is passed, nothing gets rendered
+   *
+   * @private
+   */
+  renderSwitchLabel() {
+    const { label: e, labelPlacement: t } = this;
+    return e ? d`
+                <label
+                    for="switch"
+                    data-test-id="switch-label-${t}">
+                    ${e}
+                </label>` : d``;
+  }
+  render() {
+    const {
+      labelPlacement: e,
+      aria: t,
+      isChecked: r,
+      isDisabled: i,
+      isRTL: s
+    } = this, o = "switch-description";
+    return d`
+            <div
+                class="c-switch-wrapper"
+                ?isRTL=${s}
+                ?isDisabled=${i}>
+                ${e === "leading" ? this.renderSwitchLabel() : l}
+                <label
+                    data-test-id="switch-component"
+                    class="c-switch"
+                    ?isChecked=${r}>
+                    <input
+                        id="switch"
+                        data-test-id="switch-input"
+                        role="switch"
+                        type="checkbox"
+                        class="c-switch-input"
+                        .checked="${r}"
+                        .disabled="${i}"
+                        @change="${this.onChange}"
+                        aria-label="${(t == null ? void 0 : t.label) || l}"
+                        aria-describedby="${t != null && t.describedBy ? o : l}">
+                    <div class="c-switch-control">
+                        ${r ? d`<icon-check></icon-check>` : l}
+                    </div>
+                </label>
+                ${t != null && t.describedBy ? d`<div id="${o}" data-test-id="${o}" class="c-switch-description">${t == null ? void 0 : t.describedBy}</div>` : l}
+                ${e === "trailing" ? this.renderSwitchLabel() : l}
+            </div>
+        `;
+  }
+}
+a.styles = P(T);
+u([
+  n({ type: String })
+], a.prototype, "label", 2);
+u([
+  n({ type: String }),
+  L($, O, "leading")
+], a.prototype, "labelPlacement", 2);
+u([
+  n({ type: Object })
+], a.prototype, "aria", 2);
+u([
+  n({ type: Boolean, reflect: !0 })
+], a.prototype, "isChecked", 2);
+u([
+  n({ type: Boolean, reflect: !0 })
+], a.prototype, "isDisabled", 2);
+S($, a);
+export {
+  j as ON_SWITCH_CHANGED_EVENT,
+  a as PieSwitch,
+  O as labelPlacements
+};

package/dist/react.d.ts

@@ -0,0 +1,76 @@
+import type { CSSResult } from 'lit';
+import type { EventName } from '@lit-labs/react';
+import type { LitElement } from 'lit';
+import type { ReactWebComponent } from '@lit-labs/react';
+import type { TemplateResult } from 'lit';
+
+export declare type AriaProps = {
+    label?: string;
+    describedBy?: string;
+};
+
+export declare type LabelPlacement = typeof labelPlacements[number];
+
+export declare const labelPlacements: readonly ["leading", "trailing"];
+
+/**
+ * Event name for when the switch checked state is changed.
+ *
+ * @constant
+ */
+export declare const ON_SWITCH_CHANGED_EVENT = "pie-switch-changed";
+
+export declare const PieSwitch: ReactWebComponent<PieSwitch_2, {
+    onPieSwitchChanged: EventName<CustomEvent<any>>;
+}>;
+
+/**
+ * @tagname pie-switch
+ * @event {CustomEvent} pie-switch-changed - when the switch checked state is changed.
+ */
+declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps {
+    label?: string;
+    labelPlacement: SwitchProps['labelPlacement'];
+    aria: AriaProps;
+    isChecked: boolean;
+    isDisabled: boolean;
+    static styles: CSSResult;
+    onChange(event: Event): void;
+    /**
+     * Renders the label for a switch if provided.
+     * if invalid value is passed, nothing gets rendered
+     *
+     * @private
+     */
+    private renderSwitchLabel;
+    render(): TemplateResult<1>;
+}
+
+declare const PieSwitch_base: (new (...args: any[]) => {
+    isRTL: boolean;
+}) & typeof LitElement;
+
+export declare interface SwitchProps {
+    /**
+     * The ARIA labels used for the switch.
+     */
+    aria?: AriaProps;
+    /**
+     * Same as the HTML checked attribute - indicates whether the switch is on or off
+     */
+    isChecked?: boolean;
+    /**
+     * Same as the HTML checked attribute - indicates whether the switch disabled or not
+     */
+    isDisabled?: boolean;
+    /**
+     * The label value of the component
+     */
+    label?: string;
+    /**
+     * The placement of the label such as leading or trailing
+     */
+    labelPlacement?: LabelPlacement;
+}
+
+export { }

package/dist/react.js

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

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@justeattakeaway/pie-switch",
+  "description": "PIE Design System Switch built using Web Components",
+  "version": "0.16.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-switch && 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_SWITCH} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual:ci": "yarn test:visual"
+  },
+  "author": "Just Eat Takeaway.com - Design System Team",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@justeattakeaway/pie-components-config": "0.4.0",
+    "@justeattakeaway/pie-icons-webc": "0.11.1"
+  },
+  "volta": {
+    "extends": "../../../package.json"
+  },
+  "sideEffects": [
+    "dist/*.js"
+  ]
+}

package/src/defs.ts

@@ -0,0 +1,38 @@
+export const labelPlacements = ['leading', 'trailing'] as const;
+
+export type LabelPlacement = typeof labelPlacements[number];
+
+export type AriaProps = {
+    label?: string,
+    describedBy?: string
+};
+
+export interface SwitchProps {
+    /**
+     * The ARIA labels used for the switch.
+     */
+    aria?: AriaProps;
+    /**
+     * Same as the HTML checked attribute - indicates whether the switch is on or off
+     */
+    isChecked?: boolean;
+    /**
+     * Same as the HTML checked attribute - indicates whether the switch disabled or not
+     */
+    isDisabled?: boolean;
+    /**
+     * The label value of the component
+     */
+    label?: string;
+    /**
+     * The placement of the label such as leading or trailing
+     */
+    labelPlacement?: LabelPlacement;
+}
+
+/**
+ * Event name for when the switch checked state is changed.
+ *
+ * @constant
+ */
+export const ON_SWITCH_CHANGED_EVENT = 'pie-switch-changed';

package/src/index.ts

@@ -0,0 +1,125 @@
+import {
+    LitElement, html, unsafeCSS, nothing, TemplateResult,
+} from 'lit';
+import { property } from 'lit/decorators.js';
+import { RtlMixin, validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import styles from './switch.scss?inline';
+import {
+    SwitchProps, ON_SWITCH_CHANGED_EVENT, AriaProps, labelPlacements,
+} from './defs';
+import '@justeattakeaway/pie-icons-webc/IconCheck';
+
+// Valid values available to consumers
+export * from './defs';
+
+const componentSelector = 'pie-switch';
+
+/**
+ * @tagname pie-switch
+ * @event {CustomEvent} pie-switch-changed - when the switch checked state is changed.
+ */
+
+export class PieSwitch extends RtlMixin(LitElement) implements SwitchProps {
+    @property({ type: String })
+    public label?: string;
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, labelPlacements, 'leading')
+    public labelPlacement: SwitchProps['labelPlacement'] = 'leading';
+
+    @property({ type: Object })
+    public aria!: AriaProps;
+
+    @property({ type: Boolean, reflect: true })
+    public isChecked = false;
+
+    @property({ type: Boolean, reflect: true })
+    public isDisabled = false;
+
+    static styles = unsafeCSS(styles);
+
+    onChange (event: Event) {
+        const { checked } = event?.currentTarget as HTMLInputElement;
+        this.isChecked = checked;
+        const changedEvent = new CustomEvent(
+            ON_SWITCH_CHANGED_EVENT,
+            {
+                bubbles: true,
+                composed: true,
+                detail: this.isChecked,
+            },
+        );
+        this.dispatchEvent(changedEvent);
+    }
+
+    /**
+     * Renders the label for a switch if provided.
+     * if invalid value is passed, nothing gets rendered
+     *
+     * @private
+     */
+    private renderSwitchLabel (): TemplateResult {
+        const { label, labelPlacement } = this;
+
+        if (label) {
+            return html`
+                <label
+                    for="switch"
+                    data-test-id="switch-label-${labelPlacement}">
+                    ${label}
+                </label>`;
+        }
+
+        return html``;
+    }
+
+    render () {
+        const {
+            labelPlacement,
+            aria,
+            isChecked,
+            isDisabled,
+            isRTL,
+        } = this;
+
+        const switchId = 'switch-description';
+
+        return html`
+            <div
+                class="c-switch-wrapper"
+                ?isRTL=${isRTL}
+                ?isDisabled=${isDisabled}>
+                ${labelPlacement === 'leading' ? this.renderSwitchLabel() : nothing}
+                <label
+                    data-test-id="switch-component"
+                    class="c-switch"
+                    ?isChecked=${isChecked}>
+                    <input
+                        id="switch"
+                        data-test-id="switch-input"
+                        role="switch"
+                        type="checkbox"
+                        class="c-switch-input"
+                        .checked="${isChecked}"
+                        .disabled="${isDisabled}"
+                        @change="${this.onChange}"
+                        aria-label="${aria?.label || nothing}"
+                        aria-describedby="${aria?.describedBy ? switchId : nothing}">
+                    <div class="c-switch-control">
+                        ${isChecked ? html`<icon-check></icon-check>` : nothing}
+                    </div>
+                </label>
+                ${aria?.describedBy ? html`<div id="${switchId}" data-test-id="${switchId}" class="c-switch-description">${aria?.describedBy}</div>` : nothing}
+                ${labelPlacement === 'trailing' ? this.renderSwitchLabel() : nothing}
+            </div>
+        `;
+    }
+}
+
+defineCustomElement(componentSelector, PieSwitch);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieSwitch;
+    }
+}

package/src/switch.scss

@@ -0,0 +1,148 @@
+@use '@justeat/pie-design-tokens/dist/jet.scss' as dt;
+
+@mixin switch-transition($property) {
+    @media (prefers-reduced-motion: no-preference) {
+        transition: $property 0.15s cubic-bezier(0.4, 0, 0.9, 1) 0s;
+    }
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+    cursor: inherit;
+}
+
+.c-switch-wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--dt-spacing-b);
+    font-family: var(--dt-font-body-l-family);
+    cursor: pointer;
+
+    &[isDisabled] {
+        cursor: not-allowed;
+    }
+}
+
+.c-switch {
+    --switch-bg-color: var(--dt-color-interactive-form);
+    --switch-bg-color--checked: var(--dt-color-interactive-brand);
+    --switch-bg-color--disabled: var(--dt-color-disabled-01);
+    --switch-width: 48px;
+    --switch-height: 24px;
+    --switch-control-size: 20px;
+    --switch-padding: 2px;
+    --switch-radius: var(--dt-radius-rounded-e);
+    --switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));
+
+    position: relative;
+    display: flex;
+    width: var(--switch-width);
+    height: var(--switch-height);
+    flex-shrink: 0;
+    padding: var(--switch-padding);
+    border-radius: var(--switch-radius);
+    background-color: var(--switch-bg-color);
+
+    @include switch-transition(background-color);
+
+    &:hover {
+        background-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)));
+    }
+
+    &:focus,
+    &:focus-within {
+        background-color: var(--switch-bg-color);
+        box-shadow: 0 0 0 2px var(--dt-color-focus-inner), 0 0 0 4px var(--dt-color-focus-outer);
+    }
+
+    &:active {
+        background-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)));
+    }
+
+    &[isChecked] {
+        @include switch-transition(background-color);
+        background-color: var(--switch-bg-color--checked);
+
+        &:hover {
+            background-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)));
+        }
+
+        &:focus,
+        &:focus-within {
+            background-color: var(--switch-bg-color--checked);
+        }
+
+        &:active {
+            background-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)));
+        }
+    }
+
+    [isDisabled] & {
+        background-color: var(--switch-bg-color--disabled);
+        pointer-events: none;
+    }
+}
+
+.c-switch-input {
+    appearance: none;
+    margin: 0;
+
+    &:disabled {
+        background-color: transparent;
+    }
+}
+
+.c-switch-control {
+    position: absolute;
+    left: 2px;
+    @include switch-transition(transform);
+    width: var(--switch-control-size);
+    height: var(--switch-control-size);
+    border-radius: var(--switch-radius);
+    background-color: var(--dt-color-interactive-light);
+    padding: var(--switch-padding);
+
+    .c-switch-input:checked + & {
+        @include switch-transition(transform);
+        transform: translateX(var(--switch-translation));
+
+        .c-pieIcon--check {
+            @include switch-transition(color);
+            color: var(--switch-bg-color--checked);
+        }
+    }
+
+    .c-switch-input:disabled ~ & {
+        color: var(--switch-bg-color--disabled);
+
+        .c-pieIcon--check {
+            @include switch-transition(color);
+            color: var(--switch-bg-color--disabled);
+        }
+    }
+}
+
+// The description is only required for screen readers so we need to visually hide the description
+.c-switch-description {
+    position: absolute;
+    left: -9999px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+.c-switch-wrapper[isRTL] {
+    .c-switch-control {
+        position: absolute;
+        left: initial;
+        right: 2px;
+    }
+
+    .c-switch-input:checked + .c-switch-control {
+        @include switch-transition(transform);
+        transform: translateX(calc(-1 * var(--switch-translation)));
+    }
+}