Merge pull request #563 from alphagov/use-macro-in-data-pass-example

Add example of passing data in Nunjucks macros

CHANGELOG.md

@@ -1,7 +1,7 @@
 # Unreleased
 
 New features:
-
+- [#563 Add Nunjucks macro example to 'passing data' guidance](https://github.com/alphagov/govuk-prototype-kit/pull/563)
 - [#557 Bump outdated dependencies](https://github.com/alphagov/govuk-prototype-kit/pull/557):
   - Update standard from 10.0.2 to 11.0.1 and fix violations
   - Update run-sequence from 1.2.2 to 2.2.1

docs/views/examples/pass-data/index.html

@@ -81,6 +81,46 @@ <h3 class="govuk-heading-s">
 
       <h2 class="govuk-heading-m">Advanced features</h2>
 
+      <h3 class="govuk-heading-s">
+        Using the data in Nunjucks macros
+      </h3>
+
+      <p>Example using the 'checked' function in a checkbox component macro:</p>
+
+<pre class="app-code"><code>{% raw %}
+{{ govukCheckboxes({
+  name: "vehicle-features",
+  fieldset: {
+    legend: {
+      text: "Which of these applies to your vehicle?"
+    }
+  },
+  hint: {
+    text: "Select all that apply"
+  },
+  items: [
+    {
+      value: "Heated seats",
+      text: "Heated seats",
+      id: "vehicle-features-heated-seats",
+      checked: checked("vehicle-features", "Heated seats")
+    },
+    {
+      value: "GPS",
+      text: "GPS",
+      id: "vehicle-features-gps",
+      checked: checked("vehicle-features", "GPS")
+    },
+    {
+      value: "Radio",
+      text: "Radio",
+      id: "vehicle-features-radio",
+      checked: checked("vehicle-features", "Radio")
+    }
+  ]
+}) }}
+{% endraw %}<code></pre>
+
       <h3 class="govuk-heading-s">
         Using the data on the server
       </h3>