From 41f59f1869028f32568d56d3e5256ee82594bb10 Mon Sep 17 00:00:00 2001
From: Marie CHARLES <marie.charles@sensiolabs.com>
Date: Wed, 26 Jul 2023 09:37:51 +0200
Subject: [PATCH] [Docs] Anonymous twig components

---
 src/TwigComponent/doc/index.rst | 64 +++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/src/TwigComponent/doc/index.rst b/src/TwigComponent/doc/index.rst
index dfca8b8172b..21f036a49b9 100644
--- a/src/TwigComponent/doc/index.rst
+++ b/src/TwigComponent/doc/index.rst
@@ -1050,6 +1050,70 @@ And in your component template you can access your embedded block
         {% block footer %}{% endblock %}
      </div>
 
+Anonymous Components
+--------------------
+
+Sometimes a component is simple enough that it doesn't have any complex logic or injected services.
+In this case, you can skip the class and only create the template. The component name is determined
+by the location of the template (see `Twig Template Namespaces`_):
+
+.. code-block:: html+twig
+
+    {# templates/components/Button/Primary.html.twig #}
+    <button {{ attributes.defaults({ class: 'primary' }) }}>
+        {% block content %}{% endblock %}
+    </button>
+
+Then use your component with ``:`` to navigate through sub-directories (if there are any):
+
+.. code-block:: html+twig
+
+    {# index.html.twig #}
+    ...
+    <div>
+       <twig:Button:Primary>Click Me!</twig:Button:Primary>
+    </div>
+
+    {# renders as: #}
+    <button class="primary">Click Me!</button>
+
+Like normal, you can pass extra attributes that will be rendered on the element:
+
+.. code-block:: html+twig
+
+    {# index.html.twig #}
+    ...
+    <div>
+       <twig:Button:Primary type="button" name="foo">Click Me!</twig:Button:Primary>
+    </div>
+
+    {# renders as: #}
+    <button class="primary" type="button" name="foo">Click Me!</button>
+
+You can also pass a variable (prop) into your template:
+
+.. code-block:: html+twig
+
+    {# index.html.twig #}
+    ...
+    <div>
+        <twig:Button icon="fa-plus" type="primary" role="button">Click Me!</twig:Button>
+    </div>
+
+To tell the system that ``icon`` and ``type`` are props and not attributes, use the ``{% props %}`` tag at the top of your template.
+
+.. code-block:: html+twig
+
+    {# templates/components/Button.html.twig #}
+    {% props icon = null, type = 'primary' %}
+
+    <button {{ attributes.defaults({ class: 'btn btn-'~type }) }}>
+        {% block content %}{% endblock %}
+        {% if icon %}
+            <span class="fa-solid fa-{{ icon }}"></span>
+        {% endif %}
+    </button>
+
 Test Helpers
 ------------