@justeattakeaway/pie-switch 0.18.4 → 0.19.0

package/README.md

@@ -81,19 +81,25 @@ import { PieSwitch } from '@justeattakeaway/pie-switch/dist/react';
 
 In your markup or JSX, you can then use these to set the properties for the `pie-switch` component:
 
+### HTML
 ```html
-<!-- Native HTML -->
-<pie-switch></pie-switch>
+<pie-switch isChecked isDisabled aria='{ "label": "Helpful label" }'></pie-switch>
+```
+
+### JSX
+```js
+const aria = {
+  label: 'Helpful label',
+};
 
-<!-- JSX -->
-<PieSwitch></PieSwitch>
+<PieSwitch isChecked isDisabled aria={aria}></PieSwitch>
 ```
 
 ## Events
 
 | Event | Payload | Description |
-| ----- |-----| ----- |
-| `pie-switch-changed` | `this.isChecked` | Custom event to indicate a switch change. The event's detail contains the value of this.isChecked.  |
+| --- | --- | --- |
+| `change` | `event.target.checked` | Custom event to indicate a switch change. This event aims to mimic the native `change` event so that consumers can use the component as natively as possible. |
 
 ## Contributing
 

package/dist/index.d.ts

@@ -16,19 +16,29 @@ export declare const labelPlacements: readonly ["leading", "trailing"];
  *
  * @constant
  */
-export declare const ON_SWITCH_CHANGED_EVENT = "pie-switch-changed";
+export declare const ON_SWITCH_CHANGED_EVENT = "change";
 
 /**
  * @tagname pie-switch
- * @event {CustomEvent} pie-switch-changed - when the switch checked state is changed.
+ * @event {CustomEvent} change - 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;
+    /**
+     * This getter wraps the `isChecked` property to mimic native behaviour for the `change` event.
+     * You can access this with `event.target.checked` when listening to the `change` event.
+     * @returns The value of the property `isChecked`.
+     */
+    get checked(): boolean;
     isDisabled: boolean;
     static styles: CSSResult;
+    /**
+     * The onChange function updates the checkbox state and emits an event for consumers.
+     * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
+     */
     onChange(event: Event): void;
     /**
      * Renders the label for a switch if provided.

package/dist/index.js

@@ -3,7 +3,7 @@ import { property as d } from "lit/decorators.js";
 import { RtlMixin as v, validPropertyValues as u, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/IconCheck";
 const g = `*,*: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{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.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;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.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}}
-`, m = ["leading", "trailing"], k = "pie-switch-changed";
+`, m = ["leading", "trailing"], k = "change";
 var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (h, e, c, t) => {
   for (var i = t > 1 ? void 0 : t ? x(e, c) : e, a = h.length - 1, r; a >= 0; a--)
     (r = h[a]) && (i = (t ? r(e, c, i) : r(i)) || i);
@@ -14,6 +14,18 @@ class o extends v(w) {
   constructor() {
     super(...arguments), this.labelPlacement = "leading", this.isChecked = !1, this.isDisabled = !1;
   }
+  /**
+   * This getter wraps the `isChecked` property to mimic native behaviour for the `change` event.
+   * You can access this with `event.target.checked` when listening to the `change` event.
+   * @returns The value of the property `isChecked`.
+   */
+  get checked() {
+    return this.isChecked;
+  }
+  /**
+   * The onChange function updates the checkbox state and emits an event for consumers.
+   * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
+   */
   onChange(e) {
     const { checked: c } = e == null ? void 0 : e.currentTarget;
     this.isChecked = c;
@@ -21,8 +33,7 @@ class o extends v(w) {
       k,
       {
         bubbles: !0,
-        composed: !0,
-        detail: this.isChecked
+        composed: !0
       }
     );
     this.dispatchEvent(t);

package/dist/react.d.ts

@@ -18,23 +18,33 @@ export declare const labelPlacements: readonly ["leading", "trailing"];
  *
  * @constant
  */
-export declare const ON_SWITCH_CHANGED_EVENT = "pie-switch-changed";
+export declare const ON_SWITCH_CHANGED_EVENT = "change";
 
 export declare const PieSwitch: ReactWebComponent<PieSwitch_2, {
-    onPieSwitchChanged: EventName<CustomEvent<any>>;
+    onChange: EventName<CustomEvent<any>>;
 }>;
 
 /**
  * @tagname pie-switch
- * @event {CustomEvent} pie-switch-changed - when the switch checked state is changed.
+ * @event {CustomEvent} change - 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;
+    /**
+     * This getter wraps the `isChecked` property to mimic native behaviour for the `change` event.
+     * You can access this with `event.target.checked` when listening to the `change` event.
+     * @returns The value of the property `isChecked`.
+     */
+    get checked(): boolean;
     isDisabled: boolean;
     static styles: CSSResult;
+    /**
+     * The onChange function updates the checkbox state and emits an event for consumers.
+     * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
+     */
     onChange(event: Event): void;
     /**
      * Renders the label for a switch if provided.

package/dist/react.js

@@ -1,23 +1,23 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
 import { PieSwitch as i } from "./index.js";
-import { ON_SWITCH_CHANGED_EVENT as w, labelPlacements as l } from "./index.js";
+import { ON_SWITCH_CHANGED_EVENT as l, labelPlacements as w } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/IconCheck";
-const s = t({
+const n = t({
   displayName: "PieSwitch",
   elementClass: i,
   react: e,
   tagName: "pie-switch",
   events: {
-    onPieSwitchChanged: "pie-switch-changed"
+    onChange: "change"
     // when the switch checked state is changed.
   }
 });
 export {
-  w as ON_SWITCH_CHANGED_EVENT,
-  s as PieSwitch,
-  l as labelPlacements
+  l as ON_SWITCH_CHANGED_EVENT,
+  n as PieSwitch,
+  w as labelPlacements
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "0.18.4",
+  "version": "0.19.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts

@@ -35,4 +35,4 @@ export interface SwitchProps {
  *
  * @constant
  */
-export const ON_SWITCH_CHANGED_EVENT = 'pie-switch-changed';
+export const ON_SWITCH_CHANGED_EVENT = 'change';

package/src/index.ts

@@ -16,7 +16,7 @@ const componentSelector = 'pie-switch';
 
 /**
  * @tagname pie-switch
- * @event {CustomEvent} pie-switch-changed - when the switch checked state is changed.
+ * @event {CustomEvent} change - when the switch checked state is changed.
  */
 
 export class PieSwitch extends RtlMixin(LitElement) implements SwitchProps {
@@ -33,11 +33,24 @@ export class PieSwitch extends RtlMixin(LitElement) implements SwitchProps {
     @property({ type: Boolean, reflect: true })
     public isChecked = false;
 
+    /**
+     * This getter wraps the `isChecked` property to mimic native behaviour for the `change` event.
+     * You can access this with `event.target.checked` when listening to the `change` event.
+     * @returns The value of the property `isChecked`.
+     */
+    public get checked () {
+        return this.isChecked;
+    }
+
     @property({ type: Boolean, reflect: true })
     public isDisabled = false;
 
     static styles = unsafeCSS(styles);
 
+    /**
+     * The onChange function updates the checkbox state and emits an event for consumers.
+     * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
+     */
     onChange (event: Event) {
         const { checked } = event?.currentTarget as HTMLInputElement;
         this.isChecked = checked;
@@ -46,7 +59,6 @@ export class PieSwitch extends RtlMixin(LitElement) implements SwitchProps {
             {
                 bubbles: true,
                 composed: true,
-                detail: this.isChecked,
             },
         );
         this.dispatchEvent(changedEvent);