From 1f483d33c251cd0c9496728e7017aaa4d98c4118 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 30 Jun 2021 13:33:08 -0700
Subject: [PATCH 1/4] Refine the Dot Leader list example

---
 .../dot-leader/dot-leader.stories.mdx         | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/dot-leader/dot-leader.stories.mdx b/src/components/dot-leader/dot-leader.stories.mdx
index 24b133669..5b2e00560 100644
--- a/src/components/dot-leader/dot-leader.stories.mdx
+++ b/src/components/dot-leader/dot-leader.stories.mdx
@@ -44,5 +44,29 @@ If `c-dot-leader` is an `<a>` element, it will gain some additional styles.
 Although `c-dot-leader` applies to a single row, the pattern works best as part of [a list object](/docs/objects-list--default-story). The dotted lines clearly associate each column even when content lengths vary.
 
 <Canvas>
-  <Story name="List">{listDemo({ topics })}</Story>
+  <Story
+    name="List"
+    parameters={{
+      docs: {
+        source: {
+          code: `{% embed '@cloudfour/objects/list/list.twig' only %}
+  {% block content %}
+    {% for topic in topics %}
+      <li>
+        {% include '@cloudfour/components/dot-leader/dot-leader.twig' with {
+          label: topic.title,
+          count: topic.count,
+          href: topic.url
+        } only %}
+      </li>
+    {% endfor %}
+  {% endblock %}
+{% endembed %}
+`,
+        },
+      },
+    }}
+  >
+    {listDemo({ topics })}
+  </Story>
 </Canvas>

From e38b9e6f1b213f9c8bc9715e482a2231a80a22f2 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 30 Jun 2021 14:38:30 -0700
Subject: [PATCH 2/4] Play smarter, not harder

---
 src/components/dot-leader/dot-leader.stories.mdx | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/components/dot-leader/dot-leader.stories.mdx b/src/components/dot-leader/dot-leader.stories.mdx
index 5b2e00560..6278d0f6f 100644
--- a/src/components/dot-leader/dot-leader.stories.mdx
+++ b/src/components/dot-leader/dot-leader.stories.mdx
@@ -1,5 +1,6 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
 import listDemo from './demo/list.twig';
+import listDemoSource from '!!raw-loader!./demo/list.twig';
 import topics from './demo/topics.json';
 import template from './dot-leader.twig';
 const argTypes = {
@@ -49,20 +50,7 @@ Although `c-dot-leader` applies to a single row, the pattern works best as part
     parameters={{
       docs: {
         source: {
-          code: `{% embed '@cloudfour/objects/list/list.twig' only %}
-  {% block content %}
-    {% for topic in topics %}
-      <li>
-        {% include '@cloudfour/components/dot-leader/dot-leader.twig' with {
-          label: topic.title,
-          count: topic.count,
-          href: topic.url
-        } only %}
-      </li>
-    {% endfor %}
-  {% endblock %}
-{% endembed %}
-`,
+          code: listDemoSource,
         },
       },
     }}

From cd366c7cf4935fe0b7143c8672d0324f0cd40028 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 30 Jun 2021 14:45:10 -0700
Subject: [PATCH 3/4] =?UTF-8?q?=C2=AF\=5F(=E3=83=84)=5F/=C2=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dot-leader/dot-leader.stories.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/dot-leader/dot-leader.stories.mdx b/src/components/dot-leader/dot-leader.stories.mdx
index 6278d0f6f..ebfa9f584 100644
--- a/src/components/dot-leader/dot-leader.stories.mdx
+++ b/src/components/dot-leader/dot-leader.stories.mdx
@@ -1,5 +1,6 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
 import listDemo from './demo/list.twig';
+// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
 import listDemoSource from '!!raw-loader!./demo/list.twig';
 import topics from './demo/topics.json';
 import template from './dot-leader.twig';

From f6178df483e6acc6baf64c21b5bee1fa452ef4b4 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 1 Jul 2021 11:16:53 -0700
Subject: [PATCH 4/4] Add a comment

---
 src/components/dot-leader/dot-leader.stories.mdx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/dot-leader/dot-leader.stories.mdx b/src/components/dot-leader/dot-leader.stories.mdx
index ebfa9f584..5577fe52f 100644
--- a/src/components/dot-leader/dot-leader.stories.mdx
+++ b/src/components/dot-leader/dot-leader.stories.mdx
@@ -1,7 +1,14 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
-import listDemo from './demo/list.twig';
+// The '!!raw-loader!' syntax is a non-standard, Webpack-specific, syntax.
+// See: https://github.com/webpack-contrib/raw-loader#examples
+// For now, it seems likely Storybook is pretty tied to Webpack, therefore, we are
+// okay with the following Webpack-specific raw loader syntax. It's better to leave
+// the ESLint rule enabled globally, and only thoughtfully disable as needed (e.g.
+// within a Storybook docs page and not within an actual component).
+// This can be revisited in the future if Storybook no longer relies on Webpack.
 // eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
 import listDemoSource from '!!raw-loader!./demo/list.twig';
+import listDemo from './demo/list.twig';
 import topics from './demo/topics.json';
 import template from './dot-leader.twig';
 const argTypes = {