chore(switch): add docu for checked-changed handler (#611)

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",

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>
+```