From 2f74b07e92faf8ff13f4506d11009a19c8b02fe9 Mon Sep 17 00:00:00 2001
From: Dan Poltawski <dan@moodle.com>
Date: Thu, 8 Dec 2016 15:53:54 +0000
Subject: [PATCH 1/5] MDL-57338 mustache: fix admin_setting_tabs

* Add example context
* Fix validation issue (need role="tablist" to contain the tabs)
---
 .../templates/admin_setting_tabs.mustache     | 24 ++++++++++++++++++-
 .../theme_boost/admin_setting_tabs.mustache   | 24 ++++++++++++++++++-
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/theme/boost/templates/admin_setting_tabs.mustache b/theme/boost/templates/admin_setting_tabs.mustache
index 4d369b8fbdb..e1db0f29435 100644
--- a/theme/boost/templates/admin_setting_tabs.mustache
+++ b/theme/boost/templates/admin_setting_tabs.mustache
@@ -14,7 +14,29 @@
     You should have received a copy of the GNU General Public License
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
-<ul class="nav nav-tabs">
+{{!
+    @template theme_boost/admin_setting_tabs
+
+
+    Example context (json):
+    {
+        "tabs": [
+         {
+            "name": "tab1",
+            "active": 0,
+            "displayname": "Inactive tab1",
+            "html": "<p>Tab 1 content</p>"
+         },
+         {
+            "name": "tab2",
+            "active": 1,
+            "displayname": "Active tab2",
+            "html": "<p>Tab 2 content</p>"
+         }
+        ]
+    }
+}}
+<ul class="nav nav-tabs" role="tablist">
     {{#tabs}}
         <li class="nav-item">
             <a href="#{{name}}" class="nav-link {{#active}}active{{/active}}" data-toggle="tab" role="tab">{{displayname}}</a>
diff --git a/theme/bootstrapbase/templates/theme_boost/admin_setting_tabs.mustache b/theme/bootstrapbase/templates/theme_boost/admin_setting_tabs.mustache
index ba6240c4b5d..56593022d9d 100644
--- a/theme/bootstrapbase/templates/theme_boost/admin_setting_tabs.mustache
+++ b/theme/bootstrapbase/templates/theme_boost/admin_setting_tabs.mustache
@@ -14,7 +14,29 @@
     You should have received a copy of the GNU General Public License
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
-<ul class="nav nav-tabs">
+{{!
+    @template theme_boost/admin_setting_tabs
+
+
+    Example context (json):
+    {
+        "tabs": [
+        {
+            "name": "tab1",
+            "active": 0,
+            "displayname": "Inactive tab1",
+            "html": "<p>Tab 1 content</p>"
+         },
+         {
+            "name": "tab2",
+            "active": 1,
+            "displayname": "Active tab2",
+            "html": "<p>Tab 2 content</p>"
+         }
+        ]
+    }
+}}
+<ul class="nav nav-tabs" role="tablist">
     {{#tabs}}
         <li class="{{#active}}active{{/active}}">
             <a href="#{{name}}" data-toggle="tab" role="tab">{{displayname}}</a>

From b4a65796cf03acb0d8c878596b04679586c320fd Mon Sep 17 00:00:00 2001
From: Dan Poltawski <dan@moodle.com>
Date: Fri, 9 Dec 2016 12:17:31 +0000
Subject: [PATCH 2/5] MDL-57338 chart: add example context

And fix aria roles
---
 lib/templates/chart.mustache | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/lib/templates/chart.mustache b/lib/templates/chart.mustache
index 34867354670..fdb9a944214 100644
--- a/lib/templates/chart.mustache
+++ b/lib/templates/chart.mustache
@@ -15,17 +15,25 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/chart
+
     Chart rendering.
+
+    Example context (json):
+    {
+        "withtable": true,
+        "chartdata": "null"
+    }
 }}
 <div class="chart-area" id="chart-area-{{uniqid}}">
-    <div class="chart-image" role="decoration" aria-describedby="chart-table-data-{{uniqid}}"></div>
+    <div class="chart-image" role="presentation" aria-describedby="chart-table-data-{{uniqid}}"></div>
     <div class="chart-table {{^withtable}}accesshide{{/withtable}}">
         <p class="chart-table-expand">
             <a href="#" aria-controls="chart-table-data-{{uniqid}}" role="button">
                 {{#str}}showchartdata, moodle{{/str}}
             </a>
         </p>
-        <div class="chart-table-data" id="chart-table-data-{{uniqid}}" {{#withtable}}aria-expanded="false"{{/withtable}}></div>
+        <div class="chart-table-data" id="chart-table-data-{{uniqid}}" {{#withtable}}role="complementary" aria-expanded="false"{{/withtable}}></div>
     </div>
 </div>
 

From 2d29386c449442790412118e9ec864912d2cc1b2 Mon Sep 17 00:00:00 2001
From: Dan Poltawski <dan@moodle.com>
Date: Fri, 9 Dec 2016 12:17:39 +0000
Subject: [PATCH 3/5] MDL-57338 templates: add missing example context

---
 lib/templates/action_menu.mustache            | 15 +++++++++++--
 lib/templates/action_menu_item.mustache       |  7 +++++++
 lib/templates/action_menu_link.mustache       |  9 ++++++++
 lib/templates/action_menu_trigger.mustache    |  9 ++++++++
 lib/templates/actions.mustache                |  7 +++++++
 lib/templates/chooser.mustache                | 19 +++++++++++++++++
 lib/templates/chooser_item.mustache           | 11 ++++++++++
 lib/templates/dataformat_selector.mustache    | 13 ++++++++++--
 lib/templates/email_fromname.mustache         |  7 ++++++-
 lib/templates/email_html.mustache             |  5 +++++
 lib/templates/email_subject.mustache          |  7 ++++++-
 lib/templates/email_text.mustache             |  5 +++++
 lib/templates/help_icon.mustache              | 16 ++++++++++++++
 lib/templates/hover_tooltip.mustache          |  4 ++++
 lib/templates/loading.mustache                |  3 +++
 lib/templates/login.mustache                  | 21 ++++++++++++++++++-
 lib/templates/pix_icon.mustache               |  5 +++--
 lib/templates/progress_bar.mustache           |  6 ++++--
 lib/templates/select_time.mustache            | 13 ++++++++++++
 lib/templates/signup_form_layout.mustache     |  8 +++++++
 lib/templates/skip_links.mustache             | 11 ++++++++++
 .../boost/templates/core/action_menu.mustache | 13 ++++++++++++
 .../templates/core/action_menu_item.mustache  |  7 +++++++
 .../templates/core/action_menu_link.mustache  |  9 ++++++++
 theme/boost/templates/core/chooser.mustache   | 19 +++++++++++++++++
 .../core/dataformat_selector.mustache         | 10 +++++++++
 theme/boost/templates/core/help_icon.mustache | 19 +++++++++++++++++
 .../templates/core/progress_bar.mustache      |  8 ++++---
 .../boost/templates/core/select_time.mustache | 13 ++++++++++++
 .../core/signup_form_layout.mustache          | 10 +++++++++
 .../boost/templates/core/skip_links.mustache  | 11 ++++++++++
 theme/boost/templates/nav-drawer.mustache     |  6 ++++++
 32 files changed, 312 insertions(+), 14 deletions(-)

diff --git a/lib/templates/action_menu.mustache b/lib/templates/action_menu.mustache
index 6445e77ee84..a6dc24377ab 100644
--- a/lib/templates/action_menu.mustache
+++ b/lib/templates/action_menu.mustache
@@ -15,7 +15,20 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/action_menu
+
     Action menu.
+
+    Example context (json):
+    {
+        "classes": "",
+        "primary": {
+            "items": [{"rawhtml": "<p>Item in primary menu</p>"}]
+        },
+        "secondary": {
+            "items": [{"rawhtml": "<p>Item in secondary menu</p>"}]
+        }
+    }
 }}
 <div class="{{classes}}" {{#attributes}}{{name}}="{{value}}"{{/attributes}}>
     {{#primary}}
@@ -37,8 +50,6 @@
             {{#items}}<li role="presentation">{{> core/action_menu_item }}</li>{{/items}}
         </ul>
     {{/secondary}}
-
-    </span>
 </div>
 {{#js}}
 require(['core/yui'], function(Y) {
diff --git a/lib/templates/action_menu_item.mustache b/lib/templates/action_menu_item.mustache
index d00323a5c48..bbbf864c791 100644
--- a/lib/templates/action_menu_item.mustache
+++ b/lib/templates/action_menu_item.mustache
@@ -15,7 +15,14 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/action_menu_item
+
     Action menu item.
+
+    Example context (json):
+    {
+        "rawhtml": "<p>[rawhtml]</p>"
+    }
 }}
 {{#actionmenulink}}{{> core/action_menu_link }}{{/actionmenulink}}
 {{#actionmenufiller}}<span class="filler">&nbsp;</span>{{/actionmenufiller}}
diff --git a/lib/templates/action_menu_link.mustache b/lib/templates/action_menu_link.mustache
index 3c41ad8dd7b..756e95c77dd 100644
--- a/lib/templates/action_menu_link.mustache
+++ b/lib/templates/action_menu_link.mustache
@@ -15,7 +15,16 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/action_menu_link
+
     Action menu link.
+
+    Example context (json):
+    {
+        "text": "Example link text",
+        "showtext": true,
+        "url": "http://example.com/link"
+    }
 }}
 {{^disabled}}
     <a href="{{url}}" class="{{classes}}" {{#attributes}}{{name}}={{#quote}}{{value}}{{/quote}}{{/attributes}} {{#showtext}}aria-labelledby="actionmenuaction-{{instance}}"{{/showtext}}>{{#icon}}{{>core/pix_icon}}{{/icon}}{{#showtext}}<span class="menu-action-text" id="actionmenuaction-{{instance}}">{{{text}}}</span>{{/showtext}}</a>
diff --git a/lib/templates/action_menu_trigger.mustache b/lib/templates/action_menu_trigger.mustache
index 977d382d232..20683739e26 100644
--- a/lib/templates/action_menu_trigger.mustache
+++ b/lib/templates/action_menu_trigger.mustache
@@ -15,6 +15,15 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/action_menu_trigger
+
     Action menu trigger.
+
+    Example context (json):
+    {
+        "instance": "1",
+        "title": "Trigger me!",
+        "menutrigger": true
+    }
 }}
 <a href="#" class="toggle-display {{#menutrigger}}textmenu{{/menutrigger}}" id="action-menu-toggle-{{instance}}" title="{{title}}" role="menuitem">{{{actiontext}}}{{{menutrigger}}}{{#icon}}{{> core/pix_icon}}{{/icon}}{{#rawicon}}{{{.}}}{{/rawicon}}{{#menutrigger}}<b class="caret"></b>{{/menutrigger}}</a>
\ No newline at end of file
diff --git a/lib/templates/actions.mustache b/lib/templates/actions.mustache
index 3d76246d83c..40b2b69115d 100644
--- a/lib/templates/actions.mustache
+++ b/lib/templates/actions.mustache
@@ -15,7 +15,14 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/actions
+
     Actions.
+
+    Example context (json):
+    {
+        "actions": [{"event": "event", "jsfunction": "Y.log", "id": "id"}]
+    }
 }}
 {{#js}}
     require(['core/yui'], function(Y) {
diff --git a/lib/templates/chooser.mustache b/lib/templates/chooser.mustache
index eea553c6bc7..166cf5ddef4 100644
--- a/lib/templates/chooser.mustache
+++ b/lib/templates/chooser.mustache
@@ -15,7 +15,26 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/chooser
+
     Chooser.
+
+    Example context (json):
+    {
+        "title": "Chooser title",
+        "method": "post",
+        "actionurl": "http://example.org/test",
+        "instructions": "Choose one:",
+        "paramname": "param",
+        "sections": [{
+            "id": "section-1",
+            "label": "Section one",
+            "items": [{
+                "label": "item one",
+                "description": "description one"
+            }]
+        }]
+    }
 }}
 <div class="hd choosertitle">
     {{title}}
diff --git a/lib/templates/chooser_item.mustache b/lib/templates/chooser_item.mustache
index cfdea061de6..722b2f57f76 100644
--- a/lib/templates/chooser_item.mustache
+++ b/lib/templates/chooser_item.mustache
@@ -15,7 +15,18 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/chooser_item
+
     Chooser item.
+
+    Example context (json):
+    {
+        "id": "1",
+        "paramname": "param",
+        "value": "1",
+        "label": "item one",
+        "description": "description one"
+    }
 }}
 <div class="option">
     <label for="item_{{id}}">
diff --git a/lib/templates/dataformat_selector.mustache b/lib/templates/dataformat_selector.mustache
index e961ae1194d..6f5110161db 100644
--- a/lib/templates/dataformat_selector.mustache
+++ b/lib/templates/dataformat_selector.mustache
@@ -17,8 +17,7 @@
 {{!
     @template core/dataformat_selector
 
-    Template for all html emails. Note that it may wrap content formatted
-    elsewhere in another a module template.
+    Template for dataformat selection and download form.
 
     Context variables required for this template:
     * label
@@ -28,6 +27,16 @@
     * options
     * sesskey
     * submit
+
+    Example context (json):
+    {
+        "base": "http://example.org/",
+        "name": "test",
+        "label": "Download table data as",
+        "params": false,
+        "options": [{"label": "CSV", "name": "csv"}, {"label": "Excel", "name": "excel"}],
+        "submit": "Download"
+    }
 }}
 <form method="get" action="{{base}}" class="dataformatselector">
     <div class="mdl-align">
diff --git a/lib/templates/email_fromname.mustache b/lib/templates/email_fromname.mustache
index ec43023a985..8bb9803ab4c 100644
--- a/lib/templates/email_fromname.mustache
+++ b/lib/templates/email_fromname.mustache
@@ -15,7 +15,7 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
-    @template core/email_html
+    @template core/email_fromname
 
     Template for all email subjects.
 
@@ -31,5 +31,10 @@
     * fromname
     * replyto
     * replytoname
+
+    Example context (json):
+    {
+        "fromname": "Joe Bloggs"
+    }
 }}
 {{{fromname}}}
diff --git a/lib/templates/email_html.mustache b/lib/templates/email_html.mustache
index e8c1aaaf593..a8d93d98f7f 100644
--- a/lib/templates/email_html.mustache
+++ b/lib/templates/email_html.mustache
@@ -34,5 +34,10 @@
     * replyto
     * replytoname
     * body
+
+    Example context (json):
+    {
+        "body": "Email body"
+    }
 }}
 {{{body}}}
diff --git a/lib/templates/email_subject.mustache b/lib/templates/email_subject.mustache
index c67afdd263e..8454983e23d 100644
--- a/lib/templates/email_subject.mustache
+++ b/lib/templates/email_subject.mustache
@@ -15,7 +15,7 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
-    @template core/email_html
+    @template core/email_subject
 
     Template for all email subjects.
 
@@ -31,5 +31,10 @@
     * fromname
     * replyto
     * replytoname
+
+    Example context (json):
+    {
+        "subject": "Email subject"
+    }
 }}
 {{{subject}}}
diff --git a/lib/templates/email_text.mustache b/lib/templates/email_text.mustache
index 8ffc85a853d..7e537c11f32 100644
--- a/lib/templates/email_text.mustache
+++ b/lib/templates/email_text.mustache
@@ -33,5 +33,10 @@
     * replyto
     * replytoname
     * body
+
+    Example context (json):
+    {
+        "body": "Email body"
+    }
 }}
 {{{body}}}
diff --git a/lib/templates/help_icon.mustache b/lib/templates/help_icon.mustache
index d73c8c3201c..72b2dcd59b0 100644
--- a/lib/templates/help_icon.mustache
+++ b/lib/templates/help_icon.mustache
@@ -15,7 +15,23 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/help_icon
+
     Help icon.
+
+    Example context (json):
+    {
+        "title": "Help with something",
+        "url": "http://example.org/help",
+        "linktext": "",
+        "icon":{
+            "attributes": [
+                {"name": "class", "value": "iconhelp"},
+                {"name": "src", "value": "../../../pix/help.svg"},
+                {"name": "alt", "value": "Help icon"}
+            ]
+        }
+    }
 }}
 <span class="helptooltip">
     <a href="{{url}}" title={{#quote}}{{title}}{{/quote}} aria-haspopup="true" target="_blank">{{#icon}}{{>core/pix_icon}}{{/icon}}{{#linktext}}{{.}}{{/linktext}}</a>
diff --git a/lib/templates/hover_tooltip.mustache b/lib/templates/hover_tooltip.mustache
index b15e58a1506..0a85c16cdfb 100644
--- a/lib/templates/hover_tooltip.mustache
+++ b/lib/templates/hover_tooltip.mustache
@@ -27,6 +27,10 @@
 
     Context variables required for this template:
     * none
+
+    Example context (json):
+    {
+    }
 }}
 <div class="hover-tooltip-container">
     {{$anchor}}{{/anchor}}
diff --git a/lib/templates/loading.mustache b/lib/templates/loading.mustache
index 1c5552503bb..d8199b98472 100644
--- a/lib/templates/loading.mustache
+++ b/lib/templates/loading.mustache
@@ -29,5 +29,8 @@
 
     Context variables required for this template:
     *
+
+    Example context (json):
+    {}
 }}
 <span class="loading-icon">{{#pix}} y/loading, core, {{#str}} loading {{/str}} {{/pix}}</span>
diff --git a/lib/templates/login.mustache b/lib/templates/login.mustache
index 0096a074fd3..886f9860679 100644
--- a/lib/templates/login.mustache
+++ b/lib/templates/login.mustache
@@ -18,6 +18,25 @@
     @template core/login
 
     Moodle template for the login page.
+
+    Example context (json):
+    {
+        "autofocusform": false,
+        "canloginasguest": true,
+        "canloginbyemail": true,
+        "cansignup": true,
+        "error": "testerror",
+        "errorformatted": "Test error formatted",
+        "forgotpasswordurl": "http://example.com/login/forgot_password.php",
+        "hasidentityproviders": false,
+        "hasinstructions": true,
+        "instructions": "For full access to this site, you first need to create an account.",
+        "loginurl": "http://example.com/stable_master/login/index.php",
+        "rememberusername": true,
+        "passwordautocomplete": false,
+        "signupurl": "http://localhost/stable_master/login/signup.php",
+        "cookieshelpiconformatted": ""
+    }
 }}
 {{#hasinstructions}}
 <div class="loginbox clearfix twocolumns">
@@ -155,5 +174,5 @@
             });
         {{/autofocusform}}
     {{/error}}
-    })
+    });
 {{/js}}
