@justeattakeaway/pie-switch 2.4.1 → 2.5.0

package/dist/react.d.ts

@@ -36,11 +36,13 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInpu
     labelPlacement: "leading" | "trailing";
     aria: SwitchProps['aria'];
     checked: boolean;
+    defaultChecked: boolean;
     required: boolean;
     value: string;
     name: SwitchProps['name'];
     disabled: boolean;
     private input;
+    private switchBody;
     focusTarget: HTMLElement;
     private _abortController;
     private _isAnimationAllowed;
@@ -75,6 +77,11 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInpu
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
      */
     setCustomValidity(message: string): void;
+    /**
+     * Called when the containing form is reset.
+     * Resets checked state back to defaultChecked and emits a change event when needed.
+     */
+    formResetCallback(): void;
     /**
      * (Read-only) returns a ValidityState with the validity states that this element is in.
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
@@ -86,15 +93,9 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInpu
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage
      */
     get validationMessage(): string;
-    /**
-     * If a label is provided, renders it if `labelPlacement` matches the given position.
-     * If no label is provided, or `labelPlacement` does not match the given position, nothing is rendered.
-     *
-     * @private
-     */
-    private renderSwitchLabel;
     private renderAriaDescription;
-    render(): TemplateResult<1>;
+    private renderSwitchLabel;
+    render(): TemplateResult;
 }
 
 declare const PieSwitch_base: GenericConstructor<FormControlInterface> & typeof PieElement;
@@ -115,6 +116,11 @@ export declare interface SwitchProps {
      * Same as the HTML checked attribute - indicates whether the switch is on or off
      */
     checked?: boolean;
+    /**
+     * The default checked state of the switch (not necessarily the same as the current checked state).
+     * Used when the switch is part of a form that is reset.
+     */
+    defaultChecked?: boolean;
     /**
      * Same as the HTML required attribute - indicates whether the switch must be turned or not
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -44,13 +44,13 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.1.2",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.4",
+    "@justeattakeaway/pie-css": "1.2.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.6",
     "@justeattakeaway/pie-wrapper-react": "0.14.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "1.25.0",
-    "@justeattakeaway/pie-webc-core": "14.0.2",
+    "@justeattakeaway/pie-icons-webc": "1.25.1",
+    "@justeattakeaway/pie-webc-core": "15.0.0",
     "element-internals-polyfill": "1.3.11"
   },
   "customElements": "custom-elements.json",

package/src/defs.ts

@@ -16,6 +16,11 @@ export interface SwitchProps {
      * Same as the HTML checked attribute - indicates whether the switch is on or off
      */
     checked?: boolean;
+    /**
+     * The default checked state of the switch (not necessarily the same as the current checked state).
+        * Used when the switch is part of a form that is reset.
+     */
+    defaultChecked?: boolean;
     /**
      * Same as the HTML required attribute - indicates whether the switch must be turned or not
      */
@@ -53,6 +58,7 @@ export type DefaultProps = ComponentDefaultProps<SwitchProps, keyof Omit<SwitchP
 
 export const defaultProps: DefaultProps = {
     checked: false,
+    defaultChecked: false,
     disabled: false,
     labelPlacement: 'leading',
     required: false,

package/src/index.ts

@@ -1,10 +1,12 @@
 import {
     html, unsafeCSS, nothing,
 } from 'lit';
+import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
 import 'element-internals-polyfill';
 
 import {
@@ -44,6 +46,9 @@ export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement))
     @property({ type: Boolean, reflect: true })
     public checked = defaultProps.checked;
 
+    @property({ type: Boolean, reflect: true })
+    public defaultChecked = defaultProps.defaultChecked;
+
     @property({ type: Boolean, reflect: true })
     public required = defaultProps.required;
 
@@ -59,7 +64,10 @@ export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement))
     @query('input[type="checkbox"]')
     private input!: HTMLInputElement;
 
-    @query('label')
+    @query('.c-switch')
+    private switchBody!: HTMLElement;
+
+    @query('label, input[type="checkbox"]')
     public focusTarget!: HTMLElement;
 
     private _abortController!: AbortController;
@@ -83,10 +91,18 @@ export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement))
         const { signal } = this._abortController;
 
         this.addEventListener('click', (event: Event) => {
+            const [source] = event.composedPath();
+
+            if (this.disabled || source === this.input) {
+                return;
+            }
+
             // Only programmatically click the input if the explicit target
             // of the click was the host element itself (e.g., via an external label).
             // This ignores clicks bubbling up from the internal shadow DOM and prevents loops.
-            if (event.composedPath()[0] === this) {
+            // Also forward clicks from the visual switch body when no internal label exists.
+            const isInsideSwitchBody = !this.label && event.composedPath().includes(this.switchBody);
+            if (source === this || isInsideSwitchBody) {
                 this.input.click();
             }
         }, { signal });
@@ -166,6 +182,23 @@ export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement))
         this._internals.setValidity(this.validity, this.validationMessage, this.input);
     }
 
