chore(helpers): fix action logger demos when switching canvas/docs

packages/helpers/sb-action-logger/stories/index.stories.mdx

@@ -21,7 +21,9 @@ import '../../sb-action-logger.js';
 A visual element to show action logs in Storybook demos `sb-action-logger`
 
 <Story name="Default">
-  {html`
+  {() => {
+    const uid = Math.random().toString(36).substr(2, 10);
+    return html`
       <style>
         sb-action-logger {
           font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
@@ -30,22 +32,31 @@ A visual element to show action logs in Storybook demos `sb-action-logger`
       </style>
       <div>To log: <code>Hello, World!</code></div>
       <button
-      @click=${() => document.getElementById('logger-a53209ghj').log('Hello, World!')}
+        @click=${() => {
+          document.getElementById(`logger-${uid}`).log('Hello, World!');
+        }}
       >Click this button</button>
-    <sb-action-logger id="logger-a53209ghj"></sb-action-logger>
+      <sb-action-logger id="logger-${uid}"></sb-action-logger>
-  `}
+    `;
+  }}
 </Story>
 
+You need some reference to your logger. Above example shows this by using a unique ID.
+
+```js
+const uid = Math.random().toString(36).substr(2, 10);
+```
+
+This connects the logger element to the trigger.
+
 ```html
 <div>To log: <code>Hello, World!</code></div>
 <button
-  @click=${() => document.getElementById('logger-a53209ghj').log('Hello, World!')}
+  @click=${() => document.getElementById('logger-${uid}').log('Hello, World!')}
 >Click this button</button>
-<sb-action-logger id="logger-a53209ghj"></sb-action-logger>
+<sb-action-logger id="logger-${uid}"></sb-action-logger>
 ```
 
-Note that you need some reference to your logger. Above example shows this by using a unique ID.
-
 ## Features:
 
 - A public method `log` to log things to the action logger.
@@ -70,12 +81,15 @@ npm i sb-action-logger
 ### Custom Title
 
 <Story name="Custom Title">
-  {html`
+  {() => {
+    const uid = Math.random().toString(36).substr(2, 10);
+    return html`
       <button
-      @click=${() => document.getElementById('logger-vnfoiu3478').log('Hello, World!')}
+        @click=${() => document.getElementById(`logger-${uid}`).log('Hello, World!')}
       >Log</button>
-    <sb-action-logger id="logger-vnfoiu3478" .title=${'Hello World'}></sb-action-logger>
+      <sb-action-logger id="logger-${uid}" .title=${'Hello World'}></sb-action-logger>
-  `}
+    `;
+  }}
 </Story>
 
 
@@ -101,16 +115,16 @@ Maybe in the future I will abstract this component to a more generic (ugly) one
 
 If you use an action logger inside your Story in Storybook, you will also see it in your canvas, and this may not be your intention.
 
-One idea I have is that we can simplify the usage further by making this a Storybook (docs-)plugin or decorator or whatever.
+One idea is to simplify the usage further by making this a Storybook (docs-)plugin or decorator or whatever.
-I am not too familiar with them at the moment, but it would be cool if someone can simply enable an action logger option on a particular Story inside their .mdx,
+It would be cool if someone can simply enable an action logger option on a particular Story inside their .mdx,
-and then actions are automatically logged to the visual logger below it. Would need to figure out how to catch the action and pass it to the visual logger element.
+and then actions are automatically logged to the visual logger below it.
+Would need to figure out how to catch the action and pass it to the visual logger element.
 
-I have not investigated yet on the how, but that is the rough idea. Feel free to help out here :)
+Isn't investigated yet on the how, but that is the rough idea.
 
 ## Future
 
-I plan on adding more features.
+New planned features can be found in the test folder where they are specified as skipped tests.
-They can always be found in the test folder where I specify new features as tests first, and then I skip them until I implement them. Easy to find them that way.
+If the feature you'd like is not in the tests, feel free to make an issue so we can add it.
-If the feature you'd like is not in the tests, I probably did not think about it yet or did not plan to do it yet, so in that case feel free to make an issue so we can add it.
 
-I'm happy to accept pull requests for skipped tests (features to be added), see the CONTRIBUTING.md on GitHub for more details on how to contribute to this codebase.
+See our CONTRIBUTING.md for more guidelines on how to contribute.