diff --git a/lib/templates/pix_icon.mustache b/lib/templates/pix_icon.mustache
index e9867576571..403735c92a8 100644
--- a/lib/templates/pix_icon.mustache
+++ b/lib/templates/pix_icon.mustache
@@ -33,8 +33,9 @@
     Example context (json):
     {
         "attributes": [
-            { "name": "src", "value": "http://moodle.com/wp-content/themes/moodle/images/logo-hat2.png" },
-            { "name": "class", "value": "iconsmall" }
+            { "name": "src", "value": "https://moodle.org/logo/moodle-logo.svg" },
+            { "name": "class", "value": "iconsmall" },
+            {"name": "alt", "value": "Alt text for icon"}
         ]
     }
 
diff --git a/lib/templates/progress_bar.mustache b/lib/templates/progress_bar.mustache
index 7a2653e80eb..ae8ac48a541 100644
--- a/lib/templates/progress_bar.mustache
+++ b/lib/templates/progress_bar.mustache
@@ -15,12 +15,14 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/progress_bar
+
     Progress bar.
 
     Example context (json):
     {
-        id: 'progressbar_test',
-        width: '500'
+        "id": "progressbar_test",
+        "width": "500"
     }
 }}
 <div class="progressbar_container" style="width: {{width}}px;" id="{{id}}">
