Added filters page and link from how-tos

app/views/how-tos/filters.html

@@ -0,0 +1,108 @@
+{% extends "layout.html" %}
+
+{% block pageTitle %}
+Filters - NHS prototype kit
+{% endblock %}
+
+{% block beforeContent %}
+  {% include "how-tos/includes/breadcrumb.html" %}
+{% endblock %}
+
+{% block content %}
+
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-three-quarters">
+    <h1>Filters</h1>
+    <p class="nhsuk-lede-text">
+      Change how answers are shown.
+      </p>
+
+    {{ insetText({ html: '
+    <p>
+      To use filters, you need to know how to
+      <a href="passing-data-page">pass data from page to page</a>.
+    </p>
+    ' })}}
+
+    <p>
+      The kit stores data from all answers that users give in a prototype, so
+      that you can use or show the answers later. To change the format of how
+      these answers appear, you can apply filters. You can:</p>
+
+    <ul class="nshuk-list nhsuk-list-bullet">
+      <li>use existing Nunjucks filters</li>
+      <li>create a Nunjucks filter</li>
+      <li>use filters from other projects (recommended for advanced users only)</li>
+    </ul>
+    <h2 class="nhsuk-heading-m">Use existing Nunjucks filters</h2>
+    <p>
+      You can
+      <a
+        href="https://mozilla.github.io/nunjucks/templating.html#builtin-filters"
+        >use existing Nunjucks filters</a
+      >
+      in the kit. For example, you can use the Nunjucks
+      <code>upper</code> filter to change the format of text to upper case:
+    </p>
+
+    <pre
+      class="app-pre"
+    ><code class="app-code">&#123;{ data['name'] | upper }}</code></pre>
+
+    <h2 class="nhsuk-heading-m">Create a Nunjucks filter</h2>
+    <p>
+      Add your own filters to the <code>filters.js</code> file. Filters are
+      written in JavaScript.
+    </p>
+    <pre
+      class="app-pre"
+    ><code class="app-code">module.exports = function (env) { /* eslint-disable-line func-names,no-unused-vars */
+  const filters = {};
+
+  filters.uppercase = function(content) {
+    return content.toUpperCase()
+  }
+  return filters;
+};</code>
+</pre>
+    <p>Then use it on a page like this:</p>
+    <pre
+      class="app-pre"
+    ><code class="app-code">&#123;{ data['name'] | uppercase }&#125;</code></pre>
+
+    <h3 class="nhsuk-heading-s">Use HTML in a Nunjucks filter</h3>
+    <p>If you want to use HTML in a filter, write the filter:</p>
+    <pre
+      class="app-pre"
+    ><code class="app-code">{{ " filters.bold = function (content) {
+  return '<strong>' + content + '</strong>';
+  // remember to use 'safe' after to get the HTML formatting
+}" | escape }} </code></pre>
+    <p>Then use it on a page with the extra filter <code>safe</code>:</p>
+    <pre
+      class="app-pre"
+    ><code class="app-code">{{"{{ data['name'] | bold | safe }}" | escape }}</code></pre>
+    <p>
+      Safe makes the filter format the HTML and not just show the code
+      <code>{{"<strong></strong>" | escape }}</code>.
+    </p>
+
+    <p>You can also use these filters together:</p>
+    <pre
+      class="app-pre"
+    ><code class="app-code">{{"{{ data['name'] | upper |  bold | safe }}" | escape }}</code></pre>
+
+    <h2 class="nhsuk-heading-m">Use filters from other projects (recommended for advanced users only)</h2>
+    <p>
+      If you are confident with Javascript, you can install and import filters from other projects like the X-GOVUK Prototype Filters
+      project.
+      </p>
+      <p>You will need to change your <code>filters.js</code> file using the the instructions for 'Using with earlier versions of the Prototype Kit'.
+    </p>
+    <p>
+      <a href="https://x-govuk.github.io/govuk-prototype-filters/get-started/">Go to the X-GOV.UK GOV.UK Prototype filters project</a>
+    </p>
+
+  </div>
+</div>
+{% endblock %}

app/views/how-tos/index.html

@@ -91,6 +91,8 @@ <h2 class="nhsuk-heading-s">General use</h2>
         <li><a href="/how-tos/components">Using components</a></li>
         <li><a href="/how-tos/passing-data-page">Passing data page to page</a></li>
         <li><a href="/how-tos/branching">Branching</a> – show a different page based on user input</li>
+        <li><a href="/how-tos/filters">Filters</a> - change how answers are shown</li>
+
       </ul>
 
         <h2 class="nhsuk-heading-s">Share your prototype</h2>