From e50b5a4ce4b5d56919a78f96446d42a4b76899c7 Mon Sep 17 00:00:00 2001
From: Joren Broekema <joren.broekema@gmail.com>
Date: Fri, 17 Jan 2020 14:36:53 +0100
Subject: [PATCH] chore(helpers): fix action logger demos when switching
 canvas/docs

---
 .../stories/index.stories.mdx                 | 76 +++++++++++--------
 1 file changed, 45 insertions(+), 31 deletions(-)

diff --git a/packages/helpers/sb-action-logger/stories/index.stories.mdx b/packages/helpers/sb-action-logger/stories/index.stories.mdx
index d1beeddfb..9f59c9a40 100644
--- a/packages/helpers/sb-action-logger/stories/index.stories.mdx
+++ b/packages/helpers/sb-action-logger/stories/index.stories.mdx
@@ -21,31 +21,42 @@ import '../../sb-action-logger.js';
 A visual element to show action logs in Storybook demos `sb-action-logger`
 
 <Story name="Default">
-  {html`
-    <style>
-      sb-action-logger {
-        font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
-          BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-      }
-    </style>
-    <div>To log: <code>Hello, World!</code></div>
-    <button
-      @click=${() => document.getElementById('logger-a53209ghj').log('Hello, World!')}
-    >Click this button</button>
-    <sb-action-logger id="logger-a53209ghj"></sb-action-logger>
-  `}
+  {() => {
+    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',
+            BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        }
+      </style>
+      <div>To log: <code>Hello, World!</code></div>
+      <button
+        @click=${() => {
+          document.getElementById(`logger-${uid}`).log('Hello, World!');
+        }}
+      >Click this button</button>
+      <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`
-    <button
-      @click=${() => document.getElementById('logger-vnfoiu3478').log('Hello, World!')}
-    >Log</button>
-    <sb-action-logger id="logger-vnfoiu3478" .title=${'Hello World'}></sb-action-logger>
-  `}
+  {() => {
+    const uid = Math.random().toString(36).substr(2, 10);
+    return html`
+      <button
+        @click=${() => document.getElementById(`logger-${uid}`).log('Hello, World!')}
+      >Log</button>
+      <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.
-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,
-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.
+One idea is to simplify the usage further by making this a Storybook (docs-)plugin or decorator or whatever.
+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.
 
-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.
-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, 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.
+New planned features can be found in the test folder where they are specified as skipped tests.
+If the feature you'd like is not in the tests, 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.