From e165b2e794f5a291f3405218beceac37969b85b0 Mon Sep 17 00:00:00 2001
From: Mark Perkins <mark@allmarkedup.com>
Date: Tue, 22 Feb 2022 21:07:19 +0000
Subject: [PATCH] Add list example with item slots

---
 app/components/elements/list_component.rb         | 15 +++++++++++++++
 .../previews/elements/list_component_preview.rb   | 13 +++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 app/components/elements/list_component.rb
 create mode 100644 test/components/previews/elements/list_component_preview.rb

diff --git a/app/components/elements/list_component.rb b/app/components/elements/list_component.rb
new file mode 100644
index 0000000..c51c98b
--- /dev/null
+++ b/app/components/elements/list_component.rb
@@ -0,0 +1,15 @@
+class Elements::ListComponent < ViewComponent::Base
+  renders_many :items, "ItemComponent"
+
+  def call
+    tag.ol do
+      safe_join items
+    end
+  end
+
+  class ItemComponent < ViewComponent::Base
+    def call
+      tag.li content
+    end
+  end
+end
diff --git a/test/components/previews/elements/list_component_preview.rb b/test/components/previews/elements/list_component_preview.rb
new file mode 100644
index 0000000..3872528
--- /dev/null
+++ b/test/components/previews/elements/list_component_preview.rb
@@ -0,0 +1,13 @@
+# @label Simple list
+class Elements::ListComponentPreview < ViewComponent::Preview
+  # This example uses the `with_content` helper to set inline content.
+  #
+  # You can read more about it in the ViewComponent [slots documentation](https://viewcomponent.org/guide/slots.html#with_content).
+  def default
+    render Elements::ListComponent.new do |list|
+      list.item.with_content "One"
+      list.item.with_content "Two"
+      list.item.with_content "Three"
+    end
+  end
+end