feat(switch): add change event to storybook and docs

ithaka · Oct 29, 2024 · aba3e12 · aba3e12
1 parent 5d19914
commit aba3e12
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/packages/pharos/src/components/switch/PharosSwitch.react.stories.jsx b/packages/pharos/src/components/switch/PharosSwitch.react.stories.jsx
@@ -1,6 +1,7 @@
 import { PharosSwitch } from '../../react-components/switch/pharos-switch';
 import { configureDocsPage } from '@config/docsPageConfig';
 import { PharosContext } from '../../utils/PharosContext';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Forms/Switch',
@@ -22,12 +23,19 @@ export default {
 
 export const Base = {
   render: ({ disabled, checked }) => (
-    <PharosSwitch disabled={disabled} checked={checked}>
+    <PharosSwitch
+      disabled={disabled}
+      checked={checked}
+      onChange={(e) => action('Change')(e.target.checked)}
+    >
       <span slot="label">Toggle Switch</span>
     </PharosSwitch>
   ),
   args: {
     disabled: false,
     checked: false,
   },
+  parameters: {
+    options: { selectedPanel: 'addon-actions' },
+  },
 };
diff --git a/packages/pharos/src/components/switch/pharos-switch.ts b/packages/pharos/src/components/switch/pharos-switch.ts
@@ -10,6 +10,7 @@ import { property, query } from 'lit/decorators.js';
  *
  * @tag pharos-switch
  *
+ * @fires change - Fires when the value has changed
  */
 export class PharosSwitch extends FormMixin(FormElement) {
   /**
@@ -38,11 +39,9 @@ export class PharosSwitch extends FormMixin(FormElement) {
   }
 
   private _handleClick(event: Event): void {
-    console.log('handle click??', this.checked);
     event.preventDefault();
     event.stopPropagation();
     this._switch.click();
-    // this._switch.focus();
   }
 
   public onChange(): void {
@@ -102,7 +101,7 @@ export class PharosSwitch extends FormMixin(FormElement) {
           <label for="switch-element" class="switch__label" @click="${this._handleClick}">
             <slot name="label"></slot>
           </label>
-          <span class="switch__control" @click="${this._handleClick}"></span>
+          <span class="switch__control" aria-hidden="true" @click="${this._handleClick}"></span>
         </div>
       </div>
     `;

diff --git a/packages/pharos/src/components/switch/pharos-switch.wc.stories.jsx b/packages/pharos/src/components/switch/pharos-switch.wc.stories.jsx
@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { action } from '@storybook/addon-actions';
 
 import { configureDocsPage } from '@config/docsPageConfig';
 
@@ -15,11 +16,17 @@ export default {
 
 export const Base = {
   render: ({ disabled, checked }) =>
-    html` <storybook-pharos-switch ?disabled=${disabled} ?checked=${checked}
+    html` <storybook-pharos-switch
+      ?disabled=${disabled}
+      ?checked=${checked}
+      @change="${(e) => action('Change')(e.target.checked)}"
       ><span slot="label">Toggle Switch</span></storybook-pharos-switch
     >`,
   args: {
     disabled: false,
     checked: false,
   },
+  parameters: {
+    options: { selectedPanel: 'addon-actions' },
+  },
 };