Make it easy to prototype with a component based architecture

app/assets/sass/application.scss

@@ -12,4 +12,6 @@ $govuk-global-styles: true;
 // Components that aren't in Frontend
 @import "components/cookie-banner";
 
+@import "../../components/all";
+
 // Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you

app/components/_all.scss

@@ -0,0 +1 @@
+@import "example-component/example-component";

app/components/example-component/README.md

@@ -0,0 +1 @@
+# Example component

app/components/example-component/_example-component.scss

@@ -0,0 +1,9 @@
+.app-example-component {
+  @include govuk-font(
+    $size: 24,
+    $weight: bold
+  );
+  background-color: govuk-colour('pink');
+  color: govuk-colour('white');
+  padding: govuk-spacing(6);
+}

app/components/example-component/example-component.js

@@ -0,0 +1,3 @@
+function ExampleComponent() {
+  console.log('Example component');
+}

app/components/example-component/macro.njk

@@ -0,0 +1,3 @@
+{% macro appExampleComponent(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

app/components/example-component/template.njk

@@ -0,0 +1,3 @@
+<div class="app-example-component">
+  {{params.text}}
+</div>

app/views/includes/scripts.html

@@ -2,6 +2,7 @@
 <script src="/public/javascripts/jquery-1.11.3.js"></script>
 <script src="/node_modules/govuk-frontend/all.js"></script>
 <script src="/public/javascripts/application.js"></script>
+<script src="/public/javascripts/example-component/example-component.js"></script>
 
 {% if useAutoStoreData %}
   <script src="/public/javascripts/auto-store-data.js"></script>

app/views/layout.html

@@ -23,6 +23,8 @@
 {% from "textarea/macro.njk"      import govukTextarea %}
 {% from "warning-text/macro.njk"  import govukWarningText %}
 
+{% from "example-component/macro.njk"  import appExampleComponent %}
+
 {% block head %}
   {% include "includes/head.html" %}
 {% endblock %}

docs/views/examples/component.html

@@ -0,0 +1,39 @@
+{% extends "layout.html" %}
+
+{% block pageTitle %}
+Getting started - GOV.UK Prototype Kit
+{% endblock %}
+
+{% block beforeContent %}
+	{{ govukBreadcrumbs({
+	  items: [
+	    {
+	      text: "GOV.UK Prototype Kit",
+	      href: "/docs"
+	    }
+	  ]
+	}) }}
+{% endblock %}
+
+{% block content %}
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+
+      <h1 class="govuk-heading-xl">Components</h1>
+
+      {{appExampleComponent({text: 'Example component text'})}}
+
+  </div>
+
+
+</div>
+
+
+{% endblock %}
+
+{% block pageScripts %}
+  <script>
+    new ExampleComponent();
+  </script>
+{% endblock %}

docs/views/includes/scripts.html

@@ -2,6 +2,7 @@
 <script src="/public/javascripts/jquery-1.11.3.js"></script>
 <script src="/node_modules/govuk-frontend/all.js"></script>
 <script src="/public/javascripts/docs.js"></script>
+<script src="/public/javascripts/example-component/example-component.js"></script>
 
 {% if useAutoStoreData %}
   <script src="/public/javascripts/auto-store-data.js"></script>

docs/views/layout.html

@@ -23,6 +23,8 @@
 {% from "textarea/macro.njk"      import govukTextarea %}
 {% from "warning-text/macro.njk"  import govukWarningText %}
 
+{% from "example-component/macro.njk"  import appExampleComponent %}
+
 {% block head %}
   {% include "includes/head.html" %}
   {% if doNotTrackEnabled == false and promoMode == 'true' and gtmId %}
@@ -108,5 +110,6 @@
 
 {% block bodyEnd %}
   {% include "includes/scripts.html" %}
+  {% block pageScripts %}{% endblock %}
   <!-- GOV.UK Prototype Kit {{releaseVersion}} -->
 {% endblock %}

gulp/config.json

@@ -5,6 +5,7 @@
     "docsAssets" : "docs/assets/",
     "v6Assets": "app/v6/assets/",
     "nodeModules": "node_modules/",
-    "lib": "lib/"
+    "lib": "lib/",
+    "components" : "app/components/"
   }
 }

gulp/copy-assets.js

@@ -13,6 +13,13 @@ gulp.task('copy-assets', function () {
     .pipe(gulp.dest(config.paths.public))
 })
 
+gulp.task('copy-component-js', function () {
+  return gulp.src([
+    config.paths.components + '**/*.js'
+  ])
+  .pipe(gulp.dest(config.paths.public + 'javascripts/'))
+})
+
 gulp.task('copy-assets-documentation', function () {
   return gulp.src(['!' + config.paths.docsAssets + 'sass{,/**/*}',
     config.paths.docsAssets + '/**'])

gulp/tasks.js

@@ -18,6 +18,7 @@ gulp.task('generate-assets', function (done) {
   runSequence('clean',
     'sass',
     'copy-assets',
+    'copy-component-js',
     'sass-documentation',
     'copy-assets-documentation',
     'sass-v6',

gulp/watch.js

@@ -8,12 +8,16 @@ const gulp = require('gulp')
 const config = require('./config.json')
 
 gulp.task('watch-sass', function () {
-  return gulp.watch(config.paths.assets + 'sass/**', {cwd: './'}, ['sass'])
+  return gulp.watch([
+    config.paths.components + '/**',
+    config.paths.assets + 'sass/**'], {cwd: './'}, ['sass'])
 })
 
 gulp.task('watch-assets', function () {
-  return gulp.watch([config.paths.assets + 'images/**',
-    config.paths.assets + 'javascripts/**'], {cwd: './'}, ['copy-assets'])
+  return gulp.watch([
+    config.paths.components + '/**',
+    config.paths.assets + 'images/**',
+    config.paths.assets + 'javascripts/**'], {cwd: './'}, ['copy-assets', 'copy-component-js'])
 })
 
 // Backward compatibility with Elements

server.js

@@ -91,7 +91,8 @@ var appViews = [
   path.join(__dirname, '/node_modules/govuk-frontend/'),
   path.join(__dirname, '/node_modules/govuk-frontend/components'),
   path.join(__dirname, '/app/views/'),
-  path.join(__dirname, '/lib/')
+  path.join(__dirname, '/lib/'),
+  path.join(__dirname, '/app/components/')
 ]
 
 var nunjucksAppEnv = nunjucks.configure(appViews, {
@@ -120,7 +121,8 @@ if (useDocumentation) {
     path.join(__dirname, '/node_modules/govuk-frontend/'),
     path.join(__dirname, '/node_modules/govuk-frontend/components'),
     path.join(__dirname, '/docs/views/'),
-    path.join(__dirname, '/lib/')
+    path.join(__dirname, '/lib/'),
+    path.join(__dirname, '/app/components/')
   ]
 
   var nunjucksDocumentationEnv = nunjucks.configure(documentationViews, {