[TwigComponent] Document how to define mandatory/default props

Author: alexislefebvre

src/TwigComponent/doc/index.rst

@@ -700,12 +700,14 @@ You can also pass a variable (prop) into your template:
     </div>
 
 To tell the system that ``icon`` and ``type`` are props and not attributes, use the
-``{% props %}`` tag at the top of your template.
+``{% props %}`` tag at the top of your template. Props are required by default, but
+it is possible to set a default value with ``=``:
 
 .. code-block:: html+twig
 
     {# templates/components/Button.html.twig #}
-    {% props icon = null, type = 'primary' %}
+    {# prop "icon" is required, but prop "type" has a default value to "primary" #}
+    {% props icon, type = 'primary' %}
 
     <button {{ attributes.defaults({class: 'btn btn-'~type}) }}>
         {% block content %}{% endblock %}
@@ -714,6 +716,19 @@ To tell the system that ``icon`` and ``type`` are props and not attributes, use
         {% endif %}
     </button>
 
+Examples of usage:
+
+.. code-block:: html+twig
+
+    {# property "icon" is missing, an exception is thrown #}
+    <twig:Button>Share</twig:Button>
+
+    {# property "icon" is passed, property "type" use its default value "primary" #}
+    <twig:Button icon="share">Share</twig:Button>
+
+    {# both properties "icon" and "type" are passed #}
+    <twig:Button icon="share" type="secondary>Share</twig:Button>
+
 .. _embedded-components:
 
 Passing HTML to Components Via Blocks