[component]: Toggle button

[gfellerph]

Create a toggle button component. A toggle button can toggle between two states, like a play/pause button, and display two different sets of content for each state.

Design

Not yet designed as a separate component, but can be seen in the Header design: https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=2932-36996&t=LkHqwQB91Cng98Vy-4

Requirements

Proposed markup

<post-togglebutton>
  <span slot=toggled>X Menu</span>
  <span slot=untoggled>= Menu</span> <!-- Default slot -->
</post-togglebutton>

The idea of this component is the possibility to switch the content based on it's state.

• Only one state can be active at one time, therefore only one of the subcomponents is visible.
• Provide an attribute on the button that shows if it's toggled or not -> <post-togglebutton toggled>. This can also be set initially by the author to indicate that the button should be toggled on load. When the button is toggled, this attribute should update, similar to the <dialog open> attribute. That will be helpful for custom styling.
• Auto-slot assignment: This component can be slotted into other components and should therefore expose a default slot on the host element <post-togglebutton slot=post-togglebuttton>
• If there is no toggled slot defined the component should just change it's state and attribute without hiding the default content
• The component itself should not have any default styles (should not be styled like a button), the author should be able to style it, for example like <post-togglebutton class="btn btn-primary">
• Accessibility: The component should have the role button <post-togglebutton role=button> and expose the aria-pressed state alongside the toggled attribute (https://dequeuniversity.com/library/aria/button-toggle)
• Internals: This component should expose button-like internals to make the component itself focusable: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals

  
  ### Tasks

• [ ] Create the web component <post-togglebutton>
• [ ] Add e2e tests
• [ ] Document the component on storybook

[gfellerph]

POC component:

post-togglebutton.tsx

import {
  Component,
  Host,
  Prop,
  Watch,
  h,
  Element,
  Listen,
  Event,
  EventEmitter,
} from '@stencil/core';
import { version } from '@root/package.json';

@Component({
  tag: 'post-togglebutton',
  styleUrl: 'post-togglebutton.scss',
  shadow: true,
})
export class PostTogglebutton {
  @Element() host: HTMLPostTogglebuttonElement;

  /**
   * Emit a toggled event containing the current state as payload on `event.details`
   */
  @Event() toggledEvent: EventEmitter<boolean>;

  /**
   * Button state
   */
  // eslint-disable-next-line @stencil-community/strict-mutable
  @Prop({ reflect: true, mutable: true }) toggled: boolean;
  @Watch('toggled')
  toggleChange() {
    this.host.setAttribute('aria-pressed', `${this.toggled}`);
    this.toggledEvent.emit(this.toggled);
  }

  @Listen('click', { passive: true })
  handleClick() {
    this.toggled = !this.toggled;
  }

  @Listen('keydown', { passive: true })
  handleKeydown(event: KeyboardEvent) {
    if (event.key === 'Enter') {
      this.toggled = !this.toggled;
    }
  }

  render() {
    return (
      <Host slot="post-togglebutton" tabindex="0" role="button" version={version}>
        <slot name="untoggled"></slot>
        <slot name="toggled"></slot>
      </Host>
    );
  }
}

post-togglebutton.scss

:host {
  cursor: default;
}

slot[name='toggled'] {
  display: none;
}

:host-context([toggled]) {
  slot[name='untoggled'] {
    display: none;
  }

  slot[name='toggled'] {
    display: contents;
  }
}