add webui-toggle

ui/src/javascript/ui-init.ts

@@ -5,7 +5,6 @@ import RangeSlider from './modules/range-slider';
 import Search from './modules/search';
 import Slider from './modules/slider';
 import Tabs from './modules/tabs';
-import Toggle from './modules/toggle';
 import VideoPlayer from './modules/video-player';
 
 // 2. For DEMO purposes only.
@@ -18,14 +17,14 @@ import WebUIModal from './web-components/webui-modal';
 import WebUINotify from './web-components/webui-notify';
 import WebUIProse from './web-components/webui-prose';
 import WebUIShare from './web-components/webui-share';
+import WebUIToggle from './web-components/webui-toggle';
 
 export const uiInit = (): void => {
     FormValidate.start();
     RangeSlider.start();
     Search.start();
     Slider.start();
     Tabs.start();
-    Toggle.start();
     VideoPlayer.start();
 
     // For DEMO purposes only.
@@ -44,4 +43,6 @@ export const uiInit = (): void => {
         customElements.define('webui-prose', WebUIProse);
     !customElements.get('webui-share') &&
         customElements.define('webui-share', WebUIShare);
+    !customElements.get('webui-toggle') &&
+        customElements.define('webui-toggle', WebUIToggle);
 };

ui/src/javascript/web-components/webui-notify.ts

@@ -7,7 +7,7 @@ export default class WebUINotify extends HTMLElement {
         this.btnClose?.addEventListener('click', this);
     }
 
-    // Handle web component events from constructor().
+    // Handle constructor() event listeners.
     handleEvent() {
         this.setAttribute('hidden', '');
     }

ui/src/javascript/web-components/webui-toggle.ts

@@ -0,0 +1,22 @@
+export default class WebUIToggle extends HTMLElement {
+    private switch: HTMLButtonElement | null;
+
+    constructor() {
+        super();
+        this.switch = this.querySelector('[role="switch"]');
+
+        if (!this.switch) return;
+
+        this.switch.addEventListener('click', this);
+    }
+
+    // Handle constructor() event listeners.
+    handleEvent() {
+        const isChecked = this.switch?.getAttribute('aria-checked') === 'true';
+
+        this.switch?.setAttribute(
+            'aria-checked',
+            Boolean(!isChecked).toString(),
+        );
+    }
+}

ui/src/stylesheets/components/_index.scss

@@ -16,5 +16,4 @@
 @use 'slider';
 @use 'tables';
 @use 'tabs';
-@use 'toggle';
 @use 'video-player';

ui/src/stylesheets/web-components/_index.scss

@@ -4,3 +4,4 @@
 @use 'webui-notify';
 @use 'webui-prose';
 @use 'webui-share';
+@use 'webui-toggle';

ui/src/stylesheets/components/_toggle.scss → ui/src/stylesheets/web-components/_webui-toggle.scss

@@ -6,34 +6,36 @@ Dependencies.
 @use '../base' as *;
 // @use '../mixins' as *;
 
-.toggle {
-    align-items: center;
-    border: $border-width-s solid;
-    display: inline-flex;
-    padding: 0;
+webui-toggle {
+    [role='switch'] {
+        align-items: center;
+        border: $border-width-s solid;
+        display: inline-flex;
+        padding: 0;
 
-    :is(&__on, &__off) {
-        padding: $gutter-s;
-    }
-
-    &:active {
-        transform: none;
+        &:active {
+            transform: none;
+        }
     }
 
-    &[aria-checked='false'] {
+    [aria-checked='false'] {
         .toggle__off {
             background-color: hsl(var(--color-text) / 30%);
         }
     }
 
-    &[aria-checked='true'] {
+    [aria-checked='true'] {
         .toggle__on {
             background-color: $color-brand;
             color: $color-neutral-100;
         }
     }
 
-    &--has-label {
+    :is(.toggle__on, .toggle__off) {
+        padding: $gutter-s;
+    }
+
+    .toggle--has-label {
         border: 0;
         gap: $gutter-s;
 

ui/stories/6. Web Components Or Custom Elements/WebUIProse/WebUIProse.stories.js

@@ -11,3 +11,4 @@ export default {
 export const WebUIProse = {
     render: () => WebUIProseHtml(),
 };
+WebUIProse.storyName = '<webui-prose>';

ui/stories/6. Web Components Or Custom Elements/WebUIToggle/WebUIToggle.js

@@ -0,0 +1,31 @@
+export const WebUIToggleHtml = () => `
+<webui-toggle>
+    <button
+        class="button"
+        type="button"
+        role="switch"
+        aria-checked="false"
+        aria-label="toggle / switch"
+    >
+        <span class="toggle__on" aria-hidden="true">on</span>
+        <span class="toggle__off" aria-hidden="true">off</span>
+    </button>
+</webui-toggle>
+`;
+
+export const WebUIToggleWithLabelHtml = () => `
+<webui-toggle>
+    <button
+        class="button toggle--has-label"
+        type="button"
+        role="switch"
+        aria-checked="false"
+    >
+        <span class="toggle__label">toggle / switch label</span>
+        <span class="toggle__indicator">
+            <span class="toggle__on" aria-hidden="true">on</span>
+            <span class="toggle__off" aria-hidden="true">off</span>
+        </span>
+    </button>
+<webui-toggle>
+`;

ui/stories/5. Components/Toggle/Toggle.mdx → ui/stories/6. Web Components Or Custom Elements/WebUIToggle/WebUIToggle.mdx

@@ -1,15 +1,16 @@
 import { Meta, Canvas } from '@storybook/blocks';
-import * as Toggle from './Toggle.stories';
+import * as WebUIToggle from './WebUIToggle.stories';
 
-<Meta of={Toggle} />
+<Meta of={WebUIToggle} />
 
-# Toggle button (or switch)
+# `<webui-toggle>`
+- Toggle button (or switch)
 
 ## Accessibility considerations
 - See the [ARIA APG switch pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/examples/switch-button/) and [Inclusive Components toggle](https://inclusive-components.design/toggle-button/) examples.
 
 ## Toggle with no visible label
-<Canvas of={Toggle.Toggle} />
+<Canvas of={WebUIToggle.WebUIToggle} />
 
 ## Toggle with visible label
-<Canvas of={Toggle.ToggleWithLabel} />
+<Canvas of={WebUIToggle.WebUIToggleWithLabel} />

ui/stories/6. Web Components Or Custom Elements/WebUIToggle/WebUIToggle.stories.js

@@ -0,0 +1,19 @@
+import { WebUIToggleHtml, WebUIToggleWithLabelHtml } from './WebUIToggle';
+export default {
+    title: 'Web Components Or Custom Elements/<webui-toggle>',
+    parameters: {
+        status: {
+            type: 'stable',
+        },
+    },
+};
+
+export const WebUIToggle = {
+    render: () => WebUIToggleHtml(),
+};
+WebUIToggle.storyName = '<webui-toggle>';
+
+export const WebUIToggleWithLabel = {
+    render: () => WebUIToggleWithLabelHtml(),
+};
+WebUIToggleWithLabel.storyName = '<webui-toggle> With Visible Label';