From 21bcefcc6b9d25a0ef85d52a613acb33a118de0a Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Fri, 23 Aug 2024 15:27:14 +0200
Subject: [PATCH] renderSlots helper

---
 storyhelpers/index.ts        |  2 ++
 storyhelpers/render-slots.ts | 22 ++++++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 storyhelpers/index.ts
 create mode 100644 storyhelpers/render-slots.ts

diff --git a/storyhelpers/index.ts b/storyhelpers/index.ts
new file mode 100644
index 000000000..d5d4e05c7
--- /dev/null
+++ b/storyhelpers/index.ts
@@ -0,0 +1,2 @@
+export * from './spread-directive';
+export * from './render-slots';
diff --git a/storyhelpers/render-slots.ts b/storyhelpers/render-slots.ts
new file mode 100644
index 000000000..b3f8a3777
--- /dev/null
+++ b/storyhelpers/render-slots.ts
@@ -0,0 +1,22 @@
+import { html, nothing, TemplateResult } from 'lit';
+
+export function renderSlots(
+  slots: TemplateResult[],
+): TemplateResult | typeof nothing {
+  // Filter out any null or undefined slots to avoid rendering empty content
+  const validSlots = slots.filter(Boolean);
+
+  // If there are no valid slots, return an empty html result
+  if (validSlots.length === 0) {
+    return nothing;
+  }
+
+  // Join slots with consistent formatting; no extra line breaks between them
+  // prettier-ignore
+  const formattedSlots = validSlots.map((slot, index) =>
+    html`${ index === 0 ? '' : '\n'}  ${slot}`
+  );
+
+  // Return the combined template results
+  return html`${formattedSlots}`;
+}