@justeattakeaway/pie-chip 0.12.11 → 0.14.0

package/src/index.ts

@@ -7,12 +7,16 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import {
-    validPropertyValues, dispatchCustomEvent,
+    validPropertyValues,
     safeCustomElement,
+    DelegatesFocusMixin,
 } from '@justeattakeaway/pie-webc-core';
 import styles from './chip.scss?inline';
 import {
-    type ChipProps, variants, ON_CHIP_CLOSE_EVENT, defaultProps,
+    type ChipProps,
+    variants,
+    types,
+    defaultProps,
 } from './defs';
 import '@justeattakeaway/pie-icons-webc/dist/IconCloseCircleFilled.js';
 import '@justeattakeaway/pie-spinner';
@@ -26,21 +30,26 @@ const componentSelector = 'pie-chip';
  * @tagname pie-chip
  * @slot icon - The icon slot
  * @slot - Default slot
- * @event {CustomEvent} pie-chip-close - when a user clicks close button.
+ * @event {Event} close - when a user clicks the close button.
+ * @event {Event} change - when a user interacts with the chip of type checkbox.
  */
 @safeCustomElement('pie-chip')
-export class PieChip extends PieElement implements ChipProps {
+export class PieChip extends DelegatesFocusMixin(PieElement) implements ChipProps {
     @property({ type: String })
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
     public variant = defaultProps.variant;
 
-    @property({ type: Boolean })
+    @property({ type: String })
+    @validPropertyValues(componentSelector, types, defaultProps.type)
+    public type = defaultProps.type;
+
+    @property({ type: Boolean, reflect: true })
     public disabled = defaultProps.disabled;
 
-    @property({ type: Boolean })
+    @property({ type: Boolean, reflect: true })
     public isSelected = defaultProps.isSelected;
 
-    @property({ type: Boolean })
+    @property({ type: Boolean, reflect: true })
     public isLoading = defaultProps.isLoading;
 
     @property({ type: Boolean })
@@ -50,62 +59,123 @@ export class PieChip extends PieElement implements ChipProps {
     public aria: ChipProps['aria'];
 
     /**
-     * Handler to prevent click events
-     * when the chip is disabled or dismissible
-     *
+     * Handles the change event for the native checkbox.
+     * This component is controlled, so it does not set its own state.
+     * It simply forwards the native change event.
      * @private
      */
-    private onClickHandler (event: Event) {
-        if (this.disabled || this.isDismissible) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
+    private _onCheckboxChange () {
+        // The original event from the input does not bubble past the shadow DOM boundary.
+        // We create and dispatch a new 'change' event to ensure it bubbles and is composed,
+        // allowing consumers to respond to the interaction.
+        const changeEvent = new Event('change', { bubbles: true, composed: true });
+        this.dispatchEvent(changeEvent);
     }
 
     /**
-     * Template for the loading state
-     *
+     * Template for the loading state spinner.
      * @private
      */
-    private renderSpinner (): TemplateResult {
-        const { isSelected } = this;
-        const spinnerVariant = isSelected ? 'inverse' : 'secondary';
+    private _renderSpinner (): TemplateResult {
+        const spinnerVariant = this.isSelected ? 'inverse' : 'secondary';
 
         return html`
-                    <pie-spinner
-                        class="c-chip-spinner"
-                        size="small"
-                        variant="${spinnerVariant}">
-                    </pie-spinner>`;
+            <pie-spinner
+                class="c-chip-spinner"
+                size="small"
+                variant="${spinnerVariant}">
+            </pie-spinner>`;
     }
 
     /**
-     * Handles click on a close button by dispatching a custom event
-     *
+     * Renders the core content of the chip (icon, text, spinner).
      * @private
      */
-    private _handleCloseButtonClick () : void {
-        dispatchCustomEvent(this, ON_CHIP_CLOSE_EVENT);
+    private _renderContent (): TemplateResult {
+        return html`
+            <slot name="icon"></slot>
+            ${this.isLoading ? this._renderSpinner() : nothing}
+            <slot></slot>
+        `;
     }
 
     /**
-     * Template for the dismissible state
-     *
+     * Template for the checkbox variant.
+     * This uses a visually hidden native checkbox for accessibility and form integration.
      * @private
      */
-    private renderCloseButton (): TemplateResult {
+    private _renderCheckbox (): TemplateResult {
+        const {
+            aria,
+            variant,
+            disabled,
+            isSelected,
+            isLoading,
+        } = this;
+
+        const classes = {
+            'c-chip': true,
+            [`c-chip--${variant}`]: true,
+            'c-chip--selected': isSelected,
+            'is-disabled': disabled,
+            'is-loading': isLoading,
+        };
+
         return html`
-                    <button
-                        @click="${this._handleCloseButtonClick}"
-                        ?disabled=${this.disabled}
-                        aria-label="${ifDefined(this.aria?.close)}"
-                        class="c-chip-closeBtn"
-                        data-test-id="chip-close-button">
-                        <icon-close-circle-filled size="m"></icon-close-circle-filled>
-                    </button>`;
+            <input
+                data-test-id="chip-checkbox-input"
+                type="checkbox"
+                id="pie-chip"
+                aria-label="${ifDefined(aria?.label)}"
+                ?checked=${isSelected}
+                ?disabled=${disabled}
+                @change="${this._onCheckboxChange}"/>
+            <label
+                for="pie-chip"
+                class=${classMap(classes)}
+                data-test-id="pie-chip">
+                ${this._renderContent()}
+            </label>`;
     }
 
-    render () {
+    private _renderButton (): TemplateResult {
+        const {
+            aria,
+            variant,
+            disabled,
+            isSelected,
+            isLoading,
+        } = this;
+
+        const classes = {
+            'c-chip': true,
+            [`c-chip--${variant}`]: true,
+            'c-chip--selected': isSelected,
+            'is-disabled': disabled,
+            'is-loading': isLoading,
+        };
+
+        return html`
+            <button
+                id="pie-chip"
+                type="button"
+                class=${classMap(classes)}
+                aria-busy="${ifDefined(isLoading)}"
+                aria-haspopup="${ifDefined(aria?.haspopup)}"
+                aria-expanded="${ifDefined(aria?.expanded)}"
+                aria-pressed="${isSelected}"
+                aria-label="${ifDefined(aria?.label)}"
+                ?disabled=${disabled}
+                data-test-id="pie-chip">
+                ${this._renderContent()}
+            </button>`;
+    }
+
+    /**
+     * Template for the dismissible variant.
+     * @private
+     */
+    private _renderDismissible (): TemplateResult {
         const {
             variant,
             disabled,
@@ -113,6 +183,7 @@ export class PieChip extends PieElement implements ChipProps {
             isLoading,
             isDismissible,
         } = this;
+
         const showCloseButton = isDismissible && isSelected;
 
         const classes = {
@@ -124,26 +195,51 @@ export class PieChip extends PieElement implements ChipProps {
             'is-loading': isLoading,
         };
 
+        const handleClick = (event: Event) => {
+            if (disabled || isDismissible) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+
+        const handleCloseButtonClick = (event: Event) : void => {
+            event.stopPropagation();
+            const closeEvent = new Event('close', { bubbles: true, composed: true });
+            this.dispatchEvent(closeEvent);
+        };
+
         return html`
             <div
-                role="${ifDefined(showCloseButton ? undefined : 'button')}"
-                tabindex="${ifDefined(showCloseButton ? undefined : '0')}"
-                aria-atomic="true"
                 aria-busy="${isLoading}"
                 aria-current="${isSelected}"
                 aria-label="${ifDefined(this.aria?.label)}"
-                aria-live="polite"
                 class=${classMap(classes)}
                 data-test-id="pie-chip"
-                @click="${this.onClickHandler}">
-                    <slot name="icon"></slot>
-                    ${isLoading ? this.renderSpinner() : nothing}
-                    <slot></slot>
-                    ${showCloseButton ? this.renderCloseButton() : nothing}
+                @click=${handleClick}>
+                ${this._renderContent()}
+                ${showCloseButton ? html`<button
+                        @click="${handleCloseButtonClick}"
+                        ?disabled=${this.disabled}
+                        aria-label="${ifDefined(this.aria?.close)}"
+                        class="c-chip-closeBtn"
+                        data-test-id="chip-close-button">
+                        <icon-close-circle-filled size="m"></icon-close-circle-filled>
+                    </button>` : nothing}
             </div>`;
     }
 
-    // Renders a `CSSResult` generated from SCSS by Vite
+    render () {
+        if (this.isDismissible) {
+            return this._renderDismissible();
+        }
+
+        if (this.type === 'checkbox') {
+            return this._renderCheckbox();
+        }
+
+        return this._renderButton();
+    }
+
     static styles = unsafeCSS(styles);
 }
 

package/src/react.ts

@@ -11,14 +11,16 @@ const PieChipReact = createComponent({
     react: React,
     tagName: 'pie-chip',
     events: {
-        onPieChipClose: 'pie-chip-close' as EventName<CustomEvent>, // when a user clicks close button.
+        onClose: 'close' as EventName<Event>, // when a user clicks the close button.
+        onChange: 'change' as EventName<Event>, // when a user interacts with the chip of type checkbox.
     },
 });
 
 type ReactBaseType = React.HTMLAttributes<HTMLElement>
 
 type PieChipEvents = {
-    onPieChipClose?: (event: CustomEvent) => void;
+    onClose?: (event: Event) => void;
+    onChange?: (event: Event) => void;
 };
 
 export const PieChip = PieChipReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<ChipProps>