Pass object as attribute for Twig Component

IQ2i · Mar 27, 2024 · b2b00d3 · b2b00d3
1 parent 3a7e739
commit b2b00d3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/src/Factory/ComponentFactory.php b/src/Factory/ComponentFactory.php
@@ -86,9 +86,18 @@ public function createFromRequest(Request $request): ?Component
                 ? __DIR__.'/../../skeleton/component.tpl.php'
                 : __DIR__.'/../../skeleton/template.tpl.php';
 
+            $variantArgs = [];
+            foreach ($variantConfig['args'] as $name => $value) {
+                if (\is_array($value)) {
+                    $variantArgs[':'.$name] = str_replace('"', "'", json_encode($value, \JSON_FORCE_OBJECT | \JSON_NUMERIC_CHECK));
+                } else {
+                    $variantArgs[$name] = $value;
+                }
+            }
+
             $parameters = [
                 'template' => $component->getTemplate(),
-                'args' => $variantConfig['args'],
+                'args' => $variantArgs,
                 'blocks' => $variantConfig['blocks'],
             ];
 

diff --git a/tests/TestApplication/storia/components/button/button.yaml b/tests/TestApplication/storia/components/button/button.yaml
@@ -14,11 +14,17 @@ variants:
     plain_icon_left:
         args:
             class: text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center me-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
+            icon:
+                svg: <svg class="w-3.5 h-3.5 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 21"><path d="M15 12a1 1 0 0 0 .962-.726l2-7A1 1 0 0 0 17 3H3.77L3.175.745A1 1 0 0 0 2.208 0H1a1 1 0 0 0 0 2h.438l.6 2.255v.019l2 7 .746 2.986A3 3 0 1 0 9 17a2.966 2.966 0 0 0-.184-1h2.368c-.118.32-.18.659-.184 1a3 3 0 1 0 3-3H6.78l-.5-2H15Z"/></svg>
+                position: left
         blocks:
-            content: <svg class="w-3.5 h-3.5 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 21"><path d="M15 12a1 1 0 0 0 .962-.726l2-7A1 1 0 0 0 17 3H3.77L3.175.745A1 1 0 0 0 2.208 0H1a1 1 0 0 0 0 2h.438l.6 2.255v.019l2 7 .746 2.986A3 3 0 1 0 9 17a2.966 2.966 0 0 0-.184-1h2.368c-.118.32-.18.659-.184 1a3 3 0 1 0 3-3H6.78l-.5-2H15Z"/></svg> Buy now
+            content: Buy now
 
     plain_icon_right:
         args:
             class: text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center me-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
+            icon:
+                svg: <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/></svg>
+                position: right
         blocks:
-            content: Choose plan <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/></svg>
+            content: Choose plan
diff --git a/tests/TestApplication/templates/components/Button.html.twig b/tests/TestApplication/templates/components/Button.html.twig
@@ -1,3 +1,13 @@
+{% props icon = null %}
+
 <button {{ attributes.defaults({ class: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800' }) }}>
+    {% if icon is not null and icon.position|default == 'left' %}
+        {{ icon.svg|raw }}
+    {% endif %}
+
     {% block content %}{% endblock %}
+
+    {% if icon is not null and icon.position|default == 'right' %}
+        {{ icon.svg|raw }}
+    {% endif %}
 </button>