Skip to content

Commit 16dace9

Browse files
committed
docs: adapted documentation
1 parent a82fd49 commit 16dace9

File tree

1 file changed

+1
-94
lines changed

1 file changed

+1
-94
lines changed

packages/docs/src/docs/pattern-parameters.md

Lines changed: 1 addition & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -11,97 +11,4 @@ sitemapPriority: '0.8'
1111
sitemapChangefreq: 'monthly'
1212
---
1313

14-
**Important:** Pattern parameters are supported by the Node Mustache PatternEngines. Other template languages provide better solutions to this problem.
15-
16-
Pattern parameters are a **simple** mechanism for replacing Mustache variables in an included pattern. They are limited to replacing variables in the included pattern and **only** the included pattern. They are especially useful when including a single pattern multiple times in a molecule, template, or page and you want to supply unique data to that pattern each time it's included. Pattern parameters **do not** currently support the following:
17-
18-
- sub-lists (_e.g. iteration of a section_),
19-
- long strings of text (_can be unwieldy_)
20-
- modifying/replacing variables in patterns included _within_ the targeted pattern
21-
22-
Pattern parameters are Pattern Lab-specific, have no relationship to Mustache, and are implemented outside of Mustache. Learn more about pattern parameters:
23-
24-
- [The Pattern Parameter Syntax](#pattern-parameter-syntax)
25-
- [Adding Pattern Parameters to Your Pattern Partial](#adding-pattern-parameters)
26-
- [Toggling Sections with Pattern Parameters](#toggling-sections)
27-
28-
## <span id="pattern-parameter-syntax"></span>The Pattern Parameter Syntax
29-
30-
The attributes listed in the pattern parameters need to match Mustache variable names in your pattern. The values listed for each attribute will replace the Mustache variables. For example:
31-
32-
{% raw %}{{> patternGroup-pattern(attribute1: value, attribute2: "value string") }}{% endraw %}
33-
34-
Again, pattern parameters are a simple find and replace of Mustache variables with the supplied values.
35-
36-
## <span id="adding-pattern-parameters"></span>Adding Pattern Parameters to Your Pattern Partial
37-
38-
Let's look at a simple example for how we might use pattern parameters. First we'll set-up a pattern that might be included multiple times. We'll make it a simple "message" pattern with a single Mustache variable of `message`.
39-
40-
```html
41-
<div class="message">{% raw %}{{ message }}{% endraw %}</div>
42-
```
43-
44-
We'll organize it under Atoms > Global and call it "message" so it'll have the pattern partial of `atoms-message`.
45-
46-
Now let's create a pattern that includes our message pattern partial multiple times. It might look like this.
47-
48-
```html
49-
<div class="main-container">
50-
{% raw %}{{> atoms-message }}{% endraw %}
51-
<div>
52-
A bunch of extra information
53-
</div>
54-
{% raw %}{{> atoms-message }}{% endraw %}
55-
</div>
56-
```
57-
58-
Using `data.json` or a pattern-specific JSON file we wouldn't be able to supply separate messages to each pattern partial. For example, if we defined `message` in our `data.json` as "this is an alert" then "this is an alert" would show up twice when our parent pattern was rendered.
59-
60-
Instead we can use pattern parameters to supply unique messages for each instance. So let's show what that would look like:
61-
62-
```html
63-
{% raw %}
64-
<div class="main-container">
65-
{{> atoms-message(message: "this is an alert message") }}
66-
<div>
67-
A bunch of extra information
68-
</div>
69-
{{> atoms-message(message: "this is an informational message") }}
70-
</div>
71-
{% endraw %}
72-
```
73-
74-
Now each pattern would have its very own message.
75-
76-
## <span id="toggling-sections"></span>Toggling Sections with Pattern Parameters
77-
78-
While pattern parameters are not a one-to-one match for Mustache they do offer the ability to toggle sections of content. For example we might have the following in a generic header pattern called `organisms-header`:
79-
80-
```html
81-
{% raw %}
82-
<div class="main-container">
83-
{{# emergency }}
84-
<div class="alert">Emergency!!!</div>
85-
{{/ emergency }}
86-
<div class="header">
87-
... stuff ...
88-
</div>
89-
</div>
90-
{% endraw %}
91-
```
92-
93-
We call the header pattern in a template like so:
94-
95-
```
96-
{% raw %}{{> organisms-header }}{% endraw %}
97-
... stuff ...
98-
```
99-
100-
By default, if we don't have an `emergency` attribute in our `data.json` or the pattern-specific JSON file for the template the emergency alert will never be rendered. Instead of modifying either of those two files we can use a boolean pattern param to show it instead like so:
101-
102-
```
103-
{% raw %}{{> organisms-header(emergency: true) }}{% endraw %}
104-
... stuff ...
105-
```
106-
107-
Again, because pattern parameters aren't leveraging Mustache this may not fit the normal Mustache workflow. We still wanted to offer a way to quickly turn on and off sections of an included pattern.
14+
Passing parameters parameters to included patterns are a **simple** mechanism for replacing variables in an included pattern, by each of the standard ways of how to do it either in handlebars ([Partial Parameters](https://handlebarsjs.com/guide/partials.html#partial-parameters)) or twig ([include with `with` keyword](https://twig.symfony.com/doc/3.x/tags/include.html#:~:text=You%20can%20add%20additional%20variables%20by%20passing%20them%20after%20the%20with%20keyword%3A)) template language. They are limited to replacing variables in the included pattern and **only** the included pattern. They are especially useful when including a single pattern multiple times in a molecule, template, or page and you want to supply unique data to that pattern each time it's included.

0 commit comments

Comments
 (0)