Add Test component

assets/js/components/TestComponent.js

@@ -0,0 +1,20 @@
+'use strict';
+
+module.exports = class TestComponent {
+
+  constructor($elm, _window = window, doc = document) {
+    if (!$elm) {
+      return;
+    }
+
+    this.$elm = $elm;
+    this.window = _window;
+    this.doc = doc;
+
+    this.$elm.addEventListener('click', this.changeText.bind(this));
+  }
+
+  changeText() {
+    this.$elm.innerHTML = "Clicked!" 
+  }
+};

assets/js/main.js

@@ -44,6 +44,7 @@ Components.SelectNav = require('./components/SelectNav');
 Components.SideBySideView = require('./components/SideBySideView');
 Components.SiteHeader = require('./components/SiteHeader');
 Components.SpeechBubble = require('./components/SpeechBubble');
+Components.TestComponent = require('./components/TestComponent');
 Components.ToggleableCaption = require('./components/ToggleableCaption');
 Components.Twitter = require('./components/Twitter');
 Components.ViewerModal = require('./components/ViewerModal');

assets/sass/patterns/atoms/test-component.scss

@@ -0,0 +1,5 @@
+@import "../../definitions";
+
+.test-component--wrapper {
+  color: $color-attention;
+}

source/_patterns/00-atoms/components/test-component.json

@@ -0,0 +1,3 @@
+{
+  "name": "Click me!"
+}

source/_patterns/00-atoms/components/test-component.mustache

@@ -0,0 +1,3 @@
+<div class="test-component--wrapper" data-behaviour="TestComponent">
+  {{name}}
+</div>

source/_patterns/00-atoms/components/test-component.yaml

@@ -0,0 +1,8 @@
+$schema: http://json-schema.org/draft-04/schema#
+type: object
+properties:
+  name:
+    type: string
+    minLength: 1
+required:
+  - name