From dce3cd93bd323ec826219957f77f21d7d75a71a3 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 30 Jun 2021 14:10:42 -0700
Subject: [PATCH 1/2] Refine the Event Log code example

---
 .../event-log/event-log.stories.mdx           | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/components/event-log/event-log.stories.mdx b/src/components/event-log/event-log.stories.mdx
index 376f8a554..3583bd319 100644
--- a/src/components/event-log/event-log.stories.mdx
+++ b/src/components/event-log/event-log.stories.mdx
@@ -12,7 +12,43 @@ Displays a list of event details in chronological order. Designed to show the pr
 For a less specialized display of tabular data, consider using [Table](/docs/components-table--basic). For simple string/number pairs, consider [Dot Leader](/docs/components-dot-leader--list). To display a single or upcoming date, consider using [Calendar Date](/docs/components-calendar-date--basic) (optionally combined with [Media](/docs/objects-media--event-summary)).
 
 <Canvas>
-  <Story name="Example">{eventsDemoStory.bind({})}</Story>
+  <Story
+    name="Example"
+    parameters={{
+      docs: {
+        source: {
+          code: `{% embed '@cloudfour/components/event-log/event-log.twig' only %}
+  {% block content %}
+    {% for item in items %}
+      {% embed '@cloudfour/components/event-log/item.twig' with item only %}
+        {% block extra %}
+          {%- if item.links -%}
+            {% embed '@cloudfour/objects/list/list.twig' with {
+              class: 'o-list--inline'
+            } only %}
+              {% block content %}
+                {% for link in item.links %}
+                  <li>
+                    <a href="{{link.link}}">
+                      {{link.title}}
+                    </a>
+                  </li>
+                {% endfor %}
+              {% endblock %}
+            {% endembed %}
+          {%- endif -%}
+        {% endblock %}
+      {% endembed %}
+    {% endfor %}
+  {% endblock %}
+{% endembed %}
+`,
+        },
+      },
+    }}
+  >
+    {eventsDemoStory.bind({})}
+  </Story>
 </Canvas>
 
 ## Template Properties

From 8998a90079f4c836af249a0e66459ac64a8406e5 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 1 Jul 2021 15:30:18 -0700
Subject: [PATCH 2/2] Use raw-loader for demo

---
 .../event-log/event-log.stories.mdx           | 36 ++++++-------------
 1 file changed, 10 insertions(+), 26 deletions(-)

diff --git a/src/components/event-log/event-log.stories.mdx b/src/components/event-log/event-log.stories.mdx
index 3583bd319..4318b0064 100644
--- a/src/components/event-log/event-log.stories.mdx
+++ b/src/components/event-log/event-log.stories.mdx
@@ -1,5 +1,14 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
 import events from './demo/events.json';
+// 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 eventsDemoSource from '!!raw-loader!./demo/events.twig';
 import eventsDemo from './demo/events.twig';
 const eventsDemoStory = (args) => eventsDemo({ items: events, ...args });
 
@@ -17,32 +26,7 @@ For a less specialized display of tabular data, consider using [Table](/docs/com
     parameters={{
       docs: {
         source: {
-          code: `{% embed '@cloudfour/components/event-log/event-log.twig' only %}
-  {% block content %}
-    {% for item in items %}
-      {% embed '@cloudfour/components/event-log/item.twig' with item only %}
-        {% block extra %}
-          {%- if item.links -%}
-            {% embed '@cloudfour/objects/list/list.twig' with {
-              class: 'o-list--inline'
-            } only %}
-              {% block content %}
-                {% for link in item.links %}
-                  <li>
-                    <a href="{{link.link}}">
-                      {{link.title}}
-                    </a>
-                  </li>
-                {% endfor %}
-              {% endblock %}
-            {% endembed %}
-          {%- endif -%}
-        {% endblock %}
-      {% endembed %}
-    {% endfor %}
-  {% endblock %}
-{% endembed %}
-`,
+          code: eventsDemoSource,
         },
       },
     }}