From aba3e123618247333ce86652eaabaae640bd89b6 Mon Sep 17 00:00:00 2001
From: Mike Iden <mike.iden@ithaka.org>
Date: Tue, 29 Oct 2024 15:38:02 -0400
Subject: [PATCH] feat(switch): add change event to storybook and docs

---
 .../components/switch/PharosSwitch.react.stories.jsx   | 10 +++++++++-
 packages/pharos/src/components/switch/pharos-switch.ts |  5 ++---
 .../src/components/switch/pharos-switch.wc.stories.jsx |  9 ++++++++-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/pharos/src/components/switch/PharosSwitch.react.stories.jsx b/packages/pharos/src/components/switch/PharosSwitch.react.stories.jsx
index 0ffd68e2..38b1fd78 100644
--- 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,7 +23,11 @@ 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>
   ),
@@ -30,4 +35,7 @@ export const Base = {
     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
index 8407545d..c8769b0f 100644
--- 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
index 14417cdf..9465a5e7 100644
--- 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' },
+  },
 };