From 618b2157d91f5a922adc491c60acb303c783f23b Mon Sep 17 00:00:00 2001
From: Viktoria Nedyalkova <viktoria.nedyalkova@endava.com>
Date: Thu, 25 May 2023 16:10:42 +0300
Subject: [PATCH] Add Test component

---
 assets/js/components/TestComponent.js         | 20 +++++++++++++++++++
 assets/js/main.js                             |  1 +
 .../sass/patterns/atoms/test-component.scss   |  5 +++++
 .../00-atoms/components/test-component.json   |  3 +++
 .../components/test-component.mustache        |  3 +++
 .../00-atoms/components/test-component.yaml   |  8 ++++++++
 6 files changed, 40 insertions(+)
 create mode 100644 assets/js/components/TestComponent.js
 create mode 100644 assets/sass/patterns/atoms/test-component.scss
 create mode 100644 source/_patterns/00-atoms/components/test-component.json
 create mode 100644 source/_patterns/00-atoms/components/test-component.mustache
 create mode 100644 source/_patterns/00-atoms/components/test-component.yaml

diff --git a/assets/js/components/TestComponent.js b/assets/js/components/TestComponent.js
new file mode 100644
index 000000000..c42d97090
--- /dev/null
+++ b/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!" 
+  }
+};
diff --git a/assets/js/main.js b/assets/js/main.js
index 65c6f11f5..c1b27e7ab 100644
--- a/assets/js/main.js
+++ b/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');
diff --git a/assets/sass/patterns/atoms/test-component.scss b/assets/sass/patterns/atoms/test-component.scss
new file mode 100644
index 000000000..cd9bfe49d
--- /dev/null
+++ b/assets/sass/patterns/atoms/test-component.scss
@@ -0,0 +1,5 @@
+@import "../../definitions";
+
+.test-component--wrapper {
+  color: $color-attention;
+}
diff --git a/source/_patterns/00-atoms/components/test-component.json b/source/_patterns/00-atoms/components/test-component.json
new file mode 100644
index 000000000..59774adab
--- /dev/null
+++ b/source/_patterns/00-atoms/components/test-component.json
@@ -0,0 +1,3 @@
+{
+  "name": "Click me!"
+}
diff --git a/source/_patterns/00-atoms/components/test-component.mustache b/source/_patterns/00-atoms/components/test-component.mustache
new file mode 100644
index 000000000..d1686f298
--- /dev/null
+++ b/source/_patterns/00-atoms/components/test-component.mustache
@@ -0,0 +1,3 @@
+<div class="test-component--wrapper" data-behaviour="TestComponent">
+  {{name}}
+</div>
diff --git a/source/_patterns/00-atoms/components/test-component.yaml b/source/_patterns/00-atoms/components/test-component.yaml
new file mode 100644
index 000000000..7b2a067c9
--- /dev/null
+++ b/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