From 1ee1324fbce2c596b688cb838c2d742de3e0ec8d Mon Sep 17 00:00:00 2001
From: Stijn Van Asschodt <stijn.van.asschodt@gmail.com>
Date: Wed, 4 Mar 2020 15:59:18 +0100
Subject: [PATCH] chore(switch): add docu for checked-changed handler (#611)

---
 packages/switch/package.json              |  1 +
 packages/switch/stories/index.stories.mdx | 46 ++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/switch/package.json b/packages/switch/package.json
index 735f29fff..cb7d2bb84 100644
--- a/packages/switch/package.json
+++ b/packages/switch/package.json
@@ -39,6 +39,7 @@
     "@lion/field": "0.11.1"
   },
   "devDependencies": {
+    "@lion/helpers": "0.3.2",
     "@lion/localize": "0.8.8",
     "@lion/validate": "0.7.0",
     "@open-wc/demoing-storybook": "^1.10.4",
diff --git a/packages/switch/stories/index.stories.mdx b/packages/switch/stories/index.stories.mdx
index 377549155..401575177 100644
--- a/packages/switch/stories/index.stories.mdx
+++ b/packages/switch/stories/index.stories.mdx
@@ -3,6 +3,7 @@ import { Validator } from '@lion/validate';
 
 import { LionSwitch } from '../src/LionSwitch';
 import '../lion-switch.js';
+import '@lion/helpers/sb-action-logger.js';
 
 <Meta title="Buttons/Switch" />
 
@@ -80,7 +81,9 @@ Simple example that illustrates where validation feedback will be displayed.
         return [...super.validationTypes, 'info'];
       }
     }
-    customElements.define('custom-switch', CustomSwitch);
+    if (!customElements.get('custom-switch')) {
+      customElements.define('custom-switch', CustomSwitch);
+    }
     return html`
       <custom-switch
         id="newsletterCheck"
@@ -124,3 +127,44 @@ customElements.define('custom-switch', CustomSwitch);
   .validators="${[new IsTrue(null, {type: 'info'})]}"
 ></custom-switch>
 ```
+
+### With checked-changed handler
+
+You can listen for a `checked-changed` event that is fired when the switch is clicked.
+
+<Story name="checked-changed handler">
+  {() => {
+    const uid = Math.random()
+      .toString(36)
+      .substr(2, 10);
+    return html`
+      <lion-switch
+        label="Label"
+        @checked-changed="${e => {
+          document.getElementById(`logger-${uid}`).log(`Current value: ${e.target.checked}`);
+        }}"
+      >
+      </lion-switch>
+      <sb-action-logger id="logger-${uid}"></sb-action-logger>
+    `;
+  }}
+</Story>
+
+```js
+import '@lion/helpers/sb-action-logger.js';
+
+const uid = Math.random()
+  .toString(36)
+  .substr(2, 10);
+```
+
+```html
+<lion-switch
+  label="Label"
+  @checked-changed="${(e) => {
+    document.getElementById(`logger-${uid}`).log(`Current value: ${e.target.checked}`);
+  }}"
+>
+  <sb-action-logger id="logger-${uid}"></sb-action-logger>
+</lion-switch>
+```