add custom twig include usage in test

FriendsOfTrowel · Jun 13, 2017 · 3a2cd79 · 3a2cd79
1 parent f873892
commit 3a2cd79
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 24 deletions.
diff --git a/src/twig/breadcrumb.html.twig b/src/twig/breadcrumb.html.twig
@@ -26,25 +26,43 @@
     data-flag="breadcrumb"
     {{ attrsGenerated|raw }}
 >
-    <div class="{{ elementSelector ~ 'header' }}">
-        <button class="{{ elementSelector ~ 'toggle' }}" data-breadcrumb="toggle">
-            Previous pages
-        </button>
-
-        <a class="{{ elementSelector ~ 'back' }}" onclick="history.go(-1)">Back</a>
-    </div>
-
-    <ul class="{{ elementSelector ~ 'list' }}" data-breadcrumb="list" data-state="hidden">
-        <li class="{{ elementSelector ~ 'list-item' }}">
-            <a class="{{ elementSelector ~ 'item' }}" href="#">item 1</a>
-        </li>
-
-        <li class="{{ elementSelector ~ 'list-item' }}">
-            <a class="{{ elementSelector ~ 'item' }}" href="#">item 2</a>
-        </li>
-
-        <li class="{{ elementSelector ~ 'list-item' }}">
-            <span class="{{ elementSelector ~ 'item' }} {{ elementSelector ~ 'item' ~ syntax.separator.modifier ~ 'active' }}">item 3</span>
-        </li>
-    </ul>
+    {% block header %}
+        <div class="{{ elementSelector ~ 'header' }}">
+            {% block toggle %}
+                <button class="{{ elementSelector ~ 'toggle' }}" data-breadcrumb="toggle">
+                    {% block toggle_label %}Previous pages{% endblock %}
+                </button>
+            {% endblock toggle %}
+
+            {% block back %}
+                <a class="{{ elementSelector ~ 'back' }}" onclick="history.go(-1)">
+                    {% block back_label %}Back{% endblock %}
+                </a>
+            {% endblock back %}
+        </div>
+    {% endblock header %}
+
+    {% block list %}
+        <ul class="{{ elementSelector ~ 'list' }}" data-breadcrumb="list" data-state="hidden">
+            {% block list_inner %}
+                {% for item in items %}
+                    {% set itemActive = item.active|default(false) %}
+
+                    <li class="{{ elementSelector ~ 'list-item' }}">
+                        {% if itemActive %}
+                            <span class="{{ elementSelector ~ 'item' }} {{ elementSelector ~ 'item' ~ syntax.separator.modifier ~ 'active' }}">
+                        {% else %}
+                            <a class="{{ elementSelector ~ 'item' }}"{% if item.href|default(false) %} href="{{ item.href }}"{% endif %}>
+                        {% endif %}
+                            {{ item.label }}
+                        {% if itemActive %}
+                            </span>
+                        {% else %}
+                            </a>
+                        {% endif %}
+                    </li>
+                {% endfor %}
+            {% endblock list_inner %}
+        </ul>
+    {% endblock list %}
 </nav>
diff --git a/test/src/index.html.twig b/test/src/index.html.twig
@@ -15,9 +15,19 @@
         Breadcrumbs
     </h1>
 
-    {% embed '../../src/twig/breadcrumb.html.twig' %}
-        {% block body %}hello world !{% endblock %}
-    {% endembed %}
+    {% include '../../src/twig/breadcrumb.html.twig' with {
+        "items": [{
+            "href": "#",
+            "label": "item 1",
+        }, {
+            "href": "#",
+            "label": "item 2",
+        }, {
+            "label": "item 3",
+            "active": true,
+        }]
+    } %}
+
 
     <script src="./javascript/breadcrumbs.js"></script>