diff --git a/docs/guides/customizing-template-rendering.md b/docs/guides/customizing-template-rendering.md index 7308779b..dc5e86f2 100644 --- 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: ``` -## 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
@@ -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 %} + + +``` diff --git a/docs/reference/api.md b/docs/reference/api.md index ae690224..a8a4efa2 100644 --- a/docs/reference/api.md +++ b/docs/reference/api.md @@ -42,6 +42,20 @@ tags: ``` +### `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 %} + + + {{ menu.parent.get_menu_title }} + +``` + ## Settings See [Getting started](../getting-started.md) for more guided information. diff --git a/pattern_library/__init__.py b/pattern_library/__init__.py index 7ab4235d..2de11770 100644 --- 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 index 65f48399..0077612b 100644 --- a/tests/templates/patterns/atoms/sprites/sprites.html +++ b/tests/templates/patterns/atoms/sprites/sprites.html @@ -17,3 +17,16 @@ +{# Show available icons, in pattern library view only #} +{% if is_pattern_library %} + + +{% endif %} diff --git a/tests/tests/test_context_modifiers.py b/tests/tests/test_context_modifiers.py index 80def512..6a646567 100644 --- 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", },