diff --git a/lib/templates/select_time.mustache b/lib/templates/select_time.mustache
index 1661f33e453..e2954cdcf31 100644
--- a/lib/templates/select_time.mustache
+++ b/lib/templates/select_time.mustache
@@ -15,7 +15,20 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/select_time
+
     Select time.
+
+    Example context (json):
+    {
+        "id": "test-id",
+        "name": "test-name",
+        "label": "Test label",
+        "options": [
+            {"name": "Option 1", "value": "1"},
+            {"name": "Option 2", "value": "2"}
+        ]
+    }
 }}
 <label for="{{id}}" class="accesshide">{{label}}</label>
 <select name="{{name}}" id="{{id}}" {{#attributes}} {{name}}="{{value}}"{{/attributes}}>
diff --git a/lib/templates/signup_form_layout.mustache b/lib/templates/signup_form_layout.mustache
index 80bd360b253..dee3e2d4b85 100644
--- a/lib/templates/signup_form_layout.mustache
+++ b/lib/templates/signup_form_layout.mustache
@@ -1,2 +1,10 @@
+{{!
+    @template core/signup_form_layout
+
+    Example context (json):
+    {
+        "formhtml": "<p>(Form html would go here)</p>"
+    }
+}}
 <h3>{{#str}}newaccount{{/str}}</h3>
 {{{formhtml}}}
diff --git a/lib/templates/skip_links.mustache b/lib/templates/skip_links.mustache
index 8a1ef0de398..6e17fa5af1d 100644
--- a/lib/templates/skip_links.mustache
+++ b/lib/templates/skip_links.mustache
@@ -1,3 +1,14 @@
+{{!
+    @template core/skip_links
+
+    Example context (json):
+    {
+        "links": [
+            {"url": "http://example.com/link1", "text": "Link 1"},
+            {"url": "http://example.com/link2", "text": "Link 2"}
+        ]
+    }
+}}
 <div class="skiplinks">
 {{#links}}
     <a href="#{{{url}}}" class="skip">{{{text}}}</a>
diff --git a/theme/boost/templates/core/action_menu.mustache b/theme/boost/templates/core/action_menu.mustache
index 5befb9c8268..5a0d38f9e07 100644
--- a/theme/boost/templates/core/action_menu.mustache
+++ b/theme/boost/templates/core/action_menu.mustache
@@ -15,7 +15,20 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/action_menu
+
     Action menu.
+
+    Example context (json):
+    {
+        "classes": "",
+        "primary": {
+            "items": [{"rawhtml": "<p>Item in primary menu</p>"}]
+        },
+        "secondary": {
+            "items": [{"rawhtml": "<p>Item in secondary menu</p>"}]
+        }
+    }
 }}
 <div class="action-menu {{classes}}" {{#attributes}}{{name}}="{{value}}"{{/attributes}}>
     {{#primary}}
diff --git a/theme/boost/templates/core/action_menu_item.mustache b/theme/boost/templates/core/action_menu_item.mustache
index d00323a5c48..bbbf864c791 100644
--- a/theme/boost/templates/core/action_menu_item.mustache
+++ b/theme/boost/templates/core/action_menu_item.mustache
@@ -15,7 +15,14 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/action_menu_item
+
     Action menu item.
+
+    Example context (json):
+    {
+        "rawhtml": "<p>[rawhtml]</p>"
+    }
 }}
 {{#actionmenulink}}{{> core/action_menu_link }}{{/actionmenulink}}
 {{#actionmenufiller}}<span class="filler">&nbsp;</span>{{/actionmenufiller}}
diff --git a/theme/boost/templates/core/action_menu_link.mustache b/theme/boost/templates/core/action_menu_link.mustache
index 3c41ad8dd7b..756e95c77dd 100644
--- a/theme/boost/templates/core/action_menu_link.mustache
+++ b/theme/boost/templates/core/action_menu_link.mustache
@@ -15,7 +15,16 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/action_menu_link
+
     Action menu link.
+
+    Example context (json):
+    {
+        "text": "Example link text",
+        "showtext": true,
+        "url": "http://example.com/link"
+    }
 }}
 {{^disabled}}
     <a href="{{url}}" class="{{classes}}" {{#attributes}}{{name}}={{#quote}}{{value}}{{/quote}}{{/attributes}} {{#showtext}}aria-labelledby="actionmenuaction-{{instance}}"{{/showtext}}>{{#icon}}{{>core/pix_icon}}{{/icon}}{{#showtext}}<span class="menu-action-text" id="actionmenuaction-{{instance}}">{{{text}}}</span>{{/showtext}}</a>
diff --git a/theme/boost/templates/core/chooser.mustache b/theme/boost/templates/core/chooser.mustache
index 9efbed1768d..5396e294791 100644
--- a/theme/boost/templates/core/chooser.mustache
+++ b/theme/boost/templates/core/chooser.mustache
@@ -15,7 +15,26 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/chooser
+
     Chooser.
+
+    Example context (json):
+    {
+        "title": "Chooser title",
+        "method": "post",
+        "actionurl": "http://example.org/test",
+        "instructions": "Choose one:",
+        "paramname": "param",
+        "sections": [{
+            "id": "section-1",
+            "label": "Section one",
+            "items": [{
+                "label": "item one",
+                "description": "description one"
+            }]
+        }]
+    }
 }}
 <div class="hd choosertitle">
     {{title}}
diff --git a/theme/boost/templates/core/dataformat_selector.mustache b/theme/boost/templates/core/dataformat_selector.mustache
index 421dfc3423e..3a237519270 100644
--- a/theme/boost/templates/core/dataformat_selector.mustache
+++ b/theme/boost/templates/core/dataformat_selector.mustache
@@ -25,6 +25,16 @@
     * options
     * sesskey
     * submit
+
+    Example context (json):
+    {
+        "base": "http://example.org/",
+        "name": "test",
+        "label": "Download table data as",
+        "params": false,
+        "options": [{"label": "CSV", "name": "csv"}, {"label": "Excel", "name": "excel"}],
+        "submit": "Download"
+    }
 }}
 <form method="get" action="{{base}}" class="dataformatselector m-a-1">
     <div class="form-inline text-xs-right">
diff --git a/theme/boost/templates/core/help_icon.mustache b/theme/boost/templates/core/help_icon.mustache
index 5abbe5b107d..161f0bc4393 100644
--- a/theme/boost/templates/core/help_icon.mustache
+++ b/theme/boost/templates/core/help_icon.mustache
@@ -1,3 +1,22 @@
+{{!
+    @template core/help_icon
+
+    Help icon.
+
+    Example context (json):
+    {
+        "title": "Help with something",
+        "url": "http://example.org/help",
+        "linktext": "",
+        "icon":{
+            "attributes": [
+                {"name": "class", "value": "iconhelp"},
+                {"name": "src", "value": "../../../pix/help.svg"},
+                {"name": "alt", "value": "Help icon"}
+            ]
+        }
+    }
+}}
 <a class="btn btn-link p-a-0" role="button"
     data-container="body" data-toggle="popover"
     data-placement="{{#ltr}}right{{/ltr}}{{^ltr}}left{{/ltr}}" data-content="{{text}} {{completedoclink}}"
diff --git a/theme/boost/templates/core/progress_bar.mustache b/theme/boost/templates/core/progress_bar.mustache
index 7a9d4f6193d..56f8212d8f8 100644
--- a/theme/boost/templates/core/progress_bar.mustache
+++ b/theme/boost/templates/core/progress_bar.mustache
@@ -15,15 +15,17 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/progress_bar
+
     Progress bar.
 
     Example context (json):
     {
-        id: 'progressbar_test',
-        width: '500'
+        "id": "progressbar_test",
+        "width": "500"
     }
 }}
-<div class="row" id="{{id}}" class="progressbar_container">
+<div id="{{id}}" class="row progressbar_container">
     <div class="col-md-6 push-md-3">
         <p id="{{id}}_status" class="text-xs-center"></p>
         <progress id="{{id}}_bar" class="progress progress-striped progress-animated" value="0" max="100"></progress>
diff --git a/theme/boost/templates/core/select_time.mustache b/theme/boost/templates/core/select_time.mustache
index 91164686bd0..64932801369 100644
--- a/theme/boost/templates/core/select_time.mustache
+++ b/theme/boost/templates/core/select_time.mustache
@@ -15,7 +15,20 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
+    @template core/select_time
+
     Select time.
+
+    Example context (json):
+    {
+        "id": "test-id",
+        "name": "test-name",
+        "label": "Test label",
+        "options": [
+            {"name": "Option 1", "value": "1"},
+            {"name": "Option 2", "value": "2"}
+        ]
+    }
 }}
 <label for="{{id}}" class="sr-only">{{label}}</label>
 <select name="{{name}}" id="{{id}}" {{#attributes}} {{name}}="{{value}}"{{/attributes}} class="form-control">
diff --git a/theme/boost/templates/core/signup_form_layout.mustache b/theme/boost/templates/core/signup_form_layout.mustache
index e6696cd796d..f62655e1205 100644
--- a/theme/boost/templates/core/signup_form_layout.mustache
+++ b/theme/boost/templates/core/signup_form_layout.mustache
@@ -1,3 +1,13 @@
+{{!
+    @template core/signup_form_layout
+
+    Example context (json):
+    {
+        "logourl": "https://moodle.org/logo/moodle-logo.svg",
+        "sitename": "Site name",
+        "formhtml": "<p>(Form html would go here)</p>"
+    }
+}}
 <div class="container-fluid">
     <div class="row">
         <div class="col-md-8 push-md-2 col-xl-6 push-xl-3">
diff --git a/theme/boost/templates/core/skip_links.mustache b/theme/boost/templates/core/skip_links.mustache
index 2405f5fe6ee..d8c49a7b7ee 100644
--- a/theme/boost/templates/core/skip_links.mustache
+++ b/theme/boost/templates/core/skip_links.mustache
@@ -1,3 +1,14 @@
+{{!
+    @template core/skip_links
+
+    Example context (json):
+    {
+        "links": [
+            {"url": "http://example.com/link1", "text": "Link 1"},
+            {"url": "http://example.com/link2", "text": "Link 2"}
+        ]
+    }
+}}
 <div>
 {{#links}}
     <a class="sr-only sr-only-focusable" href="#{{{url}}}">{{{text}}}</a>
diff --git a/theme/boost/templates/nav-drawer.mustache b/theme/boost/templates/nav-drawer.mustache
index e22c726d883..f95ed927aec 100644
--- a/theme/boost/templates/nav-drawer.mustache
+++ b/theme/boost/templates/nav-drawer.mustache
@@ -1,3 +1,9 @@
+{{!
+    @template theme_boost/nav-drawer
+
+
+    Example context (json): {}
+}}
 <div id="nav-drawer" data-region="drawer" class="hidden-print moodle-has-zindex {{^navdraweropen}}closed{{/navdraweropen}}" aria-hidden="{{#navdraweropen}}false{{/navdraweropen}}{{^navdraweropen}}true{{/navdraweropen}}" tabindex="-1">
     {{> theme_boost/flat_navigation }}
 </div>

From 514ab739fb1af6c46e23555ea294ccbc30542e04 Mon Sep 17 00:00:00 2001
From: Dan Poltawski <dan@moodle.com>
Date: Thu, 22 Dec 2016 12:30:53 +0000
Subject: [PATCH 4/5] MDL-57338 message: fix template component

---
 message/templates/add_contact_button.mustache    | 2 +-
 message/templates/remove_contact_button.mustache | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/message/templates/add_contact_button.mustache b/message/templates/add_contact_button.mustache
index f94428999d6..c06d6614817 100644
--- a/message/templates/add_contact_button.mustache
+++ b/message/templates/add_contact_button.mustache
@@ -15,7 +15,7 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
-    @template core/add_contact_button
+    @template core_message/add_contact_button
 
     Template for the contents of the add contact button on the user's profile page.
 
diff --git a/message/templates/remove_contact_button.mustache b/message/templates/remove_contact_button.mustache
index 6d8fec25e1f..2f542f55c2a 100644
--- a/message/templates/remove_contact_button.mustache
+++ b/message/templates/remove_contact_button.mustache
@@ -15,12 +15,16 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
-    @template core/add_contact_button
+    @template core_message/add_contact_button
 
     Template for the contents of the add contact button on the user's profile page.
 
     Context variables required for this template:
-    *
+    * none
+
+    Example context (json):
+    {
+    }
 }}
 <span>
     {{#pix}} t/removecontact, core {{/pix}}

From 9f8587624796d1b3aa15350a996a2be0cde2ec0a Mon Sep 17 00:00:00 2001
From: Dan Poltawski <dan@moodle.com>
Date: Thu, 29 Dec 2016 08:03:47 +0000
Subject: [PATCH 5/5] MDL-57338 templates: fix missing example variables

From Davids review, thanks
---
 lib/templates/action_menu_link.mustache                 | 4 +++-
 lib/templates/login.mustache                            | 3 ++-
 theme/boost/templates/core/dataformat_selector.mustache | 4 +++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/lib/templates/action_menu_link.mustache b/lib/templates/action_menu_link.mustache
index 756e95c77dd..054df8b5302 100644
--- a/lib/templates/action_menu_link.mustache
+++ b/lib/templates/action_menu_link.mustache
@@ -23,7 +23,9 @@
     {
         "text": "Example link text",
         "showtext": true,
-        "url": "http://example.com/link"
+        "url": "http://example.com/link",
+        "classes": "menu-action",
+        "instance": "1"
     }
 }}
 {{^disabled}}
diff --git a/lib/templates/login.mustache b/lib/templates/login.mustache
index 886f9860679..3ee5e2a02b6 100644
--- a/lib/templates/login.mustache
+++ b/lib/templates/login.mustache
@@ -35,7 +35,8 @@
         "rememberusername": true,
         "passwordautocomplete": false,
         "signupurl": "http://localhost/stable_master/login/signup.php",
-        "cookieshelpiconformatted": ""
+        "cookieshelpiconformatted": "",
+        "username": ""
     }
 }}
 {{#hasinstructions}}
diff --git a/theme/boost/templates/core/dataformat_selector.mustache b/theme/boost/templates/core/dataformat_selector.mustache
index 3a237519270..7c11ab39754 100644
--- a/theme/boost/templates/core/dataformat_selector.mustache
+++ b/theme/boost/templates/core/dataformat_selector.mustache
@@ -30,10 +30,12 @@
     {
         "base": "http://example.org/",
         "name": "test",
+        "value": "test",
         "label": "Download table data as",
         "params": false,
         "options": [{"label": "CSV", "name": "csv"}, {"label": "Excel", "name": "excel"}],
-        "submit": "Download"
+        "submit": "Download",
+        "sesskey": ""
     }
 }}
 <form method="get" action="{{base}}" class="dataformatselector m-a-1">