macros

app/views/examples/macros.html

@@ -0,0 +1,70 @@
+{% extends "layout.html" %}
+
+{% block page_title %}
+  Example - Macros
+{% endblock %}
+
+{% block content %}
+<main id="content" role="main">
+
+  {% include "includes/breadcrumb_examples.html" %}
+
+  <div class="grid-row">
+    <div class="column-two-thirds">
+
+      <h1 class="heading-xlarge">
+        Macros
+      </h1>
+
+      <form action="">
+
+        <div class="form-group">
+
+          {{ macro.text('First name') }}   
+
+        </div>
+
+        <div class="form-group">
+
+          {{ macro.text('Last name') }}  
+
+        </div> 
+
+        <div class="form-group">
+
+          <h2 class="heading-medium">
+            Role
+          </h2>
+
+          {{ macro.radio('Role', 'Teacher') }}
+
+          {{ macro.radio('Role', 'Student') }}
+
+          {{ macro.radio('Role', 'Administrator') }}
+
+        </div> 
+
+        <div class="form-group">
+
+          <h2 class="heading-medium">
+            How do you get to school?
+          </h2>
+
+          <p>Select all that apply</p>
+
+          {{ macro.checkbox('Bicycle') }}
+
+          {{ macro.checkbox('Bus') }}
+
+          {{ macro.checkbox('Car') }}
+
+          {{ macro.checkbox('Train') }}
+
+        </div> 
+
+      </form>
+
+    </div>
+  </div>
+</main>
+{% endblock %}

app/views/layout.html

@@ -1,5 +1,7 @@
 {% extends "govuk_template.html" %}
 
+{% import "includes/macros.html" as macro %}
+
 {% block head %}
   {% include "includes/head.html" %}
 {% endblock %}

lib/core_filters.js

@@ -22,5 +22,28 @@ module.exports = function(env) {
   	return nunjucksSafe('<script>console.log(' + JSON.stringify(a, null, '\t') + ');</script>');
   };
 
+  /**
+   * turns a string into a slug that's safe for use in urls or html attributes
+   * @param  {String} a any type
+   * @return {String} a web-safe slug
+   */
+
+  filters.slug = function slug(input){
+
+    var output;
+
+    try{
+      output = input.toString();
+    } catch (error){
+      console.error(`core_filters.js couldn't make a slug from ${input}`);
+      return;
+    }
+    output = output.toLowerCase();
+    output = output.replace(/\s+/g,'-');
+    output = encodeURIComponent(output);
+
+    return output;
+  }
+
   return filters;
 }

lib/views/includes/macros.html

@@ -0,0 +1,26 @@
+{% macro text(label, name=label) %}
+
+  <label class="form-label" for="{{name | slug}}">{{label}}</label>
+  <input class="form-control" id="{{name | slug}}" type="text">
+
+{% endmacro %}
+
+
+{% macro radio(name, label) %}
+
+  <label class="block-label" for="{{label | slug}}">
+  <input id="{{label | slug}}" type="radio" name="{{name}}" value="{{label | slug}}">
+    {{label}}
+  </label>
+
+{% endmacro %}
+
+
+{% macro checkbox(label, name=label) %}
+
+  <label class="block-label" for="{{name | slug}}">
+    <input id="{{name | slug}}" name="{{name | slug}}" type="checkbox" value="{{name | slug}}">
+    {{label}}
+  </label>
+
+{% endmacro %}

server.js

@@ -32,7 +32,7 @@ if (env === 'production' && useAuth === 'true'){
 
 // Application settings
 app.set('view engine', 'html');
-app.set('views', [__dirname + '/app/views', __dirname + '/lib/']);
+app.set('views', [__dirname + '/app/views', __dirname + '/lib/views']);
 
 nunjucks.setup({
   autoescape: true,