From e4f68999510c958c61652eb45abc566910b3b808 Mon Sep 17 00:00:00 2001
From: oli-rose <124210444+oli-rose28@users.noreply.github.com>
Date: Thu, 6 Jul 2023 16:37:25 +0100
Subject: [PATCH] filters and functions guide

---
 docs/v13/documentation/filters-functions.md | 45 ++++++---------------
 1 file changed, 12 insertions(+), 33 deletions(-)

diff --git a/docs/v13/documentation/filters-functions.md b/docs/v13/documentation/filters-functions.md
index 33f50375..6d52815d 100644
--- a/docs/v13/documentation/filters-functions.md
+++ b/docs/v13/documentation/filters-functions.md
@@ -1,44 +1,31 @@
 ---
-heading: Apply filters and functions to format or change content or Create dynamic content
+heading: Use filters to change how answers appear
 ---
 
-> To apply filters and functions, you need to know how to [pass data from page to page](./pass-data).
+> To use filters, you need to know how to [pass data from page to page](./pass-data).
 
-The kit stores data from all answers that users give in a prototype, so that you can use or show the answers later. np
+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. 
 
-To change the format of how these answers appear, you can apply filters and functions. For example, to change the font from lower to uppercase.
+You can create your own filters or [use existing Nunjucks filters](https://mozilla.github.io/nunjucks/templating.html#builtin-filters) in the kit. For example, you can use the Nunjucks `upper` filter to change the format of text to upper case:
 
-## Filters and functions
-You can use filters to change how content appears on a page. For example, to change the format of a date from 28/08/2023 to 28th August 2023.
-
-Functions perform tasks or calculate values by taking an input and returning an output, so that you caan dynamically add content to a page. They are useful if you want to include content that will change over time, like a date.
+```
+{{ data['name'] | upper }}
+```
 
-For example, if you ask the user when they taxed their vehicle, you can use their answer to show: 
-- the date their vehicle tax runs out 
-- how many days are left until their tax runs out
 
-### Nunjucks filters
+### Create a Nunjucks filter
 
-You can create your own filters or use existing Nunjucks filters in the kit. For example, you can use the Nunjucks `uppercase` filter to change the format of text:
+Add your own filters to the `app/filters.js` file. Filters are written in JavaScript.
 
 ```
-const { addFilter } = require('govuk-prototype-kit').views
+const govukPrototypeKit = require('govuk-prototype-kit')
+const addFilter = govukPrototypeKit.views.addFilter
 
-addFilter(someFilter.uppercase', function (content) {
+addFilter('uppercase', function (content) {
   return content.toUpperCase()
 })
 ```
 
-Nunjucks will use default formatting to show content. If you want to make other changes to the HTML, you need to use `renderAsHtml`. For example, this filter makes text uppercase and bold:
-
-```
-const { addFilter } = require('govuk-prototype-kit').views
-
-addFilter(someFilter.uppercase', function (content) {
-  return '<strong>' + content + '</strong>'
-}, { renderAsHtml: true })
-```
-
 ### Apply multiple filters together
 
 You can add multiple filters to a file using one require statement. For example, these 2 filters are in a `filters.js` file:
@@ -54,15 +41,7 @@ addFilter(someFilter.uppercase', function (content) {
   return '<strong>' + content + '</strong>'
 }, { renderAsHtml: true })
 ```
-Add these filters in your `govuk-prototype-kit.config.json`:
 
-```
-{
-  "filters": [
-    "/filters.js"
-  ]
-}
-```
 You can use these filters on each page in your prototype:
 
 ```