From ed521df71fb5684f1f85f4f54b45844155bf5a52 Mon Sep 17 00:00:00 2001
From: seb-jean <sebastien.jean76@gmail.com>
Date: Fri, 25 Oct 2024 16:26:36 +0200
Subject: [PATCH] [Turbo] Add `<Turbo:Frame>` component

---
 src/Turbo/CHANGELOG.md                        |  1 +
 src/Turbo/doc/index.rst                       | 38 +++++++++++++++++++
 .../templates/components/Frame.html.twig      |  5 +++
 3 files changed, 44 insertions(+)
 create mode 100644 src/Turbo/templates/components/Frame.html.twig

diff --git a/src/Turbo/CHANGELOG.md b/src/Turbo/CHANGELOG.md
index cd68756d85..872b94307b 100644
--- a/src/Turbo/CHANGELOG.md
+++ b/src/Turbo/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## 2.22.0
 
 -   Add `<twig:Turbo:Stream>` component
+-   Add `<twig:Turbo:Frame>` component
 
 ## 2.21.0
 
diff --git a/src/Turbo/doc/index.rst b/src/Turbo/doc/index.rst
index c6e4ecfce5..4618bd701c 100644
--- a/src/Turbo/doc/index.rst
+++ b/src/Turbo/doc/index.rst
@@ -250,6 +250,44 @@ a Turbo Frame, and retrieve the ID of this frame::
         }
     }
 
+<twig:Turbo:Frame> Twig Component
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+.. versionadded:: 2.22
+
+    The ``<twig:Turbo:Frame>`` Twig Component was added in Turbo 2.22.
+
+Simple example:
+
+.. code-block:: html+twig
+
+    <twig:Turbo:Frame id="the_frame_id" />
+
+    {# renders as: #}
+    <turbo-frame id="the_frame_id"></turbo-frame>
+
+With a HTML attribute:
+
+.. code-block:: html+twig
+
+    <twig:Turbo:Frame id="the_frame_id" loading="lazy" src="{{ path('block') }}" />
+
+    {# renders as: #}
+    <turbo-frame id="the_frame_id" loading="lazy" src="https://example.com/block"></turbo-frame>
+
+With content:
+
+.. code-block:: html+twig
+
+    <twig:Turbo:Frame id="the_frame_id" src="{{ path('block') }}">
+        A placeholder.
+    </twig:Turbo:Frame>
+
+    {# renders as: #}
+    <turbo-frame id="the_frame_id" src="https://example.com/block">
+        A placeholder.
+    </turbo-frame>
+
 Writing Tests
 ^^^^^^^^^^^^^
 
diff --git a/src/Turbo/templates/components/Frame.html.twig b/src/Turbo/templates/components/Frame.html.twig
new file mode 100644
index 0000000000..bd39367cbf
--- /dev/null
+++ b/src/Turbo/templates/components/Frame.html.twig
@@ -0,0 +1,5 @@
+{% props id -%}
+
+<turbo-frame id="{{ id }}" {{- attributes }}>
+    {%- block content %}{% endblock -%}
+</turbo-frame>