Add support for is_pattern_library context variable. Fix #156 (#167)

torchbox · Jan 6, 2022 · b38e834 · b38e834
1 parent c06f211
commit b38e834
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 4 deletions.
diff --git a/docs/guides/customizing-template-rendering.md b/docs/guides/customizing-template-rendering.md
@@ -22,9 +22,9 @@ You can for example add a theme wrapper around the components:
 <body class="{% block body_class %}{% endblock %}{% if pattern_library_rendered_pattern %} pattern-library-template{% endif %}">
 ```
 
-## Customizing a single pattern’s rendering
+## Customizing a single pattern’s surroundings
 
-There is no API to customize a single pattern’s rendering, but it can be done by using pattern-library-only templates. For example, with our `quote_block.html` component:
+There is no API to customize a single pattern’s surroundings, but it can be done by using pattern-library-only templates. For example, with our `quote_block.html` component:
 
 ```django
 <blockquote class="quote-block block--spacing">
@@ -46,3 +46,29 @@ We could create another template next to it called `quote_block_example.html`,
 ```
 
 This is a fair amount of boilerplate, but neatly solves the problem per pattern.
+
+## Customizing a single pattern’s rendering
+
+Sometimes, it can help for a pattern to work differently in the pattern library. This can be done to make it easier to test, or to avoid rendering parts of a component that have intricate dependencies in the context of the pattern library.
+
+We can do this with the `is_pattern_library` context variable. Here is an example where we bypass loading the real menu data and would instead use the pattern library’s mock context:
+
+```django
+{% load hub_tags %}
+
+{# Check if this is loading the pattern library or not. #}
+{% if not is_pattern_library %}
+    {% get_hub_menu page as menu %}
+{% endif %}
+
+<nav>
+    <ul>
+        <li class="hub-menu__list-item">
+            <a class="hub-menu__link href="{{ menu.parent.url }}">
+                {{ menu.parent.get_menu_title }}
+            </a>
+        </li>
+        […]
+    </ul>
+</nav>
+```
diff --git a/docs/reference/api.md b/docs/reference/api.md
@@ -42,6 +42,20 @@ tags:
 </body>
 ```
 
+### `is_pattern_library`
+
+`is_pattern_library` is available in the template context of each pattern, and is `True` if the pattern is being rendered in the pattern library.
+
+```django
+{% if not is_pattern_library %}
+    {% get_hub_menu page as menu %}
+{% endif %}
+
+<a class="hub-menu__link href="{{ menu.parent.url }}">
+    {{ menu.parent.get_menu_title }}
+</a>
+```
+
 ## Settings
 
 See [Getting started](../getting-started.md) for more guided information.

diff --git a/pattern_library/__init__.py b/pattern_library/__init__.py
@@ -62,4 +62,4 @@ def get_sections():
 
 
 def get_pattern_context_var_name():
-    return '__pattern_library_view'
+    return 'is_pattern_library'
diff --git a/tests/templates/patterns/atoms/sprites/sprites.html b/tests/templates/patterns/atoms/sprites/sprites.html
@@ -17,3 +17,16 @@
         <path d="M1 4.364l3.536 3.535 6.363-6.363" stroke="currentColor" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"/>
     </symbol>
 </svg>
+{# Show available icons, in pattern library view only #}
+{% if is_pattern_library %}
+<template>
+    {% include "patterns/atoms/icons/icon.html" with name="__icon__" %}
+</template>
+<script>
+    const template = document.currentScript.previousElementSibling;
+    const symbols = [...template.previousElementSibling.querySelectorAll('symbol')];
+    const list = document.createElement('ul');
+    list.innerHTML = symbols.map(el => `<li>${el.id}&nbsp;${template.innerHTML.replace(/__icon__/g, el.id)}</li>`).join('');
+    document.body.appendChild(list);
+</script>
+{% endif %}
diff --git a/tests/tests/test_context_modifiers.py b/tests/tests/test_context_modifiers.py
@@ -124,7 +124,7 @@ def test_applied_by_render_pattern(self, render_to_string):
             request=request,
             context={
                 "atom_var": "atom_var value from test_atom.yaml",
-                "__pattern_library_view": True,
+                "is_pattern_library": True,
                 "foo": "bar",
                 "beep": "boop",
             },