+    /**
+     * Called when the containing form is reset.
+     * Resets checked state back to defaultChecked and emits a change event when needed.
+     */
+    public formResetCallback () : void {
+        if (this.checked === this.defaultChecked) {
+            return;
+        }
+
+        this.checked = this.defaultChecked;
+
+        const changeEvent = new Event('change', { bubbles: true, composed: true });
+        this.dispatchEvent(changeEvent);
+
+        this.handleFormAssociation();
+    }
+
     /**
      * (Read-only) returns a ValidityState with the validity states that this element is in.
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
@@ -183,36 +216,12 @@ export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement))
         return this.input.validationMessage;
     }
 
-    /**
-     * If a label is provided, renders it if `labelPlacement` matches the given position.
-     * If no label is provided, or `labelPlacement` does not match the given position, nothing is rendered.
-     *
-     * @private
-     */
-    private renderSwitchLabel (placement : SwitchProps['labelPlacement']) {
-        const { label, labelPlacement } = this;
-
-        if (!label || labelPlacement !== placement) {
-            return nothing;
-        }
-
-        // Using aria-hidden here to prevent the label from potentially being narrated twice by screen readers such as Apple VoiceOver.
-        // Instead, we apply the label as an aria-label attribute on the input (if no aria.label prop is provided).
-        return html`
-            <span
-                aria-hidden="true"
-                data-test-id="switch-label-${labelPlacement}"
-                class="c-switch-label">
-                ${label}
-            </span>`;
-    }
-
     private renderAriaDescription () {
         if (!this.aria?.describedBy) {
             return nothing;
         }
 
-        // we apply aria-hidden to the element containing the description because it prevent some screen readers such as Apple VoiceOver from announcing the description once
+        // we apply aria-hidden to the element containing the description because it prevents some screen readers such as Apple VoiceOver from announcing the description once
         // on the input and again separately. The description is still announced once, when the input is focused/selected.
         return html`
             <div
@@ -224,9 +233,28 @@ export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement))
             </div>`;
     }
 
+    private renderSwitchLabel () {
+        const { label, labelPlacement } = this;
+
+        if (!label) {
+            return nothing;
+        }
+
+        // Using aria-hidden here to prevent the label from potentially being narrated twice by screen readers such as Apple VoiceOver.
+        // Instead, we apply the label as an aria-label attribute on the input (if no aria.label prop is provided).
+        return html`
+            <span
+                aria-hidden="true"
+                data-test-id="switch-label-${labelPlacement}"
+                class="c-switch-label">
+                ${label}
+            </span>`;
+    }
+
     render () {
         const {
             label,
+            labelPlacement,
             aria,
             checked,
             disabled,
@@ -237,13 +265,15 @@ export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement))
         const classes = {
             'c-switch-wrapper': true,
             'c-switch-wrapper--allow-animation': _isAnimationAllowed,
+            [`c-switch-wrapper--label-${labelPlacement}`]: true,
         };
 
-        return html`
-            <label
+        const tag = unsafeStatic(label ? 'label' : 'div');
+
+        return staticHtml`
+            <${tag}
                 class="${classMap(classes)}"
                 ?disabled=${disabled}>
-                ${this.renderSwitchLabel('leading')}
                 <div
                     data-test-id="switch-component"
                     class="c-switch"
@@ -254,7 +284,7 @@ export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement))
                         type="checkbox"
                         class="c-switch-input"
                         .required=${required}
-                        .checked="${checked}"
+                        .checked="${live(checked)}"
                         .disabled="${disabled}"
                         @change="${this.handleChange}"
                         aria-label="${ifDefined(aria?.label || label)}"
@@ -263,9 +293,9 @@ export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement))
                         ${checked ? html`<icon-check></icon-check>` : nothing}
                     </div>
                 </div>
-                ${this.renderSwitchLabel('trailing')}
+                ${this.renderSwitchLabel()}
                 ${this.renderAriaDescription()}
-            </label>`;
+            </${tag}>`;
     }
 }
 

package/src/switch.scss

@@ -69,17 +69,7 @@
 }
 
 .c-switch-input {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    bottom: 0;
+    @include p.visually-hidden;
 
     &:disabled {
         background-color: transparent;
@@ -131,6 +121,13 @@
     @include p.visually-hidden;
 }
 
+.c-switch-wrapper--label-leading {
+    flex-direction: row-reverse;
+}
+
+.c-switch-wrapper--label-trailing {
+    flex-direction: row;
+}
 
 .c-switch-wrapper--allow-animation {
     /* stylelint-disable-next-line no-descending-specificity */
@@ -166,4 +163,4 @@
     .c-switch-input:checked + .c-switch-control {
         transform: translateX(calc(-1 * var(--switch-translation)));
     }
-}
+}